:root{
  --cream:#efe6cf;
  --ink:#15110d;
  --band:#0d0b09;
  --oxblood:#6e1a17;
  --gold:#d9a651;
  --sub:#f6e7b4;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#120c08}
body{font-family:'Special Elite',monospace;-webkit-font-smoothing:antialiased}
img{border:0}

/* ---- intro ---- */
#blackout{position:fixed;inset:0;background:#000;z-index:30;opacity:1;pointer-events:none}

/* ---- stage / fitting ---- */
#stage{position:absolute;inset:0;overflow:hidden;z-index:1;will-change:transform}
#bg-far{position:absolute;inset:-40px;background:url(assets/L0_bleed_plate.jpg) center/cover no-repeat;
  filter:blur(18px) brightness(.65);display:none}
#bg{position:absolute;background:url(assets/L0_bleed_plate.jpg) 0 0/100% 100% no-repeat}
#bg.edge-mask{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%)
}

#safe{position:absolute;width:1536px;height:864px;transform-origin:0 0}
#safe .l{position:absolute;left:0;top:0;width:1536px;height:864px;pointer-events:none}

#shadow{z-index:1}
#reflect{z-index:2}

/* ---- the Don (breathing group) ---- */
#don{position:absolute;left:0;top:0;width:1536px;height:864px;z-index:3;transform-origin:755px 458px}
#don.breathing{animation:breathe 4.2s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.008)}}
#eg,#es{opacity:0}
#hat{filter:drop-shadow(0 8px 8px rgba(0,0,0,.45));transform-origin:740px 212px}

/* ---- cigar smoke wisps ---- */
.wisp-anchor{position:absolute;width:0;height:0;z-index:4;pointer-events:none}
.wisp-wrap{position:absolute;left:0;bottom:0;transform:translateX(-50%)}
.wisp{display:block;height:220px;width:auto;transform-origin:50% 100%;mix-blend-mode:screen;opacity:0;
  animation:wispdrift 3.5s ease-in-out infinite}
.wisp2{animation-delay:-1.75s}
@keyframes wispdrift{
  0%{transform:translateY(0) skewX(-3deg);opacity:.30}
  50%{transform:translateY(-10px) skewX(3deg);opacity:.55}
  100%{transform:translateY(0) skewX(-3deg);opacity:.30}
}

/* ---- smoke ring ---- */
#ring-anchor{position:absolute;width:0;height:0;z-index:5;pointer-events:none}
.ring-wrap{position:absolute;left:0;top:0;transform:translate(-50%,-50%)}
#ring{display:block;width:210px;height:auto;opacity:0;mix-blend-mode:screen;transform-origin:50% 50%}

/* ---- contract card ---- */
#card{position:absolute;left:518px;top:508px;width:500px;height:218px;padding:18px 30px;
  background:linear-gradient(#f3ead2,#e2d3ad);border-radius:3px;box-shadow:0 18px 40px rgba(0,0,0,.6);
  color:#2a2118;transform:rotate(-1.2deg);z-index:6}
#card::after{content:"";position:absolute;inset:0;border-radius:3px;opacity:.06;pointer-events:none;
  background-image:radial-gradient(#000 1px,transparent 1px);background-size:4px 4px}
#card h2{margin:0 0 4px;font:900 30px 'Playfair Display',serif;letter-spacing:.14em;text-align:center}
#card .no{position:absolute;right:16px;top:12px;font-size:12px;opacity:.7}
#card p{margin:0 0 12px;font-size:14px;line-height:1.35;text-align:center}

#accept{display:block;margin:0 auto;width:330px;height:62px;border-radius:40px;border:0;cursor:pointer;
  background:linear-gradient(180deg,#fbf5e4 0 66%,var(--band) 66% 84%,#e9ddc0 84%);
  box-shadow:inset 0 2px 0 #fff,0 6px 14px rgba(0,0,0,.45);
  font:900 20px 'Playfair Display',serif;letter-spacing:.08em;color:var(--ink);padding-bottom:12px;
  transition:transform 140ms ease,box-shadow 200ms ease,opacity 200ms ease}
#accept:hover{transform:translateY(-2px);box-shadow:inset 0 2px 0 #fff,0 8px 20px rgba(217,166,81,.55)}
#accept:active{transform:translateY(2px)}
#accept.disabled{opacity:.6;cursor:default}

#refuse{position:absolute;left:0;top:0;z-index:6;padding:4px 10px;border:0;border-radius:2px;cursor:pointer;
  font:15px 'Special Elite',monospace;color:#4a3b2a;text-decoration:underline;white-space:nowrap;
  background:linear-gradient(#f3ead2,#e2d3ad);box-shadow:0 4px 10px rgba(0,0,0,.5);
  transform:translate(972px,712px) translate(-50%,-50%) rotate(-3deg);
  transition:transform 160ms ease-out,opacity 200ms ease}
#refuse.disabled{opacity:.6;cursor:default}

#seal{position:absolute;left:501px;top:637px;width:118px;height:auto;opacity:0;z-index:6;
  pointer-events:none;transform-origin:50% 50%}

/* ---- subtitle ---- */
#sub{position:absolute;left:0;width:1536px;top:800px;z-index:7;text-align:center;
  font:italic 500 28px 'Playfair Display',serif;color:var(--sub);
  text-shadow:0 2px 6px #000,0 0 2px #000;opacity:0;pointer-events:none}

/* ---- bill rain overlay ---- */
#bills{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:8}
#bills img{position:absolute;top:0;will-change:transform,opacity}

/* ---- header ---- */
header{position:fixed;left:0;right:0;top:0;height:clamp(52px,6.5vh,96px);z-index:9;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(20px,2.2vh,40px);pointer-events:none}
header > *{pointer-events:auto}
.brand{display:flex;align-items:center;gap:.5em;
  font:900 clamp(24px,3vh,46px) 'Playfair Display',serif;color:var(--cream);
  letter-spacing:.12em;text-shadow:0 2px 8px #000}
.brand .mark{height:1.3em;width:1.3em;border-radius:50%;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.brand small{font:500 clamp(13px,1.45vh,21px) 'Special Elite',monospace;letter-spacing:.1em;
  margin-left:.6em;color:var(--gold)}
nav{display:flex;align-items:center;gap:clamp(6px,1vh,16px)}
nav a,nav button{font:clamp(13px,1.45vh,21px) 'Special Elite',monospace;color:var(--cream);
  border:1px solid rgba(239,230,207,.45);padding:clamp(6px,1vh,15px) clamp(12px,1.7vh,24px);
  border-radius:30px;text-decoration:none;background:rgba(0,0,0,.35);cursor:pointer;
  transition:background 160ms,color 160ms}
nav a:hover,nav button:hover{background:var(--cream);color:var(--ink)}

#toast{position:fixed;top:calc(clamp(52px,6.5vh,96px) + 8px);right:clamp(20px,2.2vh,40px);z-index:9;
  font:clamp(12px,1.2vh,18px) 'Special Elite',monospace;color:var(--cream);background:rgba(0,0,0,.6);
  border:1px solid rgba(239,230,207,.35);padding:clamp(5px,.8vh,10px) clamp(9px,1.2vh,16px);
  border-radius:20px;opacity:0;transform:translateY(-4px);transition:opacity 160ms,transform 160ms;pointer-events:none}
#toast.show{opacity:1;transform:none}

/* ---- focus ---- */
#accept:focus-visible,#refuse:focus-visible,#copyCa:focus-visible,nav a:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px}

@media (prefers-reduced-motion: reduce){
  #don.breathing{animation:none}
  .wisp{animation:none;opacity:.4}
}