/* HOPE THIS HELPS — cold boot.
 *
 * Plays once, before level 1. It sits UNDER the tube (crt.css, z 300) on purpose,
 * so the whole sequence is seen through the same glass as the game — the intro is
 * a broadcast on this monitor, not a cutscene played over it.
 *
 * Always skippable, always. See intro.js.
 */

#intro {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: #040705;
  color: #4BE0A8;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.75;
  overflow: hidden;
  cursor: pointer;
  -webkit-font-smoothing: none;
}
#intro[hidden] { display: none; }

#intro.fading { animation: intro-out 700ms ease-out forwards; }
@keyframes intro-out { to { opacity: 0; } }

.intro-screen {
  position: absolute;
  inset: 0;
  padding: 7vh 6vw;
  text-shadow: 0 0 7px rgba(75, 224, 168, 0.45);
}

#intro-text { margin: 0; white-space: pre-wrap; }
#intro-text .caret { background: #4BE0A8; color: #040705; }
#intro-text .bad { color: #FF4646; text-shadow: 0 0 9px rgba(255, 70, 70, 0.6); }
#intro-text .rot { display: inline-block; transform: scaleX(-1); }

/* ---------- the sigil ----------
   The marks around the rim are placeholders for the act III alphabet. When that
   alphabet is designed for real, these get replaced with it — so that anyone who
   learns to read it can come back to the intro and find it was always saying
   something. Do not swap these for generic occult clip-art. */

#intro-sigil {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}
#intro-sigil.on { opacity: 1; }
#intro-sigil svg {
  width: min(52vh, 72vw);
  height: auto;
  stroke: #FF2A2A;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 13px rgba(255, 42, 42, 0.7))
          drop-shadow(0 0 34px rgba(255, 20, 20, 0.35));
}
#intro-sigil text {
  fill: #FF2A2A;
  stroke: none;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  opacity: 0.85;
}
#intro-sigil text.inner { font-size: 8px; opacity: 0.6; }

/* ---------- damage ---------- */

#intro-flash {
  position: absolute;
  inset: 0;
  background: #E8FFF4;
  opacity: 0;
  pointer-events: none;
}
#intro-flash.on { opacity: 0.85; }

#intro.invert { filter: invert(1) hue-rotate(90deg); }

#intro.tear .intro-screen { animation: intro-tear 240ms steps(1, end) infinite; }
@keyframes intro-tear {
  0%   { transform: translate(0, 0) skewX(0); }
  25%  { transform: translate(-9px, 2px) skewX(-1.4deg); }
  50%  { transform: translate(7px, -3px) skewX(1deg); }
  75%  { transform: translate(-4px, 1px) skewX(0.6deg); }
  100% { transform: translate(2px, 0) skewX(0); }
}

#intro.tear #intro-text { text-shadow: 3px 0 rgba(255, 0, 80, 0.85), -3px 0 rgba(0, 225, 255, 0.85); }

/* ---------- power-on ----------
   The real sequence a CRT does: a dot strikes in the centre, blooms sideways
   into a scan line, then the line opens vertically into a picture. Gating the
   intro behind an actual button press is not just flavour — audio cannot start
   without a user gesture, so the TV needs switching on the way a TV does. */

#poweron {
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
}
#poweron.gone { display: none; }

#poweron .beam {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 4px;
  background: #FFFFFF;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 26px 8px rgba(255, 255, 255, 0.85);
  opacity: 0;
}
#poweron.striking .beam { animation: tv-strike 620ms cubic-bezier(.2, .8, .25, 1) forwards; }

@keyframes tv-strike {
  0%   { width: 4px;  height: 4px;    opacity: 0;   border-radius: 50%; }
  6%   { width: 8px;  height: 4px;    opacity: 1;   border-radius: 50%; }
  26%  { width: 104%; height: 4px;    opacity: 1;   border-radius: 2px; }
  38%  { width: 104%; height: 3px;    opacity: 1; }
  100% { width: 104%; height: 108%;   opacity: 0.9; border-radius: 0; }
}

#poweron.striking { animation: tv-bg 620ms linear forwards; }
@keyframes tv-bg {
  0%, 34% { background: #000; }
  46%     { background: #cfd6d2; }
  100%    { background: #000; }
}

#power-btn {
  position: relative;
  z-index: 5;
  background: none;
  border: 1px solid rgba(120, 140, 132, 0.35);
  border-radius: 2px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: rgba(150, 170, 160, 0.7);
  padding: 12px 26px;
  transition: color 200ms linear, border-color 200ms linear;
}
#power-btn:hover,
#power-btn:focus-visible {
  color: rgba(215, 240, 228, 0.95);
  border-color: rgba(150, 200, 180, 0.6);
}
#poweron.striking #power-btn { opacity: 0; }

/* ---------- the note left behind ----------
   Lowercase, unhurried, no letterspacing. A person typed this, and the machine
   that follows it did not.

   It plays as four cards that fade in and out rather than as one growing block
   — see `note()` in intro.js — so the opacity here needs a transition on it.
   Without one, `.on` snapped, which is why the original was written as a single
   accumulating column: a hard cut between cards reads as a rendering fault. */

#intro-note {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  padding: 0 8vw;
  font-size: clamp(15px, 2.6vw, 22px);
  letter-spacing: 0.02em;
  color: #DCEFE6;
  text-shadow: 0 0 12px rgba(75, 224, 168, 0.35);
  opacity: 0;
  transition: opacity 620ms ease;   /* NOTE_FADE in intro.js */
}
#intro-note.on { opacity: 1; }
#intro-note span { min-height: 1.3em; }

/* The only signature in act one. Smaller and set back, the way a name at the
   bottom of a note is — it is not one of his lines, it is him owning them. */
#intro-note .sig {
  font-size: 0.68em;
  letter-spacing: 0.1em;
  opacity: 0.62;
  margin-top: 2px;
}
#intro-note .cur::after {
  content: "_";
  animation: note-caret 900ms steps(1, end) infinite;
}
@keyframes note-caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  #intro-note { transition-duration: 120ms; }
  #intro.tear .intro-screen { animation: none; }
  #poweron.striking .beam { animation-duration: 200ms; }
  #poweron.striking { animation-duration: 200ms; }
}