:root {
  --design-font-note: "Interpret “hensai” Grotesk` marks";
  --deep-navy: #081A33;
  --glacier: #DDF1FF;
  --sunflare: #FF8A3D;
  --cyan: #21C7D9;
  --snow: #F7FBFF;
  --violet: #6E63FF;
  --shadow-blue: #315173;
  --altitude: 0;
  --flare-angle: -18deg;
  --glass-blur: 18px;
  --ridge-opacity: .34;
  --module-depth: 1;
  --sunrise: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 500vh;
  background: var(--deep-navy);
  color: var(--snow);
  font-family: "Instrument Sans", Inter, system-ui, sans-serif;
  overflow-x: hidden;
}

.quest {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at calc(14% + var(--sunrise) * 18%) calc(95% - var(--sunrise) * 35%), rgba(255, 138, 61, calc(.08 + var(--sunrise) * .62)), transparent 34%),
    radial-gradient(circle at 72% 18%, rgba(110, 99, 255, .24), transparent 30%),
    linear-gradient(180deg, #081A33 0%, #0A2342 44%, #315173 100%);
}

.sky-field, .mountain-world, .chamber { position: absolute; inset: 0; }

.sky-field { pointer-events: none; transform: translate3d(calc(var(--pointer-x, 0) * 10px), calc(var(--pointer-y, 0) * 8px), 0); }

.flare-core {
  position: absolute;
  width: clamp(260px, 42vw, 700px);
  height: clamp(260px, 42vw, 700px);
  left: calc(-12vw + var(--sunrise) * 26vw);
  bottom: calc(-25vw + var(--sunrise) * 22vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247,251,255,.92), rgba(255,138,61,.72) 22%, rgba(255,138,61,.24) 46%, transparent 70%);
  filter: blur(10px);
  opacity: calc(.12 + var(--sunrise) * .92);
}

.flare-streak {
  position: absolute;
  height: 2px;
  width: 72vw;
  left: 6vw;
  top: 58vh;
  background: linear-gradient(90deg, transparent, rgba(247,251,255,.8), rgba(255,138,61,.75), transparent);
  transform: rotate(var(--flare-angle));
  opacity: calc(.05 + var(--sunrise) * .6);
  box-shadow: 0 0 30px rgba(255,138,61,.7);
}

.flare-streak-two { top: 34vh; left: 22vw; width: 52vw; transform: rotate(calc(var(--flare-angle) + 31deg)); background: linear-gradient(90deg, transparent, rgba(33,199,217,.7), transparent); }

.aperture {
  position: absolute;
  border: 1px solid rgba(221,241,255,.32);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, rgba(247,251,255,.2), rgba(110,99,255,.08), transparent 66%);
  box-shadow: inset 0 0 24px rgba(221,241,255,.11), 0 0 18px rgba(33,199,217,.12);
  opacity: calc(.1 + var(--sunrise) * .58);
}
.aperture-one { width: 12vw; height: 12vw; left: 58vw; top: 14vh; }
.aperture-two { width: 7vw; height: 7vw; left: 72vw; top: 42vh; border-color: rgba(255,138,61,.38); }
.aperture-three { width: 18vw; height: 18vw; left: 18vw; top: 18vh; opacity: calc(.04 + var(--sunrise) * .24); }

.glint { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #F7FBFF; box-shadow: 0 0 18px #DDF1FF, 0 0 34px #21C7D9; opacity: .65; }
.glint-a { left: 29vw; top: 29vh; }
.glint-b { right: 19vw; top: 66vh; background: #FF8A3D; box-shadow: 0 0 22px #FF8A3D; }
.glint-c { left: 70vw; top: 22vh; background: #6E63FF; box-shadow: 0 0 22px #6E63FF; }

.mountain-world { pointer-events: none; filter: saturate(calc(.8 + var(--sunrise) * .5)); }
.ridge {
  position: absolute;
  inset-inline: -8vw;
  bottom: 0;
  opacity: var(--ridge-opacity);
  transform: translateY(calc(var(--altitude) * 1px));
  clip-path: polygon(0 70%, 8% 62%, 17% 66%, 28% 40%, 37% 57%, 49% 26%, 58% 55%, 66% 34%, 77% 62%, 88% 42%, 100% 68%, 100% 100%, 0 100%);
}
.ridge-back { height: 48vh; background: linear-gradient(180deg, rgba(221,241,255,.1), rgba(49,81,115,.55)); filter: blur(5px); bottom: 10vh; }
.ridge-mid { height: 43vh; background: linear-gradient(140deg, rgba(33,199,217,.18), rgba(8,26,51,.2) 40%, rgba(49,81,115,.78)); clip-path: polygon(0 82%, 12% 48%, 22% 72%, 34% 30%, 43% 63%, 56% 24%, 66% 65%, 76% 38%, 86% 70%, 100% 50%, 100% 100%, 0 100%); }
.ridge-front { height: 35vh; background: linear-gradient(145deg, rgba(221,241,255,.2), rgba(8,26,51,.92) 62%); clip-path: polygon(0 74%, 10% 58%, 20% 77%, 29% 46%, 39% 66%, 50% 35%, 61% 72%, 73% 44%, 83% 67%, 94% 52%, 100% 62%, 100% 100%, 0 100%); opacity: calc(.38 + var(--sunrise) * .28); }

.route-line { position: absolute; inset: 0; width: 100%; height: 100%; }
.route-line path { fill: none; stroke: #FF8A3D; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 980; stroke-dashoffset: calc(980 - var(--altitude) * 6.2); filter: drop-shadow(0 0 9px rgba(255,138,61,.85)); opacity: calc(.12 + var(--sunrise) * .78); }

.altitude-dial {
  position: absolute;
  z-index: 20;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 10px;
}
.altitude-dial button {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  min-width: 172px;
  padding: 10px 12px;
  border: 1px solid rgba(221,241,255,.24);
  border-radius: 20px;
  color: rgba(247,251,255,.72);
  background: rgba(221,241,255,.08);
  backdrop-filter: blur(14px);
  font-family: "Space Grotesk", monospace;
  cursor: pointer;
  transition: transform .35s ease, color .35s ease, border-color .35s ease, background .35s ease;
}
.altitude-dial span { color: #21C7D9; }
.altitude-dial b { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; text-align: left; }
.altitude-dial button.is-active { transform: translateX(-12px); color: #F7FBFF; border-color: rgba(255,138,61,.65); background: rgba(255,138,61,.14); }

.chamber {
  opacity: 0;
  transform: scale(.98);
  transition: opacity .75s ease, transform 1s ease;
  pointer-events: none;
}
.chamber.is-active { opacity: 1; transform: scale(1); pointer-events: auto; }

.glass-module {
  position: absolute;
  border: 1px solid rgba(221,241,255,.28);
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(247,251,255,.22), rgba(221,241,255,.07) 38%, rgba(33,199,217,.08)),
    rgba(8,26,51,.24);
  box-shadow: 0 28px 90px rgba(0,0,0,.3), inset 0 1px 0 rgba(247,251,255,.38), inset 0 -1px 0 rgba(49,81,115,.38);
  backdrop-filter: blur(var(--glass-blur));
  transform: translate3d(calc(var(--pointer-x, 0) * var(--depth, 1) * -12px), calc(var(--pointer-y, 0) * var(--depth, 1) * -10px), 0) rotate(var(--tilt, 0deg));
  transition: transform .7s ease, border-color .7s ease, filter .7s ease;
  overflow: hidden;
}
.glass-module::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0 35%, rgba(247,251,255,.2), transparent 56% 100%);
  transform: translateX(calc(-70% + var(--sunrise) * 150%));
  opacity: .7;
}
.glass-module::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 24px;
  border: 1px solid rgba(221,241,255,.12);
  background-image: linear-gradient(rgba(221,241,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(221,241,255,.05) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.glass-module > * { position: relative; z-index: 2; }

.eyebrow { margin: 0 0 18px; font-family: "Space Grotesk", monospace; color: #21C7D9; letter-spacing: .2em; font-weight: 700; font-size: 12px; }
h1, h2 { font-family: "Outfit", Inter, sans-serif; margin: 0; line-height: .9; letter-spacing: -.055em; }
h1 { font-size: clamp(64px, 13vw, 178px); filter: blur(calc((1 - var(--sunrise)) * 5px)); text-shadow: 0 0 45px rgba(221,241,255,.25); }
h2 { font-size: clamp(42px, 7vw, 96px); max-width: 900px; }
p { font-size: clamp(16px, 1.5vw, 21px); line-height: 1.55; color: rgba(247,251,255,.78); }

.hero-pane { left: 7vw; top: 17vh; width: 70vw; min-height: 44vh; padding: clamp(28px, 5vw, 72px); --tilt: -1deg; }
.lead { max-width: 760px; }
.compass-disc { right: 13vw; bottom: 16vh; width: 210px; height: 210px; border-radius: 50%; display: grid; place-items: center; text-align: center; font-family: "Space Grotesk"; --tilt: 7deg; }
.dial-ring { position: absolute; inset: 28px; border: 2px dashed rgba(33,199,217,.55); border-radius: 50%; animation: spin 18s linear infinite; }
.calibration-chip { left: 12vw; bottom: 12vh; width: 170px; padding: 22px; font-family: "Space Grotesk"; --tilt: 4deg; }
.calibration-chip span { color: #DDF1FF; text-transform: uppercase; letter-spacing: .18em; font-size: 11px; }
.calibration-chip b { display: block; font-size: 48px; color: #FF8A3D; }

.panorama-pane { left: 8vw; top: 13vh; width: 58vw; padding: 52px; --tilt: 1.5deg; }
.prism-ruler { right: 9vw; top: 22vh; width: 260px; height: 390px; padding: 30px; --tilt: -5deg; display: flex; gap: 14px; align-items: stretch; }
.prism-ruler i { display: block; flex: 1; border-radius: 999px; background: linear-gradient(180deg, #21C7D9, transparent); opacity: .7; }
.prism-ruler span { position: absolute; bottom: 28px; left: 28px; font-family: "Space Grotesk"; letter-spacing: .16em; font-size: 11px; }
.ice-core { right: 32vw; bottom: 13vh; width: 250px; height: 140px; padding: 26px; --tilt: 3deg; }
.ice-core b { display: block; height: 42px; border-radius: 99px; background: linear-gradient(90deg, #DDF1FF, #21C7D9, #6E63FF); opacity: .75; }
.ice-core span { display: block; margin-top: 18px; font-family: "Space Grotesk"; letter-spacing: .14em; }

.tall-gauge { left: 9vw; top: 14vh; width: 190px; height: 66vh; padding: 28px; --tilt: -2deg; }
.tall-gauge p, .tall-gauge strong { font-family: "Space Grotesk"; letter-spacing: .16em; }
.gauge-track { height: 70%; width: 16px; border-radius: 20px; background: rgba(221,241,255,.14); margin: 24px auto; overflow: hidden; }
.gauge-track span { display: block; height: calc(var(--sunrise) * 100%); margin-top: auto; background: linear-gradient(0deg, #FF8A3D, #21C7D9); border-radius: 20px; }
.ridge-log { left: 29vw; top: 25vh; width: 52vw; padding: 54px; --tilt: 2.2deg; }
.flag-node { right: 12vw; bottom: 14vh; width: 210px; height: 180px; padding: 28px; --tilt: -8deg; }
.flag-node span { display: block; width: 3px; height: 90px; background: #DDF1FF; }
.flag-node b { position: absolute; top: 28px; left: 38px; color: #FF8A3D; font-size: 58px; }
.flag-node em { font-family: "Space Grotesk"; font-style: normal; letter-spacing: .14em; font-size: 11px; }

.lens-orb { left: 10vw; top: 18vh; width: 330px; height: 330px; border-radius: 50%; display: grid; place-items: center; text-align: center; --tilt: 9deg; }
.orb { position: absolute; width: 70%; height: 70%; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #F7FBFF, rgba(255,138,61,.52) 20%, rgba(110,99,255,.24) 45%, transparent 70%); box-shadow: inset -18px -28px 60px rgba(8,26,51,.28), 0 0 60px rgba(255,138,61,.4); animation: pulse 4s ease-in-out infinite; }
.lens-orb span { align-self: end; margin-bottom: 42px; font-family: "Space Grotesk"; letter-spacing: .18em; }
.summit-copy { right: 8vw; top: 20vh; width: 58vw; padding: 56px; --tilt: -1.5deg; }
.contour-map { left: 30vw; bottom: 10vh; width: 360px; height: 180px; padding: 25px; --tilt: 4deg; }
.contour-map span { position: absolute; border: 1px solid rgba(33,199,217,.55); border-radius: 50%; inset: 24px; }
.contour-map span:nth-child(2) { inset: 48px 82px 36px 62px; border-color: rgba(255,138,61,.5); }
.contour-map span:nth-child(3) { inset: 70px 135px 58px 112px; border-color: rgba(110,99,255,.6); }
.contour-map b { position: absolute; bottom: 22px; left: 26px; font-family: "Space Grotesk"; letter-spacing: .16em; font-size: 11px; }

.dawn-signal { left: 9vw; top: 16vh; width: 64vw; padding: 62px; background: linear-gradient(135deg, rgba(255,138,61,.2), rgba(221,241,255,.16) 42%, rgba(33,199,217,.08)); --tilt: .5deg; }
.quest-link { display: inline-block; margin-top: 18px; color: #081A33; background: linear-gradient(90deg, #FF8A3D, #F7FBFF); padding: 14px 20px; border-radius: 999px; text-decoration: none; font-family: "Space Grotesk"; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.signal-array { right: 10vw; bottom: 14vh; width: 280px; height: 280px; border-radius: 50%; display: grid; place-items: center; --tilt: -6deg; }
.signal-array span { position: absolute; border: 1px solid rgba(255,138,61,.5); border-radius: 50%; animation: pulse 3.5s ease-in-out infinite; }
.signal-array span:nth-child(1) { inset: 35px; }
.signal-array span:nth-child(2) { inset: 62px; animation-delay: .3s; }
.signal-array span:nth-child(3) { inset: 90px; animation-delay: .6s; }
.signal-array span:nth-child(4) { inset: 118px; background: #FF8A3D; box-shadow: 0 0 42px #FF8A3D; }
.signal-array b { font-family: "Space Grotesk"; letter-spacing: .15em; font-size: 12px; }

.scroll-track { position: absolute; z-index: 21; left: 26px; top: 24px; bottom: 24px; width: 4px; border-radius: 20px; background: rgba(221,241,255,.12); overflow: hidden; }
.scroll-progress { width: 100%; height: 0%; background: linear-gradient(180deg, #21C7D9, #FF8A3D); border-radius: inherit; box-shadow: 0 0 20px rgba(255,138,61,.8); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { transform: scale(.96); opacity: .68; } 50% { transform: scale(1.04); opacity: 1; } }

@media (max-width: 820px) {
  .altitude-dial { right: 10px; top: auto; bottom: 12px; transform: none; grid-auto-flow: column; grid-template-columns: repeat(5, 1fr); width: calc(100% - 20px); }
  .altitude-dial button { min-width: 0; grid-template-columns: 1fr; padding: 8px; }
  .altitude-dial b { display: none; }
  .glass-module { border-radius: 24px; }
  .hero-pane, .panorama-pane, .ridge-log, .summit-copy, .dawn-signal { left: 7vw; right: auto; top: 12vh; width: 82vw; padding: 28px; }
  .compass-disc, .calibration-chip, .prism-ruler, .ice-core, .tall-gauge, .flag-node, .lens-orb, .contour-map, .signal-array { transform: scale(.72) rotate(var(--tilt, 0deg)); transform-origin: center; }
  .tall-gauge, .lens-orb { left: 8vw; top: auto; bottom: 10vh; height: 240px; }
  .scroll-track { display: none; }
}