/* =====================================================================
   MANAWA FLOW — BRAMA (manawaflow.pl/index.php)
   Ciemna, kinowa strona wejściowa. Bez kafelków, bez ikon ze stocku.
   Nośnikiem luksusu są: czerń, złota włoskowata linia, cienka
   Poppins w dużej skali i prawdziwy portret.
   ===================================================================== */

:root{
    /* Płótno — nie czerń, tylko głęboki grafit z fioletem. Czerń bez
       światła robi się pusta; ten ton niesie kolor i wygląda drożej. */
    --ink:        #12121C;
    --ink-deep:   #0B0B12;
    --ink-soft:   #1B1B29;

    /* Kolory marki */
    --violet:     #6A0DAD;
    --violet-lift:#A855F7;
    --blue:       #0047AB;
    --gold:       #FDC500;

    /* Biel ciepła, nie laboratoryjna — detal, który czyta się jako drogi */
    --paper:      #F6F4EF;
    --muted:      rgba(246,244,239,0.66);
    --muted-soft: rgba(246,244,239,0.42);
    --hairline:   rgba(246,244,239,0.16);

    /* Czcionki marki — Poppins na nagłówki i etykiety, Lato na tekst.
       Żadnych obcych krojów: luksus budujemy grubością, skalą i światłem. */
    --head: 'Poppins', sans-serif;
    --body: 'Lato', sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{ -webkit-text-size-adjust:100%; }

body{
    min-height:100dvh;
    background:var(--ink);
    color:var(--paper);
    font-family:var(--body);
    overflow-x:hidden;
    position:relative;
}

/* --- Zorza: wolno dryfujące poświaty w kolorach marki -----------------
   Mocniejsze niż wcześniej. To one wypełniają środek kadru kolorem,
   żeby tło nie było czarną dziurą między tekstem a portretem. */
body::before{
    content:'';
    position:fixed; inset:-30%;
    z-index:0; pointer-events:none;
    background:
        radial-gradient(52% 48% at 16% 24%, rgba(124,32,196,0.55), transparent 72%),
        radial-gradient(46% 46% at 84% 76%, rgba(0,81,196,0.40),   transparent 72%),
        radial-gradient(40% 34% at 52% 96%, rgba(106,13,173,0.30), transparent 70%),
        radial-gradient(34% 28% at 62% 6%,  rgba(253,197,0,0.11),  transparent 70%);
    filter:blur(50px);
    animation:dryf 46s ease-in-out infinite alternate;
}
@keyframes dryf{
    from{ transform:translate3d(-2%,-1%,0) scale(1); }
    to  { transform:translate3d(3%,2%,0)   scale(1.12); }
}

/* --- Winieta: krawędzie zostają głębokie, środek oddycha -------------- */
body::after{
    content:'';
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(135% 105% at 50% 42%, transparent 38%, rgba(6,6,11,0.62) 100%);
}

/* --- Ziarno: 5% szumu odbiera plastikowość czystemu CSS --------------- */
.grain{
    position:fixed; inset:0; z-index:4; pointer-events:none; opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Światło podążające za kursorem ----------------------------------- */
.spot{
    position:fixed; top:0; left:0; z-index:1; pointer-events:none;
    width:760px; height:760px; margin:-380px 0 0 -380px; border-radius:50%;
    background:radial-gradient(circle, rgba(253,197,0,0.075) 0%, rgba(168,85,247,0.05) 35%, transparent 66%);
    opacity:0; transition:opacity .8s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}

/* =====================================================================
   Rusztowanie strony
   ===================================================================== */
/* Scena idzie na pełną szerokość okna, a treść trzyma się środka.
   Dzięki temu pasek z czwórką drzwi jest pełnoekranowy — na szerokim
   monitorze to on domyka kadr u dołu, zamiast kończyć się w połowie. */
.stage{
    position:relative; z-index:2;
    min-height:100dvh;
    display:flex; flex-direction:column;
}
.top, .hero{ width:100%; max-width:1680px; margin-inline:auto; }

/* --- Belka górna ------------------------------------------------------ */
.top{
    display:flex; align-items:center; justify-content:space-between; gap:24px;
    padding:38px clamp(24px,4.4vw,72px) 0;
    opacity:0; animation:wejscie .9s cubic-bezier(.2,.8,.2,1) forwards .1s;
}
.wordmark{
    font-family:var(--head); font-weight:700; font-size:1.42rem;
    letter-spacing:-.015em; color:var(--paper);
    text-transform:lowercase; text-decoration:none; line-height:1;
}
.wordmark em{ color:var(--gold); font-style:normal; text-transform:uppercase; }

.top-cta{
    font-family:var(--head);
    font-size:.72rem; font-weight:500; text-transform:uppercase; letter-spacing:.18em;
    color:var(--muted); text-decoration:none;
    display:inline-flex; align-items:center; gap:10px;
    padding-bottom:6px; border-bottom:1px solid transparent;
    transition:color .45s ease, border-color .45s ease;
}
.top-cta span{ transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.top-cta:hover{ color:var(--gold); border-bottom-color:rgba(253,197,0,.45); }
.top-cta:hover span{ transform:translateX(5px); }

/* --- Scena główna: tekst po lewej, portret po prawej ------------------ */
/* Portret jest pozycjonowany bezwzględnie, więc nigdy nie rozpycha
   strony — o wysokości decyduje wyłącznie tekst. Dzięki temu rząd drzwi
   zawsze zostaje nad krawędzią ekranu. */
.hero{
    position:relative;
    flex:1;
    display:flex; align-items:center;
    min-height:0;
}

.hero-copy{
    position:relative; z-index:2;
    padding:clamp(28px,4vh,54px) clamp(24px,4.4vw,72px) clamp(30px,4.4vh,52px);
    max-width:calc(74ch + clamp(24px,4.4vw,72px));
}

.eyebrow{
    font-family:var(--head);
    font-size:.64rem; font-weight:600; text-transform:uppercase; letter-spacing:.24em; white-space:nowrap;
    color:var(--gold);
    display:flex; align-items:center; gap:16px;
    opacity:0; animation:wejscie .9s cubic-bezier(.2,.8,.2,1) forwards .25s;
}
.eyebrow::before{
    content:''; width:clamp(26px,3.4vw,52px); height:1px; background:var(--gold); opacity:.6;
}

/* Hasło: Poppins w grubości ExtraLight. Geometryczny krój w dużej skali
   i cienkiej kresce czyta się jak architektura — dokładnie to, co mówi
   tagline marki. Ujemny trakt zbija litery w jedną bryłę. */
.statement{
    font-family:var(--head); font-weight:200;
    font-size:clamp(2.85rem,5vw,5.9rem);
    /* Luźniejsza interlinia — przy cienkiej kresce wiersze potrzebują
       powietrza, inaczej trzy słowa zlewają się w jeden blok */
    line-height:1.26; letter-spacing:-.035em;
    margin-top:clamp(20px,2.6vh,34px);
}
.statement span{
    display:block;
    opacity:0; animation:wejscie 1.05s cubic-bezier(.2,.8,.2,1) forwards;
}
.statement span:nth-child(1){ animation-delay:.40s; }
.statement span:nth-child(2){ animation-delay:.54s; }
.statement span:nth-child(3){ animation-delay:.68s; color:var(--gold); }

.lead{
    font-family:var(--body); font-size:clamp(1.05rem,1.35vw,1.28rem);
    font-weight:300; line-height:1.7; letter-spacing:.01em; max-width:40ch;
    color:var(--muted); margin-top:clamp(20px,2.8vh,32px);
    opacity:0; animation:wejscie 1s cubic-bezier(.2,.8,.2,1) forwards .86s;
}

.sign{
    margin-top:clamp(26px,3.6vh,42px);
    font-family:var(--head);
    font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
    display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;
    opacity:0; animation:wejscie 1s cubic-bezier(.2,.8,.2,1) forwards 1.0s;
}
.sign em{
    font-style:normal; font-weight:400; letter-spacing:.1em;
    color:var(--muted-soft); padding-left:14px; border-left:1px solid var(--hairline);
}

/* --- Portret: wtapia się w czerń, nie leży na niej -------------------- */
/* Wycinek bez tła — sylwetka stoi wprost na zorzy, bez wtapiania
   prostokąta. Kolor niesie JPEG, kształt osobna maska PNG: razem 246 KB
   zamiast 12 MB, jakie ważył wyjściowy PNG z przezroczystością. */
.portrait{
    position:absolute; top:0; right:0; bottom:0; z-index:1;
    width:clamp(300px, 50%, 860px);
    display:flex; align-items:flex-end; justify-content:center;
    overflow:hidden; pointer-events:none;
    opacity:0; animation:portretWejscie 1.8s cubic-bezier(.2,.8,.2,1) forwards .3s;
}
.portrait img{
    display:block; height:100%; width:auto;
    /* Proporcje wpisane na sztywno, a nie brane z pliku. Maska kładzie się
       na pudełko elementu, więc gdyby kiedykolwiek podmieniło się samo
       zdjęcie, pudełko i maska nadal będą się zgadzać. */
    aspect-ratio:1100 / 1507; object-fit:cover;
    -webkit-mask-image:var(--maska);
            mask-image:var(--maska);
    -webkit-mask-size:100% 100%;      mask-size:100% 100%;
    -webkit-mask-repeat:no-repeat;    mask-repeat:no-repeat;
    -webkit-mask-position:center;     mask-position:center;
    filter:contrast(1.04) saturate(1.08);
}

@keyframes wejscie{ from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:none;} }
@keyframes portretWejscie{ from{opacity:0; transform:translateY(38px) scale(1.03);} to{opacity:1; transform:none;} }

/* =====================================================================
   Cztery drzwi — rząd włoskowatych linii, nie kafelki
   ===================================================================== */
.doors{
    position:relative;
    display:grid; grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--hairline);
    /* Ledwie widoczna jaśniejsza płaszczyzna — pasek przestaje być dziurą
       w tle, a zaczyna być materiałem, na którym leżą nazwy */
    background:linear-gradient(to bottom, rgba(246,244,239,0.055), rgba(246,244,239,0.015));
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    opacity:0; animation:wejscie 1s cubic-bezier(.2,.8,.2,1) forwards 1.05s;
}
/* Złota linia, która rysuje się przez całą szerokość przy wejściu */
.doors::before{
    content:''; position:absolute; top:-1px; left:0; right:0; height:1px;
    background:linear-gradient(to right, transparent, rgba(253,197,0,.55), transparent);
    transform:scaleX(0); transform-origin:left;
    animation:rysujLinie 1.5s cubic-bezier(.2,.8,.2,1) forwards 1.1s;
}
@keyframes rysujLinie{ to{ transform:scaleX(1); } }

.door{
    position:relative; overflow:hidden;
    display:block; text-decoration:none; color:inherit;
    padding:clamp(24px,2.2vw,32px) clamp(24px,2.4vw,40px) clamp(26px,2.4vw,36px);
    border-left:1px solid var(--hairline);
    transition:opacity .55s ease, background-color .55s ease;
}
.door:first-child{ border-left:0; }

/* Tło paska idzie na pełną szerokość okna, ale same nazwy trzymają się
   tej samej osi co nagłówek — pierwsze drzwi zaczynają się dokładnie
   pod słowem „Zauważ.", ostatnie kończą równo z prawym marginesem. */
.doors{ padding-inline:max(0px, calc((100% - 1680px) / 2)); }

/* Zdanie wprowadzające tuż nad czwórką drzwi, na tej samej osi */
.doors-intro{
    padding-inline:calc(max(0px, (100% - 1680px) / 2) + clamp(24px,4.4vw,72px));
    padding-bottom:clamp(14px,1.8vh,22px);
    font-family:var(--body); font-weight:300;
    font-size:clamp(.95rem,1.1vw,1.12rem); line-height:1.6;
    color:var(--muted-soft);
    opacity:0; animation:wejscie 1s cubic-bezier(.2,.8,.2,1) forwards 1.0s;
}
.doors-intro strong{ color:var(--muted); font-weight:400; }
.door:first-child{ padding-left:clamp(24px,4.4vw,72px); }
.door:last-child{  padding-right:clamp(24px,4.4vw,72px); }

/* Złota kreska nad aktywnymi drzwiami */
.door::before{
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:var(--gold);
    transform:scaleX(0); transform-origin:left;
    transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
/* Delikatna poświata od dołu */
.door::after{
    content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
    background:radial-gradient(120% 90% at 50% 130%, rgba(168,85,247,.28), transparent 68%);
    transition:opacity .6s ease;
}
.door:hover::before,
.door:focus-visible::before{ transform:scaleX(1); }
.door:hover::after,
.door:focus-visible::after{ opacity:1; }

/* Wygaszenie pozostałych drzwi — to ono daje wrażenie skupienia */
.doors:hover .door{ opacity:.36; }
.doors:hover .door:hover{ opacity:1; }
.doors:focus-within .door{ opacity:.36; }
.doors:focus-within .door:focus-visible{ opacity:1; }

.door > *{ position:relative; z-index:1; }

.door-no{
    display:block; font-family:var(--head);
    font-size:.66rem; font-weight:600; letter-spacing:.22em;
    color:var(--muted-soft); transition:color .5s ease;
}
.door:hover .door-no,
.door:focus-visible .door-no{ color:var(--gold); }

.door-name{
    display:block; margin-top:clamp(22px,2.4vw,34px);
    font-family:var(--head); font-weight:300;
    font-size:clamp(1.7rem,2.25vw,2.6rem); line-height:1.08; letter-spacing:-.025em;
}

.door-desc{
    display:block; margin-top:12px;
    font-size:.92rem; font-weight:400; line-height:1.55; color:var(--muted);
    max-width:26ch;
}

.door-go{
    position:absolute; right:clamp(22px,2.4vw,36px); bottom:clamp(24px,2.4vw,30px);
    font-size:1rem; color:var(--gold);
    opacity:0; transform:translateX(-8px);
    transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}
.door:hover .door-go,
.door:focus-visible .door-go{ opacity:1; transform:none; }

.door:focus-visible{ outline:none; background-color:rgba(246,244,239,.04); }

/* Coaching — oferta flagowa, dostaje cichy znacznik pierwszeństwa */
.door--lead .door-no{ color:var(--gold); }

/* =====================================================================
   Mniejsze ekrany
   ===================================================================== */
@media (max-width:1180px){
    /* Węziej, ale tekst jeszcze nie wchodzi na sylwetkę — zostaje pełna */
    .portrait{ width:min(58vw,470px); }
    .hero-copy{ max-width:calc(46ch + clamp(24px,4.4vw,72px)); }
    .door-name{ font-size:clamp(1.3rem,3vw,1.7rem); }
    .door-desc{ font-size:.76rem; }
}

@media (max-width:860px){
    .doors{ grid-template-columns:repeat(2,1fr); }
    .door{ border-top:1px solid var(--hairline); }
    .door:nth-child(-n+2){ border-top:0; }
    .door:nth-child(odd){ border-left:0; }
    .door:first-child{ padding-left:clamp(24px,2.4vw,40px); }
    .door:last-child{ padding-right:clamp(24px,2.4vw,40px); }
}

@media (max-width:620px){
    .top{ padding-top:20px; }
    .top-cta{ font-size:.64rem; letter-spacing:.12em; }
    .wordmark{ font-size:1.18rem; }

    .hero{ align-items:center; }
    .hero-copy{ padding-top:clamp(18px,3.6vh,30px); padding-bottom:14px; max-width:100%; }
    .doors-intro{ font-size:.86rem; line-height:1.5; padding-bottom:10px; }
    .statement{ font-size:clamp(2.5rem,12.2vw,3.8rem); }
    .eyebrow{ white-space:normal; font-size:.58rem; letter-spacing:.18em; }
    /* Na telefonie tekst leży wprost na sylwetce, więc ta schodzi do roli
       faktury tła. Przygaszamy obrazek, a nie kontener — kontenerowi
       animacja wejścia i tak wpisuje na koniec pełne krycie. */
    .portrait{ width:74vw; }
    .portrait img{ opacity:.24; }

    .doors{ grid-template-columns:1fr; }
    .door{
        border-left:0; border-top:1px solid var(--hairline);
        padding:17px clamp(24px,5vw,32px) 19px;
        display:grid; grid-template-columns:auto 1fr auto; align-items:baseline;
        column-gap:16px; row-gap:4px;
    }
    .door:nth-child(-n+2){ border-top:1px solid var(--hairline); }
    .door:first-child{ border-top:0; }
    .door-no{ grid-row:1; }
    .door-name{ grid-row:1; margin-top:0; font-size:1.5rem; }
    .lead{ font-size:1rem; line-height:1.6; }
    .sign{ margin-top:20px; }
    .door:first-child{ padding-left:clamp(24px,5vw,32px); }
    .door:last-child{ padding-right:clamp(24px,5vw,32px); }
    .door-go{ grid-row:1; margin-top:0; opacity:1; transform:none; }
    .door-desc{ grid-column:2 / -1; grid-row:2; margin-top:2px; font-size:.78rem; }
    /* Na dotyku nie ma najechania — nic nie wygaszamy */
    .doors:hover .door{ opacity:1; }
}

/* --- Szacunek dla ustawień systemowych -------------------------------- */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.001ms !important; animation-delay:0ms !important;
        transition-duration:.001ms !important;
    }
    .doors::before{ transform:scaleX(1); }
    .spot{ display:none; }
}