:root {
  --deep-ink: #07111F;
  --laminate-blue: #A9D8FF;
  --form-paper: #EEF3E7;
  --identity-coral: #FF6B5E;
  --hologram-violet: #8B7CFF;
  --oxidized-brass: #A27B3D;
  --carbon-smudge: #1D2633;
  --fraunces: 'Fraunces', serif;
  --instrument: 'Instrument Sans', sans-serif;
  --mono: 'B612 Mono', monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--deep-ink);
  color: var(--form-paper);
  font-family: var(--instrument);
  overflow-x: hidden;
}

button { font: inherit; color: inherit; cursor: pointer; }

.grain {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .18;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(238, 243, 231, .18) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 60%, rgba(169, 216, 255, .16) 0 1px, transparent 1.6px);
  background-size: 17px 19px, 23px 29px;
  mix-blend-mode: screen;
}

.mono, .eyebrow { font-family: var(--mono); }

.journey { position: relative; }

.station {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(28px, 5vw, 72px);
}

.station::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(120deg, rgba(169, 216, 255, .08), transparent 36%),
    radial-gradient(circle at 72% 18%, rgba(139, 124, 255, .18), transparent 28%),
    var(--deep-ink);
}

.station-copy {
  position: absolute;
  z-index: 8;
  max-width: 520px;
}

.eyebrow {
  color: var(--laminate-blue);
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

h1, h2 {
  font-family: var(--fraunces);
  font-weight: 800;
  line-height: .88;
  margin: 0;
  letter-spacing: -.055em;
}

h1 { font-size: clamp(62px, 11vw, 170px); }
h2 { font-size: clamp(54px, 9vw, 138px); }

.station-copy p:not(.eyebrow) {
  font-size: clamp(16px, 1.55vw, 22px);
  line-height: 1.42;
  color: rgba(238, 243, 231, .78);
}

.explore-button, .prop-button, .name-tabs button, .hotspots button {
  border: 1px solid rgba(169, 216, 255, .45);
  background: rgba(238, 243, 231, .08);
  border-radius: 999px;
  padding: 13px 18px;
  color: var(--form-paper);
  box-shadow: inset 0 0 18px rgba(169, 216, 255, .13), 0 12px 40px rgba(0, 0, 0, .2);
  transition: transform .35s ease, background .35s ease, border-color .35s ease;
}

.explore-button:hover, .prop-button:hover, .name-tabs button:hover, .hotspots button:hover {
  transform: translateY(-3px) rotate(-1deg);
  background: rgba(255, 107, 94, .18);
  border-color: var(--identity-coral);
}

.progress-rail {
  position: fixed;
  left: 24px;
  top: 50%;
  transform: translateY(-50%) rotate(-5deg);
  z-index: 80;
  display: grid;
  gap: 16px;
}

.rail-dot {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(169, 216, 255, .5);
  background: var(--carbon-smudge);
  color: transparent;
  box-shadow: inset 0 0 0 8px var(--deep-ink);
  text-decoration: none;
}

.rail-dot::before {
  content: attr(data-station);
  position: absolute;
  inset: 7px auto auto 44px;
  color: rgba(238, 243, 231, .72);
  font-family: var(--mono);
  font-size: 11px;
}

.rail-dot span {
  position: absolute;
  left: 76px;
  top: 6px;
  color: var(--laminate-blue);
  font-family: var(--mono);
  font-size: 10px;
  opacity: 0;
  transition: opacity .3s ease;
}

.rail-dot.active {
  background: var(--identity-coral);
  border-color: var(--form-paper);
}

.rail-dot.active span { opacity: 1; }

.conveyor-line {
  position: fixed;
  left: -20vw;
  top: 61vh;
  width: 145vw;
  height: 92px;
  z-index: 1;
  transform: rotate(-16deg);
  background: repeating-linear-gradient(90deg, rgba(169, 216, 255, .12) 0 34px, rgba(29, 38, 51, .7) 34px 68px);
  border-top: 1px solid rgba(169, 216, 255, .22);
  border-bottom: 1px solid rgba(169, 216, 255, .22);
  pointer-events: none;
}

.badge-protagonist {
  position: fixed;
  z-index: 50;
  width: clamp(230px, 28vw, 420px);
  aspect-ratio: .68;
  left: calc(var(--badge-x, 58) * 1vw);
  top: calc(var(--badge-y, 43) * 1vh);
  transform: translate(-50%, -50%) rotate(calc(var(--badge-rot, -7) * 1deg)) scale(var(--badge-scale, 1));
  transition: transform .75s cubic-bezier(.2, .9, .18, 1), left .75s cubic-bezier(.2, .9, .18, 1), top .75s cubic-bezier(.2, .9, .18, 1);
  filter: drop-shadow(0 34px 44px rgba(0, 0, 0, .42));
}

.badge-sleeve {
  position: absolute;
  inset: -15px -17px;
  border-radius: 36px;
  border: 1px solid rgba(169, 216, 255, .4);
  background: linear-gradient(135deg, rgba(169, 216, 255, .16), rgba(238, 243, 231, .03) 42%, rgba(139, 124, 255, .14));
  opacity: var(--sleeve-opacity, .12);
  transform: translateY(var(--sleeve-y, 16px));
  transition: opacity .7s ease, transform .7s ease;
  backdrop-filter: blur(2px);
}

.lanyard-hook {
  position: absolute;
  left: 50%;
  top: -82px;
  width: 18px;
  height: 98px;
  transform: translateX(-50%);
  border-radius: 20px;
  background: linear-gradient(90deg, var(--identity-coral), var(--hologram-violet));
  opacity: var(--lanyard-opacity, 0);
  transition: opacity .7s ease;
}

.badge-card {
  position: absolute;
  inset: 0;
  border-radius: 30px;
  padding: 11% 9%;
  background:
    linear-gradient(130deg, rgba(255, 255, 255, .55), transparent 21% 34%, rgba(169, 216, 255, .25) 37%, transparent 47%),
    var(--form-paper);
  color: var(--carbon-smudge);
  overflow: hidden;
  transform-style: preserve-3d;
}

.badge-card::before {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 22px;
  border: 1px dashed rgba(29, 38, 51, .25);
}

.badge-eyelet {
  position: absolute;
  top: 18px;
  left: 50%;
  width: 42px;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 20px;
  background: var(--oxidized-brass);
  box-shadow: inset 0 0 0 5px rgba(7, 17, 31, .35);
}

.portrait-ghost {
  position: absolute;
  left: 8%;
  top: 18%;
  width: 40%;
  height: 32%;
  border-radius: 18px;
  background: rgba(169, 216, 255, .4);
  opacity: var(--portrait-opacity, .15);
  overflow: hidden;
  transition: opacity .5s ease;
}

.portrait-lines {
  width: 125%;
  height: 125%;
  margin: -12%;
  border-radius: 45%;
  background: repeating-radial-gradient(ellipse at center, transparent 0 9px, rgba(29, 38, 51, .55) 10px 11px);
  animation: portraitDrift 8s ease-in-out infinite alternate;
}

.badge-type {
  position: absolute;
  right: 8%;
  top: 18%;
  writing-mode: vertical-rl;
  font-family: var(--mono);
  letter-spacing: .12em;
  font-size: 11px;
}

.name-strip {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 56%;
  background: #07111F;
  color: #EEF3E7;
  padding: 13px 14px;
  font-family: var(--mono);
  font-size: clamp(13px, 1.4vw, 18px);
  transform: translateX(var(--name-x, -110%));
  transition: transform .6s cubic-bezier(.18, .9, .2, 1);
}

.alias-sticker, .friend-sticker {
  position: absolute;
  border-radius: 18px;
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  opacity: var(--sticker-opacity, 0);
  transition: opacity .5s ease, transform .5s ease;
}

.alias-sticker { left: 13%; bottom: 20%; background: var(--identity-coral); transform: rotate(-9deg); }
.friend-sticker { right: 7%; bottom: 29%; background: var(--laminate-blue); transform: rotate(7deg); color: var(--deep-ink); }

.identity-stamp {
  position: absolute;
  right: 11%;
  top: 37%;
  border: 4px double var(--identity-coral);
  color: var(--identity-coral);
  font-family: var(--mono);
  font-weight: 700;
  line-height: 1;
  padding: 8px;
  transform: rotate(10deg) scale(var(--stamp-scale, .35));
  opacity: var(--stamp-opacity, 0);
  mix-blend-mode: multiply;
  transition: transform .35s cubic-bezier(.2, 1.8, .2, 1), opacity .25s ease;
}

.hologram-foil {
  position: absolute;
  left: 13%;
  bottom: 8%;
  width: 38%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: var(--foil-opacity, 0);
  background: conic-gradient(from var(--foil-angle, 0deg), #8B7CFF, #A9D8FF, #EEF3E7, #FF6B5E, #A27B3D, #8B7CFF);
  mix-blend-mode: multiply;
  transition: opacity .5s ease;
}

.barcode-lines {
  position: absolute;
  right: 10%;
  bottom: 9%;
  width: 34%;
  height: 38px;
  background: repeating-linear-gradient(90deg, var(--carbon-smudge) 0 2px, transparent 2px 6px, var(--carbon-smudge) 6px 9px, transparent 9px 15px);
  opacity: .58;
}

.secret-note {
  position: absolute;
  left: 11%;
  right: 11%;
  bottom: 2%;
  color: rgba(29, 38, 51, .5);
  font-family: var(--mono);
  font-size: 9px;
  transform: rotate(180deg);
}

.cross-section {
  position: absolute;
  right: -28px;
  top: 20%;
  display: grid;
  gap: 5px;
}

.cross-section span {
  display: block;
  width: 70px;
  height: 5px;
  border-radius: 6px;
  background: var(--form-paper);
  opacity: .85;
}
.cross-section span:nth-child(2) { background: var(--laminate-blue); }
.cross-section span:nth-child(3) { background: var(--hologram-violet); }
.cross-section span:nth-child(4) { background: var(--identity-coral); }
.cross-section span:nth-child(5) { background: var(--oxidized-brass); }

.station-intake { background: radial-gradient(circle at 52% 25%, rgba(169, 216, 255, .18), transparent 29%), var(--deep-ink); }
.huge-wordmark {
  position: absolute;
  left: 6vw;
  bottom: -4vw;
  font-family: var(--fraunces);
  font-size: clamp(88px, 20vw, 310px);
  font-weight: 900;
  letter-spacing: -.08em;
  color: rgba(169, 216, 255, .13);
  transform: scaleY(-1);
  filter: blur(1px);
}

.service-window {
  position: absolute;
  top: 9vh;
  left: 24vw;
  width: 42vw;
  height: 24vh;
  border: 1px solid rgba(169, 216, 255, .45);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(169, 216, 255, .14), rgba(29, 38, 51, .36));
  box-shadow: 0 0 80px rgba(169, 216, 255, .14), inset 0 0 40px rgba(169, 216, 255, .1);
}

.fluorescent {
  width: 76%;
  height: 9px;
  margin: 22px auto;
  border-radius: 20px;
  background: var(--laminate-blue);
  animation: flicker 4.5s infinite;
}

.registrar-note { margin: 8vh 32px 0; color: rgba(238, 243, 231, .65); }

.queue-ticket {
  position: absolute;
  right: 12vw;
  top: 14vh;
  width: 130px;
  height: 180px;
  background: var(--form-paper);
  color: var(--carbon-smudge);
  transform: rotate(8deg);
  display: grid;
  place-items: center;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .35);
}
.queue-ticket span { font-size: 24px; font-weight: 700; }
.queue-ticket i { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--deep-ink); left: -7px; }
.queue-ticket i:nth-child(2) { top: 28px; } .queue-ticket i:nth-child(3) { top: 66px; } .queue-ticket i:nth-child(4) { top: 104px; } .queue-ticket i:nth-child(5) { top: 142px; }

.cropped-form {
  position: absolute;
  left: -10vw;
  top: 48vh;
  width: 52vw;
  padding: 22px;
  background: var(--form-paper);
  color: rgba(29, 38, 51, .45);
  font-family: var(--mono);
  transform: rotate(-90deg);
  text-transform: uppercase;
  letter-spacing: .18em;
}

.intake-copy { right: 7vw; bottom: 10vh; }
.flash-copy { left: 9vw; top: 13vh; }
.drawer-copy { right: 9vw; bottom: 11vh; }
.press-copy { left: 9vw; bottom: 12vh; }
.hologram-copy { right: 9vw; top: 13vh; }
.release-copy { left: 8vw; bottom: 10vh; }

.station-flash::before { background: radial-gradient(circle at 70% 45%, rgba(255, 107, 94, .18), transparent 30%), var(--deep-ink); }
.flash-frame {
  position: absolute;
  right: 7vw;
  top: 18vh;
  width: 35vw;
  height: 58vh;
  border: 16px solid var(--form-paper);
  background: rgba(169, 216, 255, .08);
  transform: rotate(4deg);
}
.silhouette {
  position: absolute;
  inset: 15%;
  border-radius: 50% 50% 42% 42%;
  background: repeating-radial-gradient(ellipse at center, rgba(169, 216, 255, .05) 0 10px, rgba(238, 243, 231, .35) 11px 12px);
}
.flash-burst {
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;
  background: #EEF3E7;
  opacity: 0;
}
.flash-burst.fire { animation: flashFire .55s ease; }
.scanner-label {
  position: absolute;
  right: 18vw;
  bottom: 14vh;
  color: var(--identity-coral);
  letter-spacing: .18em;
}

.drawer-bank {
  position: absolute;
  left: 6vw;
  top: 10vh;
  width: 48vw;
  display: grid;
  gap: 18px;
}
.drawer {
  height: 15vh;
  min-height: 86px;
  background: var(--form-paper);
  color: var(--carbon-smudge);
  border-radius: 12px;
  padding: 22px 28px;
  box-shadow: inset 0 -10px 0 rgba(29, 38, 51, .08), 20px 22px 40px rgba(0, 0, 0, .2);
  transform: translateX(-12%);
  transition: transform .45s ease;
}
.drawer.active, .drawer:hover { transform: translateX(5%) rotate(-1deg); }
.drawer span { display: block; font-family: var(--fraunces); font-size: clamp(32px, 5vw, 80px); line-height: .75; }
.drawer b { font-family: var(--mono); color: var(--oxidized-brass); text-transform: uppercase; }
.name-tabs {
  position: absolute;
  right: 12vw;
  top: 16vh;
  display: grid;
  gap: 12px;
}

.stamp-machine {
  position: absolute;
  right: 15vw;
  top: 10vh;
  width: 280px;
  height: 360px;
  transform: rotate(5deg);
}
.stamp-handle {
  width: 68px;
  height: 220px;
  margin: 0 auto;
  background: linear-gradient(var(--oxidized-brass), #6e512a);
  border-radius: 22px;
  transform-origin: top;
  transition: transform .28s ease;
}
.stamp-head {
  margin-top: -10px;
  padding: 24px;
  border: 8px solid var(--identity-coral);
  color: var(--identity-coral);
  font-family: var(--mono);
  font-weight: 700;
  text-align: center;
  background: rgba(7, 17, 31, .88);
}
.stamp-machine.down .stamp-handle { transform: translateY(54px) scaleY(.78); }
.ink-bloom {
  position: absolute;
  right: 19vw;
  bottom: 14vh;
  width: 270px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 107, 94, .38), transparent 62%);
  filter: blur(12px);
  animation: bloom 4s ease-in-out infinite alternate;
}
.signature-strip {
  position: absolute;
  left: 18vw;
  top: 12vh;
  width: 86vw;
  padding: 20px;
  background: var(--form-paper);
  color: rgba(29, 38, 51, .5);
  transform: rotate(-8deg);
  font-family: var(--mono);
}

.guilloche {
  position: absolute;
  left: -10vw;
  top: 16vh;
  width: 112vw;
  height: 62vh;
  fill: none;
  stroke: var(--hologram-violet);
  stroke-width: 2;
  opacity: .42;
  filter: drop-shadow(0 0 18px rgba(139, 124, 255, .35));
}
.foil-reader {
  position: absolute;
  left: 8vw;
  bottom: 16vh;
  color: var(--laminate-blue);
  letter-spacing: .22em;
}

.lanyard-cord {
  position: absolute;
  left: 42vw;
  top: -4vh;
  width: 34vw;
  height: 50vh;
  border: 10px solid var(--identity-coral);
  border-bottom: none;
  border-radius: 50% 50% 0 0;
  filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .25));
  animation: sway 5s ease-in-out infinite alternate;
}
.lanyard-cord span {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--oxidized-brass);
  bottom: -9px;
}
.lanyard-cord span:nth-child(1) { left: 14%; } .lanyard-cord span:nth-child(2) { left: 48%; } .lanyard-cord span:nth-child(3) { right: 14%; }
.hotspots {
  position: absolute;
  right: 8vw;
  top: 23vh;
  display: grid;
  gap: 13px;
}
.tip-card {
  position: absolute;
  right: 8vw;
  top: 48vh;
  width: 310px;
  min-height: 122px;
  padding: 22px;
  border-radius: 22px;
  background: rgba(238, 243, 231, .92);
  color: var(--carbon-smudge);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .28);
}
.final-slip {
  position: absolute;
  right: 9vw;
  bottom: 8vh;
  color: var(--oxidized-brass);
  letter-spacing: .18em;
}

body.scene-flash { --badge-x: 68; --badge-y: 54; --badge-rot: 4; --badge-scale: .92; --portrait-opacity: .9; }
body.scene-drawer { --badge-x: 56; --badge-y: 45; --badge-rot: -3; --badge-scale: 1; --portrait-opacity: .9; --name-x: 0%; --sticker-opacity: 1; }
body.scene-press { --badge-x: 61; --badge-y: 55; --badge-rot: 8; --badge-scale: 1.04; --portrait-opacity: .9; --name-x: 0%; --sticker-opacity: 1; --stamp-opacity: 1; --stamp-scale: 1; }
body.scene-hologram { --badge-x: 40; --badge-y: 48; --badge-rot: -8; --badge-scale: 1.07; --portrait-opacity: .9; --name-x: 0%; --sticker-opacity: 1; --stamp-opacity: 1; --stamp-scale: 1; --foil-opacity: .84; }
body.scene-release { --badge-x: 54; --badge-y: 45; --badge-rot: 2; --badge-scale: 1.12; --portrait-opacity: .9; --name-x: 0%; --sticker-opacity: 1; --stamp-opacity: 1; --stamp-scale: 1; --foil-opacity: .9; --sleeve-opacity: .72; --sleeve-y: 0; --lanyard-opacity: 1; }
body.glass-chosen { --name-x: 0%; }

@keyframes flicker { 0%, 92%, 100% { opacity: 1; } 93% { opacity: .35; } 95% { opacity: .8; } 97% { opacity: .2; } }
@keyframes portraitDrift { from { transform: rotate(0deg) scale(1); } to { transform: rotate(8deg) scale(1.08); } }
@keyframes flashFire { 0% { opacity: 0; } 10% { opacity: .96; } 100% { opacity: 0; } }
@keyframes bloom { from { transform: scale(.75); opacity: .28; } to { transform: scale(1.18); opacity: .58; } }
@keyframes sway { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }

@media (max-width: 760px) {
  .progress-rail { left: 8px; transform: translateY(-50%) scale(.72); }
  .station { padding: 28px 22px 120px; }
  .station-copy { left: 28px !important; right: 28px !important; top: auto !important; bottom: 7vh !important; }
  .badge-protagonist { width: 230px; }
  .service-window, .drawer-bank, .flash-frame { width: 78vw; left: 14vw; right: auto; }
  .name-tabs, .hotspots, .tip-card { right: 24px; }
  h1 { font-size: 64px; }
  h2 { font-size: 56px; }
}