:root { --progress: 0; }
* { box-sizing: border-box; }
html { background:#0d152a; scroll-behavior:smooth; }
body { margin:0; color:#fff9ed; font-family:"Cormorant Garamond",Georgia,serif; overflow-x:hidden; }
.sky { position:fixed; z-index:-1; inset:0; overflow:hidden; background:linear-gradient(to bottom,#0d142b,#243559 44%,#d28472 74%,#f8c77c); }
.sky::before { content:""; position:absolute; inset:0; background:linear-gradient(to bottom,#080c1d,#121c3a 46%,#62536f 75%,rgba(255,181,113,.1)); opacity:calc(1 - var(--progress) * .91); }
.stars { position:absolute; inset:0 0 35%; opacity:calc(1 - var(--progress) * 1.3); background-image:radial-gradient(#fff 1px,transparent 1.3px),radial-gradient(#fff 1px,transparent 1.3px); background-size:96px 112px,171px 143px; background-position:17px 19px,63px 52px; }
.aurora { position:absolute; inset:0; opacity:calc(var(--progress) * .62); background:radial-gradient(ellipse 65% 35% at 50% 72%,rgba(255,210,144,.55),transparent 67%),linear-gradient(165deg,transparent 40%,rgba(120,174,225,.24) 67%,transparent 82%); }
.horizon { position:absolute; height:17%; left:0; right:0; bottom:14%; background:linear-gradient(110deg,#242540,#343047 62%,#45344b); opacity:.88; clip-path:polygon(0 50%,18% 43%,36% 48%,59% 40%,78% 46%,100% 40%,100% 100%,0 100%); }
.foreground { position:absolute; height:15%; left:-8%; right:-8%; bottom:-5%; border-radius:50% 50% 0 0 / 45% 45% 0 0; background:#1c2132; opacity:.91; }
.sun-glow { position:absolute; width:min(76vw,880px); aspect-ratio:1; left:calc(50% - min(38vw,440px)); bottom:calc(7% + var(--progress) * 20%); transform:translateY(calc((1 - var(--progress)) * 11vw)); background:radial-gradient(circle,rgba(255,240,184,.59),rgba(255,193,115,.15) 39%,transparent 67%); filter:blur(9px); }
.sun { position:absolute; width:clamp(106px,16vw,205px); aspect-ratio:1; left:calc(50% - clamp(53px,8vw,102px)); bottom:calc(15% + var(--progress) * 20%); transform:translateY(calc((1 - var(--progress)) * 21vw)); border-radius:50%; background:#fff1bd; box-shadow:0 0 46px 15px rgba(255,207,107,.46),0 0 130px 35px rgba(255,166,99,.19); }
.cloud { position:absolute; height:5vw; width:34vw; min-height:38px; border-radius:50%; background:rgba(255,217,193,.19); filter:blur(18px); opacity:calc(var(--progress) * .5); }.cloud-one { top:33%; left:calc(-15vw + var(--progress) * 8vw); }.cloud-two { top:55%; right:calc(-15vw + var(--progress) * 7vw); }
.cover { height:100vh; min-height:620px; display:grid; place-items:center; text-align:center; transition:opacity 1.3s ease,visibility 1.3s ease; }.cover.is-gone { opacity:0; visibility:hidden; pointer-events:none; }.cover-inner { margin-top:-4vh; padding:24px; animation:arrive 2.5s ease both; }.eyebrow { font-family:"DM Sans",sans-serif; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:#e3d7ca; margin:0 0 19px; }h1 { font-size:clamp(69px,12vw,148px); line-height:.65; font-weight:400; letter-spacing:-.055em; margin:0; text-shadow:0 3px 22px rgba(0,0,0,.22); }h1 em { font-family:"Great Vibes",cursive; font-size:1.26em; font-weight:400; color:#ffd995; letter-spacing:.01em; }.subtitle { font-family:"Cormorant Garamond",Georgia,serif; font-style:italic; font-size:clamp(23px,3vw,34px); margin:39px auto 28px; color:#eee1d2; }
button { border:1px solid rgba(255,238,202,.38); border-radius:99px; padding:13px 22px; background:rgba(255,255,255,.05); color:#fff8ec; font:500 12px "DM Sans",sans-serif; letter-spacing:.05em; cursor:pointer; transition:background .3s,transform .3s; }button:hover { background:rgba(255,255,255,.14); transform:translateY(-2px); }button span { color:#ffd277; padding-left:4px; }.audio-note { font-family:"DM Sans",sans-serif; margin:13px 0 0; font-size:11px; color:rgba(255,238,205,.68); }
.journey { padding:13vh 24px 32vh; }.letter,.climax,.ending { max-width:625px; margin:0 auto; }.music-note { width:min(100%,390px); margin:0 0 8vh; padding:12px 15px; display:flex; align-items:center; gap:12px; border:1px solid rgba(89,61,45,.2); border-radius:3px; background:rgba(255,247,226,.86); color:#342319; box-shadow:0 8px 24px rgba(25,20,29,.08); transform:rotate(-.45deg); }.music-mark { font-family:"Cormorant Garamond",serif; color:#9e5938; font-size:24px; line-height:1; }.track { display:grid; gap:2px; flex:1; color:inherit; text-decoration:none; }.track:hover strong { color:#8f5033; }.track small { font:500 8px "DM Sans",sans-serif; color:#977b68; letter-spacing:.16em; text-transform:uppercase; }.track strong { font:500 17px "Cormorant Garamond",serif; letter-spacing:.01em; }.track i { font-style:normal; color:#ad846d; }.music-toggle { width:28px; height:28px; min-width:28px; display:grid; place-items:center; padding:0 0 0 1px; border-color:rgba(81,49,34,.35); color:#4a2e21; background:transparent; font-size:10px; }.spotify-player { display:none; width:min(100%,390px); margin:-6vh 0 8vh; }.spotify-player.is-open { display:block; }.spotify-player iframe { display:block; border:0; border-radius:12px; }.music-toggle:hover { background:rgba(120,72,49,.1); transform:none; }
.letter p,.climax,.ending { font-family:"Cormorant Garamond",Georgia,serif; font-weight:500; letter-spacing:.005em; text-shadow:0 1px 9px rgba(20,25,38,.15); }.letter p { font-size:clamp(25px,3.35vw,36px); line-height:1.2; margin:0 auto 1.42em; max-width:605px; opacity:.08; transform:translateY(9px); transition:opacity .6s ease,transform .6s ease; }.letter p.visible,.reveal.visible { opacity:1; transform:none; }
.climax { min-height:60vh; padding:11vh 0 8vh; text-align:center; font-size:clamp(29px,3.85vw,45px); line-height:1.05; opacity:.08; transform:translateY(12px); transition:opacity .7s ease,transform .7s ease; }.climax p { margin:0 0 11px; }.pause { display:block; padding:27px 0; color:#fff2b7; font-size:17px; }.climax .last-line { font-size:.92em; }
.ending { min-height:90vh; padding-top:13vh; text-align:center; opacity:.08; transform:translateY(12px); transition:opacity .8s ease,transform .8s ease; font-size:clamp(28px,3.65vw,43px); line-height:1.05; }.ending p { margin:0 auto 40px; }.find-you { font-size:1.12em; }.ending h2 { font-family:"Great Vibes",cursive; font-size:clamp(82px,12vw,150px); font-weight:400; color:#9b4b29; margin:-16px 0 40px; }.lifetimes { font-size:.88em; line-height:1.15; }.lifetimes span { display:inline-block; margin-top:10px; }.signature { font-family:"Great Vibes",cursive; color:#74311f; font-size:clamp(73px,10vw,116px); margin-top:15vh !important; transform:rotate(-8deg); }.share-letter { margin-top:9vh; }.share-letter button { border-color:rgba(116,49,31,.32); color:#74311f; background:rgba(255,248,224,.25); }.share-letter p { font:11px "DM Sans",sans-serif; color:rgba(96,55,35,.78); margin:11px 0 0; }
@keyframes arrive { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }@media (max-width:600px) { .journey { padding-inline:26px; }.cloud { width:56vw; }.cover { min-height:590px; }.letter p { font-size:30px; } }@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; scroll-behavior:auto !important; } }