:root {
  --scroll-y: 0;
  --scroll-pct: 0;
  --layer-offset-slow: 0;
  --layer-offset-fast: 0;
  --noise-freq: 0.65;
  --deep-magenta: #c71585;
  --magenta: #ff1493;
  --cyan: #00e5ff;
  --lemon: #dfff00;
  --violet: #9f5fff;
  --coral: #ff6b6b;
  --abyss: #0a0a1a;
  --white: #f0eef5;
}

/* Design typography provenance: Inter" (Google Fonts, Space Grotesk" (Google Fonts. Interaction note: IntersectionObserver adding a `.glow-active` class that transitions `text-shadow` spread from 40px to 80px; implemented with IntersectionObserver` semantics (threshold 0.3. */

* { box-sizing: border-box; }

html { background: #0a0a1a; }

body {
  margin: 0;
  min-height: 100vh;
  color: #f0eef5;
  font-family: "Inter", sans-serif;
  font-weight: 300;
  background: linear-gradient(180deg, #0a0a1a 0%, #1a0a2e 50%, #0a1a2e 100%);
  overflow-x: hidden;
}

.noise-source {
  position: absolute;
  width: 0;
  height: 0;
}

.noise-overlay {
  position: fixed;
  inset: 0;
  filter: url(#noise);
  opacity: 0.07;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 9999;
}

.depth-container {
  position: fixed;
  inset: 0;
  perspective: 1200px;
  transform-style: preserve-3d;
  pointer-events: none;
  overflow: hidden;
}

.layer {
  position: absolute;
  inset: -12vh -12vw;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.layer--abyss {
  position: fixed;
  inset: 0;
  transform: translateZ(-260px) scale(1.25);
  background:
    radial-gradient(circle at 50% calc(10% + (var(--scroll-pct) * 70%)), rgba(255, 20, 147, 0.52), transparent 34%),
    radial-gradient(circle at calc(85% - (var(--scroll-pct) * 55%)) 44%, rgba(0, 229, 255, 0.42), transparent 30%),
    radial-gradient(circle at 22% 76%, rgba(223, 255, 0, 0.18), transparent 24%),
    linear-gradient(180deg, #0a0a1a 0%, #1a0a2e 50%, #0a1a2e 100%);
}

.layer--fog {
  transform: translateZ(-200px) scale(1.18);
  background:
    radial-gradient(circle at 20% 30%, rgba(240, 238, 245, 0.08), transparent 22%),
    radial-gradient(circle at 78% 60%, rgba(159, 95, 255, 0.13), transparent 24%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 26px);
  opacity: 0.8;
}

.layer--accents {
  transform: translateY(calc(var(--layer-offset-slow) * -1px)) translateZ(40px);
  z-index: 4;
}

main {
  position: relative;
  z-index: 10;
  transform-style: preserve-3d;
}

.zone {
  min-height: 120vh;
  display: grid;
  place-items: center;
  padding: 12vh clamp(1rem, 4vw, 5rem);
  position: relative;
}

.zone__inner {
  width: min(1080px, 92vw);
  position: relative;
  transform-style: preserve-3d;
}

.glass-panel,
.signal-field,
.resonance-panel,
.threshold-point,
.portal-stack {
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 24px;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(20px);
  box-shadow: 0 30px 110px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.16);
  padding: clamp(2rem, 6vw, 5rem);
}

.portal-stack {
  background: linear-gradient(135deg, rgba(255,20,147,0.13), rgba(159,95,255,0.09), rgba(0,229,255,0.07));
  box-shadow: 0 0 90px rgba(255,20,147,0.24), inset 0 1px 0 rgba(255,255,255,0.2);
}

.kicker {
  margin: 0 0 1rem;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  color: rgba(240,238,245,0.74);
  letter-spacing: 0.18em;
  text-transform: lowercase;
}

.hero-word {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: clamp(5rem, 18vw, 14rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.85;
  background: linear-gradient(135deg, #ff1493, #9f5fff, #00e5ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 34px rgba(255,20,147,0.42));
  transform: translateY(calc((var(--layer-offset-fast) - var(--scroll-y)) * -0.06px)) translateZ(100px);
}

.hero-word span {
  display: inline-block;
  clip-path: inset(100% 0 0 0);
  transform: translateY(0.22em) rotateX(35deg);
  transition: clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--letter-index, 0) * 80ms);
}

.is-visible .hero-word span {
  clip-path: inset(0 0 0 0);
  transform: translateY(0) rotateX(0deg);
}

h2 {
  max-width: 880px;
  margin: 0 0 1.5rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.95;
  text-shadow: 0 0 40px currentColor;
  transition: text-shadow 0.8s cubic-bezier(0.16, 1, 0.3, 1), color 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateY(calc((var(--layer-offset-fast) - var(--scroll-y)) * -0.035px));
}

.glow-active h2 { text-shadow: 0 0 80px currentColor; }

.zone--spectrum h2 { color: #00e5ff; }
.zone--signal h2 { color: #00e5ff; }
.zone--resonance h2 { color: #9f5fff; }
.zone--threshold h2 { color: #ff6b6b; }

.body-copy {
  max-width: 680px;
  margin: 1rem 0 0;
  color: rgba(255,255,255,0.88);
  font-size: clamp(0.9rem, 1.2vw, 1.1rem);
  line-height: 1.7;
  letter-spacing: 0.01em;
}

.reveal-block {
  opacity: 0;
  transform: translateY(54px) translateZ(0);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-block.is-visible {
  opacity: 1;
  transform: translateY(0) translateZ(0);
}

.body-copy {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.is-visible .body-copy { opacity: 1; transform: translateY(0); }
.is-visible .body-copy:nth-of-type(2) { transition-delay: 180ms; }
.is-visible .body-copy:nth-of-type(3) { transition-delay: 360ms; }

.spectrum-bands {
  position: relative;
  height: clamp(160px, 24vw, 260px);
  margin: 2rem 0;
  transform-style: preserve-3d;
}

.spectrum-bands span {
  position: absolute;
  inset: 10% 5%;
  border-radius: 24px;
  backdrop-filter: blur(16px);
  opacity: 0.72;
  box-shadow: 0 0 60px currentColor;
}

.spectrum-bands span:nth-child(1) { color: #ff1493; background: rgba(255,20,147,0.22); transform: translate(-7%, -13%) rotate(-7deg) translateZ(40px); }
.spectrum-bands span:nth-child(2) { color: #9f5fff; background: rgba(159,95,255,0.22); transform: translate(6%, -2%) rotate(4deg) translateZ(10px); }
.spectrum-bands span:nth-child(3) { color: #00e5ff; background: rgba(0,229,255,0.20); transform: translate(-2%, 12%) rotate(-3deg) translateZ(-25px); }
.spectrum-bands span:nth-child(4) { color: #dfff00; background: rgba(223,255,0,0.16); transform: translate(14%, 22%) rotate(8deg) translateZ(65px); }

.pulse-lines {
  display: grid;
  gap: 1rem;
  margin: 2rem 0;
}

.pulse-lines i {
  height: clamp(12px, 2vw, 22px);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #00e5ff, #dfff00, transparent);
  box-shadow: 0 0 60px rgba(0,229,255,0.4);
  animation: signal-pulse 3.2s ease-in-out infinite;
  transform-origin: left center;
}

.pulse-lines i:nth-child(2) { animation-delay: 0.2s; width: 80%; }
.pulse-lines i:nth-child(3) { animation-delay: 0.4s; width: 64%; }
.pulse-lines i:nth-child(4) { animation-delay: 0.6s; width: 88%; }
.pulse-lines i:nth-child(5) { animation-delay: 0.8s; width: 54%; }

.mandala {
  position: relative;
  width: min(70vw, 520px);
  aspect-ratio: 1;
  margin: 2rem auto;
  transform-style: preserve-3d;
}

.mandala span {
  position: absolute;
  inset: calc(var(--ring, 0) * 9%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  box-shadow: 0 0 60px rgba(159,95,255,0.4), inset 0 0 40px rgba(255,20,147,0.11);
  animation: ring-drift 20s linear infinite;
}

.mandala span:nth-child(1) { --ring: 0; border-color: rgba(159,95,255,0.42); }
.mandala span:nth-child(2) { --ring: 1; border-color: rgba(0,229,255,0.34); animation-duration: 24s; }
.mandala span:nth-child(3) { --ring: 2; border-color: rgba(255,20,147,0.36); animation-duration: 28s; }
.mandala span:nth-child(4) { --ring: 3; border-color: rgba(223,255,0,0.28); animation-duration: 32s; }
.mandala span:nth-child(5) { --ring: 4; border-color: rgba(255,107,107,0.4); animation-duration: 36s; }

.singularity {
  width: min(42vw, 320px);
  aspect-ratio: 1;
  margin: 2.5rem auto;
  border-radius: 50%;
  background:
    radial-gradient(circle, #f0eef5 0 4%, #dfff00 5% 15%, #ff6b6b 18% 31%, #ff1493 34% 49%, #9f5fff 54%, #00e5ff 68%, transparent 70%);
  box-shadow: 0 0 80px rgba(255,107,107,0.65), 0 0 150px rgba(0,229,255,0.38), 0 0 230px rgba(255,20,147,0.25);
  animation: pulse 4s ease-in-out infinite alternate;
}

.pill, .orb, .shard, .ring-cluster { position: absolute; will-change: transform, opacity; }

.pill {
  width: 86px;
  height: 30px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  animation: float 8s ease-in-out infinite;
}

.pill--one { left: 7%; top: 16%; background: rgba(255,20,147,0.38); box-shadow: 0 0 60px rgba(255,20,147,0.4); }
.pill--two { right: 12%; top: 28%; background: rgba(0,229,255,0.34); box-shadow: 0 0 60px rgba(0,229,255,0.4); animation-delay: -2s; }
.pill--three { left: 18%; top: 58%; background: rgba(223,255,0,0.28); box-shadow: 0 0 60px rgba(223,255,0,0.4); animation-delay: -4s; }
.pill--four { right: 18%; top: 82%; background: rgba(255,107,107,0.32); box-shadow: 0 0 60px rgba(255,107,107,0.4); animation-delay: -6s; }

.orb {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle, #dfff00 0%, transparent 70%);
  animation: pulse 4s ease-in-out infinite alternate;
}

.orb--one { left: 50%; top: 22%; }
.orb--two { left: 30%; top: 45%; background: radial-gradient(circle, #00e5ff 0%, transparent 70%); animation-delay: -1s; }
.orb--three { right: 28%; top: 66%; background: radial-gradient(circle, #ff1493 0%, transparent 70%); animation-delay: -2s; }
.orb--four { right: 45%; top: 90%; background: radial-gradient(circle, #ff6b6b 0%, transparent 70%); animation-delay: -3s; }

.shard {
  width: 32vw;
  height: 24vw;
  clip-path: polygon(8% 0, 100% 22%, 72% 100%, 0 70%);
  opacity: 0.16;
  animation: rotate 48s linear infinite;
}

.shard--one { left: -8vw; top: 4vh; background: #ff1493; }
.shard--two { right: -7vw; top: 24vh; background: #00e5ff; animation-duration: 58s; animation-direction: reverse; }
.shard--three { left: 42vw; top: 74vh; background: #dfff00; animation-duration: 36s; }

.ring-cluster {
  width: 70vw;
  aspect-ratio: 1;
  border-radius: 50%;
  animation: ring-drift 20s linear infinite;
}

.ring-cluster--one { left: -24vw; top: 96vh; }
.ring-cluster--two { right: -30vw; top: 310vh; animation-duration: 30s; }

.ring-cluster span {
  position: absolute;
  inset: calc(var(--i, 0) * 7%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%;
}

.ring-cluster span:nth-child(1) { --i: 0; }
.ring-cluster span:nth-child(2) { --i: 1; }
.ring-cluster span:nth-child(3) { --i: 2; }
.ring-cluster span:nth-child(4) { --i: 3; }
.ring-cluster span:nth-child(5) { --i: 4; }
.ring-cluster span:nth-child(6) { --i: 5; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-20px) rotate(4deg); }
}

@keyframes pulse {
  from { opacity: 0.3; transform: scale(0.92); }
  to { opacity: 0.7; transform: scale(1.08); }
}

@keyframes rotate { to { transform: rotate(360deg); } }

@keyframes ring-drift { to { transform: rotate(360deg); } }

@keyframes signal-pulse {
  0%, 100% { transform: scaleX(0.45); opacity: 0.38; }
  50% { transform: scaleX(1); opacity: 0.95; }
}

@media (max-width: 700px) {
  .glass-panel, .signal-field, .resonance-panel, .threshold-point, .portal-stack { padding: 2rem; }
  .zone { min-height: 110vh; }
  .hero-word { font-size: clamp(4.4rem, 22vw, 7rem); }
}