/* ============================================================
   SKLEPY INTERNETOWE — hero z sygnetem nad taflą wody
   Obraz z Blendera leży pod kanwą i znika dopiero, gdy scena na
   żywo narysuje pierwszą klatkę (`.skh.is-3d`). Oba wypełniają
   sekcję tak samo (`cover`), więc przejście nie przesuwa kadru.
   ============================================================ */
.skh{
  position:relative;z-index:1;overflow:hidden;
  height:100vh;height:100svh;min-height:560px;
  background:#000;
}
.skh__plakat,.skh__scena{
  position:absolute;inset:0;width:100%;height:100%;display:block;
}
.skh__plakat{object-fit:cover;object-position:50% 50%}
.skh__scena{z-index:1;opacity:0;transition:opacity 1.4s cubic-bezier(.33,0,.2,1)}
.skh.is-3d .skh__scena{opacity:1}
/* Niebo w kanwie jest przezroczyste (żeby SKLEPY mogło stać za modelem),
   więc obraz startowy musi zgasnąć razem z wejściem sceny — inaczej
   prześwitywałby przez niebo. */
.skh__plakat{transition:opacity 1.4s cubic-bezier(.33,0,.2,1)}
.skh.is-3d .skh__plakat{opacity:0}

/* Dół sekcji wtapia się w tło strony — bez linii na styku ze stopką. */
.skh::after{
  content:'';position:absolute;z-index:2;left:0;right:0;bottom:0;height:22vh;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,4,10,0),rgba(2,4,10,.85) 70%,#02040a);
}

/* ---------- duży napis ----------
   Dwie linie na środku, na wysokości logo. Siatka ma szerokość słowa
   INTERNETOWE, a litery SKLEPY rozkładają się na tę samą szerokość.
   Paralaksa (kursor + przewijanie) w `transform`, wejście w `translate`
   — to dwie osobne właściwości, więc się nie gryzą. */
.skh__tytul{
  /* Bez transform i bez z-index: nagłówek nie tworzy własnego kontekstu
     warstw, więc SKLEPY może zejść POD kanwę (za model), a INTERNETOWE
     zostać NAD nią. Środek w pionie przez ujemny margines. */
  position:absolute;left:0;right:0;top:38%;margin:-1.08em 0 0;
  display:grid;grid-template-columns:max-content;justify-content:center;row-gap:.16em;
  font-family:'Vogjer',sans-serif;font-weight:400;
  font-size:clamp(34px,7vw,150px);line-height:1;letter-spacing:.02em;
  color:#fff;pointer-events:none;
}
.skh__w1,.skh__w2{
  position:relative;display:block;
  will-change:transform;
}
/* SKLEPY — za modelem: sam kontur w chłodnym błękicie, puste wnętrze.
   Dzięki temu dalsza warstwa jest lżejsza i nie konkuruje z logo. */
.skh__w1 i{
  color:transparent;
  -webkit-text-stroke:1.5px rgba(170,205,255,.92);
  text-shadow:0 0 22px rgba(124,179,255,.35);
}
/* INTERNETOWE — przed modelem: stonowane srebro przechodzące w stalowy
   błękit. Ten sam charakter co chrom sygnetu (--grad na stronie), tylko
   z chłodnym dołem — bez ostrych pasów, które odciągały wzrok od logo. */
.skh__w2{
  background:linear-gradient(180deg,
    #f4f7fb 0%,#dfe7f1 38%,#bccbdd 66%,#98afcc 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 18px rgba(4,10,24,.65));
}
/* Ruch liter (kursor + przewijanie) ustawia sklepy-hero.js we właściwości transform. */
.skh__w1{
  z-index:0;                                   /* pod kanwą, czyli za modelem */
  display:flex;justify-content:space-between;
  animation:skhZLewej 1.9s cubic-bezier(.16,1,.3,1) .15s both;
}
.skh__w1 i{font-style:normal}
.skh__w2{
  z-index:3;                                   /* nad kanwą, przed modelem */
  animation:skhZPrawej 1.9s cubic-bezier(.16,1,.3,1) .3s both;
}
@keyframes skhZLewej{from{translate:-14vw 0;opacity:0}}
@keyframes skhZPrawej{from{translate:14vw 0;opacity:0}}

/* Tekst w lewym dolnym rogu — nad ciemną wodą, z dala od odbicia logo. */
.skh__tekst{
  position:absolute;z-index:3;left:7.5%;bottom:clamp(40px,9vh,110px);
  max-width:min(34vw,520px);
}
/* H1 landingu — właściwy nagłówek strony, w bloku tekstu pod sceną.
   Montserrat, bo Vogjer nie ma polskich znaków poza „ó”. */
.skh__h1{
  margin:0;font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:clamp(15px,1.45vw,24px);line-height:1.25;letter-spacing:.055em;
  text-transform:uppercase;color:#eaf3ff;text-wrap:balance;
}
.skh__tekst .sub__kicker{margin-bottom:10px}

/* ---------- pionowe paski po bokach treści ----------
   Przypięte do okna, stoją na środku marginesu obok kolumny tekstu
   (--szl / --szp liczy sklepy-hero.js z położenia treści). Widoczne
   tylko nad treścią (.is-on); wjeżdżają z boków po kolei i tak samo
   odjeżdżają. Tylko na szerokich ekranach — węższe nie mają marginesu. */
.skl__szyna{
  position:fixed;z-index:4;top:50%;
  display:flex;align-items:center;gap:clamp(10px,1.2vw,22px);
  translate:-50% -50%;pointer-events:none;
  font-family:'Vogjer',sans-serif;font-weight:400;line-height:1;
  text-transform:uppercase;white-space:nowrap;
}
.skl__szyna--l{left:var(--szl,12%)}
.skl__szyna--p{left:var(--szp,88%)}
.skl__szyna span{
  display:block;writing-mode:vertical-rl;
  opacity:0;
  transition:opacity .7s cubic-bezier(.33,0,.2,1),transform 1.1s cubic-bezier(.16,1,.3,1);
}
.skl__szyna--l span{transform:translate3d(-46px,0,0)}
.skl__szyna--p span{transform:translate3d(46px,0,0)}
.skl__szyna.is-on span{opacity:1;transform:none}
.skl__szyna--l.is-on .skl__s2{transition-delay:.1s}
.skl__szyna--l.is-on .skl__s3{transition-delay:.2s}

/* HONEYART STUDIO — główny, jasny; dwa boczne przygaszone */
.skl__s2{
  font-size:min(4.2vh,2.6vw);letter-spacing:.04em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.skl__s1,.skl__s3{
  font-size:min(2.2vh,1.4vw);letter-spacing:.08em;
  color:transparent;-webkit-text-stroke:1px rgba(170,190,215,.45);
}
.skl__teraz{
  font-size:min(3.4vh,2.1vw);letter-spacing:.06em;color:#eaf3ff;
}
/* zmiana sekcji: stara nazwa ucieka w górę, nowa wjeżdża od dołu */
.skl__szyna--p.is-on .skl__teraz.is-wyj{
  opacity:0;transform:translate3d(0,-26px,0);
  transition:opacity .26s linear,transform .3s cubic-bezier(.4,0,1,1);
}
.skl__szyna--p.is-on .skl__teraz.is-wej{opacity:0;transform:translate3d(0,26px,0);transition:none}

@media (max-width:1180px){ .skl__szyna{display:none} }
@media (prefers-reduced-motion:reduce){
  .skl__szyna span{transition:opacity .3s linear;transform:none!important}
}

/* ---------- okruszki pod hero ---------- */
.skl__okr{
  position:relative;z-index:1;padding:clamp(18px,3vh,34px) 7.5% 0;
  /* to samo tło z heksami co `.art` pod spodem — bez linii na styku */
  background-color:var(--bg);
  background-image:linear-gradient(rgba(2,4,9,.955),rgba(2,4,9,.955)),url('assets/hex.svg');
  background-repeat:no-repeat,repeat;background-size:auto,84px 48.497px;
  background-attachment:fixed,fixed;
}
.skl__okr ol{
  list-style:none;margin:0 auto;padding:0;max-width:min(78ch,1000px);
  display:flex;flex-wrap:wrap;gap:6px 10px;
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(206,226,255,.5);
}
.skl__okr li + li::before{content:'›';margin-right:10px;color:var(--blue)}
.skl__okr a{color:rgba(206,226,255,.72);text-decoration:none;border-bottom:1px solid rgba(124,179,255,.3)}
.skl__okr a:hover{color:#eaf3ff;border-color:var(--blue)}
.skl__art h3{margin-top:clamp(18px,2.6vh,28px)}

.skh__lead{
  margin:clamp(12px,1.8vh,20px) 0 0;
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:clamp(10.5px,.8vw,13.5px);line-height:1.75;
  color:rgba(206,226,255,.62);
}
.skh__cta{display:flex;align-items:center;gap:clamp(16px,2vw,30px);flex-wrap:wrap;margin-top:clamp(18px,2.6vh,30px)}
.skh__link{
  font-family:'Montserrat',sans-serif;font-weight:500;font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;color:rgba(206,226,255,.7);text-decoration:none;
  border-bottom:1px solid rgba(124,179,255,.35);padding-bottom:4px;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.skh__link:hover{color:#eaf3ff;border-color:var(--blue)}

/* Wejście tekstu — po kolei, spokojnie. */
.skh__tekst > *{animation:skhWejscie 1.6s cubic-bezier(.16,1,.3,1) both}
.skh__tekst > :nth-child(2){animation-delay:.18s}
.skh__tekst > :nth-child(3){animation-delay:.36s}
.skh__tekst > :nth-child(4){animation-delay:.54s}
@keyframes skhWejscie{from{opacity:0;transform:translate3d(0,26px,0)}}

/* Telefon: tekst na całą szerokość pod logo, woda przyciemniona pod nim. */
@media (max-width:760px){
  .skh__tekst{left:6%;right:6%;max-width:none;bottom:clamp(28px,6vh,60px)}
  .skh__tytul{top:29%;font-size:10.4vw}
  .skh__lead{font-size:12px}
  .skh::after{height:48vh}
}
@media (prefers-reduced-motion:reduce){
  .skh__tekst > *,.skh__w1,.skh__w2{animation:none}
  .skh__scena{transition:none}
}