/* mirror-vault.css — THE VAULT ROOM, the instrument under the hero.
 *
 * A dark room set into the light page, built after two reference pictures: each bank's vault is a front-facing
 * safe of thick rounded acrylic with a chrome round door (picture 2); the blind operator between them is a glass
 * cube of circuit cells on stacked glass plates (picture 1). The drawing is inline SVG and carries its own ground,
 * so it reads with this file missing. Over it sits a layer of real glass (.vr-glass): the floating cards, the
 * operator's two panes and the label chips are HTML with a backdrop blur, so they frost whatever the room shows
 * behind them. mirror-vault.js turns the wheels and strikes the verdicts; nothing in this file decides anything.
 *
 * RULES THIS FILE KEEPS (server/vault-room.test.js holds them):
 *   - it never sets transform, opacity or filter on #demo, the figure: mirror-motion.js scales the figure, and an
 *     opacity or filter there would flatten the readout's backdrop-blur;
 *   - nothing with a transform attribute is animated (a CSS transform would replace it): every moving part of the
 *     drawing has a bare wrapper of its own;
 *   - the verdict label's fill is left to the script (a CSS fill would beat the attribute it writes);
 *   - every loop stops off screen and for readers who ask for less motion. */

@property --vr-glow{syntax:'<color>';inherits:true;initial-value:#C7A868}

/* ── the stage ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.vr-stage{position:relative;border-radius:26px;overflow:hidden;background:#060D16;isolation:isolate;container-type:inline-size;
  box-shadow:0 0 0 1px rgba(6,13,22,.2),0 64px 110px -64px var(--vg-vc,rgba(214,175,96,.44)),0 42px 80px -50px rgba(4,10,18,.78);
  transition:box-shadow .6s ease;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.vr-stage::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  box-shadow:inset 0 1px 0 rgba(214,234,248,.16),inset 0 0 0 1px rgba(214,234,248,.07)}

/* ── the verdict's colour: gold for a clear, blue for a divergence, grey for doubt ─────────────────────────────── */
#vault-scene{--vr-glow:#C7A868;transition:--vr-glow .6s ease}
#vault-scene.is-div{--vr-glow:#5CA8F0}
#vault-scene.is-und{--vr-glow:#8A949B}

/* ── type in the drawing ──────────────────────────────────────────────────────────────────────────────────────── */
#vault-scene text{font-family:var(--mono,"IBM Plex Mono",ui-monospace,monospace)}
#vault-scene .vr-lt{font-size:13px;font-weight:600;letter-spacing:.24em;fill:#F0F7FC}
#vault-scene .vr-ls{font-size:9.5px;letter-spacing:.2em;fill:#B4CADC}
#vault-scene .vr-eng{font-size:9.5px;font-weight:600;letter-spacing:.3em;fill:#A8BDCF}
#vault-scene .vr-eng-shadow{fill:#02060B}
#vault-scene .vr-hint{font-size:8px;letter-spacing:.3em;fill:#E3CB94}
#vault-scene .vr-vl{font-size:12px;font-weight:600;letter-spacing:.22em}

/* ── the wheels: the one control in the drawing, and it answers ────────────────────────────────────────────────── */
#vault-scene [role="slider"]{cursor:grab}
.vr-stage.vr-hold,.vr-stage.vr-hold #vault-scene [role="slider"]{cursor:grabbing}
#vault-scene [role="slider"]:focus{outline:none}
#vault-scene .vr-focus{opacity:0;transition:opacity .2s ease}
#vault-scene .vr-door:hover .vr-focus{opacity:.45}
#vault-scene .vr-door:focus-within .vr-focus{opacity:1}
#vault-scene .vr-door:hover .vr-lock{stroke:#FFFFFF}
#vault-scene .vr-ring{opacity:0;transform-box:fill-box;transform-origin:50% 50%}
#vault-scene .vr-vault.vr-knock .vr-ring{animation:vrKnock .9s cubic-bezier(.2,.7,.3,1)}
#vault-scene .vr-vault.vr-knock .vr-hub{animation:vrHub .9s ease-out}
#vault-scene .vr-vault.vr-knock .vr-innerglow{animation:vrFlare .9s ease-out}
@keyframes vrKnock{0%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(3.9)}}
@keyframes vrHub{0%{stroke:#FFFFFF;stroke-width:3}}
@keyframes vrFlare{0%{opacity:1;filter:brightness(1.8)}}

/* ── the trail of signed verdicts: glass coins ──────────────────────────────────────────────────────────────────── */
#vault-scene .vr-sym path{opacity:0;transition:opacity .45s ease}
#vault-scene .vr-ok{stroke:#F0D9A0}
#vault-scene .vr-ne{stroke:#9CCBF4}
#vault-scene .vr-un{stroke:#C3CCD2}
#vault-scene .vr-sym{filter:url(#vrBloom)}
#vault-scene .vr-disc.is-rec .vr-ok,#vault-scene .vr-disc.is-div .vr-ne,#vault-scene .vr-disc.is-und .vr-un{opacity:1}
#vault-scene .vr-disc-face{transition:stroke .45s ease}
#vault-scene .vr-disc.is-rec .vr-disc-face{stroke:#F2E0B2}
#vault-scene .vr-disc.is-div .vr-disc-face{stroke:#B4D8F8}
#vault-scene .vr-disc.is-und .vr-disc-face{stroke:#CDD5DA}
#vault-scene .vr-disc-pool{opacity:0;transition:opacity .45s ease}
#vault-scene .vr-disc.is-rec .vr-disc-pool,#vault-scene .vr-disc.is-div .vr-disc-pool,#vault-scene .vr-disc.is-und .vr-disc-pool{opacity:.9}
#vault-scene .vr-disc[data-slot="0"] .vr-sym{opacity:.5}
#vault-scene .vr-disc[data-slot="1"] .vr-sym{opacity:.62}
#vault-scene .vr-disc[data-slot="2"] .vr-sym{opacity:.75}
#vault-scene .vr-disc[data-slot="3"] .vr-sym{opacity:.88}
#vault-scene .vr-disc-in{transform-box:fill-box;transform-origin:50% 50%;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
#vault-scene .vr-disc:hover .vr-disc-in{transform:translateY(-4px)}
#vault-scene .vr-disc.vr-new .vr-disc-in{animation:vrStamp .8s cubic-bezier(.2,.9,.25,1.15)}
#vault-scene .vr-disc.vr-new .vr-disc-face{animation:vrStruck 1.2s ease-out}
@keyframes vrStamp{0%{opacity:0;transform:translateY(-34px) scale(.7)}55%{opacity:1;transform:translateY(2px) scale(1.05)}100%{transform:none}}
@keyframes vrStruck{0%{stroke:#FFFFFF;stroke-width:3.2}}

/* ── what a verdict does to the room ───────────────────────────────────────────────────────────────────────────── */
#vault-scene .vr-flow,#vault-scene .vr-beams{transition:opacity .5s ease}
#vault-scene .vr-stream{transition:opacity .5s ease}
#vault-scene.is-und .vr-flow-R,#vault-scene.is-und .vr-stream-R,#vault-scene.is-und .vr-beams-R{opacity:0}
#vault-scene.is-und .vr-rail-R{stroke-dasharray:3 7}

/* ── the room breathes ─────────────────────────────────────────────────────────────────────────────────────────── */
#vault-scene .vr-data > g{animation:vrShimmer 3.4s ease-in-out infinite alternate}
#vault-scene #vaultR .vr-data > g{animation-duration:4.2s}
#vault-scene .vr-cols{animation:vrShimmer 2.6s ease-in-out infinite alternate}
#vault-scene .vr-rain{animation:vrFall 1.5s linear infinite}
#vault-scene .vr-rain-1{animation-duration:1.9s}
#vault-scene .vr-flow{animation:vrFlow 1.1s linear infinite}
#vault-scene .vr-stream{animation:vrStream 1.6s linear infinite}
@keyframes vrStream{to{stroke-dashoffset:-20}}
#vault-scene .vr-sweep{animation:vrSweep 9s cubic-bezier(.45,0,.2,1) infinite}
#vault-scene #vaultR .vr-sweep{animation-delay:-4.5s}
#vault-scene .vr-cap{animation:vrBob 5.2s ease-in-out infinite}
#vault-scene .vr-gem{transform-box:fill-box;transform-origin:50% 50%;animation:vrGem 10s ease-in-out infinite}
#vault-scene .vr-par-gem:nth-of-type(2) .vr-gem{animation-delay:-2.5s}
#vault-scene .vr-par-gem:nth-of-type(3) .vr-gem{animation-delay:-5s}
#vault-scene .vr-par-gem:nth-of-type(4) .vr-gem{animation-delay:-7.5s}
#vault-scene .vr-coreglow{transform-box:fill-box;transform-origin:50% 50%;animation:vrBreathe 4.8s ease-in-out infinite}
#vault-scene.vr-pulse .vr-coreglow{animation:vrPulse .7s ease-out}
#vault-scene .vr-circuit,#vault-scene .vr-traces-cube{animation:vrShimmer 3s ease-in-out infinite alternate}
#vault-scene .vr-chainline{animation:vrShimmer 2.2s ease-in-out infinite alternate}
#vault-scene .vr-led{animation:vrShimmer 2.8s ease-in-out infinite alternate}
#vault-scene .vr-op:hover .vr-traces-cube,#vault-scene .vr-op:hover .vr-circuit{animation-duration:.6s}
@keyframes vrShimmer{from{opacity:.55}to{opacity:1}}
@keyframes vrFall{to{stroke-dashoffset:-24.2}}
@keyframes vrFlow{to{stroke-dashoffset:-18}}
@keyframes vrSweep{0%,30%{transform:translateX(0)}70%,100%{transform:translateX(420px)}}
@keyframes vrBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes vrGem{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(9deg)}}
@keyframes vrBreathe{0%,100%{opacity:.72;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}
@keyframes vrPulse{0%{opacity:1;transform:scale(1.2)}100%{opacity:.8;transform:scale(1)}}

/* ── the glass layer: real frosted glass over the room ─────────────────────────────────────────────────────────── */
.vr-glass{position:absolute;inset:0;z-index:2;pointer-events:none;font-family:var(--mono,"IBM Plex Mono",ui-monospace,monospace);color:#EAF5FD}
.vr-at{position:absolute}
.vr-par{transition:transform 1.2s cubic-bezier(.2,.7,.2,1),opacity .5s ease}
.vr-float{width:100%;height:100%;animation:vrBob 7.5s ease-in-out infinite}
.vr-at:nth-of-type(2) .vr-float{animation-delay:-1.8s}
.vr-at:nth-of-type(3) .vr-float{animation-delay:-3.6s}
.vr-at:nth-of-type(4) .vr-float{animation-delay:-5.4s}
.vr-card{position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden;pointer-events:auto;line-height:1.25;
  border-radius:1.15cqw;padding:.85cqw 1.1cqw;
  background:linear-gradient(150deg,rgba(255,255,255,.2),rgba(255,255,255,.05) 46%,rgba(255,255,255,.1));
  -webkit-backdrop-filter:blur(10px) saturate(1.6);backdrop-filter:blur(10px) saturate(1.6);
  border:1px solid rgba(235,246,255,.36);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(255,255,255,.08),0 1.8cqw 3.4cqw -1.2cqw rgba(0,0,0,.72),0 0 2.6cqw rgba(80,170,255,.18);
  transform:perspective(70cqw) rotateX(calc(var(--rx,0deg) + var(--py,0) * -8deg)) rotateY(calc(var(--ry,0deg) + var(--px,0) * 10deg)) rotateZ(var(--rz,0deg));
  transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .5s ease,border-color .3s ease}
.vr-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(70% 60% at calc(30% + var(--px,0) * 45%) calc(18% + var(--py,0) * 45%),rgba(255,255,255,.2),transparent 70%)}
.vr-card:hover{border-color:rgba(255,255,255,.6)}
.vr-tilt-l{--ry:20deg;--rx:5deg;--rz:-2deg}
.vr-tilt-c{--rx:14deg}
.vr-tilt-r{--ry:-20deg;--rx:5deg;--rz:2deg}
.vr-bar{display:flex;align-items:center;gap:.36cqw;margin:0 -1.1cqw .65cqw;padding:0 1.1cqw .5cqw;border-bottom:1px solid rgba(235,246,255,.18)}
.vr-bar i{flex:none;width:.5cqw;height:.5cqw;border-radius:50%;background:#E0785C}
.vr-bar i:nth-child(2){background:#E3CB94}
.vr-bar i:nth-child(3){background:#7FC7FF}
.vr-bar span{margin-left:auto;font-size:8px;font-size:.66cqw;letter-spacing:.16em;color:#CFE0EE;white-space:nowrap}
.vr-dhead{display:flex;align-items:center;gap:.8cqw}
.vr-icon-doc{flex:none;position:relative;width:2.3cqw;height:2.3cqw;border-radius:.55cqw;background:rgba(35,110,200,.38);
  border:1px solid rgba(130,205,255,.7);box-shadow:0 0 1.2cqw rgba(80,170,255,.6),inset 0 0 .8cqw rgba(120,200,255,.4)}
.vr-icon-doc::before{content:"";position:absolute;left:.62cqw;right:.62cqw;top:.42cqw;bottom:.42cqw;border:1.5px solid #B4E4FF;border-radius:.16cqw;box-shadow:0 0 .5cqw #4FB0FF}
.vr-icon-doc::after{content:"";position:absolute;left:.88cqw;right:.88cqw;top:.86cqw;height:.42cqw;border-top:1.5px solid #B4E4FF;border-bottom:1.5px solid #B4E4FF}
.vr-ti{font-size:12px;font-size:1.06cqw;font-weight:600;letter-spacing:.18em;color:#F4FAFF}
.vr-ln s{display:block;height:.2cqw;min-height:2px;border-radius:2px;background:rgba(169,205,232,.48);margin-top:.38cqw;width:5.6cqw}
.vr-ln s+s{width:3.8cqw}
.vr-k{font-size:8px;font-size:.66cqw;letter-spacing:.22em;color:#CFDDEA;margin-top:.62cqw}
.vr-v{font-family:var(--display,"Plus Jakarta Sans",system-ui,sans-serif);font-weight:800;font-size:28px;font-size:2.5cqw;letter-spacing:-.02em;line-height:1.05;
  color:#FFFFFF;font-variant-numeric:tabular-nums;text-shadow:0 0 1.4cqw rgba(120,200,255,.4)}
/* the band table: picture 2's calendar grid, five bands, the lit cell is the band this bank's price falls in */
.vr-cells{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.45cqw}
.vr-cell{display:flex;flex-direction:column;align-items:center;gap:.3cqw;cursor:pointer}
.vr-cell i{display:block;width:100%;aspect-ratio:1;border-radius:.38cqw;background:rgba(200,228,250,.1);border:1px solid rgba(220,240,255,.24);
  transition:background .3s ease,box-shadow .3s ease,border-color .3s ease}
.vr-cell em{font-style:normal;font-size:7px;font-size:.6cqw;color:#BFD2E2;white-space:nowrap}
.vr-cell:hover i{border-color:rgba(255,255,255,.7);background:rgba(200,228,250,.2)}
.vr-cell.is-on i{background:radial-gradient(circle at 50% 38%,#FFF1CC,#E3CB94 46%,#B8964F);border-color:#FFF1CC;
  box-shadow:0 0 1.3cqw rgba(227,203,148,.85),inset 0 0 .5cqw rgba(255,255,255,.7)}
.vr-cell.is-on em{color:#F6E3B4}
.vr-bfoot{font-size:7px;font-size:.58cqw;letter-spacing:.08em;color:#A9C1D4;margin-top:.55cqw;text-align:center;white-space:nowrap}
/* the payment: picture 2's card, in the room's blue */
.vr-pay{background:linear-gradient(135deg,rgba(70,150,230,.46),rgba(16,52,104,.32) 55%,rgba(96,176,244,.36));border-color:rgba(190,225,255,.5)}
.vr-paytop{display:flex;align-items:center;justify-content:space-between}
.vr-paytop span{font-size:8px;font-size:.66cqw;letter-spacing:.16em;color:#DCEBF8;white-space:nowrap}
.vr-chipx{position:relative;width:2.1cqw;height:1.55cqw;border-radius:.3cqw;background:linear-gradient(135deg,#F6E2AE,#C7A868 58%,#EDD49A);
  box-shadow:inset 0 0 0 1px rgba(122,94,49,.55),0 0 .8cqw rgba(227,203,148,.45)}
.vr-chipx::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid rgba(122,94,49,.6)}
.vr-chipx::after{content:"";position:absolute;top:0;bottom:0;left:50%;border-left:1px solid rgba(122,94,49,.6)}
.vr-pay .vr-ti{margin-top:.55cqw}
.vr-pay .vr-k{margin-top:.35cqw}
.vr-paynum{font-size:7px;font-size:.62cqw;letter-spacing:.3em;color:rgba(230,244,255,.55);margin-top:.2cqw}
/* the operator's two panes: what it received, and nothing else */
.vr-pane{position:absolute;box-sizing:border-box;transform-origin:0 0;padding:.75cqw .9cqw;border-radius:.6cqw;
  background:linear-gradient(180deg,rgba(205,230,250,.17),rgba(120,170,215,.05));
  -webkit-backdrop-filter:blur(7px) saturate(1.4);backdrop-filter:blur(7px) saturate(1.4);
  border:1px solid rgba(220,240,255,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1cqw 2cqw -1cqw rgba(0,0,0,.6);
  transition:opacity .5s ease,border-color .5s ease}
.vr-ph{font-size:8px;font-size:.72cqw;letter-spacing:.22em;color:#C9DCEC}
.vr-cmt{margin:.6cqw 0 .5cqw}
.vr-cmt i{display:block;font-style:normal;font-size:10px;font-size:.88cqw;letter-spacing:.09em;line-height:1.55;color:#EEF6FC}
.vr-np{opacity:.8}
/* glass chips along the data lines, as in picture 1 */
.vr-tag{position:absolute;box-sizing:border-box;width:12.5%;transform-origin:0 0;padding:.32cqw .7cqw .38cqw;border-radius:.5cqw;
  background:linear-gradient(180deg,rgba(220,240,255,.2),rgba(150,195,235,.06));
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(220,240,255,.42);white-space:nowrap}
.vr-tag b{display:block;font-size:7px;font-size:.62cqw;font-weight:600;letter-spacing:.14em}
.vr-tag span{display:block;font-size:6px;font-size:.54cqw;letter-spacing:.1em;color:#B9CEDF}
.vr-tag-L{transform:matrix(.84,-.54,0,1,0,0)}
.vr-tag-R{transform:matrix(.84,.54,0,1,0,0)}
.vr-tag,.vr-pane{transition:opacity .5s ease,border-color .35s ease,box-shadow .35s ease}

/* ── follow the data: point at a bank (its vault or either of its cards) and everything that is that bank's
      lights up - its record, its band table, its vault, the one commitment that leaves it, and the pane where
      the operator holds that commitment. Point at the operator and both panes light: that is all it has. ── */
.vr-stage.hl-L [data-side="L"].vr-card,.vr-stage.hl-R [data-side="R"].vr-card{border-color:rgba(255,255,255,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1.8cqw 3.4cqw -1.2cqw rgba(0,0,0,.72),0 0 3cqw rgba(110,195,255,.42)}
.vr-stage.hl-L .vr-tag-L,.vr-stage.hl-R .vr-tag-R,.vr-stage.hl-L .vr-pane-L,.vr-stage.hl-R .vr-pane-R,.vr-stage.hl-op .vr-pane{
  border-color:rgba(255,255,255,.85);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 2.4cqw rgba(110,195,255,.5)}
.vr-stage.hl-L #vault-scene .vr-flow-L,.vr-stage.hl-R #vault-scene .vr-flow-R,
.vr-stage.hl-L #vault-scene .vr-stream-L,.vr-stage.hl-R #vault-scene .vr-stream-R{stroke-opacity:1;animation-duration:.45s}
.vr-stage.hl-L #vault-scene .vr-rail-L,.vr-stage.hl-R #vault-scene .vr-rail-R{stroke-opacity:.5}
.vr-stage.hl-L #vault-scene #vaultL .vr-innerglow,.vr-stage.hl-R #vault-scene #vaultR .vr-innerglow{filter:brightness(1.6)}
.vr-stage.hl-op #vault-scene .vr-traces-cube,.vr-stage.hl-op #vault-scene .vr-circuit{animation-duration:.6s}
#vault-scene .vr-disc{cursor:pointer}

/* a verdict, felt in the glass too */
.vr-stage.is-und [data-side="R"].vr-card,.vr-stage.is-und .vr-tag-R{opacity:.38}
.vr-stage.is-und .vr-pane-R{opacity:.5}
.vr-stage.is-div .vr-pane{border-color:rgba(156,203,244,.9)}

/* depth: what floats drifts a little against the pointer; the vaults and the wheels never move */
.vr-stage.vr-lean .vr-par-doc{transform:translate(calc(var(--vrx,0) * -.5cqw),calc(var(--vry,0) * -.35cqw))}
.vr-stage.vr-lean #vault-scene .vr-par-gem{transform:translate(calc(var(--vrx,0) * -11px),calc(var(--vry,0) * -8px))}
#vault-scene .vr-par{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}

/* off screen, every loop in the room holds still */
.vr-stage.vr-off *,#vault-scene.vr-off *{animation-play-state:paused!important}

/* ── a phone: the picture stays a picture. The readout under it carries every number in full-size type, so the
      room keeps only what still reads at that scale ──────────────────────────────────────────────────────────────── */
@container (max-width:640px){
  #vault-scene .vr-ls,#vault-scene .vr-hint,#vault-scene .vr-eng,#vault-scene .vr-vl,#vault-scene .vr-vlpill{display:none}
  #vault-scene .vr-lt{font-size:26px;letter-spacing:.08em}
  .vr-bar span,.vr-ln,.vr-k,.vr-bfoot,.vr-cell em,.vr-tag,.vr-paynum,.vr-ph,.vr-cmt,.vr-paytop span{display:none}
  .vr-bar{margin-bottom:.8cqw}
  .vr-ti{font-size:1.9cqw;letter-spacing:.06em}
  .vr-v{font-size:3.2cqw;letter-spacing:-.04em}
  .vr-icon-doc{width:3cqw;height:3cqw}
}
@media (max-width:640px){ .vr-stage{border-radius:16px} }

@media (prefers-reduced-transparency:reduce){
  .vr-card,.vr-pane,.vr-tag{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(16,30,46,.94)}
}
@media (prefers-reduced-motion:reduce){
  #vault-scene *,.vr-stage,.vr-stage *{animation:none!important;transition:none!important}
}