/* The Deal — home hero. Progressive enhancement: static by default; animated on capable desktop. */
:root{
  --ink:#07100c; --ink2:#050a08; --felt:rgba(16,74,54,.5);
  --gold:#d9c08a; --gold-lt:#e8cf8f; --paper:#f0efe9; --sage:#b7c6be; --ink-text:#eef2f0;
}
.deal-hero{ position:relative; color:var(--ink-text);
  background: radial-gradient(60% 55% at 50% 42%, var(--felt), transparent 62%),
              linear-gradient(180deg,#08120d,var(--ink2)); }
.deal-stage{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:96px 20px 60px; }
.deal-header{ position:absolute; top:0; left:0; right:0; z-index:6; padding:24px 30px 0; text-align:center; }
.deal-mark{ font-family:'Cormorant Garamond',serif; font-weight:700; font-size:24px; letter-spacing:.06em; }
.deal-mark b{ color:var(--gold); }
.deal-rule{ display:flex; align-items:center; gap:16px; margin:10px auto 0; max-width:620px; }
.deal-rule .ln{ flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(217,192,138,.5),transparent); }
.deal-rule .nav{ font:500 11px/1 Inter,sans-serif; letter-spacing:.2em; text-transform:uppercase; color:#9fb0a8; white-space:nowrap; }
.deal-rule .nav a{ color:#9fb0a8; text-decoration:none; margin:0 6px; }
.deal-rule .nav a:hover{ color:var(--gold); }

/* card face (shared by static + animated) */
.pcard{ border-radius:10px; background:linear-gradient(160deg,#fff,var(--paper)); color:#12100e; box-shadow:0 14px 30px rgba(0,0,0,.55); padding:8px 9px; position:relative; }
.pcard.red{ color:#b3222b; }
.pcard .cr{ font:700 16px/1 Inter,sans-serif; }
.pcard .cs{ font-size:14px; margin-left:1px; }
.pcard .big{ position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); font-size:38px; }

/* headline blocks */
.deal-copy{ max-width:640px; }
.deal-copy h1{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:clamp(30px,5vw,46px); line-height:1.06; color:#f3f6f4; }
.deal-copy .accent{ color:var(--gold); }
.deal-copy p{ margin-top:10px; color:var(--sage); font-size:15px; }

/* ---------- STATIC fallback (default; mobile / no-JS / reduced-motion) ---------- */
.deal-hands{ display:flex; gap:30px; justify-content:center; flex-wrap:wrap; margin-top:36px; }
.hlink{ text-decoration:none; text-align:center; display:flex; flex-direction:column; align-items:center; }
.hlink .ht{ font:600 10px/1 Inter,sans-serif; letter-spacing:.28em; text-transform:uppercase; color:#7f9089; margin-bottom:8px; }
.hlink .pair{ display:flex; gap:6px; }
.hlink .pair .pcard{ width:74px; height:106px; }
.hlink .dest{ margin-top:12px; font-family:'Cormorant Garamond',serif; font-weight:700; font-size:20px; color:var(--ink-text); transition:color .2s; }
.hlink:hover .dest, .hlink:focus-visible .dest{ color:var(--gold-lt); }
.hlink:focus-visible{ outline:2px solid var(--gold); outline-offset:6px; border-radius:8px; }
.deal-cue{ display:none; margin-top:30px; color:var(--gold); font:600 12px/1 Inter,sans-serif; letter-spacing:.16em; text-transform:uppercase; }
/* static hero shows ONE headline; the split/end copy blocks exist only for the animated cross-fade */
#deal-copy-split, #deal-copy-end{ display:none; }

/* the animated card layer is hidden unless animated mode is on */
.deal-anim-cards{ display:none; }

/* ---------- ANIMATED mode (capable desktop; JS adds body.deal-animated) ---------- */
body.deal-animated .deal-hero{ height:320vh; }
body.deal-animated .deal-stage{ position:sticky; top:0; height:100vh; min-height:0; overflow:hidden; padding:0; }
body.deal-animated .deal-anim-cards{ display:block; position:absolute; inset:0; z-index:3; }
body.deal-animated .deal-anim-cards .pcard{ position:absolute; left:50%; top:50%; width:92px; height:132px; margin:-66px 0 0 -46px; will-change:transform,opacity; transition:box-shadow .2s; }
body.deal-animated .deal-anim-cards .pcard.lit{ box-shadow:0 18px 40px rgba(0,0,0,.55), 0 0 0 2px rgba(217,192,138,.9), 0 0 34px rgba(217,192,138,.5); }
body.deal-animated #deal-copy-split, body.deal-animated #deal-copy-end{ display:block; }
body.deal-animated .deal-copy{ position:absolute; left:0; right:0; top:calc(50% - 220px); z-index:5; pointer-events:none; padding:0 20px; opacity:0; margin:0 auto; text-align:center; }
/* intro copy sits higher so the 2-line subtitle clears the centred card stack */
body.deal-animated #deal-copy-six{ top:calc(50% - 262px); }
body.deal-animated .deal-hands{ position:absolute; left:0; right:0; top:calc(50% - 96px); margin:0; z-index:5; gap:0; }
body.deal-animated .hlink{ position:absolute; width:172px; height:232px; justify-content:flex-end; opacity:0; pointer-events:none; }
body.deal-animated .hlink .pair{ display:none; }
body.deal-animated .deal-cue{ display:block; position:absolute; bottom:24px; left:0; right:0; z-index:6; margin:0; }

/* motion safety net: never animate if the OS asks us not to */
@media (prefers-reduced-motion: reduce){
  body.deal-animated .deal-hero{ height:auto; }
  body.deal-animated .deal-stage{ position:relative; height:auto; min-height:100vh; padding:96px 20px 60px; }
  body.deal-animated .deal-anim-cards{ display:none; }
  body.deal-animated #deal-copy-split, body.deal-animated #deal-copy-end{ display:none; }
  body.deal-animated .deal-cue{ display:none; }
  body.deal-animated .deal-copy, body.deal-animated .hlink{ position:static; opacity:1; pointer-events:auto; }
  body.deal-animated .hlink .pair{ display:flex; }
  body.deal-animated .deal-hands{ position:static; gap:30px; }
}