/* Full-photo seasonal atmosphere behind the "Green escapes" title and pill: the Discover mood tile and the
   onward tile on the walk landing pages. Keyframes live here so both pages get the same motion. */
body.v2 #mood-green>.green-season-fx,.wf-mood>.green-season-fx{position:absolute;right:0;bottom:auto;z-index:1;margin:0;padding:0;overflow:hidden;pointer-events:none;user-select:none;font-size:0;line-height:0;text-shadow:none;contain:layout paint}
body.v2 #mood-green>.green-season-fx[hidden],.wf-mood>.green-season-fx[hidden]{display:none}
:is(#mood-green,.wf-mood,#home-green) .green-season-fx i{position:absolute;top:-12px;display:block;margin:0;padding:0;color:var(--green-colour);opacity:0;pointer-events:none;animation:greenSeasonFall 14s linear infinite;animation-play-state:paused}
:is(#mood-green,.wf-mood,#home-green) .green-season-fx svg{display:block;width:100%;height:100%;fill:currentColor;pointer-events:none}
:is(#mood-green,.wf-mood,#home-green) .green-season-fx.is-moving i{animation-play-state:running}
:is(#mood-green,.wf-mood,#home-green) .green-season-fx[data-season="summer"] i{top:auto;bottom:-12px;border-radius:50%;background:var(--green-colour);box-shadow:0 0 5px 1px #ffe8ad55;animation-name:greenSeasonRise}
@keyframes greenSeasonFall{0%{opacity:0;transform:translate3d(0,0,0) rotate(0)}18%,72%{opacity:var(--green-opacity)}100%{opacity:0;transform:translate3d(var(--green-drift),var(--green-travel),0) rotate(var(--green-turn))}}
@keyframes greenSeasonRise{0%{opacity:0;transform:translate3d(0,0,0)}20%,70%{opacity:var(--green-opacity)}100%{opacity:0;transform:translate3d(var(--green-drift),calc(-1 * var(--green-travel)),0)}}
@media(prefers-reduced-motion:reduce){body.v2 #mood-green>.green-season-fx,.wf-mood>.green-season-fx{display:none}:is(#mood-green,.wf-mood,#home-green) .green-season-fx i{animation:none!important}}

/* Autumn leaves and winter snow: the original tile motion. Snow falls the full height of the tile
   (--green-travel), so it also reaches the bottom of the taller tablet tiles. */
:is(#mood-green,.wf-mood,#home-green) .green-season-fx[data-season="autumn"] i{top:-32px;font:normal 22px/1 sans-serif;opacity:.95;filter:drop-shadow(0 2px 2px #00000059);animation-name:greenLeafFall}
:is(#mood-green,.wf-mood,#home-green) .green-season-fx[data-season="winter"] i{top:-12px;border-radius:50%;background:#fff;box-shadow:0 0 6px 1px #ffffffbf;opacity:var(--green-opacity);animation-name:greenSnowFall}
:is(#mood-green,.wf-mood,#home-green) .green-season-fx[data-season="spring"] i{top:-20px;filter:drop-shadow(0 1px 1px #5b243333)}
:is(#mood-green,.wf-mood,#home-green) .green-season-fx[data-season="summer"] i{box-shadow:0 0 8px 2px #ffe8ad99}
@keyframes greenLeafFall{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(14px,80px) rotate(90deg)}50%{transform:translate(-10px,160px) rotate(200deg)}75%{transform:translate(12px,240px) rotate(290deg)}100%{transform:translate(0,340px) rotate(380deg)}}
@keyframes greenSnowFall{0%{transform:translate(0,0)}25%{transform:translate(8px,calc(var(--green-travel,230px) * .25))}50%{transform:translate(-6px,calc(var(--green-travel,230px) * .5))}75%{transform:translate(7px,calc(var(--green-travel,230px) * .75))}100%{transform:translate(0,var(--green-travel,230px))}}

/* Season pill on the walk pages' tile, matching the Discover mood-tile pill. */
.wf-mood>.mood-pill{position:absolute;top:10px;left:10px;z-index:2;display:inline-flex;align-items:center;gap:5px;min-height:26px;padding:0 10px;border-radius:999px;background:#FFFBF2;color:#8E3818;font:800 11px/1 'DM Sans',system-ui,sans-serif;font-style:normal;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 3px 8px rgba(20,12,4,.35)}
.wf-mood>.mood-pill span{font:400 13px/1 'DM Sans',system-ui,sans-serif;letter-spacing:0;text-shadow:none}
.wf-mood>span:not(.green-season-fx){z-index:2}
