:root{--ink:#23191b;--cream:#fbf4e8;--blush:#ead0cb;--gold:#d6a456;--night:#100c1b}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--night);color:#fff;font-family:"Noto Kufi Arabic",sans-serif;overflow-x:hidden}button,a{font:inherit}.progress{position:fixed;top:0;right:0;left:0;height:2px;z-index:50;background:#ffffff18}.progress span{display:block;width:0;height:100%;background:var(--gold)}section{position:relative;min-height:100svh;overflow:hidden}.opening{display:grid;place-items:center;text-align:center;background:radial-gradient(circle at 50% 38%,#41304d 0,#171124 42%,#090812 80%)}.opening-inner{z-index:2;padding:30px}.eyebrow{font-size:11px;letter-spacing:2px;color:#dcbf91}.opening h1{font:400 clamp(52px,15vw,108px)/1.1 "Aref Ruqaa",serif;margin:16px}.opening h1 em,.birthday em{font-style:normal;color:#f2c47e}.opening-inner>p:not(.eyebrow){font-size:14px;color:#eee3dd}.primary,.letter button,#wish{border:1px solid #e7c99b70;background:#ffffff0d;color:#fff;border-radius:99px;padding:14px 24px;margin-top:25px;cursor:pointer;transition:.3s}.primary:active,.letter button:active,#wish:active{transform:scale(.95)}.stars{position:absolute;inset:0;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:51px 51px;opacity:.22}.lanterns:before,.lanterns:after{content:"";position:absolute;width:8px;height:13px;border-radius:4px;background:#ffd17e;box-shadow:0 0 22px 8px #ed9f5166;animation:float 8s infinite linear}.lanterns:before{left:18%;bottom:-20px}.lanterns:after{right:20%;bottom:-30px;animation-delay:3s}.light{background:var(--cream);color:var(--ink)}.chapter{padding:90px 22px;display:grid;align-items:center;gap:40px}.copy{max-width:520px;margin:auto;text-align:center}.copy span{color:#a3765e;font-size:11px;letter-spacing:2px}.copy h2{font:700 clamp(40px,11vw,72px)/1.25 "Aref Ruqaa",serif;margin:12px 0}.copy p{font-size:16px;line-height:2;color:inherit;opacity:.8}.portrait{width:min(82vw,410px);margin:auto;background:#fff;padding:10px 10px 34px;box-shadow:0 25px 70px #3d242333;transform:rotate(-2deg)}.portrait img{width:100%;height:52vh;object-fit:cover;display:block}.portrait figcaption{text-align:center;color:#806357;font:18px "Aref Ruqaa";padding-top:9px}.secret{position:absolute;border:0;background:transparent;color:var(--gold);font-size:24px;right:8%;top:38%;cursor:pointer}.memory-strip{background:#e9d1c6;color:var(--ink);padding:100px 0;text-align:center}.strip{display:flex;gap:15px;overflow-x:auto;scroll-snap-type:x mandatory;padding:28px 9vw 38px;direction:ltr}.strip button{flex:0 0 72vw;max-width:350px;border:0;padding:8px 8px 27px;background:#fff;box-shadow:0 18px 50px #68443b2a;transform:rotate(-1.5deg);scroll-snap-align:center}.strip button:nth-child(2){transform:rotate(2deg)}.strip img{width:100%;height:56vh;object-fit:cover}.memory-strip small{opacity:.55}.night{background:linear-gradient(#101326,#182039);color:#fff}.distance{padding:90px 20px}.split{display:flex;align-items:center;justify-content:center;direction:ltr;gap:0;margin-bottom:60px}.split img{width:34vw;max-width:180px;height:40vh;object-fit:cover;border-radius:99px}.split span{width:20vw;height:1px;background:linear-gradient(90deg,#fff5,transparent,#fff5);transition:width 1.5s}.distance.visible .split span{width:5vw}.second{top:12%;left:8%;right:auto}.hold-scene{display:grid;place-items:center;text-align:center}.hold-bg{position:absolute;width:100%;height:100%;object-fit:cover}.shade{position:absolute;inset:0;background:#0a0912bb;transition:opacity 1s}.hold-scene.complete .shade{opacity:.25}.hold-copy{z-index:2;padding:22px}.hold-copy h2{font:44px "Aref Ruqaa"}.hold-copy>p:first-child{opacity:.75}.hold-copy button{position:relative;width:108px;height:108px;background:#ffffff12;border:0;border-radius:50%;color:#fff}.hold-copy svg{position:absolute;inset:0;transform:rotate(-90deg)}.hold-copy circle{fill:none;stroke-width:3}.track{stroke:#ffffff30}.fill{stroke:#f2c47e;stroke-dasharray:283;stroke-dashoffset:283}.hold-copy button span{font-size:32px}.hold-message{opacity:0;transform:translateY(12px);transition:.7s}.complete .hold-message{opacity:1;transform:none}.loves{padding:100px 22px;text-align:center}.love-lines p{font:clamp(30px,9vw,58px)/1.5 "Aref Ruqaa";margin:32px 0;opacity:.18;transition:.8s}.love-lines p.on{opacity:1}.loves img{width:min(76vw,360px);height:48vh;object-fit:cover;border-radius:180px 180px 18px 18px}.letter{background:#cfae91;padding:65px 20px;display:grid;place-items:center}.letter article{background:#fff9eb;color:#382622;width:min(100%,650px);padding:50px 28px;box-shadow:0 30px 80px #3c241d33;transform:rotate(.5deg);font-size:15px;line-height:2.2}.letter article>span{font:28px "Aref Ruqaa"}.letter strong{font:32px "Aref Ruqaa";display:block}.letter button{color:#543d35;border-color:#8e6f5955}.birthday{background:#0f0c14;display:grid;place-items:center}.birthday>img{position:absolute;width:100%;height:100%;object-fit:cover;opacity:.35}.birthday:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent,#0c0911dd)}.birthday-copy{z-index:2;text-align:center;padding:25px;align-self:end;margin-bottom:8vh}.birthday h2{font:clamp(44px,12vw,84px)/1.25 "Aref Ruqaa";margin:10px}.wish-message{max-height:0;opacity:0;overflow:hidden;transition:1s}.wish-message.show{max-height:160px;opacity:1;margin-top:25px}.wish-message span,.wish-message strong{display:block}.wish-message strong{font:50px "Aref Ruqaa";color:#f2c47e}.finale{display:grid;place-items:center;background:#0b0910;text-align:center}.finale img{position:absolute;width:100%;height:100%;object-fit:cover;opacity:.3}.finale:after{content:"";position:absolute;inset:0;background:linear-gradient(#0b091055,#0b0910e8)}.finale div{z-index:2}.finale h2{font:64px "Aref Ruqaa";margin:0}.finale a{display:block;color:#f1d5aa;margin:30px 0;text-underline-offset:6px}.finale small{display:block;opacity:.45;font-family:serif;direction:ltr}dialog{width:min(92vw,520px);padding:0;border:0;background:#fffaf2;color:#3c2924;border-radius:22px;box-shadow:0 30px 90px #0008}dialog::backdrop{background:#090710cc;backdrop-filter:blur(6px)}dialog img{width:100%;max-height:65vh;object-fit:cover}dialog p{padding:10px 25px 25px;text-align:center;line-height:1.8}.close{position:absolute;left:12px;top:12px;border:0;background:#111b;color:#fff;border-radius:50%;width:38px;height:38px;font-size:24px}.toast{position:fixed;right:50%;bottom:calc(25px + env(safe-area-inset-bottom));transform:translate(50%,25px);z-index:80;background:#fff7eb;color:#3f2a24;padding:13px 20px;border-radius:99px;opacity:0;transition:.35s;white-space:nowrap;max-width:90vw}.toast.show{opacity:1;transform:translate(50%,0)}.cinematic-message{position:fixed;inset:0;background:#0b0910;z-index:90;display:grid;place-items:center;opacity:0;pointer-events:none;transition:1s}.cinematic-message.show{opacity:1;pointer-events:auto}.cinematic-message p{font:clamp(36px,10vw,70px) "Aref Ruqaa";text-align:center;color:#f4d7aa}.reveal{opacity:0;transform:translateY(35px);transition:opacity 1s,transform 1s}.reveal.visible{opacity:1;transform:none}@keyframes float{to{transform:translateY(-110vh);opacity:0}}@media(min-width:760px){.chapter{grid-template-columns:1fr 1fr;padding:100px 8vw}.memory-strip{padding-inline:6vw}.strip{justify-content:center;overflow:visible;padding-inline:0}.strip button{flex-basis:28vw}.distance{display:block}.letter article{padding:70px}.loves{display:grid;grid-template-columns:1fr 1fr}.loves>.eyebrow{grid-column:1/-1}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}