/* CW-ARCADE — HERO
   3D character-assembly headline + holographic product stage. */

.hero {
  position: relative;
  padding-top: clamp(3.5rem, 5vw, 6rem);
  padding-bottom: var(--section-pad-y);
  overflow: hidden;
  background: var(--void);
}

/* ---------- Press Start 3D grid backdrop ----------
   Ported from Codepen_Repos/Press Start 3d grid: a pure-CSS-3D
   receding grid-room + starfield (preserve-3d planes + repeating
   linear-gradient "line" textures sliding via background-position),
   retextured to this brand's cyan. The source pen gates the scene
   behind a checkbox :has() selector; js/grid-hero-bg.js swaps that for
   an IntersectionObserver-driven class toggle so it animates
   automatically on load instead of requiring a click. Replaces the
   hero's previous static glow-blob pair — one authoritative hero
   backdrop, not two competing systems. */
.grid-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  perspective: 46vmin;
  background-image: radial-gradient(#0000, rgba(0, 60, 90, 0.28)),
    linear-gradient(-90deg, rgba(3, 10, 20, 0.6), #000, rgba(70, 20, 130, 0.22)),
    linear-gradient(0deg, rgba(0, 100, 130, 0.14), #000, rgba(139, 61, 255, 0.16));
  background-color: #000;
  box-shadow: 0 0 140vmin 10vmin #000 inset;
}

.grid-stage * {
  position: absolute;
  transform-style: preserve-3d;
}

.grid-stage *::before,
.grid-stage *::after {
  box-sizing: border-box;
  transform-style: preserve-3d;
  position: absolute;
  content: "";
  animation-play-state: paused;
}

.grid-stage.is-active *::before,
.grid-stage.is-active *::after {
  animation-play-state: running;
}

.grid-sides {
  width: 100%;
  height: 100%;
  background: radial-gradient(
    rgba(0, 173, 252, 0.06) 10%,
    rgba(0, 0, 0, 0.88) 35%,
    transparent 75% 100%
  );
}

.grid-sides.-topbot::before,
.grid-sides.-topbot::after,
.grid-sides.-lefrig::before,
.grid-sides.-lefrig::after {
  background-image: repeating-linear-gradient(
      90deg,
      transparent 0vmin,
      transparent 10vmin,
      var(--grid-line, #00adfc) 10vmin 10.3vmin,
      transparent 10.3vmin
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0vmin,
      transparent 10vmin,
      var(--grid-line, #00adfc) 10vmin 10.3vmin,
      transparent 10.3vmin
    );
  background-color: transparent;
  background-repeat: repeat;
  background-position: center center;
  background-size: 12vmin 12vmin;
  box-shadow: 0 0 8vmin 10vmin #000 inset;
  opacity: 0.55;
  animation: grid-hue 7s linear 0s infinite;
}

.grid-sides.-lefrig::before {
  width: 100%;
  height: 100%;
  transform: rotateY(90deg);
  transform-origin: left center;
  animation-name: grid-lines-x, grid-hue;
  animation-duration: 0.6s, 7s;
  animation-timing-function: linear, linear;
  animation-iteration-count: infinite, infinite;
}

.grid-sides.-lefrig::after {
  width: 100%;
  height: 100%;
  transform: rotateY(-90deg);
  transform-origin: right center;
  animation-name: grid-lines-x, grid-hue;
  animation-duration: 0.6s, 7s;
  animation-timing-function: linear, linear;
  animation-direction: reverse, normal;
  animation-iteration-count: infinite, infinite;
  animation-delay: 0s, 2s;
  z-index: -1;
}

.grid-sides.-topbot::before {
  width: 100%;
  height: 100%;
  transform: rotateX(90deg);
  transform-origin: center bottom;
  bottom: 0;
  animation-name: grid-lines-y, grid-hue;
  animation-duration: 0.6s, 7s;
  animation-timing-function: linear, linear;
  animation-direction: reverse, normal;
  animation-iteration-count: infinite, infinite;
  animation-delay: 0s, 1s;
}

.grid-sides.-topbot::after {
  width: 100%;
  height: 100%;
  transform: rotateX(-90deg);
  transform-origin: center top;
  bottom: auto;
  top: 0;
  animation-name: grid-lines-y, grid-hue;
  animation-duration: 0.6s, 7s;
  animation-timing-function: linear, linear;
  animation-iteration-count: infinite, infinite;
  animation-delay: 0s, 3s;
}

@keyframes grid-hue {
  0% {
    filter: hue-rotate(-6deg);
  }
  100% {
    filter: hue-rotate(6deg);
  }
}

@keyframes grid-lines-x {
  0% {
    background-position: 12vmin center;
  }
  100% {
    background-position: 0 center;
  }
}

@keyframes grid-lines-y {
  0% {
    background-position: center 12vmin;
  }
  100% {
    background-position: center 0;
  }
}

.grid-stars {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.grid-stars::before,
.grid-stars::after {
  width: 200%;
  height: 200%;
  content: "";
  border-radius: 100%;
  background-image: repeating-conic-gradient(
      rgba(255, 255, 255, 0.5) 0%,
      transparent 0.0002%,
      transparent 0.075%,
      transparent 0.65%
    ),
    repeating-conic-gradient(
      #fff 0%,
      transparent 0.0004%,
      transparent 0.05%,
      transparent 0.495%
    );
  transform: translateZ(-40vmin);
  opacity: 0;
  left: -50%;
  top: -50%;
  animation: grid-stars-a 4.5s ease -1s infinite;
}

.grid-stars::after {
  animation-name: grid-stars-b;
  animation-delay: -2.2s;
}

@keyframes grid-stars-a {
  0% {
    transform: translateZ(-40vmin);
    opacity: 0;
  }
  30%,
  80% {
    opacity: 0.7;
  }
  100% {
    transform: translateZ(45vmin) rotate(10deg);
    opacity: 0;
  }
}

@keyframes grid-stars-b {
  0% {
    transform: translateZ(-40vmin) rotate(150deg);
    opacity: 0;
  }
  30%,
  80% {
    opacity: 0.7;
  }
  100% {
    transform: translateZ(45vmin) rotate(165deg);
    opacity: 0;
  }
}

.grid-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    180deg,
    var(--void) 0%,
    transparent 22%,
    transparent 78%,
    var(--void) 100%
  );
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .grid-stage {
    display: none;
  }
}

.hero__grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

/* "The problem" section reuses .hero__grid's mechanics with a slightly
   different column split — a real class instead of an inline style, so
   the ≤1024px stack-to-one-column override in responsive.css can
   actually win (an inline style beats any stylesheet rule regardless of
   media query, which was squeezing the burnout-desk photo into a sliver
   of its 0.9fr column on mobile instead of stacking full-width). */
.problem-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.hero__copy {
  max-width: 620px;
}

.hero-title {
  perspective: 1400px;
  font-family: "Chakra Petch", var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--space-6);
}

.hero-title__visual {
  position: relative;
  display: block;
}

.hero-title__row {
  display: block;
}

.hero-title__row--tag {
  margin-top: 0.22em;
  font-size: 0.4em;
  color: var(--cyan-soft);
}

.hero-title__char {
  display: inline-block;
}

/* Real text (.hero-title__row) is present and fully visible from first
   paint — the no-JS/JS-failed/reduced-motion baseline is just plain
   static text, nothing to unhide. hero-3d.js only adds this class once
   it has successfully booted a WebGL entrance, to withhold the DOM copy
   for the ~1.4s the 3D flight is on screen, then removes it again the
   moment the canvas finishes and fades out — see .hero-title__3d-canvas
   below. */
.hero-title.is-3d-intro .hero-title__row {
  opacity: 0;
}

.hero-title__3d-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease-out;
}

.hero-title__3d-canvas.is-visible {
  opacity: 1;
}

.hero__sub {
  font-size: var(--fs-body-lg);
  color: var(--ink-dim);
  max-width: 540px;
  margin-bottom: var(--space-8);
}

.hero__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-10);
}

.hero__meta {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.hero__meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.hero__meta-item svg {
  width: 15px;
  height: 15px;
  color: var(--cyan-soft);
}

.hero__stage {
  position: relative;
}

.hero__stage .holo-frame {
  animation: holo-drift 9s var(--ease-soft) infinite;
}

@keyframes holo-drift {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__stage .holo-frame {
    animation: none;
  }
}

.hero__proof {
  position: relative;
  z-index: 3;
  margin-top: clamp(3rem, 5vw, 5rem);
}