:root{
  --cream:#F5EDDF; --cream-2:#EDE3D2; --cream-3:#E2D4BC;
  --coral:#E2766C; --coral-deep:#C95A50;
  --teal:#2DD4BF; --teal-deep:#0E9F8F;
  --abyss:#0F1828; --abyss-2:#1B2A3F;
  --ink:#0B1220; --ink-2:#1F2937;
  --sunset:#F4A261; --sand:#F2E4C9;
  --serif:'Fraunces', Georgia, serif;
  --sans:'Outfit', system-ui, -apple-system, sans-serif;
  --hand:'Fraunces','Times New Roman',serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--sans);font-size:17px;line-height:1.65;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1280px;margin:0 auto;padding:0 28px}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(245,237,223,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(15,24,40,.08);padding:14px 28px;display:flex;align-items:center;justify-content:space-between}
.nav-brand{font-family:var(--serif);font-weight:600;font-size:21px;letter-spacing:-.01em;color:var(--abyss)}
.nav-brand em{font-family:var(--hand);font-style:italic;color:var(--coral);font-style:normal;font-weight:400;font-size:24px;margin-left:4px}
.nav-links{display:flex;gap:28px;font-size:14.5px;font-weight:500}
.nav-links a{color:var(--ink-2);transition:color .2s}
.nav-links a:hover{color:var(--coral)}
.nav-cta{background:var(--coral);color:#fff;padding:10px 18px;border-radius:99px;font-weight:600;font-size:14px;transition:transform .2s,background .2s}
.nav-cta:hover{transform:translateY(-1px);background:var(--coral-deep)}
@media(max-width:780px){.nav-links{display:none}.nav{padding:12px 18px}}

/* Hero */
.hero{background:radial-gradient(1100px 380px at 80% -10%, rgba(45,212,191,.18), transparent 60%),radial-gradient(900px 320px at 10% 110%, rgba(226,118,108,.16), transparent 60%),linear-gradient(180deg, #FAF3E5 0%, #F5EDDF 100%);padding:80px 0 60px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px, rgba(15,24,40,.04) 1px, transparent 0);background-size:32px 32px;pointer-events:none}
.hero-inner{position:relative;z-index:1;max-width:920px;margin:0 auto;padding:0 28px;text-align:center}
.hero-eyebrow{font-family:var(--hand);font-style:italic;font-size:30px;color:var(--coral);margin-bottom:6px}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(44px, 6.5vw, 84px);line-height:1.02;letter-spacing:-.025em;color:var(--abyss);margin:6px 0 22px}
.hero h1 em{font-style:italic;color:var(--coral-deep);font-weight:500}
.hero-sub{font-size:18.5px;line-height:1.6;color:#3a4756;max-width:640px;margin:0 auto 28px}
.hero-meta{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;font-size:14px;color:#3a4756}
.hero-meta b{color:var(--abyss);font-weight:600;font-family:var(--serif);font-size:18px;display:block;line-height:1.1;margin-bottom:2px}

/* Filter row */
.filter-bar{position:sticky;top:62px;z-index:40;background:rgba(245,237,223,.96);backdrop-filter:blur(10px);border-bottom:1px solid rgba(15,24,40,.08);padding:16px 0}
.filter-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center}
.filter-h{font-family:var(--hand);font-style:italic;color:var(--coral);font-size:22px;margin-right:10px}
.filter-chip{padding:8px 16px;border-radius:99px;background:#fff;border:1px solid rgba(15,24,40,.12);font-size:13.5px;font-weight:500;color:var(--ink-2);cursor:pointer;transition:all .2s;user-select:none}
.filter-chip:hover{border-color:var(--coral);color:var(--coral)}
.filter-chip.is-active{background:var(--abyss);color:#fff;border-color:var(--abyss)}

/* Grid */
.grid-wrap{padding:60px 0 100px;background-image:radial-gradient(circle at 1px 1px,rgba(15,24,40,.04) 1px,transparent 0);background-size:32px 32px}
.grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:44px 32px;padding-top:14px}
@media(max-width:520px){.grid{grid-template-columns:1fr;gap:36px}}

/* Card — postcard styling: tilt, paper, washi tape, stamp, postmark */
.v-card{position:relative;display:flex;flex-direction:column;padding:0;background:transparent;border:0;box-shadow:none;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.v-card.is-hidden{display:none}
.v-card-paper{position:relative;background:#fff;border-radius:6px;overflow:hidden;display:flex;flex-direction:column;transform:rotate(var(--tilt,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease;box-shadow:0 1px 2px rgba(15,24,40,.10),0 12px 28px -14px rgba(15,24,40,.20),0 22px 60px -32px rgba(15,24,40,.16);background-image:radial-gradient(rgba(15,24,40,.018) 1px, transparent 0),radial-gradient(rgba(15,24,40,.014) 1px, transparent 0);background-size:18px 18px,9px 9px;background-position:0 0,4px 4px}
.v-card-paper::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:6px;background:linear-gradient(155deg,rgba(255,255,255,.12) 0%,transparent 35%)}
.v-card:hover .v-card-paper{transform:rotate(0deg) translateY(-6px);box-shadow:0 4px 8px rgba(15,24,40,.10),0 24px 48px -14px rgba(15,24,40,.28),0 40px 80px -36px rgba(15,24,40,.20)}
/* Washi tape strip across top-left corner */
.v-tape{position:absolute;top:-8px;left:24px;width:80px;height:22px;background:linear-gradient(135deg,rgba(45,212,191,.65),rgba(45,212,191,.85),rgba(45,212,191,.65));border-left:1px dashed rgba(255,255,255,.4);border-right:1px dashed rgba(255,255,255,.4);box-shadow:0 2px 4px rgba(15,24,40,.10);transform:rotate(-3deg);z-index:3;opacity:.92}
.v-card:nth-child(2n) .v-tape{background:linear-gradient(135deg,rgba(244,162,97,.7),rgba(244,162,97,.9),rgba(244,162,97,.7));left:auto;right:24px;transform:rotate(2deg)}
.v-card:nth-child(3n) .v-tape{background:linear-gradient(135deg,rgba(226,118,108,.7),rgba(226,118,108,.9),rgba(226,118,108,.7));left:50%;margin-left:-40px;transform:rotate(-1deg)}

.v-cover{position:relative;aspect-ratio:5/3.6;overflow:hidden;background:linear-gradient(135deg,#1B2A3F,#0F1828)}
.v-card-noimg .v-cover{background:linear-gradient(135deg,#0E9F8F 0%,#2DD4BF 50%,#F4A261 100%)}
.v-card-noimg .v-cover::after{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 30% 40%,rgba(255,255,255,.2) 0,transparent 40%),radial-gradient(circle at 70% 70%,rgba(255,255,255,.15) 0,transparent 40%);pointer-events:none}
.v-card-noimg .v-cover-grad{background:linear-gradient(180deg,rgba(15,24,40,.15) 0%,rgba(15,24,40,.6) 100%)}
.v-cover img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease;filter:saturate(1.05) contrast(1.02)}
.v-card:hover .v-cover img{transform:scale(1.05)}
.v-cover-grad{position:absolute;inset:0;background:linear-gradient(180deg, rgba(15,24,40,0) 0%, rgba(15,24,40,0) 45%, rgba(15,24,40,.82) 100%)}
/* Postage stamp in top-right corner */
.v-stamp{position:absolute;top:14px;right:14px;width:54px;height:64px;background:#FAF3E5;padding:4px;z-index:4;box-shadow:0 4px 10px -4px rgba(15,24,40,.30);transform:rotate(4deg);transition:transform .35s ease}
.v-stamp::before{content:'';position:absolute;inset:-3px;background:radial-gradient(circle at 0 0, transparent 3px, #FAF3E5 3.5px) 0 0/10px 10px,radial-gradient(circle at 100% 0, transparent 3px, #FAF3E5 3.5px) 100% 0/10px 10px,radial-gradient(circle at 0 100%, transparent 3px, #FAF3E5 3.5px) 0 100%/10px 10px,radial-gradient(circle at 100% 100%, transparent 3px, #FAF3E5 3.5px) 100% 100%/10px 10px;background-repeat:repeat-x,repeat-x,repeat-x,repeat-x;-webkit-mask:linear-gradient(#000 0 0);z-index:-1}
.v-stamp-inner{width:100%;height:100%;border:1.5px dashed rgba(15,24,40,.25);border-radius:2px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(45,212,191,.18),rgba(226,118,108,.12));padding:4px}
.v-stamp-num{font-family:var(--serif);font-weight:700;font-size:18px;color:var(--coral-deep);line-height:1;letter-spacing:-.02em}
.v-stamp-label{font-family:var(--sans);font-size:6px;font-weight:700;letter-spacing:.08em;color:var(--abyss);text-align:center;line-height:1.1;margin-top:3px}
.v-card:hover .v-stamp{transform:rotate(8deg) scale(1.05)}
/* Postmark — circular hand-stamped seal at bottom-right of cover */
.v-postmark{position:absolute;bottom:14px;right:14px;width:84px;height:84px;border:2.5px solid rgba(226,118,108,.55);border-radius:50%;display:flex;align-items:center;justify-content:center;color:rgba(226,118,108,.85);transform:rotate(-12deg);z-index:3;background:transparent;mix-blend-mode:multiply;font-family:var(--sans);pointer-events:none}
.v-postmark::before,.v-postmark::after{content:'';position:absolute;left:-12px;right:-12px;height:1.5px;background:rgba(226,118,108,.55);border-radius:2px}
.v-postmark::before{top:18px}
.v-postmark::after{bottom:18px}
.v-postmark-ring{position:absolute;inset:6px;border:1px dashed rgba(226,118,108,.45);border-radius:50%}
.v-postmark-text{display:flex;flex-direction:column;align-items:center;line-height:1;text-align:center;gap:1px}
.v-postmark-line{font-size:7.5px;font-weight:700;letter-spacing:.10em;text-transform:uppercase}
.v-postmark-year{font-family:var(--serif);font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1}
.v-cover-meta{position:absolute;top:14px;left:14px;display:flex;gap:8px;align-items:center}
.v-atoll{background:rgba(11,18,32,.55);backdrop-filter:blur(8px);color:#fff;padding:5px 10px;border-radius:99px;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.v-price{background:rgba(226,118,108,.92);color:#fff;padding:5px 9px;border-radius:99px;font-size:11.5px;font-weight:700;letter-spacing:.05em}
.v-badge{position:absolute;top:14px;right:14px;background:#fff;color:var(--abyss);padding:5px 10px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 4px 12px rgba(15,24,40,.15)}
.v-badge-pick{background:var(--sunset);color:#fff}
.v-badge-hm{background:var(--coral);color:#fff}
.v-badge-fam{background:var(--teal);color:#fff}
.v-badge-reef{background:var(--abyss);color:#fff}
.v-cover-name{position:absolute;left:18px;right:18px;bottom:14px;color:#fff;z-index:1}
.v-cover-name h3{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.15;letter-spacing:-.01em;margin:0 0 4px}
.v-short{font-size:13px;line-height:1.45;opacity:.92;margin:0}

.v-body{padding:22px 22px 22px;display:flex;flex-direction:column;gap:14px;background:#fff;background-image:radial-gradient(rgba(15,24,40,.014) 1px, transparent 0);background-size:14px 14px;border-top:1px dashed rgba(15,24,40,.12);position:relative}
.v-tags{display:flex;gap:6px;flex-wrap:wrap}
.v-chip{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:4px 10px;border-radius:99px;background:var(--cream-2);color:var(--ink-2)}
.v-details{margin-top:2px}
.v-details summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:12px;background:var(--cream-2);font-size:13.5px;font-weight:600;color:var(--abyss);transition:background .2s}
.v-details summary::-webkit-details-marker{display:none}
.v-details summary:hover{background:var(--cream-3)}
.v-summary-icon{font-size:18px;color:var(--coral);font-weight:300;transition:transform .25s ease}
.v-details[open] .v-summary-icon{transform:rotate(45deg)}
.v-details-inner{padding:18px 4px 4px}
.v-tips-block{margin-bottom:16px}
.v-tips-h{display:block;font-family:var(--hand);font-style:italic;color:var(--coral);font-size:22px;margin-bottom:8px}
.v-tips{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.v-tips li{position:relative;padding-left:22px;font-size:14px;color:var(--ink-2);line-height:1.55}
.v-tips li::before{content:'★';position:absolute;left:0;top:0;color:var(--sunset);font-size:14px}
.v-albums{margin-top:16px;padding-top:16px;border-top:1px dashed rgba(15,24,40,.12);display:flex;flex-direction:column;gap:8px}
.v-albums-h{font-family:var(--hand);font-style:italic;color:var(--coral);font-size:20px}
.v-album-btn{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;background:#fff;border:1px solid rgba(15,24,40,.1);font-size:13.5px;font-weight:600;color:var(--abyss);transition:border-color .2s,transform .2s}
.v-album-btn:hover{border-color:var(--coral);transform:translateX(2px)}
.v-album-icon{color:var(--coral);font-size:16px}
.v-album-when{flex:1}
.v-album-arrow{color:var(--coral);font-size:14px}
.v-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.v-action-primary,.v-action-secondary{flex:1;min-width:140px;text-align:center;padding:11px 14px;border-radius:99px;font-size:13.5px;font-weight:600;transition:transform .2s,background .2s,border-color .2s}
.v-action-primary{background:var(--abyss);color:#fff}
.v-action-primary:hover{background:var(--abyss-2);transform:translateY(-1px)}
.v-action-secondary{background:transparent;color:var(--coral);border:1px solid var(--coral)}
.v-action-secondary:hover{background:var(--coral);color:#fff}

/* CTA section */
.cta{background:radial-gradient(900px 380px at 50% 30%, rgba(244,162,97,.22), transparent 60%),linear-gradient(180deg, var(--abyss) 0%, var(--abyss-2) 100%);color:var(--cream);padding:80px 0 90px;text-align:center}
.cta-eyebrow{font-family:var(--hand);font-style:italic;color:var(--sunset);font-size:28px;margin-bottom:6px}
.cta h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.5vw,54px);line-height:1.1;letter-spacing:-.015em;color:#fff;margin:8px auto 18px;max-width:760px}
.cta h2 em{font-style:italic;color:var(--sunset)}
.cta p{font-size:17.5px;color:rgba(245,237,223,.85);max-width:560px;margin:0 auto 32px}
.cta-btn{display:inline-block;background:var(--coral);color:#fff;padding:18px 38px;border-radius:99px;font-weight:600;font-size:16px;box-shadow:0 12px 30px -10px rgba(226,118,108,.55);transition:transform .25s,background .2s}
.cta-btn:hover{transform:translateY(-2px);background:var(--coral-deep)}

/* Footer */
footer.foot{background:var(--cream-2);padding:50px 0 40px;border-top:1px solid rgba(15,24,40,.08);font-size:14px;color:#475467}
.foot-row{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:center}
.foot-brand{font-family:var(--serif);font-weight:500;color:var(--abyss);font-size:16px}
.foot-brand em{font-family:var(--hand);font-style:italic;color:var(--coral);font-style:normal}
.foot-row a{color:#475467;transition:color .2s}
.foot-row a:hover{color:var(--coral)}
.foot-fine{margin-top:18px;font-size:12px;color:#7a8794;line-height:1.5;max-width:780px}

/* Reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ============== FULLSCREEN VAULT INTRO ============== */
.vault-intro{position:fixed;inset:0;z-index:9999;background:radial-gradient(circle at 50% 50%,#1B2A3F 0%,#0F1828 70%,#020A14 100%);display:flex;align-items:center;justify-content:center;animation:vault-intro-fadeout 1s cubic-bezier(.7,0,.84,0) 3.4s forwards;overflow:hidden}
.vault-intro::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 25% 30%,rgba(244,162,97,.08),transparent 50%),radial-gradient(circle at 75% 70%,rgba(226,118,108,.08),transparent 50%);pointer-events:none}
.vault-intro.is-gone{display:none}
.vault-intro-stage{position:relative;width:min(90vw,560px);aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.vault-intro-marquee{position:absolute;top:-60px;left:0;right:0;text-align:center;font-family:'Fraunces','Times New Roman',serif;font-style:italic;color:#F4A261;font-size:clamp(20px,3vw,28px);opacity:0;animation:vault-intro-marquee-in 1s ease 0s forwards}
.vault-intro-vault{position:relative;width:min(80vw,440px);height:min(80vw,440px);perspective:1400px;transform-style:preserve-3d}
.vault-intro-interior{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#2a3344 0%,#0F1828 75%);border-radius:50%;border:10px solid #d8c79c;box-shadow:inset 0 0 50px rgba(0,0,0,.7),inset 0 0 100px rgba(15,24,40,.5),0 30px 60px rgba(0,0,0,.5);overflow:hidden;display:flex;align-items:center;justify-content:center}
.vault-intro-interior::before{content:'';position:absolute;inset:22px;border-radius:50%;border:1px dashed rgba(216,199,156,.4)}
.vault-intro-burst{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(255,235,210,.95) 0%,rgba(244,162,97,.6) 20%,transparent 60%);opacity:0;animation:vault-intro-burst 1.4s cubic-bezier(.34,1.56,.64,1) 2.1s forwards}
.vault-intro-tagline{position:relative;z-index:2;text-align:center;font-family:'Fraunces',serif;color:#FAF3E5;font-weight:400;font-size:clamp(34px,5vw,60px);line-height:1;letter-spacing:-.02em;opacity:0;transform:scale(.85);animation:vault-intro-tagline-in 1s cubic-bezier(.2,.8,.2,1) 2.4s forwards}
.vault-intro-tagline em{font-style:italic;color:#F4A261}
.vault-intro-sub{display:inline-block;margin-top:10px;font-family:'Fraunces','Times New Roman',serif;font-style:italic;color:#E2766C;font-size:clamp(24px,3vw,36px);font-weight:400;letter-spacing:0}
.vault-intro-door{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#f5e9c8 0%,#d8c79c 55%,#b89e6b 95%);border-radius:50%;border:10px solid #5a4625;box-shadow:0 30px 60px rgba(0,0,0,.6),inset 0 0 30px rgba(184,158,107,.5),inset -12px -12px 40px rgba(90,70,37,.6),inset 12px 12px 30px rgba(255,235,210,.3);transform-origin:0% 50%;animation:vault-intro-door-open 2.4s cubic-bezier(.45,.05,.3,.95) .6s forwards;z-index:2}
.vault-intro-door::before{content:'';position:absolute;inset:20px;border-radius:50%;border:3px solid rgba(90,70,37,.35)}
.vault-intro-door::after{content:'';position:absolute;inset:38px;border-radius:50%;border:1px dashed rgba(90,70,37,.3)}
.vault-intro-dial{position:absolute;top:14%;left:50%;transform:translateX(-50%);width:22%;height:22%;border-radius:50%;background:radial-gradient(circle at 50% 35%,#3a3225,#1a1410);border:5px solid #5a4625;box-shadow:inset 0 4px 10px rgba(0,0,0,.7),0 5px 14px rgba(0,0,0,.4);animation:vault-intro-dial-spin 1.6s cubic-bezier(.7,0,.3,1) .3s 1}
.vault-intro-dial::before{content:'';position:absolute;inset:10px;border-radius:50%;border:1px dotted rgba(216,199,156,.3)}
.vault-intro-dial-pointer{position:absolute;top:8px;left:50%;width:3px;height:14px;background:#d8c79c;transform:translateX(-50%);border-radius:1px}
.vault-intro-wheel{position:absolute;top:50%;left:50%;width:55%;height:55%;transform:translate(-50%,-30%);animation:vault-intro-wheel-turn 1.8s cubic-bezier(.5,.05,.5,.95) 1.1s 1}
.vault-intro-hub{position:absolute;top:50%;left:50%;width:18%;height:18%;transform:translate(-50%,-50%);background:radial-gradient(circle,#d8c79c,#a07e3d 65%,#5a4625);border-radius:50%;box-shadow:0 4px 8px rgba(0,0,0,.5),inset -3px -3px 6px rgba(0,0,0,.4)}
.vault-intro-spoke{position:absolute;top:50%;left:50%;width:90%;height:14px;transform:translate(-50%,-50%);background:linear-gradient(180deg,#d8c79c,#a07e3d 50%,#5a4625);border-radius:7px;box-shadow:0 2px 6px rgba(0,0,0,.4),inset 0 -2px 4px rgba(0,0,0,.3)}
.vault-intro-spoke.s2{transform:translate(-50%,-50%) rotate(60deg)}
.vault-intro-spoke.s3{transform:translate(-50%,-50%) rotate(120deg)}
.vault-intro-hinge{position:absolute;left:-22px;width:30px;height:50px;background:linear-gradient(135deg,#a07e3d,#5a4625);border-radius:5px;box-shadow:0 4px 10px rgba(0,0,0,.5),inset -3px 0 6px rgba(0,0,0,.5);z-index:3}
.vault-intro-hinge::before{content:'';position:absolute;inset:8px 10px;background:#1a1410;border-radius:3px}
.vault-intro-hinge.top{top:28%}
.vault-intro-hinge.bottom{bottom:28%}
.vault-intro-rivet{position:absolute;width:14px;height:14px;background:radial-gradient(circle at 35% 35%,#f5e9c8,#a07e3d);border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.6),inset -2px -2px 3px rgba(90,70,37,.7)}
.vault-intro-rivet.r1{top:8%;left:50%;transform:translateX(-50%)}
.vault-intro-rivet.r2{top:50%;right:5%;transform:translateY(-50%)}
.vault-intro-rivet.r3{bottom:8%;left:50%;transform:translateX(-50%)}
.vault-intro-rivet.r4{top:20%;right:18%}
.vault-intro-rivet.r5{bottom:20%;right:18%}
.vault-intro-rivet.r6{top:20%;left:18%}
.vault-intro-rivet.r7{bottom:20%;left:18%}
.vault-intro-rivet.r8{top:50%;left:5%;transform:translateY(-50%)}

@keyframes vault-intro-marquee-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes vault-intro-door-open{0%{transform:rotateY(0)}30%{transform:rotateY(-15deg)}100%{transform:rotateY(-105deg)}}
@keyframes vault-intro-dial-spin{0%{transform:translateX(-50%) rotate(0)}50%{transform:translateX(-50%) rotate(540deg)}100%{transform:translateX(-50%) rotate(720deg)}}
@keyframes vault-intro-wheel-turn{0%{transform:translate(-50%,-30%) rotate(0)}100%{transform:translate(-50%,-30%) rotate(180deg)}}
@keyframes vault-intro-burst{0%{opacity:0;transform:scale(.3)}40%{opacity:1;transform:scale(1.4)}100%{opacity:0;transform:scale(1.8)}}
@keyframes vault-intro-tagline-in{0%{opacity:0;transform:scale(.85)}60%{opacity:1;transform:scale(1.05)}100%{opacity:1;transform:scale(1)}}
@keyframes vault-intro-fadeout{0%{opacity:1}100%{opacity:0;visibility:hidden}}

/* Don't lock scroll once the intro is fading */
body.vault-intro-active{overflow:hidden}

@media(prefers-reduced-motion:reduce){
  .vault-intro{animation:none;display:none}
}
@media(max-width:540px){
  .vault-intro-stage{width:88vw}
  .vault-intro-vault{width:78vw;height:78vw}
}

/* ============== EXISTING SMALL VAULT-OPENER (kept) ============== */
.vault-opener{position:relative;width:280px;height:280px;margin:0 auto 36px;perspective:900px;transform-style:preserve-3d}
.vault-frame{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:vault-frame-in 1.1s cubic-bezier(.2,.8,.2,1) .3s both}
.vault-interior{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%, #2a3344 0%, #0F1828 70%);border-radius:50%;border:6px solid #d8c79c;box-shadow:inset 0 0 30px rgba(0,0,0,.6),inset 0 0 60px rgba(15,24,40,.4),0 12px 30px rgba(15,24,40,.18);overflow:hidden}
.vault-interior::before{content:'';position:absolute;inset:14px;border-radius:50%;border:1px dashed rgba(216,199,156,.45)}
.vault-spill{position:absolute;background:#FAF3E5;border-radius:4px;box-shadow:0 8px 22px -10px rgba(0,0,0,.5);opacity:0;animation-fill-mode:both}
.vault-spill::after{content:'';position:absolute;inset:8px;background:linear-gradient(135deg,#0E9F8F 0%,#2DD4BF 50%,#F4A261 100%);border-radius:2px}
.vault-spill-1{width:90px;height:120px;top:34%;left:22%;transform:rotate(-12deg);animation:vault-spill-in 1s cubic-bezier(.2,.8,.2,1) 1.5s forwards}
.vault-spill-2{width:88px;height:118px;top:30%;right:24%;transform:rotate(8deg);animation:vault-spill-in 1s cubic-bezier(.2,.8,.2,1) 1.7s forwards}
.vault-spill-3{width:90px;height:116px;top:46%;left:36%;transform:rotate(-3deg);animation:vault-spill-in 1s cubic-bezier(.2,.8,.2,1) 1.9s forwards;z-index:1}
.vault-wax{position:absolute;bottom:14px;right:18px;width:48px;height:48px;background:radial-gradient(circle at 35% 30%,#E2766C 0%,#C95A50 60%,#9C3D34 100%);border-radius:50% 48% 52% 50%;box-shadow:0 6px 14px rgba(15,24,40,.45),inset -4px -4px 8px rgba(124,33,28,.5);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;color:rgba(255,235,210,.78);font-size:14px;letter-spacing:.05em;opacity:0;transform:scale(.6);animation:vault-wax-in .7s cubic-bezier(.2,.8,.2,1) 2.1s forwards;z-index:5}
.vault-wax-drop{position:absolute;bottom:-6px;right:-2px;width:10px;height:10px;background:radial-gradient(circle,#C95A50,#9C3D34);border-radius:50%;box-shadow:0 2px 4px rgba(15,24,40,.4)}
.vault-door{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%, #f5e9c8 0%, #d8c79c 60%, #b89e6b 100%);border-radius:50%;border:5px solid #5a4625;box-shadow:0 14px 30px rgba(15,24,40,.25),inset 0 0 20px rgba(184,158,107,.6),inset -8px -8px 24px rgba(90,70,37,.45);transform-origin:0% 50%;animation:vault-door-spin-open 2.1s cubic-bezier(.45,.05,.55,.95) .6s forwards;z-index:2;backface-visibility:hidden}
.vault-door-bg{position:absolute;inset:14px;border-radius:50%;border:2px solid rgba(90,70,37,.3);background:radial-gradient(circle at 30% 30%,rgba(245,233,200,.4),transparent 50%)}
.vault-door-bg::after{content:'';position:absolute;inset:18px;border-radius:50%;border:1px dashed rgba(90,70,37,.25)}
.vault-dial{position:absolute;top:38px;left:50%;transform:translateX(-50%);width:72px;height:72px}
.vault-dial-face{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 30%,#3a3225,#1a1410);border:3px solid #5a4625;box-shadow:inset 0 2px 6px rgba(0,0,0,.6),0 3px 8px rgba(0,0,0,.3);overflow:hidden}
.vault-dial-face::before{content:'';position:absolute;inset:6px;border-radius:50%;border:1px dotted rgba(216,199,156,.3)}
.vault-dial-handle{position:absolute;top:50%;left:50%;width:18px;height:18px;transform:translate(-50%,-50%);background:radial-gradient(circle,#d8c79c,#a07e3d);border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.4),inset -1px -1px 2px rgba(0,0,0,.3);animation:vault-dial-spin 1.8s cubic-bezier(.7,0,.3,1) .15s 1}
.vault-dial-handle::after{content:'';position:absolute;top:-2px;left:50%;width:2px;height:6px;background:#5a4625;transform:translateX(-50%)}
.vault-wheel{position:absolute;top:50%;left:50%;width:120px;height:120px;transform:translate(-50%,-12%);animation:vault-wheel-turn 1.6s cubic-bezier(.5,.05,.5,.95) .9s 1}
.vault-wheel-hub{position:absolute;top:50%;left:50%;width:32px;height:32px;transform:translate(-50%,-50%);background:radial-gradient(circle,#d8c79c,#a07e3d 60%,#5a4625);border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.4),inset -2px -2px 4px rgba(0,0,0,.3)}
.vault-wheel-spoke{position:absolute;top:50%;left:50%;width:100px;height:14px;transform:translate(-50%,-50%);background:linear-gradient(180deg,#d8c79c 0%,#a07e3d 50%,#5a4625 100%);border-radius:7px;box-shadow:0 2px 5px rgba(0,0,0,.3),inset 0 -2px 3px rgba(0,0,0,.25)}
.vault-wheel-spoke-2{transform:translate(-50%,-50%) rotate(60deg)}
.vault-wheel-spoke-3{transform:translate(-50%,-50%) rotate(120deg)}
.vault-hinge{position:absolute;left:-14px;width:22px;height:36px;background:linear-gradient(135deg,#a07e3d,#5a4625);border-radius:4px;box-shadow:0 2px 6px rgba(15,24,40,.3),inset -2px 0 4px rgba(0,0,0,.4);z-index:3}
.vault-hinge::before{content:'';position:absolute;inset:6px 8px;background:#1a1410;border-radius:2px}
.vault-hinge-top{top:34%}
.vault-hinge-bottom{bottom:34%}

@keyframes vault-frame-in{
  from{transform:scale(.7) rotateY(-12deg);opacity:0}
  to{transform:scale(1) rotateY(0);opacity:1}
}
@keyframes vault-door-spin-open{
  0%{transform:rotateY(0)}
  35%{transform:rotateY(-22deg)}
  100%{transform:rotateY(-95deg)}
}
@keyframes vault-dial-spin{
  0%{transform:translate(-50%,-50%) rotate(0deg)}
  50%{transform:translate(-50%,-50%) rotate(540deg)}
  100%{transform:translate(-50%,-50%) rotate(720deg)}
}
@keyframes vault-wheel-turn{
  0%{transform:translate(-50%,-12%) rotate(0deg)}
  100%{transform:translate(-50%,-12%) rotate(180deg)}
}
@keyframes vault-spill-in{
  0%{opacity:0;transform:translateY(40px) rotate(var(--end,0deg)) scale(.6)}
  60%{opacity:1}
  100%{opacity:1;transform:translateY(0) rotate(var(--end,0deg)) scale(1)}
}
@keyframes vault-wax-in{
  0%{opacity:0;transform:scale(.4)}
  60%{opacity:1;transform:scale(1.1)}
  100%{opacity:1;transform:scale(1)}
}
.vault-spill-1{--end:-12deg}
.vault-spill-2{--end:8deg}
.vault-spill-3{--end:-3deg}

@media(prefers-reduced-motion:reduce){
  .vault-frame,.vault-door,.vault-dial-handle,.vault-wheel,
  .vault-spill,.vault-wax{animation:none !important;opacity:1 !important;transform:none !important}
  .vault-door{transform:rotateY(-95deg)}
}
@media(max-width:540px){
  .vault-opener{width:220px;height:220px;margin-bottom:24px}
}