:root {
  --dawn-cream: #FFF7D6;
  --raspberry: #FF4FA3;
  --lemon: #FFE75C;
  --mint: #72F2C7;
  --cyan: #50D7FF;
  --violet: #7C5CFF;
  --ink: #17203A;
  --glass-a: rgba(255, 255, 255, 0.34);
  --glass-b: rgba(255, 255, 255, 0.58);
  --glass-edge: rgba(255, 255, 255, 0.72);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  font-family: "Nunito Sans", Inter, sans-serif;
  background: var(--dawn-cream);
  overflow-x: hidden;
}

.mono { font-family: "IBM Plex Mono", monospace; }

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  background: linear-gradient(180deg, #FFF7D6 0%, #fff0c7 28%, #ffd8ef 56%, #d9f8ff 100%);
}

.glow, .horizon {
  position: absolute;
  display: block;
  pointer-events: none;
}

.glow {
  width: 42vw;
  height: 42vw;
  border-radius: 999px;
  filter: blur(48px);
  opacity: .58;
  transform: translate3d(0, calc(var(--scroll, 0) * .05px), 0);
}

.glow-raspberry { left: -9vw; top: 9vh; background: #FF4FA3; }
.glow-violet { right: -14vw; top: 25vh; background: #7C5CFF; transform: translate3d(0, calc(var(--scroll, 0) * -.04px), 0); }
.glow-cyan { left: 20vw; bottom: -16vw; background: #50D7FF; }
.glow-lemon { right: 18vw; top: -15vw; background: #FFE75C; opacity: .78; }
.horizon { left: -10vw; right: -10vw; height: 16vh; border-radius: 50%; filter: blur(18px); }
.horizon-one { bottom: 21vh; background: rgba(114, 242, 199, .34); }
.horizon-two { bottom: 8vh; background: rgba(255, 231, 92, .28); }

.provenance-thread {
  position: fixed;
  inset: 0 auto 0 50%;
  width: 34vw;
  height: 100vh;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  opacity: .72;
}

.provenance-thread path {
  fill: none;
  stroke: url(#none);
  stroke: #50D7FF;
  stroke-width: .55;
  stroke-linecap: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  filter: drop-shadow(0 0 12px rgba(80, 215, 255, .72));
}

.front-hud {
  position: fixed;
  inset: 22px;
  z-index: 8;
  pointer-events: none;
}

.corner {
  position: absolute;
  width: 64px;
  height: 64px;
  border-color: rgba(80, 215, 255, .82);
  filter: drop-shadow(0 0 10px rgba(80, 215, 255, .38));
}
.corner-tl { top: 0; left: 0; border-top: 2px solid; border-left: 2px solid; border-radius: 24px 0 0 0; }
.corner-tr { top: 0; right: 0; border-top: 2px solid; border-right: 2px solid; border-radius: 0 24px 0 0; }
.corner-bl { bottom: 0; left: 0; border-bottom: 2px solid; border-left: 2px solid; border-radius: 0 0 0 24px; }
.corner-br { bottom: 0; right: 0; border-bottom: 2px solid; border-right: 2px solid; border-radius: 0 0 24px 0; }

.scanline {
  position: absolute;
  left: 10%;
  right: 10%;
  height: 1px;
  top: 12%;
  background: linear-gradient(90deg, transparent, rgba(80, 215, 255, .72), transparent);
  animation: scan 7s ease-in-out infinite;
}

.coordinate {
  position: absolute;
  top: 7px;
  left: 86px;
  color: rgba(23, 32, 58, .58);
  font-size: 11px;
  letter-spacing: .14em;
}

.progress-rail {
  position: fixed;
  right: 34px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9;
  display: grid;
  gap: 16px;
}

.rail-dot {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .58);
  border: 1px solid rgba(255, 255, 255, .72);
  box-shadow: 0 0 0 4px rgba(80, 215, 255, .08);
  text-decoration: none;
}

.rail-dot span {
  position: absolute;
  right: 20px;
  top: -5px;
  opacity: 0;
  color: var(--ink);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  transition: opacity .3s, transform .3s;
  transform: translateX(8px);
}
.rail-dot.active { background: #FF4FA3; box-shadow: 0 0 18px rgba(255, 79, 163, .55); }
.rail-dot.active span, .rail-dot:hover span { opacity: 1; transform: translateX(0); }

.chapter {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: minmax(24px, 1fr) minmax(0, 1180px) minmax(24px, 1fr);
  align-items: center;
  overflow: hidden;
  padding: 96px 0;
}

.chapter > * { grid-column: 2; }

.glass-sheet, .ingredient-label, .package-capsule, .weather-glyph, .archive-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .34));
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  box-shadow: 0 24px 80px rgba(80, 215, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, .82);
}

.glass-sheet {
  border-radius: 42px;
  padding: clamp(30px, 5vw, 70px);
  max-width: 720px;
  transform: translateY(50px);
  opacity: 0;
  transition: transform 1.2s cubic-bezier(.2, .8, .2, 1), opacity 1s;
}
.chapter.in-view .glass-sheet { opacity: 1; transform: translateY(0); }
.hero-sheet { margin: auto; max-width: 980px; text-align: center; }
.narrative.left { justify-self: start; }
.narrative.right { justify-self: end; }
.narrative.center { justify-self: center; text-align: center; }
.compact { max-width: 600px; }

.eyebrow {
  margin: 0 0 18px;
  color: rgba(23, 32, 58, .58);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

h1, h2 {
  font-family: Outfit, Futura, sans-serif;
  margin: 0;
  line-height: .94;
  letter-spacing: -.045em;
  color: var(--ink);
}
h1 { font-size: clamp(58px, 10vw, 142px); font-weight: 800; }
h2 { font-size: clamp(42px, 6.6vw, 86px); font-weight: 750; }
p { font-size: clamp(18px, 2vw, 23px); line-height: 1.55; }
.lede { max-width: 760px; margin: 28px auto 0; }

.drawn {
  position: relative;
  display: inline-block;
}
.drawn::after {
  content: "";
  position: absolute;
  left: .02em;
  right: .02em;
  bottom: .02em;
  height: .12em;
  border-radius: 999px;
  background: #FF4FA3;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s cubic-bezier(.2, .9, .2, 1) .35s;
  z-index: -1;
}
.drawn.lemon::after { background: #FFE75C; }
.chapter.in-view .drawn::after { transform: scaleX(1); }

.specimen-stage {
  position: relative;
  min-height: 300px;
  margin-top: 40px;
  display: grid;
  place-items: center;
}
.hud-bracket {
  position: absolute;
  width: min(620px, 86vw);
  height: 210px;
  border: 2px solid rgba(80, 215, 255, .7);
  border-radius: 44px;
  clip-path: polygon(0 0, 22% 0, 22% 8%, 8% 8%, 8% 28%, 0 28%, 0 72%, 8% 72%, 8% 92%, 22% 92%, 22% 100%, 0 100%, 0 0, 100% 0, 78% 0, 78% 8%, 92% 8%, 92% 28%, 100% 28%, 100% 72%, 92% 72%, 92% 92%, 78% 92%, 78% 100%, 100% 100%, 100% 0);
  opacity: 0;
  transform: scale(.94);
  transition: opacity 1s .7s, transform 1s .7s;
}
.chapter.in-view .hud-bracket { opacity: 1; transform: scale(1); }

.package-capsule {
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  min-width: min(560px, 82vw);
}
.primary-capsule { opacity: 0; transform: translateY(26px) scale(.96); transition: opacity 1s .45s, transform 1s .45s; }
.chapter.in-view .primary-capsule { opacity: 1; transform: translateY(0) scale(1); }
.package-capsule strong, .ingredient-label strong, .weather-glyph strong, .archive-card strong { font-family: Outfit, sans-serif; font-size: 22px; }
.package-capsule small, .ingredient-label small, .weather-glyph small { display: block; margin-top: 3px; color: rgba(23, 32, 58, .62); font-size: 12px; }
.barcode { width: 48px; height: 44px; border-radius: 13px; background: repeating-linear-gradient(90deg, #17203A 0 2px, transparent 2px 6px), rgba(255,255,255,.42); opacity: .55; }
.version-chip { margin-left: auto; padding: 10px 13px; border-radius: 999px; background: rgba(114, 242, 199, .55); color: var(--ink); font-style: normal; font-size: 11px; }
.particle { position: absolute; border-radius: 999px; padding: 9px 12px; background: rgba(255,255,255,.5); border: 1px solid var(--glass-edge); font-size: 11px; animation: float 6s ease-in-out infinite; }
.p1 { left: 10%; top: 18%; color: #7C5CFF; }
.p2 { right: 12%; top: 22%; color: #FF4FA3; animation-delay: -1.5s; }
.p3 { right: 26%; bottom: 10%; color: #50D7FF; animation-delay: -3s; }

.ingredient-stack {
  justify-self: end;
  width: min(590px, 92vw);
  display: grid;
  gap: 16px;
  margin-top: -120px;
}
.ingredient-label {
  border-radius: 28px;
  padding: 20px 22px;
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 14px;
  transform: translateX(80px);
  opacity: 0;
  transition: transform .9s cubic-bezier(.2, .8, .2, 1), opacity .9s;
}
.chapter.in-view .ingredient-label { transform: translateX(0); opacity: 1; }
.chapter.in-view .ingredient-label:nth-child(2) { transition-delay: .12s; }
.chapter.in-view .ingredient-label:nth-child(3) { transition-delay: .24s; }
.chapter.in-view .ingredient-label:nth-child(4) { transition-delay: .36s; }
.dot { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 18px currentColor; }
.mint { color: #72F2C7; background: #72F2C7; }
.cyan { color: #50D7FF; background: #50D7FF; }
.raspberry { color: #FF4FA3; background: #FF4FA3; }
.lemon { color: #FFE75C; background: #FFE75C; }

.diagonal::before, .corridor::before {
  content: "";
  position: absolute;
  width: 120vw;
  height: 30vh;
  left: -10vw;
  top: 34%;
  transform: rotate(-10deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  backdrop-filter: blur(12px);
}
.orbit-system { position: relative; width: min(580px, 88vw); height: 580px; }
.orbit-ring { position: absolute; inset: 50px; border: 1px solid rgba(80, 215, 255, .48); border-radius: 50%; animation: rotate 22s linear infinite; }
.ring-two { inset: 110px; border-color: rgba(255, 79, 163, .36); animation-duration: 16s; animation-direction: reverse; }
.center-capsule { position: absolute; top: 50%; left: 50%; min-width: 360px; transform: translate(-50%, -50%); }
.satellite { position: absolute; padding: 11px 15px; border-radius: 999px; background: rgba(255,255,255,.52); border: 1px solid var(--glass-edge); box-shadow: 0 18px 44px rgba(124,92,255,.18); }
.sat-a { top: 58px; left: 48%; color: #7C5CFF; animation: float 5s ease-in-out infinite; }
.sat-b { right: 12px; top: 48%; color: #FF4FA3; animation: float 6s ease-in-out infinite -2s; }
.sat-c { left: 18px; bottom: 28%; color: #50D7FF; animation: float 7s ease-in-out infinite -3s; }

.weather-field { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin-top: 48px; }
.weather-glyph { width: 240px; min-height: 230px; border-radius: 38px; padding: 30px; display: grid; align-content: center; text-align: center; transform: translateY(60px); opacity: 0; transition: transform 1s, opacity 1s; }
.chapter.in-view .weather-glyph { transform: translateY(0); opacity: 1; }
.weather-glyph:nth-child(2) { transition-delay: .15s; }
.weather-glyph:nth-child(3) { transition-delay: .3s; }
.weather-glyph span { font-family: Outfit, sans-serif; font-size: 68px; line-height: 1; }
.drizzle span { color: #50D7FF; }
.sunburst span { color: #FFE75C; text-shadow: 0 0 20px rgba(255,231,92,.8); }
.fog span { color: #7C5CFF; }

.handoff-ribbon { justify-self: center; display: flex; align-items: center; gap: 13px; transform: rotate(-6deg); margin-bottom: 70px; }
.ribbon-node { padding: 18px 22px; border-radius: 999px; background: rgba(255,255,255,.56); border: 1px solid var(--glass-edge); box-shadow: 0 18px 55px rgba(255,79,163,.18); }
.ribbon-line { width: clamp(48px, 9vw, 130px); height: 3px; border-radius: 999px; background: linear-gradient(90deg, #FFE75C, #FF4FA3, #50D7FF); transform: scaleX(0); transform-origin: left; transition: transform 1s; }
.chapter.in-view .ribbon-line { transform: scaleX(1); }

.archive-bento { justify-self: center; display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 18px; width: min(780px, 88vw); margin-bottom: 40px; }
.archive-card { min-height: 150px; border-radius: 32px; padding: 24px; display: grid; align-content: end; transform: translateY(40px); opacity: 0; transition: transform 1s, opacity 1s; }
.archive-card.wide { grid-column: span 3; min-height: 180px; background: linear-gradient(135deg, rgba(255,231,92,.44), rgba(255,255,255,.42)); }
.archive-card span { color: rgba(23,32,58,.58); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.chapter.in-view .archive-card { opacity: 1; transform: translateY(0); }

.tilt-card { will-change: transform; transition-property: transform, opacity; }

@keyframes scan { 0%, 100% { transform: translateY(0); opacity: .2; } 50% { transform: translateY(72vh); opacity: .8; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes rotate { to { transform: rotate(360deg); } }

@media (max-width: 820px) {
  .front-hud { inset: 12px; }
  .coordinate, .progress-rail { display: none; }
  .chapter { padding: 76px 0; }
  .ingredient-stack { margin-top: 26px; justify-self: center; }
  .orbit-system { height: 430px; }
  .center-capsule { min-width: 290px; }
  .handoff-ribbon { transform: rotate(0); flex-wrap: wrap; justify-content: center; }
  .ribbon-line { width: 46px; }
  .archive-bento { grid-template-columns: 1fr; }
  .archive-card.wide { grid-column: auto; }
}