:root {
  --intro-black: #030303;
  --intro-white: #ffffff;
  --intro-line: rgba(255, 255, 255, 0.24);
  --intro-muted: rgba(255, 255, 255, 0.58);
  --intro-ease: cubic-bezier(0.72, 0, 0.12, 1);
  --intro-ui: Inter, Arial, sans-serif;
}

html,
body.timeline-prototype {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  background: var(--intro-black);
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.timeline-prototype.is-transitioning {
  overflow: hidden;
}

.timeline-shell {
  position: relative;
  min-height: 100vh;
  color: var(--intro-white);
  background: var(--intro-black);
  isolation: isolate;
  --glass-progress: 0;
  --edge-progress: 0;
}

.timeline-track {
  display: flex;
  width: 200vw;
  min-height: 100vh;
  transform: translate3d(0, 0, 0);
  transition: transform 980ms var(--intro-ease);
  will-change: transform;
}

.timeline-shell[data-scene="future"] .timeline-track {
  transform: translate3d(-100vw, 0, 0);
}

.timeline-panel {
  position: relative;
  flex: 0 0 100vw;
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;
}

.timeline-panel--past {
  background: var(--intro-white);
}

.past-composite {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
  background: var(--intro-white);
}

.past-site-frame {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  min-height: 100vh;
  height: 100vh;
  border: 0;
  background: var(--intro-white);
}

.past-glass-layer {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform: translateZ(0);
}

.past-glass-layer span {
  position: relative;
  flex: 0 0 calc(100% / 24);
  height: 100%;
  background: rgba(255, 255, 255, calc(var(--glass-progress) * 0.055));
  border-left: 1px solid rgba(255, 255, 255, calc(var(--glass-progress) * 0.58));
  border-right: 1px solid rgba(0, 0, 0, calc(var(--glass-progress) * 0.08));
  box-shadow:
    9px 0 22px rgba(0, 0, 0, calc(var(--glass-progress) * 0.14)),
    inset 10px 0 24px rgba(255, 255, 255, calc(var(--glass-progress) * 0.11)),
    inset -12px 0 28px rgba(0, 0, 0, calc(var(--glass-progress) * 0.035));
  backdrop-filter:
    blur(calc(var(--glass-progress) * 18px))
    contrast(calc(1 - (var(--glass-progress) * 0.16)))
    saturate(calc(1 - (var(--glass-progress) * 0.32)));
  -webkit-backdrop-filter:
    blur(calc(var(--glass-progress) * 18px))
    contrast(calc(1 - (var(--glass-progress) * 0.16)))
    saturate(calc(1 - (var(--glass-progress) * 0.32)));
}

.past-glass-layer span:nth-child(2n) {
  background: rgba(255, 255, 255, calc(var(--glass-progress) * 0.02));
  box-shadow:
    7px 0 18px rgba(0, 0, 0, calc(var(--glass-progress) * 0.11)),
    inset 8px 0 22px rgba(255, 255, 255, calc(var(--glass-progress) * 0.07)),
    inset -10px 0 24px rgba(0, 0, 0, calc(var(--glass-progress) * 0.025));
}

.past-glass-layer span:nth-child(3n) {
  background: rgba(255, 255, 255, calc(var(--glass-progress) * 0.085));
}

.future-edge-signal {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 30;
  width: 118px;
  height: 100%;
  overflow: visible;
  opacity: var(--edge-progress);
  pointer-events: none;
  background: transparent;
}

.future-edge-signal span {
  position: absolute;
  right: -40px;
  display: block;
  width: var(--edge-size);
  height: var(--edge-size);
  border-radius: 50%;
  background: #030303;
  opacity: calc(var(--edge-progress) * var(--edge-alpha));
  filter: blur(var(--edge-blur));
  transform: scale(calc(0.66 + (var(--edge-progress) * 0.2)));
  transform-origin: 72% 50%;
  animation: futureEdgeOrbPulse var(--edge-speed) cubic-bezier(0.68, 0, 0.22, 1) infinite;
}

.future-edge-signal span:nth-child(1) {
  --edge-size: 86px;
  --edge-alpha: 0.74;
  --edge-blur: 1px;
  --edge-speed: 1280ms;
  top: -32px;
  right: -44px;
}

.future-edge-signal span:nth-child(2) {
  --edge-size: 132px;
  --edge-alpha: 0.82;
  --edge-blur: 0px;
  --edge-speed: 1390ms;
  top: 46px;
  right: -70px;
  animation-delay: -190ms;
}

.future-edge-signal span:nth-child(3) {
  --edge-size: 108px;
  --edge-alpha: 0.72;
  --edge-blur: 2px;
  --edge-speed: 1210ms;
  top: 154px;
  right: -58px;
  animation-delay: -410ms;
}

.future-edge-signal span:nth-child(4) {
  --edge-size: 154px;
  --edge-alpha: 0.88;
  --edge-blur: 1px;
  --edge-speed: 1460ms;
  top: 245px;
  right: -82px;
  animation-delay: -120ms;
}

.future-edge-signal span:nth-child(5) {
  --edge-size: 96px;
  --edge-alpha: 0.66;
  --edge-blur: 2px;
  --edge-speed: 1330ms;
  top: 368px;
  right: -48px;
  animation-delay: -520ms;
}

.future-edge-signal span:nth-child(6) {
  --edge-size: 138px;
  --edge-alpha: 0.82;
  --edge-blur: 1px;
  --edge-speed: 1260ms;
  top: 438px;
  right: -72px;
  animation-delay: -290ms;
}

.future-edge-signal span:nth-child(7) {
  --edge-size: 118px;
  --edge-alpha: 0.72;
  --edge-blur: 2px;
  --edge-speed: 1510ms;
  top: 548px;
  right: -62px;
  animation-delay: -90ms;
}

.future-edge-signal span:nth-child(8) {
  --edge-size: 92px;
  --edge-alpha: 0.68;
  --edge-blur: 1px;
  --edge-speed: 1180ms;
  top: 646px;
  right: -48px;
  animation-delay: -360ms;
}

.future-edge-signal span:nth-child(9) {
  --edge-size: 128px;
  --edge-alpha: 0.76;
  --edge-blur: 2px;
  --edge-speed: 1420ms;
  top: 704px;
  right: -72px;
  animation-delay: -240ms;
}

.future-edge-signal span:nth-child(10) {
  --edge-size: 74px;
  --edge-alpha: 0.58;
  --edge-blur: 3px;
  --edge-speed: 1640ms;
  top: 318px;
  right: -36px;
  animation-delay: -760ms;
}

.intro-stage {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: transparent;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.timeline-shell[data-scene="wipe"] .intro-stage,
.timeline-shell[data-scene="statement"] .intro-stage,
.timeline-shell[data-scene="question"] .intro-stage {
  opacity: 1;
  visibility: visible;
}

.intro-stage__wash {
  position: absolute;
  inset: 0;
  background: rgba(3, 3, 3, 0);
  transition: background 780ms var(--intro-ease);
}

.timeline-shell[data-scene="statement"] .intro-stage__wash,
.timeline-shell[data-scene="question"] .intro-stage__wash {
  background: rgba(3, 3, 3, 0.84);
}

.intro-stage__stripes {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  transform: translate3d(102%, 0, 0);
  transition: transform 1020ms var(--intro-ease);
  will-change: transform;
}

.timeline-shell[data-scene="wipe"] .intro-stage__stripes,
.timeline-shell[data-scene="statement"] .intro-stage__stripes,
.timeline-shell[data-scene="question"] .intro-stage__stripes {
  transform: translate3d(0, 0, 0);
}

.intro-stage__stripes span {
  display: block;
  min-height: 100vh;
  background: rgba(3, 3, 3, 0.88);
  transform: translate3d(0, 0, 0);
}

.intro-stage__stripes span:nth-child(2n) {
  background: rgba(3, 3, 3, 0.7);
}

.intro-stage__stripes span:nth-child(3n) {
  background: rgba(3, 3, 3, 0.94);
}

.intro-stage__past-copy,
.intro-stage__question {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  color: var(--intro-white);
  font-family: var(--intro-ui);
  letter-spacing: 0;
  text-align: center;
  transform: translate(-50%, -44%);
  opacity: 0;
  transition: opacity 420ms ease, transform 620ms var(--intro-ease);
}

.intro-stage__past-copy {
  width: min(760px, calc(100vw - 32px));
  font-size: clamp(42px, 7.2vw, 104px);
  font-weight: 760;
  line-height: 0.92;
}

.timeline-shell[data-scene="statement"] .intro-stage__past-copy {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.intro-stage__question {
  display: grid;
  place-items: center;
  gap: clamp(30px, 6vw, 72px);
  width: min(720px, calc(100vw - 32px));
}

.intro-stage__question span {
  display: block;
  font-size: clamp(54px, 10vw, 150px);
  font-weight: 760;
  line-height: 0.9;
}

.timeline-shell[data-scene="question"] .intro-stage__question {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.intro-stage__plus {
  position: relative;
  width: clamp(66px, 8vw, 106px);
  aspect-ratio: 1;
  border: 1px solid var(--intro-line);
  border-radius: 50%;
  background: transparent;
  color: var(--intro-white);
}

.intro-stage__plus::before,
.intro-stage__plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38%;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.intro-stage__plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.future-footer button,
.future-footer a,
.future-temporal-nav button,
.future-temporal-nav a {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--intro-ui);
  font-size: 14px;
  font-weight: 720;
  line-height: 1;
  text-decoration: none;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease, opacity 180ms ease;
}

.future-footer button:hover,
.future-footer a:hover,
.future-temporal-nav button:hover,
.future-temporal-nav a:hover {
  transform: translateY(-1px);
}

.future-site {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  color: var(--intro-white);
  background: var(--intro-black);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --future-scale: 1;
}

.future-topbar {
  position: absolute;
  z-index: 4;
  inset: 0 0 auto;
  height: 64px;
}

.future-brand,
.future-temporal-nav a,
.future-temporal-nav button,
.future-footer a,
.future-footer button {
  color: var(--intro-white);
}

.future-brand {
  position: absolute;
  left: 24px;
  top: 20px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  line-height: normal;
  text-decoration: none;
}

.future-brand,
.future-temporal-nav,
.future-today,
.future-footer,
.future-control {
  opacity: 0;
  transition: opacity 680ms ease;
}

.timeline-shell[data-narrative="complete"] .future-brand,
.timeline-shell[data-narrative="complete"] .future-temporal-nav,
.timeline-shell[data-narrative="complete"] .future-today,
.timeline-shell[data-narrative="complete"] .future-footer,
.timeline-shell[data-narrative="complete"] .future-control {
  opacity: 1;
}

.future-temporal-nav {
  position: absolute;
  right: 40px;
  top: 23px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--intro-muted);
  font-size: 13px;
}

.future-temporal-nav button,
.future-temporal-nav a {
  min-height: 17px;
  padding: 0;
  color: #8d8d8d;
  background: transparent;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 17px;
  opacity: 1;
}

.future-hero {
  position: absolute;
  inset: 0;
}

.future-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.future-today {
  position: absolute;
  left: 570px;
  top: 30px;
  margin: 0;
  color: var(--intro-white);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.28px;
  line-height: normal;
}

.future-mark {
  position: absolute;
  left: 40px;
  top: 360px;
  width: 51.47px;
  height: 48px;
}

.future-control {
  position: absolute;
  display: block;
  padding: 0;
  min-height: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.future-control--pause {
  left: 475px;
  top: 376px;
  width: 16px;
  height: 16px;
}

.future-control--volume {
  left: 507px;
  top: 374px;
  width: 20px;
  height: 20px;
}

.future-control img {
  display: block;
  width: 100%;
  height: 100%;
}

.future-statement {
  position: absolute;
  left: 570px;
  top: 370px;
  width: 650px;
  color: var(--intro-white);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.48px;
  white-space: normal;
  opacity: 0;
  --history-progress: 0;
  transition: opacity 260ms ease;
}

.timeline-shell[data-narrative="typing"] .future-statement,
.timeline-shell[data-narrative="complete"] .future-statement {
  opacity: 1;
}

.future-statement span {
  display: inline;
}

.future-statement__text {
  position: relative;
  z-index: 2;
  display: inline;
  white-space: pre-line;
  transition: opacity 260ms ease;
}

.future-statement__ghost {
  display: none !important;
}

.future-statement.is-reviewing .future-statement__text {
  opacity: 1;
}

.future-statement.is-history-changing .future-statement__text {
  animation: historyTextSwap 320ms ease;
}

.future-caret {
  position: absolute;
  left: var(--caret-x, 0px);
  top: var(--caret-y, 0px);
  z-index: 3;
  display: block !important;
  width: 1px;
  height: 1.1em;
  margin-left: 3px;
  background: currentColor;
  animation: caretBlink 1180ms ease-in-out infinite;
  opacity: 0;
  transition:
    left 16ms linear,
    top 16ms linear,
    opacity 180ms ease;
}

.timeline-shell[data-narrative="typing"] .future-caret,
.timeline-shell[data-narrative="complete"] .future-caret {
  opacity: 1;
}

.future-footer {
  position: absolute;
  z-index: 4;
  left: clamp(24px, 2.7778vw, 40px);
  right: clamp(24px, 2.7778vw, 40px);
  bottom: clamp(72px, 17vw, 153px);
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  align-items: end;
  gap: clamp(28px, 3vw, 48px);
  pointer-events: none;
}

.future-footer button,
.future-footer a {
  min-height: 17px;
  padding: 0;
  color: #8d8d8d;
  background: transparent;
  border: 0;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 17px;
  pointer-events: auto;
}

.future-footer button {
  justify-self: start;
}

.future-footer a {
  justify-self: end;
  color: var(--intro-white);
}

.future-timeline {
  position: relative;
  width: 100%;
  height: 24px;
  pointer-events: none;
}

.future-timeline::before,
.future-timeline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.future-timeline::before {
  height: 20px;
  background: repeating-linear-gradient(90deg, transparent 0 5px, #3a3a3a 5px 6px);
}

.future-timeline::after {
  height: 24px;
  background:
    repeating-linear-gradient(90deg, transparent 0 179px, #5d5d5d 179px 180px, transparent 180px 185px, #5d5d5d 185px 186px),
    repeating-linear-gradient(90deg, transparent 0 71px, #755b11 71px 72px, transparent 72px 77px, #755b11 77px 78px);
}

.future-timeline span {
  display: none;
}

@media (min-width: 761px) {
  .future-canvas {
    inset: auto;
    left: 50%;
    top: 50%;
    width: 1440px;
    height: 900px;
    transform: translate(-50%, -50%) scale(var(--future-scale));
    transform-origin: center center;
  }
}

@keyframes caretBlink {
  0%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

@keyframes historyTextSwap {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes historyMemoryIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes futureEdgeOrbPulse {
  0%,
  100% {
    transform: scale(calc(0.66 + (var(--edge-progress) * 0.2)));
  }

  12% {
    transform: scale(calc(0.77 + (var(--edge-progress) * 0.32)));
  }

  22% {
    transform: scale(calc(0.7 + (var(--edge-progress) * 0.22)));
  }

  42% {
    transform: scale(calc(0.82 + (var(--edge-progress) * 0.38)));
  }

  64% {
    transform: scale(calc(0.68 + (var(--edge-progress) * 0.24)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .timeline-track,
  .intro-stage,
  .intro-stage__wash,
  .intro-stage__stripes,
  .intro-stage__past-copy,
  .intro-stage__question,
  .future-caret,
  .future-statement__ghost,
  .future-statement__text,
  .future-edge-signal span {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

@media (max-width: 760px) {
  .future-topbar {
    min-height: 66px;
  }

  .future-today {
    left: 24px;
    top: 118px;
  }

  .future-mark {
    left: 24px;
    top: 64px;
    width: 46px;
    height: 43px;
  }

  .future-control--pause {
    left: 24px;
    top: 132px;
  }

  .future-control--volume {
    left: 56px;
    top: 130px;
  }

  .future-statement {
    left: 96px;
    top: 128px;
    width: calc(100vw - 120px);
    font-size: 22px;
    line-height: 1.28;
    letter-spacing: -0.38px;
  }

  .future-statement__ghost {
    width: calc(100vw - 120px);
    bottom: calc(100% + 14px);
  }

  .future-brand {
    left: 24px;
    top: 24px;
  }

  .future-temporal-nav {
    right: 24px;
    top: 27px;
  }

  .future-footer a {
    justify-self: end;
  }

  .future-footer {
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    left: 24px;
    right: 24px;
    bottom: 48px;
  }

  .future-timeline {
    width: min(132px, 34vw);
    gap: 5px;
    justify-self: center;
  }
}

@media (max-width: 560px) {
  .intro-stage__stripes {
    grid-template-columns: repeat(10, 1fr);
  }

  .intro-stage__stripes span:nth-child(n + 11) {
    display: none;
  }

  .intro-stage__past-copy {
    font-size: clamp(40px, 14vw, 64px);
  }
}