/* Sabeti Lab · Holiday Cards — hero (split from app.css; see ARCHITECTURE.md) */
/* ───────── hero / deck ───────── */
.hero{--bg:var(--night)}
.hero .stage{background:radial-gradient(ellipse at 50% 40%,#1b2622 0%,var(--night) 60%)}
.deck{position:absolute;inset:0;perspective:1600px}
.card{position:absolute;left:0;top:0;will-change:transform,opacity;cursor:pointer;text-align:left}
.card-in{position:relative;display:block;width:100%;height:100%;background:#fff;padding:4px;border-radius:3px;box-shadow:0 24px 60px -18px rgba(0,0,0,.7);transition:box-shadow .3s}
.card-back{position:absolute;inset:0;display:none;border-radius:3px;background:#0f1d33;overflow:hidden;box-shadow:0 24px 60px -18px rgba(0,0,0,.7)}
.card.back .card-in{visibility:hidden}
.card.back .card-back{display:block}
.card-back::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.95) .9px,transparent 1.5px),radial-gradient(rgba(255,255,255,.55) .8px,transparent 1.4px),radial-gradient(rgba(230,213,173,.75) 1.2px,transparent 1.9px);background-size:233px 197px,149px 131px,367px 311px;background-position:13px 27px,71px 53px,190px 40px}
.hero-cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:9;opacity:0;pointer-events:none;display:flex;align-items:center;gap:10px;padding:9px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(10,14,12,.45);font-size:11px;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;will-change:opacity,transform}
.hero-cue i{width:8px;height:8px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px);animation:cue-bob 1.4s ease-in-out infinite}
@keyframes cue-bob{0%,100%{transform:rotate(45deg) translate(0,-2px)}50%{transform:rotate(45deg) translate(3px,1px)}}
body.narrow .hero-cue{bottom:calc(14px + env(safe-area-inset-bottom));font-size:10px;padding:8px 13px}
.card-in img{width:100%;height:100%;object-fit:cover;border-radius:2px;background:#222}
.card b{position:absolute;left:0;right:0;top:calc(100% + 8px);text-align:center;font-family:var(--serif);font-weight:300;font-size:clamp(13px,1.3vw,20px);letter-spacing:.06em;opacity:0;transition:opacity .25s}
.deck.spread .card:hover .card-in,.card:focus-visible .card-in{box-shadow:0 0 0 1px var(--gold),0 30px 70px -18px rgba(0,0,0,.8)}
.card:focus-visible{outline:none}
.hero-copy{position:absolute;z-index:45;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:min(92vw,900px);pointer-events:none}
.hero-kicker{font-size:11px;letter-spacing:.26em;text-transform:uppercase;opacity:.7}
.hero-title{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(56px,11vw,168px);line-height:.95;letter-spacing:-.01em;margin-top:14px;white-space:nowrap}
.hero-title span{display:inline-block;will-change:transform,opacity,filter}
.hero-sub{font-family:var(--serif);font-weight:300;font-size:clamp(20px,2.6vw,34px);opacity:.8;margin-top:6px}
.hero-text{font-size:clamp(14px,1.15vw,17px);max-width:46ch;margin:22px auto 0;opacity:.75}
.hero-press{margin-top:26px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.7;display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}
.hero-press span{opacity:.6}
.hero-press i{font-style:normal;opacity:.5}
.hero-press a{pointer-events:auto;text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:2px}
.hero-press a:hover{color:#fff}
.hero .pin::after{content:"";position:absolute;inset:0;background:var(--tint,transparent);opacity:var(--tint-a,0);pointer-events:none;z-index:5}
.hero-sky{z-index:6;opacity:0;pointer-events:none}
.hero-sky-solid{position:absolute;inset:0;will-change:opacity}
.hero-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:9;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;opacity:.6;display:flex;flex-direction:column;align-items:center;gap:8px}
.hero-hint i{width:1px;height:40px;background:linear-gradient(var(--paper),transparent);animation:drop 1.8s ease-in-out infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}