:root{--gold:#D4AF5F;--emerald:#0A3B2C}
body{margin:0;background:#F7F1E1}
.page{width:100%;overflow-x:clip;background:#F7F1E1;color:#F7F1E1;font-family:'Jost',sans-serif;font-weight:300;line-height:1.6}
*{box-sizing:border-box}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:16px 36px;border:1px solid var(--gold);border-radius:999px;font-family:'Jost',sans-serif;font-weight:500;font-size:13px;letter-spacing:.28em;text-transform:uppercase;text-decoration:none;color:#0A2E22;background:var(--gold);cursor:pointer;transition:background .25s,color .25s,transform .16s cubic-bezier(.23,1,.32,1)}
.btn:hover{background:transparent;color:var(--gold)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid #F7F1E1;outline-offset:4px}
.btn-dark{color:#F7F1E1;background:var(--emerald);border-color:var(--emerald)}
.btn-dark:hover{background:transparent;color:var(--emerald)}
.seal:focus-visible{outline:2px solid #F7F1E1;outline-offset:6px}
.seal:active{transform:translate(-50%,-50%) scale(.95)!important}
.fld{width:100%;min-height:52px;padding:14px 18px;border:1px solid rgba(10,59,44,.4);border-radius:14px;background:#FFFBF0;font:400 16px 'Jost',sans-serif;color:#0A2E22}
.fld:focus{outline:2px solid var(--gold);outline-offset:2px}
.chip{min-height:48px;padding:10px 20px;border-radius:999px;font:500 13px 'Jost',sans-serif;letter-spacing:.14em;cursor:pointer;transition:background .2s,color .2s,transform .16s cubic-bezier(.23,1,.32,1)}
.chip:active{transform:scale(.97)}
.chip:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ===== HERO: sticky stage inside a tall track (JS drives zoom/fade by scroll) ===== */
.hero-track{position:relative;height:100vh;height:100svh}
.hero-track.is-open{height:330vh}
.hero-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;--ew:min(86vw,400px,52vh);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 16px 36px;text-align:center;background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(212,175,95,.24),transparent 70%),radial-gradient(ellipse 60% 40% at 50% 100%,rgba(212,175,95,.12),transparent 70%),var(--emerald)}
.hero-head{position:relative;z-index:2}
.zoomer{position:relative;width:var(--ew);margin-top:calc(var(--ew)*.36);transform-origin:50% -4%;container-type:inline-size;--envo:1}
.env-part{opacity:var(--envo)}
.flood{position:absolute;inset:0;background:#F7F1E1;opacity:0;pointer-events:none;z-index:20}
.cue{position:absolute;left:0;right:0;bottom:22px;display:flex;flex-direction:column;align-items:center;gap:10px;z-index:3;pointer-events:none}
.cue-in{display:flex;flex-direction:column;align-items:center;gap:10px;animation:cuein 1s 2.4s cubic-bezier(.23,1,.32,1) both}
.cue-line{position:relative;width:1px;height:38px;background:rgba(212,175,95,.3);overflow:hidden}
.cue-line::after{content:"";position:absolute;left:0;top:0;width:1px;height:14px;background:var(--gold);animation:drip 2s cubic-bezier(.5,0,.3,1) infinite}
@keyframes cuein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes drip{from{transform:translateY(-14px)}to{transform:translateY(38px)}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.seal-sheen{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.6) 50%,transparent 62%);background-size:260% 100%;background-position:150% 0;animation:sheen 4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes sheen{0%{background-position:150% 0}55%,100%{background-position:-60% 0}}

/* ===== Illustrations: scroll-driven draw-in (progressive; fully drawn where unsupported) ===== */
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes wipe{from{clip-path:inset(0 -10% 100% -10%)}to{clip-path:inset(0 -10% -6% -10%)}}
@keyframes lift{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()){
.row{view-timeline:--r block}
.dr{stroke-dasharray:1;stroke-dashoffset:0;animation:draw linear both;animation-timeline:--r;animation-range:entry calc(6% + var(--i,0)*2.5%) cover calc(30% + var(--i,0)*2.2%)}
.fl{animation:fadein linear both;animation-timeline:--r;animation-range:entry 38% cover 46%}
.wipe{animation:wipe linear both;animation-timeline:--r;animation-range:entry 0% cover 48%}
.dot{animation:fadein linear both;animation-timeline:--r;animation-range:entry 40% cover 48%}
.rt{animation:lift linear both;animation-timeline:--r;animation-range:entry 22% cover 40%}
}

/* ===== Illustrations: bespoke ambient motion ===== */
.swing{transform-origin:60px 24px;animation:swing 5.5s ease-in-out infinite alternate}
@keyframes swing{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
.lf{animation:leaf 4.5s ease-in-out infinite alternate}
.lf.l2{animation-delay:-2s}
@keyframes leaf{from{transform:rotate(-5deg)}to{transform:rotate(6deg)}}
.bq{transform-origin:60px 94px;animation:sway 6.5s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}
.pt{animation:petal 7s cubic-bezier(.4,0,.6,1) infinite}
@keyframes petal{0%{transform:translate(0,0) rotate(0);opacity:0}10%{opacity:.95}100%{transform:translate(-14px,74px) rotate(130deg);opacity:0}}
.str{animation:pluck 4.4s infinite}
@keyframes pluck{0%,18%,100%{transform:rotate(0)}3%{transform:rotate(2.4deg)}6%{transform:rotate(-2.1deg)}9%{transform:rotate(1.5deg)}12%{transform:rotate(-.9deg)}15%{transform:rotate(.4deg)}}
.nt{animation:nrise 5.5s ease-out infinite both}
.nt.n2{animation-delay:-2.7s}
@keyframes nrise{0%{transform:translate(0,8px);opacity:0}15%{opacity:1}70%{opacity:1}100%{transform:translate(5px,-28px);opacity:0}}
.hg{transform-origin:60px 60px;animation:hgrot 11s infinite}
@keyframes hgrot{0%,86%{transform:rotate(0);animation-timing-function:cubic-bezier(.65,0,.25,1)}97%,100%{transform:rotate(180deg)}}
.sT{transform-origin:60px 58px;animation:hgtop 11s linear infinite}
@keyframes hgtop{0%{transform:scaleY(1)}84%,100%{transform:scaleY(0)}}
.sB{transform-origin:60px 96px;animation:hgbot 11s linear infinite}
@keyframes hgbot{0%{transform:scaleY(0)}84%,100%{transform:scaleY(1)}}
.strm{animation:hgstrm 11s linear infinite,flow .7s linear infinite}
@keyframes hgstrm{0%,83%{opacity:1}86%,100%{opacity:0}}
@keyframes flow{to{stroke-dashoffset:-5}}
.rl{animation:ringl 7s ease-in-out infinite}
.rr{animation:ringr 7s ease-in-out infinite}
@keyframes ringl{0%,100%{transform:translateX(-7px)}45%,62%{transform:translateX(0)}}
@keyframes ringr{0%,100%{transform:translateX(7px)}45%,62%{transform:translateX(0)}}
.spk{transform-origin:74px 28px;animation:spk 7s ease-out infinite}
@keyframes spk{0%,46%{transform:rotate(0) scale(.2);opacity:0}56%{transform:rotate(45deg) scale(1);opacity:1}72%,100%{transform:rotate(90deg) scale(.3);opacity:0}}
.blink{transform-origin:60px 64px;animation:blink 9s infinite}
@keyframes blink{0%,90%,100%{transform:scaleY(1)}93%{transform:scaleY(.06)}}
.look{animation:look 9s ease-in-out infinite}
@keyframes look{0%,10%{transform:translateX(0)}28%,44%{transform:translateX(-11px)}62%,78%{transform:translateX(11px)}95%,100%{transform:translateX(0)}}
.sig{stroke-dasharray:1;animation:sig 6s linear infinite}
@keyframes sig{0%{stroke-dashoffset:1;opacity:1}58%,90%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.qn{animation:qn 6s linear infinite}
@keyframes qn{0%{transform:translate(-22px,0);opacity:0}4%{opacity:1}58%,90%{transform:translate(12px,-1px);opacity:1}100%{transform:translate(12px,-1px);opacity:0}}
.ry{stroke-dasharray:1;animation:ray 4.2s ease-out infinite both}
@keyframes ray{0%{stroke-dashoffset:1;opacity:0}12%{opacity:1}45%{stroke-dashoffset:0;opacity:1}80%,100%{stroke-dashoffset:0;opacity:0}}
.apt{transform-origin:63px 66px;animation:spin 16s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.fbst{animation:fbst 5s infinite}
@keyframes fbst{0%,76%{opacity:0;transform:translate(2px,2px)}80%{opacity:1;transform:none}92%,100%{opacity:0;transform:translate(-3px,-3px)}}
.shut{animation:shut 5s infinite}
@keyframes shut{0%,76%{transform:translateY(0)}79%{transform:translateY(2px)}86%,100%{transform:translateY(0)}}
.fa{transform-origin:40px 104px;animation:clinkl 5s ease-in-out infinite}
.fb{transform-origin:80px 104px;animation:clinkr 5s ease-in-out infinite}
@keyframes clinkl{0%,16%,88%,100%{transform:rotate(0)}32%{transform:rotate(12deg)}36%{transform:rotate(9.5deg)}62%{transform:rotate(9.5deg)}}
@keyframes clinkr{0%,16%,88%,100%{transform:rotate(0)}32%{transform:rotate(-12deg)}36%{transform:rotate(-9.5deg)}62%{transform:rotate(-9.5deg)}}
.cl{transform-origin:60px 42px;animation:clspark 5s ease-out infinite}
@keyframes clspark{0%,31%{opacity:0;transform:scale(.5)}35%{opacity:1;transform:scale(1)}52%,100%{opacity:0;transform:scale(1.2)}}
.bb{animation:bub 3.2s ease-in infinite}
@keyframes bub{0%{transform:translateY(0);opacity:0}15%{opacity:.9}100%{transform:translateY(-16px);opacity:0}}
.cf{animation:cfall 6s linear infinite both}
@keyframes cfall{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:1}100%{transform:translateY(46px) rotate(200deg);opacity:0}}
.mic{transform-origin:60px 102px;animation:lean 7s ease-in-out infinite alternate}
@keyframes lean{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
.snd{stroke-dasharray:.28 .72;animation:travel 2.6s linear infinite}
@keyframes travel{from{stroke-dashoffset:0}to{stroke-dashoffset:-1}}

@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* ===== state: envelope open / personalised card ===== */
.flap{z-index:6;transform:rotateX(0)}
.is-open .flap{z-index:1;transform:rotateX(180deg)}
.env-card{transform:translateY(0)}
.is-open .env-card{transform:translateY(-64%)}
.seal{transform:translate(-50%,-50%) scale(1);opacity:1}
.is-open .seal{transform:translate(-50%,-50%) scale(.5);opacity:0;pointer-events:none}
.envclick{cursor:pointer}
.is-open .envclick{cursor:default}
.is-open .tap-hint{display:none}
.cue{display:none}
.is-open .cue{display:flex}
.card-default{display:contents}
.card-guest{display:none}
.has-guest .card-default{display:none}
.has-guest .card-guest{display:contents}
.chip{background:transparent;color:#0A2E22;border:1px solid rgba(10,59,44,.4)}
.chip.on{background:var(--emerald);color:#F7F1E1;border-color:var(--emerald)}
[hidden]{display:none!important}

.btn-ghost{background:transparent;color:var(--emerald);border-color:var(--emerald)}
.btn-ghost:hover{background:var(--emerald);color:#F7F1E1}
.btn:disabled{opacity:.6;cursor:default}