:root {
      --bg:         #000000;
      --line:       #f4f1ea;
      --line-soft:  rgba(244, 241, 234, 0.32);
      --line-faint: rgba(244, 241, 234, 0.18);
      --accent:     #b89b30;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html, body {
      height: 100%;
      width: 100%;
      background: var(--bg);
      overflow: hidden;
    }

    body {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      perspective: 1600px;
      perspective-origin: 50% 50%;
    }

    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background: radial-gradient(ellipse at center,
        rgba(20, 18, 12, 0)    0%,
        rgba(0, 0, 0, 0.40)   55%,
        rgba(0, 0, 0, 0.85)  100%);
      pointer-events: none;
      z-index: 2;
    }

    body::after {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 3;
      opacity: 0.05;
      mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
    }

    .canvas {
      position: relative;
      z-index: 4;
      width: clamp(300px, 50vw, 410px);
      perspective: 1600px;
      perspective-origin: 50% 50%;
      transform-style: preserve-3d;
    }

    .stage {
      position: relative;
      width: 100%;
      aspect-ratio: 6 / 5;
      display: flex;
      align-items: center;
      justify-content: center;
      transform-style: preserve-3d;
      animation:
        floatIn 2s 0.2s cubic-bezier(.2,.8,.2,1) backwards,
        breathe 9s 4s ease-in-out infinite;
    }

    .engine {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
      filter: drop-shadow(0 0 28px rgba(184, 155, 48, 0.06));
      will-change: transform, filter;
    }

    /* Voltage pulse — engine subtly breathes brightness, like current flowing through it.
       Synchronized with the heartbeat dot rhythm. Starts after drawing finishes. */
    .stage.live .engine {
      animation: voltagePulse 5s 0.5s ease-in-out infinite;
    }
    @keyframes voltagePulse {
      0%, 100% {
        filter:
          drop-shadow(0 0 28px rgba(184, 155, 48, 0.06))
          brightness(1);
      }
      50% {
        filter:
          drop-shadow(0 0 36px rgba(184, 155, 48, 0.18))
          brightness(1.18);
      }
    }

    @keyframes floatIn {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes breathe {
      0%, 100% { transform: scale(1); }
      50%      { transform: scale(1.008); }
    }

    .engine path,
    .engine line,
    .engine circle,
    .engine ellipse,
    .engine rect,
    .engine polyline,
    .engine polygon {
      fill: none;
      stroke: var(--line);
      stroke-width: 0.85;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }

    .engine .heavy { stroke-width: 1.4; }
    .engine .soft  { stroke: var(--line-soft);  stroke-width: 0.7; }
    .engine .faint { stroke: var(--line-faint); stroke-width: 0.6; }
    .engine .dash  { stroke-dasharray: 2 5; }

    .engine .accent     { stroke: var(--accent); stroke-width: 1.2; }
    .engine .accent-dot { fill: var(--accent);   stroke: none; }

    /* Belt with dashed strokes that travel along the path — gives illusion of movement */
    .engine .belt-running {
      fill: none;
      stroke: var(--line);
      stroke-width: 1;
      stroke-dasharray: 6 8;
      stroke-dashoffset: 0;
      opacity: 0;
      animation:
        beltFadeIn 1s 7.3s ease forwards,
        beltRun 1.6s 7.8s linear infinite;
    }
    @keyframes beltFadeIn { to { opacity: 0.7; } }
    @keyframes beltRun { to { stroke-dashoffset: -28; } }

    /* Symmetric mirror-paired build — the engine grows as one balanced organism
       from the center outwards. Mirrored layers (L2+L8 turbos, L6+L9 boost pipes)
       draw simultaneously so the silhouette stays symmetric throughout.
       Per layer 3s draw, ~0.6s stagger between groups → ~7.3s total build. */
    .draw {
      stroke-dasharray: 2200;
      stroke-dashoffset: 2200;
      animation: draw 3s ease-out forwards;
    }
    .draw-l1  { animation-delay: 0.10s; }   /* far-side bank hints (background) */
    .draw-l2  { animation-delay: 0.70s; }   /* RIGHT turbo  ┐ paired */
    .draw-l8  { animation-delay: 0.70s; }   /* LEFT  turbo  ┘ */
    .draw-l3  { animation-delay: 1.30s; }   /* engine block + oil pan */
    .draw-l4  { animation-delay: 1.90s; }   /* valve cover */
    .draw-l5  { animation-delay: 2.50s; }   /* intake manifold + throttle body */
    .draw-l6  { animation-delay: 3.10s; }   /* RIGHT boost pipe ┐ paired */
    .draw-l9  { animation-delay: 3.10s; }   /* LEFT  boost pipe ┘ */
    .draw-l7  { animation-delay: 3.70s; }   /* front face / left perspective edge */
    .draw-l10 { animation-delay: 4.30s; }   /* central pulleys — the heart, last */

    @keyframes draw { to { stroke-dashoffset: 0; } }

    .spin {
      transform-origin: var(--cx) var(--cy);
      animation: spin 10s linear infinite;
      animation-delay: 7.8s;
      animation-play-state: paused;
    }
    .stage.live .spin { animation-play-state: running; }
    .spin.fast { animation-duration: 5s;  }
    .spin.slow { animation-duration: 14s; }
    .spin.rev  { animation-direction: reverse; }
    @keyframes spin { to { transform: rotate(360deg); } }

    .pulse-line { animation: pulseLine 4s 7.8s ease-in-out infinite; }
    @keyframes pulseLine {
      0%, 100% { opacity: 0.55; }
      50%      { opacity: 1; }
    }

    .pulse-dot {
      transform-box: fill-box;
      transform-origin: center;
      opacity: 0;
      animation:
        dotIn   1.2s 6.8s ease forwards,
        dotBeat 4s   7.8s ease-in-out infinite;
    }
    @keyframes dotIn   { to { opacity: 0.85; } }
    @keyframes dotBeat {
      0%, 100% { transform: scale(1);   opacity: 0.7; }
      50%      { transform: scale(1.6); opacity: 1; }
    }

    .marks { opacity: 0; animation: fade 1.5s 5.5s ease forwards; }
    @keyframes fade { to { opacity: 1; } }

    /* Tiny time-tick dots in the corners — one pulse per second, like a clock keeping time */
    .tick {
      fill: var(--line);
      stroke: none;
      opacity: 0;
      animation:
        tickFade 1.5s 6s ease forwards,
        tickBeat 1s 7.8s ease-in-out infinite;
    }
    @keyframes tickFade { to { opacity: 0.25; } }
    @keyframes tickBeat {
      0%, 80%, 100% { opacity: 0.20; }
      10%, 30%      { opacity: 0.85; }
    }

    /* Stamp */
    .stamp {
      position: relative;
      margin-top: 8px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      opacity: 0;
      animation: fade 1.5s 6.5s ease forwards;
      pointer-events: none;
    }
    .barcode { display: block; width: 50%; height: 18px; margin-bottom: 2px; }
    .barcode rect { fill: var(--line); opacity: 0.92; }

    .stamp-line {
      font-family: 'SF Mono', 'Menlo', 'Cascadia Code', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
      font-size: clamp(10px, 2.4vw, 11px);
      font-weight: 400;
      letter-spacing: 0.5px;
      color: var(--line);
      white-space: nowrap;
      line-height: 1.4;
      text-align: center;
    }
    .stamp-line .accent { color: var(--accent); }

    @media (prefers-reduced-motion: reduce) {
      .draw { animation: none; stroke-dashoffset: 0; }
      .spin, .pulse-line, .pulse-dot, .stage, .marks, .stamp, .tick {
        animation: none;
        opacity: 1;
      }
      .stage.live .engine { animation: none; }
    }