/* Photographic keepsakes stay at the edges; text and touch areas stay clear. */
.scene-romance{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.story-scene>.scene-object{position:relative;z-index:2}
.story-scene>.memory-navigation,.story-scene>.memory-whisper,.story-scene>.writer-note,.story-scene>.promise-bottom,.story-scene>.rose-bottom,.story-scene>.story-signoff,.story-scene>.story-footer{position:relative;z-index:2}
.romance-heart{position:absolute;width:var(--heart-width,86px);left:var(--heart-left,auto);right:var(--heart-right,auto);top:var(--heart-top,32%);opacity:var(--heart-opacity,.93);transform-origin:50% 95%;animation:heart-in-the-breeze var(--heart-time,12s) var(--heart-delay,-3s) ease-in-out infinite alternate}
.romance-heart img{display:block;width:100%;height:auto;filter:drop-shadow(2px 4px 3px #57453516)}
.romance-heart:nth-child(n+3){animation-name:small-heart-in-the-breeze}
.romance-petal{position:absolute;left:var(--petal-left,5%);top:var(--petal-top,20%);width:var(--petal-width,16px);height:auto;opacity:0;animation:real-petal-drift var(--petal-time,18s) var(--petal-delay,-8s) linear infinite}
.romance-firefly{position:absolute;left:var(--fly-x);top:var(--fly-y);width:6px;height:6px;border-radius:50%;background:radial-gradient(circle,#fff7cb 0 13%,#f4c98177 30%,transparent 72%);animation:garden-flicker var(--fly-time,6s) var(--fly-delay,-2s) ease-in-out infinite}
.romance-glint{position:absolute;left:var(--glint-x);top:var(--glint-y);width:9px;height:9px;color:#b48c53;animation:little-warm-glint var(--glint-time,8s) var(--glint-delay,-2s) ease-in-out infinite}
.romance-glint:before,.romance-glint:after{content:"";position:absolute;background:currentColor;border-radius:50%}
.romance-glint:before{width:1px;height:9px;left:4px;top:0}.romance-glint:after{height:1px;width:9px;left:0;top:4px}
.story-petals{display:none}
/* The words stay in normal flow. Only their ink and a 6px settle animate. */
.romance-word{display:inline-block;vertical-align:baseline}
.romance-title:not(.ink-seen):not(.ink-settled) .romance-word{opacity:0;transform:translateY(6px)}
.romance-title.ink-seen:not(.ink-settled) .romance-word{animation:words-settle .95s var(--word-delay,0s) cubic-bezier(.2,.65,.3,1) both}
.romance-handwrite:not(.ink-seen):not(.ink-settled){opacity:0}
.romance-handwrite.ink-seen:not(.ink-settled){animation:handwritten-ink 1.55s .12s cubic-bezier(.24,.55,.42,1) both}
.romance-title.ink-settled .romance-word,.romance-handwrite.ink-settled{animation:none!important;opacity:1;transform:none;clip-path:none}
body.motion-paused .romance-word,body.motion-paused .romance-handwrite,body.reduced-motion .romance-word,body.reduced-motion .romance-handwrite{animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important}
body.motion-paused .story-scene .scene-heading{opacity:1!important;translate:none!important;transition:none}
/* The folio ribbons move around their attachment point, not across the note. */
.promise-scene .ribbon-tab{transform-origin:50% 6%;animation:ribbon-in-the-breeze 7s ease-in-out infinite alternate}
.promise-scene .ribbon-tab:nth-child(2){animation-duration:9s;animation-delay:-4s}
.promise-scene .ribbon-tab:nth-child(3){animation-duration:8s;animation-delay:-2s}
.promise-scene .ribbon-tab:focus-visible{animation:none}
/* A seated plush keepsake, with its own reserved space and contact shadow. */
.teddy-keepsake{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;gap:20px;max-width:315px;margin:32px auto 0;padding-top:5px}
.teddy-touch{position:relative;flex:0 0 122px;width:122px;height:171px;border:0;padding:0;background:none;touch-action:pan-y;isolation:isolate}
.teddy-contact{position:absolute;left:11%;right:8%;bottom:7px;height:15px;background:radial-gradient(ellipse,#7c695d29,transparent 68%);z-index:-1}
.teddy-idle{display:block;transform-origin:50% 93%;animation:teddy-breath 6.5s ease-in-out infinite alternate}
.teddy-body{display:block;width:122px;height:auto;transform-origin:50% 85%}
.teddy-touch .story-tap{position:absolute;right:-2px;bottom:22px;color:#8b7057;width:29px;height:38px;filter:drop-shadow(0 1px 1px #fff)}
.teddy-copy{font:25px/1.3 MoonHand,cursive;color:#8c7061;max-width:155px;min-height:100px;display:flex;flex-direction:column;justify-content:center}
.teddy-copy small{display:block;font:10px/1.6 Arial,sans-serif;letter-spacing:.03em;color:#7b7f67;margin-top:10px}
/* The knot is anchored at the left side of the teddy's chest. Inflation and
   flight have separate transforms, so the balloon cannot slide away as it fills. */
.teddy-heart-flight{position:absolute;z-index:3;pointer-events:none;width:60%;aspect-ratio:300/479;left:82%;top:68%;translate:-46% -58%;opacity:0;transform-origin:46% 58%}
.teddy-love-heart{display:block;width:100%;height:auto;max-width:none;transform-origin:46% 58%;transform:scale(.055,.025);clip-path:inset(0 0 43% 0)}
.teddy-touch:disabled{opacity:1}
.teddy-touch.is-loved .story-tap{display:none}
.teddy-touch.is-hugging .teddy-idle{animation-play-state:paused!important}
.teddy-touch.is-hugging .teddy-body{animation:little-teddy-hug 2.9s ease-in-out both}
.teddy-touch.is-hugging .teddy-heart-flight{animation:teddy-heart-release 6.6s linear both}
.teddy-touch.is-hugging .teddy-love-heart{animation:teddy-heart-inflate 6.6s linear both}
.story-scene.is-visible .teddy-touch[data-awake=false] *{animation-play-state:paused!important}
/* The light lands on the lantern already photographed in the garden. */
.garden-lantern{position:absolute;z-index:3;width:64px;height:70px;left:var(--lamp-x,30%);top:var(--lamp-y,61%);translate:-50% -50%;border:0;padding:0;background:none;isolation:isolate;touch-action:pan-y;color:#fff0ca}
.lantern-glow{position:absolute;left:50%;top:50%;width:var(--lamp-glow,140px);height:var(--lamp-glow,140px);translate:-50% -50%;background:radial-gradient(circle,#ffe1a166 0,#ffc46824 23%,transparent 65%);mix-blend-mode:screen;pointer-events:none;animation:lantern-breath 6s ease-in-out infinite;transition:scale 1.2s,opacity 1.2s;z-index:-1}
.garden-lantern[aria-pressed=true] .lantern-glow{scale:1.8;background:radial-gradient(circle,#fff4b0a8 0,#ffcf7660 18%,#ffbb4d1c 43%,transparent 68%)}
.lantern-touch-hint{position:absolute;left:82%;bottom:22px;display:flex;align-items:center;gap:7px;min-width:160px;text-align:left;pointer-events:none}
.lantern-touch-hint>span{max-width:112px;font:20px/1.15 MoonHand,cursive;text-shadow:0 1px 5px #152b35}
.lantern-touch-hint .story-tap{width:25px;height:34px;flex:0 0 25px}
.garden-lantern[aria-pressed=true] .story-tap{display:none}
@keyframes heart-in-the-breeze{0%{transform:translate(0,12px) rotate(-7deg)}35%{transform:translate(9px,-7px) rotate(4deg)}70%{transform:translate(-5px,-27px) rotate(-4deg)}100%{transform:translate(7px,-42px) rotate(6deg)}}
@keyframes small-heart-in-the-breeze{0%{transform:translate(0,7px) rotate(-3deg)}40%{transform:translate(4px,-6px) rotate(2deg)}75%{transform:translate(-3px,-19px) rotate(-2deg)}100%{transform:translate(3px,-26px) rotate(3deg)}}
@keyframes real-petal-drift{0%{opacity:0;transform:translate(-8px,-32px) rotate(-20deg) scale(.85)}15%{opacity:.9}55%{transform:translate(22px,64px) rotate(65deg) scale(1)}80%{opacity:.85}100%{opacity:0;transform:translate(4px,148px) rotate(145deg) scale(.85)}}
@keyframes garden-flicker{0%,100%{opacity:.15;transform:translate(0,4px)}40%{opacity:.8;transform:translate(12px,-10px)}65%{opacity:.4;transform:translate(-7px,-20px)}}
@keyframes ribbon-in-the-breeze{0%{transform:rotate(-1.5deg) skewX(.5deg)}100%{transform:rotate(1.5deg) skewX(-.5deg)}}
@keyframes teddy-breath{from{transform:rotate(-1.3deg) scaleY(.996)}to{transform:rotate(1.3deg) scaleY(1.008)}}
@keyframes little-teddy-hug{0%,100%{transform:rotate(0) scale(1)}35%{transform:rotate(-8deg) scale(1.055,.96)}65%{transform:rotate(4deg) scale(1.035,.985)}}
@keyframes teddy-heart-inflate{
  0%{transform:scale(.055,.025) rotate(-12deg);clip-path:inset(0 0 43% 0)}
  9%{transform:scale(.20,.16) rotate(-9deg);clip-path:inset(0 0 43% 0)}
  21%{transform:scale(.56,.47) rotate(-5deg);clip-path:inset(0 0 43% 0)}
  34%{transform:scale(.90,.88) rotate(1deg);clip-path:inset(0 0 43% 0)}
  41%{transform:scale(1.035,.98) rotate(2deg);clip-path:inset(0 0 43% 0)}
  46%{transform:scale(1,1) rotate(0);clip-path:inset(0 0 40% 0)}
  59%{transform:scale(1,1) rotate(-4deg);clip-path:inset(0 0 0 0)}
  77%{transform:scale(1,1) rotate(5deg);clip-path:inset(0 0 0 0)}
  100%{transform:scale(.94,.96) rotate(-5deg);clip-path:inset(0 0 0 0)}
}
@keyframes teddy-heart-release{
  0%{opacity:0;transform:translate(0,0)}
  3%,44%{opacity:1;transform:translate(0,0)}
  52%{opacity:1;transform:translate(1px,-7px)}
  65%{opacity:1;transform:translate(4px,-40px)}
  79%{opacity:1;transform:translate(16px,-99px)}
  89%{opacity:.8;transform:translate(11px,-151px)}
  100%{opacity:0;transform:translate(24px,-222px)}
}
@keyframes lantern-breath{0%,100%{opacity:.65}45%{opacity:1}64%{opacity:.78}}
@keyframes little-warm-glint{0%,100%{opacity:.08;transform:translateY(4px) scale(.65) rotate(0)}45%{opacity:.58;transform:translateY(-3px) scale(1) rotate(25deg)}70%{opacity:.17;transform:translateY(-6px) scale(.75) rotate(40deg)}}
@keyframes words-settle{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes handwritten-ink{from{clip-path:inset(-.2em 100% -.25em 0)}to{clip-path:inset(-.2em 0 -.25em 0)}}
@media(max-width:360px){.teddy-keepsake{gap:15px}.teddy-copy{font-size:23px;max-width:135px}.teddy-touch,.teddy-body{width:110px}.teddy-touch{flex-basis:110px;height:155px}.romance-heart{width:calc(var(--heart-width,86px) * .82)}.lantern-touch-hint{min-width:150px}.lantern-touch-hint>span{font-size:18px}}
@media(min-width:700px){.romance-heart{width:calc(var(--heart-width,86px) * 1.35)}.teddy-keepsake{margin-top:45px;max-width:360px}.teddy-touch,.teddy-body{width:140px}.teddy-touch{flex-basis:140px;height:190px}.teddy-copy{font-size:28px}}
@media(prefers-reduced-motion:reduce){.romance-petal{opacity:.65}.teddy-love-heart{display:none}.lantern-glow{opacity:.85;transition:none}.romance-word,.romance-handwrite{animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important}.romance-glint{opacity:.25}}