/* A shared sequence: setting, ornaments, heading, content, final accents. */
.is-active .scene-frame{animation:setting-in .4s ease .03s both}
.is-active .pearl-swag{animation:setting-in .55s ease .14s both}
.is-active .corner-flower{animation:setting-in .6s ease 1.9s both}
.is-active .flower-two{animation-delay:2.05s}
.is-active .scene-mote{animation-delay:calc(2.1s + var(--phase))}
.is-active .sticker.reveal{--reveal-delay:.22s!important}
.is-active .sticker.reveal:nth-child(2){--reveal-delay:.4s!important}
.is-active .panel-content>.roman{--reveal-delay:.42s!important}
.is-active .panel-content>.en{--reveal-delay:.55s!important}
.is-active .panel-content>h2{--reveal-delay:.72s!important}
.is-active .panel-content>p{--reveal-delay:.88s!important}
@keyframes setting-in{from{opacity:0;translate:0 7px}to{opacity:1;translate:0 0}}
.plum-scene{position:absolute;left:50%;top:18%;translate:-50% 0;width:155px;pointer-events:none}
.plum-scene svg,.evening-bloom svg{display:block;width:100%;height:auto;overflow:visible}
.bloom-petal{transform-box:view-box;transform-origin:120px 150px;opacity:0}
.is-active .bloom-petal{animation:petal-unfold .72s cubic-bezier(.2,.7,.3,1) var(--petal-delay) both}
@keyframes petal-unfold{from{opacity:0;transform:translateY(9px) scale(.22,.34) rotate(-6deg)}40%{opacity:1}to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
.bloom-heart,.bloom-rim{opacity:0}.is-active .bloom-heart{animation:setting-in .35s ease 1.05s both}.is-active .bloom-rim{animation:setting-in .4s ease 1.2s both}
.scene-birthday .panel-content>h1{--reveal-delay:1.3s!important;animation-duration:.6s!important}
.scene-birthday .panel-content>p{--reveal-delay:1.62s!important}
.scene-birthday .panel-content>.date{--reveal-delay:1.82s!important}
.scene-birthday .panel-content>.bow-ornate{--reveal-delay:.62s!important;animation-duration:.35s!important}
.bow-ornate>svg{display:block;width:100%;height:auto;overflow:visible}
.is-active .bow-loops>path:nth-child(odd){animation:bow-loop-open .55s ease .72s both;transform-origin:right center;transform-box:fill-box}
.is-active .bow-loops>path:nth-child(even){animation:bow-loop-open .55s ease .82s both;transform-origin:left center;transform-box:fill-box}
@keyframes bow-loop-open{from{opacity:0;transform:scale(.35,.55)}to{opacity:1;transform:scale(1)}}
.is-active .bow-tails{animation:ribbon-drop .55s ease .97s both;transform-box:fill-box;transform-origin:50% 0}
@keyframes ribbon-drop{from{opacity:0;transform:scaleY(.1) rotate(-5deg)}to{opacity:1;transform:scaleY(1) rotate(0)}}
.is-active .bow-pearls{animation:setting-in .4s ease 1.16s both}
.is-active .bow-ornate svg>path,.is-active .bow-ornate svg>.bow-knot{animation:setting-in .45s ease 1.28s both}
.plum-scene{top:25%;width:135px}
.is-active .plum{animation:plum-appear .5s ease .35s both;transform-origin:50% 70%}
.is-active .plum-two{animation-delay:.54s}
@keyframes plum-appear{from{opacity:0;translate:0 8px;scale:.65}to{opacity:1;translate:0 0;scale:1}}
.is-active .plum-blossom{animation:setting-in .45s ease .74s both}.is-active .blossom-two{animation-delay:.89s}
.plum-petal{position:absolute;top:5px;left:65%;width:11px;height:16px;background:#ffe5e9;border:1px solid #e7c2cc;border-radius:70% 20% 65% 25%;opacity:0}
.is-active .plum-petal{animation:plum-petal-pass 1.1s ease 1.75s both}
@keyframes plum-petal-pass{0%{opacity:0;translate:0 0;rotate:10deg}20%{opacity:.8}100%{opacity:0;translate:24px 70px;rotate:100deg}}
.scene-memories .album.reveal{--reveal-delay:.8s!important;animation-duration:.3s!important}
.scene-memories .photo{--photo-delay:.92s;--photo-tilt:-4deg}
.scene-memories .photo:nth-child(2){--photo-delay:1.27s;--photo-tilt:3deg}
.scene-memories .photo:nth-child(3){--photo-delay:1.62s;--photo-tilt:-2deg}
.story-mode .scene-memories.is-active .photo.reveal{animation:photo-place .58s cubic-bezier(.18,.8,.25,1) var(--photo-delay) both}
@keyframes photo-place{from{opacity:0;translate:-7px -24px;transform:rotate(calc(var(--photo-tilt) - 7deg)) scale(.94)}to{opacity:1;translate:0 0;transform:rotate(var(--photo-tilt)) scale(1)}}
.is-active .photo:before{animation:tape-place .25s ease calc(var(--photo-delay) + .3s) both;transform-origin:left center}
@keyframes tape-place{from{opacity:0;scale:0 1}to{opacity:1;scale:1}}
.is-active .photo:after{animation:setting-in .3s ease calc(var(--photo-delay) + .55s) both}
.scene-theatre .film{--curtain-delay:.55s;--curtain-duration:.95s;isolation:isolate;overflow:hidden}
.scene-theatre .panel-content>.film{padding:0;aspect-ratio:4/3}
.scene-theatre .film>.video-space,.scene-theatre .film>video{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;min-height:0;border-radius:0;object-fit:cover}
.scene-theatre .film>.caption{position:absolute;left:0;right:0;bottom:0;z-index:1;margin:0;padding:12px 14px;background:none;color:#9d6481;pointer-events:none}
.scene-theatre.is-active .film.reveal{--reveal-delay:.22s!important;animation-duration:.35s!important}
.scene-theatre .film:before,.scene-theatre .film:after{top:0;bottom:0;width:calc(50% + 1px);height:100%;border-radius:0;scale:1;transform:none;z-index:3;border-bottom:0;background:repeating-linear-gradient(90deg,#dc9fba 0px,#f2c6d8 9px,#efbed2 17px,#d99ab6 24px);box-shadow:inset 0 -8px 0 #bf829d40,inset 0 -10px 0 #f6d8e5}
.scene-theatre .film:before{left:0;right:auto;--curtain-open-x:-92.5%}
.scene-theatre .film:after{left:auto;right:0;--curtain-open-x:92.5%}
.scene-theatre.is-active .film:before,.scene-theatre.is-active .film:after{animation:curtains-part var(--curtain-duration) cubic-bezier(.4,0,.2,1) var(--curtain-delay) both}
@keyframes curtains-part{from{translate:0 0}to{translate:var(--curtain-open-x) 0}}
.scene-theatre.is-active .video-space,.scene-theatre.is-active .film video,.scene-theatre.is-active .caption{animation:stage-reveal var(--curtain-duration) cubic-bezier(.4,0,.2,1) var(--curtain-delay) both}
@keyframes stage-reveal{from{opacity:0;clip-path:inset(0 50%)}to{opacity:1;clip-path:inset(0 0)}}
.scene-theatre.is-active .poem-title{--reveal-delay:1.02s!important}
.scene-theatre.is-active .smile-button{--reveal-delay:1.25s!important}
.trinket-motion{position:relative}
.scent-glimmer{position:absolute;left:50%;top:4%;width:5px;height:5px;border-radius:50%;background:#fff4ce;box-shadow:0 0 5px #e3ba92;opacity:0}
.is-active .scent-glimmer{animation:scent-rise 2.2s ease-out var(--scent-delay) both}
@keyframes scent-rise{0%{opacity:0;translate:0 8px;scale:.4}25%{opacity:1}100%{opacity:0;translate:var(--scent-x) -47px;scale:.65}}
.letter-scene{position:relative;isolation:isolate;width:min(100%,660px);margin:56px auto 35px;padding-bottom:25px}
.letter-scene>.letter{position:relative;z-index:2;width:100%;max-width:none;margin:0;padding:28px 45px 55px}
.envelope-back{position:absolute;inset:14px -9px -8px;background:#f1cbd9;border:1px solid #cea0b5;border-radius:5px;z-index:0}
.envelope-flap{position:absolute;top:15px;left:-9px;right:-9px;height:70px;background:linear-gradient(#f9e2e8,#e7b8cc);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;z-index:3}
.envelope-front{position:absolute;left:-9px;right:-9px;bottom:-8px;height:75px;background:linear-gradient(30deg,#ebbed0 49.5%,transparent 50%) left/50% 100% no-repeat,linear-gradient(-30deg,#e8b8cc 49.5%,transparent 50%) right/50% 100% no-repeat;z-index:3;border-bottom:1px solid #cea0b5;border-radius:0 0 5px 5px}
.is-active .envelope-back{animation:setting-in .4s ease .3s both}
.is-active .envelope-front{animation:setting-in .4s ease .34s both}
.is-active .envelope-flap{animation:envelope-open .7s ease .42s both}
@keyframes envelope-open{0%{opacity:0;transform:perspective(600px) rotateX(0)}15%{opacity:1}65%{opacity:1}100%{opacity:.8;transform:perspective(600px) rotateX(178deg);z-index:0}}
.story-mode .scene-letter.is-active .letter.reveal{--reveal-delay:.82s!important;animation:paper-rise .85s cubic-bezier(.2,.65,.3,1) .82s both}
@keyframes paper-rise{from{opacity:0;translate:0 60px;transform:scale(.97)}to{opacity:1;translate:0 0;transform:scale(1)}}
.story-mode .scene-letter.is-active .letter p{animation-delay:calc(.62s + var(--line-delay))}
.scene-letter.is-active .letter:before{animation:seal-place .4s ease 2.05s both}
@keyframes seal-place{from{opacity:0;scale:1.3;translate:0 -10px}to{opacity:1;scale:1;translate:0 0}}
.scene-letter .wish{--reveal-delay:2.15s!important}
.sunset-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 65% 35%,#ffd59f80,transparent 62%);opacity:0}
.scene-letter.is-active .sunset-glow{animation:setting-in 1s ease .1s both}
.scene-letter .corner-flower{display:none}
.evening-bloom{position:absolute;width:90px;--evening-offset:.5s}
.bloom-left{left:1%;bottom:13%;rotate:-12deg}.bloom-right{right:1%;top:22%;width:73px;rotate:10deg;--evening-offset:.88s}
.is-active .evening-bloom .bloom-petal{animation-delay:calc(var(--petal-delay) + var(--evening-offset))}
.is-active .evening-bloom .bloom-heart{animation-delay:calc(1.05s + var(--evening-offset))}
.evening-light{position:absolute;left:var(--light-x);top:var(--light-y);width:4px;height:4px;border-radius:50%;background:#fff4b4;box-shadow:0 0 7px #e6c594;opacity:0}
.is-active .evening-light{animation:evening-shimmer 4s ease-in-out var(--light-delay) infinite both}
@keyframes evening-shimmer{0%,100%{opacity:.05;translate:0 0}50%{opacity:.8;translate:3px -10px}}
.transition-petals{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.turn-petal{position:absolute;left:var(--turn-x);top:var(--turn-y);width:15px;height:22px;background:linear-gradient(110deg,#fff0e8,#eeb5cb);border:1px solid #e4b3c780;border-radius:75% 20% 70% 25%;opacity:0;animation:page-petal .75s ease-out var(--turn-delay) both}
@keyframes page-petal{0%{opacity:0;translate:0 0;rotate:-10deg}20%{opacity:.85}100%{opacity:0;translate:var(--turn-dx) var(--turn-dy);rotate:var(--turn-rotate)}}
.decor-paused .evening-light{animation-play-state:paused!important}
@media(max-width:900px){
 .plum-scene{width:94px;left:49%;top:5px}
 .scene-birthday .sticker:nth-child(odd){left:0}.scene-birthday .sticker:nth-child(even){right:0}
 .scene-memories .sticker:nth-child(odd){left:0}.scene-memories .sticker:nth-child(even){right:0}
 .scene-memories .flower-two{top:21%!important}
 .letter-scene{width:calc(100% - 14px);margin-top:54px;margin-bottom:34px}
 .letter-scene>.letter{padding:27px 19px 48px}
 .envelope-flap{height:58px}.envelope-front{height:61px}
 .evening-bloom{width:62px}.bloom-left{left:4px;bottom:14%}.bloom-right{right:4px;top:24%;width:53px}
 .scene-letter .sunset-title{font-size:clamp(22px,6vw,29px)}
}
@media(max-width:359px){.plum-scene{width:81px;top:9px}.scene-memories .sticker:nth-child(odd),.scene-birthday .sticker:nth-child(odd){--sticker-size:82px}.scene-memories .sticker:nth-child(even),.scene-birthday .sticker:nth-child(even){--sticker-size:78px}.letter-scene>.letter{padding-inline:16px}}
@media(prefers-reduced-motion:reduce){
 .story-mode section.is-active .bloom-petal,.story-mode section.is-active .bloom-heart,.story-mode section.is-active .bloom-rim,.story-mode section.is-active .plum,.story-mode section.is-active .plum-blossom,.story-mode section.is-active .photo.reveal,.story-mode section.is-active .photo:before,.story-mode section.is-active .photo:after,.story-mode section.is-active .film:before,.story-mode section.is-active .film:after,.story-mode section.is-active .film video,.story-mode section.is-active .video-space,.story-mode section.is-active .caption,.story-mode section.is-active .bow-ornate svg *,.story-mode section.is-active .letter.reveal,.story-mode section.is-active .letter p,.story-mode section.is-active .letter:before,.story-mode section.is-active .envelope-back,.story-mode section.is-active .envelope-front,.story-mode section.is-active .scene-frame,.story-mode section.is-active .pearl-swag,.story-mode section.is-active .corner-flower,.story-mode section.is-active .sunset-glow{animation:none!important;opacity:1;translate:none;scale:1;transform:none}
 .story-mode section.is-active .envelope-flap{animation:none;transform:perspective(600px) rotateX(178deg);z-index:0}
 .story-mode .scene-theatre.is-active .film:before{translate:-92.5% 0}
 .story-mode .scene-theatre.is-active .film:after{translate:92.5% 0}
 .scent-glimmer,.plum-petal,.turn-petal{display:none}.story-mode section.is-active .evening-light{animation:none;opacity:.4}
}