/* ==========================================================================
   Hero: full-screen, cinematic. A tilted wall of moving channel tiles on the
   right, the glowing E-play mark behind the headline, stats built in.
   Tiles are generated by assets/js/hero.js.
   ========================================================================== */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100svh - var(--header-h));
  display: grid; align-items: center;
  padding: 56px 0 64px;
}

/* ---------- moving channel wall ---------- */
.hero__wall {
  position: absolute; z-index: -3; top: 50%; left: 38%;
  width: 120vw; height: 150%;
  translate: 0 -50%;
  display: grid; align-content: center; gap: 18px;
  transform: perspective(1600px) rotateX(18deg) rotateY(-16deg) rotateZ(-9deg);
  transform-origin: left center;
}
.wall-row { display: flex; gap: 18px; width: max-content; animation: wall-left 70s linear infinite; }
.wall-row:nth-child(even) { animation-name: wall-right; animation-duration: 85s; }
.wall-row:nth-child(3) { animation-duration: 60s; }
@keyframes wall-left  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes wall-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.tile {
  position: relative; overflow: hidden; flex: none;
  width: clamp(200px, 19vw, 280px); aspect-ratio: 16 / 9; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.9);
  background: var(--g);
}
/* big soft shape for depth */
.tile::before {
  content: ""; position: absolute; width: 90%; aspect-ratio: 1; border-radius: 50%;
  right: -30%; top: -40%; background: radial-gradient(closest-side, rgba(255,255,255,.22), transparent 70%);
}
/* light stripe */
.tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.08) 50%, transparent 60%);
}
.tile svg {
  position: absolute; right: 14px; bottom: 14px; width: 34%; height: auto; opacity: .35;
  stroke: #fff; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.tile__label {
  position: absolute; left: 14px; bottom: 12px; z-index: 1;
  font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: .01em;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.tile__badge {
  position: absolute; left: 12px; top: 12px; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: .08em;
  background: rgba(0,0,0,.45); backdrop-filter: blur(6px);
}
.tile__badge--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 8px #ff3b5c; }

/* fades the wall into the page so the text stays readable */
.hero__shade {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(90deg, var(--bg) 0%, var(--bg) 30%, rgba(5,8,15,.86) 46%, rgba(5,8,15,.25) 72%, rgba(5,8,15,.55) 100%),
    linear-gradient(180deg, var(--bg) 0%, transparent 18%, transparent 78%, var(--bg) 100%);
}

/* glowing brand mark behind the headline */
.hero__mark {
  position: absolute; z-index: -1; left: -6%; top: 50%; translate: 0 -50%;
  width: min(620px, 70vw); opacity: .07; filter: blur(1px);
  pointer-events: none; user-select: none;
}
.hero__glow {
  position: absolute; z-index: -1; left: -10%; top: 10%; width: 60vw; height: 60vw; pointer-events: none;
  background: radial-gradient(closest-side, rgba(31,123,255,.20), transparent 70%);
}

/* ---------- content ---------- */
.hero__content { max-width: 640px; }

.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 10px; border-radius: 999px; font-size: 13px; font-weight: 500;
  background: rgba(12,19,34,.75); border: 1px solid #22345e; backdrop-filter: blur(8px);
  transition: border-color .2s;
}
.pill:hover { border-color: var(--cyan); }
.pill__tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; background: rgba(255,59,92,.15); color: #ff8aa0;
}
.pill__tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 8px #ff3b5c; animation: pulse 1.6s ease-in-out infinite; }
.pill__arrow { color: var(--cyan); }
@keyframes pulse { 50% { opacity: .35; } }

.hero h1 {
  margin: 22px 0 22px;
  font-size: clamp(46px, 7.2vw, 96px); font-weight: 800; line-height: .98; letter-spacing: -.02em;
}
.hero h1 em {
  font-style: italic; padding-right: .1em;
  background: linear-gradient(90deg, #8fd8ff 0%, var(--cyan) 35%, var(--blue) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__lead { font-size: clamp(17px, 1.5vw, 19px); color: #a7b3c9; max-width: 540px; }
.hero__ctas { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.hero__ctas .btn { height: 56px; padding: 0 28px; font-size: 16px; }

.hero__stats {
  list-style: none; margin-top: 48px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 640px;
}
.hero__stats li {
  padding: 14px 16px; border-radius: 14px;
  background: rgba(12,19,34,.6); border: 1px solid rgba(34,52,94,.7); backdrop-filter: blur(10px);
}
.hero__stats b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.1; }
.hero__stats span { font-size: 12px; color: var(--muted); }

/* entrance (after the intro, or immediately for returning visitors) */
.hero__content > * { animation: rise .9s var(--ease-out) both; }
.hero__content > :nth-child(2) { animation-delay: .08s; }
.hero__content > :nth-child(3) { animation-delay: .16s; }
.hero__content > :nth-child(4) { animation-delay: .24s; }
.hero__content > :nth-child(5) { animation-delay: .32s; }
.intro-lock .hero__content > * { animation-play-state: paused; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .hero__wall { left: 10%; opacity: .55; }
  .hero__shade {
    background:
      linear-gradient(90deg, rgba(5,8,15,.92) 0%, rgba(5,8,15,.7) 60%, rgba(5,8,15,.5) 100%),
      linear-gradient(180deg, var(--bg) 0%, transparent 20%, transparent 75%, var(--bg) 100%);
  }
}
@media (max-width: 760px) {
  .hero { padding: 36px 0 48px; min-height: auto; }
  .hero__wall { left: -20%; width: 160vw; opacity: .35; }
  .hero__ctas .btn { flex: 1 1 100%; }
  .hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__mark { width: 90vw; left: 20%; }
}
@media (prefers-reduced-motion: reduce) {
  .wall-row { animation: none; }
}