:root {
  --bg-main: #fbfaf6;
  --text-main: #18223a;
  --text-muted: #6f7482;
  --accent-indigo: #696ffb;
  --accent-coral: #ff8d7c;
  --accent-blue: #78b7ff;
  --accent-mint: #7fd8bc;
  --accent-violet: #a994f5;
  --journey-bg: #fbfaf6;
  --stage-info-opacity: 1;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text-main);
  background: var(--bg-main);
  font-family: "Nunito Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: clip;
}
button, a { font: inherit; }
img { display: block; }

.noscript {
  position: fixed; z-index: 999; inset: 1rem 1rem auto;
  padding: .9rem 1rem; border-radius: .9rem; color: #fff; background: var(--text-main); text-align: center;
}

/* LANDING */
.landing {
  position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; padding: 2rem;
  background:
    radial-gradient(circle at 84% 18%, rgba(169,148,245,.13), transparent 20rem),
    radial-gradient(circle at 12% 82%, rgba(127,216,188,.12), transparent 22rem),
    var(--bg-main);
}
.landing__wordmark {
  position: absolute; top: 1.75rem; left: clamp(1.25rem,4vw,4rem); z-index: 2;
  font-size: .95rem; font-weight: 800;
}
.landing__content { position: relative; z-index: 2; width: min(900px,100%); text-align: center; }
.eyebrow, .completion__eyebrow, .next-journey__eyebrow {
  margin: 0 0 1rem; color: var(--accent-indigo); font-size: .76rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
}
.landing h1 {
  margin: 0; font-size: clamp(4rem,9vw,8.4rem); font-weight: 900; line-height: .9; letter-spacing: -.075em;
}
.landing__subtitle {
  width: min(680px,100%); margin: 1.7rem auto 0; color: var(--text-muted); font-size: clamp(1rem,1.6vw,1.28rem); line-height: 1.6;
}
.scroll-hint {
  display: inline-flex; flex-direction: column; align-items: center; gap: .45rem; margin-top: 3.2rem;
  color: var(--text-muted); font-size: .83rem; font-weight: 700;
}
.scroll-hint__mouse {
  width: 22px; height: 34px; display: grid; place-items: start center; padding-top: 6px;
  border: 1.5px solid rgba(24,34,58,.42); border-radius: 999px;
}
.scroll-hint__mouse span { width: 3px; height: 7px; border-radius: 999px; background: var(--accent-indigo); animation: wheel 1.7s ease-in-out infinite; }
.scroll-hint__arrow { font-size: 1.1rem; animation: arrowDown 1.7s ease-in-out infinite; }
@keyframes wheel { 0%,100% { transform: translateY(0); opacity:.25; } 45% { transform: translateY(10px); opacity:1; } }
@keyframes arrowDown { 0%,100% { transform:translateY(0); opacity:.4; } 50% { transform:translateY(5px); opacity:1; } }
.landing__decor { position:absolute; border-radius:999px; opacity:.5; pointer-events:none; }
.landing__decor--one { width:28rem; height:8rem; left:-8rem; bottom:5rem; background:rgba(127,216,188,.17); transform:rotate(-12deg); }
.landing__decor--two { width:24rem; height:7rem; right:-7rem; top:8rem; background:rgba(169,148,245,.16); transform:rotate(15deg); }
.landing__spark { position:absolute; opacity:.5; color:var(--accent-violet); pointer-events:none; }
.landing__spark--one { top:20%; right:27%; }
.landing__spark--two { left:28%; bottom:20%; color:var(--accent-mint); }

/* JOURNEY */
.journey { position: relative; background: var(--journey-bg); }
.journey__sticky {
  position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate;
  background: var(--journey-bg); transition: background-color 600ms ease;
}
.journey__background {
  position:absolute; inset:0; z-index:-4; pointer-events:none;
  background:
    radial-gradient(circle at 22% 25%, rgba(169,148,245,.06), transparent 26rem),
    radial-gradient(circle at 82% 70%, rgba(120,183,255,.055), transparent 24rem);
}
.journey__category, .journey__counter {
  position:absolute; top:clamp(1.25rem,3vw,2.2rem); z-index:8; color:var(--text-muted);
  font-size:.72rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase;
}
.journey__category { left:clamp(1.25rem,4vw,4rem); }
.journey__counter { right:clamp(1.25rem,4vw,4rem); letter-spacing:.06em; }
.journey__world { position:absolute; inset:0; overflow:hidden; }
.scale-ribbon { position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; }
.scale-ribbon path { fill:none; stroke:rgba(105,111,251,.22); stroke-width:1.6; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.object-slot {
  position:absolute; z-index:2; left:50%; top:42%; width:1px; height:1px; opacity:0;
  will-change:left,top,opacity; pointer-events:none;
}
.object-slot img {
  position:absolute; left:0; top:0; width:var(--object-base-size,300px); height:auto; max-width:none;
  transform:translate(-50%,-50%) scale(var(--object-scale,1)); transform-origin:50% 50%;
  will-change:transform,opacity; user-select:none; -webkit-user-drag:none;
}
.object-slot.measure-height img { width:auto; height:var(--object-base-size,300px); }
.object-slot.is-locator img { display:none; }
.object-slot.is-locator::after {
  content:""; position:absolute; left:0; top:0; width:4px; height:4px; border-radius:50%;
  background:rgba(24,34,58,.22); transform:translate(-50%,-50%);
}
.stage-info {
  position:absolute; z-index:7; left:50%; bottom:clamp(6.2rem,12vh,8rem); width:min(560px,calc(100% - 2rem));
  transform:translateX(-50%); text-align:center; opacity:var(--stage-info-opacity); pointer-events:none;
}
.stage-info__name { margin:0; font-size:clamp(2.3rem,4.4vw,4.2rem); font-weight:900; line-height:1; letter-spacing:-.055em; }
.stage-info__scale { margin:.7rem 0 0; color:var(--accent-indigo); font-size:clamp(1rem,1.4vw,1.25rem); font-weight:800; }
.stage-info__qualifier { min-height:1.1em; margin:.35rem 0 0; color:var(--text-muted); font-size:.78rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.stage-info__description { margin:.65rem auto 0; color:var(--text-muted); font-size:clamp(.94rem,1.15vw,1.06rem); line-height:1.5; }
.science-note {
  position:absolute; z-index:8; top:clamp(3.4rem,8vh,5.4rem); left:50%; width:min(580px,calc(100% - 2rem)); margin:0;
  transform:translateX(-50%); color:var(--text-muted); font-size:.73rem; font-weight:700; text-align:center;
  opacity:0; transition:opacity 220ms ease; pointer-events:none;
}
.science-note.is-visible { opacity:.75; }
.progress-dots {
  position:absolute; z-index:8; left:50%; bottom:1.6rem; display:flex; align-items:center; gap:clamp(3px,.32vw,6px); transform:translateX(-50%);
}
.progress-dot { width:3px; height:3px; border:0; border-radius:50%; background:rgba(24,34,58,.14); }
.progress-dot.is-past { background:rgba(24,34,58,.32); }
.progress-dot.is-current { width:6px; height:6px; background:var(--accent-indigo); }

/* COMPLETION */
.completion {
  position:relative; min-height:120svh; display:grid; place-items:center; padding:8rem 1.5rem;
  background:radial-gradient(circle at 75% 20%, rgba(169,148,245,.11), transparent 24rem), var(--bg-main);
}
.completion__inner { width:min(1000px,100%); text-align:center; }
.completion h2 { margin:0; font-size:clamp(3.2rem,7vw,6.8rem); line-height:.95; letter-spacing:-.065em; }
.completion__lead { margin:1.1rem 0 3rem; color:var(--text-muted); font-size:1.08rem; }
.next-journey {
  display:grid; grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr); align-items:center; width:min(850px,100%); margin:0 auto;
  overflow:hidden; border:1px solid rgba(24,34,58,.09); border-radius:2rem; background:rgba(255,255,255,.58);
  box-shadow:0 20px 60px rgba(42,45,82,.08); text-align:left; opacity:.72;
  transition:opacity 450ms ease, transform 450ms ease, border-color 450ms ease;
}
.next-journey.is-unlocked { opacity:1; transform:translateY(-4px); border-color:rgba(105,111,251,.24); }
.next-journey__human { align-self:end; min-height:350px; display:grid; place-items:end center; overflow:hidden; background:radial-gradient(circle at 50% 65%, rgba(127,216,188,.17), transparent 10rem); }
.next-journey__human img { height:320px; width:auto; max-width:95%; object-fit:contain; }
.next-journey__content { padding:clamp(2rem,5vw,4rem); }
.next-journey__lock { position:relative; width:29px; height:34px; margin-bottom:1.25rem; }
.lock-shackle { position:absolute; top:0; left:6px; width:17px; height:17px; border:2px solid var(--text-muted); border-bottom:0; border-radius:999px 999px 0 0; transform-origin:4px 16px; transition:transform 450ms cubic-bezier(.22,1,.36,1), border-color 450ms ease; }
.lock-body { position:absolute; left:3px; bottom:0; width:23px; height:20px; border-radius:6px; background:var(--text-muted); transition:background 450ms ease; }
.next-journey.is-unlocked .lock-shackle { border-color:var(--accent-indigo); transform:translate(5px,-2px) rotate(28deg); }
.next-journey.is-unlocked .lock-body { background:var(--accent-indigo); }
.next-journey h3 { margin:0; font-size:clamp(2rem,4vw,3.5rem); letter-spacing:-.05em; }
.next-journey p:not(.next-journey__eyebrow) { margin:1rem 0 0; color:var(--text-muted); line-height:1.65; }
.next-journey__button, .replay-button { border:0; border-radius:999px; font-weight:800; }
.next-journey__button { margin-top:1.6rem; padding:.9rem 1.2rem; color:var(--text-muted); background:#ecebe7; }
.next-journey.is-unlocked .next-journey__button { color:var(--accent-indigo); background:rgba(105,111,251,.1); }
.replay-button { margin-top:2.3rem; padding:.9rem 1.2rem; color:var(--text-main); background:transparent; cursor:pointer; }
.replay-button:hover { background:rgba(24,34,58,.05); }

@media (max-width:767px) {
  .landing { padding:1.5rem; }
  .landing__wordmark { top:1.2rem; left:1.2rem; }
  .landing h1 { font-size:clamp(3.4rem,19vw,5.8rem); }
  .landing__subtitle { max-width:22rem; }
  .journey__category { max-width:55%; line-height:1.35; }
  .journey__counter { top:1.2rem; right:1.2rem; }
  .stage-info { bottom:5.5rem; }
  .stage-info__name { font-size:clamp(2.2rem,11vw,3.4rem); }
  .progress-dots { max-width:calc(100% - 2rem); gap:3px; }
  .progress-dot { width:2px; height:2px; }
  .progress-dot.is-current { width:5px; height:5px; }
  .next-journey { grid-template-columns:1fr; }
  .next-journey__human { min-height:250px; }
  .next-journey__human img { height:240px; }
  .next-journey__content { text-align:center; }
  .next-journey__lock { margin-inline:auto; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}