:root{--ink:#f8f2e8;--muted:#b9b4bf;--navy:#070b1c;--navy-2:#0d132c;--wine:#701f36;--rose:#e85d75;--gold:#e8bf83;--paper:#f5ead8;--paper-ink:#2b1820;--line:rgba(255,255,255,.12);--shadow:0 24px 80px rgba(0,0,0,.36);--radius:28px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--navy);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6;overflow-x:hidden}body.locked{overflow:hidden}button,a{font:inherit}button{color:inherit}.noise{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}.petals{position:fixed;inset:0;pointer-events:none;z-index:60}.falling-heart{position:absolute;top:-40px;color:var(--rose);animation:fall linear forwards;filter:drop-shadow(0 8px 10px rgba(232,93,117,.25))}@keyframes fall{to{transform:translate3d(var(--drift),110vh,0) rotate(520deg);opacity:0}}
.welcome{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at 50% 30%,#1f1530 0,#080b1c 45%,#040610 100%);transition:opacity .65s ease,visibility .65s}.welcome.hidden{opacity:0;visibility:hidden}.welcome-card{width:min(480px,100%);text-align:center;padding:52px 34px;border:1px solid rgba(232,191,131,.25);border-radius:32px;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.015));box-shadow:var(--shadow);backdrop-filter:blur(20px)}.seal{margin:0 auto 25px;width:104px;height:104px;display:grid;place-items:center;border-radius:50%;font:600 26px Georgia,serif;letter-spacing:.12em;color:var(--gold);border:1px solid rgba(232,191,131,.5);box-shadow:inset 0 0 0 8px rgba(232,191,131,.06),0 10px 30px rgba(0,0,0,.3)}.seal span{color:var(--rose);margin:0 4px}.welcome h1{font:italic 500 clamp(3rem,10vw,5.2rem) Georgia,serif;margin:.15em 0;color:var(--ink)}.welcome p:not(.eyebrow){color:var(--muted);max-width:34ch;margin:0 auto 28px}.welcome small{display:block;margin-top:16px;color:#878492}
.topbar{position:fixed;z-index:40;top:0;left:0;right:0;height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,5vw,72px);border-bottom:1px solid transparent;transition:.3s}.topbar.scrolled{height:68px;background:rgba(7,11,28,.76);backdrop-filter:blur(18px);border-color:var(--line)}.brand{display:inline-flex;align-items:center;gap:7px;color:var(--ink);text-decoration:none;font:600 20px Georgia,serif;letter-spacing:.08em}.brand i{font-style:normal;color:var(--rose);font-size:15px}.topbar nav{display:flex;gap:34px}.topbar nav a{font-size:14px;color:var(--muted);text-decoration:none;transition:.2s}.topbar nav a:hover{color:var(--ink)}.icon-button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.04);display:grid;place-items:center;cursor:pointer}.icon-button svg{width:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.sound-off{display:none}.icon-button[aria-pressed="true"] .sound-off{display:block}.icon-button[aria-pressed="true"] .sound-on{display:none}
.section{position:relative;padding:clamp(90px,11vw,160px) clamp(20px,6vw,96px)}.hero{min-height:100svh;display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:clamp(40px,6vw,100px);padding-top:120px;background:radial-gradient(circle at 20% 20%,rgba(112,31,54,.3),transparent 32%),linear-gradient(135deg,#070b1c 0%,#0b1027 62%,#150b1c 100%)}.eyebrow{text-transform:uppercase;letter-spacing:.22em;font-size:12px;font-weight:700;color:var(--gold);margin:0 0 17px}.hero h2,.section-heading h2,.promise-intro h2,.game-copy h2,.finale h2{font:500 clamp(3.4rem,8vw,8.4rem)/.88 Georgia,serif;letter-spacing:-.055em;margin:0}.hero h2 em,.finale h2 em{font-weight:400;color:var(--rose)}.hero-line{font-size:clamp(17px,2vw,21px);color:var(--muted);max-width:31em;margin:34px 0}.hero-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.primary-button,.ghost-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 23px;border-radius:999px;border:1px solid transparent;text-decoration:none;cursor:pointer;font-size:15px;font-weight:700;transition:transform .2s,box-shadow .2s,background .2s}.primary-button{background:linear-gradient(135deg,var(--rose),#b62e50);color:white;box-shadow:0 12px 30px rgba(232,93,117,.22)}.primary-button:hover{transform:translateY(-2px);box-shadow:0 17px 38px rgba(232,93,117,.32)}.ghost-button{background:transparent;color:var(--ink);border-color:var(--line)}.ghost-button:hover{background:rgba(255,255,255,.06)}.hero-visual{position:relative;min-height:min(67vh,700px);border-radius:clamp(24px,4vw,48px);overflow:hidden;box-shadow:var(--shadow);transform:rotate(1.4deg)}.hero-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 46%,rgba(4,7,18,.8))}.hero-visual img{width:100%;height:100%;position:absolute;object-fit:cover}.floating-note{position:absolute;z-index:2;right:22px;bottom:22px;padding:12px 18px;border-radius:999px;background:rgba(7,11,28,.72);border:1px solid rgba(255,255,255,.17);backdrop-filter:blur(12px);font-family:Georgia,serif}.floating-note span{color:var(--muted);font:12px system-ui;margin-right:7px}.floating-note i{color:var(--rose);font-style:normal;margin-left:7px}.scroll-cue{position:absolute;left:50%;bottom:25px;transform:translateX(-50%);color:#898795;text-decoration:none;text-transform:uppercase;letter-spacing:.18em;font-size:10px}.scroll-cue span{display:inline-block;margin-left:7px;animation:bob 1.6s infinite}@keyframes bob{50%{transform:translateY(5px)}}
.letter-section{background:var(--paper);color:var(--paper-ink)}.section-heading{text-align:center;margin-bottom:55px}.section-heading h2{font-size:clamp(3rem,7vw,6.8rem);line-height:1;color:inherit}.letter-section .eyebrow{color:var(--wine)}.love-letter{max-width:850px;margin:auto;padding:clamp(30px,6vw,76px);background:rgba(255,255,255,.5);border:1px solid rgba(72,32,38,.14);box-shadow:0 22px 70px rgba(65,35,27,.12);font:clamp(17px,2vw,20px)/1.85 Georgia,serif;position:relative}.love-letter:before{content:"";position:absolute;inset:15px;border:1px solid rgba(112,31,54,.12);pointer-events:none}.letter-top{display:flex;justify-content:space-between;font-size:clamp(22px,3vw,30px);font-style:italic;margin-bottom:28px}.letter-top span:last-child{color:var(--wine);font-size:38px}.letter-ending{text-align:right;margin:34px 12px 0}.letter-ending strong{font-size:28px;font-style:italic}.letter-ending span{color:var(--wine)}
.reasons-section{background:linear-gradient(180deg,#0b1027,#070b1c)}.reason-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1280px;margin:auto}.reason-card{min-height:300px;padding:30px;display:flex;flex-direction:column;justify-content:flex-end;border:1px solid var(--line);border-radius:24px;background:linear-gradient(150deg,rgba(255,255,255,.065),rgba(255,255,255,.018));transition:transform .3s,border-color .3s}.reason-card:hover{transform:translateY(-7px);border-color:rgba(232,191,131,.36)}.reason-card>span{margin-bottom:auto;color:var(--gold);font:italic 18px Georgia,serif}.reason-card h3{font:500 31px Georgia,serif;margin:0 0 10px}.reason-card p{color:var(--muted);margin:0;font-size:15px}
.promises-section{background:linear-gradient(135deg,#701f36,#3e1429);display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(35px,8vw,130px);align-items:start}.promise-intro{position:sticky;top:120px}.promise-intro h2{font-size:clamp(3.5rem,7vw,7rem)}.promise-intro>p:last-child{color:#ddbdc6}.promise-stack{display:grid;gap:16px}.promise-card{text-align:left;width:100%;min-height:135px;padding:28px 30px;border-radius:22px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);cursor:pointer;display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:14px;transition:.3s}.promise-card:hover{background:rgba(255,255,255,.11)}.promise-card>span{color:var(--gold);font-family:Georgia,serif}.promise-card strong{font:500 clamp(22px,3vw,34px) Georgia,serif}.promise-card small{color:#ebcad3}.promise-card p{display:none;grid-column:2/4;margin:0;color:#f2dfe4}.promise-card.open p{display:block;animation:fadeUp .35s}.promise-card.open small{opacity:0}
.game-section{background:#f0dfca;color:var(--paper-ink);display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(35px,6vw,90px);align-items:center}.game-copy .eyebrow{color:var(--wine)}.game-copy h2{font-size:clamp(3.4rem,7vw,7rem)}.game-copy>p:not(.eyebrow){max-width:38em}.game-stats{display:flex;gap:12px;margin:30px 0}.game-stats div{min-width:90px;padding:12px;border:1px solid rgba(65,24,32,.15);border-radius:16px;text-align:center;background:rgba(255,255,255,.35)}.game-stats span{display:block;font:600 27px Georgia,serif;color:var(--wine);line-height:1}.game-stats small{font-size:11px;text-transform:uppercase;letter-spacing:.12em}.game-board{height:min(620px,70vh);min-height:420px;position:relative;overflow:hidden;border-radius:36px;background:radial-gradient(circle at 50% 110%,rgba(232,93,117,.38),transparent 50%),linear-gradient(145deg,#101733,#070b1c);box-shadow:var(--shadow);touch-action:manipulation}.game-board:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 20% 15%,rgba(255,255,255,.6) 0 1px,transparent 1.5px),radial-gradient(circle at 75% 30%,rgba(255,255,255,.4) 0 1px,transparent 1.5px);background-size:100px 100px,140px 140px;opacity:.35}.game-message{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:white;z-index:3;transition:.25s}.game-message.hidden{opacity:0;pointer-events:none}.game-message>span{font-size:76px;color:var(--rose);line-height:1;animation:pulse 1.4s infinite}.game-message strong{font:500 30px Georgia,serif}.game-message small{color:var(--muted)}@keyframes pulse{50%{transform:scale(1.12)}}.game-heart{position:absolute;z-index:2;border:0;background:none;padding:8px;cursor:pointer;font-size:clamp(34px,5vw,54px);line-height:1;animation:heartRise 4.2s linear forwards;filter:drop-shadow(0 5px 10px rgba(232,93,117,.35));user-select:none}.game-heart.golden{color:#f5c66d}.game-heart.caught{animation:pop .35s forwards;pointer-events:none}@keyframes heartRise{from{transform:translateY(50px) rotate(-8deg);opacity:0}10%{opacity:1}to{transform:translateY(-620px) rotate(12deg);opacity:0}}@keyframes pop{to{transform:scale(1.9);opacity:0}}
.finale{min-height:760px;display:grid;place-items:center;text-align:center;background:linear-gradient(rgba(7,11,28,.72),rgba(7,11,28,.9)),url('assets/love-letter.webp') center/cover}.finale-card{max-width:1000px}.finale h2{font-size:clamp(3rem,7vw,7.5rem);line-height:.96}.finale-card>p:not(.eyebrow){color:var(--muted);font-size:19px;margin:28px 0}.forever-message{max-height:0;opacity:0;overflow:hidden;font:italic 24px Georgia,serif;color:var(--gold);transition:.6s;margin-top:0}.forever-message.show{max-height:100px;opacity:1;margin-top:30px}footer{text-align:center;padding:55px 20px;background:#040610;border-top:1px solid var(--line)}footer .brand{justify-content:center;margin-bottom:15px}footer p{color:var(--muted);margin:4px}.copyright{font-size:12px}.toast{position:fixed;z-index:80;left:50%;bottom:25px;transform:translate(-50%,130%);padding:12px 20px;border-radius:99px;background:var(--ink);color:var(--paper-ink);font-weight:700;box-shadow:var(--shadow);transition:.35s}.toast.show{transform:translate(-50%,0)}.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s ease,transform .75s ease}.reveal.visible{opacity:1;transform:none}@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}}
@media(max-width:900px){.topbar nav{display:none}.hero,.promises-section,.game-section{grid-template-columns:1fr}.hero{padding-top:110px}.hero-visual{min-height:48vh}.scroll-cue{display:none}.reason-grid{grid-template-columns:repeat(2,1fr)}.promise-intro{position:static}.game-board{height:520px}.finale{min-height:650px}}
@media(max-width:560px){.section{padding-left:18px;padding-right:18px}.topbar{height:66px;padding:0 16px}.hero{padding-top:95px;align-content:center}.hero h2{font-size:clamp(3.7rem,20vw,6rem)}.hero-line{margin:24px 0}.hero-actions{align-items:stretch;flex-direction:column}.hero-actions>*{width:100%}.hero-visual{min-height:42vh;border-radius:24px}.floating-note{right:12px;bottom:12px}.letter-section{padding-left:12px;padding-right:12px}.love-letter{padding:38px 27px}.love-letter:before{inset:9px}.reason-grid{grid-template-columns:1fr}.reason-card{min-height:220px}.promise-card{grid-template-columns:35px 1fr}.promise-card small{display:none}.promise-card p{grid-column:2}.game-stats{gap:7px}.game-stats div{min-width:0;flex:1}.game-board{min-height:430px;height:58vh;border-radius:25px}.finale h2{font-size:clamp(3.1rem,15vw,5.2rem)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}