<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Nintendo, 1889 — sprite animation</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=IBM+Plex+Mono:wght@400;500&family=Noto+Serif+JP:wght@500;700&family=Press+Start+2P&display=swap" rel="stylesheet" />
  <style>
    :root {
      --paper: #f5efe2;
      --paper-2: #ede4d0;
      --ink: #181612;
      --accent: #d92b1c;
      --muted: #6f6a60;
      --serif: 'DM Serif Display', 'Iowan Old Style', Georgia, serif;
      --jp: 'Noto Serif JP', serif;
      --mono: 'IBM Plex Mono', ui-monospace, monospace;
      --pixel: 'Press Start 2P', monospace;
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; }
    body {
      min-height: 100vh;
      background: #1a1816;
      color: var(--ink);
      font: 14px/1.5 -apple-system, system-ui, sans-serif;
      display: flex; align-items: center; justify-content: center;
      padding: 24px;
    }

    .stage {
      width: min(1280px, 100%);
      aspect-ratio: 16 / 9;
      position: relative;
      overflow: hidden;
      background: var(--paper);
      background-image:
        radial-gradient(rgba(120,90,40,0.06) 1px, transparent 1px),
        radial-gradient(rgba(120,90,40,0.04) 1px, transparent 1px);
      background-size: 4px 4px, 7px 7px;
      background-position: 0 0, 2px 3px;
      box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.05);
      border-radius: 4px;
    }
    .stage::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(0,0,0,0.04) 0%, transparent 8%, transparent 92%, rgba(0,0,0,0.05) 100%);
      pointer-events: none;
    }

    /* top bar */
    .topbar { position: absolute; top: 0; left: 0; right: 0; padding: 22px 32px; display: flex; justify-content: space-between; align-items: center; font: 11px/1 var(--mono); color: var(--muted); letter-spacing: 0.18em; text-transform: uppercase; }
    .topbar .slug { display: inline-flex; align-items: center; gap: 10px; }
    .topbar .slug .jp { font-family: var(--jp); font-weight: 700; color: var(--ink); letter-spacing: 0.05em; text-transform: none; font-size: 13px; }
    .topbar .slug .en { color: var(--muted); }
    .topbar .progress { display: inline-flex; align-items: center; gap: 12px; }
    .topbar .progress .dots { display: inline-flex; gap: 4px; }
    .topbar .progress .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); display: inline-block; opacity: 0.18; }
    .topbar .progress .dots i.on { opacity: 1; }
    .topbar .rec { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--ink); color: var(--ink); }
    .topbar .rec::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: blink 1.2s steps(2) infinite; }
    @keyframes blink { 50% { opacity: 0.2; } }

    /* big year */
    .year { position: absolute; left: 6%; bottom: 14%; font: 700 200px/0.85 var(--serif); color: var(--ink); letter-spacing: -0.03em; }
    .year .num { display: inline-block; position: relative; }
    .year .num .glitch {
      position: absolute; left: 0; top: 0; color: var(--accent);
      clip-path: inset(0 0 70% 0);
      animation: glitch 4s steps(8) infinite;
      mix-blend-mode: multiply;
    }
    @keyframes glitch {
      0%, 88%, 100% { clip-path: inset(0 0 100% 0); transform: translate(0,0); opacity: 0; }
      89% { clip-path: inset(20% 0 60% 0); transform: translate(2px, -1px); opacity: 0.7; }
      91% { clip-path: inset(60% 0 20% 0); transform: translate(-2px, 1px); opacity: 0.7; }
      94% { clip-path: inset(40% 0 40% 0); transform: translate(1px, 0); opacity: 0.6; }
      97% { clip-path: inset(0 0 100% 0); transform: translate(0,0); opacity: 0; }
    }
    .year .jp-suffix { font-family: var(--jp); font-weight: 700; font-size: 0.6em; vertical-align: 0.16em; margin-left: 0.04em; }

    .year-label { position: absolute; left: 6%; bottom: calc(14% + 200px + 12px); font: 11px/1.2 var(--mono); letter-spacing: 0.22em; color: var(--muted); text-transform: uppercase; }
    .year-label::before { content: ''; display: inline-block; width: 24px; height: 1px; background: var(--ink); vertical-align: middle; margin-right: 10px; opacity: 0.5; }

    /* sprite card */
    .sprite-stack {
      position: absolute; right: 12%; top: 22%;
      display: flex; flex-direction: column; align-items: center; gap: 22px;
      animation: bob 2.4s ease-in-out infinite;
    }
    @keyframes bob {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }
    .sprite-card {
      width: 168px; height: 252px;
      background: var(--paper-2);
      border: 4px solid var(--ink);
      border-radius: 10px;
      box-shadow: 8px 8px 0 var(--ink);
      position: relative;
      padding: 12px;
      display: flex; flex-direction: column; align-items: center;
      image-rendering: pixelated;
    }
    .sprite-card::before, .sprite-card::after {
      content: ''; position: absolute; left: 8px; right: 8px; height: 4px; background: var(--ink);
    }
    .sprite-card::before { top: 14px; }
    .sprite-card::after { bottom: 14px; }

    .sprite-card svg { display: block; image-rendering: pixelated; shape-rendering: crispEdges; margin-top: 18px; }

    .sprite-tag { font-family: var(--jp); font-weight: 700; font-size: 28px; color: var(--accent); margin-top: auto; line-height: 1; letter-spacing: 0.06em; }
    .sprite-tag small { display: block; font-family: var(--mono); font-weight: 500; font-size: 10px; color: var(--muted); letter-spacing: 0.18em; margin-top: 4px; text-transform: uppercase; }

    /* kinetic kana */
    .kana { position: absolute; right: 6%; top: 12%; font-family: var(--jp); font-weight: 700; font-size: 96px; color: var(--ink); line-height: 1; letter-spacing: 0; }
    .kana span { display: inline-block; opacity: 0; animation: kana-in 4s ease-in-out infinite; }
    .kana span:nth-child(1) { animation-delay: 0s; }
    .kana span:nth-child(2) { animation-delay: 0.4s; }
    @keyframes kana-in {
      0% { opacity: 0; transform: translateY(-12px); }
      18%, 78% { opacity: 1; transform: translateY(0); }
      100% { opacity: 0; transform: translateY(8px); }
    }

    /* caption block */
    .caption {
      position: absolute; left: 6%; right: 50%; bottom: 6%;
      font: 12px/1.5 var(--mono); color: var(--ink);
      letter-spacing: 0.04em;
      max-width: 32ch;
    }
    .caption strong { display: block; font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 18px; letter-spacing: -0.005em; margin-bottom: 6px; color: var(--ink); }

    /* tick ribbon */
    .ribbon {
      position: absolute; left: 0; right: 0; bottom: 0;
      height: 36px;
      background: var(--ink);
      color: var(--paper);
      overflow: hidden;
      display: flex; align-items: center;
    }
    .ribbon-track {
      display: inline-flex; gap: 64px;
      padding: 0 32px;
      animation: scroll-left 22s linear infinite;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .ribbon-track .tick { display: inline-flex; align-items: center; gap: 8px; font: 11px/1 var(--mono); letter-spacing: 0.22em; }
    .ribbon-track .tick .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
    .ribbon-track .tick .label { color: var(--paper); }
    .ribbon-track .tick .note { color: rgba(245,239,226,0.55); text-transform: uppercase; }
    @keyframes scroll-left {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    /* corner registration marks */
    .reg { position: absolute; width: 14px; height: 14px; border: 1px solid var(--ink); opacity: 0.35; }
    .reg.tl { top: 14px; left: 14px; border-right: none; border-bottom: none; }
    .reg.tr { top: 14px; right: 14px; border-left: none; border-bottom: none; }
    .reg.bl { bottom: 50px; left: 14px; border-right: none; border-top: none; }
    .reg.br { bottom: 50px; right: 14px; border-left: none; border-top: none; }

    @media (max-width: 900px) {
      .year { font-size: 120px; bottom: 18%; }
      .year-label { bottom: calc(18% + 120px + 8px); }
      .kana { font-size: 64px; }
      .sprite-stack { right: 8%; top: 26%; }
      .sprite-card { width: 124px; height: 184px; }
    }
  </style>
</head>
<body>
  <div class="stage" data-od-id="stage">

    <span class="reg tl"></span>
    <span class="reg tr"></span>
    <span class="reg bl"></span>
    <span class="reg br"></span>

    <div class="topbar" data-od-id="topbar">
      <div class="slug">
        <span class="jp">名次の番組</span>
        <span class="en">EP. 01 · NINTENDO TRIVIA</span>
      </div>
      <div class="progress">
        <span class="dots"><i class="on"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span>
        <span>01 / 12</span>
        <span class="rec">REC</span>
      </div>
    </div>

    <div class="kana" data-od-id="kana"><span>花</span><span>札</span></div>

    <div class="year-label" data-od-id="year-label">CHAPTER 01 · KYOTO · A PLAYING-CARD COMPANY</div>
    <div class="year" data-od-id="year">
      <span class="num">
        1889
        <span class="glitch" aria-hidden="true">1889</span>
      </span><span class="jp-suffix">年</span>
    </div>

    <div class="sprite-stack" data-od-id="sprite">
      <div class="sprite-card">
        <!-- Hanafuda card sprite — pixel-art flower -->
        <svg width="120" height="160" viewBox="0 0 24 32" xmlns="http://www.w3.org/2000/svg" aria-label="Hanafuda card">
          <!-- background -->
          <rect x="0" y="0" width="24" height="32" fill="#f5efe2"/>
          <!-- moon glow -->
          <rect x="3" y="2" width="18" height="10" fill="#1a1614"/>
          <!-- moon -->
          <rect x="14" y="4" width="5" height="5" fill="#f7c95b"/>
          <rect x="13" y="5" width="1" height="3" fill="#f7c95b"/>
          <rect x="19" y="5" width="1" height="3" fill="#f7c95b"/>
          <!-- petals (red) -->
          <rect x="9" y="14" width="6" height="2" fill="#d92b1c"/>
          <rect x="7" y="16" width="10" height="2" fill="#d92b1c"/>
          <rect x="6" y="18" width="12" height="2" fill="#d92b1c"/>
          <rect x="7" y="20" width="10" height="2" fill="#d92b1c"/>
          <rect x="9" y="22" width="6" height="2" fill="#d92b1c"/>
          <!-- petal highlights -->
          <rect x="10" y="15" width="2" height="1" fill="#ff6b5e"/>
          <rect x="8" y="17" width="2" height="1" fill="#ff6b5e"/>
          <rect x="14" y="19" width="2" height="1" fill="#ff6b5e"/>
          <!-- center -->
          <rect x="11" y="18" width="2" height="2" fill="#f7c95b"/>
          <!-- stem / leaves -->
          <rect x="11" y="24" width="2" height="6" fill="#3b6b3b"/>
          <rect x="8" y="26" width="3" height="2" fill="#3b6b3b"/>
          <rect x="13" y="27" width="3" height="2" fill="#3b6b3b"/>
        </svg>
        <div class="sprite-tag">花<small>HANA · FLOWER</small></div>
      </div>
    </div>

    <div class="caption" data-od-id="caption">
      <strong>Nintendo started as a hanafuda maker.</strong>
      Founded in Kyoto by Fusajiro Yamauchi to print hand-painted playing
      cards. Mario wouldn&rsquo;t show up for another <em>ninety-six</em> years.
    </div>

    <div class="ribbon" data-od-id="ribbon">
      <div class="ribbon-track">
        <div class="tick"><span class="dot"></span><span class="label">1889</span><span class="note">HANAFUDA · KYOTO</span></div>
        <div class="tick"><span class="dot"></span><span class="label">1907</span><span class="note">WESTERN CARDS</span></div>
        <div class="tick"><span class="dot"></span><span class="label">1949</span><span class="note">YAMAUCHI III</span></div>
        <div class="tick"><span class="dot"></span><span class="label">1977</span><span class="note">COLOR TV-GAME</span></div>
        <div class="tick"><span class="dot"></span><span class="label">1985</span><span class="note">SUPER MARIO BROS.</span></div>
        <div class="tick"><span class="dot"></span><span class="label">2006</span><span class="note">WII</span></div>
        <div class="tick"><span class="dot"></span><span class="label">2017</span><span class="note">SWITCH</span></div>

        <div class="tick"><span class="dot"></span><span class="label">1889</span><span class="note">HANAFUDA · KYOTO</span></div>
        <div class="tick"><span class="dot"></span><span class="label">1907</span><span class="note">WESTERN CARDS</span></div>
        <div class="tick"><span class="dot"></span><span class="label">1949</span><span class="note">YAMAUCHI III</span></div>
        <div class="tick"><span class="dot"></span><span class="label">1977</span><span class="note">COLOR TV-GAME</span></div>
        <div class="tick"><span class="dot"></span><span class="label">1985</span><span class="note">SUPER MARIO BROS.</span></div>
        <div class="tick"><span class="dot"></span><span class="label">2006</span><span class="note">WII</span></div>
        <div class="tick"><span class="dot"></span><span class="label">2017</span><span class="note">SWITCH</span></div>
      </div>
    </div>

  </div>
</body>
</html>
