/* ============================================================
   S'DINGO — "THE VAULT" PRELOADER
   Award-grade authentication experience.
   Extracted from the standalone preloader for use on login.html
   ============================================================ */

/* ---------- TOKENS ---------- */
:root {
  --red: #D40404;
  --red-bright: #FC0404;
  --red-dark: #8C0404;
  --red-deep: #540202;
  --blue: #0561C9;
  --blue-mid: #044CB4;
  --blue-dark: #041C5C;
  --blue-bright: #0F73DB;
  --sky: #66A3E0;
  --gold: #F5B301;
  --gold-bright: #FFD966;
  --green: #1FA04E;
  --mint: #9EE7B8;
  --cyan: #22D3EE;
  --violet: #8B5CF6;
  --ink: #ffffff;
  --ink-soft: rgba(255, 255, 255, .72);
  --ink-faint: rgba(255, 255, 255, .42);
  --ink-ghost: rgba(255, 255, 255, .12);
  --bg: #02060f;
  --bg-2: #060d24;
  --glass: rgba(255, 255, 255, .045);
  --glass-2: rgba(255, 255, 255, .09);
  --line: rgba(255, 255, 255, .14);
  --line-bright: rgba(255, 255, 255, .28);
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-cinematic: cubic-bezier(.72, 0, .18, 1);
}

/* Lock page scroll while the vault is showing */
body.vault-lock { overflow: hidden !important; }
body.vault-unlocked { overflow: auto; }

/* ============================================================
   ROOT HOST
   ============================================================ */
#vault {
  position: fixed;
  inset: 0;
  z-index: 99999;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(circle 900px at 50% 50%, #0a1a42 0%, #050c22 55%, #02060f 100%);
  clip-path: circle(150% at 50% 50%);
  -webkit-clip-path: circle(150% at 50% 50%);
  transition: clip-path 1.4s var(--ease-cinematic), -webkit-clip-path 1.4s var(--ease-cinematic);
}

#vault.unlocking {
  clip-path: circle(0% at 50% 50%);
  -webkit-clip-path: circle(0% at 50% 50%);
  pointer-events: none;
}

#vault.complete { display: none; }

/* ============================================================
   LAYER 1 — AURORA BACKGROUND
   ============================================================ */
.aurora-mesh {
  position: absolute;
  inset: -20%;
  z-index: 1;
  background:
    radial-gradient(circle 700px at 15% 20%, rgba(252, 74, 74, .30) 0%, transparent 68%),
    radial-gradient(circle 820px at 85% 15%, rgba(80, 160, 240, .32) 0%, transparent 68%),
    radial-gradient(circle 640px at 50% 100%, rgba(245, 179, 1, .18) 0%, transparent 70%),
    radial-gradient(circle 760px at 92% 85%, rgba(60, 90, 180, .34) 0%, transparent 68%),
    radial-gradient(circle 560px at 8% 78%, rgba(139, 92, 246, .20) 0%, transparent 68%),
    radial-gradient(circle 480px at 60% 30%, rgba(34, 211, 238, .14) 0%, transparent 68%);
  filter: blur(50px) saturate(1.3);
  animation: auroraDrift 26s ease-in-out infinite alternate;
  will-change: transform, filter;
}

@keyframes auroraDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg);                filter: blur(48px) saturate(1.2) hue-rotate(0deg); }
  33%  { transform: translate3d(-2%, 2%, 0) scale(1.06) rotate(1.2deg);        filter: blur(54px) saturate(1.35) hue-rotate(6deg); }
  66%  { transform: translate3d(2.5%, -1.5%, 0) scale(1.04) rotate(-1.4deg);   filter: blur(50px) saturate(1.28) hue-rotate(-5deg); }
  100% { transform: translate3d(-1%, 1%, 0) scale(1.08) rotate(.8deg);         filter: blur(52px) saturate(1.32) hue-rotate(4deg); }
}

/* ============================================================
   LAYER 2 — TECHNICAL GRID
   ============================================================ */
.tech-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(160, 200, 245, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 200, 245, .055) 1px, transparent 1px),
    radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1.4px);
  background-size: 72px 72px, 72px 72px, 18px 18px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, #000 0%, #000 55%, transparent 100%);
  mask-image: radial-gradient(120% 90% at 50% 50%, #000 0%, #000 55%, transparent 100%);
  animation: gridDrift 60s linear infinite;
  opacity: .85;
}

@keyframes gridDrift { to { background-position: 72px 72px, 72px 72px, 18px 18px; } }

/* ============================================================
   LAYER 3 — RADAR RINGS
   ============================================================ */
.radar-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(90vmin, 900px);
  height: min(90vmin, 900px);
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
}

.radar-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(102, 163, 224, .14);
  animation: radarPulse 4s ease-out infinite;
}

.radar-ring:nth-child(1) { animation-delay: 0s; }
.radar-ring:nth-child(2) { inset: 8%;  animation-delay: .6s; border-color: rgba(245, 179, 1, .10); }
.radar-ring:nth-child(3) { inset: 16%; animation-delay: 1.2s; border-color: rgba(252, 74, 74, .10); }
.radar-ring:nth-child(4) { inset: 24%; animation-delay: 1.8s; border-color: rgba(34, 211, 238, .10); }
.radar-ring:nth-child(5) { inset: 32%; animation-delay: 2.4s; border-color: rgba(139, 92, 246, .10); }

@keyframes radarPulse {
  0%   { transform: scale(.85); opacity: 0; }
  30%  { opacity: .85; }
  100% { transform: scale(1.15); opacity: 0; }
}

/* ============================================================
   LAYER 4 — SONAR SWEEP
   ============================================================ */
.sonar-sweep {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(80vmin, 800px);
  height: min(80vmin, 800px);
  transform: translate(-50%, -50%);
  z-index: 4;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at center, #000 0%, #000 60%, transparent 75%);
  mask-image: radial-gradient(circle at center, #000 0%, #000 60%, transparent 75%);
}

.sonar-sweep::before {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 340deg,
    rgba(102, 163, 224, .06) 350deg,
    rgba(102, 163, 224, .35) 358deg,
    rgba(158, 231, 184, .55) 360deg
  );
  animation: sonarRotate 4s linear infinite;
  border-radius: 50%;
}

.sonar-sweep::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 50%;
  transform-origin: top center;
  background: linear-gradient(180deg, var(--mint) 0%, rgba(158, 231, 184, .3) 60%, transparent 100%);
  animation: sonarRotate 4s linear infinite;
  box-shadow: 0 0 12px var(--mint), 0 0 24px rgba(158, 231, 184, .5);
  border-radius: 2px;
}

@keyframes sonarRotate { to { transform: rotate(360deg); } }

/* ============================================================
   LAYER 5 — CONSTELLATION CANVAS
   ============================================================ */
#vaultStars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

/* ============================================================
   LAYER 6 — HEX CODE STREAM
   ============================================================ */
.hex-stream {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(102, 163, 224, .22);
  letter-spacing: .2em;
  opacity: .55;
}

.hex-col {
  position: absolute;
  top: -10%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  animation: hexFall linear infinite;
  will-change: transform;
  white-space: nowrap;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.hex-col span {
  color: rgba(102, 163, 224, .35);
  text-shadow: 0 0 8px rgba(102, 163, 224, .5);
}

.hex-col span:nth-child(3n) { color: rgba(158, 231, 184, .4);  text-shadow: 0 0 10px rgba(158, 231, 184, .6); }
.hex-col span:nth-child(5n) { color: rgba(245, 179, 1, .35);   text-shadow: 0 0 10px rgba(245, 179, 1, .6); }
.hex-col span:nth-child(7n) { color: rgba(252, 74, 74, .3);    text-shadow: 0 0 10px rgba(252, 74, 74, .55); }

@keyframes hexFall {
  from { transform: translateY(-20%); }
  to   { transform: translateY(120vh); }
}

/* ============================================================
   LAYER 7 — FLOATING PARTICLES
   ============================================================ */
.particles {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  overflow: hidden;
}

.particle {
  position: absolute;
  border-radius: 50%;
  will-change: transform, opacity;
  mix-blend-mode: screen;
}

/* ============================================================
   LAYER 8 — SCAN LINES + BEAM
   ============================================================ */
.scanlines {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, .14) 2px,
    rgba(0, 0, 0, .14) 4px
  );
  opacity: .45;
  mix-blend-mode: multiply;
}

.scan-beam {
  position: absolute;
  left: 0;
  right: 0;
  height: 180px;
  z-index: 9;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(102, 163, 224, .06) 30%,
    rgba(158, 231, 184, .14) 48%,
    rgba(255, 255, 255, .20) 50%,
    rgba(158, 231, 184, .14) 52%,
    rgba(102, 163, 224, .06) 70%,
    transparent 100%
  );
  mix-blend-mode: screen;
  animation: scanDown 5s cubic-bezier(.55, 0, .45, 1) infinite;
  filter: blur(.5px);
}

@keyframes scanDown {
  0%   { top: -180px; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { top: 100vh; opacity: 0; }
}

/* ============================================================
   LAYER 10 — CORNER BRACKETS (TACTICAL HUD)
   ============================================================ */
.bracket {
  position: absolute;
  width: 64px;
  height: 64px;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  animation: bracketIn .8s var(--ease) forwards;
}

.bracket-tl { top: 24px; left: 24px;   border-top: 2px solid var(--sky);    border-left: 2px solid var(--sky);  animation-delay: .2s; }
.bracket-tr { top: 24px; right: 24px;  border-top: 2px solid var(--sky);    border-right: 2px solid var(--sky); animation-delay: .35s; }
.bracket-bl { bottom: 24px; left: 24px;  border-bottom: 2px solid var(--sky); border-left: 2px solid var(--sky);  animation-delay: .5s; }
.bracket-br { bottom: 24px; right: 24px; border-bottom: 2px solid var(--sky); border-right: 2px solid var(--sky); animation-delay: .65s; }

.bracket::before,
.bracket::after {
  content: "";
  position: absolute;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
}

.bracket-tl::before,
.bracket-tr::before,
.bracket-bl::before,
.bracket-br::before {
  width: 8px;
  height: 2px;
  top: -2px;
}

.bracket-tl::before { left: -2px; }
.bracket-tr::before { right: -2px; }
.bracket-bl::before { left: -2px; bottom: -2px; top: auto; }
.bracket-br::before { right: -2px; bottom: -2px; top: auto; }

.bracket::after {
  width: 2px;
  height: 8px;
}

.bracket-tl::after { left: -2px; top: -2px; }
.bracket-tr::after { right: -2px; top: -2px; }
.bracket-bl::after { left: -2px; bottom: -2px; }
.bracket-br::after { right: -2px; bottom: -2px; }

@keyframes bracketIn {
  from { opacity: 0; transform: scale(.5); }
  to   { opacity: 1; transform: scale(1); }
}

/* ============================================================
   LAYER 11 — TOP COMMAND BAR
   ============================================================ */
.vault-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 25;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: calc(28px + env(safe-area-inset-top, 0px)) clamp(20px, 4vw, 60px) 0;
  opacity: 0;
  animation: fadeDown 1s var(--ease) .3s forwards;
  pointer-events: none;
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.vault-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.vault-logo {
  width: clamp(52px, 6vw, 72px);
  height: clamp(52px, 6vw, 72px);
  border-radius: 20px;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: none;
  background: linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03));
  border: 1px solid var(--line-bright);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 16px 40px -14px rgba(0, 0, 0, .7),
    0 0 40px -10px rgba(252, 74, 74, .4);
  position: relative;
}

.vault-logo::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  padding: 2px;
  background: conic-gradient(from var(--logo-ang, 0deg), var(--red), var(--gold), var(--sky), var(--violet), var(--red));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: logoSpin 6s linear infinite;
  z-index: -1;
}

@property --logo-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

@keyframes logoSpin { to { --logo-ang: 360deg; } }

.vault-logo img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(252, 4, 4, .6));
}

.vault-logo .fb { display: none; font-size: 2rem; color: #fff; }

.vault-logo.nologo img { display: none; }
.vault-logo.nologo .fb  { display: block; }

.vault-brand-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  letter-spacing: -.02em;
  line-height: 1;
  min-width: 0;
}

.vault-brand-text small {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(8px, 1.2vw, 11px);
  letter-spacing: .32em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

/* Threat level indicator */
.threat-indicator {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  border-radius: 100px;
  background: var(--glass);
  border: 1px solid var(--line-bright);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 12px 30px -10px rgba(0, 0, 0, .6);
  flex: none;
}

.threat-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 20px;
}

.threat-bar {
  width: 4px;
  border-radius: 2px;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: threatPulse 2s ease-in-out infinite;
}

.threat-bar:nth-child(1) { height: 35%;  animation-delay: 0s; }
.threat-bar:nth-child(2) { height: 55%;  animation-delay: .15s; }
.threat-bar:nth-child(3) { height: 70%;  animation-delay: .3s; }
.threat-bar:nth-child(4) { height: 85%;  animation-delay: .45s; }
.threat-bar:nth-child(5) { height: 100%; animation-delay: .6s; }

@keyframes threatPulse {
  0%, 100% { opacity: .5; transform: scaleY(.85); }
  50%      { opacity: 1;  transform: scaleY(1); }
}

.threat-text {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mint);
  white-space: nowrap;
}

.threat-text b { color: #fff; font-weight: 700; margin-left: 6px; }

/* Time display */
.vault-time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font-family: var(--font-mono);
  flex: none;
}

.vault-time-label {
  font-size: 9px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.vault-time-value {
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #fff;
  letter-spacing: .08em;
  text-shadow: 0 0 20px rgba(102, 163, 224, .5);
}

/* ============================================================
   LAYER 12 — CENTRAL VAULT STAGE
   ============================================================ */
.vault-center {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vh, 32px);
  padding: clamp(100px, 14vh, 140px) 20px clamp(160px, 24vh, 220px);
  text-align: center;
  pointer-events: none;
}

/* Status line */
.vault-status-line {
  font-family: var(--font-mono);
  font-size: clamp(9px, 1.4vw, 11px);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--mint);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
  border-radius: 100px;
  background: rgba(31, 160, 78, .10);
  border: 1px solid rgba(158, 231, 184, .28);
  box-shadow: 0 0 30px -8px rgba(158, 231, 184, .5);
  opacity: 0;
  animation: fadeUp .8s var(--ease) .5s forwards;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.vault-status-line .live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mint);
  position: relative;
  flex: none;
  box-shadow: 0 0 12px var(--mint);
}

.vault-status-line .live-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--mint);
  animation: livePulse 2s ease-out infinite;
}

@keyframes livePulse {
  0%   { transform: scale(.5); opacity: .9; }
  100% { transform: scale(2);  opacity: 0; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   VAULT WHEEL — THE HERO
   ============================================================ */
.vault-wheel {
  position: relative;
  width: clamp(220px, 38vh, 360px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  opacity: 0;
  animation: wheelEnter 1.4s var(--ease-spring) .35s forwards;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .7));
}

@keyframes wheelEnter {
  from { opacity: 0; transform: scale(.6) rotate(-30deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

.wheel-layer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform-origin: center;
}

/* Outer glow halo */
.wheel-halo {
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(252, 74, 74, .20) 0%,
    rgba(245, 179, 1, .10) 30%,
    rgba(102, 163, 224, .14) 55%,
    transparent 72%);
  filter: blur(28px);
  animation: haloPulse 3.6s ease-in-out infinite;
}

@keyframes haloPulse {
  0%, 100% { opacity: .7; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.08); }
}

/* Ring 1 — outermost */
.ring-outer {
  border: 2px solid rgba(102, 163, 224, .28);
  animation: wheelRotate 40s linear infinite;
  box-shadow:
    inset 0 0 40px rgba(102, 163, 224, .12),
    0 0 40px rgba(102, 163, 224, .18);
}

.ring-outer::before,
.ring-outer::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sky);
  box-shadow: 0 0 14px var(--sky);
  transform: translate(-50%, -50%);
}

.ring-outer::before { transform: translate(calc(-50% - 100px), -50%); }
.ring-outer::after  { transform: translate(calc(-50% + 100px), -50%); }

/* Ring 2 — tick ring */
.ring-ticks {
  inset: 6%;
  border-radius: 50%;
  animation: wheelRotate 60s linear infinite reverse;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 6deg,    rgba(255, 255, 255, .35) 6deg 7deg,
    transparent 7deg 15deg,   rgba(255, 255, 255, .35) 15deg 16deg,
    transparent 16deg 24deg,  rgba(255, 255, 255, .35) 24deg 25deg,
    transparent 25deg 33deg,  rgba(255, 255, 255, .35) 33deg 34deg,
    transparent 34deg 42deg,  rgba(255, 255, 255, .35) 42deg 43deg,
    transparent 43deg 51deg,  rgba(255, 255, 255, .35) 51deg 52deg,
    transparent 52deg 60deg,  rgba(255, 255, 255, .35) 60deg 61deg,
    transparent 61deg 69deg,  rgba(255, 255, 255, .35) 69deg 70deg,
    transparent 70deg 78deg,  rgba(255, 255, 255, .35) 78deg 79deg,
    transparent 79deg 87deg,  rgba(255, 255, 255, .35) 87deg 88deg,
    transparent 88deg 96deg,  rgba(255, 255, 255, .35) 96deg 97deg,
    transparent 97deg 105deg, rgba(255, 255, 255, .35) 105deg 106deg,
    transparent 106deg 114deg, rgba(255, 255, 255, .35) 114deg 115deg,
    transparent 115deg 123deg, rgba(255, 255, 255, .35) 123deg 124deg,
    transparent 124deg 132deg, rgba(255, 255, 255, .35) 132deg 133deg,
    transparent 133deg 141deg, rgba(255, 255, 255, .35) 141deg 142deg,
    transparent 142deg 150deg, rgba(255, 255, 255, .35) 150deg 151deg,
    transparent 151deg 159deg, rgba(255, 255, 255, .35) 159deg 160deg,
    transparent 160deg 168deg, rgba(255, 255, 255, .35) 168deg 169deg,
    transparent 169deg 177deg, rgba(255, 255, 255, .35) 177deg 178deg,
    transparent 178deg 186deg, rgba(255, 255, 255, .35) 186deg 187deg,
    transparent 187deg 195deg, rgba(255, 255, 255, .35) 195deg 196deg,
    transparent 196deg 204deg, rgba(255, 255, 255, .35) 204deg 205deg,
    transparent 205deg 213deg, rgba(255, 255, 255, .35) 213deg 214deg,
    transparent 214deg 222deg, rgba(255, 255, 255, .35) 222deg 223deg,
    transparent 223deg 231deg, rgba(255, 255, 255, .35) 231deg 232deg,
    transparent 232deg 240deg, rgba(255, 255, 255, .35) 240deg 241deg,
    transparent 241deg 249deg, rgba(255, 255, 255, .35) 249deg 250deg,
    transparent 250deg 258deg, rgba(255, 255, 255, .35) 258deg 259deg,
    transparent 259deg 267deg, rgba(255, 255, 255, .35) 267deg 268deg,
    transparent 268deg 276deg, rgba(255, 255, 255, .35) 276deg 277deg,
    transparent 277deg 285deg, rgba(255, 255, 255, .35) 285deg 286deg,
    transparent 286deg 294deg, rgba(255, 255, 255, .35) 294deg 295deg,
    transparent 295deg 303deg, rgba(255, 255, 255, .35) 303deg 304deg,
    transparent 304deg 312deg, rgba(255, 255, 255, .35) 312deg 313deg,
    transparent 313deg 321deg, rgba(255, 255, 255, .35) 321deg 322deg,
    transparent 322deg 330deg, rgba(255, 255, 255, .35) 330deg 331deg,
    transparent 331deg 339deg, rgba(255, 255, 255, .35) 339deg 340deg,
    transparent 340deg 348deg, rgba(255, 255, 255, .35) 348deg 349deg,
    transparent 349deg 357deg, rgba(255, 255, 255, .35) 357deg 358deg,
    transparent 358deg 360deg
  );
  -webkit-mask: radial-gradient(circle at center, transparent 82%, #000 83%, #000 100%);
  mask: radial-gradient(circle at center, transparent 82%, #000 83%, #000 100%);
  opacity: .55;
}

/* Ring 3 — dashed */
.ring-dashed {
  inset: 12%;
  border: 2px dashed rgba(245, 179, 1, .35);
  animation: wheelRotate 30s linear infinite;
  box-shadow: 0 0 20px rgba(245, 179, 1, .12);
}

/* Ring 4 — segment ring */
.ring-segments {
  inset: 18%;
  border-radius: 50%;
  animation: wheelRotate 20s linear infinite reverse;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 30deg,     rgba(252, 74, 74, .65) 30deg 32deg,
    transparent 32deg 90deg,    rgba(102, 163, 224, .65) 90deg 92deg,
    transparent 92deg 150deg,   rgba(245, 179, 1, .65) 150deg 152deg,
    transparent 152deg 210deg,  rgba(158, 231, 184, .65) 210deg 212deg,
    transparent 212deg 270deg,  rgba(139, 92, 246, .65) 270deg 272deg,
    transparent 272deg 330deg,  rgba(34, 211, 238, .65) 330deg 332deg,
    transparent 332deg 360deg
  );
  -webkit-mask: radial-gradient(circle at center, transparent 90%, #000 91%);
  mask: radial-gradient(circle at center, transparent 90%, #000 91%);
  filter: drop-shadow(0 0 6px rgba(252, 74, 74, .6));
}

/* Ring 5 — inner glow */
.ring-inner {
  inset: 26%;
  border: 2px solid rgba(158, 231, 184, .30);
  animation: wheelRotate 15s linear infinite;
  box-shadow:
    inset 0 0 30px rgba(158, 231, 184, .16),
    0 0 30px rgba(158, 231, 184, .20);
}

/* Ring 6 — core ring */
.ring-core {
  inset: 36%;
  border: 1.5px solid rgba(255, 255, 255, .20);
  animation: wheelRotate 10s linear infinite reverse;
}

@keyframes wheelRotate { to { transform: rotate(360deg); } }

/* Wheel hub — biometric center */
.wheel-hub {
  position: absolute;
  inset: 40%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .22) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(102, 163, 224, .28) 0%, rgba(4, 28, 92, .55) 100%);
  border: 2px solid rgba(255, 255, 255, .24);
  box-shadow:
    inset 0 2px 20px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .3),
    0 0 50px rgba(102, 163, 224, .4),
    0 0 100px -20px rgba(245, 179, 1, .3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  z-index: 5;
}

.wheel-hub::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 80deg,
    rgba(255, 255, 255, .35) 85deg 88deg,
    transparent 92deg 360deg
  );
  animation: wheelRotate 3s linear infinite;
}

.wheel-hub::after {
  content: "";
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle, rgba(245, 179, 1, .3) 0%, transparent 60%);
  animation: haloPulse 2.4s ease-in-out infinite;
}

/* Fingerprint SVG inside hub */
.fingerprint {
  position: relative;
  z-index: 6;
  width: 60%;
  height: 60%;
  color: var(--mint);
  filter: drop-shadow(0 0 8px rgba(158, 231, 184, .8));
  animation: fingerprintPulse 2.4s ease-in-out infinite;
}

@keyframes fingerprintPulse {
  0%, 100% { opacity: .85; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.04); }
}

.fingerprint path,
.fingerprint ellipse {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: drawFingerprint 3s ease-in-out infinite;
}

.fingerprint path:nth-child(2) { animation-delay: .15s; }
.fingerprint path:nth-child(3) { animation-delay: .3s; }
.fingerprint path:nth-child(4) { animation-delay: .45s; }
.fingerprint path:nth-child(5) { animation-delay: .6s; }

@keyframes drawFingerprint {
  0%   { stroke-dashoffset: 200;  opacity: .4; }
  40%  { stroke-dashoffset: 0;    opacity: 1; }
  70%  { stroke-dashoffset: 0;    opacity: 1; }
  100% { stroke-dashoffset: -200; opacity: .4; }
}

/* Scan laser inside hub */
.scan-laser {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 7;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(158, 231, 184, .9) 30%,
    #fff 50%,
    rgba(158, 231, 184, .9) 70%,
    transparent 100%
  );
  box-shadow:
    0 0 15px rgba(158, 231, 184, .9),
    0 0 30px rgba(158, 231, 184, .5);
  animation: laserScan 2.2s ease-in-out infinite;
}

@keyframes laserScan {
  0%   { top: 0;    opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* ============================================================
   PROGRESS SECTION
   ============================================================ */
.progress-section {
  width: min(560px, 90vw);
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  animation: fadeUp .9s var(--ease) .7s forwards;
}

.progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono);
}

.progress-label {
  font-size: clamp(9px, 1.3vw, 11px);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.progress-pct {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: -.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 0%, #cfe0ff 60%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px rgba(245, 179, 1, .4));
}

.progress-pct small {
  font-size: .4em;
  -webkit-text-fill-color: var(--gold);
  color: var(--gold);
  margin-left: 2px;
}

/* Progress bar */
.progress-track {
  position: relative;
  height: 10px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  overflow: hidden;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, .5),
    0 0 0 1px rgba(0, 0, 0, .3);
}

.progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  border-radius: 100px;
  background: linear-gradient(90deg,
    var(--red) 0%,
    var(--gold) 35%,
    var(--sky) 70%,
    var(--mint) 100%
  );
  background-size: 200% 100%;
  box-shadow:
    0 0 16px rgba(245, 179, 1, .7),
    0 0 30px rgba(102, 163, 224, .5),
    inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: width .3s linear;
  animation: gradientFlow 3s linear infinite;
}

@keyframes gradientFlow { to { background-position: 200% 0; } }

.progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, .65) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.8s linear infinite;
  mix-blend-mode: overlay;
}

@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

/* Progress head marker */
.progress-head-marker {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 30%, #fff 0%, var(--gold) 60%, var(--red) 100%);
  box-shadow:
    0 0 15px rgba(245, 179, 1, .9),
    0 0 30px rgba(252, 74, 74, .7),
    inset 0 1px 0 rgba(255, 255, 255, .8);
  z-index: 2;
  transition: left .3s linear;
  animation: headPulse 1.4s ease-in-out infinite;
}

@keyframes headPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.15); }
}

/* Milestone markers on track */
.progress-milestones {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.progress-milestone {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 100%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, .25);
}

/* ============================================================
   CHECKPOINT TIMELINE
   ============================================================ */
.checkpoints {
  width: min(700px, 94vw);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  opacity: 0;
  animation: fadeUp .9s var(--ease) 1s forwards;
}

.checkpoint {
  position: relative;
  padding: 14px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  transition: all .5s var(--ease);
}

.checkpoint.active {
  background: linear-gradient(160deg, rgba(31, 160, 78, .18), rgba(255, 255, 255, .04));
  border-color: rgba(158, 231, 184, .45);
  box-shadow:
    0 0 24px -6px rgba(158, 231, 184, .5),
    inset 0 1px 0 rgba(255, 255, 255, .18);
  transform: translateY(-4px);
}

.checkpoint.done {
  background: linear-gradient(160deg, rgba(31, 160, 78, .12), rgba(255, 255, 255, .03));
  border-color: rgba(158, 231, 184, .30);
}

.checkpoint-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  color: var(--ink-faint);
  transition: all .5s var(--ease);
}

.checkpoint.active .checkpoint-icon {
  background: linear-gradient(145deg, var(--green), #0B6B30);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px -4px rgba(31, 160, 78, .7);
  animation: iconPulse 1.6s ease-in-out infinite;
}

.checkpoint.done .checkpoint-icon {
  background: linear-gradient(145deg, var(--green), #0B6B30);
  border-color: transparent;
  color: #fff;
}

@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.1); }
}

.checkpoint-label {
  font-family: var(--font-mono);
  font-size: clamp(7.5px, 1.1vw, 9.5px);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.3;
}

.checkpoint.active .checkpoint-label,
.checkpoint.done .checkpoint-label {
  color: var(--mint);
}

.checkpoint-status {
  font-size: .66rem;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 5px;
}

.checkpoint.active .checkpoint-status { color: #fff; }

.checkpoint-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
  opacity: .5;
}

.checkpoint.active .checkpoint-status::before {
  background: var(--mint);
  opacity: 1;
  box-shadow: 0 0 8px var(--mint);
  animation: statusPulse 1.4s ease-in-out infinite;
}

.checkpoint.done .checkpoint-status::before {
  background: var(--mint);
  opacity: 1;
}

@keyframes statusPulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.3); opacity: .7; }
}

/* ============================================================
   LIVE TERMINAL FEED
   ============================================================ */
.terminal {
  width: min(620px, 92vw);
  border-radius: 16px;
  background: rgba(2, 6, 15, .85);
  border: 1px solid rgba(158, 231, 184, .20);
  box-shadow:
    0 20px 50px -20px rgba(0, 0, 0, .8),
    inset 0 1px 0 rgba(158, 231, 184, .15),
    0 0 40px -10px rgba(158, 231, 184, .3);
  overflow: hidden;
  opacity: 0;
  animation: fadeUp .9s var(--ease) 1.3s forwards;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.terminal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid rgba(158, 231, 184, .14);
}

.terminal-dots { display: flex; gap: 6px; flex: none; }

.terminal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
}

.terminal-dot:nth-child(1) { background: #FC0404; }
.terminal-dot:nth-child(2) { background: #F5B301; }
.terminal-dot:nth-child(3) { background: #1FA04E; }

.terminal-title {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  flex: 1;
}

.terminal-badge {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mint);
  padding: 3px 8px;
  border-radius: 100px;
  background: rgba(31, 160, 78, .16);
  border: 1px solid rgba(158, 231, 184, .3);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.terminal-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 6px var(--mint);
  animation: statusPulse 1.4s ease-in-out infinite;
}

.terminal-body {
  padding: 14px 18px;
  font-family: var(--font-mono);
  font-size: clamp(9.5px, 1.35vw, 11px);
  line-height: 1.9;
  color: rgba(158, 231, 184, .85);
  height: 110px;
  overflow: hidden;
  position: relative;
  text-align: left;
}

.terminal-body::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, transparent 60%, rgba(2, 6, 15, .9) 100%);
  pointer-events: none;
  z-index: 2;
}

.terminal-line {
  display: flex;
  gap: 10px;
  opacity: 0;
  transform: translateX(-8px);
  animation: termLine .5s var(--ease) forwards;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes termLine {
  to { opacity: 1; transform: translateX(0); }
}

.terminal-line .prompt { color: var(--gold); flex: none; }
.terminal-line .cmd    { color: #fff; }
.terminal-line .ok     { color: var(--mint); }
.terminal-line .warn   { color: var(--gold-bright); }
.terminal-line .dim    { color: rgba(158, 231, 184, .5); }

.terminal-cursor {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: var(--mint);
  box-shadow: 0 0 10px var(--mint);
  animation: cursorBlink 1s step-end infinite;
  vertical-align: middle;
  margin-left: 2px;
}

@keyframes cursorBlink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ============================================================
   HOLOGRAPHIC ID CARD
   ============================================================ */
.holo-id {
  position: absolute;
  top: 50%;
  right: clamp(20px, 4vw, 60px);
  transform: translateY(-50%) rotate(3deg);
  width: min(240px, 22vw);
  z-index: 16;
  padding: 16px 16px 14px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .025));
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    0 30px 70px -26px rgba(0, 0, 0, .8),
    inset 0 1px 0 rgba(255, 255, 255, .22);
  opacity: 0;
  animation: holoIn 1.2s var(--ease) .9s forwards;
  pointer-events: none;
  overflow: hidden;
}

@keyframes holoIn {
  from { opacity: 0; transform: translateY(-50%) translateX(40px) rotate(8deg); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0) rotate(3deg); }
}

.holo-id::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 255, 255, .10) 48%,
    rgba(245, 179, 1, .14) 50%,
    rgba(255, 255, 255, .10) 52%,
    transparent 65%,
    transparent 100%
  );
  background-size: 300% 100%;
  animation: holoSweep 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes holoSweep {
  0%       { background-position: 130% 0; }
  60%,100% { background-position: -130% 0; }
}

.holo-id::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red), var(--gold), var(--sky), var(--violet));
  background-size: 200% 100%;
  animation: gradientFlow 4s linear infinite;
}

.holo-id-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.holo-id-label {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.holo-id-badge {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mint);
  padding: 3px 8px;
  border-radius: 100px;
  background: rgba(31, 160, 78, .18);
  border: 1px solid rgba(158, 231, 184, .32);
}

.holo-id-photo {
  width: 100%;
  aspect-ratio: 1.4;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 40%, rgba(102, 163, 224, .32) 0%, transparent 60%),
    linear-gradient(160deg, rgba(4, 28, 92, .7), rgba(2, 6, 15, .9));
  border: 1px solid rgba(255, 255, 255, .12);
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}

.holo-id-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    rgba(102, 163, 224, .08) 3px,
    rgba(102, 163, 224, .08) 4px
  );
}

.holo-id-photo i {
  font-size: 2.4rem;
  color: var(--sky);
  filter: drop-shadow(0 0 12px rgba(102, 163, 224, .8));
  position: relative;
  z-index: 2;
}

.holo-id-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.holo-id-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
}

.holo-id-row span { color: var(--ink-faint); text-transform: uppercase; }
.holo-id-row b    { color: #fff; font-weight: 600; }

.holo-id-barcode {
  display: flex;
  gap: 2px;
  height: 22px;
  margin-top: 12px;
  opacity: .75;
}

.holo-id-barcode i { display: block; width: 2px; background: rgba(255, 255, 255, .8); }
.holo-id-barcode i:nth-child(3n) { width: 4px; }
.holo-id-barcode i:nth-child(4n) { width: 1px; }

/* ============================================================
   BOTTOM HUD
   ============================================================ */
.vault-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  padding: 0 clamp(20px, 4vw, 60px) calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 1s var(--ease) .8s forwards;
  pointer-events: none;
}

.encryption-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 100px;
  background: var(--glass);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

.encryption-badge i { color: var(--mint); font-size: .9rem; }
.encryption-badge b { color: #fff; font-weight: 600; }

.vault-tagline {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  flex-wrap: wrap;
}

.vault-tagline span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.vault-tagline span::after {
  content: "·";
  color: var(--gold);
  margin-left: 7px;
}

.vault-tagline span:last-child::after { content: none; }
.vault-tagline i { color: var(--mint); }

/* ============================================================
   OVERLAYS
   ============================================================ */
.vault-vignette {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background:
    radial-gradient(140% 100% at 50% 45%, transparent 48%, rgba(2, 6, 15, .7) 100%),
    linear-gradient(180deg, rgba(2, 6, 15, .55) 0%, transparent 18%, transparent 82%, rgba(2, 6, 15, .65) 100%);
  mix-blend-mode: multiply;
}

.vault-grain {
  position: absolute;
  inset: 0;
  z-index: 31;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.vault-chromatic {
  position: absolute;
  inset: 0;
  z-index: 32;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .08;
  background:
    radial-gradient(circle at 0% 0%, rgba(252, 4, 4, .5) 0%, transparent 40%),
    radial-gradient(circle at 100% 0%, rgba(15, 115, 219, .5) 0%, transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(245, 179, 1, .4) 0%, transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(34, 211, 238, .4) 0%, transparent 40%);
  animation: chromaShift 8s ease-in-out infinite alternate;
}

@keyframes chromaShift {
  0%   { transform: scale(1); }
  100% { transform: scale(1.04); }
}

/* Unlock flash */
.unlock-flash {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(255, 255, 255, .95) 0%, rgba(245, 179, 1, .5) 20%, transparent 60%);
  opacity: 0;
}

#vault.unlocking .unlock-flash {
  animation: flashOut 1s var(--ease) forwards;
}

@keyframes flashOut {
  0%   { opacity: 0; transform: scale(.5); }
  20%  { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(2); }
}

/* ============================================================
   MOBILE ADAPTATIONS
   ============================================================ */
@media (max-width: 1023px) {
  .holo-id { display: none; }
}

@media (max-width: 767px) {
  .threat-indicator .threat-text { display: none; }
  .threat-indicator { padding: 10px 14px; }
  .vault-top { padding-top: calc(20px + env(safe-area-inset-top, 0px)); }
  .vault-brand-text small { display: none; }
  .vault-brand-text { font-size: 1.1rem; }
  .bracket { width: 44px; height: 44px; }
  .bracket-tl, .bracket-tr { top: 14px; }
  .bracket-bl, .bracket-br { bottom: 80px; }
  .bracket-tl, .bracket-bl { left: 14px; }
  .bracket-tr, .bracket-br { right: 14px; }
  .vault-tagline { font-size: 8px; letter-spacing: .14em; gap: 8px; justify-content: center; width: 100%; }
  .vault-bottom { justify-content: center; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .encryption-badge { font-size: 8.5px; padding: 7px 12px; }
  .terminal-body { height: 84px; padding: 10px 14px; font-size: 9.5px; }
  .terminal-head { padding: 8px 12px; }
  .checkpoints { gap: 6px; }
  .checkpoint { padding: 10px 6px; border-radius: 12px; }
  .checkpoint-icon { width: 28px; height: 28px; font-size: .85rem; border-radius: 9px; }
  .checkpoint-label { font-size: 7px; letter-spacing: .1em; }
  .checkpoint-status { font-size: .58rem; }
  .checkpoint-status::before { width: 5px; height: 5px; }
  .vault-center { padding: clamp(90px, 12vh, 120px) 16px clamp(140px, 20vh, 180px); gap: 14px; }
  .vault-status-line { font-size: 8.5px; letter-spacing: .2em; padding: 8px 14px; gap: 10px; }
  .progress-head { align-items: flex-end; }
  .progress-pct { font-size: 1.8rem; }
  .progress-track { height: 8px; }
  .progress-head-marker { width: 18px; height: 18px; }
}

@media (max-width: 480px) {
  .vault-brand-text small { display: none; }
  .vault-brand-text { font-size: 1rem; }
  .vault-logo { width: 48px; height: 48px; border-radius: 16px; }
  .vault-logo img { width: 82%; height: 82%; }
  .vault-logo .fb { font-size: 1.6rem; }
  .vault-time-value { font-size: 1rem; }
  .vault-time-label { font-size: 8px; letter-spacing: .16em; }
  .threat-indicator { padding: 8px 12px; gap: 10px; }
  .threat-bars { height: 16px; gap: 2px; }
  .threat-bar { width: 3px; }
  .checkpoints { gap: 5px; }
  .checkpoint { padding: 8px 4px; }
  .checkpoint-label { font-size: 6.5px; letter-spacing: .06em; }
  .checkpoint-status { font-size: .52rem; }
  .checkpoint-status::before { width: 4px; height: 4px; }
  .vault-status-line { font-size: 8px; letter-spacing: .14em; padding: 7px 12px; }
  .vault-status-line .live-dot { width: 6px; height: 6px; }
  .progress-pct { font-size: 1.6rem; }
  .terminal-body { height: 72px; font-size: 9px; line-height: 1.7; }
  .terminal-line { gap: 7px; }
  .vault-tagline { display: none; }
}

@media (max-width: 380px) {
  .vault-time { display: none; }
  .vault-brand-text { font-size: .9rem; }
  .vault-logo { width: 42px; height: 42px; border-radius: 14px; }
  .vault-logo .fb { font-size: 1.4rem; }
  .checkpoints { grid-template-columns: 1fr 1fr; gap: 6px; }
}

@media (max-height: 640px) {
  .vault-center { padding-top: clamp(80px, 10vh, 100px); padding-bottom: clamp(120px, 18vh, 160px); }
  .checkpoints { display: none; }
  .terminal { display: none; }
  .vault-status-line { display: none; }
}

@media (max-height: 520px) {
  .progress-head { align-items: center; }
  .progress-pct { font-size: 1.4rem; }
  .vault-tagline { display: none; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .15s !important;
  }
  .aurora-mesh, .tech-grid, .radar-ring, .sonar-sweep::before, .sonar-sweep::after,
  .wheel-layer, .ring-outer, .ring-ticks, .ring-dashed, .ring-segments, .ring-inner, .ring-core,
  .wheel-hub::before, .wheel-hub::after, .scan-laser, .scan-beam, .fingerprint, .fingerprint path,
  .fingerprint ellipse, .hex-col, .progress-fill, .progress-fill::after, .progress-head-marker,
  .checkpoint-icon, .checkpoint.active .checkpoint-icon, .terminal-cursor, .holo-id::before,
  .holo-id::after, .vault-chromatic, .threat-bar, .live-dot::after {
    animation: none !important;
  }
  .hex-stream, .scanlines, .scan-beam { display: none; }
  .progress-fill { transition: width .2s linear; }
  .wheel-hub::before, .wheel-hub::after { opacity: .6; }
}