/* Unreleased Vault (Raz, 2026-09-22): the door, the unauthorized popup and the
   silver vault album page. Loaded after player.css on index.html only. */

/* ---------- the door ---------- */
.vd{position:relative;width:100%;perspective:1600px;border-radius:14px;overflow:hidden;
  box-shadow:0 30px 70px -25px rgba(0,0,0,.95);-webkit-tap-highlight-color:transparent;isolation:isolate}
.vd svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.vd-door{cursor:pointer;outline:none;transition:transform 1.6s cubic-bezier(.55,0,.2,1)}
.vd-door:focus-visible .vd-ring{stroke:#d4af6a;stroke-width:4}
.vd-top{pointer-events:none}
.vd-glow{opacity:0;transition:opacity .9s .1s}
.vd-wheel,.vd-dial,.vd-disc{transform-box:fill-box;transform-origin:center}
.vd-wheel{transition:transform 1.25s cubic-bezier(.5,0,.25,1)}
.vd-dial{transition:transform .9s ease}
.vd-disc{transition:transform .16s}
.vd-bar{transition:transform .5s cubic-bezier(.6,0,.4,1)}
.vd-press .vd-disc{transform:scale(.95)}
.vd-spin .vd-wheel{transform:rotate(315deg)}
.vd-spin .vd-dial{transform:rotate(-200deg)}
.vd-unbolt .vd-bar-l{transform:translate(46px,0)}
.vd-unbolt .vd-bar-ur{transform:translate(-24px,40px)}
.vd-unbolt .vd-bar-lr{transform:translate(-24px,-40px)}
.vd-open .vd-door{transform:rotateY(-104deg)}
.vd-open .vd-glow{opacity:1}
.vd-deny .vd-door{animation:vd-shake .5s cubic-bezier(.36,.07,.19,.97)}
.vd-deny .vd-wheel{animation:vd-jiggle .5s ease}
@keyframes vd-shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
@keyframes vd-jiggle{25%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}}

/* Series page: the vault is a rectangular box, no label, no description */
.series-vault-box{margin:0 0 28px;max-width:100%}
.series-vault-box .vd{border-radius:16px}

/* Home-page button: full-screen door */
.vd-overlay{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;
  padding:calc(env(safe-area-inset-top,0px) + 56px) 16px calc(env(safe-area-inset-bottom,0px) + 24px);
  background:radial-gradient(ellipse at 50% 45%,rgba(40,36,28,.92),rgba(3,3,4,.97) 70%);
  animation:vd-fade .3s ease;transition:opacity .45s ease,transform .45s ease}
.vd-overlay .vd{width:min(100%,720px,calc((100vh - 120px) * 4 / 3))}
.vd-overlay.vd-enter{opacity:0;transform:scale(1.6)}
.vd-overlay-close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:16px;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);background:rgba(20,22,25,.85);color:#fff;font-size:18px;cursor:pointer}
@keyframes vd-fade{from{opacity:0}to{opacity:1}}

/* Not a member: VAULT ACCESS UNAUTHORIZED */
.vd-denied{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.72);animation:vd-fade .2s ease}
.vd-denied-card{width:min(100%,380px);text-align:center;padding:30px 24px 24px;border-radius:16px;
  background:
    radial-gradient(ellipse at 30% 0,rgba(255,255,255,.35),transparent 60%),
    repeating-linear-gradient(90deg,#c3c7cc 0 1px,#b4b9bf 1px 2px,#c9cdd2 2px 4px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 30px 60px -20px rgba(0,0,0,.9);animation:vd-pop .28s cubic-bezier(.2,.9,.3,1.2)}
@keyframes vd-pop{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}}
.vd-denied-led{display:inline-block;width:12px;height:12px;border-radius:50%;background:#e0493a;box-shadow:0 0 14px #e0493a;animation:vd-blink 1s steps(2) infinite}
@keyframes vd-blink{50%{opacity:.25}}
.vd-denied-title{margin:14px 0 6px;font-size:26px;line-height:1.05;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#b3261c;
  text-shadow:-1px -1px 0 rgba(255,255,255,.6),1px 1px 0 rgba(0,0,0,.25)}
.vd-denied-sub{margin:0 0 20px;font-size:13px;font-weight:800;letter-spacing:.32em;text-transform:uppercase;color:#23272c}
.vd-denied-close{border:0;border-radius:999px;padding:11px 26px;font-weight:700;font-size:15px;background:#c62f24;color:#fff;cursor:pointer}
.vd-denied-close:hover{background:#dd3a2e}

/* ---------- silver vault album page ---------- */
#album-view.vault-album{animation:vd-arrive .6s cubic-bezier(.2,.7,.2,1)}
@keyframes vd-arrive{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
#album-view.vault-album .album-header{border-radius:18px;padding:24px clamp(16px,3vw,32px);
  background:
    radial-gradient(ellipse at 20% 0,rgba(255,255,255,.45),transparent 60%),
    repeating-linear-gradient(90deg,#c3c7cc 0 1px,#b4b9bf 1px 2px,#c9cdd2 2px 4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(0,0,0,.25),0 20px 50px -24px rgba(0,0,0,.9)}
#album-view.vault-album #album-kicker{color:#2a2e33;letter-spacing:.28em;text-transform:uppercase;font-size:11px;font-weight:700}
#album-view.vault-album #album-title{color:#eceef0;text-shadow:-1px -1px 0 rgba(255,255,255,.7),2px 2px 0 rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35)}
#album-view.vault-album #album-artist,
#album-view.vault-album #album-share{display:none!important}
#album-view.vault-album #album-art{box-shadow:inset 0 0 0 1px rgba(255,240,200,.5),0 18px 40px -12px rgba(0,0,0,.8)}
#album-view.vault-album .album-like-btn{color:#23272c}
#album-view.vault-album #album-back{display:block;width:max-content;margin-left:auto;background:#c62f24;color:#fff;border:0;border-radius:999px;
  padding:9px 22px;font-weight:700;font-size:14px;text-decoration:none;cursor:pointer}
#album-view.vault-album #album-back:hover{background:#dd3a2e}
#album-view.vault-album #album-tracklist{max-width:680px;margin-left:auto;margin-right:auto}
#album-view.vault-album .vault-track-row .num{font-size:12px;font-variant-numeric:tabular-nums;color:#b8923f;letter-spacing:.02em}

@media (prefers-reduced-motion:reduce){
  .vd-door,.vd-wheel,.vd-dial,.vd-bar,.vd-glow,.vd-overlay{transition:none!important}
  .vd-deny .vd-door,.vd-deny .vd-wheel,#album-view.vault-album{animation:none!important}
}

/* Vault sort + shuffle (2026-09-22) */
#album-view.vault-album .vault-shuffle-btn{margin-left:8px;border:1px solid rgba(255,255,255,.14);background:rgba(20,22,25,.88);color:#eef0f2;
  border-radius:999px;padding:10px 20px;font-weight:700;font-size:14px;cursor:pointer}
#album-view.vault-album .vault-shuffle-btn:hover{border-color:#b8923f}
.vault-sort-bar{max-width:680px;margin:18px auto 10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vault-sort-label{font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#8a6a2c;margin-right:4px}
.vault-sort-bar button{border:1px solid rgba(212,175,106,.35);background:transparent;color:#d4af6a;border-radius:999px;padding:7px 16px;font-size:13px;font-weight:600;cursor:pointer}
.vault-sort-bar button:hover{border-color:#d4af6a}
.vault-sort-bar button.active{background:linear-gradient(90deg,#b8923f,#e9cf8f,#b8923f);color:#1d1405;border-color:transparent}

/* ---------- Not a member: the door tries, jams, alarm (2026-09-22) ---------- */
.vd{container-type:inline-size}
.vd-try .vd-wheel{transform:rotate(70deg);transition-duration:.75s}
.vd-try .vd-dial{transform:rotate(-70deg)}
.vd-try .vd-bar-l{transform:translate(12px,0)}
.vd-try .vd-bar-ur{transform:translate(-6px,10px)}
.vd-try .vd-bar-lr{transform:translate(-6px,-10px)}
.vd-try .vd-door{transform:rotateY(-9deg);transition:transform .8s cubic-bezier(.3,.6,.4,1)}
.vd-try .vd-glow{opacity:.35}
.vd-jam .vd-door{animation:vd-jam .5s cubic-bezier(.36,.07,.19,.97)}
.vd-jam .vd-wheel{transform:rotate(58deg);transition:transform .12s}
@keyframes vd-jam{0%{transform:rotateY(-9deg)}15%{transform:rotateY(-7deg) translateX(-4px)}30%{transform:rotateY(-9.5deg) translateX(4px)}45%{transform:rotateY(-8deg) translateX(-3px)}60%{transform:rotateY(-9deg) translateX(2px)}100%{transform:rotateY(-9deg)}}

.vd-alarm{position:absolute;inset:0;z-index:3;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .25s}
.vd-alarm::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 50%,rgba(255,30,15,0) 38%,rgba(255,30,15,.5) 100%);
  animation:vd-strobe .55s steps(2,jump-none) infinite}
.vd-alarm-on .vd-alarm{opacity:1}
@keyframes vd-strobe{from{opacity:1}to{opacity:.12}}
.vd-alarm-plate{position:relative;display:grid;justify-items:center;gap:clamp(4px,1cqw,10px);
  padding:clamp(12px,2.6cqw,24px) clamp(18px,4.5cqw,40px);border-radius:12px;
  background:rgba(14,4,4,.9);border:2px solid #e0301f;
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 40px rgba(255,40,20,.55),inset 0 0 18px rgba(255,40,20,.25);
  transform:scale(.9);transition:transform .25s cubic-bezier(.2,.9,.3,1.3)}
.vd-alarm-on .vd-alarm-plate{transform:none}
.vd-alarm-plate b{font-weight:900;text-transform:uppercase;letter-spacing:.12em;line-height:1.05;color:#ff3b2b;
  font-size:clamp(16px,4.4cqw,36px);text-shadow:0 0 14px rgba(255,50,30,.8);animation:vd-blink .55s steps(2,jump-none) infinite}
.vd-alarm-sub{font-weight:800;text-transform:uppercase;letter-spacing:.34em;color:#f3d0cc;font-size:clamp(10px,1.7cqw,15px)}
.vd-alarm-led{width:clamp(12px,2.2cqw,20px);height:clamp(12px,2.2cqw,20px);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffb3a8,#ff2a17 55%,#7a0a02);box-shadow:0 0 18px 4px rgba(255,40,20,.85);
  animation:vd-blink .55s steps(2,jump-none) infinite}
.vd-wide .vd-alarm-plate b{font-size:clamp(16px,3cqw,34px)}
.vd-wide .vd-alarm-sub{font-size:clamp(10px,1.2cqw,15px)}

/* ---------- Home button: a brushed-steel vault plate (2026-09-22) ---------- */
#vault-shuffle-btn.vault-plate{position:relative;display:inline-flex;align-items:center;gap:9px;
  padding:8px 18px 8px 12px;border-radius:9px;border:1px solid #6f757c;cursor:pointer;color:#555b62;
  background:
    linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 45%,rgba(0,0,0,.14)),
    repeating-linear-gradient(90deg,#d3d7db 0 1px,#bfc4ca 1px 2px,#d9dce0 2px 4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(0,0,0,.25),0 4px 14px -6px rgba(0,0,0,.8);
  overflow:hidden;transition:transform .15s,box-shadow .15s}
#vault-shuffle-btn.vault-plate:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(0,0,0,.25),0 8px 20px -6px rgba(0,0,0,.9)}
#vault-shuffle-btn.vault-plate:active{transform:translateY(0) scale(.98)}
#vault-shuffle-btn.vault-plate::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-18deg);transition:left .6s ease}
#vault-shuffle-btn.vault-plate:hover::after{left:120%}
#vault-shuffle-btn.vault-plate .vp-rivet{position:absolute;width:4px;height:4px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#8d939a 60%,#4b5157)}
#vault-shuffle-btn.vault-plate .vp-rivet:nth-of-type(1){top:4px;left:4px}
#vault-shuffle-btn.vault-plate .vp-rivet:nth-of-type(2){top:4px;right:4px}
#vault-shuffle-btn.vault-plate .vp-rivet:nth-of-type(3){bottom:4px;left:4px}
#vault-shuffle-btn.vault-plate .vp-rivet:nth-of-type(4){bottom:4px;right:4px}
#vault-shuffle-btn.vault-plate .vp-wheel{width:18px;height:18px;flex:none;transition:transform .6s cubic-bezier(.5,0,.25,1);
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.7))}
#vault-shuffle-btn.vault-plate:hover .vp-wheel{transform:rotate(90deg)}
#vault-shuffle-btn.vault-plate .vp-word{font-weight:900;font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:#5a6067;
  text-shadow:0 1px 0 rgba(255,255,255,.85),0 -1px 0 rgba(0,0,0,.28)}
#vault-shuffle-btn.vault-plate:focus-visible{outline:2px solid #d4af6a;outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .vd-try .vd-door,.vd-try .vd-wheel,.vd-alarm-plate,#vault-shuffle-btn.vault-plate .vp-wheel{transition:none!important}
  .vd-jam .vd-door,.vd-alarm::before,.vd-alarm-plate b,.vd-alarm-led{animation:none!important}
  #vault-shuffle-btn.vault-plate::after{display:none}
}

/* Phones: a silver circle with a plain padlock (Raz, 2026-09-22) */
#vault-shuffle-btn.vault-plate .vp-lock{display:none;width:17px;height:17px;flex:none;filter:drop-shadow(0 1px 0 rgba(255,255,255,.7))}
@media (max-width:760px){
  #vault-shuffle-btn.vault-plate,
  #vault-shuffle-btn.vault-plate:hover{width:34px;height:34px;padding:0;border-radius:50%;justify-content:center;gap:0;
    border:1px solid #6f757c;color:#3f444a;transform:none;
    background:
      radial-gradient(circle at 35% 28%,rgba(255,255,255,.9),rgba(255,255,255,0) 55%),
      linear-gradient(160deg,#e4e7ea,#aab0b7 60%,#8b9198);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -2px 3px rgba(0,0,0,.2),0 3px 10px -4px rgba(0,0,0,.8)}
  #vault-shuffle-btn.vault-plate .vp-rivet,
  #vault-shuffle-btn.vault-plate .vp-wheel,
  #vault-shuffle-btn.vault-plate .vp-word{display:none}
  #vault-shuffle-btn.vault-plate .vp-lock{display:block}
  #vault-shuffle-btn.vault-plate::after{display:none}
}