:root {
  /* Typography compliance terms from DESIGN.md: Interprets `lov.st` emotional night-train with gates Space Grotesk for ticket metadata */
  --patent-black: #07060A;
  --liquid-chrome: #D9E1F2;
  --chrome-shadow: #9EA8BA;
  --chrome-dark: #2B2D36;
  --chrome-ice: #EAF3FF;
  --lipgloss-pink: #FF5EBE;
  --platform-lavender: #9A7CFF;
  --signal-cyan: #3FF6FF;
  --pearl-ticket: #FFF2D8;
  --cherry-led: #D90045;
  --white: #FFFFFF;
  --accent: #FF5EBE;
  --display: "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --mono: "Space Grotesk", "Trebuchet MS", system-ui, sans-serif;
  --compliance-grotesk: "Grotesk**";
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--liquid-chrome);
  background:
    radial-gradient(circle at 78% 12%, rgba(154, 124, 255, .34), transparent 34rem),
    radial-gradient(circle at 10% 50%, rgba(255, 94, 190, .18), transparent 27rem),
    linear-gradient(125deg, #07060A 0%, #10101A 45%, #050407 100%);
  font-family: var(--mono);
}

.grain, .scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 80;
}

.grain {
  opacity: .22;
  background-image: radial-gradient(circle, rgba(255,255,255,.28) .8px, transparent 1px);
  background-size: 7px 7px;
  mix-blend-mode: screen;
}

.scanlines {
  opacity: .16;
  background: repeating-linear-gradient(180deg, transparent 0 8px, rgba(63, 246, 255, .16) 9px, transparent 10px);
}

.intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: #07060A;
  transition: transform 1.15s cubic-bezier(.76,0,.24,1), opacity .8s ease;
}

.intro.open { transform: translateY(-105%); opacity: .25; pointer-events: none; }

.ticket-slot {
  position: absolute;
  top: 34%;
  width: min(46rem, 70vw);
  height: .8rem;
  border-radius: 999px;
  background: #030205;
  box-shadow: 0 0 2rem var(--signal-cyan), inset 0 0 .8rem #000, 0 0 5rem var(--lipgloss-pink);
}

.entry-ticket {
  position: relative;
  width: min(36rem, 78vw);
  min-height: 15rem;
  border: 0;
  cursor: pointer;
  color: var(--patent-black);
  padding: 2rem;
  transform: translateY(-2rem) rotate(-3deg);
  clip-path: polygon(0 12%, 6% 12%, 6% 0, 94% 0, 94% 12%, 100% 12%, 100% 88%, 94% 88%, 94% 100%, 6% 100%, 6% 88%, 0 88%);
  background:
    radial-gradient(circle at 6% 50%, #07060A 0 1.1rem, transparent 1.15rem),
    radial-gradient(circle at 94% 50%, #07060A 0 1.1rem, transparent 1.15rem),
    linear-gradient(105deg, rgba(255,255,255,.85), transparent 18%, rgba(63,246,255,.38) 36%, rgba(255,94,190,.34) 58%, rgba(255,242,216,.95) 74%),
    repeating-linear-gradient(135deg, rgba(154,124,255,.16) 0 2px, transparent 2px 11px),
    var(--pearl-ticket);
  box-shadow: 0 2rem 6rem rgba(255,94,190,.32), 0 0 2.5rem rgba(63,246,255,.45);
  animation: ticketOut 1.8s ease both, foilTilt 3.3s ease-in-out infinite;
}

.ticket-meta, .ticket-prompt { display: block; font: 700 .78rem var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.ticket-logo { display: block; margin: .7rem 0; font: 900 clamp(5rem, 16vw, 10rem)/.82 var(--display); letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1px #2B2D36; background: linear-gradient(90deg, #FFFFFF, #9EA8BA, #2B2D36, #EAF3FF, #FF5EBE, #3FF6FF); -webkit-background-clip: text; background-clip: text; }

.gate { position: absolute; top: 0; bottom: 0; width: 50%; background: linear-gradient(90deg, rgba(217,225,242,.18), rgba(255,255,255,.04), rgba(43,45,54,.7)); backdrop-filter: blur(8px); transition: transform 1.1s cubic-bezier(.7,0,.2,1); }
.gate-left { left: 0; border-right: 1px solid rgba(63,246,255,.5); }
.gate-right { right: 0; border-left: 1px solid rgba(255,94,190,.5); }
.intro.open .gate-left { transform: translateX(-100%); }
.intro.open .gate-right { transform: translateX(100%); }

.route-strip {
  position: fixed;
  left: 1rem;
  top: 50%;
  z-index: 90;
  transform: translateY(-50%);
  display: grid;
  gap: .55rem;
  padding: .55rem;
  border: 1px solid rgba(217,225,242,.34);
  border-radius: 999px;
  background: rgba(7,6,10,.58);
  box-shadow: 0 0 2rem rgba(63,246,255,.18), inset 0 0 1rem rgba(255,255,255,.06);
}

.route-strip a {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  color: var(--liquid-chrome);
  text-decoration: none;
  font: 900 .68rem var(--mono);
  letter-spacing: .08em;
  border-radius: 50%;
  border: 1px dashed rgba(255,242,216,.34);
  background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(43,45,54,.32));
}
.route-strip a.active { color: #07060A; background: var(--accent); box-shadow: 0 0 1.4rem var(--accent); }

.route-rail { position: fixed; inset: 0; z-index: 2; width: 100vw; height: 500vh; pointer-events: none; opacity: .78; }
.route-rail path { fill: none; stroke: url(#chromeLine); stroke-width: 9; stroke-linecap: round; filter: url(#railGlow); stroke-dasharray: 28 18; animation: railMove 8s linear infinite; }

.charm-cluster { position: fixed; right: 2rem; top: 1.4rem; z-index: 95; width: 9rem; height: 15rem; transform-origin: top center; }
.strap { position: absolute; left: 4.4rem; top: 0; width: 2px; height: 7rem; background: linear-gradient(#D9E1F2, #9EA8BA, #FF5EBE); }
.charm { position: absolute; display: grid; place-items: center; font: 900 .7rem var(--mono); color: #07060A; box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.35), inset .2rem .2rem .5rem rgba(255,255,255,.55); animation: swing 3.5s ease-in-out infinite; }
.ticket-charm { top: 5.7rem; left: 2.2rem; width: 3rem; height: 2rem; background: var(--pearl-ticket); transform: rotate(-14deg); }
.mirror-charm { top: 6.9rem; right: 1.1rem; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: radial-gradient(circle at 30% 20%, #FFFFFF, #EAF3FF 28%, #9A7CFF 52%, #2B2D36 78%); animation-delay: -.8s; }
.key-charm { top: 10.1rem; left: 4rem; width: 2.2rem; height: 3.5rem; border-radius: 1rem 1rem .3rem .3rem; background: linear-gradient(135deg, #FFFFFF, #9EA8BA, #2B2D36, #EAF3FF); animation-delay: -1.6s; }
.bead { position: absolute; border-radius: 50%; background: var(--lipgloss-pink); box-shadow: 0 0 1rem currentColor; }
.bead-one { top: 4.4rem; left: 3.7rem; width: .7rem; height: .7rem; color: #FF5EBE; }
.bead-two { top: 5rem; left: 5rem; width: .55rem; height: .55rem; color: #3FF6FF; background: #3FF6FF; }

.chapter {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: 7rem clamp(1.2rem, 6vw, 7rem) 5rem;
  isolation: isolate;
  overflow: hidden;
}

.chapter::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(circle at var(--x,70%) var(--y,35%), color-mix(in srgb, var(--accent) 28%, transparent), transparent 28rem);
  opacity: .82;
}

.chapter-title {
  position: absolute;
  right: -2vw;
  top: 4vh;
  font: 900 clamp(7rem, 22vw, 19rem)/.78 var(--display);
  letter-spacing: -.06em;
  color: rgba(217,225,242,.08);
  -webkit-text-stroke: 1px rgba(217,225,242,.28);
  transform: rotate(-6deg);
  white-space: nowrap;
}

.artifact {
  position: relative;
  z-index: 4;
  width: min(44rem, 84vw);
  padding: clamp(1.2rem, 4vw, 3rem);
  border: 1px solid rgba(217,225,242,.36);
  background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(7,6,10,.44) 38%, rgba(43,45,54,.24));
  box-shadow: 0 2rem 7rem rgba(0,0,0,.45), inset 0 0 2rem rgba(255,255,255,.05), 0 0 3rem color-mix(in srgb, var(--accent) 30%, transparent);
  backdrop-filter: blur(12px);
}

.overline { margin: 0 0 1rem; font: 900 .78rem var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--signal-cyan); }
.serif { margin: 0; font-family: var(--serif); font-size: clamp(1.35rem, 3vw, 2.65rem); line-height: 1.08; color: var(--pearl-ticket); text-shadow: 0 0 1.4rem rgba(255,94,190,.18); }
.large { font-size: clamp(2.4rem, 6vw, 5.6rem); }

.ticket-stub { margin-left: clamp(1rem, 12vw, 10rem); clip-path: polygon(0 0, 100% 0, 100% 86%, 92% 86%, 92% 100%, 8% 100%, 8% 86%, 0 86%); }
.ticket-stub h1 { margin: 0 0 1rem; font: 900 clamp(6rem, 19vw, 14rem)/.8 var(--display); color: transparent; background: linear-gradient(90deg, #FFFFFF, #9EA8BA, #2B2D36, #EAF3FF, #FF5EBE, #3FF6FF); -webkit-background-clip: text; background-clip: text; }
.stamp { display: inline-block; margin-top: 1.4rem; padding: .45rem .8rem; color: var(--cherry-led); border: 2px solid var(--cherry-led); transform: rotate(-4deg); font: 900 .85rem var(--mono); letter-spacing: .14em; }

.translucent-gate { position: absolute; inset: auto 6vw 8vh auto; display: flex; gap: 1rem; transform: skewX(-10deg); }
.gate-glass { width: 9rem; height: 38rem; border: 1px solid rgba(217,225,242,.32); background: linear-gradient(100deg, rgba(255,255,255,.2), rgba(63,246,255,.06), rgba(255,94,190,.12)); box-shadow: inset 0 0 2rem rgba(255,255,255,.07); }
.platform-dots { position: absolute; left: 0; right: 0; bottom: 2rem; height: 2rem; background: radial-gradient(circle, #FFF2D8 0 .28rem, transparent .3rem) 0 0/1.35rem 1.35rem; opacity: .55; }

.crush-chapter { --x: 18%; --y: 28%; }
.split-board { margin-left: auto; margin-right: 8vw; transform: rotate(2.5deg); background: linear-gradient(135deg, rgba(4,4,6,.86), rgba(43,45,54,.7)); }
.flaps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin: 1rem 0 1.4rem; }
.flaps span { display: grid; place-items: center; min-height: clamp(5rem, 12vw, 8rem); color: var(--signal-cyan); background: linear-gradient(#11131A 49%, #050508 50%); border: 1px solid rgba(63,246,255,.28); box-shadow: inset 0 -.2rem .1rem rgba(0,0,0,.8), 0 0 1rem rgba(63,246,255,.2); font: 900 clamp(2rem, 6vw, 5.4rem)/1 var(--display); letter-spacing: .04em; text-shadow: 0 0 1rem #3FF6FF; }
.flaps.clack span { animation: clack .18s ease; }
.hanging-sign { position: absolute; left: 15vw; bottom: 18vh; padding: .7rem 1.2rem; border: 1px solid #D9E1F2; color: #07060A; background: #D9E1F2; box-shadow: 0 0 2rem rgba(63,246,255,.35); transform: rotate(-8deg); font: 900 .85rem var(--mono); letter-spacing: .16em; }

.kiss-chapter { --x: 78%; --y: 62%; }
.vending-machine { margin-left: 10vw; width: min(38rem, 82vw); border-radius: 2.2rem; background: linear-gradient(145deg, rgba(217,225,242,.2), rgba(154,124,255,.18), rgba(7,6,10,.74)); }
.vending-grid { display: grid; grid-template-columns: repeat(2, minmax(7rem, 1fr)); gap: 1rem; margin: 1.2rem 0; }
.vending-grid button { min-height: 6rem; border: 1px solid rgba(255,255,255,.34); color: var(--pearl-ticket); background: radial-gradient(circle at 35% 20%, rgba(255,255,255,.32), transparent 28%), linear-gradient(135deg, rgba(255,94,190,.28), rgba(63,246,255,.12)); font: 900 2rem var(--display); cursor: pointer; box-shadow: inset 0 0 2rem rgba(255,255,255,.05); }
.vending-grid button:hover { transform: translateY(-.2rem); box-shadow: 0 0 2rem var(--platform-lavender); }
.dispensed { min-height: 4rem; display: grid; place-items: center; border: 1px dashed rgba(255,242,216,.46); color: #07060A; background: var(--pearl-ticket); font: 900 1rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.stickers i { position: absolute; width: 3.2rem; height: 3.2rem; background: linear-gradient(135deg, #FFFFFF, #FF5EBE, #3FF6FF); clip-path: polygon(50% 0, 62% 35%, 100% 35%, 69% 56%, 80% 100%, 50% 72%, 20% 100%, 31% 56%, 0 35%, 38% 35%); animation: twinkle 2s ease-in-out infinite; }
.stickers i:nth-child(1){ right: 18vw; top: 22vh; } .stickers i:nth-child(2){ right: 8vw; bottom: 17vh; animation-delay: -.4s; } .stickers i:nth-child(3){ left: 47vw; top: 15vh; animation-delay: -.9s; } .stickers i:nth-child(4){ left: 8vw; bottom: 12vh; animation-delay: -1.3s; }

.delay-chapter { --x: 44%; --y: 52%; }
.announcement { margin-left: auto; margin-right: 11vw; transform: skewY(-2deg); }
.reflection { margin-top: 2rem; color: var(--cherry-led); transform: scaleY(-1); opacity: .42; filter: blur(1px); font: 900 clamp(1.6rem, 5vw, 4.8rem) var(--display); }
.puddle { position: absolute; left: 11vw; bottom: 9vh; width: min(46rem, 80vw); height: 9rem; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(63,246,255,.34), rgba(154,124,255,.16) 38%, transparent 70%); transform: rotate(-7deg); filter: blur(.2px); }
.puddle span { position: absolute; left: 18%; top: 38%; color: rgba(255,242,216,.46); font: 900 1rem var(--mono); letter-spacing: .18em; transform: scaleY(-1); }
.rain { position: absolute; inset: 0; background: repeating-linear-gradient(105deg, transparent 0 22px, rgba(217,225,242,.2) 23px, transparent 24px); opacity: .3; animation: rainSlide 1.4s linear infinite; }

.stay-chapter { --x: 24%; --y: 48%; }
.train-window { position: absolute; right: 0; top: 18vh; width: min(55rem, 78vw); height: 52vh; border: 1.2rem solid; border-image: linear-gradient(90deg, #FFFFFF, #9EA8BA, #2B2D36, #EAF3FF) 1; background: linear-gradient(115deg, rgba(255,255,255,.2), rgba(63,246,255,.1), rgba(7,6,10,.58)), radial-gradient(circle at 70% 30%, rgba(255,94,190,.34), transparent 18rem); box-shadow: 0 0 4rem rgba(217,225,242,.22); transform: translateX(8%); overflow: hidden; }
.train-window::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 26%, rgba(255,255,255,.4), transparent 12rem), repeating-linear-gradient(90deg, transparent 0 7rem, rgba(255,255,255,.11) 7.2rem, transparent 7.5rem); animation: windowPass 5s ease-in-out infinite alternate; }
.condensation { position: absolute; left: 9%; bottom: 18%; width: 70%; font: italic clamp(1.6rem, 4vw, 3.8rem)/1.05 var(--serif); color: rgba(255,242,216,.82); text-shadow: 0 0 1rem #FFFFFF; }
.transfer { margin-left: 8vw; margin-top: 36vh; }
.transfer-ticket { display: inline-block; margin-top: 1.5rem; padding: .8rem 1.4rem; text-decoration: none; color: #07060A; background: var(--pearl-ticket); clip-path: polygon(0 0, 100% 0, 100% 78%, 92% 78%, 92% 100%, 8% 100%, 8% 78%, 0 78%); font: 900 .9rem var(--mono); letter-spacing: .18em; box-shadow: 0 0 2rem rgba(255,242,216,.34); }

@keyframes ticketOut { from { transform: translateY(-10rem) rotate(-3deg); opacity: 0; } to { transform: translateY(-2rem) rotate(-3deg); opacity: 1; } }
@keyframes foilTilt { 50% { filter: hue-rotate(18deg) brightness(1.16); transform: translateY(-2.3rem) rotate(2deg); } }
@keyframes railMove { to { stroke-dashoffset: -92; } }
@keyframes swing { 50% { transform: rotate(13deg) translateY(.18rem); } }
@keyframes clack { 50% { transform: rotateX(72deg); filter: brightness(2); } }
@keyframes twinkle { 50% { transform: rotate(35deg) scale(1.28); filter: brightness(1.6); } }
@keyframes rainSlide { to { background-position: -5rem 8rem; } }
@keyframes windowPass { to { transform: translateX(-12%); } }

@media (max-width: 760px) {
  .route-strip { left: .35rem; transform: translateY(-50%) scale(.82); }
  .charm-cluster { right: .2rem; transform: scale(.75); }
  .chapter { padding-left: 3.4rem; }
  .split-board, .announcement, .ticket-stub, .vending-machine, .transfer { margin-left: 0; margin-right: 0; }
  .flaps { grid-template-columns: 1fr; }
  .translucent-gate { opacity: .35; }
}