/* HERO: wachlarz kart, środkowa karta = VSL, przy scrollu rozwija się na cały ekran (mechanika z bb-home/v1.html) */
.stage{position:relative;z-index:3;background:var(--hero-bg,var(--bg));color:var(--hero-ink,var(--ink))}
.stage-pin{position:relative;padding-top:clamp(96px,11vh,140px)}
.hero-copy{padding-inline:var(--gut);position:relative;z-index:6;text-align:center}
.hero-copy .eyebrow{color:var(--hero-muted,var(--muted))}
.hero-copy h1{font-size:clamp(2.7rem,7vw,7.4rem);max-width:9.014em;margin:18px auto 0;line-height:.95}
.hero-copy .lead{margin:clamp(1.1rem,2.4vh,1.8rem) auto 0;max-width:34em;text-wrap:balance;color:var(--hero-ink-2,var(--ink-2))}
.cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 1.8rem;margin-top:clamp(1.2rem,2.6vh,2.1rem)}
.fan{position:relative;height:clamp(250px,36vw,480px);margin-top:3rem}
.fp,.scene{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translate(var(--x,0),var(--y,0)) rotate(var(--r,0deg))}
.fp{z-index:var(--zi,2);width:clamp(124px,14.5vw,232px);border-radius:16px;overflow:hidden;background:var(--card);box-shadow:var(--fan-shadow,0 30px 60px -30px rgba(10,16,40,.45))}
.fp .ph{aspect-ratio:3/4;position:relative;overflow:hidden;background:var(--bg-2)}
.fp .ph img{width:100%;height:100%;object-fit:cover}
.fp .chip{position:absolute;left:10px;top:10px;background:rgba(255,255,255,.92);color:#0E1015;border-radius:999px;padding:6px 11px 6px 9px;font-weight:650;font-size:13px;letter-spacing:-.01em;display:flex;align-items:center;gap:7px;backdrop-filter:blur(6px)}
.fp .chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.scene{z-index:5;width:min(64vw,520px);aspect-ratio:16/10}
.scene-clip{position:absolute;inset:0;overflow:hidden;background:#05070d;border-radius:var(--sr,18px);box-shadow:0 60px 110px -60px rgba(5,8,25,calc(.7 * var(--k,1)))}
.scene-box{position:absolute;inset:0}
.scene-box video{width:100%;height:100%;object-fit:cover}
.scene-tag{position:absolute;left:14px;top:14px;z-index:2;background:var(--accent);color:var(--accent-ink,#fff);border-radius:999px;padding:6px 12px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;transition:opacity .3s}

/* nakładka VSL po rozwinięciu */
.vsl-ui{position:absolute;inset:0;z-index:8;display:grid;grid-template-rows:1fr auto;padding:clamp(80px,12vh,120px) var(--gut) clamp(26px,5vh,48px);color:#fff;opacity:0;pointer-events:none;transition:opacity .45s var(--out);background:linear-gradient(180deg,rgba(3,5,14,.0) 40%,rgba(3,5,14,.62))}
.vsl-ui.on{opacity:1;pointer-events:auto}
.vsl-ui.playing{background:none;pointer-events:none}
.vsl-ui.playing .vsl-bottom,.vsl-ui.playing .vsl-play{opacity:0}
.vsl-play{place-self:center;display:flex;flex-direction:column;align-items:center;gap:18px;transition:opacity .3s}
.vsl-play button{width:clamp(84px,9vw,124px);height:clamp(84px,9vw,124px);border-radius:50%;background:var(--accent);display:grid;place-items:center;transition:transform .35s var(--out),background .3s;box-shadow:0 20px 60px -20px rgba(0,0,0,.6)}
.vsl-play button:hover{transform:scale(1.07);background:var(--accent-deep)}
.vsl-play svg{width:30%;margin-left:7%}
.vsl-play span{font-weight:600;font-size:17px;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.vsl-bottom{display:flex;justify-content:space-between;align-items:end;gap:30px;transition:opacity .3s}
.vsl-bottom h2{font-size:clamp(28px,3.4vw,54px);max-width:11.091em;color:#fff}
.vsl-ch{display:flex;gap:22px;flex-wrap:wrap;justify-content:flex-end}
.vsl-ch div{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.vsl-ch b{display:block;font-family:var(--sans);text-transform:none;letter-spacing:-.01em;font-size:15px;font-weight:600;color:#fff;margin-top:4px}
.vsl-close{position:absolute;right:var(--gut);top:clamp(84px,11vh,110px);z-index:9;background:rgba(255,255,255,.14);color:#fff;border-radius:999px;padding:9px 16px;font-weight:600;font-size:14px;display:none;pointer-events:auto}
.vsl-ui.playing .vsl-close{display:block}
.scroll-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:6;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--hero-muted,var(--muted));display:flex;flex-direction:column;align-items:center;gap:8px;transition:opacity .3s}
.scroll-hint i{width:1.5px;height:28px;background:currentColor;opacity:.5;animation:hint 1.8s var(--out) infinite}
@keyframes hint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* tryb z ruchem */
.motion .stage{height:300vh}
.motion .stage-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;padding:0}
.motion .hero-copy{position:absolute;left:0;right:0;top:clamp(92px,12vh,136px);will-change:transform,opacity}
.motion .fan{position:absolute;inset:0;height:auto;margin:0;transition:transform 1.3s var(--out)}
.motion .fan{opacity:1;transition:transform 1.3s var(--out),opacity .6s var(--out)}
.motion .stage.pre .fan{transform:translateY(36vh);opacity:0}
.motion .fp{top:0;will-change:transform}
.motion .scene{left:0;top:0;aspect-ratio:auto;transform-origin:50% 50%;will-change:transform}
@media (max-width:759.9px){
  .motion .stage{height:260vh}
  .fp.far{display:none}
  .vsl-bottom{flex-direction:column;align-items:start}
  .vsl-ch{justify-content:flex-start;gap:14px}
  .vsl-ch div:nth-child(n+4){display:none}
  .fp .chip{font-size:11.5px;padding:5px 9px 5px 8px}
}
.stage-dim{position:absolute;inset:0;z-index:4;background:#05070d;opacity:0;pointer-events:none}

/* ---- mobile: scena z wideo w pionie, przycisk odtwarzania na środku wideo (07.10.2026) ---- */
@media (max-width:759.9px){
  .motion .vsl-play{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%)}
  .motion .vsl-bottom{grid-row:2}
  .vsl-play span{white-space:nowrap;font-size:15px}
  .vsl-ui{padding-bottom:clamp(22px,4vh,36px)}
  .vsl-bottom h2{font-size:clamp(25px,7vw,30px)}
  .stage.vsl-on .scene-box{inset:0!important;width:100%!important;height:100%!important;left:0!important;top:0!important}
  .stage.vsl-on .scene-box video{object-fit:contain;background:#05070d}
}

/* Wejście tekstu hero czystym CSS, bez czekania na JS (wcześniej .in z core.js po GSAP i fontach,
   przez co tekst hero był ukryty przy pierwszym malowaniu i opóźniał LCP na komórce). */
@keyframes fis-rise{from{opacity:0;transform:translateY(26px)}}
@keyframes fis-up{from{transform:translateY(115%)}}
.motion .hero-copy [data-in]{opacity:1;transform:none;transition:none;animation:fis-rise .9s var(--out) both}
.motion .hero-copy [data-split] .sw>span{transform:none;transition:none;animation:fis-up 1s var(--out) both;animation-delay:calc(var(--i) * 50ms)}
.motion .hero-copy .hbadge{animation-delay:.15s}
.motion .hero-copy .lead{animation-delay:.26s}
.motion .hero-copy .cta{animation-delay:.37s}
.motion .hero-copy .hproof{animation-delay:.48s}