.hero-journey {
  --hero-progress: 0;
  --pointer-x: 0;
  --pointer-y: 0;
  position: relative;
  height: 165svh;
  background: #050505;
}

.hero-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 42rem;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 44%, rgba(130, 99, 4, .3), transparent 28%),
    radial-gradient(ellipse at 50% 94%, rgba(255, 191, 22, .13), transparent 34%),
    linear-gradient(180deg, #080908 0%, #050605 68%, #020202 100%);
}

.hero-sticky::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 45%), transparent 0 8%, rgba(0, 0, 0, .08) 30%, rgba(0, 0, 0, .84) 92%),
    linear-gradient(90deg, rgba(0, 0, 0, .68), transparent 22% 78%, rgba(0, 0, 0, .68));
}

.hero-sticky::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: -10%;
  right: -10%;
  bottom: -24%;
  height: 52%;
  border-radius: 50% 50% 0 0;
  transform: perspective(680px) rotateX(68deg);
  transform-origin: center top;
  background: linear-gradient(180deg, rgba(255, 213, 39, .2), rgba(255, 255, 255, .035) 2%, #050505 42%);
  box-shadow: inset 0 2px 24px rgba(255, 213, 39, .2);
}

.hero-noise {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: .14;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

.hero-scene {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform-style: preserve-3d;
  perspective: 1250px;
  transform: scale(calc(1 - var(--hero-progress) * .18)) translateY(calc(var(--hero-progress) * -3vh));
  filter: blur(calc(var(--hero-progress) * 8px));
  opacity: calc(1 - var(--hero-progress) * .42);
  transition: filter .12s linear;
}

.hero-ambient {
  position: absolute;
  z-index: 0;
  inset: -16%;
  pointer-events: none;
  background:
    radial-gradient(circle at calc(50% + var(--pointer-x) * 6%) calc(43% + var(--pointer-y) * 4%), rgba(255, 224, 92, .16), transparent 18%),
    conic-gradient(from 210deg at 50% 48%, transparent 0 31%, rgba(255, 213, 39, .08) 38%, transparent 47% 100%);
  filter: blur(34px);
  transform: rotate(calc(var(--pointer-x) * 2deg));
}

.network-canvas {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 43%;
  width: min(63vw, 58rem);
  height: min(63vw, 58rem);
  translate: -50% -50%;
  filter: drop-shadow(0 0 34px rgba(255, 213, 39, .48));
}

.network-halo {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 43%;
  width: min(47vw, 43rem);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe56d 0 2%, #d4a50d 12%, rgba(93, 72, 4, .4) 38%, transparent 70%);
  filter: blur(16px);
  box-shadow: 0 0 150px rgba(255, 213, 39, .3);
  transform: translate3d(calc(var(--pointer-x) * -18px), calc(var(--pointer-y) * -12px), -80px) scale(1.02);
}

.floor-glow {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 2.5%;
  width: min(68vw, 66rem);
  height: 20%;
  translate: -50% 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(255, 213, 39, .74) 0, rgba(196, 124, 7, .32) 25%, rgba(255, 213, 39, .08) 48%, transparent 72%);
  filter: blur(20px);
  transform: translateX(calc(var(--pointer-x) * 2.6vw)) perspective(620px) rotateX(66deg) scaleY(.72);
  mix-blend-mode: screen;
}

.hero-person {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 13%;
  width: min(32vw, 30rem);
  height: 68%;
  translate: -50% 0;
  pointer-events: none;
  transform: translate3d(calc(var(--pointer-x) * 15px), calc(var(--pointer-y) * 8px), 110px) rotateY(calc(var(--pointer-x) * -2.2deg));
  transform-style: preserve-3d;
}

.hero-person::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 0;
  width: 58%;
  height: 8%;
  translate: -50% 58%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.9), rgba(0,0,0,.42) 45%, transparent 72%);
  filter: blur(9px);
}

.hero-person img {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.hero-person-main {
  filter: drop-shadow(0 0 1px rgba(255,255,255,.7)) drop-shadow(0 0 16px rgba(255, 203, 49, .42)) drop-shadow(0 2rem 3rem #000);
}

.hero-person-echo {
  opacity: .13;
  filter: blur(7px) sepia(1) saturate(2.2);
  mix-blend-mode: screen;
  transform: translate3d(calc(var(--pointer-x) * -42px), calc(var(--pointer-y) * -12px), -40px) scale(.985);
}

.depth-card {
  --depth: 1;
  --blur: 0px;
  --scale: 1;
  position: absolute;
  z-index: 2;
  margin: 0;
  width: clamp(8.5rem, 14vw, 14rem);
  aspect-ratio: 1.58;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .22);
  background: #101110;
  box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 213, 39, .08);
  filter: blur(var(--blur)) saturate(.42) contrast(1.18) brightness(.7);
  opacity: var(--opacity, .88);
  transform: translate3d(calc(var(--pointer-x) * var(--depth) * 42px), calc(var(--pointer-y) * var(--depth) * 28px), calc(var(--depth) * 46px)) rotateY(calc(var(--pointer-x) * var(--depth) * -8deg)) rotateX(calc(var(--pointer-y) * var(--depth) * 5deg)) scale(var(--scale));
  transition: filter .45s var(--ease), border-color .45s var(--ease), opacity .45s var(--ease);
}

.depth-card::after {
  content: attr(data-label);
  position: absolute;
  inset: auto .55rem .45rem;
  font: 600 .56rem/1 var(--sans);
  letter-spacing: .1em;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 2px 6px #000;
}

.depth-card img { width: 100%; height: 100%; object-fit: cover; }
.depth-card:hover { --blur: 0px; --opacity: 1; filter: saturate(.9) contrast(1.08) brightness(.98); border-color: var(--acid); }
.depth-card--one { --depth: 1.15; --blur: 2px; left: 2%; top: 30%; rotate: -5deg; }
.depth-card--two { --depth: .76; --blur: 1px; right: 8%; top: 18%; rotate: 5deg; }
.depth-card--three { --depth: 1.38; left: 13%; bottom: 18%; rotate: 4deg; }
.depth-card--four { --depth: 1.04; right: 11%; bottom: 18%; rotate: -5deg; }
.depth-card--five { --depth: .42; --blur: 5px; --scale: .88; --opacity: .46; left: -6%; top: 12%; rotate: 4deg; }
.depth-card--six { --depth: .5; --blur: 5px; --scale: .94; --opacity: .5; right: -7%; top: 36%; rotate: -3deg; }

.hero-copy {
  position: absolute;
  z-index: 9;
  left: 50%;
  bottom: 7svh;
  width: min(96vw, 87rem);
  translate: -50% 0;
  text-align: center;
  pointer-events: none;
  transform: translateY(calc(var(--hero-progress) * -5vh));
  opacity: calc(1 - var(--hero-progress) * .65);
}

.hero-kicker {
  margin: 0 0 1.5rem;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}

.hero-heading {
  position: relative;
  display: inline-block;
  font-size: clamp(4.8rem, 9.4vw, 10.5rem);
  line-height: .71;
  letter-spacing: -.018em;
  text-shadow: 0 .5rem 2.5rem #000;
}

.hero-heading span { display: block; }
.hero-heading span:last-child { margin-left: .42em; }
.hero-swoosh {
  position: absolute;
  z-index: -1;
  left: 4%;
  bottom: 15%;
  width: 94%;
  height: 17%;
  border: clamp(5px, .55vw, 9px) solid var(--acid);
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  rotate: -7deg;
  filter: drop-shadow(0 0 11px rgba(255, 213, 39, .65));
}

.hero-scroll {
  position: absolute;
  z-index: 11;
  bottom: 1.5rem;
}

.hero-scroll {
  left: 50%;
  translate: -50%;
  width: 2.8rem;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background var(--fast), color var(--fast), transform var(--fast);
}
.hero-scroll:hover { background: var(--acid); color: #111; transform: scale(1.08); }

@media (max-width: 900px) {
  .hero-journey { height: 150svh; }
  .hero-sticky { min-height: 38rem; }
  .network-canvas { width: min(92vw, 48rem); height: min(92vw, 48rem); }
  .network-halo { width: min(75vw, 38rem); }
  .floor-glow { width: 90vw; }
  .hero-person { bottom: 13%; width: min(49vw, 29rem); height: 70%; }
  .depth-card { width: clamp(7.2rem, 19vw, 11rem); }
  .depth-card--one { left: 2%; top: 27%; }
  .depth-card--two { right: 2%; top: 20%; }
  .depth-card--three { left: 5%; bottom: 21%; }
  .depth-card--four { right: 4%; bottom: 23%; }
  .depth-card--five { left: -8%; }
  .depth-card--six { right: -9%; }
  .hero-heading { font-size: clamp(5rem, 15.6vw, 9rem); }
}

@media (max-width: 600px) {
  .hero-journey { height: 138svh; }
  .hero-sticky { min-height: 34rem; }
  .network-canvas { top: 43%; width: 118vw; height: 118vw; }
  .network-halo { top: 43%; width: 96vw; }
  .floor-glow { bottom: 7%; width: 116vw; height: 17%; }
  .hero-person { bottom: 15%; width: min(76vw, 24rem); height: 62%; }
  .depth-card { width: clamp(6.4rem, 30vw, 8.5rem); }
  .depth-card--one { --blur: 2px; left: -12%; top: 30%; }
  .depth-card--two { --blur: 1px; right: -13%; top: 22%; }
  .depth-card--three { left: -3%; bottom: 25%; }
  .depth-card--four, .depth-card--five, .depth-card--six { display: none; }
  .hero-copy { bottom: 10svh; width: 100%; padding-inline: .55rem; }
  .hero-kicker { font-size: .54rem; margin-bottom: 2.1rem; }
  .hero-heading { width: 100%; font-size: clamp(4.25rem, 21vw, 7rem); line-height: .75; }
  .hero-heading span:last-child { margin-left: 0; }
  .hero-swoosh { left: 8%; width: 84%; bottom: 13%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scene, .depth-card, .hero-person, .network-halo { transform: none !important; filter: none; }
  .hero-person-echo { display: none; }
}