/* ============================================================================
   TOTN Opening Stamp — once-per-session case-file entrance (~1.5s, skippable)
   Injected by totn-intro.js. Sequence: case number types on -> wordmark
   glitches in -> UNSEALED stamp slams -> redaction sweep reveals the page.
   Never built at all under prefers-reduced-motion or on repeat views.
   ============================================================================ */

.totn-intro {
  position: fixed; inset: 0; z-index: 600;
  display: flex; align-items: center; justify-content: center;
  background: #0a0a12;
  cursor: pointer;
}
.totn-intro.out { animation: totn-intro-sweep .42s cubic-bezier(.7,0,.2,1) forwards; }
@keyframes totn-intro-sweep { to { transform: translateY(-101%); } }

.totn-intro-inner { text-align: center; padding: 24px; transform: translateZ(0); }
.totn-intro.slammed .totn-intro-inner { animation: totn-intro-shake .18s linear 1; }
@keyframes totn-intro-shake {
  25% { transform: translate(2px, -2px); } 50% { transform: translate(-2px, 1px); }
  75% { transform: translate(1px, 2px); }
}

/* 1. case number types on (mono typewriter) */
.totn-intro-case {
  display: inline-block; overflow: hidden; white-space: nowrap;
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: #2de2ff;
  border-right: 2px solid #2de2ff;
  width: 0;
  animation: totn-intro-type .38s steps(19) .1s forwards,
             totn-intro-caret .5s step-end .1s 4;
}
/* 18 chars + .24em tracking per char — ch units don't include letter-spacing */
@keyframes totn-intro-type { to { width: 23.5ch; } }
@keyframes totn-intro-caret { 50% { border-color: transparent; } }

/* 2. wordmark glitches in */
.totn-intro-wm {
  font-family: Anton, sans-serif; text-transform: uppercase;
  font-size: clamp(38px, 9vw, 84px); line-height: .95; color: #f2f1fa;
  margin: 18px 0 26px; opacity: 0;
  text-shadow: -4px 0 rgba(255,61,138,.65), 4px 0 rgba(45,226,255,.65);
  animation: totn-intro-wm-in .3s steps(3) .42s forwards;
}
.totn-intro-wm b { color: #a05cff; font-weight: 400; }
@keyframes totn-intro-wm-in {
  0%   { opacity: 0; transform: translateX(-8px); }
  50%  { opacity: 1; transform: translateX(6px);  text-shadow: -7px 0 rgba(255,61,138,.8), 7px 0 rgba(45,226,255,.8); }
  100% { opacity: 1; transform: none; text-shadow: -4px 0 rgba(255,61,138,.35), 4px 0 rgba(45,226,255,.35); }
}

/* 3. the stamp slams */
.totn-intro-stamp {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace; font-weight: 600;
  font-size: clamp(14px, 2.6vw, 20px); letter-spacing: .3em; text-transform: uppercase;
  color: #ff4438; border: 3px solid rgba(255, 68, 56, .85); border-radius: 6px;
  padding: 10px 22px 10px 26px;
  transform: scale(2.6) rotate(-14deg); opacity: 0;
  box-shadow: 0 0 0 rgba(255,68,56,0);
  animation: totn-intro-slam .16s cubic-bezier(.2,.8,.3,1) .82s forwards;
}
@keyframes totn-intro-slam {
  to { transform: scale(1) rotate(-5deg); opacity: 1;
       box-shadow: 0 0 34px rgba(255, 68, 56, .35); }
}

.totn-intro-hint {
  position: absolute; bottom: 26px; left: 0; right: 0;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: #5c5975; opacity: 0;
  animation: totn-intro-hint-in .4s ease .9s forwards;
}
@keyframes totn-intro-hint-in { to { opacity: 1; } }