:root{--bg:#fff0ec;--ink:#3b1030;--soft:#7a4a68;--rose:#e0507a;--gold:#e9a62a;--leaf:#2f6b4f;--paper:#fffaf6;--line:#f0c9c9;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#2a0b22;--ink:#ffe9e4;--soft:#d9a9c2;--rose:#ff7da0;--gold:#f6bf55;--leaf:#58b389;--paper:#3d1832;--line:#5e2a4f}}
:root[data-theme="dark"]{--bg:#2a0b22;--ink:#ffe9e4;--soft:#d9a9c2;--rose:#ff7da0;--gold:#f6bf55;--leaf:#58b389;--paper:#3d1832;--line:#5e2a4f}
*{box-sizing:border-box;margin:0}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 1.05rem/1.7 Mulish,system-ui,sans-serif;overflow-x:hidden}
canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
section{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:4.5rem 1.4rem}
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.ur{font-family:'Aref Ruqaa',serif;font-size:clamp(1.6rem,5vw,2.2rem);color:var(--gold)}
h1{font-family:Fraunces,Georgia,serif;font-weight:800;font-size:clamp(2.4rem,10vw,5.2rem);line-height:1.02;margin:.6rem 0 .4rem;letter-spacing:-.02em}
h1 .w{display:inline-block;white-space:nowrap}
h1 .c{display:inline-block;opacity:0;transform:translateY(60%) rotate(8deg);animation:rise .9s cubic-bezier(.2,.9,.3,1.2) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.name{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(1.5rem,6vw,2.6rem);color:var(--rose);opacity:0;animation:rise 1s 1.6s forwards}
.sub{max-width:34ch;margin:1.2rem auto 2rem;color:var(--soft);opacity:0;animation:rise 1s 2.1s forwards}
button{font:600 1rem Mulish,sans-serif;cursor:pointer;border:0;border-radius:99px;padding:.85rem 1.7rem;background:var(--rose);color:#fff;transition:transform .2s,box-shadow .2s;box-shadow:0 6px 0 rgba(0,0,0,.18)}
button:hover{transform:translateY(-2px)}button:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.18)}
button:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.cta{opacity:0;animation:rise 1s 2.5s forwards}
h2{font-family:Fraunces,Georgia,serif;font-size:clamp(1.7rem,5vw,2.4rem);margin-bottom:1rem}
/* envelope */
#env{margin:0 auto;width:min(340px,86vw);height:230px;position:relative;perspective:900px;cursor:pointer;transition:opacity .6s,transform .6s}
#env .back,#env .front{position:absolute;inset:0;border-radius:10px}
#env .back{background:#d9486f}
#env .front{background:linear-gradient(135deg,transparent 49.5%,#ee6b8f 50%) left/50% 100% no-repeat,linear-gradient(225deg,transparent 49.5%,#f27d9b 50%) right/50% 100% no-repeat,linear-gradient(0deg,#f48aa5 0 50%,transparent 50%)}
#env .flap{position:absolute;left:0;right:0;top:0;height:55%;background:#c63a63;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .7s}
#env .seal{position:absolute;left:50%;top:44%;width:46px;height:46px;margin:-23px;border-radius:50%;background:var(--gold);display:grid;place-items:center;font-size:1.4rem;z-index:3;animation:beat 1.4s infinite;transition:opacity .3s}
@keyframes beat{50%{transform:scale(1.15)}}
#env.open .flap{transform:rotateX(180deg)}#env.open .seal{opacity:0}
#env.gone{opacity:0;transform:translateY(-30px) scale(.9);pointer-events:none;height:0;margin:0;overflow:hidden}
.hint{text-align:center;color:var(--soft);margin-top:1.2rem}
#letter{display:none;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:clamp(1.4rem,5vw,3rem);box-shadow:0 20px 50px rgba(120,30,70,.18);background-image:repeating-linear-gradient(transparent 0 1.69rem,var(--line) 1.7rem);background-attachment:local}
#letter.show{display:block;animation:unfold .9s ease-out}
@keyframes unfold{from{transform:scaleY(.1) translateY(-40px);opacity:0;transform-origin:top}}
#letter p{min-height:1.7em;margin-bottom:1.7rem;font-family:Fraunces,Georgia,serif;font-weight:500;font-size:1.12rem}
#letter p.sig{text-align:right;color:var(--rose);font-style:italic}
.who{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-bottom:1.4rem;align-items:center}
input{font:inherit;padding:.7rem 1rem;border-radius:99px;border:2px solid var(--line);background:var(--paper);color:var(--ink);min-width:0;flex:1 1 180px;max-width:260px}
.cur::after{content:"|";color:var(--rose);animation:blink .8s infinite}@keyframes blink{50%{opacity:0}}
/* qualities */
.q{padding:1.1rem 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:3rem 1fr;gap:.2rem 1rem;align-items:start}
.q b{font-family:Fraunces,serif;font-size:1.3rem;grid-column:2}.q span{grid-column:2;color:var(--soft)}.q i{grid-row:1/3;font-style:normal;font-size:2rem}
.q{opacity:0;transform:translateX(-24px);transition:.8s}.q.in{opacity:1;transform:none}
/* garden */
#garden{position:relative;height:260px;border-bottom:6px solid var(--leaf);margin-top:1.5rem;overflow:hidden}
.fl{position:absolute;bottom:0;width:70px;height:200px;transform-origin:bottom center}
.fl svg{width:100%;height:100%;overflow:visible}
.stem{stroke-dasharray:140;stroke-dashoffset:140;animation:grow 1s forwards}
@keyframes grow{to{stroke-dashoffset:0}}
.bloom{transform-box:fill-box;transform-origin:center;transform:scale(0);animation:pop .8s .9s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes pop{to{transform:scale(1)}}
.fl{animation:sway 3.5s ease-in-out infinite alternate}@keyframes sway{from{rotate:-3deg}to{rotate:3deg}}
.count{text-align:center;margin-top:1rem;color:var(--soft)}
footer{position:relative;z-index:1;text-align:center;padding:2rem 1rem 3rem;color:var(--soft)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-delay:0s!important;transition:none!important}}