:root {
  --night-atlas: #12263A;
  --civic-teal: #2EC4B6;
  --passport-paper: #F7F3E8;
  --market-yellow: #FDE74C;
  --coral-border: #FF6B6B;
  --dusk-violet: #6B5B95;
  --ink-brown: #3B2F2F;
  --display: "Bricolage Grotesque", sans-serif;
  --sans: "Noto Sans", sans-serif;
  --serif: "Noto Serif", serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--night-atlas);
  color: var(--passport-paper);
  font-family: var(--sans);
  overflow-x: hidden;
}

button { font: inherit; color: inherit; }

.atlas { position: relative; }

.atlas-scene {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: clamp(28px, 5vw, 70px);
  isolation: isolate;
  background: var(--night-atlas);
}

.atlas-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -4;
  background-image: radial-gradient(circle at 18% 14%, rgba(46, 196, 182, .16), transparent 30%), linear-gradient(125deg, rgba(247, 243, 232, .04) 0 1px, transparent 1px 80px);
}

.planetary-curve {
  position: absolute;
  width: 84vmax;
  height: 84vmax;
  border: 1px solid rgba(46, 196, 182, .34);
  border-radius: 50%;
  right: -28vmax;
  top: -18vmax;
  z-index: -3;
  animation: globeRotate 38s linear infinite;
}

.planetary-curve::before,
.planetary-curve::after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 1px dashed rgba(247, 243, 232, .18);
}

.planetary-curve::after { inset: 25% 4%; transform: rotate(52deg); }
.planetary-curve.violet { border-color: rgba(255, 107, 107, .45); }
.planetary-curve.paper { border-color: rgba(253, 231, 76, .55); left: -34vmax; right: auto; }
.planetary-curve.dusk { border-color: rgba(107, 91, 149, .78); }
.planetary-curve.final { inset: auto -20vmax -35vmax auto; border-color: rgba(46, 196, 182, .5); }

.route-thread {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: visible;
}

.route-thread path {
  fill: none;
  stroke: var(--civic-teal);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  filter: drop-shadow(0 0 16px rgba(46, 196, 182, .42));
}

.route-thread circle { fill: var(--passport-paper); stroke: var(--coral-border); stroke-width: 5; }
.atlas-scene.in-view .route-thread path { animation: drawRoute 2.2s ease forwards; }
.arrival-scene .route-thread path { stroke: var(--coral-border); }
.grammar-scene .route-thread path { stroke: var(--market-yellow); }
.street-scene .route-thread path { stroke: var(--dusk-violet); }

.timezone-band {
  position: absolute;
  width: 120vw;
  height: 22vh;
  left: -8vw;
  transform: rotate(-12deg);
  background: repeating-linear-gradient(90deg, rgba(247, 243, 232, .09) 0 28px, transparent 28px 54px);
  mask-image: linear-gradient(90deg, transparent, black 20%, black 80%, transparent);
}

.band-one { top: 18vh; }
.band-two { bottom: 10vh; transform: rotate(9deg); opacity: .55; }

.scene-marginalia,
.passport-caption,
.paper-map small {
  font-family: var(--serif);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--market-yellow);
}

.scene-marginalia {
  position: absolute;
  right: 28px;
  top: 34px;
  writing-mode: vertical-rl;
  font-size: 12px;
}

.hero-copy { margin-top: 18vh; width: min(880px, 82vw); position: relative; }

h1,
h2 {
  font-family: var(--display);
  line-height: .86;
  letter-spacing: -.06em;
  margin: 0;
}

h1 { font-size: clamp(84px, 18vw, 260px); transform: translateX(-.08em); }
h1 em { font-style: normal; color: var(--civic-teal); }
h2 { font-size: clamp(54px, 8.5vw, 140px); max-width: 980px; }

.opening-line,
.paper-map p,
.grammar-copy p,
.street-copy p,
.final-copy p {
  font-size: clamp(18px, 2.1vw, 29px);
  line-height: 1.35;
  max-width: 650px;
}

.translation-slip {
  position: absolute;
  display: inline-block;
  padding: 9px 18px;
  background: var(--passport-paper);
  color: var(--ink-brown);
  border: 2px solid var(--ink-brown);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, .16);
  transform: rotate(var(--r));
  animation: drift 6s ease-in-out infinite alternate;
}

.slip-a { --r: -7deg; top: 13vh; left: 8vw; }
.slip-b { --r: 5deg; top: 19vh; right: 16vw; animation-delay: -1s; }
.slip-c { --r: 9deg; bottom: 17vh; left: 48vw; animation-delay: -2s; }
.slip-d { --r: -4deg; bottom: 28vh; right: 7vw; animation-delay: -3s; }

.passport-stamp {
  width: 168px;
  height: 168px;
  border-radius: 50%;
  border: 4px double var(--coral-border);
  background: rgba(247, 243, 232, .92);
  color: var(--ink-brown);
  display: grid;
  place-items: center;
  position: absolute;
  box-shadow: 0 18px 0 rgba(59, 47, 47, .18);
  cursor: pointer;
  transform: rotate(-10deg);
  transition: transform .4s ease, filter .4s ease;
}

.passport-stamp::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 2px dotted var(--coral-border);
}

.passport-stamp strong { font-family: var(--display); font-size: 82px; color: var(--coral-border); }
.stamp-ring { position: absolute; inset: 22px; border-radius: 50%; display: grid; place-items: start center; font-family: var(--serif); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.passport-stamp:hover, .passport-stamp.stamped { transform: rotate(4deg) scale(1.08); filter: saturate(1.3); }
.begin-stamp { right: 14vw; bottom: 13vh; }

.local-glyph {
  position: absolute;
  font-family: var(--display);
  font-size: 70px;
  width: 105px;
  height: 105px;
  border-radius: 28px;
  display: grid;
  place-items: center;
}

.glyph-embossed { right: 7vw; top: 24vh; color: var(--civic-teal); border: 2px solid var(--civic-teal); }
.glyph-tile { left: 8vw; bottom: 15vh; color: var(--night-atlas); background: conic-gradient(from 45deg, var(--passport-paper), var(--civic-teal), var(--passport-paper), var(--market-yellow)); border: 8px solid var(--passport-paper); }
.glyph-neon { right: 8vw; top: 18vh; color: var(--market-yellow); text-shadow: 0 0 18px var(--market-yellow); border: 3px solid var(--market-yellow); }
.glyph-woven { right: 12vw; bottom: 12vh; color: var(--passport-paper); background: repeating-linear-gradient(45deg, var(--dusk-violet) 0 10px, var(--ink-brown) 10px 20px); }

.arrival-scene { background: linear-gradient(145deg, var(--night-atlas), var(--dusk-violet)); }
.arrival-gate {
  position: absolute;
  top: 12vh;
  left: 7vw;
  width: min(560px, 70vw);
  padding: 24px 32px;
  border: 5px solid var(--coral-border);
  background: var(--passport-paper);
  color: var(--ink-brown);
  clip-path: polygon(0 0, 94% 0, 100% 18%, 100% 100%, 0 100%);
}

.arrival-gate span { font-family: var(--display); font-size: clamp(44px, 7vw, 112px); letter-spacing: -.05em; display: block; }
.arrival-gate b { color: var(--coral-border); }

.paper-map {
  background: var(--passport-paper);
  color: var(--ink-brown);
  border: 2px solid rgba(59, 47, 47, .5);
  box-shadow: 14px 14px 0 rgba(0, 0, 0, .2);
}

.ticket-stub { position: absolute; right: 9vw; top: 12vh; width: 260px; padding: 28px; transform: rotate(7deg); mask: radial-gradient(12px at 0 24px, transparent 98%, black) 0 0/100% 48px; }
.passport-page { position: absolute; left: 18vw; bottom: 9vh; width: min(720px, 76vw); padding: clamp(28px, 5vw, 54px); }

.locale-portal { position: absolute; right: 10vw; bottom: 12vh; width: 260px; height: 260px; transform-style: preserve-3d; animation: placardSpin 14s linear infinite; }
.placard { position: absolute; inset: 70px 22px; display: grid; place-items: center; font-family: var(--display); font-size: 42px; border: 3px solid var(--ink-brown); color: var(--ink-brown); }
.placard:nth-child(1) { transform: rotateY(0deg) translateZ(120px); }
.placard:nth-child(2) { transform: rotateY(120deg) translateZ(120px); }
.placard:nth-child(3) { transform: rotateY(240deg) translateZ(120px); }
.coral { background: var(--coral-border); }
.teal { background: var(--civic-teal); }
.yellow { background: var(--market-yellow); }

.grammar-scene { background: var(--passport-paper); color: var(--ink-brown); }
.tile-field { position: absolute; inset: 5vh 8vw auto auto; width: 44vw; height: 54vh; display: grid; grid-template-columns: repeat(3, 1fr); transform: rotate(-8deg); opacity: .9; }
.tile-field span { border: 3px solid var(--civic-teal); background: radial-gradient(circle, transparent 30%, rgba(46, 196, 182, .28) 31% 38%, transparent 39%), linear-gradient(45deg, rgba(107, 91, 149, .22), transparent); }
.grammar-copy { position: relative; top: 22vh; z-index: 2; }
.grammar-copy .passport-caption { color: var(--coral-border); }
.translation-window { position: absolute; right: 12vw; bottom: 14vh; height: 68px; width: 260px; overflow: hidden; border: 3px solid var(--ink-brown); background: var(--market-yellow); color: var(--ink-brown); font-family: var(--display); font-size: 42px; }
.translation-window span { display: block; height: 68px; padding: 7px 20px; transition: transform .6s ease; }
.grammar-stamp { left: 12vw; bottom: 12vh; border-color: var(--market-yellow); }
.grammar-stamp strong { color: var(--market-yellow); }

.street-scene { background: linear-gradient(180deg, var(--night-atlas), var(--ink-brown)); }
.awning { position: absolute; top: 0; left: 0; right: 0; height: 118px; background: repeating-linear-gradient(90deg, var(--coral-border) 0 82px, var(--passport-paper) 82px 164px, var(--market-yellow) 164px 246px); filter: drop-shadow(0 18px 0 rgba(0,0,0,.18)); }
.receipt-strip { position: absolute; left: 8vw; top: 20vh; width: 190px; padding: 24px 18px; background: var(--passport-paper); color: var(--ink-brown); display: grid; gap: 18px; transform: rotate(4deg); font-family: var(--serif); mask: linear-gradient(135deg, transparent 10px, black 0) top left, linear-gradient(-135deg, transparent 10px, black 0) top right, linear-gradient(45deg, transparent 10px, black 0) bottom left, linear-gradient(-45deg, transparent 10px, black 0) bottom right; mask-size: 51% 51%; mask-repeat: no-repeat; }
.street-copy { position: relative; margin-left: min(28vw, 360px); top: 30vh; }
.doorway-row { position: absolute; right: 10vw; bottom: 15vh; display: flex; gap: 20px; }
.doorway-pin { width: 98px; height: 132px; border: 4px solid var(--market-yellow); border-radius: 48px 48px 8px 8px; background: var(--dusk-violet); font-family: var(--display); font-size: 46px; cursor: pointer; position: relative; transition: transform .35s ease, background .35s ease; }
.doorway-pin::after { content: attr(data-label); position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); font-size: 13px; background: var(--passport-paper); color: var(--ink-brown); padding: 4px 8px; white-space: nowrap; }
.doorway-pin:hover, .doorway-pin.open { transform: translateY(-18px); background: var(--coral-border); }

.doorways-scene { background: radial-gradient(circle at 50% 60%, rgba(46,196,182,.25), transparent 30%), var(--night-atlas); display: grid; place-items: center; }
.world-seal { position: relative; width: min(52vw, 520px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; }
.seal-layer { position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: screen; animation: sealTurn 18s linear infinite; }
.seal-layer.tile { background: repeating-conic-gradient(from 0deg, var(--civic-teal) 0 12deg, transparent 12deg 24deg); }
.seal-layer.stamp { inset: 10%; border: 18px double var(--coral-border); animation-direction: reverse; }
.seal-layer.receipt { inset: 18%; background: repeating-linear-gradient(0deg, transparent 0 14px, rgba(253,231,76,.8) 14px 17px); }
.seal-core { width: 42%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--passport-paper); color: var(--ink-brown); font-family: var(--display); font-size: clamp(90px, 14vw, 160px); z-index: 2; box-shadow: 0 0 0 12px var(--market-yellow), 0 0 0 24px var(--civic-teal); }
.final-copy { position: absolute; left: 7vw; top: 10vh; max-width: 680px; }
.fragment-orbit span { position: absolute; font-family: var(--serif); color: var(--market-yellow); }
.fragment-orbit span:nth-child(1) { left: 10vw; bottom: 16vh; }
.fragment-orbit span:nth-child(2) { right: 15vw; top: 18vh; }
.fragment-orbit span:nth-child(3) { right: 9vw; bottom: 20vh; }
.fragment-orbit span:nth-child(4) { left: 38vw; bottom: 8vh; }
.fragment-orbit span:nth-child(5) { right: 34vw; top: 12vh; }

.atlas-progress { position: fixed; left: 22px; top: 50%; transform: translateY(-50%); z-index: 20; display: grid; gap: 9px; }
.atlas-progress span { width: 12px; height: 12px; overflow: hidden; color: transparent; border-radius: 50%; border: 1px solid var(--passport-paper); background: transparent; transition: background .3s ease, transform .3s ease; cursor: pointer; }
.atlas-progress span.current { background: var(--civic-teal); transform: scale(1.45); }
.page-turner { position: fixed; inset: 0; z-index: 40; pointer-events: none; background: var(--passport-paper); transform: translateX(-110%) skewX(-12deg); transition: transform .7s cubic-bezier(.77,0,.18,1); }
.page-turner.turning { transform: translateX(110%) skewX(-12deg); }

@keyframes globeRotate { to { transform: rotate(360deg); } }
@keyframes drawRoute { to { stroke-dashoffset: 0; } }
@keyframes drift { to { translate: 0 -22px; } }
@keyframes placardSpin { to { transform: rotateY(360deg) rotateZ(3deg); } }
@keyframes sealTurn { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .atlas-scene { padding: 24px; }
  .hero-copy { margin-top: 22vh; }
  .translation-slip, .ticket-stub, .locale-portal, .scene-marginalia { display: none; }
  .begin-stamp, .grammar-stamp { right: 28px; left: auto; bottom: 8vh; width: 132px; height: 132px; }
  .passport-stamp strong { font-size: 60px; }
  .passport-page, .arrival-gate, .grammar-copy, .street-copy, .final-copy { position: relative; inset: auto; margin: 18vh 0 0 0; width: auto; }
  .tile-field { width: 82vw; opacity: .35; }
  .receipt-strip { opacity: .28; }
  .doorway-row { right: 24px; bottom: 10vh; transform: scale(.72); transform-origin: right bottom; }
  .world-seal { width: 78vw; }
  .atlas-progress { display: none; }
}