/* The Pattern Vault · a tap-to-enter cinematic mechanism. Only loaded on /vault/. */
.vault-screen[hidden]{display:none!important}
body.vault-intro-visible{overflow:hidden}
.vault-screen{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,1.7vh,18px);padding:clamp(12px,2vh,30px) 20px;background:radial-gradient(ellipse 85% 65% at 50% 54%,#382210 0,#171009 47%,#030302 81%);color:#e9d2a3;overflow-y:auto;overscroll-behavior:contain;isolation:isolate;transition:opacity .55s ease,visibility .55s ease}
.vault-screen-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0,transparent 44px,rgba(234,168,70,.022) 45px),radial-gradient(ellipse 48% 55% at 50% 57%,rgba(212,156,53,.19),transparent 80%)}
.vault-top{text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0}
.vault-intro-logo{display:block;width:clamp(120px,21vw,205px);height:auto;max-height:67px;object-fit:contain;margin:0 auto -3px}
.vault-overline{color:#c69f5f;font-size:clamp(8px,1vw,10px);letter-spacing:.32em;font-weight:700;margin:0;text-transform:uppercase}
.vault-top h2{font-family:var(--serif),Georgia,serif;font-size:clamp(29px,4.6vw,48px);font-weight:500;letter-spacing:.08em;line-height:1.07;margin:5px 0 0;text-shadow:0 2px 22px rgba(229,179,91,.18)}
.vault-top h2 em{font-style:normal;color:#e6ba68}
.vault-perspective{position:relative;width:min(430px,78vw);height:min(50svh,500px);min-height:260px;perspective:1250px;flex:0 1 auto;transform-style:preserve-3d;filter:drop-shadow(0 15px 24px rgba(0,0,0,.65))}
.vault-door-frame{position:absolute;inset:-11px;z-index:1;border:11px solid #382919;border-image:linear-gradient(130deg,#917244,#26170c 20%,#a8894c 43%,#211509 72%,#c19954) 1;box-shadow:inset 0 0 0 7px #0a0704,0 0 0 2px #9e7439,0 24px 65px rgba(0,0,0,.74);pointer-events:none}
.vault-inner-light{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(229,172,71,.25) 0%,#3d2811 30%,#0c0905 72%,#040302 100%);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:inset 0 0 50px 20px #070503;z-index:0}
.vault-inner-light span{font-size:clamp(11px,2vw,18px);letter-spacing:.25em;text-align:center;line-height:2.3;color:#f0d89f;text-shadow:0 0 18px #f1c268;z-index:1;font-weight:700}
.vault-inner-rays{position:absolute;inset:-60%;opacity:.4;background:conic-gradient(from 0deg at center,transparent 0deg,rgba(249,198,83,.07) 10deg,transparent 25deg,rgba(250,200,78,.11) 45deg,transparent 58deg,transparent 85deg,rgba(249,198,83,.06) 94deg,transparent 105deg,transparent 170deg,rgba(249,198,83,.08) 190deg,transparent 210deg,transparent 260deg,rgba(249,198,83,.07) 270deg,transparent 285deg,transparent 360deg)}
.vault-door{position:absolute;inset:0;z-index:2;transform-style:preserve-3d;transform-origin:2% 50%;will-change:transform;backface-visibility:hidden}
.vault-door-skin{position:absolute;inset:0;overflow:hidden;border:8px ridge #6d4c24;box-shadow:inset 0 0 0 3px rgba(245,191,92,.6),inset 0 0 0 14px #0e0b09,inset 0 0 0 17px #75603a,inset 0 0 45px 23px #070504,12px 13px 35px rgba(0,0,0,.7);background:radial-gradient(ellipse 60% 45% at 12% 20%,rgba(160,65,11,.5),transparent 75%),radial-gradient(ellipse 38% 58% at 87% 65%,rgba(125,49,12,.48),transparent 78%),repeating-linear-gradient(164deg,rgba(8,5,1,.11) 0 3px,transparent 4px 16px),linear-gradient(135deg,#8d6933 0,#2d2317 9%,#1a140c 34%,#5b3b1a 49%,#14100b 64%,#45301a 82%,#0d0905 100%)}
.vault-door-skin:before{content:'';position:absolute;inset:19px;border:2px solid rgba(232,188,95,.68);box-shadow:inset 0 0 0 6px rgba(6,6,5,.75),0 0 0 4px rgba(25,18,10,.8);pointer-events:none}
.vault-door-skin:after{content:'';position:absolute;inset:36px 44px;z-index:0;pointer-events:none;border-left:1px solid rgba(216,157,61,.35);border-right:1px solid rgba(216,157,61,.35);background:repeating-linear-gradient(90deg,transparent 0,transparent 13px,rgba(200,125,40,.027) 14px,transparent 16px)}
.vault-door-rivet{position:absolute;width:15px;height:15px;border-radius:50%;z-index:2;background:radial-gradient(circle at 32% 28%,#f2d68d 0,#aa8348 35%,#241404 70%);box-shadow:0 0 0 2px #22150c,0 0 0 3px #a67c40,1px 2px 3px #070402}
.vault-rivet-tl{left:30px;top:30px}.vault-rivet-tr{right:30px;top:30px}.vault-rivet-bl{left:30px;bottom:30px}.vault-rivet-br{right:30px;bottom:30px}
.vault-door-arch{position:absolute;left:50%;top:16%;transform:translateX(-50%);width:65%;height:8%;border:1px solid rgba(203,159,69,.55);border-bottom:0;border-radius:60% 60% 0 0;box-shadow:0 -7px 12px rgba(7,3,1,.65)}
.vault-door-top-label{position:absolute;top:7%;left:0;right:0;text-align:center;font-size:clamp(8px,1.2vw,12px);font-weight:700;letter-spacing:.35em;color:#edc986;text-shadow:0 2px 2px #110902;z-index:2}
.vault-door-wheel{position:absolute;top:42%;left:50%;width:min(46%,190px);aspect-ratio:1;transform:translate(-50%,-50%) rotate(0deg);z-index:3;border-radius:50%;background:radial-gradient(circle at 40% 30%,#dfb86f 0,#574026 28%,#0c0c0b 56%,#cf9b4a 65%,#2b1a0c 71%,#070604 86%);border:8px ridge #99743e;box-shadow:0 0 0 8px #0b0907,0 0 0 11px #786035,0 0 0 16px #1b110b,0 0 35px 22px rgba(0,0,0,.5),inset 0 3px 15px rgba(0,0,0,.9)}
.vault-wheel-rim{position:absolute;inset:6%;border:3px solid rgba(225,185,107,.83);border-radius:50%;box-shadow:inset 0 0 7px #060401,0 0 5px #302010}
.vault-wheel-inner{position:absolute;inset:22%;border:6px ridge #906732;border-radius:50%;background:radial-gradient(circle,#16110b 27%,#544025 57%,#140e09 87%);box-shadow:0 0 0 2px #0c0906}
.vault-spoke{position:absolute;left:50%;top:16%;width:10%;height:36%;transform-origin:50% 94%;transform:translateX(-50%) rotate(calc(var(--i)*60deg));background:linear-gradient(90deg,#40260d 0,#bd9152 30%,#f0cc83 53%,#64441e 80%,#201209 100%);border:1px solid #20160b;clip-path:polygon(8% 0,92% 0,100% 96%,0 96%);box-shadow:0 2px 5px #050301}
.vault-wheel-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:24%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fbe1a0,#ab7e42 38%,#3d2711 67%,#110904 79%);border:3px ridge #78542d;box-shadow:0 3px 7px #070302}
.vault-door-plate{position:absolute;left:17%;right:17%;bottom:12%;z-index:3;border:1px solid rgba(229,180,98,.65);padding:10px 5px 8px;text-align:center;background:linear-gradient(120deg,#201506,#493013 30%,#0f0b07 73%,#352312);box-shadow:inset 0 0 0 2px #100b08,0 2px 12px #100807}
.vault-door-plate b{display:block;color:#f3cd83;font-size:clamp(10px,2vw,15px);font-family:Georgia,serif;font-weight:500;letter-spacing:.12em;line-height:1.5}
.vault-door-plate span{display:block;color:#be9e60;font-size:clamp(6px,.9vw,9px);letter-spacing:.08em;margin-top:3px}
.vault-door-bottom-rule{position:absolute;bottom:7%;left:21%;right:21%;height:2px;background:linear-gradient(90deg,transparent,#d5a45a,transparent)}
.vault-floor-shadow{position:absolute;z-index:-1;left:-18%;right:-18%;bottom:-17px;height:29px;border-radius:50%;background:#010101;filter:blur(18px)}
.vault-intro-controls{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;flex-shrink:0}
.vault-action-label{font:italic 500 clamp(13px,1.5vw,17px) var(--serif),Georgia,serif;color:#cead79;margin:0}
.vault-open-btn{border:1px solid #edcd82;background:linear-gradient(110deg,#9b6727 0%,#eed087 50%,#a97932 100%);box-shadow:inset 0 0 0 1px #ad813b,0 0 18px rgba(185,126,39,.13);padding:12px 25px;min-height:48px;color:#1c1206;letter-spacing:.17em;font-size:11px;font-weight:800;transition:background .2s,transform .2s;touch-action:manipulation}
.vault-open-btn span{margin-left:10px;font-size:18px}.vault-open-btn:hover{transform:translateY(-2px)}.vault-open-btn:focus-visible,.vault-small-btn:focus-visible,.vault-replay-btn:focus-visible{outline:3px solid #ffdf95;outline-offset:4px}
.vault-control-line{display:flex;gap:16px;align-items:center;justify-content:center;font-size:11px;color:#927144;letter-spacing:.1em}
.vault-small-btn{font-size:10px;letter-spacing:.14em;text-transform:uppercase;background:transparent;border:0;border-bottom:1px solid #826032;color:#c5aa76;padding:6px 2px;touch-action:manipulation}
.vault-replay-btn{display:inline-flex;gap:10px;margin-top:20px;padding:10px 0;border:0;border-bottom:1px solid #866333;background:transparent;color:#d7ad63;font-size:10px;font-weight:700;letter-spacing:.13em;cursor:pointer}
.vault-screen.is-opening .vault-door-wheel{animation:vaultWheelTurn 5.7s linear forwards}
.vault-screen.is-opening .vault-door{animation:vaultDoorSwing 2.65s cubic-bezier(.43,.02,.13,1) 5.68s forwards}
.vault-screen.is-opening .vault-inner-light{animation:vaultInsideBrighten 2.65s ease 5.68s forwards}
.vault-screen.is-opening .vault-open-btn{opacity:.35;pointer-events:none}
.vault-screen.is-vanishing{opacity:0;pointer-events:none;visibility:hidden}
@keyframes vaultWheelTurn{0%{transform:translate(-50%,-50%) rotate(0deg)}5%{transform:translate(-50%,-50%) rotate(0deg)}28%{transform:translate(-50%,-50%) rotate(155deg)}37%{transform:translate(-50%,-50%) rotate(155deg)}62%{transform:translate(-50%,-50%) rotate(335deg)}71%{transform:translate(-50%,-50%) rotate(335deg)}100%{transform:translate(-50%,-50%) rotate(590deg)}}
@keyframes vaultDoorSwing{0%{transform:rotateY(0deg)}33%{transform:rotateY(-17deg)}100%{transform:rotateY(-106deg)}}
@keyframes vaultInsideBrighten{from{filter:brightness(1)}to{filter:brightness(1.75)}}
@media(max-width:600px){.vault-screen{padding:12px 12px 20px;gap:9px}.vault-perspective{width:min(78vw,410px);height:min(48svh,460px);min-height:232px}.vault-top h2{font-size:clamp(25px,7.8vw,38px)}.vault-intro-logo{width:clamp(132px,43vw,190px);max-height:58px}.vault-overline{font-size:8px;letter-spacing:.19em}.vault-door-plate{left:13%;right:13%;bottom:12%;padding:7px 3px}.vault-door-wheel{width:51%}.vault-door-skin:before{inset:14px}.vault-door-skin:after{inset:30px 25px}.vault-door-rivet{width:12px;height:12px}.vault-rivet-tl{left:22px;top:22px}.vault-rivet-tr{right:22px;top:22px}.vault-rivet-bl{left:22px;bottom:22px}.vault-rivet-br{right:22px;bottom:22px}.vault-door-top-label{letter-spacing:.13em}.vault-door-frame{inset:-7px;border-width:7px}.vault-action-label{font-size:14px}.vault-open-btn{min-height:46px;padding:12px 22px}}
@media(max-height:620px){.vault-screen{justify-content:flex-start}.vault-intro-logo{width:118px;max-height:48px}.vault-perspective{height:50svh;min-height:205px}.vault-top h2{font-size:26px}.vault-screen{gap:6px}}
@media(prefers-reduced-motion:reduce){.vault-screen,.vault-door,.vault-door-wheel,.vault-inner-light{animation:none!important;transition:none!important}}
/* Keep the captions and controls visually above the stage shadow. */
.vault-intro-controls{position:relative;z-index:10}
.vault-action-label{color:#e3c88f;text-shadow:0 1px 8px #120b03}
/* Antiqued black-and-gold concept texture over the functioning 3D door. */
.vault-door-skin{background-image:linear-gradient(rgba(9,7,5,.42),rgba(9,7,5,.55)),url('/media/vault-door-concept.png');background-size:cover;background-position:center 47%;background-blend-mode:multiply,normal}
.vault-door-top-label,.vault-door-plate{z-index:4;position:absolute;text-shadow:0 2px 5px #000,0 0 15px #000}
.vault-door-wheel{z-index:5}

/* Oct 21 vault correction: display the approved double-door artwork unobstructed. */
.vault-door-skin{background-image:url('/media/vault-door-concept-v2.png')!important;background-size:100% 100%!important;background-position:center!important;background-repeat:no-repeat!important;border:0!important;box-shadow:none!important}
.vault-door-skin::before,.vault-door-skin::after,.vault-door-rivet,.vault-door-arch,.vault-door-top-label,.vault-door-wheel,.vault-door-plate,.vault-door-bottom-rule{display:none!important}
.vault-screen.is-opening .vault-door{animation:vaultDoorSwing 5.0s cubic-bezier(.35,.06,.19,1) 3.3s forwards!important}
.vault-screen.is-opening .vault-inner-light{animation:vaultInsideBrighten 5.0s ease 3.3s forwards!important}

/* 2026-10-21: animate the wheel embedded in the selected door artwork.
   Three audible mechanism turns first; the door opens only with the creak. */
.vault-door-skin{position:absolute!important;overflow:hidden!important}
.vault-wheel-overlay{position:absolute;z-index:9;left:50%;top:54.56%;width:22.46%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(0deg);background:url('/media/vault-wheel-overlay.png') center/100% 100% no-repeat;pointer-events:none;will-change:transform}
.vault-screen.is-opening .vault-wheel-overlay{animation:pwThreeTurns 5.5s ease-in-out both!important}
.vault-screen.is-opening .vault-door{animation:pwDoorCreak 2.7s cubic-bezier(.58,.02,.19,1) 5.55s forwards!important}
.vault-screen.is-opening .vault-inner-light{animation:vaultInsideBrighten 2.7s ease 5.55s forwards!important}
@keyframes pwThreeTurns{
0%,3%{transform:translate(-50%,-50%) rotate(0deg)}
19%{transform:translate(-50%,-50%) rotate(135deg)}
30%{transform:translate(-50%,-50%) rotate(135deg)}
49%{transform:translate(-50%,-50%) rotate(290deg)}
60%{transform:translate(-50%,-50%) rotate(290deg)}
82%{transform:translate(-50%,-50%) rotate(475deg)}
100%{transform:translate(-50%,-50%) rotate(475deg)}
}
@keyframes pwDoorCreak{0%{transform:rotateY(0deg)}35%{transform:rotateY(-28deg)}100%{transform:rotateY(-106deg)}}

/* v6: real opaque wheel; never rotate or split the brand eye. */
.vault-wheel-overlay{left:50%!important;top:54.56%!important;width:36%!important;aspect-ratio:1!important;background:url('/media/vault-wheel-mechanical.png') center/contain no-repeat!important;filter:drop-shadow(0 2px 10px #000)!important}