/* The living world is decorative. All motion is owned by the clock's wake policy. */
#seasonalLandscape {
    height: clamp(160px, 28vh, 310px);
    --world-light: #fff3b0;
    --world-light-opacity: .1;
    --world-grass: #719f47;
    --world-petal: #ffd4dc;
    --world-stem: #356746;
    --world-outline: #304b3c;
    --world-shadow: #294e43;
    --world-gold: #ffdc83;
    --world-weather-ink: #415b60;
    --world-weather-shade: 0%;
}
#seasonalLandscape[data-weather="cloudy"] { --world-weather-shade: 12%; }
#seasonalLandscape[data-weather="wet"] { --world-weather-shade: 22%; }
#seasonalLandscape[data-weather="storm"] { --world-weather-shade: 42%; --world-weather-ink: #273e4d; }
#seasonalLandscape[data-weather="foggy"] { --world-weather-shade: 30%; --world-weather-ink: #c6d8d6; }
#seasonalLandscape[data-weather="snowy"] { --world-weather-shade: 20%; --world-weather-ink: #c7dedf; }
#seasonalLandscape *, #seasonalLandscape *::before, #seasonalLandscape *::after { pointer-events: none !important; }
#seasonalLandscapeSvg, #landscapeNearLayer { filter: none; }
/* Keep the small ground discoveries and drifting leaves above the month labels. */
#landscapeAccentLayer { transform: translateY(-20px); }
#seasonalTree {
    position: absolute; left: 3%; bottom: clamp(24px, 3.8vh, 42px);
    width: clamp(165px, 34vmin, 320px); height: auto; aspect-ratio: 260 / 205;
    overflow: visible; opacity: calc(.6 + var(--land-saturation) * .4);
}
#seasonalLandscape stop { transition: stop-color 2.5s ease; }
#worldCrownPrimary stop:first-child, #worldCrownSecondary stop:first-child,
#worldCrownAccent stop:first-child { stop-color: color-mix(in srgb, var(--land-foliage-accent), #ffd5a5 var(--world-warmth, 0%)); }
#worldMeadow stop:first-child { stop-color: color-mix(in srgb, var(--land-mid-color), var(--world-weather-ink) var(--world-weather-shade)); }
#worldMeadow stop:last-child, #worldGround stop:first-child { stop-color: color-mix(in srgb, var(--land-ground-color), var(--world-weather-ink) var(--world-weather-shade)); }
#worldGround stop:last-child { stop-color: color-mix(in srgb, var(--land-ground-color), #183e36 18%); }
#landscapeFarLayer .landscape-shape { fill: color-mix(in srgb, var(--land-far-color), var(--world-weather-ink) var(--world-weather-shade)); }
#seasonalTree .landscape-trunk { fill: url(#worldBark); stroke-width: 1.8; }
#seasonalTree .landscape-trunk-crown { fill: var(--land-trunk-color); }
#seasonalTree .landscape-foliage {
    fill: var(--land-cluster-fill, url(#worldCrownPrimary));
    stroke-width: 1.1;
    filter: none;
    transform-box: fill-box;
    transform-origin: 50% 90%;
}
#seasonalTree .landscape-foliage:nth-of-type(even) {
    animation: world-crown-breathe calc(var(--land-sway-duration) * 1.4) ease-in-out infinite;
    animation-delay: -4s;
}
.world-bark-lines { fill: none; stroke: #f5d4a0; stroke-opacity: .34; stroke-width: 1.1; stroke-linecap: round; }
#landscapeMidLayer > .landscape-shape { fill: url(#worldMeadow); stroke-width: 1; }
#landscapeNearLayer > .landscape-shape { fill: url(#worldGround); stroke-width: 1; }
#seasonalLandscape .landscape-shrub { stroke-width: 1; filter: none; }
#seasonalLandscape .landscape-shrub { transform-box: fill-box; transform-origin: bottom center; animation: world-shrub-sway calc(var(--land-sway-duration) * 1.2) ease-in-out -3s infinite; }
.world-meadow-light { fill: var(--world-light); opacity: var(--world-light-opacity); transition: opacity 3s, fill 3s; }
.world-ground-lines { fill: none; stroke: var(--land-foliage-accent); stroke-width: 1.6; opacity: .32; stroke-linecap: round; }
.world-garden, .world-visitors, .world-wonders { position: absolute; inset: 0; overflow: visible; }
.world-garden { opacity: calc(.25 + var(--land-ground-brightness) * .75); }
.world-garden-patch {
    position: absolute;
    width: clamp(58px, 10vmin, 112px);
    height: clamp(62px, 11vmin, 116px);
    bottom: clamp(30px, 4.8vh, 54px);
    overflow: visible;
    transform: translateX(-50%);
    transform-box: border-box;
    transform-origin: 50% 90%;
    will-change: transform;
    animation: world-plant-sway calc(var(--land-sway-duration) * .8) ease-in-out infinite;
    animation-delay: var(--patch-delay);
}
.world-garden-patch:nth-child(even) { bottom: clamp(40px, 6.2vh, 68px); }
.world-plant-stems { fill: none; stroke: var(--world-stem); stroke-width: 2; stroke-linecap: round; }
.world-plant-leaves { fill: var(--world-grass); stroke: var(--world-stem); stroke-width: .6; }
.world-plant-flowers { fill: var(--world-petal); stroke: color-mix(in srgb, var(--world-petal) 80%, #7d3e51); stroke-width: .7; }
.world-plant-centres { fill: var(--world-gold); }
.world-plant-shadow { fill: var(--world-shadow); opacity: .12; }
#seasonalLandscape[data-season="summer"] { --world-petal: #ffe2a7; --world-grass: #5b923f; }
#seasonalLandscape[data-season="autumn"] { --world-petal: #db7950; --world-grass: #b09148; --world-stem: #795f3a; --world-gold: #ffe0a2; }
#seasonalLandscape[data-season="winter"] { --world-petal: #c6c9b2; --world-grass: #83958a; --world-stem: #566e63; --world-gold: #d9c9a5; }
#seasonalLandscape[data-phase="sleep"] .world-garden,
#seasonalLandscape[data-phase="sleep"] .world-meadow-light,
#seasonalLandscape[data-phase="sleep"] .world-ground-lines,
#seasonalLandscape[data-phase="sleep"] .world-bark-lines { display: none; }
#seasonalLandscape[data-phase="sleep"] { --world-weather-shade: 0%; --world-warmth: 0%; }
#seasonalLandscape[data-phase="sleep"] .landscape-trunk { fill: var(--land-trunk-color); }
#seasonalLandscape[data-phase="sleep"] .landscape-foliage { fill: var(--land-foliage-primary); }
#seasonalLandscape[data-phase="sleep"] #landscapeMidLayer > .landscape-shape { fill: var(--land-mid-color); }
#seasonalLandscape[data-phase="sleep"] #landscapeNearLayer > .landscape-shape { fill: var(--land-ground-color); }
.world-ripple { fill: none; stroke: #d4eef1; stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; animation: world-ripple 5s ease-out infinite; }
#seasonalLandscape .landscape-mist { animation: world-mist 24s ease-in-out infinite alternate; }
#seasonalLandscape .landscape-mist:nth-child(2) { animation-delay: -12s; animation-direction: alternate-reverse; }
#seasonalLandscape .landscape-snow-cap { animation: world-snow-settle 18s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom; }
.world-falling-detail { fill: var(--world-petal); opacity: 0; animation: world-petal-drift var(--fall-duration, 18s) ease-in-out infinite; animation-delay: var(--fall-delay, -6s); transform-box: fill-box; transform-origin: center; }
#seasonalLandscape[data-season="autumn"] .world-falling-detail { fill: var(--land-fallen-leaf-a); animation-name: world-leaf-fall; }
.world-actor {
    position: absolute;
    width: clamp(42px, 6.5vmin, 72px);
    height: clamp(42px, 6.5vmin, 72px);
    bottom: clamp(48px, 7.5vh, 84px);
    --story-duration: 22s;
    --story-delay: 0s;
    --world-travel: clamp(35px, 7vw, 110px);
    --world-rise: clamp(24px, 5vh, 55px);
    animation: world-story-life var(--story-duration) linear var(--story-delay) both;
    transform: translateX(-50%);
}
.world-actor > svg { width: 100%; height: 100%; overflow: visible; }
.world-actor-art { stroke: #394c42; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.world-actor-flight { animation: world-flower-visit var(--story-duration) ease-in-out var(--story-delay) both; }
.world-wing { transform-box: fill-box; transform-origin: 100% 75%; animation: world-wingbeat .55s ease-in-out infinite alternate; }
.world-wing-right { transform-origin: 0% 75%; animation-delay: -.2s; }
.world-actor[data-visitor="bee"] .world-wing { animation-duration: .16s; }
.world-actor[data-visitor="butterfly"] .world-wing { animation: world-butterfly-wing var(--story-duration) ease-in-out var(--story-delay) both; }
.world-actor[data-companion] .world-wing > path:first-child { fill: #a2ccd0; }
.world-actor[data-visitor="ladybird"] { width: clamp(26px, 4vmin, 44px); height: clamp(26px, 4vmin, 44px); }
.world-actor-climb { animation: world-stem-climb var(--story-duration) ease-in-out var(--story-delay) both; }
.world-actor-hop { animation: world-bird-visit var(--story-duration) ease-in-out var(--story-delay) both; }
.world-actor-creep { animation: world-snail-visit var(--story-duration) linear var(--story-delay) both; }
.world-antenna { transform-origin: 48px 33px; animation: world-antenna 3s ease-in-out infinite; }
.world-bird-head { transform-origin: 42px 39px; animation: world-bird-look 5s ease-in-out infinite; }
.world-bird-tail { transform-origin: 23px 46px; animation: world-tail-flick 4s ease-in-out infinite; }
.world-eye-glint { fill: #fff7db; stroke: none; }
.world-wonder {
    position: absolute;
    right: 3%; bottom: 16%; width: min(76vw, 950px); height: 190%; overflow: visible;
    animation: world-wonder-life var(--story-duration, 28s) ease-in-out var(--story-delay, 0s) both;
}
.world-rainbow { fill: none; stroke-width: 12; stroke-linecap: round; opacity: .46; }
.world-wonder[data-wonder="petal-shower"], .world-wonder[data-wonder="leaf-spiral"] { right: auto; left: 3%; bottom: 24%; width: 40%; height: 120%; }
.world-wonder-particle { fill: var(--world-petal); transform-box: fill-box; transform-origin: center; animation: world-wonder-petal 9s ease-in-out infinite; animation-delay: var(--particle-delay); }
[data-wonder="leaf-spiral"] .world-wonder-particle { fill: var(--land-fallen-leaf-a); animation-name: world-wonder-leaf; }
[data-wonder="leaf-spiral"] .world-wonder-particle:nth-child(even) { fill: var(--land-fallen-leaf-b); }
#seasonalLandscape[data-wonder="petal-shower"] .world-falling-detail,
#seasonalLandscape[data-wonder="petal-shower"] .landscape-wind-leaf,
#seasonalLandscape[data-wonder="leaf-spiral"] .world-falling-detail,
#seasonalLandscape[data-wonder="leaf-spiral"] .landscape-wind-leaf { visibility: hidden; animation-play-state: paused !important; }
.world-nest-twig { fill: none; stroke: #9e724b; stroke-width: 1.1; stroke-linecap: round; }
.world-nest-food { fill: #cf6454; stroke: #824738; stroke-width: .6; }
.world-practice-wing { fill: #d69c51; stroke: #95683e; stroke-width: .8; transform-box: fill-box; transform-origin: right center; }
#seasonalLandscape[data-encounter="feeding"] .landscape-nest-mother { animation: world-nest-feed 3.4s ease-in-out infinite; transform-origin: 193px 90px; }
#seasonalLandscape[data-encounter="twig-delivery"] .world-nest-twig { animation: world-twig-place 4s ease-in-out infinite; }
#seasonalLandscape[data-encounter="wing-practice"] .world-practice-wing { animation: world-practice .7s ease-in-out infinite alternate; }
#seasonalLandscape .landscape-journey-event { width: clamp(28px, 4.6vmin, 46px); height: clamp(30px, 5vmin, 50px); filter: drop-shadow(0 2px 1px #233b3329); }
.landscape-journey-event svg { width: 100%; height: 100%; overflow: visible; }
#seasonalLandscape[data-motion="paused"] *,
#seasonalLandscape.landscape-hidden * { animation-play-state: paused !important; }
#seasonalLandscape[data-motion="running"] .world-garden-patch,
#seasonalLandscape[data-motion="running"] .world-falling-detail { animation-play-state: running; }

@keyframes world-crown-breathe { 0%,100% { transform: rotate(-.5deg) translateY(0); } 50% { transform: rotate(.6deg) translateY(-1px); } }
@keyframes world-shrub-sway { 0%,100% { transform: skewX(-1deg); } 50% { transform: skewX(1.5deg); } }
@keyframes world-plant-sway { 0%,100% { transform: translateX(-50%) skewX(-2deg) rotate(calc(var(--land-sway-start) * 1.5)); } 50% { transform: translateX(-50%) skewX(2deg) rotate(calc(var(--land-sway-end) * 1.5)); } }
@keyframes world-ripple { 0%,35% { transform: scale(.15); opacity: 0; } 42% { opacity: .65; } 85%,100% { transform: scale(1.3); opacity: 0; } }
@keyframes world-mist { from { transform: translateX(-18px); } to { transform: translateX(22px); } }
@keyframes world-snow-settle { 0%,80%,100% { transform: scaleY(1); } 90% { transform: translateY(1px) scaleY(.93); } }
@keyframes world-petal-drift { 0%,12% { transform: translate(0,0) rotate(0); opacity: 0; } 20% { opacity: .85; } 42% { transform: translate(30px,20px) rotate(85deg); } 70% { opacity: .8; transform: translate(12px,68px) rotate(160deg); } 88%,100% { transform: translate(55px,110px) rotate(240deg); opacity: 0; } }
@keyframes world-leaf-fall { 0%,15% { transform: translate(0,0) rotate(-15deg); opacity: 0; } 22% { opacity: 1; } 45% { transform: translate(34px,34px) rotate(90deg); } 70% { transform: translate(14px,92px) rotate(180deg); opacity: 1; } 84%,100% { transform: translate(60px,105px) rotate(200deg); opacity: 0; } }
@keyframes world-story-life { 0% { opacity: 0; } 8%,86% { opacity: 1; } 100% { opacity: 0; } }
@keyframes world-flower-visit { 0% { transform: translate(calc(-1 * var(--world-travel)), calc(-1 * var(--world-rise))) rotate(-12deg); } 20% { transform: translate(-15px,-18px) rotate(8deg); } 36%,65% { transform: translate(0,0) rotate(-4deg); } 73% { transform: translate(10px,-18px) rotate(10deg); } 100% { transform: translate(var(--world-travel), calc(-1.5 * var(--world-rise))) rotate(-8deg); } }
@keyframes world-wingbeat { from { transform: scaleX(1) rotate(-7deg); } to { transform: scaleX(.45) rotate(12deg); } }
@keyframes world-butterfly-wing { 0%,4%,8%,12%,16%,20%,24%,28%,32%,70%,74%,78%,82%,86%,90%,94%,98% { transform: scaleX(.4); } 2%,6%,10%,14%,18%,22%,26%,30%,36%,48%,62%,72%,76%,80%,84%,88%,92%,96%,100% { transform: scaleX(1); } 42%,55%,67% { transform: scaleX(.8); } }
@keyframes world-stem-climb { 0% { transform: translate(-10px,36px) rotate(-20deg); } 30% { transform: translate(-4px,10px) rotate(5deg); } 48%,66% { transform: translate(0,-5px) rotate(12deg); } 80% { transform: translate(7px,12px) rotate(30deg); } 100% { transform: translate(14px,35px) rotate(55deg); } }
@keyframes world-bird-visit { 0% { transform: translate(-60px,8px); } 12% { transform: translate(-45px,-6px) rotate(-8deg); } 24% { transform: translate(-30px,8px); } 35% { transform: translate(-14px,-6px) rotate(-6deg); } 44%,70% { transform: translate(0,8px); } 80% { transform: translate(18px,-8px) rotate(-8deg); } 88% { transform: translate(35px,8px); } 100% { transform: translate(65px,-10px) rotate(-5deg); } }
@keyframes world-snail-visit { 0% { transform: translate(-38px,14px); } 36%,55% { transform: translate(-5px,14px); } 100% { transform: translate(40px,14px); } }
@keyframes world-antenna { 0%,70%,100% { transform: rotate(0); } 80% { transform: rotate(-6deg); } 90% { transform: rotate(5deg); } }
@keyframes world-bird-look { 0%,45%,100% { transform: rotate(0); } 55%,68% { transform: rotate(13deg); } 80% { transform: rotate(-7deg); } }
@keyframes world-tail-flick { 0%,60%,100% { transform: rotate(0); } 70%,86% { transform: rotate(9deg); } 78% { transform: rotate(-5deg); } }
@keyframes world-wonder-life { 0%,100% { opacity: 0; } 18%,75% { opacity: 1; } }
@keyframes world-wonder-petal { 0% { transform: translate(-12px,-40px) rotate(0); opacity: 0; } 18%,70% { opacity: .9; } 45% { transform: translate(34px,35px) rotate(100deg); } 100% { transform: translate(5px,130px) rotate(230deg); opacity: 0; } }
@keyframes world-wonder-leaf { 0% { transform: translate(-30px,110px) rotate(-45deg); opacity: 0; } 20%,75% { opacity: 1; } 40% { transform: translate(50px,15px) rotate(140deg); } 65% { transform: translate(0,-15px) rotate(280deg); } 100% { transform: translate(90px,100px) rotate(390deg); opacity: 0; } }
@keyframes world-nest-feed { 0%,65%,100% { transform: rotate(0); } 28%,42% { transform: rotate(-14deg) translate(-1px,2px); } }
@keyframes world-twig-place { 0%,75%,100% { transform: translate(0,0); } 35%,55% { transform: translate(0,8px) rotate(2deg); } }
@keyframes world-practice { from { transform: rotate(-15deg) scaleY(.85); } to { transform: rotate(20deg) scaleY(1.15); } }
@media (max-width: 600px) {
    #seasonalLandscape { height: clamp(165px, 26vh, 230px); }
    .world-garden-patch { width: 62px; height: 70px; }
    .world-garden-patch:nth-child(2) { display: none; }
    .world-actor { --world-travel: 35px; --world-rise: 30px; }
    .world-wonder { width: 94vw; right: 3%; height: 130%; }
}
@media (prefers-reduced-motion: reduce) {
    #seasonalLandscape *, #seasonalLandscape { animation: none !important; transition: none !important; animation-play-state: paused !important; }
    .world-falling-detail, .world-ripple, .world-wonder-particle { display: none; }
    .world-actor, .world-wonder { opacity: 1; }
    .world-actor-flight, .world-actor-hop, .world-actor-climb, .world-actor-creep { transform: none; }
}