/* BITR — arcade intro in front of the select screen (index.html).
   A grimy cabinet in a dark arcade, a push-in until its screen fills yours,
   the BITR title (a 90s cartoon logo in the spirit of TMNT, drawn fresh, in a
   sickly 90s yellow) and PRESS START. js/intro.js draws it all on a small
   canvas in a 32-colour palette; this file only scales it up in hard pixels.
   Shown by the inline script in index.html's <head>. */

.intro { display: none; }
.intro-on { overflow: hidden; }
/* Until the title dissolves, keep the page behind it hidden: on iPhones it would otherwise peek out
   under Safari's bottom toolbar, where only the page's own (arcade room) background shows now */
.intro-on:has(.intro:not([data-stage="out"])) .arcade { visibility: hidden; }
.intro-on .intro {
  position: fixed; inset: 0; z-index: 1000;
  display: block;
  overflow: hidden;
  background: #000;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.intro:focus { outline: none; }
.intro[data-stage="out"] { background: transparent; pointer-events: none; }

.intro-canvas {
  position: absolute; left: 0; top: 0;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* The Blender render (js/intro.js picks the 16:9 or 9:16 cut and sets object-fit to suit the screen) */
.intro-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #000;
  image-rendering: pixelated;
}

/* The tube's scan lines, drawn over the video by js/tube-gl.js */
.intro-tube {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}

/* A window the video can't fill without cropping the title: the strips left over show a dim, blurred copy */
.intro[data-gap]:not([data-stage="coin"]):not([data-stage="out"])::before {
  content: ''; position: absolute; inset: -60px;
  background: var(--intro-backdrop) center / cover no-repeat;
  filter: blur(28px) brightness(0.45);
}

/* INSERT COIN (js/intro.js): waits for the first press so the intro can play with sound */
.intro[data-stage="coin"] .intro-video { visibility: hidden; }
.intro-coin {
  position: absolute; left: 0; right: 0; top: 50%;
  margin: 0; padding: 0 16px;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  text-align: center;
  color: #e6c81e;
  text-shadow: 3px 3px 0 #3a2a00;
}
.intro-coin span { font-size: clamp(16px, 4vw, 32px); animation: intro-coin-blink 1s steps(1) infinite; }
.intro-coin small { font-size: clamp(8px, 1.6vw, 12px); color: #8a8a6a; text-shadow: none; }
@keyframes intro-coin-blink { 50% { opacity: 0; } }