/* =============================================================================
   05-transitions.css  —  The glitch (story→HR) and power-down (HR→proposal)
   ========================================================================== */

/* ---- HR transition / terminal boot screen ----------------------------- */
#hr-transition { background: var(--hr-terminal-bg); }
.terminal {
  font-family: var(--font-mono); color: var(--hr-terminal-fg);
  text-align: left; width: 100%; max-width: 620px; font-size: clamp(0.8rem, 2.6vw, 1rem); line-height: 1.9;
}
.terminal .line { white-space: pre-wrap; opacity: 0; }
.terminal .line.show { opacity: 1; }
.terminal .cursor::after { content: '▋'; animation: blink 800ms steps(1) infinite; }

/* ---- Glitch overlay (plays over the screen change) -------------------- */
#glitch {
  position: fixed; inset: 0; z-index: 100; pointer-events: none; display: none;
  background: #000; mix-blend-mode: normal;
}
#glitch.run { display: block; animation: glitch-flash 700ms steps(2) 1; }
@keyframes glitch-flash {
  0%   { background: #000; opacity: 0; }
  10%  { opacity: 1; background: #0B1026; }
  30%  { opacity: 1; background: #ff00c1; transform: translateX(6px); }
  45%  { opacity: 1; background: #00fff9; transform: translateX(-6px); }
  60%  { opacity: 1; background: #000; }
  80%  { opacity: 1; background: #F7F9FC; }
  100% { opacity: 0; background: #F7F9FC; }
}
.scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(rgba(255,255,255,0.06) 0 1px, transparent 1px 3px);
}

/* ---- Power-down (HR → final proposal) --------------------------------- */
#powerdown {
  position: fixed; inset: 0; z-index: 100; pointer-events: none; display: none; background: #000;
}
#powerdown.run { display: block; animation: power-off 900ms ease-in 1; }
@keyframes power-off {
  0%   { opacity: 0; clip-path: inset(0 0 0 0); }
  35%  { opacity: 1; clip-path: inset(0 0 0 0); }
  70%  { opacity: 1; clip-path: inset(49% 0 49% 0); }   /* collapse to a line */
  88%  { opacity: 1; clip-path: inset(50% 49% 50% 49%); } /* to a dot */
  100% { opacity: 1; clip-path: inset(50% 50% 50% 50%); }
}