/* ============================================
   Gold Vault Door - Boot Loader
   ============================================  */

/* --- Vault CSS Variables ---  */
:root {
  --vault-gold:       #D4AF37;
  --vault-gold-dark:  #8B6914;
  --vault-gold-light: #F5D98C;
  --vault-bg:         #0B0B0B;
}

/* --- Full-screen overlay ---  */
#vault-loader-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--vault-bg);
  transition: opacity 1s ease;
}
#vault-loader-overlay.hidden { opacity: 0; pointer-events: none; }

/* --- Noise / scanline textures ---  */
#vault-loader-overlay::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:400;
  opacity:.45; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
}
#vault-loader-overlay::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:390;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.03) 3px,rgba(0,0,0,.03) 4px);
}

/* --- Scene glow ---  */
#scene-glow {
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 50% 45% at 50% 52%, rgba(50,34,3,.65) 0%, transparent 68%);
  transition:background 2.5s ease;
}
#scene-glow.complete {
  background:radial-gradient(ellipse 62% 55% at 50% 52%,
    rgba(100,72,8,.55) 0%, rgba(55,38,4,.35) 42%, transparent 70%);
}

/* --- HUD corners ---  */
.hud-corner {
  position:fixed; width:30px; height:30px;
  border-style:solid; border-color:rgba(212,175,55,0);
  transition:border-color 1.5s, opacity 1.5s;
  z-index:200; opacity:0;
}
.hud-corner.on { border-color:rgba(212,175,55,.38); opacity:1; }
.corner-tl { top:14px; left:14px;   border-width:1px 0 0 1px; }
.corner-tr { top:14px; right:14px;  border-width:1px 1px 0 0; }
.corner-bl { bottom:14px; left:14px;  border-width:0 0 1px 1px; }
.corner-br { bottom:14px; right:14px; border-width:0 1px 1px 0; }

/* --- HUD dot ---  */
#hud-dot {
  position:fixed; top:18px; left:18px;
  width:6px; height:6px; border-radius:50%;
  background:var(--vault-gold); opacity:0; z-index:210;
  transition:opacity 1s;
}
#hud-dot.on   { opacity:1; animation:dotBlink 2.2s ease-in-out infinite; }
#hud-dot.done { animation:none; opacity:1; box-shadow:0 0 10px var(--vault-gold); }
@keyframes dotBlink {
  0%,100%{ opacity:1; box-shadow:0 0 6px var(--vault-gold); }
  50%    { opacity:.18; box-shadow:none; }
}

/* --- Scene container ---  */
#scene {
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:clamp(14px,3vmin,34px);
  z-index:10; opacity:0;
}

/* --- Vault stage ---  */
#vault-stage {
  position:relative;
  width:min(82vmin,420px);
  height:min(82vmin,420px);
}
#door-svg { width:100%; height:100%; overflow:visible; display:block; }

/* --- Ring spin animations ---  */
@keyframes spinCW  { to { transform:rotate(360deg);  } }
@keyframes spinCCW { to { transform:rotate(-360deg); } }

.ring-gear       { transform-origin:200px 200px; animation:spinCW  28s linear infinite; }
.ring-tick-outer { transform-origin:200px 200px; animation:spinCCW 17s linear infinite; }
.ring-band-outer { transform-origin:200px 200px; animation:spinCCW 36s linear infinite; }
.ring-band-inner { transform-origin:200px 200px; animation:spinCW  22s linear infinite; }
.ring-tick-inner { transform-origin:200px 200px; animation:spinCW  10s linear infinite; }
.ring-filigree   { transform-origin:200px 200px; animation:spinCCW 54s linear infinite; }

.wheel-g { transform-origin:200px 200px; }
.bolt.retracting { transition:transform .88s cubic-bezier(.4,0,.18,1); }

/* --- Glow ring pulse ---  */
.glow-ring { animation:glowPulse 3.8s ease-in-out infinite; }
@keyframes glowPulse { 0%,100%{ opacity:.35; } 50%{ opacity:.82; } }
.glow-ring.done { animation:glowPulseDone 1.8s ease-in-out infinite; }
@keyframes glowPulseDone {
  0%,100%{ opacity:.55; }
  50%    { opacity:1; filter:drop-shadow(0 0 18px rgba(212,175,55,.7)); }
}

/* --- Completion flash ---  */
#complete-flash {
  position:fixed; inset:0; pointer-events:none; z-index:50;
  background:radial-gradient(ellipse 80% 65% at 50% 50%,
    rgba(212,175,55,.18) 0%, rgba(140,100,10,.08) 45%, transparent 70%);
  opacity:0; transition:opacity 1.8s ease;
}
#complete-flash.on { opacity:1; }

/* --- Progress bar ---  */
#prog-wrap {
  position:relative; z-index:20;
  width:min(260px,70vw);
  opacity:0; transition:opacity 1s;
}
#prog-wrap.on { opacity:1; }

#prog-track {
  height:2px; background:rgba(212,175,55,.1); border-radius:2px; overflow:visible;
}
#prog-fill {
  height:100%; width:0%; border-radius:2px; position:relative;
  background:linear-gradient(90deg, var(--vault-gold-dark) 0%, var(--vault-gold) 50%, var(--vault-gold-light) 100%);
  box-shadow:0 0 12px rgba(212,175,55,.7), 0 0 4px rgba(212,175,55,.95);
  transition:width .28s ease;
}
#prog-fill::after {
  content:''; position:absolute; top:-1px; right:-2px;
  width:14px; height:4px; border-radius:2px;
  background:rgba(255,255,255,.85); filter:blur(2px);
}
#prog-fill.done::after { display:none; }
#prog-fill.done {
  box-shadow:0 0 22px rgba(212,175,55,.9), 0 0 8px rgba(212,175,55,1), 0 0 44px rgba(212,175,55,.3);
  transition:box-shadow 1.5s ease;
}

/* --- Reduced motion ---  */
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms!important; transition-duration:.001ms!important; }
}