/* ============================================================
   LAYER ENGINE 1.0 — PNG ANIMATION SYSTEM FOR HERO SLIDER
   4 warstwy z-index + 5 efektów wejścia + 1 globalny exit
   ============================================================ */

.hero-layer-stack {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 30; /* poniżej tekstów, powyżej bitmap slajdu */
}

.hero-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transform: translate3d(0,0,0);
    pointer-events: none;
}

/* ============================================================
   1. ENTER EFFECTS (warstwy wjeżdżają)
   Możesz dowolnie podmieniać lub dodawać nowe.
   ============================================================ */

/* efekt 1: slide-left-in */
.layer-enter-1 {
    animation: layerEnterLeft 1.3s cubic-bezier(0.22,1,0.36,1) forwards;
}

@keyframes layerEnterLeft {
    0%   { transform: translateX(-80px) scale(1.02); opacity: 0; }
    100% { transform: translateX(0)      scale(1.00); opacity: 1; }
}

/* efekt 2: slide-right-in */
.layer-enter-2 {
    animation: layerEnterRight 1.3s cubic-bezier(0.22,1,0.36,1) forwards;
}

@keyframes layerEnterRight {
    0%   { transform: translateX(80px) scale(1.02); opacity: 0; }
    100% { transform: translateX(0)    scale(1.00); opacity: 1; }
}

/* efekt 3: slide-bottom-in */
.layer-enter-3 {
    animation: layerEnterBottom 1.4s cubic-bezier(0.22,1,0.36,1) forwards;
}

@keyframes layerEnterBottom {
    0%   { transform: translateY(80px) scale(1.01); opacity: 0; }
    100% { transform: translateY(0)    scale(1.00); opacity: 1; }
}

/* efekt 4: zoom-soft */
.layer-enter-4 {
    animation: layerEnterZoom 1.2s cubic-bezier(0.22,1,0.36,1) forwards;
}

@keyframes layerEnterZoom {
    0%   { transform: scale(1.12); opacity: 0; }
    100% { transform: scale(1.00); opacity: 1; }
}

/* efekt 5: micro-fade + micro-slide */
.layer-enter-5 {
    animation: layerEnterFade 1.0s ease-out forwards;
}

@keyframes layerEnterFade {
    0%   { opacity: 0; transform: translateX(-12px); }
    100% { opacity: 1; transform: translateX(0); }
}
/* efekt 6: parallax-depth */
.layer-enter-6 {
    animation: layerEnterParallax 1.35s cubic-bezier(0.22,1,0.36,1) forwards;
}

@keyframes layerEnterParallax {
    0% {
        transform: translateX(-60px) translateY(30px) scale(1.06);
        filter: blur(4px);
        opacity: 0;
    }
    60% {
        filter: blur(0px);
    }
    100% {
        transform: translateX(0) translateY(0) scale(1.00);
        opacity: 1;
    }
}
/* efekt 7: cinematic zoom-fade */
.layer-enter-7 {
    animation: layerEnterCinematic 1.6s cubic-bezier(0.32,1,0.38,1) forwards;
}

@keyframes layerEnterCinematic {
    0% {
        transform: scale(1.18);
        opacity: 0;
    }
    100% {
        transform: scale(1.00);
        opacity: 1;
    }
}

/* efekt 8: soft-rotate-slide (premium wejście z lekkim obrotem) */
.layer-enter-8 {
    /* czas trwania + krzywa easingu */
    animation: layerEnterRotate 1.25s cubic-bezier(0.33, 1, 0.36, 1) forwards;
}

@keyframes layerEnterRotate {
    0% {
        /* punkt startowy: trochę z prawej, lekko przekręcone, minimalnie większe */
        transform: translateX(60px) rotateZ(6deg) scale(1.04);
        opacity: 0;
    }
    60% {
        /* środek ruchu: prawie na miejscu, delikatnie mniejszy obrót,
           opacity już prawie pełne */
        transform: translateX(6px) rotateZ(1deg) scale(1.01);
        opacity: 0.95;
    }
    100% {
        /* stan końcowy: idealnie na miejscu, bez obrotu, pełna widoczność */
        transform: translateX(0) rotateZ(0deg) scale(1.00);
        opacity: 1;
    }
}


/* ============================================================
   2. EXIT EFFECT — wspólny dla wszystkich warstw
   ============================================================ */

.layer-exit {
    animation: layerExitFade 0.6s ease-out forwards;
}

@keyframes layerExitFade {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}
/* ============================================================
   TEXT ENGINE 2.0 — positioning + scaling + data-text support
   Kompatybilne ze slider.js (sekcja 1B + sekcja 3C)
   ============================================================ */

/* Kontener tekstu */
.hero-text {
    position: absolute;
    inset: 0;
    z-index: 70;
    pointer-events: none;

    /* OBSŁUGA SKALOWANIA Z SLIDER.JS (sekcja 1B) */
    transform-origin: 0 0;
    transform:
        translateY(var(--heroTextYOffset, 0px))
        scale(var(--heroTextScale, 1));
}

/* Każdy element tekstowy */
.hero-text h1,
.hero-text h2,
.hero-text h4 {
    position: absolute;
    margin: 0;
    padding: 0;
    white-space: nowrap;

    opacity: 0; /* slider.js usuwa/ustawia animacje */
    pointer-events: none;
    transition: none;

    font-family: 'Open Sans', "Helvetica Neue"; /* czcionka napisow */
    font-weight: 600;
}

/* ============================================================
   TEXT ENGINE — ANIMACJE (zgodne z animateTextOnSlide)
   ============================================================ */
/* ============================================================
   TEXT ANIMATIONS — premium slow-motion version
   ============================================================ */

/* === fadeInDown (anim:1) === */
@keyframes tFadeDown {
    0%   { opacity: 0; transform: translateY(-45px); }
    100% { opacity: 1; transform: translateY(0); }
}
.t-anim-down {
    animation: tFadeDown 1.45s cubic-bezier(0.25, 1, 0.35, 1) forwards;
}

/* === fadeInUp (anim:2) === */
@keyframes tFadeUp {
    0%   { opacity: 0; transform: translateY(45px); }
    100% { opacity: 1; transform: translateY(0); }
}
.t-anim-up {
    animation: tFadeUp 1.45s cubic-bezier(0.25, 1, 0.35, 1) forwards;
}

/* === fadeInRight (anim:3) === */
@keyframes tFadeRight {
    0%   { opacity: 0; transform: translateX(45px); }
    100% { opacity: 1; transform: translateX(0); }
}
.t-anim-right {
    animation: tFadeRight 1.45s cubic-bezier(0.25, 1, 0.35, 1) forwards;
}

/* === fadeInLeft (anim:4) === */
@keyframes tFadeLeft {
    0%   { opacity: 0; transform: translateX(-45px); }
    100% { opacity: 1; transform: translateX(0); }
}
.t-anim-left {
    animation: tFadeLeft 1.45s cubic-bezier(0.25, 1, 0.35, 1) forwards;
}

/* ============================================================
   HERO TEXT — MOBILE SMART SCALING (OPTION C)
   ============================================================ */

@media (max-width: 768px) {

    .hero-text {
        /* Mobile używa własnej skali — domyślnie 0.75 */
        transform: scale(var(--heroTextScaleMobile, 0.75));
        transform-origin: top left;
    }

    .hero-text h1,
    .hero-text h2,
    .hero-text h4 {
        /* Ustawiamy oryginalny font-size jako bazę (CSS variable ustawiana w JS) */
        font-size: clamp(
            10px,
            calc(var(--heroTextScaleMobile, 0.75) * var(--t-orig-font, 20px)),
            22px
        );
        line-height: 1.15;
    }
}
/* ============================================================
   TEXT ANIMATIONS — anim:1–4
   ============================================================ */

/* fadeInDown */
@keyframes tFadeDown {
    from { opacity: 0; transform: translateY(-60px); }
    to   { opacity: 1; transform: translateY(0); }
}
.t-anim-down {
    animation: tFadeDown 1.0s cubic-bezier(0.22,1,0.36,1) forwards;
}

/* fadeInUp */
@keyframes tFadeUp {
    from { opacity: 0; transform: translateY(60px); }
    to   { opacity: 1; transform: translateY(0); }
}
.t-anim-up {
    animation: tFadeUp 1.0s cubic-bezier(0.22,1,0.36,1) forwards;
}

/* fadeInRight */
@keyframes tFadeRight {
    from { opacity: 0; transform: translateX(60px); }
    to   { opacity: 1; transform: translateX(0); }
}
.t-anim-right {
    animation: tFadeRight 1.05s cubic-bezier(0.22,1,0.36,1) forwards;
}

/* fadeInLeft */
@keyframes tFadeLeft {
    from { opacity: 0; transform: translateX(-60px); }
    to   { opacity: 1; transform: translateX(0); }
}
.t-anim-left {
    animation: tFadeLeft 1.05s cubic-bezier(0.22,1,0.36,1) forwards;
}