/* ============================================================
   HERO SLIDER — FINAL PURE VERSION
   Layout + manual engine + footer-box dots + fashion control-nav
   ============================================================ */
/* ============================================================
   HERO SLIDER — H3 (neutralny, bez efektów)
   ============================================================ */

.hero-text h3 {
    font-family: 'Helvetica Neue', "Open Sans";
    font-weight: 400;          /* lżejszy niż h1/h2 */
    letter-spacing: 0.01em;    /* subtelna stabilizacja */
    line-height: 1.25;

    /* text-shadow: none;         kluczowe — brak glow/obwódki */
    text-shadow:
        -1px  0   0 rgba(0,0,0,0.1),
         1px  0   0 rgba(0,0,0,0.1),
         0   -1px 0 rgba(0,0,0,0.1),
         0    1px 0 rgba(0,0,0,0.1);

}

.hero-text h2 {
    color: #FF9C01;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.55),
        0 4px 18px rgba(0, 0, 0, 0.45),
        0 8px 32px rgba(0, 0, 0, 0.35);
}
.hero-text h4 {
    color: #FF9C01;

    text-shadow:
        0 1px 4px rgba(0, 0, 0, 0.45),
        0 2px 9px rgba(0, 0, 0, 0.45),
        0 4px 16px rgba(0, 0, 0, 0.45);
}
.hero-text h1 {
    color: #FF9C01;

    font-weight: 700;          /* kluczowe */
    letter-spacing: 0.02em;    /* stabilizuje kształt liter */
    line-height: 1.05;

    text-shadow:
        /* obwódka */
        -1px -1px 0 rgba(255,255,255,0.6),
         1px -1px 0 rgba(255,255,255,0.6),
        -1px  1px 0 rgba(255,255,255,0.6),
         1px  1px 0 rgba(255,255,255,0.6),

        /* biały glow */
         0  1px 1px  rgba(255,255,255,0.55),
         0  1px 1px rgba(255,255,255,0.35),
         0 1px 1px rgba(255,255,255,0.22);
}

/* ============================================================
   1. GŁÓWNA SEKCJA SLIDERA
   ============================================================ */

.hero-slider-section {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.hero-slider-section .hero-slider {
    width: 100%;
    aspect-ratio: 2.4 / 1;
    position: relative;
    overflow: hidden;
}
@media (max-width: 768px) {
    .hero-slider-section .hero-slider {
        aspect-ratio: 1.45 / 1;   /* Pionowość, ale nie ekstremalna */
    }
    .hero-slide-inner img {
        object-fit: contain;

    }
}



/* MOBILE — zmiana proporcji slidera */
@media (max-width: 767px) {
    .hero-slider-section .hero-slider {
        aspect-ratio: 16 / 9;
    }
    .hero-slider-section {
        margin-top: 66px; /* uniknięcie kolizji z navbar */
    }
}
/* ============================================================
   2. SLAJDY + ANIMACJE BAZOWE
   — pełna stabilność layoutu, maskowanie bitmap (overflow: hidden),
     minimalne własne animacje (główne animacje wykonują sekcje 3 i 3B)
   ============================================================ */

.hero-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-slide-inner {
    position: absolute;
    inset: 0;
    opacity: 0; /* slajd domyślnie niewidoczny */
    pointer-events: none; /* brak interakcji z nieaktywnymi slajdami */
    transform: translate3d(0,0,0); /* stabilizacja, eliminacja jitter */
    z-index: 1;
    overflow: hidden; /* kluczowe: maskuje nadmiar bitmapy, zero wyjeżdżania */
    transition:
        transform 0.7s ease, /* bazowe przejście, efekty nadpisują parametry */
        opacity   0.7s ease;
}
/* FIX — odcięcie tekstów od transform dziedziczonych z slide-inner */
.hero-text h1,
.hero-text h2,
.hero-text h3,
.hero-text h4 {
    transform: translate3d(0,0,0); /* ZERO konfliktu z animacją JS */
    will-change: transform, opacity; /* poprawa stabilności i eliminacja skoków */
}

.hero-slide-inner.is-active {
    opacity: 1; /* aktywny slajd jest widoczny */
    pointer-events: auto; /* pozwala na interakcje, jeśli kiedyś będą potrzebne */
    z-index: 2;
}

.hero-slide-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* obraz zawsze pokrywa slajd */
    display: block; /* eliminuje drobne artefakty z inline-img */
}

/* ============================================================
   3. SLIDE DIRECTIONS — NO OVERSHOOT VERSION (APPLE LEVEL)
   ============================================================ */

.hero-slide-inner.dir-right-enter  { transform: translateX(1px); }
.hero-slide-inner.dir-right-exit   { transform: translateX(-1px); opacity: 0; }

.hero-slide-inner.dir-left-enter   { transform: translateX(-1px); }
.hero-slide-inner.dir-left-exit    { transform: translateX(1px);  opacity: 0; }

.hero-slide-inner.dir-top-enter    { transform: translateY(-1px); }
.hero-slide-inner.dir-top-exit     { transform: translateY(1px);  opacity: 0; }

.hero-slide-inner.dir-bottom-enter { transform: translateY(1px); }
.hero-slide-inner.dir-bottom-exit  { transform: translateY(-1px); opacity: 0; }

/* ============================================================
   3B. EFFECTS — SLIDE ANIMATION PRESETS (1–4)
   ============================================================ */

/* ------------------------------------------------------------
	 EFFECT 3B.1 — SMOOTH INERTIA (wersja C++ dopracowana miękko)--- */
.hero-slide-inner.effect1-enter {
    transform: translateZ(0) scale(1.01); /* lekka bezwładność */
    opacity: 0.90; /* obraz niemal pełny na starcie */
    transition:
        transform 1.45s cubic-bezier(0.33, 1, 0.50, 1), /* miękki, naturalny ruch */
        opacity   0.32s ease-out; /* szybki, niewidoczny fade */
}
.hero-slide-inner.effect1-exit {
    transform: translateZ(0) scale(1.01); /* naturalny kontr-ruch */
    opacity: 0; /* szybkie wyblaknięcie */
    transition:
        transform 1.45s cubic-bezier(0.33, 1, 0.50, 1), /* spójne z wejściem */
        opacity   0.32s ease-out; /* błyskawiczny fade */
}
/* ------------------------------------------------------------
	 EFFECT 3B.2 — APPLE ULTRA SOFT MICRO-GLIDE (2px) -- */

/* WRAPPER — brak ruchu */
.hero-slide.effect2-enter,
.hero-slide.effect2-exit {
    transform: translateX(0);
    transition: transform 1.20s ease-out;
}
/* INNER — miękkie wejście: 2px micro-glide + cream fade */
.hero-slide-inner.effect2-enter {
    opacity: 1; /* zamiast 0.65 */
    transition:
        transform 1.2s cubic-bezier(0.22,1,0.35,1),
        opacity   0.20s ease-out;
}


.hero-slide-inner.effect2-exit {
    transform: translateX(-1px);          /* symetryczne wyjście */
    opacity: 0;
    transition:
        transform 1.10s cubic-bezier(0.25,1,0.35,1),
        opacity   0.98s ease-out;
}
/* ------------------------------------------------------------
  EFFECT 3B.3 — APPLE FADE (delikatny fade + neutralny slide)-- */
.hero-slide-inner.effect3-enter {
    transform: translateX(0px);  /* brak realnego ruchu → obraz stoi stabilnie */
    opacity: 0.90;               /* natychmiast miękko widoczny → brak efektu „flash” */
    transition:
        transform 0.50s ease,    /* lekkie winietowe wygładzenie, nie wpływa na pozycję */
        opacity   1.00s ease;    /* długi, miękki fade-in → efekt Apple-style */
}
.hero-slide-inner.effect3-exit {
    transform: translateX(0px);  /* brak przesunięcia przy wychodzeniu → zero „skoków” */
    opacity: 0;                  /* stopniowe wygaszanie obrazu */
    transition:
        transform 0.50s ease,    /* zachowana zgodność czasowa z enter */
        opacity   1.00s ease;    /* wolne fade-out → naturalne mieszanie slajdów */
}
/* ------------------------------------------------------------
   EFFECT 3B.4 — ZOOM + SLIDE (lekki zoom premium) */

.hero-slide-inner.effect4-enter {
    transform: translateX(0px) scale(1.04);
    opacity: 0.55;
    transition:
        transform 0.15s cubic-bezier(0.19, 1, 0.22, 1),
        opacity   0.1s ease-out;
}

.hero-slide-inner.effect4-exit {
    transform: translateX(-160px) scale(0.97);
    opacity: 0;
    transition:
        transform 1.15s cubic-bezier(0.19, 1, 0.22, 1),
        opacity   0.95s ease-in;
}
/* ============================================================
   3B.MOBILE — Efekty pob mobile ver bo sa inne (fps) (1–4)
   Ultra-soft, ultra-short, mobile-optimized animations
   ============================================================ */
@media (max-width: 768px) {

    /* ----- GLOBAL ENTER OPTIMIZATION ----- */
    .hero-slide-inner[class*="effect"][class*="enter"] {
        opacity: 1;                          /* brak mgły na mobile */
        transition: opacity 0.25s ease-out;  /* szybkie pojawienie */
    }
    /* ----- GLOBAL EXIT OPTIMIZATION ----- */
    .hero-slide-inner[class*="effect"][class*="exit"] {
        opacity: 0;
        transition: opacity 0.45s ease-out;  /* krótszy, stabilny fade */
    }
    /* ----- EFFECT 3B.1 (INERTIA) ----- */
    .hero-slide-inner.effect1-enter {
        transform: translateX(0px) scale(1.003); /* ultra-soft zoom */
        transition: transform 0.45s ease-out;
    }
    .hero-slide-inner.effect1-exit {
        transform: translateX(0px) scale(1.003);
        transition: transform 0.45s ease-out;
    }
    /* ----- EFFECT 3B.2 (MICRO-GLIDE) ----- */
    .hero-slide-inner.effect2-enter {
        transform: translateX(1px);              /* micro-glide mobile */
        transition: transform 0.45s ease-out;
    }
    .hero-slide-inner.effect2-exit {
        transform: translateX(-1px);
        transition: transform 0.45s ease-out;
    }
    /* ----- EFFECT 3B.3 (APPLE FADE) ----- */
    .hero-slide-inner.effect3-enter {
        transform: none;                          /* czysty fade */
        transition: opacity 0.25s ease-out;
    }
    .hero-slide-inner.effect3-exit {
        transform: none;
        transition: opacity 0.45s ease-out;
    }
    /* ----- EFFECT 3B.4 (ZOOM SOFT) ----- */
    .hero-slide-inner.effect4-enter {
        transform: scale(1.004);                  /* minimalny zoom */
        transition: transform 0.55s ease-out;
    }
    .hero-slide-inner.effect4-exit {
        transform: scale(1.004);
        transition: transform 0.45s ease-out;
    }
}

/* ============================================================
   4. CONTROL-NAV — FASHION LINES (NUMERY + LINIE)
   ============================================================ */

.hero-slider-section .control-nav {
    position: absolute;
    top: calc(50% - 20px);
    right: 40px;
    transform: translateY(-50%);
    z-index: 60;
}

.hero-slider-section .control-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hero-slider-section .control-nav li {
    position: relative;
    height: 4px;
    margin-bottom: 8px; /* odleglosc miedzy liniami */
}

/* Zmienne globalne */
:root {
    --dent-size: 14px;
    --digit-offset: 13px;
}

.hero-slider-section .control-nav .line {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 2px;
    width: var(--line-length);
}

.hero-slider-section .control-nav .line::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    height: 2px;
    width: 48px;
    background: rgba(255,255,255,0.7);
    transition:
        width 0.9s cubic-bezier(0.45, 0.05, 0.05, 0.99),
        opacity 0.3s ease;
}

.hero-slider-section .control-nav li.active .line::before {
    width: var(--line-length);
    right: var(--dent-size);
}

.hero-slider-section .control-nav .number {
    position: absolute;
    right: calc(var(--dent-size) * -1 + var(--digit-offset));
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #fff;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.hero-slider-section .control-nav li.active .number {
    opacity: 1;
}


/* MOBILE — delikatne zmniejszenie */
@media (max-width: 767px) {
    .hero-slider-section .control-nav {
        top: 46%;
        right: 6px;
        transform: translateY(-50%);
    }

    .hero-slider-section .control-nav li {
        height: 3px;
        margin-bottom: 6px;
    }

    .hero-slider-section .control-nav .number {
        font-size: 10px;
    }

    :root {
        --dent-size: 10px;
        --digit-offset: 10px;
    }

    .hero-slider-section .control-nav .line::before {
        width: 32px;
    }
}



/* ============================================================
   5. FOOTER-BOX DOTSY (SAFE Z-INDEX VERSION)
   — niższy z-index, nie nachodzi na navbar
   ============================================================ */

.footer-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    width: 100%;
    height: 4.2rem;

    z-index: 60; /* BEZPIECZNE — poniżej navbaru, powyżej slajdów */
    padding: 0;
    margin: 0 auto;
}

.footer-wrapper ul {
    list-style: none;
    padding: 0;
    margin: 0;

    width: 100%;
    height: 100%;
    display: flex;
}

/* BOX — zawsze 25% */
.footer-wrapper li {
    position: relative;
    width: 25%;
    height: 100%;

    padding: 1rem 0.5rem;
    background: rgba(0,0,0,0.15);
    border-right: 1px solid rgba(255,255,255,0.15); /* linia rodzielajaca dotsy */
    overflow: hidden;

    display: flex;
    justify-content: center;
    align-items: center;

    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
}

.footer-wrapper li:last-child {
    border-right: none;
}

/* HOVER-BOX */
.footer-wrapper li .hover-box {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.0);
    z-index: 1;
    transition: all 0.3s ease-in-out;
}

.footer-wrapper li.active .hover-box,
.footer-wrapper li:hover .hover-box {
    background: rgba(0,0,0,0.35);
}

/* Tekst */
.footer-wrapper li .box-content {
    position: relative;
    z-index: 5;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 100%;

    text-align: center;
    line-height: 1.2;
    font-size: 1.05rem;
    letter-spacing: 1px;
    user-select: none;

    color: #fff;
}

/* MOBILE */
@media (max-width: 768px) {

    .footer-wrapper {
        height: 3.8rem;
    }

    .footer-wrapper li {
        padding: 0.6rem 0.3rem;
    }

    .footer-wrapper li .box-content {
        font-size: 0.72rem;
        line-height: 1.15;
    }
}

/* Wyłączenie hover na mobile */
@media (hover: none) and (pointer: coarse) {
    .footer-wrapper li:hover .hover-box {
        background: rgba(0,0,0,0.0) !important;
    }
    .footer-wrapper li.active .hover-box {
        background: rgba(0,0,0,0.35) !important;
    }
}

/* ============================================================
   6. MOBILE FOOTER-BOX — spójne 25%
   ============================================================ */

@media (max-width: 768px) {

    .footer-wrapper {
        height: 3.8rem;
    }

    .footer-wrapper li {
        padding: 0.6rem 0.3rem;
    }

    .footer-wrapper li .box-content {
        font-size: 0.72rem;
        line-height: 1.15;
    }
}
@media (hover: none) and (pointer: coarse) {
    /* hover wyłączony */
    .footer-wrapper li:hover .hover-box {
        background: rgba(0,0,0,0.0) !important;
    }

    /* active zostaje normalnie */
    .footer-wrapper li.active .hover-box {
        background: rgba(0,0,0,0.35) !important;
    }
}
/* ============================================================
    7. CONTROL-NAV — CAŁKOWITE WYŁĄCZENIE INTERAKCJI
   ============================================================ */

.hero-slider-section .control-nav,
.hero-slider-section .control-nav *,
.hero-slider-section .control-nav li,
.hero-slider-section .control-nav .line,
.hero-slider-section .control-nav .number {
    pointer-events: none !important;   /* brak kliku */
    user-select: none !important;      /* brak zaznaczania */
    touch-action: none !important;     /* brak reakcji na dotyk/swipe */
}

/* Wyłączamy efekty hover, active, focus */
.hero-slider-section .control-nav li:hover,
.hero-slider-section .control-nav li:active,
.hero-slider-section .control-nav li:focus,
.hero-slider-section .control-nav .line:hover,
.hero-slider-section .control-nav .number:hover {
    background: none !important;
    opacity: 1 !important;
}
/* ============================================================
   8. HERO SLIDER — TEXT SYSTEM (FINAL CLEAN VERSION)
   ============================================================ */

/* ============================================================
   8A. POZYCJONOWANIE BLOKU TEKSTOWEGO
   ============================================================ */

.hero-text {
    position: absolute;
    inset: 0;
    z-index: 70;               /* zawsze nad PNG warstwami */
    pointer-events: none;

    transform-origin: 0 0;     /* wymagane dla skalowania */
    transform:
        translateY(var(--heroTextYOffset, 0px))
        scale(var(--heroTextScale, 1));
}

/* ============================================================
   8B. ELEMENTY TEKSTOWE — RESET POD ENGINE.js
   ============================================================ */

.hero-text h1,
.hero-text h2,
.hero-text h3,
.hero-text h4 {
    position: absolute;        /* pełna kontrola z data-text */
    margin: 0;
    padding: 0;
    white-space: nowrap;
    opacity: 0;                /* start animacji zawsze z JS */

    pointer-events: none;
    font-family: 'Open Sans', "Helvetica Neue";
    font-weight: 700;
    line-height: 1.12;

    /* font-size + color + top + left → ustawiane wyłącznie w engine.js */
}

/* ============================================================
   8C. USUNIĘTE STARE SYSTEMY (fadeInUp, fadeInDown, animate-h1/2/4)
   ============================================================ */
/*
   Usunięto następujące bloki:
   - keyframes fadeInDown / fadeInUp
   - klasy animate-h1 / animate-h2 / animate-h4
   - stare layouty flex / max-width / default font-size
   - duplikaty .hero-text
   - stacking context patch w starej formie

   Teraz całość animacji dla tekstu obsługuje Engine.textPlayEnter()
*/

/* ============================================================
   8D. MOBILE — NIE NADPISUJEMY ANIMACJI, tylko linię + układ
   ============================================================ */

@media (max-width: 768px) {

    .hero-text {
        max-width: none;
        width: auto;

        /* Skala mobilna jest sterowana JS przez zmienną:
           --heroTextScaleMobile */
        transform:
            scale(var(--heroTextScaleMobile, 0.75));
        transform-origin: top left;
    }

    .hero-text h1,
    .hero-text h2,
    .hero-text h3,
    .hero-text h4 {
        line-height: 1.15;
    }
}