/* The garden rises into a pastel sky before the letter arrives. */
body{position:relative;isolation:isolate}
body:before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 15% 12%,#FFFDF4 0,transparent 43%),radial-gradient(ellipse at 100% 85%,#FFFBF2 0,transparent 50%),linear-gradient(#C5DFEC,#E6EFF0 60%,#FBF5E7);transition:opacity 4s ease}
body:has(#laura-story-invite[data-story-world="sky"]):before{opacity:1}
#laura-story-invite .l-paper>.l-scene,#laura-story-invite .l-paper>.l-topline{position:relative;z-index:2}
#laura-story-invite .l-sky-backdrop{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 35% 6%,#FFFCF0B3,transparent 48%),linear-gradient(#ACD1E5,#DDEBF0 52%,#F9F3E7);transition:opacity 2.8s ease}
#laura-story-invite[data-story-world="sky"] .l-sky-backdrop{opacity:1}
#laura-story-invite .l-cloud{position:absolute;display:block;width:240px;height:66px;border-radius:50%;background:#FFFDF3D9;box-shadow:0 15px 26px #FFFDF3C2;filter:blur(3px);animation:l-cloud-drift 15s ease-in-out infinite alternate;animation-play-state:paused}
#laura-story-invite .l-cloud:before,#laura-story-invite .l-cloud:after{content:'';position:absolute;background:inherit;border-radius:50%}
#laura-story-invite .l-cloud:before{width:48%;height:150%;left:14%;bottom:5%}
#laura-story-invite .l-cloud:after{width:38%;height:116%;right:12%;bottom:12%}
#laura-story-invite .l-cloud-one{top:9%;left:-100px;opacity:.78}
#laura-story-invite .l-cloud-two{top:29%;right:-142px;width:280px;opacity:.6;animation-delay:-6s;animation-duration:18s}
#laura-story-invite .l-cloud-three{bottom:15%;left:-135px;width:320px;height:85px;opacity:.9;animation-delay:-3s;animation-duration:20s}
#laura-story-invite .l-cloud-four{bottom:-18px;right:-95px;width:330px;height:90px;opacity:.8;animation-delay:-8s}
#laura-story-invite[data-story-world="sky"] .l-cloud{animation-play-state:running}
@keyframes l-cloud-drift{from{transform:translate3d(-8px,0,0)}to{transform:translate3d(18px,-10px,0)}}

/* Preserve the forest composition while the camera follows both birds up. */
#laura-story-invite[data-story-scene="opening"] .l-paper>[data-scene="cover"]{opacity:0;pointer-events:none}
#laura-story-invite[data-story-scene="opening"] .l-paper>.l-topline{opacity:0;transition:opacity .7s ease}
#laura-story-invite .l-paper .l-envelope-stage{padding:38px 18px 18px;background:transparent;border-radius:24px;transition:opacity .9s ease}
#laura-story-invite .l-flight-forest{position:absolute;inset:0;z-index:1;pointer-events:none;background-image:var(--l-forest-scene);background-size:cover;background-position:center bottom;transform-origin:50% 0}
#laura-story-invite .is-opening .l-flight-forest{animation:l-forest-to-sky var(--l-sky-flight) cubic-bezier(.35,0,.2,1) both}
@keyframes l-forest-to-sky{
  0%,8%{transform:translate3d(0,0,0) scale(1);opacity:1}
  32%{opacity:1}
  72%{opacity:.25}
  100%{transform:translate3d(0,100%,0) scale(1.12);opacity:0}
}
#laura-story-invite[data-story-scene="opening"] .l-bird-left{animation:l-bird-sky-left var(--l-sky-flight) cubic-bezier(.28,.15,.37,1) both}
#laura-story-invite[data-story-scene="opening"] .l-bird-right{animation:l-bird-sky-right var(--l-sky-flight) .18s cubic-bezier(.28,.15,.37,1) both}
#laura-story-invite .l-flying-bird{--l-bird-direction:1}
#laura-story-invite .l-bird-left{--l-bird-direction:-1}
#laura-story-invite .l-flying-bird img{transform-origin:50% 74%;animation:l-bird-flutter .8s ease-in-out infinite}
#laura-story-invite[data-story-scene="opening"] .l-flying-bird img{animation-duration:.37s}
@keyframes l-bird-flutter{0%,100%{transform:scaleX(var(--l-bird-direction)) scaleY(1) rotate(-2deg)}50%{transform:scaleX(var(--l-bird-direction)) scaleY(.86) rotate(3deg)}}
@keyframes l-bird-sky-left{
  0%{transform:translate3d(0,0,0) rotate(-6deg) scale(1);opacity:1}
  20%{transform:translate3d(17px,-19px,0) rotate(-13deg) scale(1.14);opacity:1}
  48%{transform:translate3d(46px,-83px,0) rotate(-20deg) scale(1.02);opacity:1}
  75%{transform:translate3d(78px,-177px,0) rotate(-26deg) scale(.7);opacity:1}
  100%{transform:translate3d(113px,-310px,0) rotate(-30deg) scale(.32);opacity:0}
}
@keyframes l-bird-sky-right{
  0%{transform:translate3d(0,0,0) rotate(5deg) scale(1);opacity:1}
  20%{transform:translate3d(-15px,-17px,0) rotate(12deg) scale(1.12);opacity:1}
  48%{transform:translate3d(-42px,-78px,0) rotate(19deg) scale(1);opacity:1}
  75%{transform:translate3d(-76px,-167px,0) rotate(25deg) scale(.68);opacity:1}
  100%{transform:translate3d(-110px,-285px,0) rotate(29deg) scale(.3);opacity:0}
}

/* The letter appears only after the flight, then stays open for reading. */
#laura-story-invite .l-envelope-intro{z-index:2;position:relative;font-size:27px;line-height:1.15;min-height:62px;margin:0;color:#456B81;text-shadow:0 1px 10px #FFFCF0;opacity:0}
#laura-story-invite .l-envelope-shell{z-index:2;flex-shrink:0;margin:160px auto 22px;opacity:0}
#laura-story-invite .l-envelope-signature{position:relative;z-index:2;line-height:1.2;color:#4E7080;opacity:0}
#laura-story-invite .l-envelope-continue{position:relative;z-index:2;flex-shrink:0;margin-top:12px;background:#FFFCF3ED}
#laura-story-invite .is-opening .l-envelope-intro{animation:l-sky-text-in 1s var(--l-sky-message-at) ease both}
#laura-story-invite .is-opening .l-envelope-shell{animation:l-envelope-arrive 1.4s var(--l-sky-envelope-at) cubic-bezier(.2,.7,.25,1) both}
#laura-story-invite .is-opening .l-envelope-signature{animation:l-sky-text-in 1.1s var(--l-sky-open-at) ease both}
#laura-story-invite .l-paper .l-envelope-stage.is-opening .l-envelope-flap{animation:l-open-flap 2.4s var(--l-sky-open-at) cubic-bezier(.25,.7,.3,1) both}
#laura-story-invite .l-paper .l-envelope-stage.is-opening .l-envelope-letter{animation:l-lift-letter 3.8s var(--l-sky-letter-at) cubic-bezier(.23,.75,.25,1) both}
#laura-story-invite .l-paper .l-envelope-stage.is-opening .l-envelope-seal{animation:l-release-seal 1.1s var(--l-sky-open-at) ease both}
@keyframes l-sky-text-in{from{opacity:0}to{opacity:1}}
@keyframes l-envelope-arrive{from{opacity:0;transform:translate3d(0,65px,0) rotate(-4deg) scale(.88)}to{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1)}}

/* Keep the sky behind the opened invitation and the next steps. */
#laura-story-invite[data-story-world="sky"] .l-paper .l-topline{color:#456B81;background:transparent}
#laura-story-invite[data-story-world="sky"] .l-paper .l-invite-frame{background:#FFF9EFF5;border-color:#A8C4D5;box-shadow:0 0 0 4px #FBF5EB,0 0 0 5px #A8C4D580}
#laura-story-invite[data-story-world="sky"] .l-paper .l-details{background:#FFF9EFEC}
#laura-story-invite[data-story-world="sky"] .l-paper [data-scene="form"]{background:linear-gradient(#FFF9EED1,#FFF9EFF2 25%,#FFF9EFF2 90%,#FFF9EED1)}
@media(max-width:350px){#laura-story-invite .l-paper .l-envelope-shell{margin-top:160px}#laura-story-invite .l-envelope-intro{font-size:25px}}
@media(prefers-reduced-motion:reduce){
  body:before,#laura-story-invite .l-sky-backdrop{transition:none}
  #laura-story-invite .l-cloud,#laura-story-invite .l-flying-bird img{animation:none}
}