/* HERO — #hero — every rule scoped to #hero. Tokens only. */

#hero {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gutter);
  isolation: isolate;
}

/* ---- light layer: beam ---- */
#hero .hero-beam {
  position: absolute;
  z-index: 0;
  left: -20%;
  bottom: 6%;
  width: 140vw;
  height: 34vh;
  background: var(--prism);
  filter: blur(clamp(40px, 6vw, 80px)) saturate(1.15);
  mix-blend-mode: screen;
  opacity: 0.42;
  transform: rotate(-24deg);
  transform-origin: 50% 50%;
  pointer-events: none;
  will-change: transform;
}

/* ---- light layer: liquid light-leak (organic, slow — animated in hero.js) ----
   smooth gradients only: hard bands strobe against the stepped grain overlay */
#hero .hero-liquid {
  position: absolute;
  z-index: 0;
  right: -14%;
  bottom: -28%;
  width: 58vw;
  height: 58vw;
  min-width: 440px;
  min-height: 440px;
  pointer-events: none;
  filter: blur(clamp(28px, 3.5vw, 56px)) saturate(1.12);
}

#hero .liquid-blob {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

#hero .liquid-amber {
  inset: 4% 14% 26% 6%;
  background: radial-gradient(circle at 42% 44%, #FF7A29 0%, rgba(255, 122, 41, 0.5) 44%, transparent 72%);
  mix-blend-mode: screen;
  opacity: 0.52;
}

#hero .liquid-gold {
  inset: 32% 2% 4% 36%;
  background: radial-gradient(circle at 55% 45%, #FFC24B 0%, rgba(255, 194, 75, 0.42) 42%, transparent 70%);
  mix-blend-mode: screen;
  opacity: 0.4;
}

#hero .liquid-ember {
  inset: 18% 44% 30% 0%;
  background: radial-gradient(circle at 50% 55%, #FF4A1F 0%, rgba(255, 74, 31, 0.4) 40%, transparent 68%);
  mix-blend-mode: screen;
  opacity: 0.3;
}

/* the dark blob paints void back over the glow — the organic negative shapes
   that make it read as liquid rather than a lamp */
#hero .liquid-dark {
  inset: 20% 20% 8% 28%;
  background: radial-gradient(circle at 50% 50%, #0A090B 0%, rgba(10, 9, 11, 0.85) 46%, transparent 72%);
  opacity: 0.95;
}

/* ---- content ---- */
#hero .hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  max-width: 64rem;
}

#hero .hero-eyebrow {
  margin-bottom: clamp(1rem, 3vh, 1.75rem);
}

#hero .hero-title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: 0.86;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  color: var(--bone);
}

@media (max-width: 767px) {
  #hero .hero-title { line-height: 0.9; letter-spacing: -0.035em; }
}

/* hero-specific chromatic settle: combines scroll-velocity --rgb with load-in --hero-rgb */
#hero .hero-title .rgb-split {
  text-shadow:
    calc((var(--rgb, 0) + var(--hero-rgb, 0)) * 1px) 0 rgba(255, 61, 129, 0.55),
    calc((var(--rgb, 0) + var(--hero-rgb, 0)) * -1px) 0 rgba(62, 102, 255, 0.55);
}

#hero .hero-sub {
  max-width: 34em;
  font-size: var(--text-body);
  line-height: 1.6;
  color: color-mix(in srgb, var(--bone) 92%, transparent);
  margin-top: clamp(1.25rem, 3vh, 2rem);
}

#hero .hero-meta {
  margin-top: 2rem;
}

#hero .hero-hint {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: clamp(1.25rem, 4vh, 2.5rem);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.5em;
  white-space: nowrap;
}

#hero .hint-arrow {
  display: inline-block;
}

@media (max-width: 767px) {
  #hero .hero-beam {
    height: 26vh;
    bottom: 10%;
  }
  #hero .hero-liquid {
    width: 105vw;
    height: 105vw;
    right: -34%;
    bottom: -30%;
  }
  #hero .hero-hint {
    font-size: 0.62rem;
  }
}

@media (min-width: 1440px) {
  #hero .hero-inner {
    max-width: 72rem;
  }
}