@import url('assets/fonts.css');
:root{--bg:#130b0e;--cream:#f4e5d5;--muted:#bda5a5;--wine:#791b35;--pink:#d88c9a;--gold:#c9a276;--line:#ffffff18}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--cream);font-family:'Noto Sans Arabic',Tahoma,sans-serif;font-size:14px}body:has(dialog[open]){overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;color:inherit}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:6px}::selection{background:#a33e58;color:white}img{display:block;max-width:100%}button{border:0}h1,h2,h3,p,figure{margin:0}h1,h2,h3,.script-name,.closing{font-family:'Amiri',Georgia,serif;font-weight:400}em{font-style:normal;color:var(--pink)}.nav{height:94px;margin:auto;max-width:1320px;padding:0 6%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:3}.monogram{font:46px 'Amiri',serif;position:relative;line-height:1}.monogram span{font-size:11px;color:var(--pink);position:absolute;top:0;left:-9px}.nav nav{display:flex;gap:38px;color:#d0bfc0;font-size:12px}.nav a:hover{color:var(--pink)}.sound{border:1px solid #a1766a50;background:transparent;border-radius:100px;padding:8px 17px;font-size:13px;display:flex;gap:8px;align-items:center}.sound[aria-pressed=true]{background:#75243b}.hero{max-width:1440px;min-height:740px;height:calc(100svh - 94px);max-height:1050px;margin:auto;position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:50px 9% 100px;isolation:isolate;overflow:hidden}.hero-glow{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 22% 48%,#701c354f,transparent 57%)}.hero-copy{z-index:2}.eyebrow{color:var(--gold);font-size:11px;letter-spacing:1.2px;margin-bottom:26px}.hero h1{font-size:clamp(52px,5.5vw,82px);line-height:1.35;letter-spacing:-1px}.dedication{color:var(--muted);line-height:2.1;margin:24px 0 30px;font-size:15px}.button{display:inline-flex;justify-content:center;align-items:center;gap:26px;background:#83243e;border:1px solid #ae5063;border-radius:3px;padding:14px 28px;color:#fff1e8;box-shadow:0 7px 45px #7c173925;transition:background .3s,transform .3s}.button:hover{background:#a33552;transform:translateY(-3px)}.button span{font-size:22px}.tiny-note{font-size:10px;color:#947e81;margin-top:18px}.hero-art{position:relative;width:360px;justify-self:center;transform:rotate(-5deg);animation:arrive 1.5s both}.hero-photo{background:#e9dac7;padding:12px 12px 0;box-shadow:0 20px 70px #0009;position:relative;z-index:1}.hero-photo img{width:100%;height:422px;object-fit:cover;object-position:center 45%;filter:saturate(.75)}.hero-photo figcaption{font-family:'Amiri',serif;color:#552235;display:flex;justify-content:space-between;align-items:center;padding:12px 9px;font-size:20px}.hero-photo figcaption span{font-size:26px}.photo-outline{position:absolute;inset:-20px 20px 15px -22px;border:1px solid #bd927c70;transform:rotate(10deg)}.script-name{position:absolute;left:-50px;top:-65px;font-size:125px;color:#efd4bb;z-index:2;transform:rotate(7deg);text-shadow:0 4px 30px #0009}.hero-rose{position:absolute;width:195px;bottom:-85px;right:-77px;z-index:3;transform:rotate(-25deg);filter:drop-shadow(0 12px 20px #0009)}.love-stamp{position:absolute;bottom:25px;left:-65px;width:103px;height:103px;border:1px solid #b4866870;outline:1px solid #b4866830;outline-offset:6px;border-radius:50%;background:#2a101b;z-index:3;text-align:center;display:flex;flex-direction:column;justify-content:center;font-size:9px;line-height:1.3;transform:rotate(17deg);color:var(--gold)}.love-stamp b{font-size:20px;margin:3px}.art-star{position:absolute;color:var(--gold);font-size:36px;animation:shimmer 4s infinite}.star-one{right:-50px;top:10px}.star-two{left:-52px;top:200px;font-size:22px}.orbit{position:absolute;border:1px solid #d39b7910;border-radius:50%;width:620px;height:620px;left:0;top:40px;z-index:-1}.orbit-two{width:740px;height:740px;left:-60px;top:-20px}.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:#b9a39d;font-size:10px;display:flex;align-items:center;gap:18px}.scroll-hint span{font-size:23px;animation:bob 2s infinite}.love-ribbon{border-block:1px solid #aa536329;background:#2b101a;display:flex;justify-content:space-around;gap:30px;white-space:nowrap;overflow:hidden;padding:19px 0;color:var(--gold);font-size:13px}.love-ribbon span{color:#d8b7b5;min-width:max-content;font-family:'Amiri',serif;font-size:22px}.section{padding:110px 8%;scroll-margin-top:10px}.section-heading{text-align:center;max-width:720px;margin:auto auto 56px}h2{font-size:clamp(38px,4vw,58px);line-height:1.45}.section-heading>p:last-child,.letter-intro>p:last-of-type{color:var(--muted);line-height:2;margin-top:19px}.gallery{max-width:1120px;margin:auto;display:grid;grid-template-columns:repeat(6,1fr);gap:26px;align-items:start}.memory{padding:9px 9px 0;background:#21151a;border:1px solid #a37e6f30;grid-column:span 2;transition:transform .4s,background .4s;text-align:right}.memory:nth-child(2){margin-top:45px}.memory:nth-child(4){grid-column:2 / span 2}.memory:nth-child(5){margin-top:40px}.memory:hover{transform:translateY(-9px) rotate(2deg);background:#39202a}.memory img{width:100%;height:340px;object-fit:cover;filter:saturate(.72);transition:filter .4s}.memory:hover img{filter:saturate(1)}.memory span{display:flex;justify-content:space-between;align-items:center;padding:17px 8px;font:19px 'Amiri',serif}.memory i{font:10px Georgia,serif;color:#bc9b89;direction:ltr}.gallery-note{text-align:center;color:#917b80;font-size:10px;margin-top:35px}.letter-section{background:radial-gradient(ellipse at 80% 50%,#4a132950,transparent 65%),#190d13;display:grid;grid-template-columns:1fr 1.25fr;gap:10%;align-items:center;min-height:780px;border-block:1px solid var(--line)}.letter-intro{max-width:400px;justify-self:end}.letter-rose{width:170px;transform:rotate(25deg);margin:25px 30px -20px}.letter-wrap{width:100%;max-width:590px;perspective:1000px}.envelope{width:100%;min-height:340px;background:linear-gradient(155deg,#652039,#330e1d);border:1px solid #b7747760;position:relative;box-shadow:0 30px 70px #0005;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:25px;overflow:hidden;transition:transform .5s}.envelope:hover{transform:translateY(-8px)}.envelope-lines{position:absolute;top:-205px;width:420px;height:420px;transform:rotate(45deg);border:1px solid #c0957755;pointer-events:none}.envelope-to{font:30px 'Amiri',serif;z-index:1}.wax-seal{background:radial-gradient(circle at 35% 30%,#b55b61,#6b162d);border:3px double #c58376;outline:3px solid #79243b;border-radius:50%;width:64px;height:64px;display:grid;place-items:center;color:#e9b59c;box-shadow:2px 8px 15px #0004;font-size:25px;z-index:1}.envelope-hint{font-size:11px;color:#cca6a7;z-index:1}.letter-paper{color:#482c30;background:#f0e3d2;padding:36px 36px 24px;box-shadow:0 22px 60px #0004;animation:arrive .8s both;position:relative;border-top:4px solid #bd9273}.letter-label{color:#957162;font-size:10px}.letter-paper h3{font-size:31px;margin:15px 0}.letter-paper p.letter-paragraph{font-family:'Amiri',serif;font-size:21px;line-height:1.95;margin-bottom:18px}.letter-controls{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #693b3225;padding-top:18px;margin-top:22px;font-size:11px}.letter-controls button{background:transparent;border:1px solid #b79781;width:40px;height:36px;color:#63243b}.letter-controls button:disabled{opacity:.25;cursor:default}.text-button{display:block;margin:18px auto 0;background:none;color:#7b2841;font-size:11px;text-decoration:underline;text-underline-offset:5px}.signature{text-align:left;font:22px 'Amiri',serif;margin-top:25px;color:#8c3c4d}.surprise{background:radial-gradient(ellipse at 50% 60%,#54201833,transparent 60%)}.chocolate-box{max-width:650px;margin:auto;border:1px solid #ac8060;padding:28px;background:linear-gradient(130deg,#3b1d20,#200f15);box-shadow:0 0 0 8px #1a0e13,0 0 0 9px #8c67464f,0 30px 70px #0005;transform:rotate(-2deg)}.box-inscription{text-align:center;color:var(--gold);font:23px 'Amiri',serif;margin:0 0 24px}.box-inscription span{padding-right:20px}.chocolates{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;direction:rtl}.chocolate{height:112px;position:relative;border:9px solid #1d1012;background:repeating-linear-gradient(45deg,#3a211d 0px,#3a211d 3px,#2e1918 3px,#2e1918 6px);box-shadow:inset 0 0 15px #000;border-radius:7px;display:grid;place-items:center}.chocolate-piece{display:grid;place-items:center;width:74px;height:73px;border-radius:12px;background:linear-gradient(145deg,#80503a,#47271f 40%,#2e1717);box-shadow:inset 3px 3px 5px #b9815650,inset -3px -3px 6px #110806,3px 8px 9px #0008;border:1px solid #89573d50;color:#cfa67a;font:27px Georgia;transition:transform .4s}.chocolate:nth-child(2n) .chocolate-piece{border-radius:50%;background:linear-gradient(145deg,#ab7955,#6c412a 40%,#40221c)}.chocolate:nth-child(3n) .chocolate-piece{border-radius:35% 35% 14% 14%}.chocolate:hover .chocolate-piece{transform:translateY(-7px) rotate(7deg)}.chocolate.tasted .chocolate-piece{transform:rotate(-8deg) scale(.88);color:#f8ce9a;box-shadow:0 0 22px #ad785440}.chocolate-message{min-height:65px;padding-top:24px;text-align:center;font:22px 'Amiri',serif;color:#ead1bb;transform:rotate(2deg)}.wish{position:relative;overflow:hidden;text-align:center;border-top:1px solid var(--line);padding-bottom:45px}.wish-halo{position:absolute;pointer-events:none;width:700px;height:700px;top:70px;left:50%;transform:translateX(-50%);background:radial-gradient(#72233b40,transparent 68%);z-index:-1}.candle-scene{height:170px;width:150px;margin:30px auto 20px;position:relative}.candle{width:49px;height:100px;position:absolute;left:50px;bottom:12px;border-radius:8px 8px 3px 3px;background:repeating-linear-gradient(135deg,#9c3b50 0px,#9c3b50 12px,#bc6171 13px,#bc6171 17px);box-shadow:inset -12px 0 12px #4a102d66,0 0 70px #d36d4d15}.candle-base{position:absolute;bottom:7px;left:20px;width:112px;height:12px;border:1px solid #9c7862;border-radius:50%;background:#59382d}.wick{position:absolute;width:2px;height:12px;background:#302019;left:74px;bottom:110px}.flame{position:absolute;width:17px;height:33px;left:66px;bottom:120px;border-radius:70% 30% 55% 45%;background:radial-gradient(ellipse at bottom,#fff5c6,#f4b56c 60%,#f0813d);box-shadow:0 0 25px #ffb35c99,0 0 70px #e7824855;animation:flicker 1.3s infinite alternate;transform-origin:bottom}.wish.blown .flame{opacity:0;transition:opacity .6s}.wish>p:not(.eyebrow){margin-top:22px;color:var(--muted);font-size:12px}.wish .closing{font-size:34px!important;color:var(--cream)!important}.closing-heart{margin-top:75px;font-size:25px;color:#b65671;animation:heartbeat 3s infinite}.wish .footer-note{font-size:10px!important}.back-top{display:inline-block;font-size:10px;color:#997c80;margin-top:32px}.reading-progress{height:2px;position:fixed;top:0;right:0;background:var(--pink);width:0;z-index:10}#petals{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}.petal{position:absolute;top:-50px;background:linear-gradient(130deg,#c0576e,#6d102a);width:12px;height:19px;border-radius:80% 5% 70% 20%;opacity:0;animation:fall linear forwards}.reveal{opacity:0;transform:translateY(25px);transition:opacity .9s,transform .9s}.reveal.visible{opacity:1;transform:none}dialog{border:1px solid #ad7b6655;background:#1b1016;color:var(--cream);padding:40px 65px 22px;max-width:94vw;max-height:94svh;overflow:visible}dialog::backdrop{background:#080407ed;backdrop-filter:blur(10px)}dialog figure img{max-height:76svh;max-width:72vw;width:auto;object-fit:contain}dialog figcaption{text-align:center;font-family:'Amiri',serif;padding-top:10px;font-size:22px}dialog button{position:absolute;background:#361b27bb;width:38px;height:38px;border-radius:50%;font-size:22px}.close-modal{top:6px;left:8px}.photo-prev{right:10px;top:50%}.photo-next{left:10px;top:50%}@keyframes fall{0%{opacity:0;transform:translate3d(0,-20px,0) rotate(0)}10%{opacity:.65}90%{opacity:.5}100%{opacity:0;transform:translate3d(100px,105vh,0) rotate(420deg)}}@keyframes shimmer{50%{opacity:.3;transform:scale(.8)}}@keyframes bob{50%{transform:translateY(5px)}}@keyframes arrive{from{opacity:0;translate:0 25px}to{opacity:1;translate:0 0}}@keyframes flicker{to{transform:rotate(7deg) scale(.92,1.08)}}@keyframes heartbeat{50%{transform:scale(1.15)}}
@media(min-width:1500px){.section{padding-inline:max(8%,calc((100vw - 1180px)/2))}}@media(max-width:1000px){.hero{padding-inline:6%;gap:35px}.hero-art{width:290px}.hero-photo img{height:350px}.script-name{font-size:100px;left:-25px}.hero-rose{width:165px;right:-45px}.love-stamp{left:-30px;width:85px;height:85px}.hero h1{font-size:55px}.memory img{height:280px}.gallery{gap:18px}.memory span{font-size:16px}.letter-section{gap:5%}.letter-paper{padding:27px}}
@media(max-width:680px){.nav{height:76px;padding:0 6%}.nav nav{gap:17px;font-size:10px}.sound{padding:7px 11px}.sound span{display:none}.monogram{font-size:38px}.hero{height:auto;min-height:0;max-height:none;grid-template-columns:1fr;padding:55px 7% 85px;gap:66px;text-align:center}.hero h1{font-size:55px}.eyebrow{font-size:10px;margin-bottom:20px}.dedication{font-size:13px;margin:20px 0 24px}.button{font-size:12px;padding:12px 23px}.hero-art{width:265px;margin:8px 0 25px}.hero-photo img{height:320px}.hero-photo figcaption{font-size:18px;padding:9px}.script-name{font-size:88px;top:-51px;left:-20px}.hero-rose{width:150px;bottom:-66px;right:-40px}.love-stamp{left:-28px;bottom:20px;width:76px;height:76px;font-size:8px}.star-one{right:-27px}.star-two{left:-27px}.orbit{top:auto;bottom:35px;left:50%;transform:translateX(-50%);width:400px;height:400px}.orbit-two{width:500px;height:500px;bottom:-15px}.love-ribbon{gap:30px;justify-content:flex-start;padding:13px 20px}.love-ribbon span{font-size:20px}.section{padding:75px 6%}.section-heading{margin-bottom:35px}h2{font-size:38px}.section-heading>p:last-child{font-size:12px}.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.memory,.memory:nth-child(4){grid-column:span 1}.memory:nth-child(2){margin-top:28px}.memory:nth-child(3){grid-column:span 2;width:80%;justify-self:center;margin:10px 0}.memory:nth-child(3) img{height:auto;aspect-ratio:16/10;object-fit:cover}.memory:nth-child(5){margin-top:28px}.memory img{height:230px}.memory{padding:6px 6px 0}.memory span{font-size:15px;padding:12px 3px;gap:4px}.memory i{font-size:8px}.letter-section{grid-template-columns:1fr;gap:34px}.letter-intro{text-align:center;justify-self:center}.letter-rose{display:none}.letter-wrap{margin:auto}.envelope{min-height:300px}.letter-paper{padding:25px}.letter-paper p.letter-paragraph{font-size:20px;line-height:1.95}.chocolate-box{padding:20px 15px;transform:rotate(-1deg);margin:0 5px}.chocolates{gap:10px}.chocolate{height:95px;border-width:6px}.chocolate-piece{width:59px;height:60px}.chocolate-message{font-size:19px;min-height:78px}.wish h2{font-size:36px}.wish .closing{font-size:29px!important}.closing-heart{margin-top:55px}dialog{padding:46px 37px 15px}dialog figure img{max-width:72vw;max-height:73svh}dialog button{width:30px;height:30px}.photo-next{left:3px}.photo-prev{right:3px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}.petal{display:none}}