:root {
  /* Inter for compact annotations. Space Grotesk for the large kinetic wordmark. Space Grotesk fragments. Space Grotesk timestamps like diary notes written over a timetable. */
  --sunrise-paper: #FFF3D6;
  --transit-ink: #182033;
  --alarm-coral: #FF5C45;
  --noon-cyan: #37C8D6;
  --crosswalk-yellow: #F7C948;
  --afterimage-violet: #6E4DFF;
  --midnight-plum: #22142B;
  --space-font: "Space Grotesk", "Space", "Avenir Next", "Inter", system-ui, sans-serif;
  --inter-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fraunces-font: "Fraunces", Georgia, "Times New Roman", serif;
  --scroll-ratio: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 650vh;
  color: var(--transit-ink);
  background: linear-gradient(180deg, var(--sunrise-paper) 0%, var(--crosswalk-yellow) 18%, var(--noon-cyan) 38%, var(--sunrise-paper) 55%, var(--afterimage-violet) 78%, var(--midnight-plum) 100%);
  font-family: var(--inter-font);
  overflow-x: hidden;
}

button { font: inherit; color: inherit; }

.time-stage {
  position: relative;
  isolation: isolate;
  background: color-mix(in srgb, var(--sunrise-paper) calc(78% - var(--scroll-ratio) * 32%), transparent);
  cursor: crosshair;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .16;
  background-image: radial-gradient(var(--transit-ink) .7px, transparent .7px), repeating-linear-gradient(90deg, transparent 0 17px, rgba(24,32,51,.08) 18px 19px);
  background-size: 13px 13px, 100% 100%;
  mix-blend-mode: multiply;
}

.stage-header {
  position: fixed;
  top: clamp(12px, 2vw, 26px);
  left: clamp(14px, 3vw, 42px);
  right: clamp(14px, 3vw, 42px);
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-family: var(--inter-font);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
}

.stage-note { opacity: .72; }

.time-affordances { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.time-affordances button {
  border: 1px solid rgba(24,32,51,.55);
  background: rgba(255,243,214,.58);
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.time-affordances button:hover { transform: translateY(-2px); background: var(--transit-ink); color: var(--sunrise-paper); }

.timestamp-chip {
  display: inline-flex;
  align-items: center;
  width: max-content;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: .28rem .62rem;
  font-family: var(--inter-font);
  font-size: clamp(10px, 1.15vw, 13px);
  letter-spacing: .04em;
  background: rgba(255,243,214,.72);
  box-shadow: 4px 4px 0 rgba(110,77,255,.18);
  animation: chipBlink 2.6s steps(2,end) infinite;
  cursor: pointer;
}

.timestamp-chip.active { color: var(--alarm-coral); background: var(--sunrise-paper); }

.act {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: clamp(76px, 10vw, 140px) clamp(18px, 4vw, 72px);
}

.act-label {
  position: absolute;
  top: clamp(70px, 12vh, 110px);
  left: clamp(18px, 4vw, 72px);
  z-index: 5;
  font-family: var(--space-font);
  font-weight: 800;
  font-size: clamp(24px, 5vw, 72px);
  line-height: .86;
  letter-spacing: -.06em;
  max-width: 560px;
}

.act-label span {
  display: block;
  font-family: var(--inter-font);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.hero-act { min-height: 118vh; align-items: stretch; padding-inline: 0; }
.day-score {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  padding-top: 15vh;
  padding-bottom: 6vh;
}

.time-lane {
  position: relative;
  overflow: hidden;
  border-block-start: 1.5px solid rgba(24,32,51,.58);
  background: linear-gradient(90deg, rgba(255,243,214,.28), rgba(55,200,214,.16), rgba(247,201,72,.22));
  transform: translateX(calc(var(--offset) + var(--scroll-ratio) * (8vw + var(--lane-index) * 2vw)));
  transition: filter .4s ease, opacity .4s ease, transform .08s linear;
}
.time-lane:nth-child(even) { background: linear-gradient(90deg, rgba(110,77,255,.12), rgba(255,243,214,.28), rgba(255,92,69,.14)); }
.time-lane:last-child { border-block-end: 1.5px solid rgba(24,32,51,.58); }

.lane-title {
  position: absolute;
  left: clamp(16px, 3vw, 44px);
  top: 10px;
  z-index: 4;
  font-family: var(--space-font);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--alarm-coral);
}

.word-slice {
  position: absolute;
  left: 8vw;
  top: calc(-.31em - var(--lane-index) * .94em);
  font-family: var(--space-font);
  font-size: clamp(82px, 18vw, 280px);
  font-weight: 900;
  letter-spacing: -.105em;
  white-space: nowrap;
  color: var(--transit-ink);
  text-shadow: 9px 7px 0 rgba(110,77,255,.28), -12px -4px 0 rgba(55,200,214,.24);
  animation: wordDrift var(--speed) ease-in-out infinite alternate;
}

.lane-stream {
  position: absolute;
  inset-block: 0;
  left: 35vw;
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 44px);
  min-width: 110vw;
  animation: laneTravel var(--speed) linear infinite;
}

.sentence-strip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: .35rem .8rem;
  background: rgba(255,243,214,.82);
  border-left: 8px solid var(--crosswalk-yellow);
  font-family: var(--space-font);
  font-size: clamp(16px, 2vw, 30px);
  font-weight: 700;
  letter-spacing: -.03em;
  white-space: nowrap;
  box-shadow: 0 12px 28px rgba(24,32,51,.12);
}
.fraunces { font-family: var(--fraunces-font); font-weight: 500; font-style: italic; letter-spacing: -.025em; }

.sync-mark {
  position: absolute;
  top: 9vh;
  bottom: 6vh;
  left: calc(48% + var(--scroll-ratio) * 4%);
  width: 3px;
  z-index: 8;
  background: var(--crosswalk-yellow);
  box-shadow: 0 0 0 6px rgba(247,201,72,.2), 0 0 38px var(--alarm-coral);
  animation: syncPulse 3.8s ease-in-out infinite;
}

.sun-dot {
  position: fixed;
  z-index: 25;
  left: calc(18vw + var(--scroll-ratio) * 64vw);
  top: calc(72vh - var(--scroll-ratio) * 48vh);
  width: clamp(16px, 2.4vw, 34px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--sunrise-paper), var(--crosswalk-yellow) 45%, var(--alarm-coral));
  box-shadow: 0 0 28px rgba(247,201,72,.8), 0 0 0 12px rgba(247,201,72,.14);
}

.shadow-minute {
  position: fixed;
  width: 2px;
  height: 64vh;
  left: 50%;
  top: 18vh;
  z-index: 0;
  transform-origin: 50% 10%;
  transform: rotate(calc(-42deg + var(--scroll-ratio) * 138deg));
  background: linear-gradient(var(--transit-ink), transparent);
  opacity: .17;
}

.route-bar { width: 180px; height: 11px; background: repeating-linear-gradient(90deg, var(--noon-cyan) 0 30px, transparent 30px 42px, var(--alarm-coral) 42px 72px); }
.steam { width: 120px; height: 54px; background: radial-gradient(ellipse at 20% 80%, transparent 18px, var(--noon-cyan) 19px 21px, transparent 22px), radial-gradient(ellipse at 60% 80%, transparent 17px, var(--afterimage-violet) 18px 20px, transparent 21px); opacity: .8; }
.notification-dots { display: inline-flex; gap: 10px; }
.notification-dots i { width: 16px; height: 16px; border-radius: 50%; background: var(--alarm-coral); animation: dotBeat 1.2s ease-in-out infinite alternate; }
.notification-dots i:nth-child(2) { animation-delay: .2s; background: var(--crosswalk-yellow); }
.notification-dots i:nth-child(3) { animation-delay: .4s; background: var(--afterimage-violet); }
.window-light { width: 170px; height: 58px; background: linear-gradient(135deg, rgba(255,243,214,.9), rgba(55,200,214,.5)); box-shadow: 24px 18px 0 rgba(110,77,255,.18); }
.crosswalk { width: 210px; height: 60px; background: repeating-linear-gradient(90deg, var(--transit-ink) 0 18px, transparent 18px 35px); opacity: .82; }
.afterimage-text { font-family: var(--space-font); font-size: clamp(28px, 5vw, 70px); font-weight: 900; color: transparent; -webkit-text-stroke: 1px var(--afterimage-violet); text-shadow: 18px 0 0 rgba(110,77,255,.16), 36px 0 0 rgba(255,92,69,.13); }
.rain-ticks { display: inline-grid; grid-template-columns: repeat(5, 11px); gap: 12px; height: 68px; align-items: start; }
.rain-ticks i { display: block; width: 3px; height: 42px; background: var(--noon-cyan); transform: rotate(16deg); animation: rainFall .95s linear infinite; }
.rain-ticks i:nth-child(2) { height: 58px; animation-delay: -.18s; background: var(--afterimage-violet); }
.rain-ticks i:nth-child(3) { height: 34px; animation-delay: -.35s; background: var(--alarm-coral); }
.rain-ticks i:nth-child(4) { height: 50px; animation-delay: -.52s; }
.rain-ticks i:nth-child(5) { height: 29px; animation-delay: -.7s; background: var(--crosswalk-yellow); }

.commute-act { background: linear-gradient(180deg, rgba(255,243,214,.55), rgba(55,200,214,.32)); }
.shared-minute {
  font-family: var(--space-font);
  font-size: clamp(88px, 24vw, 360px);
  font-weight: 900;
  letter-spacing: -.12em;
  color: var(--transit-ink);
  text-shadow: 12px 12px 0 rgba(255,92,69,.42), -18px 6px 0 rgba(55,200,214,.42);
}
.parallel-lines { position: absolute; inset: auto 4vw 9vh 4vw; display: grid; gap: 14px; }
.parallel-lines p { margin: 0; display: grid; grid-template-columns: max-content 1fr max-content; gap: 18px; align-items: center; font-family: var(--space-font); font-size: clamp(18px, 3vw, 44px); font-weight: 800; }
.parallel-lines span { height: 3px; background: repeating-linear-gradient(90deg, var(--alarm-coral) 0 22px, transparent 22px 34px); }
.parallel-lines em { font-family: var(--fraunces-font); font-weight: 500; }

.noon-act { background: linear-gradient(110deg, rgba(55,200,214,.72), rgba(255,243,214,.88)); }
.noon-stack { width: min(1080px, 92vw); display: grid; grid-template-columns: 1fr minmax(220px, .45fr); align-items: end; gap: 4vw; }
.oversize-time { grid-column: 1 / -1; font-family: var(--space-font); font-size: clamp(96px, 28vw, 390px); font-weight: 900; letter-spacing: -.14em; line-height: .72; color: var(--alarm-coral); }
.calendar-leaves { display: grid; gap: 10px; transform: rotate(-3deg); }
.calendar-leaves i { display: block; padding: 18px 26px; background: var(--sunrise-paper); border: 2px solid var(--transit-ink); box-shadow: 9px 9px 0 var(--crosswalk-yellow); font-family: var(--space-font); font-style: normal; font-weight: 900; font-size: clamp(26px, 4vw, 58px); }
.diary { font-size: clamp(22px, 4vw, 56px); line-height: .98; color: var(--midnight-plum); }

.drift-act { background: linear-gradient(180deg, rgba(255,243,214,.75), rgba(110,77,255,.26)); }
.receipt-tape { width: min(980px, 86vw); transform: translateX(calc(-8vw + var(--scroll-ratio) * 18vw)) rotate(2deg); font-family: var(--space-font); font-size: clamp(24px, 5vw, 76px); font-weight: 900; letter-spacing: -.06em; line-height: .98; }
.receipt-tape span { display: block; margin: 12px 0; padding: 10px 18px; background: rgba(255,243,214,.82); border-left: 12px solid var(--noon-cyan); }
.elevator { position: absolute; right: 6vw; bottom: 10vh; display: flex; gap: 7px; }
.elevator i { display: grid; place-items: center; width: 42px; height: 58px; background: var(--transit-ink); color: var(--crosswalk-yellow); font-family: var(--space-font); font-style: normal; font-weight: 900; }

.merge-act { background: linear-gradient(140deg, var(--crosswalk-yellow), var(--alarm-coral) 48%, var(--afterimage-violet)); color: var(--transit-ink); }
.golden-merge { display: grid; gap: 26px; width: min(980px, 90vw); justify-items: start; }
.shared-minute.coral { color: var(--sunrise-paper); text-shadow: 14px 11px 0 rgba(24,32,51,.42); }
.golden-merge p { margin: 0; max-width: 830px; font-size: clamp(25px, 5vw, 80px); line-height: .92; }
.merge-bars { display: flex; gap: 12px; width: 100%; height: 90px; align-items: stretch; }
.merge-bars i { flex: 1; background: rgba(255,243,214,.68); transform: scaleY(calc(.35 + var(--scroll-ratio) * .65)); transform-origin: bottom; }

.midnight-act { background: var(--midnight-plum); color: var(--sunrise-paper); }
.midnight-word { display: grid; gap: 0; justify-items: center; font-family: var(--space-font); font-size: clamp(54px, 15vw, 220px); font-weight: 900; letter-spacing: -.1em; line-height: .78; }
.midnight-word strong { color: var(--crosswalk-yellow); font-size: 1.15em; text-shadow: 12px 8px 0 rgba(110,77,255,.7); }
.closing { position: absolute; bottom: 10vh; right: 6vw; max-width: 520px; margin: 0; font-size: clamp(22px, 3.6vw, 54px); line-height: 1; color: var(--sunrise-paper); }

.paused .time-lane { animation-play-state: paused; opacity: .22; filter: grayscale(.6); }
.paused .time-lane.inspecting { opacity: 1; filter: none; z-index: 9; background: rgba(255,243,214,.9); }
.paused .time-lane.inspecting .lane-stream, .paused .time-lane.inspecting .word-slice { animation-play-state: paused; }
.is-scrubbing .sync-mark { background: var(--alarm-coral); box-shadow: 0 0 0 10px rgba(255,92,69,.22), 0 0 52px var(--afterimage-violet); }
.is-scrubbing .time-lane { transition-duration: .02s; }

@keyframes wordDrift { from { transform: translateX(-3vw); } to { transform: translateX(8vw); } }
@keyframes laneTravel { from { transform: translateX(0); } to { transform: translateX(-42vw); } }
@keyframes syncPulse { 0%, 100% { opacity: .42; transform: scaleY(.78); } 48%, 54% { opacity: 1; transform: scaleY(1.08); } }
@keyframes chipBlink { 0%, 60% { border-color: currentColor; } 61%, 100% { border-color: var(--alarm-coral); } }
@keyframes dotBeat { from { transform: translateY(0) scale(1); } to { transform: translateY(-8px) scale(1.18); } }
@keyframes rainFall { from { transform: translateY(-12px) rotate(16deg); opacity: .2; } 42% { opacity: 1; } to { transform: translateY(20px) rotate(16deg); opacity: .18; } }

@media (max-width: 760px) {
  .stage-header { align-items: flex-start; flex-direction: column; }
  .stage-note { display: none; }
  .time-affordances { justify-content: flex-start; }
  .day-score { grid-template-rows: repeat(7, minmax(76px, 1fr)); padding-top: 24vh; }
  .word-slice { left: -4vw; font-size: 118px; }
  .lane-stream { left: 28vw; }
  .sentence-strip { font-size: 16px; }
  .noon-stack { grid-template-columns: 1fr; }
  .parallel-lines p { grid-template-columns: 1fr; }
  .parallel-lines span { width: 100%; }
}