/* Decorative layer only: the original V5 content dimensions are unchanged. */
.world-layer {position:fixed;inset:0;z-index:2;overflow:hidden;pointer-events:none;user-select:none;contain:layout paint;transition:opacity .35s;}
.world-layer img,.little-birthday-dance {display:block;object-fit:contain;pointer-events:none;user-select:none;max-width:none;}
.world-flight,.world-cycle,.world-train {position:absolute;left:-160px;pointer-events:none;will-change:transform;}
.world-flight {top:17vh;width:112px;height:52px;opacity:.6;animation:worldFly 34s linear infinite;animation-delay:-6s;}
.world-brooms {width:112px;height:52px;animation:worldBob 6s ease-in-out infinite;}
.world-cycle {bottom:0;width:112px;height:110px;opacity:.76;animation:worldCycle 28s linear infinite;animation-delay:-3s;}
.world-bicycle {width:112px;height:110px;}
.world-train {bottom:0;width:96px;height:52px;display:flex;align-items:flex-end;gap:2px;opacity:.39;filter:saturate(.75);flex-direction:row-reverse;animation:worldTrain 44s linear infinite reverse;animation-delay:-20s;}
.distant-carriage {position:relative;width:58px;height:43px;margin-bottom:6px;}
.distant-carriage img {width:58px;height:43px;}
.distant-carriage::after {content:'';position:absolute;left:7px;right:7px;height:8px;bottom:-5px;background:radial-gradient(circle at 4px 4px,#4d6666 0 4px,transparent 4.5px),radial-gradient(circle at calc(100% - 4px) 4px,#4d6666 0 4px,transparent 4.5px);}
.distant-engine {width:35px;height:35px;}
.world-reading {position:absolute;width:82px;height:82px;left:3vw;top:48vh;opacity:0;animation:worldReading 42s ease-in-out infinite;}
.world-coffee {position:absolute;width:78px;height:72px;right:3vw;top:49vh;opacity:0;animation:worldCoffee 42s ease-in-out infinite;}
.world-book {position:absolute;width:28px;height:28px;right:6vw;top:31vh;opacity:.3;animation:worldBob 10s ease-in-out infinite;}
.little-birthday-dance {position:absolute;width:64px;height:70px;right:14px;bottom:15px;opacity:.72;transform-origin:50% 90%;animation:worldSway 7s ease-in-out infinite;}
.world-resting .world-layer * {animation-play-state:paused!important;}
.world-obscured .world-layer {opacity:0;}
.world-hidden .little-birthday-dance {animation-play-state:paused;}
/* Near and far routes follow the elliptical hill crests. All movement is viewport based. */
@keyframes worldCycle {
  0%{transform:translate3d(0,-2vh,0)}
  20%{transform:translate3d(calc(25vw + 80px),-10.5vh,0)}
  40%{transform:translate3d(calc(50vw + 160px),-13.7vh,0)}
  60%{transform:translate3d(calc(75vw + 240px),-10.5vh,0)}
  82%,100%{transform:translate3d(calc(100vw + 320px),-2vh,0)}
}
@keyframes worldTrain {
  0%{transform:translate3d(0,-5vh,0)}
  20%{transform:translate3d(calc(25vw + 80px),-18vh,0)}
  40%{transform:translate3d(calc(50vw + 160px),-21.5vh,0)}
  60%{transform:translate3d(calc(75vw + 240px),-18vh,0)}
  82%,100%{transform:translate3d(calc(100vw + 320px),-5vh,0)}
}
@keyframes worldFly {0%{transform:translate3d(0,0,0)}42%{transform:translate3d(calc(50vw + 160px),-3vh,0)}84%,100%{transform:translate3d(calc(100vw + 320px),0,0)}}
@keyframes worldBob {0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}}
@keyframes worldSway {0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes worldReading {0%,45%,100%{opacity:0;transform:translateY(4px)}8%,32%{opacity:.48;transform:translateY(-3px)}}
@keyframes worldCoffee {0%,48%,100%{opacity:0;transform:translateY(4px)}58%,86%{opacity:.48;transform:translateY(-3px)}}
@media(max-width:1100px){.world-reading,.world-coffee{display:none;}}
@media(max-width:620px){
  .world-flight,.world-brooms{width:80px;height:38px;}
  .world-flight{top:21vh;opacity:.4;}
  .world-cycle,.world-bicycle{width:82px;height:80px;}
  .world-cycle{opacity:.55;}
  .world-train{width:70px;height:39px;gap:1px;opacity:.26;}
  .distant-carriage,.distant-carriage img{width:42px;height:31px;}
  .distant-engine{width:26px;height:26px;}
  .distant-carriage::after{height:6px;bottom:-4px;left:6px;right:6px;background:radial-gradient(circle at 3px 3px,#4d6666 0 3px,transparent 3.5px),radial-gradient(circle at calc(100% - 3px) 3px,#4d6666 0 3px,transparent 3.5px);}
  .world-book{display:none;}
  .little-birthday-dance{width:40px;height:44px;right:8px;bottom:12px;opacity:.5;}
}
@media(prefers-reduced-motion:reduce){
  .world-flight,.world-cycle,.world-train{display:none;}
  .world-layer img,.little-birthday-dance{animation:none!important;}
  .world-reading{opacity:.3;}.world-coffee{display:none;}
}

/* One occasional storybook cameo behind the page content. */
.story-moments {position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.story-moment {position:absolute;object-fit:contain;max-width:none;pointer-events:none;opacity:0;filter:drop-shadow(0 4px 8px rgba(49,76,72,.12));animation:storyMoment 5.5s ease-in-out both;}
.story-moment-owl {filter:drop-shadow(0 3px 5px rgba(49,76,72,.11));}
.story-moment-walking {animation-name:storyMomentWalk;}
@keyframes storyMoment {0%,100%{opacity:0;transform:translateY(8px) scale(.96);}22%,72%{opacity:.68;transform:translateY(-3px) scale(1);}}
@keyframes storyMomentWalk {0%,100%{opacity:0;transform:translateX(0) scale(.96);}22%{opacity:.64;}72%{opacity:.64;}90%{opacity:.3;}100%{transform:translateX(28px) scale(1);}}
@media(max-width:620px) {.story-moment {scale:.72;transform-origin:bottom center;}}
@media(prefers-reduced-motion:reduce) {.story-moments {display:none;}}
