src/time_machine/ui/assets/intro.html

<section id="tm-intro" class="tm-intro" data-intro-state="ticket" aria-label="Trans-Temporal Express boarding">
  <div class="tm-intro__sky" aria-hidden="true"></div>
  <div class="tm-intro__rails" aria-hidden="true"></div>

  <div class="tm-intro__scene">
    <img
      class="tm-intro__ticket"
      src="/static/img/intro/temporal_ticket.png"
      alt=""
      decoding="async"
      data-sfx-at="ticket"
    />
    <img
      class="tm-intro__box"
      src="/static/img/intro/conductor_box.png"
      alt=""
      decoding="async"
      data-sfx-at="punch"
    />
    <img class="tm-intro__energy" src="/static/img/overlays/energy_lines.png" alt="" decoding="async" />
    <img class="tm-intro__sparks" src="/static/img/overlays/spark_particles.png" alt="" decoding="async" />
    <img
      class="tm-intro__train"
      src="/static/img/intro/train_materialization.png"
      alt=""
      decoding="async"
      data-sfx-at="arrival"
    />
    <div class="tm-intro__shockwave" aria-hidden="true"></div>
    <div class="tm-intro__steam tm-intro__steam--left" aria-hidden="true"></div>
    <div class="tm-intro__steam tm-intro__steam--right" aria-hidden="true"></div>
  </div>

  <div class="tm-intro__copy" aria-live="polite">
    <span class="tm-intro__eyebrow">Platform 00</span>
    <h1>The Trans-Temporal Express</h1>
    <p>Ticket accepted. Cab manifest forming.</p>
  </div>

  <div class="tm-intro__chapters" aria-hidden="true">
    <span>Ticket drawn</span>
    <span>Chrono punch engaged</span>
    <span>Locomotive inbound</span>
    <span>Boarding cab</span>
  </div>

  <div class="tm-intro__flash" aria-hidden="true"></div>
  <button id="tm-skip-intro" class="tm-skip-intro" type="button" aria-label="Skip intro">Skip</button>
</section>