/*


 * cis-wow.css


 * Globalne style efektów interaktywnych — instytutsi.pl


 *


 * @author    Wojciech Modzelewski <kontakt@instytutsi.pl>


 * @copyright 2025-2026 Wojciech Modzelewski / GabinetSI / PRAXIO


 */





/* ══════════════════════════════════════════


   1. SCROLL REVEAL


══════════════════════════════════════════ */


.reveal {


    opacity: 0;


    transform: translateY(22px);


    transition: opacity 0.65s ease, transform 0.65s ease;


}


.reveal-left {


    opacity: 0;


    transform: translateX(-28px);


    transition: opacity 0.65s ease, transform 0.65s ease;


}


.reveal-right {


    opacity: 0;


    transform: translateX(28px);


    transition: opacity 0.65s ease, transform 0.65s ease;


}


.reveal-scale {


    opacity: 0;


    transform: scale(0.94);


    transition: opacity 0.55s ease, transform 0.55s ease;


}


.reveal.cis-visible,


.reveal-left.cis-visible,


.reveal-right.cis-visible,


.reveal-scale.cis-visible {


    opacity: 1;


    transform: none;


}


/* Stagger dzieci */


.cis-stagger {


    opacity: 0;


    transform: translateY(16px);


    transition: opacity 0.5s ease, transform 0.5s ease;


}


.cis-stagger.cis-visible {


    opacity: 1;


    transform: none;


}


/* Respekt dla prefers-reduced-motion */


@media (prefers-reduced-motion: reduce) {


    .reveal, .reveal-left, .reveal-right, .reveal-scale, .cis-stagger {


        opacity: 1 !important;


        transform: none !important;


        transition: none !important;


    }


}





/* ══════════════════════════════════════════


   2. LICZNIKI — wrapper


══════════════════════════════════════════ */


[data-counter] {


    font-variant-numeric: tabular-nums;


    display: inline-block;


}





/* ══════════════════════════════════════════


   3. COUNTDOWN TIMER


══════════════════════════════════════════ */


.cis-countdown {


    display: flex;


    gap: 8px;


    flex-wrap: wrap;


    align-items: center;


}


.cis-cd-unit {


    display: flex;


    flex-direction: column;


    align-items: center;


    background: rgba(13, 43, 69, 0.08);


    border: 1px solid rgba(13, 43, 69, 0.25);


    border-radius: 8px;


    padding: 8px 14px;


    min-width: 58px;


}


.cis-cd-unit [data-cd] {


    font-size: 1.6rem;


    font-weight: 700;


    line-height: 1;


    color: #C4788A;


    font-variant-numeric: tabular-nums;


}


.cis-cd-label {


    font-size: 0.6rem;


    text-transform: uppercase;


    letter-spacing: 0.1em;


    color: rgba(255,255,255,0.45);


    margin-top: 3px;


}


/* Wersja liniowa (np. w headerze programu) */


.cis-cd-inline {


    display: inline-flex;


    align-items: center;


    gap: 6px;


    background: rgba(13, 43, 69, 0.08);


    border: 1px solid rgba(13, 43, 69, 0.25);


    border-radius: 100px;


    padding: 5px 14px;


    font-size: 0.82rem;


    font-weight: 700;


    color: #C4788A;


}





/* ══════════════════════════════════════════


   5. HOVER CARDS — efekt paska kolorowego


══════════════════════════════════════════ */


.cis-hover-card {


    position: relative;


    overflow: hidden;


    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;


}


.cis-hover-card::before {


    content: '';


    position: absolute;


    top: 0; left: 0; right: 0;


    height: 3px;


    background: var(--card-color, #2d4a6e);


    transform: scaleX(0);


    transform-origin: left;


    transition: transform 0.3s ease;


}


.cis-hover-card:hover {


    transform: translateY(-3px);


    box-shadow: 0 8px 28px rgba(0,0,0,0.1);


    border-color: var(--card-color, #2d4a6e) !important;


}


.cis-hover-card:hover::before {


    transform: scaleX(1);


}





/* Automatycznie dodaj efekt do kart programów */


.p-card,


.prog-card,


.kp-wyk-card,


.cis-kurs-card {


    transition: transform 0.2s ease, box-shadow 0.2s ease !important;


    position: relative;


    overflow: hidden;


}


.p-card:hover,


.kp-wyk-card:hover {


    transform: translateY(-3px) !important;


    box-shadow: 0 8px 28px rgba(0,0,0,0.1) !important;


}





/* ══════════════════════════════════════════


   6. PROGRESS BARS


══════════════════════════════════════════ */


.p-hb,


.hours-bar {


    transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1);


}





/* ══════════════════════════════════════════


   7. PARTICLES — hero ma position relative


══════════════════════════════════════════ */


.kp-hero,


.p-hero,


.prg-hero {


    --particle-color: #2d4a6e;


}


/* Upewnij się że content hero jest nad canvas */


.kp-hero canvas,


.p-hero canvas,


.prg-hero canvas {


    z-index: 0 !important;


}


.kp-hero > *:not(canvas),


.p-hero > *:not(canvas),


.prg-hero > *:not(canvas) {


    position: relative;


    z-index: 2;


}





/* ══════════════════════════════════════════


   DODATKOWE — globalne ulepszenia UX


══════════════════════════════════════════ */





/* Płynne scrollowanie do sekcji */


html {


    scroll-behavior: smooth;


}





/* Focus ring dostępny */


:focus-visible {


    outline: 2px solid #2d4a6e;


    outline-offset: 2px;


}





/* Przyciski — subtelny efekt kliknięcia */


.p-btn:active,


.kp-hero__cta-btn:active,


.btn-cyan:active {


    transform: scale(0.97) !important;


}