src/time_machine/ui/assets/intro.css

:root {
  --tte-cream: #f5e6c8;
  --tte-brass: #c4943d;
  --tte-amber: #d4a843;
  --tte-copper: #b87333;
  --tte-cyan: #8ed8d1;
  --tte-burgundy: #6b2d3e;
  --tte-dark: #1a0f08;
  --tte-darker: #080403;
  --tte-heading: Georgia, "Times New Roman", serif;
  --tte-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tte-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.tm-intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  background: #080403;
  color: var(--tte-cream);
  font-family: var(--tte-body);
  letter-spacing: 0;
  isolation: isolate;
}

.tm-intro::before,
.tm-intro::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tm-intro::before {
  z-index: 2;
  background:
    radial-gradient(ellipse at 50% 52%, transparent 0 42%, rgba(4, 2, 1, 0.72) 78%, rgba(4, 2, 1, 0.98) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.62), transparent 20%, transparent 68%, rgba(0, 0, 0, 0.78));
}

.tm-intro::after {
  z-index: 4;
  opacity: 0.17;
  background-image:
    linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 4px 4px;
  mix-blend-mode: overlay;
}

.tm-intro__sky {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 226, 146, 0.36), transparent 18%),
    radial-gradient(circle at 22% 30%, rgba(184, 115, 51, 0.18), transparent 18%),
    radial-gradient(circle at 78% 34%, rgba(142, 216, 209, 0.16), transparent 17%);
  filter: blur(12px);
  animation: tm-intro-sky 11.8s ease-in-out forwards;
}

.tm-intro__rails {
  position: absolute;
  left: 50%;
  bottom: -4%;
  z-index: 1;
  width: min(900px, 120vw);
  height: 48vh;
  transform: translateX(-50%);
  background:
    linear-gradient(72deg, transparent 0 43%, rgba(196, 148, 61, 0.58) 43.4% 44%, transparent 44.4%),
    linear-gradient(108deg, transparent 0 56%, rgba(196, 148, 61, 0.58) 56.4% 57%, transparent 57.4%),
    repeating-linear-gradient(0deg, transparent 0 36px, rgba(245, 230, 200, 0.16) 37px 40px, transparent 41px 74px);
  clip-path: polygon(32% 100%, 68% 100%, 54% 0, 46% 0);
  opacity: 0.45;
  transform-origin: 50% 100%;
  animation: tm-intro-rails 11.8s cubic-bezier(0.16, 0.72, 0.12, 1) forwards;
}

.tm-intro__scene {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  perspective: 1200px;
}

.tm-intro__ticket,
.tm-intro__box,
.tm-intro__energy,
.tm-intro__sparks,
.tm-intro__train {
  position: absolute;
  max-width: min(78vw, 860px);
  max-height: 74vh;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.tm-intro__ticket {
  width: min(520px, 68vw);
  filter: drop-shadow(0 0 34px rgba(212, 168, 67, 0.5));
  transform-origin: 50% 50%;
  animation: tm-ticket 11.8s cubic-bezier(0.19, 0.8, 0.2, 1) forwards;
}

.tm-intro__box {
  width: min(470px, 60vw);
  opacity: 0;
  transform: translate3d(0, 10vh, -80px) scale(0.75);
  filter: drop-shadow(0 30px 48px rgba(0, 0, 0, 0.58));
  animation: tm-box 11.8s cubic-bezier(0.18, 0.75, 0.18, 1) forwards;
}

.tm-intro__energy {
  width: min(980px, 118vw);
  opacity: 0;
  mix-blend-mode: screen;
  filter: saturate(1.25) brightness(1.15);
  animation: tm-energy 11.8s ease forwards;
}

.tm-intro__sparks {
  width: min(1080px, 130vw);
  opacity: 0;
  mix-blend-mode: screen;
  animation: tm-sparks 11.8s ease forwards;
}

.tm-intro__train {
  width: min(880px, 96vw);
  opacity: 0;
  transform: translate3d(0, 8vh, -220px) scale(0.58);
  filter: drop-shadow(0 44px 80px rgba(0, 0, 0, 0.68));
  animation: tm-train-arrival 11.8s cubic-bezier(0.14, 0.78, 0.18, 1) forwards;
}

.tm-intro__shockwave {
  position: absolute;
  width: 12vmin;
  aspect-ratio: 1;
  border: 3px solid rgba(245, 230, 200, 0.8);
  border-radius: 50%;
  opacity: 0;
  box-shadow:
    0 0 40px rgba(212, 168, 67, 0.74),
    inset 0 0 40px rgba(142, 216, 209, 0.4);
  animation: tm-shockwave 11.8s ease forwards;
}

.tm-intro__steam {
  position: absolute;
  bottom: -8%;
  z-index: 3;
  width: 50vw;
  height: 46vh;
  opacity: 0;
  background:
    radial-gradient(ellipse at 50% 70%, rgba(255, 246, 223, 0.72), transparent 56%),
    radial-gradient(ellipse at 24% 62%, rgba(245, 230, 200, 0.36), transparent 42%);
  filter: blur(22px);
  animation: tm-steam-rise 11.8s ease forwards;
}

.tm-intro__steam--left {
  left: -12%;
}

.tm-intro__steam--right {
  right: -12%;
  transform: scaleX(-1);
}

.tm-intro__copy {
  position: absolute;
  left: 50%;
  top: clamp(30px, 8vh, 82px);
  z-index: 6;
  width: min(780px, calc(100vw - 40px));
  transform: translateX(-50%);
  text-align: center;
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.72);
  animation: tm-copy-drift 11.8s ease forwards;
}

.tm-intro__eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--tte-cyan);
  font: 800 12px/1 var(--tte-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.tm-intro__copy h1 {
  margin: 0;
  color: var(--tte-cream);
  font-family: var(--tte-heading);
  font-size: clamp(38px, 7vw, 92px);
  line-height: 0.95;
  font-weight: 700;
}

.tm-intro__copy p {
  margin: 12px auto 0;
  max-width: 520px;
  color: rgba(245, 230, 200, 0.76);
  font-size: clamp(15px, 2vw, 20px);
  line-height: 1.35;
}

.tm-intro__chapters {
  position: absolute;
  left: clamp(18px, 5vw, 72px);
  bottom: clamp(22px, 7vh, 64px);
  z-index: 6;
  display: grid;
  gap: 8px;
  color: rgba(245, 230, 200, 0.62);
  font: 800 10px/1.3 var(--tte-mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.tm-intro__chapters span {
  opacity: 0;
  transform: translateX(-12px);
  animation: tm-chapter 11.8s ease forwards;
}

.tm-intro__chapters span:nth-child(2) { animation-delay: 2.9s; }
.tm-intro__chapters span:nth-child(3) { animation-delay: 5.6s; }
.tm-intro__chapters span:nth-child(4) { animation-delay: 9.2s; }

.tm-intro__flash {
  position: absolute;
  inset: 0;
  z-index: 8;
  opacity: 0;
  background: #fff4dc;
  pointer-events: none;
  animation: tm-final-flash 11.8s ease forwards;
}

.tm-skip-intro {
  position: absolute;
  right: clamp(16px, 4vw, 42px);
  bottom: clamp(18px, 4vw, 38px);
  z-index: 9;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(245, 230, 200, 0.34);
  border-radius: 50%;
  background: rgba(26, 15, 8, 0.66);
  color: rgba(245, 230, 200, 0.82);
  font: 800 9px/1 var(--tte-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  cursor: pointer;
  box-shadow: inset 0 0 18px rgba(212, 168, 67, 0.12), 0 10px 24px rgba(0, 0, 0, 0.35);
  transition: opacity 500ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.tm-skip-intro[data-visible="true"] {
  opacity: 1;
}

.tm-skip-intro:hover,
.tm-skip-intro:focus-visible {
  border-color: rgba(142, 216, 209, 0.72);
  color: #ffffff;
  outline: none;
  transform: translateY(-1px);
}

.tm-intro[data-intro-state="complete"] {
  pointer-events: none;
  animation: tm-complete-fade 1800ms ease-in-out forwards;
}

@keyframes tm-intro-sky {
  0% { transform: scale(1); filter: blur(20px); opacity: 0.65; }
  50% { opacity: 1; }
  100% { transform: scale(1.18); filter: blur(8px); opacity: 1; }
}

@keyframes tm-intro-rails {
  0%, 45% { opacity: 0; transform: translateX(-50%) scaleY(0.7); }
  60%, 100% { opacity: 0.55; transform: translateX(-50%) scaleY(1.12); }
}

@keyframes tm-ticket {
  0% { opacity: 0; transform: translate3d(0, 3vh, -180px) rotateX(38deg) rotateZ(-8deg) scale(0.58); }
  8%, 24% { opacity: 1; transform: translate3d(0, 0, 40px) rotateX(0) rotateZ(3deg) scale(1); }
  34% { opacity: 1; transform: translate3d(0, 3vh, 0) rotateX(22deg) rotateZ(-5deg) scale(0.78); }
  43% { opacity: 0; transform: translate3d(0, 8vh, -60px) rotateX(48deg) rotateZ(-9deg) scale(0.42); }
  100% { opacity: 0; transform: translate3d(0, 8vh, -60px) rotateX(48deg) rotateZ(-9deg) scale(0.42); }
}

@keyframes tm-box {
  0%, 18% { opacity: 0; transform: translate3d(0, 12vh, -160px) scale(0.62); }
  27%, 46% { opacity: 1; transform: translate3d(0, 8vh, 0) scale(0.86); }
  50% { filter: brightness(1.9) drop-shadow(0 0 50px rgba(212, 168, 67, 0.76)); }
  58%, 100% { opacity: 0; transform: translate3d(0, 10vh, -120px) scale(0.54); }
}

@keyframes tm-energy {
  0%, 40% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  50% { opacity: 0.9; transform: scale(0.95) rotate(24deg); }
  70% { opacity: 0.55; transform: scale(1.22) rotate(90deg); }
  100% { opacity: 0; transform: scale(1.42) rotate(150deg); }
}

@keyframes tm-sparks {
  0%, 43% { opacity: 0; transform: scale(0.8); }
  52%, 78% { opacity: 0.92; transform: scale(1.04); }
  100% { opacity: 0; transform: scale(1.2); }
}

@keyframes tm-shockwave {
  0%, 47% { opacity: 0; transform: scale(0.2); }
  50% { opacity: 1; transform: scale(1); }
  64% { opacity: 0; transform: scale(9); }
  100% { opacity: 0; transform: scale(9); }
}

@keyframes tm-train-arrival {
  0%, 48% { opacity: 0; transform: translate3d(0, 8vh, -220px) scale(0.58); filter: blur(8px) brightness(1.45); }
  59% { opacity: 0.92; transform: translate3d(0, 2vh, -40px) scale(0.86); filter: blur(1px) brightness(1.15); }
  78%, 91% { opacity: 1; transform: translate3d(0, 0, 0) scale(1.02); filter: blur(0) brightness(1); }
  100% { opacity: 0; transform: translate3d(0, -2vh, 120px) scale(1.2); filter: blur(3px) brightness(1.4); }
}

@keyframes tm-steam-rise {
  0%, 54% { opacity: 0; transform: translateY(12vh) scale(0.7); }
  66%, 88% { opacity: 0.72; }
  100% { opacity: 0; transform: translateY(-18vh) scale(1.28); }
}

@keyframes tm-copy-drift {
  0%, 24% { opacity: 1; transform: translateX(-50%) translateY(0); }
  40%, 65% { opacity: 0.58; transform: translateX(-50%) translateY(-10px); }
  77%, 100% { opacity: 0; transform: translateX(-50%) translateY(-24px); }
}

@keyframes tm-chapter {
  0%, 8% { opacity: 0; transform: translateX(-12px); }
  18%, 46% { opacity: 1; transform: translateX(0); }
  56%, 100% { opacity: 0.32; transform: translateX(0); }
}

@keyframes tm-final-flash {
  0%, 88% { opacity: 0; }
  93% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes tm-complete-fade {
  to { opacity: 0; }
}

.tm-intro__sky,
.tm-intro__rails,
.tm-intro__scene,
.tm-intro__copy,
.tm-intro__chapters,
.tm-intro__flash,
.tm-skip-intro {
  display: none !important;
}

@media (max-width: 720px) {
  .tm-intro__copy {
    top: 7vh;
  }

  .tm-intro__ticket {
    width: min(420px, 82vw);
  }

  .tm-intro__box {
    width: min(390px, 78vw);
  }

  .tm-intro__train {
    width: 112vw;
  }

  .tm-intro__chapters {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tm-intro *,
  .tm-intro *::before,
  .tm-intro *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }

  .tm-skip-intro {
    opacity: 1;
  }
}