@font-face{font-family:"Pinyon";src:url(assets/fonts/pinyon-script-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Cormorant";src:url(assets/fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Cormorant";src:url(assets/fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Cormorant";src:url(assets/fonts/cormorant-garamond-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Cormorant";src:url(assets/fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Cinzel";src:url(assets/fonts/cinzel-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --wine:#5e0b16;--wine-d:#3a060c;--wine-l:#8a1726;
  --gold:#c89b3c;--gold-l:#ecd08a;--gold-d:#8a6420;
  --cream:#f6eddb;--ink:#2b0a0f;--black:#0d0506;
  --ease:cubic-bezier(.22,.8,.24,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--black) url(assets/satin.jpg) center/cover fixed no-repeat;
  color:var(--ink);font-family:"Cormorant",Georgia,"Times New Roman",serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body::before{content:"";position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 45%,transparent 35%,rgba(10,2,3,.72) 100%);z-index:0}
.stage{position:relative;z-index:1;min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))}

/* sparkles */
.sparkles i{position:fixed;width:10px;height:10px;background:var(--gold-l);opacity:.0;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  animation:tw 5s ease-in-out infinite;filter:drop-shadow(0 0 4px rgba(255,220,150,.8))}
.sparkles i:nth-child(1){top:12%;left:14%;animation-delay:.2s}
.sparkles i:nth-child(2){top:20%;right:12%;width:7px;height:7px;animation-delay:1.4s}
.sparkles i:nth-child(3){bottom:18%;left:20%;width:8px;height:8px;animation-delay:2.6s}
.sparkles i:nth-child(4){bottom:12%;right:18%;animation-delay:3.3s}
.sparkles i:nth-child(5){top:48%;right:6%;width:6px;height:6px;animation-delay:.9s}
@keyframes tw{0%,100%{opacity:0;transform:scale(.6)}50%{opacity:.85;transform:scale(1)}}

/* ---------- envelope ---------- */
.scene{display:flex;flex-direction:column;align-items:center;gap:28px;width:100%;transition:opacity .8s var(--ease),transform 1s var(--ease)}
.envelope{position:relative;width:min(90vw,560px);aspect-ratio:1.42;perspective:1400px;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.6)) drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.velvet{}
.env-back,.env-front .fl,.flap-inner{
  background-color:var(--wine);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 30% 20%,rgba(255,120,130,.16),transparent 55%),
    linear-gradient(160deg,var(--wine-l),var(--wine) 45%,var(--wine-d));
}
.env-back{position:absolute;inset:0;border-radius:6px}
.env-front{position:absolute;inset:0;z-index:3;pointer-events:none}
.env-front .fl{position:absolute;inset:0;border-radius:6px}
.fl.left{clip-path:polygon(0 0,52% 56%,0 100%);filter:brightness(.92)}
.fl.right{clip-path:polygon(100% 0,48% 56%,100% 100%);filter:brightness(.86)}
.fl.bottom{clip-path:polygon(0 100%,50% 44%,100% 100%);filter:brightness(1.04);
  box-shadow:inset 0 0 40px rgba(0,0,0,.25)}
.env-flap{position:absolute;left:0;right:0;top:0;height:60%;z-index:4;transform-origin:50% 0;
  transform:rotateX(0deg);transition:transform 1.05s var(--ease) .38s;transform-style:preserve-3d}
.flap-inner{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%);
  filter:brightness(1.12);border-radius:6px 6px 0 0}
.env-flap::after{content:"";position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%);
  background:linear-gradient(180deg,transparent 70%,rgba(0,0,0,.22));pointer-events:none}

.peek{position:absolute;left:7%;right:7%;top:8%;height:80%;z-index:2;border-radius:3px;
  background:var(--cream) url(assets/paper-ivory.jpg) center/cover;
  box-shadow:0 2px 10px rgba(0,0,0,.25);transform:translateY(0);
  transition:transform 1.1s var(--ease) 1.05s;display:flex;flex-direction:column;align-items:center;padding-top:9%;gap:8px}
.peek-line{width:56%;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.peek-line.short{width:30%}

/* seal */
.seal{position:absolute;left:50%;top:60%;z-index:6;width:35%;aspect-ratio:1;
  transform:translate(-50%,-50%);border:0;background:none;cursor:pointer;border-radius:50%;
  -webkit-tap-highlight-color:transparent;animation:breathe 3.2s ease-in-out infinite}
.seal:focus-visible{outline:3px solid var(--gold-l);outline-offset:6px}
.seal .half{position:absolute;inset:0;background:url(assets/seal-burgundy.webp) center/contain no-repeat;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.55));transition:transform .75s var(--ease),opacity .6s ease .25s}
.seal .half.l{clip-path:polygon(0 0,53% 0,49% 14%,55% 30%,47% 47%,54% 63%,48% 80%,52% 100%,0 100%)}
.seal .half.r{clip-path:polygon(53% 0,100% 0,100% 100%,52% 100%,48% 80%,54% 63%,47% 47%,55% 30%,49% 14%)}
.seal .crack{position:absolute;left:47%;top:0;width:8%;height:100%;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,230,190,.9),transparent);
  clip-path:polygon(60% 0,40% 14%,70% 30%,30% 47%,65% 63%,35% 80%,55% 100%,45% 100%,25% 80%,55% 63%,20% 47%,60% 30%,30% 14%,50% 0);
  transition:opacity .2s}
@keyframes breathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.035)}}

.hint{font-family:"Cinzel",serif;font-weight:600;color:var(--gold-l);letter-spacing:.14em;text-transform:uppercase;
  font-size:clamp(15px,4.2vw,19px);text-align:center;text-shadow:0 2px 10px rgba(0,0,0,.8);
  animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.65}50%{opacity:1}}

/* opening states */
.opening .seal{animation:none;pointer-events:none}
.opening .seal .crack{opacity:1;animation:crk .9s ease forwards}
@keyframes crk{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
.opening .seal .half.l{transform:translate(-38%,24%) rotate(-24deg);opacity:0}
.opening .seal .half.r{transform:translate(38%,30%) rotate(20deg);opacity:0}
.opening .env-flap{transform:rotateX(178deg)}
.flap-back .env-flap{z-index:1}
.opening .peek{transform:translateY(-52%)}
.opening .hint{opacity:0;transition:opacity .3s;animation:none}
.done .scene{opacity:0;transform:translateY(14vh) scale(.94);pointer-events:none;transition:opacity .45s ease,transform .6s var(--ease)}
.done .scene{position:absolute}

/* ---------- letter ---------- */
.letter{width:min(92vw,520px);margin:0 auto;opacity:0;transform:translateY(60px) scale(.96);
  transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.letter.show{opacity:1;transform:none}
.card{filter:drop-shadow(0 28px 34px rgba(0,0,0,.55)) drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.paper{position:relative;clip-path:polygon(0.0% 0.5px,2.5% 1.2px,5.0% 0.8px,7.5% 1.3px,10.0% 1.4px,12.5% 0.1px,15.0% 0.0px,17.5% 1.8px,20.0% 0.6px,22.5% 0.5px,25.0% 2.2px,27.5% 1.0px,30.0% 1.8px,32.5% 1.0px,35.0% 1.4px,37.5% 0.3px,40.0% 1.4px,42.5% 1.9px,45.0% 1.2px,47.5% 1.6px,50.0% 1.5px,52.5% 0.1px,55.0% 1.7px,57.5% 1.3px,60.0% 0.7px,62.5% 0.1px,65.0% 1.9px,67.5% 1.0px,70.0% 1.6px,72.5% 1.9px,75.0% 1.6px,77.5% 2.0px,80.0% 0.9px,82.5% 1.8px,85.0% 1.0px,87.5% 2.1px,90.0% 1.9px,92.5% 0.2px,95.0% 0.3px,97.5% 0.5px,100.0% 2.1px,calc(100% - 1.0px) 0.0%,calc(100% - 1.4px) 1.4%,calc(100% - 0.7px) 2.9%,calc(100% - 1.1px) 4.3%,calc(100% - 0.8px) 5.7%,calc(100% - 0.8px) 7.1%,calc(100% - 1.3px) 8.6%,calc(100% - 1.3px) 10.0%,calc(100% - 2.0px) 11.4%,calc(100% - 1.5px) 12.9%,calc(100% - 2.0px) 14.3%,calc(100% - 1.9px) 15.7%,calc(100% - 2.2px) 17.1%,calc(100% - 1.5px) 18.6%,calc(100% - 0.4px) 20.0%,calc(100% - 1.9px) 21.4%,calc(100% - 2.1px) 22.9%,calc(100% - 2.0px) 24.3%,calc(100% - 1.3px) 25.7%,calc(100% - 1.6px) 27.1%,calc(100% - 0.5px) 28.6%,calc(100% - 1.8px) 30.0%,calc(100% - 1.3px) 31.4%,calc(100% - 0.6px) 32.9%,calc(100% - 0.1px) 34.3%,calc(100% - 1.9px) 35.7%,calc(100% - 2.2px) 37.1%,calc(100% - 0.2px) 38.6%,calc(100% - 1.8px) 40.0%,calc(100% - 0.9px) 41.4%,calc(100% - 0.3px) 42.9%,calc(100% - 0.6px) 44.3%,calc(100% - 1.7px) 45.7%,calc(100% - 1.9px) 47.1%,calc(100% - 0.1px) 48.6%,calc(100% - 1.4px) 50.0%,calc(100% - 0.1px) 51.4%,calc(100% - 1.6px) 52.9%,calc(100% - 0.7px) 54.3%,calc(100% - 1.9px) 55.7%,calc(100% - 2.2px) 57.1%,calc(100% - 1.1px) 58.6%,calc(100% - 2.2px) 60.0%,calc(100% - 0.7px) 61.4%,calc(100% - 0.2px) 62.9%,calc(100% - 1.3px) 64.3%,calc(100% - 0.1px) 65.7%,calc(100% - 0.4px) 67.1%,calc(100% - 0.9px) 68.6%,calc(100% - 1.3px) 70.0%,calc(100% - 0.3px) 71.4%,calc(100% - 0.1px) 72.9%,calc(100% - 1.9px) 74.3%,calc(100% - 0.7px) 75.7%,calc(100% - 2.1px) 77.1%,calc(100% - 2.0px) 78.6%,calc(100% - 0.8px) 80.0%,calc(100% - 1.0px) 81.4%,calc(100% - 1.1px) 82.9%,calc(100% - 1.4px) 84.3%,calc(100% - 1.3px) 85.7%,calc(100% - 1.2px) 87.1%,calc(100% - 1.4px) 88.6%,calc(100% - 2.1px) 90.0%,calc(100% - 1.1px) 91.4%,calc(100% - 0.9px) 92.9%,calc(100% - 1.6px) 94.3%,calc(100% - 0.5px) 95.7%,calc(100% - 0.7px) 97.1%,calc(100% - 2.2px) 98.6%,calc(100% - 1.1px) 100.0%,100.0% calc(100% - 0.7px),97.5% calc(100% - 0.2px),95.0% calc(100% - 1.5px),92.5% calc(100% - 1.0px),90.0% calc(100% - 0.4px),87.5% calc(100% - 0.5px),85.0% calc(100% - 1.8px),82.5% calc(100% - 0.5px),80.0% calc(100% - 0.7px),77.5% calc(100% - 1.6px),75.0% calc(100% - 1.3px),72.5% calc(100% - 0.1px),70.0% calc(100% - 1.7px),67.5% calc(100% - 0.8px),65.0% calc(100% - 0.7px),62.5% calc(100% - 1.3px),60.0% calc(100% - 0.8px),57.5% calc(100% - 0.7px),55.0% calc(100% - 0.8px),52.5% calc(100% - 0.7px),50.0% calc(100% - 1.3px),47.5% calc(100% - 1.0px),45.0% calc(100% - 0.6px),42.5% calc(100% - 2.1px),40.0% calc(100% - 1.5px),37.5% calc(100% - 0.1px),35.0% calc(100% - 0.0px),32.5% calc(100% - 1.6px),30.0% calc(100% - 1.6px),27.5% calc(100% - 0.8px),25.0% calc(100% - 1.5px),22.5% calc(100% - 1.0px),20.0% calc(100% - 1.4px),17.5% calc(100% - 0.1px),15.0% calc(100% - 1.4px),12.5% calc(100% - 1.4px),10.0% calc(100% - 0.0px),7.5% calc(100% - 1.3px),5.0% calc(100% - 0.9px),2.5% calc(100% - 0.0px),0.0% calc(100% - 1.2px),1.7px 100.0%,1.0px 98.6%,1.9px 97.1%,0.6px 95.7%,0.8px 94.3%,1.3px 92.9%,2.1px 91.4%,0.9px 90.0%,1.2px 88.6%,1.5px 87.1%,0.7px 85.7%,0.4px 84.3%,1.6px 82.9%,0.0px 81.4%,1.3px 80.0%,2.0px 78.6%,2.0px 77.1%,2.0px 75.7%,1.5px 74.3%,2.0px 72.9%,0.1px 71.4%,1.8px 70.0%,0.6px 68.6%,1.3px 67.1%,0.1px 65.7%,0.5px 64.3%,0.8px 62.9%,0.6px 61.4%,1.1px 60.0%,1.5px 58.6%,1.8px 57.1%,1.6px 55.7%,0.5px 54.3%,2.0px 52.9%,2.1px 51.4%,1.0px 50.0%,2.2px 48.6%,1.9px 47.1%,2.1px 45.7%,0.0px 44.3%,0.3px 42.9%,2.0px 41.4%,0.9px 40.0%,0.9px 38.6%,0.9px 37.1%,0.8px 35.7%,0.6px 34.3%,1.7px 32.9%,0.6px 31.4%,0.3px 30.0%,0.8px 28.6%,1.8px 27.1%,1.4px 25.7%,1.8px 24.3%,0.6px 22.9%,0.4px 21.4%,1.8px 20.0%,1.8px 18.6%,0.4px 17.1%,1.2px 15.7%,0.3px 14.3%,0.5px 12.9%,1.0px 11.4%,1.9px 10.0%,1.4px 8.6%,0.7px 7.1%,0.4px 5.7%,1.9px 4.3%,1.0px 2.9%,1.8px 1.4%,0.7px 0.0%);
  background:
    radial-gradient(130% 90% at 50% 40%,rgba(255,252,243,.28),rgba(255,252,243,0) 60%),
    radial-gradient(160% 120% at 50% 50%,transparent 62%,rgba(150,115,60,.16) 100%),
    #f7f1e3 url(assets/paper-ivory.jpg) center/cover;
  padding:clamp(34px,5.4vh,52px) clamp(26px,7vw,48px) clamp(22px,3.4vh,36px)}
.rules{position:absolute;inset:13px;pointer-events:none;border:1px solid transparent;
  border-image:linear-gradient(135deg,#b48a34,#e6c879 30%,#a17628 55%,#dcbd6c 80%,#9c7226) 1}
.rules::after{content:"";position:absolute;inset:4px;border:.5px solid rgba(166,124,44,.75)}
.content{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}
.press{}
.mark{width:clamp(48px,7vh,64px);height:auto;margin-bottom:clamp(12px,2vh,20px);opacity:.95}
.from{font-family:"Cinzel",serif;font-weight:600;font-size:clamp(14px,3.9vw,17px);letter-spacing:.16em;
  text-transform:uppercase;color:#8a6420;line-height:1.55;text-shadow:0 1px 0 rgba(255,255,255,.75)}
.names{font-family:"Pinyon",cursive;font-size:clamp(34px,9.4vw,50px);color:#5e0b16;line-height:1.1;
  margin-top:clamp(4px,.8vh,8px);text-shadow:0 1px 0 rgba(255,255,255,.6)}
.rule{display:block;width:42%;height:1px;margin:clamp(14px,2.4vh,24px) 0;
  background:linear-gradient(90deg,transparent,#b8913f 20%,#e2c47a 50%,#b8913f 80%,transparent)}
h1{display:flex;flex-direction:column;align-items:center;font-weight:400;outline:none}
h1 .script{font-family:"Pinyon",cursive;font-size:clamp(50px,13.6vw,76px);line-height:1.02;padding:0 .12em;
  background:linear-gradient(180deg,#7d1424,#4a0810);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.7))}
h1 .caps{font-family:"Cinzel",serif;font-weight:600;font-size:clamp(20px,6vw,28px);letter-spacing:.3em;padding-left:.3em;margin-top:2px;
  background:linear-gradient(180deg,#c99d45,#8a6420 55%,#b4873a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.75))}
.facts{margin-top:clamp(16px,2.8vh,28px);display:flex;flex-direction:column;gap:clamp(2px,.5vh,6px)}
.facts p,.dress,.deadline{color:#2e1410;text-shadow:0 1px 0 rgba(255,255,255,.8),0 -.5px 0 rgba(60,25,10,.18)}
.facts .date{font-weight:700;font-size:clamp(25px,7vw,32px);line-height:1.2}
.facts .time{font-weight:700;font-size:clamp(25px,7vw,32px);line-height:1.2}
.facts .place{font-weight:600;font-size:clamp(23px,6.4vw,29px);line-height:1.25}
.facts .place span{color:#8a6420}
.dress{margin-top:clamp(8px,1.4vh,14px);font-style:italic;font-weight:500;font-size:clamp(21px,5.8vw,26px);color:#5e0b16}
.deadline{font-size:clamp(19px,5.2vw,23px);font-weight:500;font-style:italic;line-height:1.3}
.deadline strong{font-style:normal;font-weight:700;color:#5e0b16;white-space:nowrap}
.cta{margin-top:clamp(16px,2.6vh,26px);display:inline-block;text-decoration:none;font-family:"Cinzel",serif;font-weight:600;
  font-size:clamp(15px,4.3vw,19px);letter-spacing:.08em;text-transform:uppercase;color:#3a060c;white-space:nowrap;
  padding:clamp(14px,2vh,18px) 26px;border-radius:999px;min-width:min(100%,280px);
  background:linear-gradient(180deg,#f3dc9a,#d2a84a 45%,#b58630);
  box-shadow:0 6px 14px rgba(90,40,0,.3),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(0,0,0,.15);
  transition:transform .2s,box-shadow .2s}
.cta:hover{transform:translateY(-1px)}
.cta:focus-visible{outline:3px solid var(--wine);outline-offset:4px}
.reseal{margin-top:clamp(6px,1vh,12px);background:none;border:0;font-family:"Cormorant",serif;font-style:italic;font-size:16px;font-weight:500;
  color:rgba(138,100,32,.85);cursor:pointer;padding:8px 12px;letter-spacing:.04em}
.reseal:hover{text-decoration:underline;text-underline-offset:4px}
.reseal:focus-visible{outline:2px solid var(--gold-d)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media (max-height:880px){
  .paper{padding:26px 24px 14px}
  .rules{inset:10px}
  .mark{width:44px;margin-bottom:8px}
  .names{font-size:clamp(32px,8.8vw,44px)}
  h1 .script{font-size:clamp(44px,12.4vw,64px)}
  .rule{margin:11px 0}
  .facts{margin-top:12px}
  .facts .date,.facts .time{font-size:clamp(24px,6.6vw,28px)}
  .facts .place{font-size:clamp(22px,6vw,26px)}
  .cta{margin-top:14px;padding:13px 24px}
  .reseal{margin-top:2px;padding:6px 10px}
}