/* iMU opening intro: vault dial 69 · 221 · 25 -> door swings -> light -> hero. Transforms/opacity only; canvas sparks. */
/* pre-paint cover (html.intro-on is set by the inline head script); failsafe-fades even if JS never runs */
html.intro-on body::after{content:"";position:fixed;inset:0;z-index:500;background:#030303;pointer-events:none;animation:imxSafe .5s 6s forwards}
html.intro-run body::after,html.intro-done body::after{display:none}
html.intro-lock,html.intro-lock body{overflow:hidden}
@keyframes imxSafe{to{opacity:0;visibility:hidden}}
.imx{--D:min(66vmin,560px);position:fixed;inset:0;z-index:510;background:#030303;overflow:hidden;contain:strict;opacity:var(--imxo,1);visibility:visible;
  -webkit-tap-highlight-color:transparent;cursor:pointer;perspective:1400px;perspective-origin:50% var(--cyp,50%)}
/* while the dial spins the door faces the camera, so flatten 3D (identical look, far cheaper to composite) */
.imx .door-rig.flat,.imx .door-rig.flat .door-tilt,.imx .door-rig.flat .door,.imx .door-rig.flat .dial,.imx .door-rig.flat .spokes{transform-style:flat}
.imx.gone{visibility:hidden}
.imx-vig{position:absolute;inset:0;background:radial-gradient(60% 55% at 50% 48%,rgba(60,44,14,.35),rgba(0,0,0,0) 60%),radial-gradient(120% 90% at 50% 50%,transparent 50%,#000 100%);pointer-events:none}
.imx-ring{position:absolute;left:50%;top:var(--cyp,50%);width:calc(var(--D) * 1.42);height:calc(var(--D) * 1.42);margin:calc(var(--D) * -.71) 0 0 calc(var(--D) * -.71);border-radius:50%;
  border:1px solid rgba(242,210,122,.16);box-shadow:0 0 0 calc(var(--D) * .06) rgba(242,210,122,.025);opacity:var(--ri,0);transform:scale(calc(.9 + var(--ri,0) * .1)) rotate(calc(var(--ri,0) * 40deg))}
.imx-ring::before{content:"";position:absolute;inset:-1px;border-radius:50%;background:repeating-conic-gradient(rgba(242,210,122,.55) 0 .5deg,transparent .5deg 6deg);
  -webkit-mask:radial-gradient(closest-side,transparent 96%,#000 96.5%);mask:radial-gradient(closest-side,transparent 96%,#000 96.5%)}
/* the cloned vault door */
.imx .door-rig{position:absolute;left:50%;top:var(--cyp,50%);--D:inherit;transform:translate3d(-50%,-50%,0) scale(var(--s,1));opacity:var(--ri,0)}
.imx .door-tilt{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.imx .d-face{will-change:transform}
/* readout under the dial */
.imx-read{position:absolute;left:50%;top:calc(var(--cyp,50%) + var(--D) * .5 + var(--D) * .14);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;
  opacity:var(--rdo,0);font:500 11px/1 var(--ui,Inter,sans-serif);letter-spacing:.32em;text-transform:uppercase;color:#968d77;white-space:nowrap}
.imx-num{font:300 clamp(30px,6.2vmin,46px)/1 var(--disp,Jost,sans-serif);letter-spacing:.08em;color:#ece6d6;font-variant-numeric:tabular-nums;min-width:3ch;text-align:center}
.imx-combo{display:flex;gap:18px}
.imx-combo span{position:relative;padding:7px 0 0;color:#5f594b;transition:color .25s}
.imx-combo span::before{content:"";position:absolute;left:0;right:.32em;top:0;height:1px;background:currentColor;opacity:.6}
.imx-combo span.ok{color:#f2d27a;text-shadow:0 0 14px rgba(242,210,122,.55)}
.imx-combo b{font-weight:500;color:inherit}
/* light flood (scale, not clip-path) */
.imx-flood{position:absolute;left:50%;top:var(--cyp,50%);width:40vmax;height:40vmax;margin:-20vmax 0 0 -20vmax;border-radius:50%;pointer-events:none;opacity:var(--flo,0);
  transform:scale(var(--fls,0));will-change:transform,opacity;
  background:radial-gradient(closest-side,#fffaf0 0%,#fbe3a6 22%,#e3b45a 45%,rgba(168,122,44,.6) 70%,rgba(110,76,20,0) 100%)}
.imx-rays{position:absolute;left:50%;top:var(--cyp,50%);width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;pointer-events:none;opacity:var(--ray,0);
  background:repeating-conic-gradient(from 0deg,rgba(255,236,180,.22) 0 1.6deg,transparent 1.6deg 9deg);
  -webkit-mask:radial-gradient(closest-side,#000 4%,transparent 60%);mask:radial-gradient(closest-side,#000 4%,transparent 60%);transform:rotate(var(--rr,0deg))}
.imx-cv{position:fixed;inset:0;width:100%;height:100%;z-index:520;pointer-events:none}
.imx-skip{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:3;display:inline-flex;align-items:center;gap:10px;
  padding:11px 16px;border:1px solid rgba(242,210,122,.35);background:rgba(8,7,5,.6);color:#d9cfb4;font:600 10.5px/1 var(--ui,Inter,sans-serif);letter-spacing:.26em;text-transform:uppercase;cursor:pointer;
  opacity:var(--sko,0);transition:border-color .2s,color .2s}
.imx-skip:hover,.imx-skip:focus-visible{border-color:#f2d27a;color:#fff4c9;outline:none}
.imx-skip i{display:inline-block;width:0;height:0;border-left:6px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent}
.imx-skip i+i{margin-left:-7px}
.imx-brand{position:absolute;left:50%;top:max(22px,env(safe-area-inset-top));transform:translateX(-50%);font:500 10.5px/1 var(--ui,Inter,sans-serif);letter-spacing:.42em;text-transform:uppercase;color:#7d7462;opacity:var(--rdo,0);white-space:nowrap}
/* hero push-out + metallic sweep */
html.intro-run .hero-in{transform:translate3d(0,0,0) scale(var(--hs,1));will-change:transform}
html.intro-run .hero .title{opacity:var(--ht,1)}
.title .t2.imx-sweep{animation:sheen 1.5s cubic-bezier(.5,0,.3,1) 1 both}
.title .t2.imx-sweep::after{content:"";position:absolute;inset:-12% -6%;pointer-events:none;mix-blend-mode:screen;opacity:0;
  background:radial-gradient(closest-side,rgba(255,236,170,.55),rgba(255,210,110,0));animation:imxBloom 1.4s ease-out 1 both}
@keyframes imxBloom{0%{opacity:0;transform:scale(.6)}25%{opacity:1}100%{opacity:0;transform:scale(1.25)}}
.rm .imx .door-rig,.rm .imx-read,.rm .imx-ring{display:none}
@media (max-width:860px){
  .imx{--D:min(72vw,42svh,400px)}
  .imx-combo{gap:14px}
  .imx-read{letter-spacing:.26em}
}
/* perf + artifact fix: the door-face drop shadow (0 30px 70px) and the frame halo (80px outer glow) are large blurred
   shadows inside the 3D door. They are re-rastered every frame of the swing, and the door-face one gets clipped to its
   layer (the faint dark block at lower left during the swing). In the intro they are replaced by one static 2D gradient
   (.imx-halo) behind the door; the black drop shadow was black-on-black, so the look is unchanged. */
.imx .door-face{box-shadow:inset 0 0 0 2px rgba(255,255,255,.08),inset 0 0 0 3px rgba(0,0,0,.8),inset 0 -20px 50px rgba(0,0,0,.6)}
.imx .frame-glow{box-shadow:0 0 0 1px rgba(242,210,122,.25),inset 0 0 60px rgba(0,0,0,.9)}
.imx-halo{position:absolute;left:50%;top:var(--cyp,50%);width:calc(var(--D) * 1.55);height:calc(var(--D) * 1.55);margin:calc(var(--D) * -.775) 0 0 calc(var(--D) * -.775);
  border-radius:50%;pointer-events:none;opacity:var(--hao,0);transform:scale(var(--has,1));
  background:radial-gradient(closest-side,rgba(214,170,70,.16) 70%,rgba(214,170,70,.08) 80%,rgba(214,170,70,.025) 92%,transparent 100%)}
/* will-change only on what moves: the door rig, the dial face, rays, flood (and .door from imu.css) */
.imx-rays{will-change:transform}