/* Light follows the emotional arc, from rain-blue to sunset gold. */
main{--story-warmth:0;isolation:isolate}
.ambient-wash{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(145deg,rgba(221,164,75,calc(var(--story-warmth)*.25)),transparent 65%),rgba(31,56,89,calc((1 - var(--story-warmth))*.17));opacity:0;transition:background 2.5s ease,opacity 1.5s}
.story-started .ambient-wash{opacity:1}
.cover{z-index:6;isolation:isolate;transform-origin:left center}
.cover:before{content:'';position:absolute;inset:0 -22px;z-index:-1;background:#f0e4d4 url('floral-frame.png') center/cover no-repeat;box-shadow:8px 0 28px #39200e30;backface-visibility:hidden}
.opening-light{position:absolute;inset:0;z-index:7;overflow:hidden;pointer-events:none;opacity:0}
.opening-light:after{content:'';position:absolute;inset:-30% -70%;background:linear-gradient(105deg,transparent 42%,#ffd88315 46%,#ffeac891 49%,#fff9e7c9 50%,#f9cb7533 54%,transparent 59%);transform:translateX(-75%)}
.gift-opening .opening-light{opacity:1}
.gift-opening .opening-light:after{animation:opening-light-pass 1.2s cubic-bezier(.2,.55,.3,1) both}
.gift-opening .heart-handle{box-shadow:0 0 28px #f3c87677;background:#e1b86a22;transition:box-shadow .4s}
.book-cover-opening{animation:cover-unfold 1.1s cubic-bezier(.35,.05,.2,1) forwards}
.gift-opening #story{animation:book-emerge 1.4s ease both}
header{z-index:9}
.page-illustration{isolation:isolate}
.page-illustration:after{z-index:8}
.scene-camera{position:absolute;inset:0;z-index:0;transform-origin:50% 48%;animation:scene-camera 18s ease-in-out infinite alternate}
.page-art{position:relative;z-index:0;animation:none!important;transform:none!important}
.sun-emitter{position:absolute;width:0;height:0;pointer-events:none;z-index:1;opacity:var(--sun-strength,1)}
.sun-halo{position:absolute;width:150px;height:150px;left:-75px;top:-75px;border-radius:50%;background:radial-gradient(circle,#fff9da99 0%,#fff3b754 9%,#ffd17d35 24%,#ffc27415 45%,transparent 70%);animation:sun-heartbeat 6s ease-in-out infinite alternate}
.sun-rays{position:absolute;width:var(--ray-size);height:var(--ray-size);left:calc(var(--ray-size)*-.5);top:calc(var(--ray-size)*-.5);background:conic-gradient(from 8deg,transparent 0deg,#ffe6ac44 5deg,transparent 13deg,transparent 45deg,#fff3cd44 52deg,transparent 62deg,transparent 107deg,#ffe3a657 118deg,transparent 128deg,transparent 155deg,#ffe9b955 163deg,transparent 177deg,transparent 210deg,#ffe6ad40 222deg,transparent 234deg,transparent 277deg,#fff1ca4d 286deg,transparent 300deg,transparent 337deg,#ffe6b533 344deg,transparent 352deg);mask-image:radial-gradient(circle,#000 0%,#000b 20%,transparent 64%);-webkit-mask-image:radial-gradient(circle,#000 0%,#000b 20%,transparent 64%);animation:sun-rays-drift 13s ease-in-out infinite alternate;transform-origin:center}
.has-sun .scene-light{display:none}
.sun-halo{width:190px;height:190px;left:-95px;top:-95px;background:radial-gradient(circle,#fffdf1e6 0%,#fff5cba6 6%,#ffe29670 16%,#ffc47438 34%,transparent 68%)}
.sun-streak{position:absolute;left:-110px;top:-5px;width:220px;height:10px;border-radius:50%;background:radial-gradient(ellipse,#fffdf2cc 0%,#ffecc780 15%,#ffd3872e 40%,transparent 72%);animation:sun-heartbeat 5s ease-in-out infinite alternate}
.sun-flare-ghost{position:absolute;border-radius:50%;background:radial-gradient(circle,transparent 44%,#f8deb82e 52%,#ffe5b770 58%,#ffd79d1a 66%,transparent 72%);animation:flare-breathe 5.5s ease-in-out infinite alternate;pointer-events:none}
.scene-light,.scene-shade,.scene-rain,.scene-dust,.scene-petals{position:absolute;inset:0;pointer-events:none}
.scene-light{z-index:2;mix-blend-mode:screen;opacity:.33;background:radial-gradient(ellipse at 90% 0,#fff0b9bb,transparent 55%),conic-gradient(from 186deg at 100% -10%,transparent 0deg,#fbd68c77 9deg,transparent 20deg,#ffd68a44 30deg,transparent 48deg);animation:sunlight-breathe 9s ease-in-out infinite alternate}
.scene-shade{z-index:3;background:linear-gradient(180deg,#15233f00 40%,#15233f18);pointer-events:none}
[data-mood="rain"] .page-art{filter:saturate(.65) brightness(.85)}
[data-mood="rain"] .scene-light{mix-blend-mode:soft-light;background:linear-gradient(125deg,#7c9fc580,transparent 70%);opacity:.5;animation:rain-light 10s ease-in-out infinite alternate}
[data-mood="sunrise"] .scene-light{animation:sunrise-arrive 7s ease-out both,sunlight-breathe 11s 7s ease-in-out infinite alternate}
[data-mood="flowers"] .scene-light{opacity:.32;transform-origin:top right}
[data-mood="close"] .scene-light{background:radial-gradient(ellipse at 55% 65%,#ffcba67a,transparent 62%);animation:close-glow 5s ease-in-out infinite alternate}
[data-mood="horizon"] .scene-light{background:linear-gradient(165deg,transparent 25%,#ffe6b155 42%,transparent 64%);animation:horizon-light 15s ease-in-out infinite alternate}
[data-mood="lamplight"] .scene-light{background:radial-gradient(ellipse at 15% 60%,#ffa94566,transparent 65%);animation:lamplight-breathe 4s ease-in-out infinite alternate}
[data-mood="promise"] .scene-light{background:radial-gradient(ellipse at 50% 65%,#ffd39970,transparent 70%);animation:close-glow 6s ease-in-out infinite alternate}
[data-mood="blossom"] .scene-light{opacity:.4;background:radial-gradient(ellipse at 85% 20%,#ffda8999,transparent 58%)}
.scene-rain{z-index:4;overflow:hidden}
.scene-rain i{position:absolute;left:var(--x);top:-50px;width:1px;height:var(--length);background:linear-gradient(transparent,#d7e5f8a6);animation:rainfall var(--speed) var(--delay) linear infinite}
.rain-1{opacity:.45;transform:scale(.8);transform-origin:center}
.rain-1 i{width:.7px;animation-duration:calc(var(--speed)*1.7)}
.scene-dust{z-index:4}
.scene-dust i{position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%;background:#fff2c4;box-shadow:0 0 6px #ffdeb291;animation:dust-drift var(--speed) var(--delay) ease-in-out infinite}
.scene-foreground{position:absolute;left:0;bottom:-20%;width:100%;height:auto;z-index:5;pointer-events:none;transform-origin:bottom center;animation:foreground-drift 12s ease-in-out infinite alternate}
.scene-petals{z-index:6;overflow:hidden}
.scene-petals img{position:absolute;left:var(--x);top:-60px;width:var(--size);height:var(--size);object-fit:contain;animation:petal-fall var(--speed) var(--delay) linear infinite;opacity:.85}
.story-page .page-illustration *{animation-play-state:paused}
.story-page.is-current .page-illustration *{animation-play-state:running}
.book.is-turning .page-illustration *,.page-asleep *{animation-play-state:paused!important}

/* The finale opens into a full-page photograph, without resizing the paper. */
.final-page .paper{display:flex;justify-content:flex-end;padding:22px;isolation:isolate}
.final-page .page-illustration{position:absolute;inset:0;width:100%;height:100%!important;border:0;z-index:-2;clip-path:inset(18px 18px 45%);transform:scale(.98);transform-origin:center top}
.final-page.is-current .page-illustration{animation:final-scene-open 2.3s cubic-bezier(.2,.65,.3,1) both}
.final-page .page-illustration:after{inset:10px;border-color:#ffe5ab57}
.final-page .page-art{object-position:36% center}
.final-page .scene-camera{transform-origin:40% 45%}
.final-page .paper:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 26%,#281e1622 43%,#251813d9 70%,#201610f5 100%);opacity:0}
.final-page.is-current .paper:before{animation:final-shade 1.8s .5s ease both}
.final-page .page-copy{flex:none;padding:0 0 0;color:#fff1da;font-size:clamp(29px,4dvh,39px);line-height:1.17;text-shadow:0 2px 10px #140b0980}
.final-page.is-current .ending-word{animation-delay:calc(1.65s + var(--word)*.18s)}
.final-page .keepsake-signature{margin:23px 0 0;color:#f1ce95;font-size:43px}
.final-page.is-current .keepsake-signature{animation-delay:3.3s}
.final-page .page-folio{margin:28px 0 0;color:#ebd6b2}
.final-page .page-folio:before,.final-page .page-folio:after{background:#ebd6b270}
.book.is-turning .final-page .page-illustration,.book.is-turning .final-page .paper:before{animation-play-state:paused}
.paused .opening-light{display:none}
.paused .final-page .page-illustration{animation:none!important;clip-path:inset(0);transform:none}
.paused .final-page .paper:before{animation:none!important;opacity:1}
.paused .final-page .ending-word,.paused .final-page .keepsake-signature{opacity:1}
.paused .scene-rain,.paused .scene-petals,.paused .scene-dust{display:none}
.paused .scene-light{animation:none!important}
.final-page.reveal-complete .page-illustration{animation:none!important;clip-path:inset(0);transform:none}
.final-page.reveal-complete .paper:before{animation:none!important;opacity:1}
.final-page.reveal-complete .ending-word,.final-page.reveal-complete .keepsake-signature{animation:none!important;opacity:1;transform:none;clip-path:none}
@keyframes opening-light-pass{to{transform:translateX(75%)}}
@keyframes cover-unfold{0%{transform:perspective(1500px) rotateY(0);opacity:1}75%{opacity:1}100%{transform:perspective(1500px) rotateY(-100deg);opacity:0}}
@keyframes book-emerge{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes scene-camera{from{transform:scale(1.025) translate(-.4%,.15%)}to{transform:scale(1.095) translate(.5%,-.5%)}}
@keyframes sun-heartbeat{from{opacity:.62;transform:scale(.88)}to{opacity:1;transform:scale(1.18)}}
@keyframes sun-rays-drift{from{opacity:.5;transform:rotate(-5deg) scale(.96)}to{opacity:1;transform:rotate(6deg) scale(1.07)}}
@keyframes flare-breathe{from{opacity:.35;transform:scale(.94)}to{opacity:.85;transform:scale(1.06)}}
@keyframes foreground-drift{from{transform:scale(1.06) translate(-1.2%,1%)}to{transform:scale(1.13) translate(1.7%,-.6%)}}
@keyframes sunlight-breathe{from{opacity:.22;transform:scale(1) rotate(-3deg)}to{opacity:.53;transform:scale(1.12) rotate(3deg)}}
@keyframes sunrise-arrive{from{opacity:0;transform:translateX(12%)}to{opacity:.4;transform:translateX(0)}}
@keyframes rain-light{from{opacity:.25}to{opacity:.55}}
@keyframes close-glow{from{opacity:.2;transform:scale(.9)}to{opacity:.48;transform:scale(1.12)}}
@keyframes horizon-light{from{transform:translate(-14%,-4%);opacity:.2}to{transform:translate(14%,6%);opacity:.5}}
@keyframes lamplight-breathe{0%,100%{opacity:.28}40%{opacity:.45}65%{opacity:.35}}
@keyframes rainfall{to{transform:translate(-45px,600px)}}
@keyframes dust-drift{0%{opacity:0;transform:translate(0,15px)}30%,70%{opacity:.65}100%{opacity:0;transform:translate(20px,-40px)}}
@keyframes petal-fall{0%{transform:translate(0,0) rotate(0deg)}40%{transform:translate(var(--drift),310px) rotate(125deg)}100%{transform:translate(calc(var(--drift)*-.4),820px) rotate(300deg)}}
@keyframes final-scene-open{to{clip-path:inset(0);transform:scale(1)}}
@keyframes final-shade{to{opacity:1}}
@media(max-height:700px){.final-page .paper{padding:18px}.final-page .page-copy{font-size:28px}.final-page .keepsake-signature{font-size:36px;margin-top:16px}.final-page .page-folio{margin-top:20px}}
@media(prefers-reduced-motion:reduce){.opening-light,.scene-rain,.scene-petals,.scene-dust{display:none}.final-page .page-illustration{clip-path:inset(0);transform:none}.final-page .paper:before{opacity:1}}