@font-face{font-family:"Great Vibes";src:url(fonts/greatvibes.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Cormorant";src:url(fonts/cormorant.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Cormorant";src:url(fonts/cormorant-italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}

:root{
  --cream:#f8f1e4;--paper:#fffaf1;--ink:#3b3226;--gold:#b48a3c;--gold-d:#8c6a26;--gold-l:#e7cf95;
  --ocean:#1d5f7d;--ocean-d:#123f55;--sea:#6fb3c6;
  --script:"Great Vibes","Snell Roundhand","Apple Chancery",cursive;
  --serif:"Cormorant","Iowan Old Style","Palatino",Georgia,serif;
  --ew:min(84vw,360px);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;}
body{
  font-family:var(--serif);color:var(--ink);
  background:
    radial-gradient(120% 70% at 50% 0%,#fffdf7 0%,var(--cream) 55%,#efe4cf 100%) fixed;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
.scene{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 0 110px;}

/* ---------- stage / envelope ---------- */
.stage{display:flex;flex-direction:column;align-items:center;gap:34px;padding-top:40px;transition:opacity .7s ease,transform .9s cubic-bezier(.5,0,.3,1);}
.hint{margin:0;text-align:center;letter-spacing:.04em}
.top-hint{font-style:italic;font-size:21px;color:var(--gold-d);opacity:0;animation:fadeIn 1.2s .3s ease forwards}
.tap-hint{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--ocean);opacity:0;animation:fadeIn 1s 1s ease forwards,pulse 2.4s 2s ease-in-out infinite}

.envelope{
  position:relative;width:var(--ew);height:calc(var(--ew) * .66);
  perspective:1100px;-webkit-perspective:1100px;
  filter:drop-shadow(0 18px 22px rgba(80,60,30,.22)) drop-shadow(0 3px 5px rgba(80,60,30,.12));
  animation:float 5s ease-in-out infinite;
}
.env-back{position:absolute;inset:0 2px 30% 2px;border-radius:6px 6px 0 0;
  background:
    radial-gradient(circle at 20% 20%,rgba(231,207,149,.35) 0 1.2px,transparent 1.6px) 0 0/14px 14px,
    linear-gradient(160deg,#235f7c,#163f55);
}
.mini-card{position:absolute;left:6%;width:88%;top:7%;height:86%;z-index:2;border-radius:4px;
  background:var(--paper);box-shadow:0 0 0 1px rgba(180,138,60,.35),inset 0 0 0 6px var(--paper),inset 0 0 0 7px rgba(180,138,60,.5);
  display:flex;flex-direction:column;align-items:center;padding-top:9%;
  transition:transform 1s cubic-bezier(.3,.7,.3,1) .75s;
}
.mini-heart{color:var(--gold);font-size:14px}
.mini-name{font-family:var(--script);font-size:calc(var(--ew) * .13);color:var(--gold-d);line-height:1.15}
.mini-rule{width:40%;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin-top:4px}

.pocket{position:absolute;inset:0;z-index:3;pointer-events:none}
.pocket span{position:absolute;inset:0;display:block}
.pocket-left{background:linear-gradient(100deg,#f6eddb,#efe3cc);-webkit-clip-path:polygon(0 0,52% 54%,0 100%);clip-path:polygon(0 0,52% 54%,0 100%);border-radius:6px}
.pocket-right{background:linear-gradient(260deg,#f6eddb,#efe3cc);-webkit-clip-path:polygon(100% 0,48% 54%,100% 100%);clip-path:polygon(100% 0,48% 54%,100% 100%);border-radius:6px}
.pocket-bottom{background:linear-gradient(0deg,#fbf5e9,#f2e7d1);-webkit-clip-path:polygon(0 100%,50% 44%,100% 100%);clip-path:polygon(0 100%,50% 44%,100% 100%);border-radius:6px}
.pocket .to{inset:auto 0 5% 0;text-align:center;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--gold-d);letter-spacing:.06em}
.pocket .to em{font-family:var(--script);font-style:normal;font-size:30px;margin-left:4px;color:var(--gold-d)}

.flap{position:absolute;left:0;top:0;width:100%;height:56%;z-index:4;
  transform-origin:50% 0;-webkit-transform-origin:50% 0;transform:rotateX(0deg);
  transition:transform .8s cubic-bezier(.45,.05,.3,1),z-index 0s linear .4s;
}
.flap::before,.flap-in{content:"";position:absolute;inset:0;-webkit-clip-path:polygon(0 0,100% 0,50% 100%);clip-path:polygon(0 0,100% 0,50% 100%)}
.flap::before{background:linear-gradient(180deg,#f1e5cd,#e8d9bb);border-radius:6px 6px 0 0}
.flap-in{display:block;opacity:0;transition:opacity 0s linear .4s;
  background:
    radial-gradient(circle at 20% 20%,rgba(231,207,149,.4) 0 1.2px,transparent 1.6px) 0 0/14px 14px,
    linear-gradient(0deg,#235f7c,#1a4a62);
  inset:3px 6px 0 6px;
}

.seal{position:absolute;z-index:6;left:50%;top:56%;width:calc(var(--ew) * .21);height:calc(var(--ew) * .21);
  margin:calc(var(--ew) * -.105) 0 0 calc(var(--ew) * -.105);padding:0;border:0;background:none;cursor:pointer;border-radius:50%;
  filter:drop-shadow(0 3px 3px rgba(90,60,10,.35));transition:transform .5s ease,opacity .5s ease;
}
.seal svg{width:100%;height:100%;display:block}
.seal:focus-visible{outline:3px solid var(--ocean);outline-offset:4px}
.seal:active{transform:scale(.94)}
.envelope:not(.open) .seal{animation:sealGlow 2.6s 1.5s ease-in-out infinite}

/* opening sequence */
.envelope.open{animation:none}
.envelope.open .seal{transform:scale(1.15) translateY(-6px);opacity:0;pointer-events:none}
.envelope.open .flap{transform:rotateX(180deg);z-index:1}
.envelope.open .flap-in{opacity:1}
.envelope.open .mini-card{transform:translateY(-64%)}
.stage.opening .tap-hint{opacity:0;animation:none;transition:opacity .4s}
.stage.away{opacity:0;transform:translateY(40vh) scale(.92)}
.stage.away .hint{opacity:0;animation:none;transition:opacity .3s}
.stage.gone{display:none}

/* ---------- letter ---------- */
.letter{display:none;width:min(92vw,440px);margin:44px auto 0;position:relative;outline:none}
.letter.show{display:block;animation:rise 1.1s cubic-bezier(.2,.8,.2,1) both}
.letter-inner{
  position:relative;background:var(--paper);border-radius:6px;padding:34px 26px 30px;text-align:center;
  box-shadow:0 22px 50px rgba(80,60,30,.20),0 2px 6px rgba(80,60,30,.10),inset 0 0 0 10px var(--paper),inset 0 0 0 11px rgba(180,138,60,.55),inset 0 0 0 14px var(--paper),inset 0 0 0 15px rgba(180,138,60,.25);
}
.ornament{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--gold);font-size:16px}
.ornament span{width:54px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.ornament span:last-child{transform:scaleX(-1)}
.greet{margin:14px 0 0;font-style:italic;font-size:20px;color:var(--gold-d);letter-spacing:.05em}
.name{margin:0 0 14px;font-family:var(--script);font-weight:400;font-size:64px;line-height:1.1;color:var(--gold-d);
  background:linear-gradient(180deg,#c9a24f,#8c6a26);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.letter p{font-variant-numeric:lining-nums;font-size:20.5px;line-height:1.45;margin:0 0 14px}
.ocean{color:var(--ocean);font-weight:600}
.details{margin:20px auto 20px;padding:16px 8px;border-top:1px solid rgba(180,138,60,.5);border-bottom:1px solid rgba(180,138,60,.5);position:relative}
.details::before,.details::after{content:"♥";position:absolute;left:50%;transform:translate(-50%,-50%);top:0;background:var(--paper);color:var(--gold);font-size:11px;padding:0 8px}
.details::after{top:100%}
.letter .details p{margin:0}
.d-dates{font-variant-numeric:lining-nums;font-size:24px!important;font-weight:600;color:var(--ocean-d);letter-spacing:.02em}
.d-place{font-size:15px!important;letter-spacing:.2em;text-transform:uppercase;color:var(--ocean);margin-top:6px!important;font-weight:600}
.d-room{font-style:italic;font-size:19px!important;color:var(--gold-d);margin-top:4px!important}
.ask{font-style:italic;font-size:23px!important;color:var(--ocean-d);margin-top:6px!important}
.sign{font-family:var(--script);font-size:40px!important;color:var(--gold-d);margin:10px 0 6px!important;line-height:1.2!important}
.sign span:first-child{font-size:30px;margin-right:4px}
.sign-heart{font-family:-apple-system,"Apple Color Emoji","Segoe UI Emoji",sans-serif;font-size:22px;vertical-align:middle}

.yes-wrap{margin-top:12px;min-height:76px}
.yes{font-family:var(--serif);font-size:21px;font-weight:600;letter-spacing:.04em;color:#fffaf1;
  background:linear-gradient(180deg,#24708f,var(--ocean-d));border:1px solid var(--gold-l);border-radius:999px;
  padding:12px 36px;cursor:pointer;box-shadow:0 6px 16px rgba(18,63,85,.28),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .15s ease,box-shadow .2s ease;-webkit-appearance:none;appearance:none}
.yes:active{transform:scale(.96)}
.yes:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.yes.said{background:linear-gradient(180deg,#c9a24f,#8c6a26)}
.yes-note{min-height:28px;margin:12px 0 0!important;font-style:italic;color:var(--ocean);font-size:20px!important;opacity:0;transition:opacity .6s}
.yes-note.on{opacity:1}
.again{display:block;margin:22px auto 0;background:none;border:0;font-family:var(--serif);font-style:italic;font-size:16px;color:var(--gold-d);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:8px}
.again:focus-visible{outline:2px solid var(--ocean)}

/* ---------- waves & burst ---------- */
.waves{position:fixed;left:0;right:0;bottom:0;height:90px;pointer-events:none;z-index:0}
.waves svg{width:100%;height:100%;display:block}
.w1{fill:var(--sea);opacity:.18;animation:sway 9s ease-in-out infinite}
.w2{fill:var(--ocean);opacity:.14;animation:sway 12s ease-in-out infinite reverse}
.stage,.letter{z-index:1}
.burst{position:fixed;inset:0;pointer-events:none;z-index:20;overflow:hidden}
.bit{position:absolute;left:0;top:0;will-change:transform,opacity;line-height:1}

@keyframes fadeIn{to{opacity:1}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes sealGlow{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes rise{from{opacity:0;transform:translateY(60px) scale(.94)}to{opacity:1;transform:none}}
@keyframes sway{0%,100%{transform:translateX(0)}50%{transform:translateX(-30px)}}

@media (min-width:700px){.scene{padding-top:40px}.letter-inner{padding:44px 40px 36px}}
@media (max-height:640px){.stage{gap:22px;padding-top:10px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.25s!important}
}

/* ---------- music toggle ---------- */
.sound{position:fixed;z-index:30;top:calc(14px + env(safe-area-inset-top));right:14px;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(180,138,60,.55);background:rgba(255,250,241,.88);color:var(--ocean);display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(80,60,30,.15);cursor:pointer;padding:0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fadeIn .8s ease both}
.sound[hidden]{display:none}
.sound svg{width:22px;height:22px}
.sound .ic-off{display:none}
.sound.muted .ic-on{display:none}
.sound.muted .ic-off{display:block}
.sound:focus-visible{outline:3px solid var(--ocean);outline-offset:3px}