/* A fixed view of a changing year, on the brand’s warm paper. */
.year-wonder {
  --wonder-accent:var(--maroon);
  --wind-from:-.45deg; --wind-to:.65deg; --wind-speed:5.5s;
  position:relative; isolation:isolate; overflow-anchor:none; overflow:clip;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:100svh; padding:clamp(48px,7svh,84px) 24px 40px; gap:20px;
  background:var(--cream); color:var(--olive); border-bottom:1px solid var(--line);
  transition:background-color 2s ease,color 2s ease,border-color 2s ease;
}
.year-wonder::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 50% 72%,#a8945b16 0,transparent 63%); opacity:0; transition:opacity 2s ease; }
.year-wonder[data-time="night"] { background:#252e29; color:#f6f2e9; border-bottom-color:#495248; }
.year-wonder[data-time="night"]::before { opacity:1; }
.wonder-heading { position:relative; z-index:1; text-align:center; flex-shrink:0; }
.year-wonder h2 { font:400 clamp(54px,5.7vw,88px)/1.06 var(--serif); color:var(--olive); letter-spacing:-.025em; margin:0; max-width:none; scroll-margin-top:36px; }
.year-wonder h2,.year-wonder h2 em,.wonder-caption,.wonder-cta { transition:color 2s ease,border-color 2s ease; }
.year-wonder[data-time="night"] h2,.year-wonder[data-time="night"] .wonder-caption,.year-wonder[data-time="night"] .wonder-cta { color:#f6f2e9; }
.year-wonder[data-time="night"] h2 em { color:#dbc39d; }
.year-wonder[data-time="night"] .wonder-cta { border-color:#92987c; }
.year-wonder[data-time="night"] a:focus-visible { outline-color:#dbc39d; }
.year-wonder h2:focus { outline:none; }
.year-wonder h2 em { color:var(--wonder-accent); font-weight:400; white-space:nowrap; }
.wonder-theatre { position:relative; width:min(1200px,100%); height:clamp(320px,54svh,580px); flex-shrink:0; }
.wonder-stage { position:absolute; width:min(100%,calc(54svh * 1.935)); max-width:1160px; aspect-ratio:1200 / 620; left:50%; top:50%; transform:translate(-50%,-50%); }
.wonder-art,.wonder-art>svg { display:block; width:100%; height:100%; }
.wonder-art>svg { overflow:visible; }
.wonder-theatre noscript img { height:100%; width:100%; object-fit:contain; }
.wonder-season { opacity:0; visibility:hidden; transition:opacity 1s ease,visibility 1s; pointer-events:none; }
.wonder-season.is-current { opacity:1; visibility:visible; }
.wonder-season:not(.is-current) * { animation-play-state:paused!important; }
.wonder-season>* { transform-box:fill-box; transform-origin:center bottom; }
.wonder-footer { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:16px; flex-shrink:0; text-align:center; width:100%; }
.wonder-caption { font:italic clamp(24px,2.2vw,32px)/1.2 var(--serif); color:var(--olive); min-height:1.2em; margin:0; }
.wonder-cta { display:inline-flex; align-items:center; gap:24px; min-height:44px; font:400 13px/1.4 var(--sans); color:var(--olive); border-bottom:1px solid #a9ad99; }
.wonder-cta span { font-size:19px; transition:transform .2s; }
.wonder-cta:hover span { transform:translate(2px,-2px); }
.year-wonder a:focus-visible { outline:2px solid var(--wonder-accent); outline-offset:5px; }
.wonder-cloud{animation:wonder-cloud-drift 12s ease-in-out infinite alternate}
.wonder-bird{animation:wonder-bird-glide 18s ease-in-out infinite alternate}
.wonder-bird-wing-left,.wonder-bird-wing-right{transform-box:fill-box;animation:wonder-bird-wing 1.3s ease-in-out infinite alternate}
.wonder-bird-wing-left{transform-origin:right bottom}
.wonder-bird-wing-right{transform-origin:left bottom;animation-direction:alternate-reverse}
.wonder-birds>g:nth-child(2) .wonder-bird{animation-delay:-7s;animation-direction:alternate-reverse}
.wonder-birds>g:nth-child(2) path{animation-delay:-.5s}
.wonder-lantern-glow{animation:wonder-glow 3.8s ease-in-out infinite alternate}
.wonder-theatre:has(noscript img) .wonder-art{display:none}
@keyframes wonder-cloud-drift{from{translate:-10px 0}to{translate:15px 0}}
@keyframes wonder-bird-glide{0%{translate:-22px 5px}50%{translate:6px -6px}100%{translate:40px -2px}}
@keyframes wonder-bird-wing{from{rotate:-9deg}to{rotate:11deg}}
/* Each season has its own motion, carried by nested groups to preserve SVG positioning. */
.wonder-foliage{transform-box:fill-box;transform-origin:center bottom;animation:wonder-breeze var(--wind-speed) ease-in-out infinite alternate}
.wonder-foliage:nth-child(2n){animation-delay:-2s;animation-direction:alternate-reverse}
.wonder-butterfly{animation:wonder-flight-near 5.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.wonder-butterfly-far{animation-name:wonder-flight-far;animation-duration:7.3s;animation-delay:-2.1s}
.wonder-butterfly-far .wonder-wing{animation-duration:.23s;animation-delay:-.15s}
.wonder-wing-left{transform-origin:right center!important}
.wonder-wing-right{transform-origin:left center!important;animation-delay:-.1s}
.wonder-wing{transform-box:fill-box;transform-origin:center;animation:wonder-flap .29s ease-in-out infinite alternate}
.wonder-leaf{animation:wonder-leaf-fall 6.5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.wonder-leaf:nth-child(2n){animation-delay:-3.2s}
.wonder-snow{animation:wonder-snowfall var(--snow-duration,6s) linear infinite;transform-box:fill-box;transform-origin:center}
.wonder-snow:nth-child(3n){animation-delay:-2s}.wonder-snow:nth-child(3n+1){animation-delay:-3.6s}
.wonder-twinkle{animation:wonder-glow 2.8s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
.wonder-twinkle:nth-child(3n){animation-delay:-1.7s}.wonder-twinkle:nth-child(3n+1){animation-delay:-.8s}
.wonder-sun{transform-box:fill-box;transform-origin:center;animation:wonder-sunshine 7s ease-in-out infinite alternate}
.wonder-bee{animation:wonder-bee-drift 5s ease-in-out infinite}
.wonder-ribbon{transform-box:fill-box;transform-origin:center top;animation:wonder-ribbon 3s ease-in-out infinite alternate}
.wonder-installed-light{animation:wonder-installed-shimmer 2.7s ease-in-out infinite;animation-delay:var(--wonder-delay,0s)}
.wonder-light-halo{animation:wonder-halo-breathe 2.7s ease-in-out infinite;animation-delay:var(--wonder-delay,0s);transform-box:fill-box;transform-origin:center}
.wonder-dusk-sky,.wonder-night-detail,.wonder-day-detail,.wonder-night-light,.wonder-built-world,.wonder-trees,.wonder-cloud,.wonder-garden-haze,.wonder-ground,.wonder-walkway,.wonder-walkway>path{transition:opacity 2s ease,filter 2s ease,fill 2s ease,stroke 2s ease,translate 2s ease}
.year-wonder[data-time="day"] .wonder-dusk-sky{opacity:.08}
.year-wonder[data-time="day"] .wonder-night-detail{opacity:0}
.year-wonder[data-time="day"] .wonder-night-light{opacity:.06!important}
.year-wonder[data-time="night"] .wonder-dusk-sky,.year-wonder[data-time="night"] .wonder-night-detail,.year-wonder[data-time="night"] .wonder-night-light{opacity:1}
.year-wonder[data-time="night"] .wonder-day-detail{opacity:0}
.year-wonder[data-time="night"] .wonder-built-world{filter:brightness(.67) saturate(.82)}
.year-wonder[data-time="night"] .wonder-trees{filter:brightness(.55) saturate(.82)}
.year-wonder[data-time="night"] .wonder-ground{filter:brightness(.55) saturate(.85)}
.year-wonder[data-time="night"] .wonder-walkway>path:first-child{fill:#898971}
.year-wonder[data-time="night"] .wonder-walkway>path:last-child{stroke:#74745e}
.year-wonder[data-time="night"] .wonder-garden-haze{opacity:.06}
.year-wonder[data-time="night"] .wonder-cloud{opacity:.1}
.year-wonder[data-time="day"] .wonder-day-detail{opacity:1}
.wonder-world-evening .wonder-night-detail{translate:0 12px}
.year-wonder[data-time="night"] .wonder-world-evening .wonder-night-detail{translate:0 0}
.year-wonder[data-finale="false"] .wonder-dog-firefly{opacity:0}
.wonder-birds,.wonder-bee{transition:opacity 1s ease}
.year-wonder[data-time="night"] .wonder-birds,.year-wonder[data-time="night"] .wonder-bee{opacity:0}
.year-wonder[data-time="night"] .wonder-snow{stroke:#e6eadb}
.wonder-window-spill{animation:wonder-window-breathe 3.4s ease-in-out infinite alternate}
.wonder-bulb-glint{animation:wonder-bulb-glimmer 3.1s ease-in-out infinite;animation-delay:var(--wonder-delay,0s);transform-box:fill-box;transform-origin:center}
@keyframes wonder-window-breathe{from{opacity:.65}to{opacity:1}}
@keyframes wonder-bulb-glimmer{0%,50%,100%{opacity:0;scale:.4}64%,69%{opacity:.9;scale:1.15}82%{opacity:0;scale:.6}}
.wonder-firefly{animation:wonder-firefly-drift 6s ease-in-out infinite;animation-delay:var(--wonder-delay,0s)}
.wonder-snail-head{animation:wonder-snail-peek 9s ease-in-out infinite}
.wonder-is-paused .wonder-art *{animation-play-state:paused!important}
@keyframes wonder-snail-peek{0%,25%,100%{translate:-1px 0}55%,75%{translate:1.5px -.5px}}
@keyframes wonder-installed-shimmer{0%,100%{opacity:.72}48%{opacity:1}66%{opacity:.9}}
@keyframes wonder-halo-breathe{0%,100%{opacity:.6;scale:.9}50%{opacity:1;scale:1.28}}
@keyframes wonder-firefly-drift{0%,100%{translate:0 0;opacity:.2}35%{translate:7px -9px;opacity:.9}70%{translate:-4px -16px;opacity:.4}}
@keyframes wonder-breeze{from{rotate:var(--wind-from)}to{rotate:var(--wind-to)}}
@keyframes wonder-flight-near{0%,100%{translate:0 0;rotate:-9deg}18%{translate:-9px -14px;rotate:12deg}42%{translate:18px -31px;rotate:23deg}63%{translate:42px -15px;rotate:-16deg}82%{translate:22px 4px;rotate:-27deg}}
@keyframes wonder-flight-far{0%,100%{translate:0 0;rotate:15deg}24%{translate:-21px 5px;rotate:-21deg}48%{translate:-34px -18px;rotate:-8deg}72%{translate:-13px -39px;rotate:24deg}88%{translate:9px -20px;rotate:6deg}}
@keyframes wonder-flap{from{scale:1 1}to{scale:.25 1}}
@keyframes wonder-leaf-fall{0%{translate:0 -20px;rotate:-15deg;opacity:0}12%{opacity:1}40%{translate:38px 60px;rotate:45deg}72%{translate:-6px 150px;rotate:110deg;opacity:1}95%,100%{translate:18px 185px;rotate:160deg;opacity:0}}
@keyframes wonder-snowfall{0%{translate:-8px -30px;opacity:0}12%{opacity:.85}82%{opacity:.8}100%{translate:24px 180px;opacity:0}}
@keyframes wonder-glow{from{opacity:.45;scale:.88}to{opacity:1;scale:1.1}}
@keyframes wonder-sunshine{from{rotate:-7deg;scale:.97}to{rotate:7deg;scale:1.04}}
@keyframes wonder-bee-drift{0%,100%{translate:0 0}30%{translate:-18px -12px}70%{translate:12px -20px}}
@keyframes wonder-ribbon{from{rotate:-3deg}to{rotate:4deg}}


/* The same garden, weathered by the year. Sky and ground remain distinct. */
.wonder-sound{position:absolute;top:18px;right:24px;z-index:3;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:8px 6px;border:0;background:none;color:inherit;font:400 12px/1.4 var(--sans);cursor:pointer;opacity:.8}
.wonder-sound[hidden]{display:none!important}.wonder-sound:hover{opacity:1}.wonder-sound:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.wonder-sound-waves{display:none}.wonder-sound[aria-pressed="true"] .wonder-sound-waves{display:block}.wonder-sound[aria-pressed="true"] .wonder-sound-muted{display:none}
.wonder-weather-sky,.wonder-blue-sky,.wonder-rain-sky,.wonder-sky-sun,.wonder-rain,.wonder-garden-beds,.wonder-lawn,.wonder-bed-soil{transition:opacity 2s ease,fill 2s ease,filter 2s ease}
.wonder-blue-sky{opacity:.85}.wonder-rain-sky{opacity:0}.wonder-lightning{opacity:0}
.year-wonder[data-season="fall"] .wonder-blue-sky{opacity:.6}
.year-wonder[data-season="holiday"] .wonder-blue-sky{opacity:.35}
.year-wonder[data-time="night"] .wonder-weather-sky{opacity:0}
.year-wonder[data-weather="breeze"]{--wind-from:-1.1deg;--wind-to:1.5deg;--wind-speed:3.7s}
.year-wonder[data-weather="snow"]{--wind-from:-.65deg;--wind-to:1deg;--wind-speed:4.8s}
.year-wonder[data-weather="rain"]{--wind-from:-1.5deg;--wind-to:2deg;--wind-speed:2.7s}
.year-wonder[data-weather="storm"]{--wind-from:-2.5deg;--wind-to:3.2deg;--wind-speed:1.8s}
.year-wonder[data-weather="rain"] .wonder-rain,.year-wonder[data-weather="storm"] .wonder-rain{opacity:.55}
.year-wonder[data-weather="rain"] .wonder-rain-sky,.year-wonder[data-weather="storm"] .wonder-rain-sky{opacity:1}
.year-wonder[data-weather="rain"] .wonder-sky-sun,.year-wonder[data-weather="storm"] .wonder-sky-sun{opacity:0}
.year-wonder[data-weather="rain"] .wonder-butterfly,.year-wonder[data-weather="storm"] .wonder-butterfly{opacity:0}
.year-wonder[data-weather="storm"] .wonder-birds{opacity:0}
.year-wonder[data-weather="storm"] .wonder-lightning{animation:wonder-distant-lightning 2.2s .4s both}
.year-wonder[data-weather="storm"] .wonder-cloud{fill:#c9d0ca;animation-duration:4s}
.wonder-raindrop{animation:wonder-rainfall var(--rain-speed,1s) var(--rain-delay,0s) linear infinite}
.wonder-ripple{transform-box:fill-box;transform-origin:center;animation:wonder-ripple 1.8s var(--rain-delay,0s) ease-out infinite}
@keyframes wonder-rainfall{0%{translate:7px -20px;opacity:0}15%,75%{opacity:.7}100%{translate:-18px 74px;opacity:0}}
@keyframes wonder-ripple{0%{scale:.3;opacity:0}20%{opacity:.5}100%{scale:1.6;opacity:0}}
@keyframes wonder-distant-lightning{0%,100%{opacity:0}18%{opacity:0}30%{opacity:.55}54%{opacity:.3}75%{opacity:0}}
.year-wonder[data-season="fall"] .wonder-lawn{fill:#c9c9a7}
.year-wonder[data-season="holiday"] .wonder-lawn{fill:#e2e4d6}
.year-wonder[data-season="spring"] .wonder-lawn{fill:#c8d4b7}
.year-wonder[data-season="summer"] .wonder-lawn{fill:#b5c99f}
.year-wonder[data-season="holiday"] .wonder-bed-soil{fill:#d8d9c9}
.year-wonder[data-time="night"] .wonder-garden-beds{filter:brightness(.65) saturate(.8)}
.wonder-chimney-smoke{opacity:0;transition:opacity 2s ease}
.year-wonder[data-season="holiday"] .wonder-chimney-smoke,.year-wonder[data-season="fall"][data-time="night"] .wonder-chimney-smoke{opacity:.55}
.wonder-smoke-wisp{transform-box:fill-box;transform-origin:center bottom;animation:wonder-smoke 6s ease-out infinite}
.wonder-smoke-wisp:nth-child(2){animation-delay:-2s}.wonder-smoke-wisp:nth-child(3){animation-delay:-4s}
@keyframes wonder-smoke{0%{translate:0 8px;scale:.75;opacity:0}20%{opacity:.35}100%{translate:25px -35px;scale:1.4;opacity:0}}
.wonder-candle-flame{transform-box:fill-box;transform-origin:center bottom;animation:wonder-candle 2.3s ease-in-out infinite alternate}
.wonder-candle-halo{animation:wonder-window-breathe 3.7s ease-in-out infinite alternate}
@keyframes wonder-candle{from{scale:.9 1;rotate:-4deg;opacity:.75}to{scale:1 1.13;rotate:3deg;opacity:1}}
.wonder-tree-uplight{animation:none!important}
.wonder-tree-crown .wonder-foliage,.wonder-tree-canopy-light .wonder-foliage{animation-delay:-1.1s!important}
.wonder-tree-canopy-light[data-wonder-season="spring"].is-current{opacity:.3}
.wonder-tree-canopy-light:not([data-wonder-season="spring"]).is-current{opacity:.8}
.year-wonder[data-time="night"] .wonder-tree-twinkles{opacity:.65}

@media(min-width:1600px) {
  .wonder-theatre { width:1300px; height:600px; }
  .wonder-stage { width:1161px; max-width:none; }
}
@media(max-width:700px) {
  .year-wonder { padding:70px 20px 40px; gap:24px; }
  .wonder-sound{top:10px;right:18px;}
  .year-wonder h2 { font-size:clamp(46px,9.8vw,64px); max-width:500px; }
  .year-wonder h2 em { display:block; }
  .wonder-theatre { width:100vw; height:calc((100vw + 70px) * .517); max-height:385px; }
  .wonder-stage { width:calc(100vw + 70px); max-width:745px; }
  .wonder-footer { gap:16px; }
  .wonder-caption { font-size:clamp(24px,5.8vw,30px); max-width:310px; min-height:2.4em; display:grid; place-items:center; }
}
@media(prefers-reduced-motion:reduce) {
  .year-wonder,.year-wonder * { animation:none!important; transition:none!important; }
  .wonder-leaf,.wonder-snow { opacity:.7; }
  .wonder-rain,.wonder-chimney-smoke,.wonder-lightning { display:none; }
  .wonder-dog-travel { opacity:1; }
  .wonder-dog-leaf,.wonder-dog-snowflake,.wonder-dog-bark,.wonder-dog-firefly,.wonder-dog-droplets { display:none; }
}

/* Story headlines replace the small caption and keep a steady two-line frame. */
.wonder-heading{width:min(1100px,100%);min-height:2.2em}
.year-wonder h2{font-size:clamp(48px,5.3vw,80px);line-height:1.04;min-height:2.1em;letter-spacing:-.025em}
.year-wonder h2 span,.year-wonder h2 em{display:block;white-space:normal}
.wonder-footer{margin-top:0}
body:has(.year-wonder[data-playback="playing"]) .focus-preview-label{opacity:0}
@media(max-width:700px){.year-wonder{padding:72px 18px 35px;gap:28px}.year-wonder h2{font-size:clamp(35px,8.6vw,55px);min-height:2.15em}.wonder-theatre{height:calc((100vw + 50px) * .517)}.wonder-stage{width:calc(100vw + 50px)}}