/* ==========================================================================
   AI RolePlay — Motion layer: the site as a film.
   film HUD · letterbox cuts · scene markers · split/scramble type · reticle ·
   hero film + camera · auth mission UI (phone, OTP boxes, resend ring, stamp) ·
   VMP connect overlay · security console · reduced motion
   Uses only tokens from base.css.
   ========================================================================== */

:root {
  --hud-ink: rgba(220, 232, 255, 0.55);
  --hud-ink-strong: rgba(240, 246, 255, 0.85);
  --rec: #ff3b4e;
  --letterbox: clamp(18px, 5.2vh, 58px);
  --cut-dur: 420ms;
}

/* ── Film HUD ──────────────────────────────────────────────────────────── */
.film-hud {
  position: fixed; inset: 0; z-index: 45; pointer-events: none;
  font-family: var(--font-display); font-weight: 600; letter-spacing: 0.18em; font-size: 0.68rem;
  color: var(--hud-ink); direction: ltr; text-transform: uppercase;
  opacity: 0; transition: opacity 1.2s var(--ease-out) 0.4s;
}
.motion-ready .film-hud { opacity: 1; }
html.intro-active .film-hud { opacity: 0; }
.hud-corner { position: absolute; width: 26px; height: 26px; border-color: rgba(220, 232, 255, 0.28); border-style: solid; border-width: 0; }
.hud-corner.tl { top: 14px; left: 14px; border-top-width: 1px; border-left-width: 1px; }
.hud-corner.tr { top: 14px; right: 14px; border-top-width: 1px; border-right-width: 1px; }
.hud-corner.bl { bottom: 14px; left: 14px; border-bottom-width: 1px; border-left-width: 1px; }
.hud-corner.br { bottom: 14px; right: 14px; border-bottom-width: 1px; border-right-width: 1px; }
.hud-bottom { position: absolute; left: 50px; bottom: 20px; display: flex; align-items: center; gap: 14px; }
.hud-geo { position: absolute; left: 50px; top: calc(var(--nav-h) + 30px); writing-mode: vertical-rl; transform: rotate(180deg); transform-origin: center; font-size: 0.6rem; letter-spacing: 0.32em; }
.has-announce .hud-geo { top: calc(var(--nav-h) + 66px); }
.hud-rec { display: inline-flex; align-items: center; gap: 7px; color: var(--hud-ink-strong); }
.hud-rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 10px var(--rec); animation: rec-blink 1.2s steps(2, jump-none) infinite; }
.hud-tc { font-feature-settings: "tnum"; color: var(--hud-ink-strong); min-width: 11ch; }
.hud-sep { width: 34px; height: 1px; background: rgba(220, 232, 255, 0.25); }
.hud-scene { color: var(--accent-primary); text-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.5); white-space: nowrap; }
.hud-reel { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: min(260px, 22vw); height: 2px; background: rgba(220, 232, 255, 0.12); border-radius: 2px; overflow: hidden; }
.hud-reel i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--reel, 0)); background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); box-shadow: 0 0 8px rgba(var(--accent-primary-rgb), 0.8); }
.hud-geo { opacity: 0.55; }
/* Pages with their own chrome keep the HUD minimal */
.staff-page .film-hud, .page-auth .hud-geo, .page-auth .hud-bottom { display: none; }
@media (max-width: 1100px) { .hud-geo, .hud-scene, .hud-sep { display: none; } }
@media (max-width: 767px) { .film-hud { display: none; } }

/* ── Letterbox cuts between pages ──────────────────────────────────────── */
.cut-bars { position: fixed; inset: 0; z-index: calc(var(--z-intro) - 1); pointer-events: none; }
.cut-bars i { position: absolute; left: 0; right: 0; height: 50.5vh; background: #010204; transform: scaleY(0); transition: transform var(--cut-dur) cubic-bezier(0.77, 0, 0.18, 1); }
.cut-bars i:first-child { top: 0; transform-origin: top; }
.cut-bars i:nth-child(2) { bottom: 0; transform-origin: bottom; }
.cut-flash { position: absolute; left: 0; right: 0; top: 50%; height: 1px; margin-top: -0.5px; background: linear-gradient(90deg, transparent, rgba(var(--accent-primary-rgb), 1), #fff, rgba(var(--accent-secondary-rgb), 1), transparent); box-shadow: 0 0 18px 2px rgba(var(--accent-primary-rgb), 0.8); opacity: 0; transform: scaleX(0.2); }
html.is-cutting .cut-bars i { transform: scaleY(1); }
html.is-cutting .cut-flash { animation: cut-flash 420ms var(--ease-out) 260ms both; }
html.is-cutting .page-main, html.is-cutting .footer { filter: blur(3px) saturate(0.6); transition: filter 380ms var(--ease-in-out); }
html.is-cut-in .cut-bars i { animation: cut-open 760ms cubic-bezier(0.77, 0, 0.18, 1) both; }
html.is-cut-in .cut-flash { animation: cut-flash 520ms var(--ease-out) both; }
html.is-cut-in .page-main { animation: cut-focus 900ms var(--ease-out) both; }
/* The old curtain is replaced by the cut */
html.motion-ready .page-curtain { display: none; }

/* ── Scene cut markers ─────────────────────────────────────────────────── */
.scene-cut { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; width: min(100% - 2 * var(--gutter), var(--container)); margin: 0 auto; direction: ltr; }
.scene-cut-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(220, 232, 255, 0.2), transparent); transform: scaleX(0); transition: transform 1.1s var(--ease-out); }
.scene-cut-label { font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.34em; color: var(--text-faint); white-space: nowrap; opacity: 0; transition: opacity 0.8s var(--ease-out) 0.25s, color 0.8s; }
.scene-cut.is-played .scene-cut-line { transform: scaleX(1); }
.scene-cut.is-played .scene-cut-label { opacity: 1; color: var(--text-muted); }

/* ── Typography motion ─────────────────────────────────────────────────── */
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: 0.08em; margin-block: -0.08em; }
[data-split] .w > span { display: inline-block; transform: translate3d(0, 105%, 0) rotate(2deg); opacity: 0; filter: blur(8px); transition: transform 900ms var(--ease-out), opacity 700ms var(--ease-out), filter 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 55ms + 80ms); }
[data-split].is-played .w > span { transform: none; opacity: 1; filter: none; }
html:not(.js) [data-split] .w > span, html.reduce-motion [data-split] .w > span { transform: none; opacity: 1; filter: none; }
[data-scramble] { font-feature-settings: "tnum"; }

/* ── Reticle cursor ────────────────────────────────────────────────────── */
.reticle { position: fixed; z-index: 9999; top: 0; left: 0; width: 0; height: 0; pointer-events: none; mix-blend-mode: screen; transition: opacity 0.3s; }
.reticle i { position: absolute; width: 7px; height: 7px; border: 0 solid rgba(var(--accent-primary-rgb), 0.85); transition: transform 260ms var(--ease-out), border-color 260ms; }
.reticle i:nth-child(1) { left: -13px; top: -13px; border-top-width: 1.5px; border-left-width: 1.5px; }
.reticle i:nth-child(2) { right: -13px; top: -13px; border-top-width: 1.5px; border-right-width: 1.5px; }
.reticle i:nth-child(3) { left: -13px; bottom: -13px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.reticle i:nth-child(4) { right: -13px; bottom: -13px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.reticle b { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent-primary); box-shadow: 0 0 10px var(--accent-primary); transition: transform 200ms var(--ease-out); }
.reticle.is-hot i:nth-child(1) { transform: translate(-6px, -6px); }
.reticle.is-hot i:nth-child(2) { transform: translate(6px, -6px); }
.reticle.is-hot i:nth-child(3) { transform: translate(-6px, 6px); }
.reticle.is-hot i:nth-child(4) { transform: translate(6px, 6px); }
.reticle.is-hot b { transform: scale(0.4); }
.reticle.is-down i { border-color: #fff; }
.reticle.is-down b { transform: scale(1.8); }
.reticle.is-text, .reticle.is-away { opacity: 0; }

/* ── Hero film + camera ────────────────────────────────────────────────── */
.hero-film {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  opacity: 0; transition: opacity 1.6s var(--ease-out);
  transform: scale(calc(1.06 + var(--sp, 0) * -0.06)) translate3d(0, calc(var(--sp, 0) * -2.5%), 0);
}
.hero-film.is-playing { opacity: 0.4; }
.hero-film { filter: blur(1.5px) saturate(1.1) contrast(1.05); }
.hero-grade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 7, 11, 0.6) 0%, rgba(5, 7, 11, 0.15) 30%, rgba(5, 7, 11, 0.35) 62%, var(--bg-primary) 100%),
    linear-gradient(90deg, rgba(5, 7, 11, 0.55), transparent 55%),
    radial-gradient(70% 60% at 70% 40%, rgba(var(--accent-tertiary-rgb), 0.12), transparent 70%);
}
[dir="rtl"] .hero-grade { background:
    linear-gradient(180deg, rgba(5, 7, 11, 0.6) 0%, rgba(5, 7, 11, 0.15) 30%, rgba(5, 7, 11, 0.35) 62%, var(--bg-primary) 100%),
    linear-gradient(270deg, rgba(5, 7, 11, 0.7), transparent 60%),
    radial-gradient(70% 60% at 30% 40%, rgba(var(--accent-tertiary-rgb), 0.12), transparent 70%); }
/* Scrolling past the hero: the copy drifts up and fades like a camera tilting away. */
.hero .hero-inner { transform: translate3d(0, calc(var(--sp, 0) * -40px), 0); opacity: calc(1 + min(var(--sp, 0), 0) * 0.9); }
.hero .hero-wordmark { animation: chroma 7s steps(1) infinite 3s; }
[data-scene] .section-head { transform: translate3d(0, calc(var(--sp, 0) * 18px), 0); }

/* ── Auth: art panel ───────────────────────────────────────────────────── */
.auth-art .bg-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; opacity: 0; transition: opacity 1.8s var(--ease-out); transform: scale(1.06); }
.auth-art .bg-film.is-playing { opacity: 0.85; }
.auth-art-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(5, 7, 11, 0.96) 0%, rgba(5, 7, 11, 0.25) 55%, rgba(5, 7, 11, 0.45) 100%); }
.auth-art::after { z-index: 1; opacity: 0.4; }
.auth-art-scan { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; }
.auth-art-scan::after { content: ""; position: absolute; left: 0; right: 0; height: 22%; top: -22%; background: linear-gradient(180deg, transparent, rgba(var(--accent-primary-rgb), 0.07), transparent); animation: scan-sweep 6s linear infinite; }
.auth-art-tc { position: absolute; z-index: 2; top: calc(var(--nav-h) + 28px); inset-inline-start: 28px; display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.26em; color: var(--hud-ink-strong); direction: ltr; }
.auth-art-tc .rec { width: 7px; height: 7px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 10px var(--rec); animation: rec-blink 1.2s steps(2, jump-none) infinite; }

/* ── Auth: mission card ────────────────────────────────────────────────── */
.mission-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; direction: ltr; }
.mission-steps li { position: relative; display: grid; gap: 4px; padding-top: 10px; font-family: var(--font-display); color: var(--text-faint); transition: color 0.5s var(--ease-out); }
.mission-steps li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); }
.mission-steps li::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 2px; background: var(--gradient-brand); box-shadow: 0 0 10px rgba(var(--accent-primary-rgb), 0.7); transform: scaleX(0); transform-origin: left; transition: transform 0.8s var(--ease-out); }
.mission-steps li.is-active, .mission-steps li.is-done { color: var(--text-secondary); }
.mission-steps li.is-active::after { transform: scaleX(0.55); animation: mission-pulse 2.4s var(--ease-in-out) infinite; }
.mission-steps li.is-done::after { transform: scaleX(1); }
.mission-steps .n { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; }
.mission-steps .t { font-size: 0.66rem; letter-spacing: 0.28em; }
.mission-steps li.is-active .n { color: var(--accent-primary); }

.otp-panel.is-entering, [data-auth-pane].is-entering { animation: panel-in 520ms var(--ease-out) both; }
.is-shaking { animation: shake 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }

/* Phone field */
.phone-field {
  position: relative; display: flex; align-items: stretch; direction: ltr;
  border-radius: var(--radius); border: 1px solid var(--glass-border-strong); background: rgba(5, 7, 11, 0.45);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.phone-field:focus-within { border-color: rgba(var(--accent-primary-rgb), 0.6); box-shadow: 0 0 0 4px rgba(var(--accent-primary-rgb), 0.12); }
.phone-field.is-valid { border-color: rgba(var(--success-rgb), 0.5); }
.phone-cc { display: flex; align-items: center; gap: 8px; padding: 0 14px; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.06em; color: var(--text-secondary); border-right: 1px solid var(--glass-border); }
.phone-cc .flag { width: 18px; height: 12px; border-radius: 2px; background: linear-gradient(180deg, #239f40 0 33%, #fff 33% 66%, #da0000 66%); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); }
.phone-field .input { flex: 1; border: 0; background: transparent; box-shadow: none; height: 56px; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.12em; text-align: left; }
.phone-field .input:focus { box-shadow: none; outline: none; }
.phone-ok { display: grid; place-items: center; width: 44px; color: var(--success); opacity: 0; transform: scale(0.6); transition: all 0.3s var(--ease-spring); }
.phone-field.is-valid .phone-ok { opacity: 1; transform: none; }

/* OTP boxes */
.otp-sent { font-size: 0.92rem; color: var(--text-secondary); }
.otp-sent bdi { color: var(--text-primary); font-weight: 700; }
.otp-sent .link { margin-inline-start: 6px; font-size: 0.85rem; }
.otp-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: clamp(6px, 1.6vw, 12px); direction: ltr; }
.otp-box {
  width: 100%; aspect-ratio: 0.82; min-width: 0; text-align: center; caret-color: var(--accent-primary);
  font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); font-weight: 700; color: var(--text-primary);
  border-radius: 14px; border: 1px solid var(--glass-border-strong); background: rgba(5, 7, 11, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 0.2s, box-shadow 0.25s, transform 0.25s var(--ease-spring), background 0.25s;
  animation: box-in 520ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms);
}
.otp-box:focus { outline: none; border-color: rgba(var(--accent-primary-rgb), 0.75); box-shadow: 0 0 0 4px rgba(var(--accent-primary-rgb), 0.14), 0 0 24px -6px rgba(var(--accent-primary-rgb), 0.8); transform: translateY(-2px); }
.otp-box.is-filled { border-color: rgba(var(--accent-primary-rgb), 0.45); background: rgba(var(--accent-primary-rgb), 0.06); animation: box-lock 280ms var(--ease-spring); }
.otp-box.is-good { border-color: rgba(var(--success-rgb), 0.8); background: rgba(var(--success-rgb), 0.1); color: var(--success); box-shadow: 0 0 22px -6px rgba(var(--success-rgb), 0.9); }
.otp-box.is-bad { border-color: rgba(var(--danger-rgb), 0.85); background: rgba(var(--danger-rgb), 0.1); color: #ffb3c0; }
.otp-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 0.84rem; color: var(--text-muted); }
.otp-ttl { display: inline-flex; align-items: center; gap: 6px; }
.otp-ttl b { color: var(--text-secondary); font-family: var(--font-display); letter-spacing: 0.06em; }
.otp-ttl b.is-low { color: var(--warning); animation: pulse-opacity 1s infinite; }
.otp-resend-form { display: flex; justify-content: center; }
.otp-resend { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 12px; font-size: 0.86rem; font-weight: 700; color: var(--accent-primary); transition: background var(--dur), color var(--dur); }
.otp-resend:hover:not(:disabled) { background: rgba(var(--accent-primary-rgb), 0.08); }
.otp-resend:disabled { color: var(--text-muted); cursor: default; }
.otp-resend .ring { width: 22px; height: 22px; transform: rotate(-90deg); }
.otp-resend .ring circle { fill: none; stroke-width: 2.5; stroke: rgba(255, 255, 255, 0.1); }
.otp-resend .ring .arc { stroke: currentColor; stroke-linecap: round; stroke-dasharray: 97.4; stroke-dashoffset: calc(97.4 * (1 - var(--ring, 0))); transition: stroke-dashoffset 1s linear; }
html.js .otp-single { letter-spacing: 0.5em; }

/* ACCESS GRANTED stamp */
.otp-granted { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; border-radius: inherit; background: rgba(5, 7, 11, 0); pointer-events: none; transition: background 0.5s var(--ease-out); }
.auth-card { position: relative; }
.otp-granted.is-on { background: rgba(5, 7, 11, 0.82); pointer-events: auto; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.stamp { display: grid; justify-items: center; gap: 10px; padding: 26px 34px; border: 2px solid rgba(var(--success-rgb), 0.8); border-radius: 18px; color: var(--success); text-align: center; direction: ltr; box-shadow: 0 0 0 6px rgba(var(--success-rgb), 0.08), 0 0 60px -10px rgba(var(--success-rgb), 0.7), inset 0 0 30px -10px rgba(var(--success-rgb), 0.6); opacity: 0; transform: scale(1.8) rotate(-8deg); filter: blur(10px); }
.otp-granted.is-on .stamp { animation: stamp-in 700ms cubic-bezier(0.2, 1.4, 0.4, 1) 80ms forwards; }
.stamp strong { font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); letter-spacing: 0.22em; color: #eafff5; text-shadow: 0 0 18px rgba(var(--success-rgb), 0.9); }
.stamp small { font-family: var(--font-display); letter-spacing: 0.32em; font-size: 0.66rem; color: rgba(var(--success-rgb), 0.85); }
.stamp-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: rgba(var(--success-rgb), 0.12); box-shadow: 0 0 0 1px rgba(var(--success-rgb), 0.5); }

/* Step-aware copy: [data-show-step] blocks follow the card's current step */
.auth-card[data-step="phone"] [data-show-step="code"],
.auth-card[data-step="code"] [data-show-step="phone"],
.auth-card[data-step="profile"] [data-show-step="code"],
.auth-card[data-step="password"] [data-show-step="code"] { display: none !important; }

.auth-switch a { display: flex; align-items: center; justify-content: center; gap: 8px; }

/* Username live check */
.field.is-ok .input { border-color: rgba(var(--success-rgb), 0.5); }
.field.is-ok .username-note { color: var(--success); }
.field.is-bad .username-note { color: #ff9aac; }
.form-errors[hidden] { display: none; }
.gate-card .otp-flow { display: grid; gap: 14px; }

/* ── VMP connect overlay ───────────────────────────────────────────────── */
.connect-overlay { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: 20px; background: rgba(2, 3, 5, 0.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease-out), visibility 0.35s; }
.connect-overlay.is-open { opacity: 1; visibility: visible; }
.connect-card { width: min(420px, 100%); padding: 30px; display: grid; gap: 14px; justify-items: center; text-align: center; transform: translateY(14px) scale(0.97); transition: transform 0.5s var(--ease-out); }
.connect-overlay.is-open .connect-card { transform: none; }
.connect-radar { position: relative; width: 96px; height: 96px; border-radius: 50%; border: 1px solid rgba(var(--accent-primary-rgb), 0.35); background: radial-gradient(circle, rgba(var(--accent-primary-rgb), 0.12), transparent 65%), repeating-radial-gradient(circle, transparent 0 15px, rgba(var(--accent-primary-rgb), 0.12) 15px 16px); overflow: hidden; }
.connect-radar i { position: absolute; inset: 0; background: conic-gradient(from 0deg, rgba(var(--accent-primary-rgb), 0.55), transparent 28%); animation: spin 1.6s linear infinite; }

/* ── Security console (staff) ──────────────────────────────────────────── */
.sec-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .sec-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sec-kpi { padding: 18px; display: grid; gap: 6px; }
.sec-kpi .v { font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1; direction: ltr; text-align: right; }
.sec-kpi.is-hot .v { color: #ff8fa3; text-shadow: 0 0 18px rgba(var(--danger-rgb), 0.5); }
.sec-kpi.is-ok .v { color: var(--success); }
.sec-chart { display: grid; grid-template-columns: repeat(24, 1fr); align-items: end; gap: 3px; height: 120px; direction: ltr; padding-top: 10px; }
.sec-chart span { position: relative; display: block; min-height: 2px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, rgba(var(--accent-crimson-rgb), 0.9), rgba(var(--accent-secondary-rgb), 0.45)); height: calc(var(--h, 0) * 1%); transform-origin: bottom; animation: bar-grow 900ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 25ms); }
.sec-chart span:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 3px 8px; border-radius: 6px; font-size: 0.7rem; background: var(--bg-elevated); border: 1px solid var(--glass-border-strong); color: var(--text-primary); z-index: 2; }
.sec-chart-axis { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--text-faint); direction: ltr; margin-top: 6px; }
.sev { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 700; }
.sev::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.sev-high { color: #ff6b81; } .sev-medium { color: var(--warning); } .sev-low { color: #8fb4ff; } .sev-info { color: var(--text-muted); }
.log-viewer { max-height: 520px; overflow: auto; padding: 14px; border-radius: 14px; background: #03050a; border: 1px solid var(--glass-border); font-family: var(--font-mono); font-size: 0.76rem; line-height: 1.65; direction: ltr; text-align: left; }
.log-line { display: grid; grid-template-columns: 9.5ch 6ch 11ch 1fr; gap: 10px; padding: 1px 4px; border-radius: 4px; white-space: pre-wrap; word-break: break-word; color: #b9c3d6; }
.log-line:hover { background: rgba(255, 255, 255, 0.035); }
.log-line .lv { font-weight: 700; }
.log-line.l-WARNING .lv { color: var(--warning); } .log-line.l-ERROR .lv, .log-line.l-CRITICAL .lv { color: #ff6b81; } .log-line.l-INFO .lv { color: #6fdcff; }
.log-line .rid { color: var(--text-faint); }
.attack-banner { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(var(--danger-rgb), 0.45); background: linear-gradient(90deg, rgba(var(--danger-rgb), 0.16), rgba(var(--danger-rgb), 0.04)); }
.attack-banner .icon { color: #ff6b81; animation: pulse-opacity 1.2s infinite; }
.mono-cell { font-family: var(--font-mono); font-size: 0.8rem; direction: ltr; unicode-bidi: isolate; }
.header-dump { display: grid; gap: 4px; font-family: var(--font-mono); font-size: 0.78rem; direction: ltr; text-align: left; }
.header-dump div { display: grid; grid-template-columns: 22ch 1fr; gap: 10px; }
.header-dump span:first-child { color: var(--text-muted); }

/* ── Keyframes ─────────────────────────────────────────────────────────── */
@keyframes rec-blink { 50% { opacity: 0.15; } }
@keyframes cut-flash { 0% { opacity: 0; transform: scaleX(0.2); } 40% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1.1); } }
@keyframes cut-open { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes cut-focus { from { filter: blur(6px) brightness(1.3); transform: scale(1.015); } to { filter: none; transform: none; } }
@keyframes chroma { 0%, 92%, 100% { text-shadow: none; } 93% { text-shadow: -2px 0 rgba(255, 0, 80, 0.6), 2px 0 rgba(0, 220, 255, 0.6); } 95% { text-shadow: 2px 0 rgba(255, 0, 80, 0.6), -2px 0 rgba(0, 220, 255, 0.6); } }
@keyframes scan-sweep { to { top: 100%; } }
@keyframes mission-pulse { 50% { transform: scaleX(0.75); } }
@keyframes panel-in { from { opacity: 0; transform: translate3d(0, 14px, 0); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes shake { 10%, 90% { transform: translate3d(-2px, 0, 0); } 20%, 80% { transform: translate3d(4px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-7px, 0, 0); } 40%, 60% { transform: translate3d(7px, 0, 0); } }
@keyframes box-in { from { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes box-lock { 0% { transform: scale(1); } 45% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes stamp-in { to { opacity: 1; transform: none; filter: none; } }
@keyframes bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .film-hud .hud-rec i, .auth-art-scan::after { animation: none; }
  .cut-bars, .reticle { display: none; }
  .hero-film { display: none; }
  .scene-cut-line { transform: none; } .scene-cut-label { opacity: 1; }
}
html.reduce-motion .cut-bars, html.reduce-motion .reticle, html.reduce-motion .hero-film { display: none; }
@media (hover: none), (pointer: coarse) { .reticle { display: none; } }