/* $SEED — THE VAULT DOOR 2.0 (fx/door.css)
   Augments the core door (#door inside .door-wrap). Core elements keep their place; this file only adds layers
   around and on top of them. Sizes are in cqw (the door-wrap is an inline-size container) so the whole mechanism
   scales from 322px (375px phones) to 500px. Prefix: dr- */

/* ---------- the frame: perspective for the hinge, idle state gate ---------- */
.dr-wrap{perspective:1800px;perspective-origin:50% 50%}
.dr-wrap #door{z-index:2;transform-origin:0% 50%;rotate:y 0deg;transition:rotate 2.6s cubic-bezier(.8,0,.18,1)}
.dr-wrap.dr-open #door{rotate:y -82deg}
.dr-wrap.dr-open.dr-ajar #door{rotate:y -60deg;transition:rotate 1.6s cubic-bezier(.25,1.25,.4,1)}
.dr-wrap.dr-blown #door{rotate:y -74deg;transition:rotate .75s cubic-bezier(.15,1.6,.35,1)}
/* first paint: whatever the state is, the door is already there — no swing, no slides */
.dr-noanim,.dr-noanim *{transition:none!important;animation-duration:0s!important}
/* core layers that need an explicit order now that there are more layers: sockets below the pins, slots and face above */
.dr-wrap #jackSlots{z-index:3}
.dr-wrap .door-face{z-index:4}
/* the core bolts become the sockets the pins sit in */
.dr-wrap #doorBolts i{background:#676c68;box-shadow:inset 2px 2px 0 rgba(0,0,0,.45),inset -1px -1px 0 rgba(255,255,255,.25)}

/* every layer of ours is decoration: never in the way of a click */
.dr-wrap .dr-sheen,.dr-wrap .dr-breath,.dr-wrap .dr-bezel,.dr-wrap .dr-pointer,.dr-wrap .dr-bolts,.dr-wrap .dr-sweep,
.dr-wrap .dr-chute,.dr-wrap .dr-gauge,.dr-wrap .dr-hinge,.dr-wrap .dr-interior{pointer-events:none}

/* ---------- idle: a reflection slides over the steel, a soft light breathes (compositor only) ---------- */
.dr-sheen,.dr-breath{position:absolute;inset:0;border-radius:50%;overflow:hidden;z-index:1;
  -webkit-mask:radial-gradient(circle closest-side,transparent 46%,#000 47.5%);mask:radial-gradient(circle closest-side,transparent 46%,#000 47.5%)}
.dr-sheen::before{content:"";position:absolute;top:-25%;bottom:-25%;left:-60%;width:40%;
  background:linear-gradient(100deg,transparent 0,rgba(255,255,255,0) 28%,rgba(255,255,255,.34) 50%,rgba(255,255,255,0) 72%,transparent 100%);
  transform:rotate(12deg);animation:dr-sheen 17s linear infinite}
@keyframes dr-sheen{0%{translate:0 0}55%{translate:560% 0}100%{translate:560% 0}}
.dr-breath{background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.6),transparent 56%);opacity:.08;animation:dr-breath 7s ease-in-out infinite}
@keyframes dr-breath{0%,100%{opacity:.06}50%{opacity:.38}}
.dr-wrap:not(.dr-live) .dr-sheen::before,.dr-wrap:not(.dr-live) .dr-breath,.dr-wrap:not(.dr-live) .dr-int-rays,
.dr-wrap:not(.dr-live) .dr-nj,.dr-wrap:not(.dr-live) .dr-g-lamp{animation-play-state:paused}

/* ---------- bezel: the numbered combination dial just inside the core tick ring ---------- */
.dr-bezel{position:absolute;inset:21%;border-radius:50%;z-index:1;transform:rotate(0deg)}
.dr-bezel svg{display:block;width:100%;height:100%}
.dr-bezel text{font-family:var(--stencil);font-weight:900;font-size:10.5px;text-anchor:middle;dominant-baseline:central;letter-spacing:.02em}
.dr-bezel .dr-bz-hi text{fill:rgba(255,255,255,.7)}
.dr-bezel .dr-bz-ink text{fill:rgba(18,18,18,.82)}
/* the fixed index mark riding on the ring edge, pointing down at the number the market is on */
.dr-pointer{position:absolute;left:50%;top:18.6%;width:3.6cqw;height:3.2cqw;margin-left:-1.8cqw;z-index:5;
  background:var(--ink);clip-path:polygon(0 0,100% 0,50% 100%)}
.dr-pointer::after{content:"";position:absolute;left:2px;right:2px;top:2px;bottom:3px;background:var(--orange);clip-path:polygon(0 0,100% 0,50% 100%)}

/* ---------- pins: 24 locking pins over the sockets, 2 per jackpot word ---------- */
.dr-bolts{position:absolute;inset:0;z-index:2}
.dr-bolt{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a,0deg))}
/* the pin runs from the socket (46cqw) out to the rim (50cqw): a shank with a domed head at the socket end */
.dr-pin{position:absolute;left:46cqw;top:0;width:4cqw;height:calc(6px + .5cqw);margin-top:calc(-3px - .25cqw);display:block;
  background:linear-gradient(180deg,#3a3d3b,#121212 45%,#2a2d2b);border-radius:0 2px 2px 0;
  translate:0 0;transition:translate .62s cubic-bezier(.7,0,.22,1)}
.dr-pin::before{content:"";position:absolute;left:0;top:50%;width:calc(16px + 1cqw);height:calc(16px + 1cqw);margin:calc(-8px - .5cqw) 0 0 calc(-8px - .5cqw);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f2f3f0,#aeb2ae 55%,#7d827e 100%);border:3px solid var(--ink);box-shadow:inset -2px -2px 0 rgba(0,0,0,.25)}
.dr-pin::after{content:"";position:absolute;left:calc(-3px - .35cqw);top:50%;width:calc(6px + .7cqw);height:2px;margin-top:-1px;background:var(--ink);opacity:.8}
.dr-pin.in{translate:-3.6cqw 0;filter:brightness(.82)}
/* bolts rattle in their sockets when a vault opens */
.dr-rattle .dr-pin{animation:dr-rattle .7s linear}
@keyframes dr-rattle{0%,100%{transform:none}12%{transform:translateX(-1.6px)}25%{transform:translateX(1.4px)}38%{transform:translateX(-1.2px)}50%{transform:translateX(1px)}65%{transform:translateX(-.7px)}80%{transform:translateX(.5px)}}
/* spark + dust where the pin lets go of the frame */
.dr-puff{position:absolute;left:49.4cqw;top:0;width:3.4cqw;height:3.4cqw;margin:-1.7cqw;border-radius:50%;opacity:0;display:block;
  background:radial-gradient(circle,rgba(255,210,58,.95) 0,rgba(232,234,230,.6) 40%,rgba(232,234,230,0) 70%)}
.dr-puff::before,.dr-puff::after{content:"";position:absolute;left:50%;top:50%;width:1.6cqw;height:2px;margin-top:-1px;background:var(--orange);transform-origin:0 50%;opacity:0}
.dr-puff::before{transform:rotate(-28deg)}.dr-puff::after{transform:rotate(26deg)}
.dr-puff.go{animation:dr-puff .55s ease-out}
.dr-puff.go::before{animation:dr-spark .42s ease-out}
.dr-puff.go::after{animation:dr-spark .42s .05s ease-out}
@keyframes dr-puff{0%{opacity:0;transform:scale(.3)}15%{opacity:1}100%{opacity:0;transform:scale(2.2) translateX(.6cqw)}}
@keyframes dr-spark{0%{opacity:1;translate:0 0;scale:.4 1}60%{opacity:1}100%{opacity:0;translate:2.4cqw 0;scale:1.4 1}}

/* ---------- gauge: pressure on the next locked vault, mounted on the lower-right of the door ---------- */
.dr-gauge{position:absolute;left:78.5%;top:78.5%;width:21cqw;height:21cqw;z-index:8}
.dr-gauge svg{display:block;width:100%;height:100%;overflow:visible}
.dr-gauge .dr-g-t{font-family:var(--body);font-weight:800;font-size:5.6px;letter-spacing:.14em;text-anchor:middle;fill:#4a4d4b}
.dr-gauge .dr-g-cap{font-family:var(--stencil);font-weight:900;font-size:11px;text-anchor:middle;fill:#121212}
.dr-gauge .dr-g-lamp{fill:#d9dcd8}
.dr-gauge.dr-hot .dr-g-cap{fill:var(--orange-d)}
.dr-gauge.dr-hot .dr-g-lamp{fill:var(--orange);animation:dr-lamp .8s steps(2,end) infinite}
@keyframes dr-lamp{50%{fill:#ffd23a}}
/* within 10% the needle cannot sit still */
.dr-gauge .dr-nj{transform-box:view-box;transform-origin:50px 50px}
.dr-gauge.dr-hot .dr-nj{animation:dr-jit .32s steps(3) infinite alternate}
@keyframes dr-jit{from{transform:rotate(-1.8deg)}to{transform:rotate(1.8deg)}}
/* the hot rules above reset play-state with their shorthand at equal specificity: pause them again off-screen/hidden */
.dr-wrap:not(.dr-live) .dr-gauge .dr-nj,.dr-wrap:not(.dr-live) .dr-gauge .dr-g-lamp{animation-play-state:paused}

/* ---------- chute: the coin slot on the top rim ---------- */
.dr-chute{position:absolute;left:50%;top:-4.6cqw;width:22cqw;height:8cqw;margin-left:-11cqw;z-index:7}
.dr-coins{position:absolute;inset:0;clip-path:inset(-30cqw 0 5cqw 0)}   /* the plate top is at 3cqw: coins vanish into it */
.dr-coin{position:absolute;left:50%;top:.4cqw;width:6.6cqw;height:6.6cqw;transform:translate(-50%,-16cqw);opacity:0}
.dr-coin svg{display:block;width:100%;height:100%}
.dr-slit{position:absolute;left:0;right:0;bottom:0;height:5cqw;z-index:2;
  background:linear-gradient(180deg,#eceeea,#c9cdc9);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.dr-slit::before{content:"";position:absolute;left:22%;right:22%;top:-1px;height:4px;background:var(--ink);border-radius:0 0 2px 2px}
.dr-slit::after{content:"FEES";position:absolute;left:0;right:0;bottom:0;text-align:center;font:800 clamp(6px,1.7cqw,9px)/1.7 var(--body);letter-spacing:.22em;color:var(--ink-2)}
/* the readout jumps when a coin lands */
#jackSol.dr-flick{animation:dr-flick .5s steps(2,end)}
@keyframes dr-flick{0%{color:var(--yellow);opacity:.5}45%{color:#fff;opacity:1}70%{color:var(--yellow);opacity:.7}100%{color:#fff;opacity:1}}

/* ---------- sweep: the hazard beacon over the door ---------- */
.dr-sweep{position:absolute;inset:-2%;border-radius:50%;overflow:hidden;z-index:6;opacity:0}
.dr-sweep::before{content:"";position:absolute;inset:-50%;
  background:conic-gradient(from 0deg,transparent 0 62%,rgba(255,74,28,0) 62%,rgba(255,74,28,.5) 80%,rgba(255,210,58,.85) 92%,transparent 100%)}
.dr-sweep.won::before{background:conic-gradient(from 0deg,transparent 0 62%,rgba(31,109,255,0) 62%,rgba(31,109,255,.5) 80%,rgba(190,214,255,.9) 92%,transparent 100%)}
.dr-sweep.out::before{background:conic-gradient(from 0deg,transparent 0 62%,rgba(255,210,58,0) 62%,rgba(255,210,58,.6) 80%,#fff 92%,transparent 100%)}
.dr-sweep.go{animation:dr-sweep-fade 1.7s linear forwards}
.dr-sweep.go::before{animation:dr-spin .85s linear 2}
@keyframes dr-sweep-fade{0%{opacity:1}75%{opacity:1}100%{opacity:0}}
@keyframes dr-spin{to{transform:rotate(360deg)}}

/* ---------- shudder: the whole door-wrap, so the frame, the hinge and the chamber shake together ---------- */
.dr-wrap.dr-shudder{animation:dr-shudder .75s cubic-bezier(.2,.6,.3,1)}
.dr-wrap.dr-shudder-big{animation:dr-shudder-big 1.1s cubic-bezier(.2,.6,.3,1)}
@keyframes dr-shudder{0%{transform:none}10%{transform:translate(-4px,2px) rotate(-.4deg)}25%{transform:translate(4px,-3px) rotate(.4deg)}40%{transform:translate(-3px,2px)}55%{transform:translate(2px,-1px)}70%{transform:translate(-1px,1px)}100%{transform:none}}
@keyframes dr-shudder-big{0%{transform:none}8%{transform:translate(-9px,4px) rotate(-.9deg)}20%{transform:translate(8px,-6px) rotate(.8deg)}32%{transform:translate(-6px,4px) rotate(-.5deg)}45%{transform:translate(5px,-3px)}58%{transform:translate(-3px,2px)}72%{transform:translate(2px,-1px)}100%{transform:none}}

/* ---------- hinge knuckles on the left rim ---------- */
.dr-hinge{position:absolute;left:-1.6cqw;width:4.6cqw;height:11cqw;z-index:9;border:3px solid var(--ink);border-radius:2.3cqw;
  background:linear-gradient(90deg,#7c817d,#c3c7c3 45%,#8f948f);box-shadow:2px 3px 0 var(--ink),inset 0 0 0 1px rgba(255,255,255,.35)}
.dr-hinge::before{content:"";position:absolute;left:0;right:0;top:30%;height:3px;background:var(--ink);opacity:.75}
.dr-hinge::after{content:"";position:absolute;left:0;right:0;top:calc(70% - 3px);height:3px;background:var(--ink);opacity:.75}
.dr-hinge-a{top:27%}.dr-hinge-b{top:62%}

/* ---------- the chamber behind the door ---------- */
.dr-interior{position:absolute;inset:0;border-radius:50%;z-index:1;visibility:hidden;overflow:hidden;color:#fff;
  background:radial-gradient(circle at 50% 45%,#4a4e4b 0,#2b2e2c 55%,#161817 100%);
  box-shadow:inset 0 0 0 5px var(--ink),inset 0 0 0 12px #3a3d3b,inset 0 18px 40px rgba(0,0,0,.55),10px 12px 0 var(--ink)}
.dr-wrap.dr-open .dr-interior,.dr-wrap.dr-blown .dr-interior{visibility:visible}
.dr-wrap.dr-blown .dr-interior{background:radial-gradient(circle at 50% 50%,#262927,#101211 70%)}
.dr-int-rays{position:absolute;inset:-30%;opacity:.9;
  background:repeating-conic-gradient(from 0deg,rgba(255,226,122,.16) 0 5deg,rgba(255,226,122,0) 5deg 30deg);
  -webkit-mask:radial-gradient(circle,#000 18%,transparent 58%);mask:radial-gradient(circle,#000 18%,transparent 58%);
  animation:dr-rays 48s linear infinite}
@keyframes dr-rays{to{transform:rotate(360deg)}}
.dr-wrap.dr-locked .dr-int-rays,.dr-wrap.dr-blown .dr-int-rays{animation:none;display:none}
/* the door rests ajar at 60°, covering the left half: everything inside lives in the right half */
.dr-int-inner{position:absolute;left:50%;right:3%;top:0;bottom:0}
.dr-int-plate{position:absolute;left:50%;top:20%;transform:translateX(-50%);text-align:center;white-space:nowrap;line-height:1}
.dr-int-sol{display:block;font-family:var(--stencil);font-weight:900;font-size:9cqw;line-height:1;color:var(--yellow);text-shadow:0 0 14px rgba(255,210,58,.45)}
.dr-int-lbl{display:block;margin-top:.8cqw;font-size:clamp(8px,2.1cqw,12px);font-weight:800;letter-spacing:.14em;color:#cfd3cf}
.dr-int-bars{position:absolute;left:0;right:0;top:41%;display:flex;flex-direction:column-reverse;align-items:center;gap:.8cqw;
  filter:drop-shadow(0 0 12px rgba(255,210,58,.5))}
.dr-int-row{display:flex;gap:1cqw}
.dr-bar{width:13cqw;height:5.6cqw;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#ffe98f,#ffd23a 50%,#e3b422);border:2px solid var(--ink);clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);
  font-family:var(--stencil);font-weight:900;font-size:3.2cqw;letter-spacing:.08em;color:var(--ink)}
/* blown: the bars fly out through the opening, the room goes dark, EMPTY is stamped on the back wall */
.dr-wrap.dr-blown:not(.dr-still) .dr-bar{animation:dr-fly .9s cubic-bezier(.3,0,.8,.4) forwards;animation-delay:calc(var(--i,0) * 55ms)}
.dr-wrap.dr-blown.dr-still .dr-bar{opacity:0}
@keyframes dr-fly{0%{transform:none;opacity:1}100%{transform:translate(var(--fx,0),var(--fy,-60cqw)) rotate(var(--fr,0deg)) scale(1.6);opacity:0}}
.dr-int-empty{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-10deg);opacity:0;
  font-family:var(--stencil);font-weight:900;font-size:12cqw;line-height:1;letter-spacing:.06em;color:var(--orange);
  border:.8cqw solid var(--orange);padding:.6cqw 2cqw .2cqw}
.dr-wrap.dr-blown .dr-int-empty{animation:dr-stampin .5s cubic-bezier(.2,1.4,.4,1) 1s forwards}
.dr-wrap.dr-blown.dr-still .dr-int-empty{opacity:1;animation:none}
@keyframes dr-stampin{0%{opacity:0;transform:translate(-50%,-50%) rotate(-10deg) scale(2.1)}70%{opacity:1;transform:translate(-50%,-50%) rotate(-10deg) scale(.94)}100%{opacity:1;transform:translate(-50%,-50%) rotate(-10deg) scale(1)}}

/* ---------- reduced motion: content stays, choreography goes ---------- */
@media (prefers-reduced-motion:reduce){
  .dr-wrap.dr-blown .dr-int-empty{opacity:1}
  .dr-wrap.dr-blown .dr-bar{opacity:0}
  .dr-sweep,.dr-puff,.dr-coin{display:none}
  .dr-breath{opacity:.15}
}