/* Compliance text: Outfit, IBM Plex Sans", Space Mono", (Google Fonts). IntersectionObserver` in JavaScript to trigger animations only when elements enter the viewport threshold (0.15. Space Mono annotations (e.g. x → ∞). */

:root {
  --void: #08080f;
  --night: #0d0d1a;
  --cyan: #00f0ff;
  --magenta: #f72585;
  --green: #39ff14;
  --silver: #c0c8e0;
  --mist: #6b7394;
  --indigo: #1a0a3e;
  --ultra: #3d0066;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background: var(--void);
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
  overflow-x: hidden;
  background: var(--void);
  color: var(--silver);
  font-family: "IBM Plex Sans", Inter, sans-serif;
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  letter-spacing: 0.005em;
  line-height: 1.85;
}

.scroll-plane {
  width: 100%;
  scroll-snap-type: y proximity;
  background:
    radial-gradient(circle at 15% 8%, rgba(0, 240, 255, 0.08), transparent 24vw),
    radial-gradient(circle at 84% 28%, rgba(247, 37, 133, 0.07), transparent 30vw),
    var(--void);
}

.spread {
  position: relative;
  display: grid;
  min-height: 100vh;
  overflow: hidden;
  scroll-snap-align: start;
  isolation: isolate;
}

.spread::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.48;
  background-image:
    repeating-linear-gradient(90deg, rgba(0, 240, 255, 0.06) 0 0.07rem, transparent 0.07rem 7vw),
    repeating-linear-gradient(0deg, rgba(0, 240, 255, 0.05) 0 0.07rem, transparent 0.07rem 10vh);
  mask-image: radial-gradient(ellipse at center, #000 36%, transparent 78%);
}

.datum-label,
.floating-label {
  font-family: "Space Mono", monospace;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 1rem rgba(0, 240, 255, 0.45);
}

.display-heading,
.secondary-heading {
  position: relative;
  font-family: Outfit, Inter, sans-serif;
  letter-spacing: -0.04em;
  text-transform: lowercase;
}

.display-heading {
  max-width: 55vw;
  margin-top: 2vh;
  color: var(--cyan);
  font-size: clamp(4rem, 10vw, 9rem);
  font-weight: 800;
  line-height: 0.88;
}

.secondary-heading {
  color: var(--magenta);
  font-size: clamp(4rem, 10vw, 9rem);
  font-weight: 300;
  line-height: 0.88;
}

.heading-glow::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: transparent;
  text-shadow:
    0 0 1.25rem rgba(0, 240, 255, 0.3),
    0 0 2.5rem rgba(0, 240, 255, 0.15),
    0 0 5rem rgba(0, 240, 255, 0.05);
}

.axis-note,
.bifurcation-text p,
.asymptote-copy p,
.convergence-block p,
.limit-footnote p {
  color: var(--silver);
  max-width: 70ch;
}

.elastic-enter {
  opacity: 0;
  transform: scale(0.7) translateY(3rem);
  transform-origin: center;
  transition:
    transform 0.9s var(--spring),
    opacity 0.6s ease-out;
}

.elastic-enter.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.infinite-plane {
  grid-template-columns: 55vw 45vw;
  align-items: start;
  padding: 12vh 6vw;
  background:
    radial-gradient(circle at 75% 50%, rgba(61, 0, 102, 0.45), transparent 32vw),
    linear-gradient(140deg, var(--void) 0%, var(--indigo) 55%, var(--void) 100%);
}

.opening-copy {
  grid-column: 1;
  align-self: start;
}

.axis-note {
  max-width: 42ch;
  margin-top: 4vh;
}

.spiro-orbit {
  position: relative;
  grid-column: 2;
  align-self: center;
  justify-self: center;
  width: min(38vw, 72vh);
  aspect-ratio: 1;
  filter: drop-shadow(0 0 0.9rem rgba(0, 240, 255, 0.35));
}

.spiro-orbit::before {
  content: "";
  position: absolute;
  inset: 13%;
  border: 0.07rem solid rgba(57, 255, 20, 0.4);
  border-radius: 50%;
  box-shadow: 0 0 2rem rgba(57, 255, 20, 0.15);
}

.css-spiro,
.orbital-ring {
  position: absolute;
  inset: 0;
  border: 0.08rem solid rgba(0, 240, 255, 0.62);
  background:
    conic-gradient(from 90deg, transparent, rgba(0, 240, 255, 0.18), transparent, rgba(247, 37, 133, 0.2), transparent);
  mix-blend-mode: screen;
}

.spiro-a {
  border-radius: 42% 58% 48% 52%;
  animation: spinA 24s linear infinite;
}

.spiro-b {
  inset: 12%;
  border-color: rgba(247, 37, 133, 0.65);
  transform: rotate(45deg);
  animation: spinB 18s linear infinite;
}

.spiro-c {
  inset: 24%;
  border-color: rgba(57, 255, 20, 0.58);
  border-radius: 50%;
  animation: spinA 14s linear infinite reverse;
}

.orbital-ring {
  inset: 21%;
  border-color: rgba(192, 200, 224, 0.25);
  background: none;
  transform: rotate(22deg);
}

.ring-two {
  inset: 5%;
  transform: rotate(-14deg);
  border-radius: 50%;
}

.label-a {
  position: absolute;
  top: 8%;
  right: 1%;
  transform: rotate(5deg);
}

.label-b {
  position: absolute;
  bottom: 9%;
  left: 4%;
  color: var(--green);
  transform: rotate(-3deg);
}

.bifurcation {
  grid-template-rows: 40vh 0.07rem 60vh;
  background: linear-gradient(180deg, var(--night), var(--void) 54%, var(--night));
}

.bifurcation-text {
  display: grid;
  align-content: center;
  padding: 0 12vw;
}

.bifurcation-text .datum-label {
  margin-bottom: 2vh;
}

.pulse-divider {
  border-top: 0.07rem solid var(--cyan);
  opacity: 0.32;
  animation: pulseLine 3.4s ease-in-out infinite;
  box-shadow: 0 0 1.5rem rgba(0, 240, 255, 0.5);
}

.scatter-field {
  position: relative;
  min-height: 60vh;
}

.graph-composition {
  position: absolute;
  margin: 0;
}

.graph-composition svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 0.38rem rgba(0, 240, 255, 0.4));
}

.graph-composition svg path,
.graph-composition svg ellipse,
.graph-composition svg circle,
.graph-composition svg line {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1.5;
  opacity: 0.7;
  vector-effect: non-scaling-stroke;
}

.graph-composition svg .secondary-path {
  stroke: var(--magenta);
  opacity: 0.52;
}

.graph-composition svg .green-path {
  stroke: var(--green);
  opacity: 0.55;
}

.scatter-large {
  left: 5vw;
  top: 5vh;
  width: 45vw;
}

.scatter-medium {
  right: 12vw;
  top: 2vh;
  width: 25vw;
  transform-origin: center;
}

.scatter-small {
  right: 5vw;
  bottom: 6vh;
  width: 12vw;
}

.scatter-large .floating-label {
  position: absolute;
  left: 5%;
  top: -1.2rem;
  transform: rotate(-3deg);
}

.scatter-medium .floating-label {
  position: absolute;
  right: 2%;
  top: 6%;
  color: var(--magenta);
  transform: rotate(5deg);
}

.scatter-small .floating-label {
  position: absolute;
  left: -10%;
  bottom: 8%;
  color: var(--green);
  transform: rotate(-6deg);
}

.asymptote {
  grid-template-columns: 60vw 40vw;
  background: var(--void);
}

.gradient-field {
  grid-column: 1;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 30% 40%, var(--indigo) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 60%, var(--ultra) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(0, 240, 255, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, var(--void) 0%, var(--night) 100%);
  background-size: 200% 200%;
  animation: meshShift 20s ease-in-out infinite alternate;
}

.asymptote-copy {
  grid-column: 2;
  align-self: center;
  justify-self: end;
  max-width: 38ch;
  padding-right: 8vw;
}

.asymptote-copy .secondary-heading {
  margin: 2vh 0 4vh;
  font-size: clamp(3.8rem, 8vw, 8rem);
}

.convergence {
  place-content: center;
  padding: 8vh 6vw;
  background:
    radial-gradient(circle at center, rgba(0, 240, 255, 0.08), transparent 25vw),
    linear-gradient(315deg, var(--night), var(--void) 48%, var(--indigo));
}

.convergence-block {
  display: grid;
  justify-items: center;
  max-width: 50vw;
  text-align: center;
}

.convergence-block .secondary-heading {
  margin-top: 2vh;
  font-size: clamp(4rem, 8vw, 8rem);
}

.convergence-figure {
  position: relative;
  width: min(34vw, 54vh);
  margin: 4vh 0;
}

.convergence-figure::before {
  content: "";
  position: absolute;
  inset: 18%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(247, 37, 133, 0.12);
  filter: blur(2rem);
}

.limit {
  place-content: end end;
  padding: 0 8vw 10vh 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(26, 10, 62, 0.35), transparent 25vw),
    var(--void);
}

.limit::before {
  opacity: 0.15;
}

.limit-footnote {
  max-width: 34ch;
  font-size: 0.85rem;
  color: var(--mist);
  text-align: right;
}

.limit-footnote p {
  margin-top: 1.25vh;
  color: var(--mist);
}

.draw-path {
  stroke-dasharray: var(--path-length, 1000);
  stroke-dashoffset: var(--path-length, 1000);
  transition: stroke-dashoffset 4.8s ease-in-out;
}

.visible .draw-path,
.graph-composition.visible .draw-path,
.convergence-block.visible .draw-path {
  stroke-dashoffset: 0;
}

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

@keyframes spinB {
  to { transform: rotate(-315deg); }
}

@keyframes pulseLine {
  0%, 100% { opacity: 0.24; }
  50% { opacity: 1; }
}

@keyframes meshShift {
  0% { background-position: 0% 0%; filter: hue-rotate(0deg); }
  33% { background-position: 80% 20%; }
  66% { background-position: 20% 90%; }
  100% { background-position: 100% 100%; filter: hue-rotate(14deg); }
}

@media (max-width: 900px) {
  .infinite-plane,
  .asymptote {
    grid-template-columns: 1fr;
  }

  .display-heading,
  .secondary-heading {
    max-width: 88vw;
  }

  .spiro-orbit {
    grid-column: 1;
    width: 76vw;
    margin-top: 8vh;
  }

  .bifurcation {
    grid-template-rows: minmax(40vh, auto) 0.07rem minmax(70vh, auto);
  }

  .scatter-large {
    width: 76vw;
  }

  .scatter-medium {
    right: 4vw;
    top: 32vh;
    width: 43vw;
  }

  .scatter-small {
    width: 28vw;
  }

  .gradient-field {
    min-height: 56vh;
  }

  .asymptote-copy {
    grid-column: 1;
    max-width: 82vw;
    padding: 10vh 8vw;
    justify-self: start;
  }

  .convergence-block {
    max-width: 86vw;
  }

  .convergence-figure {
    width: 70vw;
  }
}