/* HELL.IX — prémiové sekce (16. 9. 2026)
   Vzory ze zenn-components: 014 rychlostní pás, 013 koláž v hloubce, 081 pás značek.
   Plus záře a elektřina kolem loga a nová stěna ACCAP dropu. */

/* ================================================== LOGO: ZÁŘE A ELEKTŘINA
   Druhá a třetí vrstva loga za chromem. Tvar dává maska z logotypu.
   ⚠ filter se aplikuje PŘED maskou, proto rozmazání / jiskření sedí na obalu
     a maska na vnitřním spanu. Obráceně by se rozmazal jen obdélník. */
.hero h1.hero__word{ position:relative; isolation:isolate; }
.hero__word img{ position:relative; z-index:2; }
.hero__glow, .hero__elektro{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero__glow > span, .hero__elektro > span{
  position:absolute; inset:0;
  -webkit-mask:url("../assets/logo-b.webp") center / contain no-repeat;
          mask:url("../assets/logo-b.webp") center / contain no-repeat;
}
.hero__glow{ filter:blur(22px); opacity:.75; animation:hx-dech 4.8s ease-in-out infinite; }
.hero__glow > span{ background:linear-gradient(100deg, #8F66F5 0%, #C6FF2E 45%, #8F66F5 100%); background-size:200% 100%; animation:hx-prelit 9s linear infinite; }
@keyframes hx-dech{ 0%,100%{ opacity:.45; transform:scale(1.01); } 50%{ opacity:.9; transform:scale(1.05); } }
@keyframes hx-prelit{ to{ background-position:-200% 0; } }

.hero__elektro{ filter:url(#hx-elektro) drop-shadow(0 0 6px #C6FF2E) drop-shadow(0 0 18px rgba(143,102,245,.9)); opacity:0; transform:scale(1.035); }
.hero__elektro > span{ background:#EFFFC4; }
.hero__elektro.is-jiskra{ opacity:1; }
.no-motion .hero__glow, .no-motion .hero__glow > span{ animation:none; }
.no-motion .hero__elektro{ display:none; }

/* =============================================================== 014 PÁS */
.hx-vsm{
  --size:clamp(64px,11vw,190px); --boost:12; --skew:14;
  position:relative; padding-block:clamp(40px,6vw,90px) clamp(40px,5vw,80px);
  background:var(--bg); color:var(--ink); overflow-x:clip;
  border-block:1px solid var(--line);
}
.hx-vsm__strip{
  position:relative; padding-block:.04em;
  font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  font-size:calc(var(--size) * .55); line-height:1.08; letter-spacing:-.005em;
}
.hx-vsm__strip--band{
  z-index:1; margin:.14em -6vw 0; padding-block:.12em .08em;
  background:var(--accent); color:#0B0B0D; rotate:-2.2deg;
  box-shadow:0 30px 60px -30px rgba(198,255,46,.45);
}
.hx-vsm__track{ display:block; }
.hx-vsm__group{ margin:0; padding:0 var(--gut); display:flex; flex-wrap:wrap; align-items:center; gap:0 .22em; }
.hx-vsm__word{ white-space:nowrap; }
.hx-vsm__word--line{ color:transparent; -webkit-text-stroke:max(1.5px,.012em) currentColor; }
.hx-vsm__strip:not(.hx-vsm__strip--band) .hx-vsm__word--line{ -webkit-text-stroke-color:var(--ink); }
.hx-vsm__strip--band .hx-vsm__word--line{ -webkit-text-stroke-color:#0B0B0D; }
.hx-vsm__dot{ flex:none; display:block; width:.72em; height:.72em; border-radius:50%; overflow:hidden; box-shadow:0 0 0 .04em var(--accent-2); translate:0 -.02em; }
.hx-vsm__strip--band .hx-vsm__dot{ box-shadow:0 0 0 .04em #0B0B0D; }
.hx-vsm__dot img{ width:100%; height:100%; object-fit:cover; display:block; }
.hx-vsm__strip--band .hx-vsm__group{ padding-inline:calc(6vw + var(--gut)); }
.hx-vsm.is-live .hx-vsm__strip{ font-size:var(--size); line-height:.92; }
.hx-vsm.is-live .hx-vsm__track{ display:flex; width:max-content; will-change:transform; }
.hx-vsm.is-live .hx-vsm__group{ flex-wrap:nowrap; padding:0 .22em 0 0; }
@media (max-width:760px){ .hx-vsm{ --size:clamp(56px,19vw,100px); } .hx-vsm__strip--band{ rotate:-3.4deg; } }

/* ======================================================= ACCAP: STĚNA DROPU
   Jako jejich plakát dropu: šedá betonová deska, čepice volně bez rámečků,
   číslo a jméno. Kus pod myší se zvedne a pootočí, ostatní ztmavnou. */
.drop__deska{
  position:relative; overflow:hidden; isolation:isolate;
  border:1px solid #34343a; border-radius:4px;
  padding:clamp(34px,5vw,80px) clamp(18px,4vw,72px) clamp(28px,4vw,56px);
  background:
    radial-gradient(70% 55% at 50% 38%, rgba(255,255,255,.10), transparent 70%),
    linear-gradient(180deg, #45454b, #2a2a2f 70%, #1c1c20);
}
.drop__deska::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.drop__hlava{ text-align:center; }
.drop__nad{ margin:0; font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; color:rgba(237,235,230,.62); }
.drop__titul{
  margin:.1em 0 0; font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(4.2rem,15vw,13rem); line-height:.82; letter-spacing:-.01em;
  background:linear-gradient(180deg, #ffffff 0%, #b9b8c4 38%, #6e6d78 52%, #e9e8f0 64%, #8b8a96 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.55));
}
.drop__pod{ margin:14px auto 0; max-width:34ch; display:flex; justify-content:center; text-align:left; align-items:center; gap:10px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.drop__tecka{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent); animation:hx-blik 1.8s ease-in-out infinite; }
@keyframes hx-blik{ 50%{ opacity:.25; } }

.drop__mrizka{
  list-style:none; margin:clamp(30px,4vw,60px) auto 0; padding:0; max-width:1100px;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,3vw,46px) clamp(8px,2vw,30px);
}
.drop__kus{ position:relative; }
.drop__odkaz{
  position:relative; display:grid; justify-items:center; gap:8px; text-decoration:none; color:inherit;
  padding:clamp(6px,1vw,14px) 0;
}
.drop__cislo{ position:absolute; left:clamp(0px,1vw,12px); top:0; font-size:.68rem; letter-spacing:.12em; color:rgba(237,235,230,.5); transition:color .3s; }
.drop__odkaz img{
  width:min(100%, 260px); height:auto; display:block;
  filter:drop-shadow(0 22px 20px rgba(0,0,0,.55));
  animation:hx-vznas 6s ease-in-out infinite; animation-delay:calc(var(--i) * -.7s);
  transition:transform .6s var(--e-out), filter .4s var(--e-io);
}
@keyframes hx-vznas{ 0%,100%{ translate:0 0; } 50%{ translate:0 -7px; } }
.drop__jmeno{ font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:clamp(.8rem,1.3vw,1.05rem); letter-spacing:.02em; color:rgba(237,235,230,.82); transition:color .3s; }
.has-hover .drop__mrizka:hover .drop__odkaz img{ filter:drop-shadow(0 22px 20px rgba(0,0,0,.55)) brightness(.55) saturate(.6); }
.has-hover .drop__mrizka .drop__odkaz:hover img{
  transform:scale(1.14) rotate(-6deg);
  filter:drop-shadow(0 34px 26px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(198,255,46,.35)) brightness(1.05);
}
.has-hover .drop__odkaz:hover .drop__jmeno, .has-hover .drop__odkaz:hover .drop__cislo{ color:var(--accent); }
.drop__odkaz:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }
.drop__pata{ margin-top:clamp(26px,4vw,50px); display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; border-top:1px solid rgba(255,255,255,.12); padding-top:22px; }
.drop__pocet{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(237,235,230,.7); }
.drop__pocet b{ color:var(--accent); font-weight:700; }
.btn--acid{ background:var(--accent); color:#0B0B0D; }
@media (max-width:640px){
  .drop__mrizka{ gap:18px 6px; }
  .drop__jmeno{ font-size:.66rem; text-align:center; }
  .drop__cislo{ font-size:.58rem; }
  .drop__pata{ justify-content:center; text-align:center; }
}
/* náběh: kusy vyskočí po řadách, až deska vjede do okna */
.drop__mrizka.is-cekani .drop__kus{ opacity:0; transform:translateY(40px) scale(.9); }
.drop__mrizka.is-cekani.is-in .drop__kus{ opacity:1; transform:none; transition:opacity .8s var(--e-out) calc(var(--i) * 70ms), transform 1s var(--e-out) calc(var(--i) * 70ms); }
.no-motion .drop__odkaz img, .no-motion .drop__tecka{ animation:none; }
.no-motion .drop__kus{ opacity:1 !important; transform:none !important; }

/* ====================================================== 013 NIKDY DVAKRÁT */
.hx-pdl{ --length:260svh; --travel:.44; position:relative; height:var(--length); background:#0B0B0D; color:var(--ink); }
.hx-pdl__stage{
  position:sticky; top:0; height:100svh; min-height:600px; overflow:hidden;
  background:radial-gradient(60% 55% at 50% 48%, #1a1a20, #0B0B0D 72%);
}
.hx-pdl__head{ position:absolute; z-index:5; inset:0; display:grid; place-content:center; justify-items:center; text-align:center; padding:0 var(--gut); pointer-events:none; will-change:transform; }
.hx-pdl__title{
  margin:0; font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(4rem,13vw,12rem); line-height:.86; letter-spacing:-.01em; max-width:7ch;
}
.hx-pdl__title em{ font-style:normal; color:var(--accent); }
.hx-pdl__lede{ margin:clamp(16px,2vw,26px) 0 0; max-width:36ch; font-size:clamp(.8rem,1vw,.92rem); color:var(--ink-2); }
.hx-pdl__item{ position:absolute; z-index:var(--z,1); left:var(--x); top:var(--y); width:var(--w); margin:0; will-change:transform; backface-visibility:hidden; }
.hx-pdl__item img{ display:block; width:100%; height:auto; border-radius:3px; box-shadow:0 34px 60px -26px rgba(0,0,0,.8); border:1px solid rgba(255,255,255,.08); }
.hx-pdl__item[style*="--z:1"] img, .hx-pdl__item[style*="--z:2"] img{ filter:saturate(.7) brightness(.72); }
.hx-pdl__item[style*="--z:3"] img{ filter:brightness(.86); }
@media (max-width:760px){
  .hx-pdl{ --length:220svh; }
  .hx-pdl__item{ left:var(--mx); top:var(--my); width:var(--mw); }
}
.no-motion .hx-pdl{ height:auto; }
.no-motion .hx-pdl__stage{ position:relative; }
.no-motion .hx-pdl__item{ transform:rotate(var(--r,0deg)); }

/* ======================================================= 081 PÁS TECHNIK */
.hx-loop{ padding:clamp(30px,4vw,56px) 0; background:var(--bg-2); border-block:1px solid var(--line); }
.hx-loop__strip{
  position:relative; overflow:hidden; padding-block:clamp(16px,2vw,26px);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.hx-loop__strip + .hx-loop__strip{ border-top:1px solid var(--line); }
.hx-loop__track{ display:block; }
.hx-loop__group{ padding:0 var(--gut); display:flex; flex-wrap:wrap; align-items:center; gap:.5em 1.1em; }
.hx-loop__mark{ font-size:clamp(22px,3.2vw,40px); line-height:1; white-space:nowrap; color:var(--ink); text-transform:none; }
.hx-loop__sep{ color:var(--accent); font-size:14px; }
.hx-loop.is-live .hx-loop__track{ display:flex; width:max-content; will-change:transform; }
.hx-loop.is-live .hx-loop__group{ flex-wrap:nowrap; padding-right:1.1em; }
.no-motion .hx-loop__track, .no-motion .hx-vsm__track{ transform:none !important; }