/* The garden's seasons (assets/seasons.js). Colours change by data-season on
   .ga-scene; the residents live in #gaSeason and show per season. */
.ga-svg stop, .ga-svg > ellipse, #gaTreeG > ellipse, #gaTreeG > path{transition:stop-color 1.1s,fill 1.1s,opacity .8s}
#gaSeason .sn{display:none}
[data-season="spring"] #gaSeason .sn-spring,[data-season="summer"] #gaSeason .sn-summer,[data-season="autumn"] #gaSeason .sn-autumn,[data-season="winter"] #gaSeason .sn-winter,[data-season="winter"] #gaSnowGround{display:block}
#gaSnowGround{display:none}

/* spring: a fresher, paler green, blossom on the tree, apples not yet */
[data-season="spring"] #gaSky stop:first-child{stop-color:#A9DDF7}
[data-season="spring"] #gaTreeG > ellipse{fill:#8ED57A}
[data-season="spring"] #gaTreeG > ellipse:nth-of-type(2){fill:#A5E08C}
[data-season="spring"] #gaCanopy{opacity:0}
[data-season="spring"] .ga-svg > ellipse{fill:#B9E8A2}

/* autumn: the leaves turn, the ground goes straw, the sky pales */
[data-season="autumn"] #gaSky stop:first-child{stop-color:#CFE6F5}
[data-season="autumn"] #gaSky stop:last-child{stop-color:#FFF1DC}
[data-season="autumn"] #gaTreeG > ellipse{fill:#E0A23B}
[data-season="autumn"] #gaTreeG > ellipse:nth-of-type(2){fill:#D9663A}
[data-season="autumn"] #gaTreeG > ellipse:nth-of-type(3){fill:#F0B429}
[data-season="autumn"] #gaTreeG > ellipse:nth-of-type(4){fill:#E8955A}
[data-season="autumn"] .ga-svg > ellipse{fill:#B8CF7E}
[data-season="autumn"] .ga-svg > ellipse:nth-of-type(2){fill:#A9C170}
[data-season="autumn"] #gaGrass stop:first-child{stop-color:#A9C97A}
[data-season="autumn"] #gaGrass stop:last-child{stop-color:#7FA85C}
.sn-leaf{animation:snFall var(--t,6s) linear infinite;animation-delay:calc(var(--d,0s) * -1)}
@keyframes snFall{0%{transform:translate(var(--x),0) rotate(0)}100%{transform:translate(calc(var(--x) + 8px),64px) rotate(300deg);opacity:.2}}
.sn-hedgehog{animation:snWaddle 3s ease-in-out infinite}
@keyframes snWaddle{0%,100%{transform:translate(46px,152px)}50%{transform:translate(50px,152px)}}

/* winter: a grey-white sky, snow, the tree bare, the water icy, the small creatures away */
[data-season="winter"] #gaSky stop:first-child{stop-color:#C9D6E2}
[data-season="winter"] #gaSky stop:last-child{stop-color:#F2F6FA}
[data-season="winter"] #gaTreeG > ellipse{opacity:0}
[data-season="winter"] #gaCanopy{opacity:0}
[data-season="winter"] #gaGrass stop:first-child{stop-color:#EEF4F8}
[data-season="winter"] #gaGrass stop:last-child{stop-color:#D6E2EC}
[data-season="winter"] #gaWater stop:first-child{stop-color:#CDE9F7}
[data-season="winter"] #gaWater stop:last-child{stop-color:#9CCBE6}
[data-season="winter"] #gaSun circle{fill:#FFE9A8}
.sn-flake{animation:snSnow var(--t,8s) linear infinite;animation-delay:calc(var(--d,0s) * -1)}
@keyframes snSnow{0%{transform:translate(0,0)}50%{transform:translate(4px,100px)}100%{transform:translate(-2px,204px);opacity:.3}}

/* spring: the swallow crosses the sky; summer: the gull */
.sn-swallow{animation:snSwoop 9s ease-in-out infinite}
@keyframes snSwoop{0%{transform:translate(-10px,34px)}50%{transform:translate(70px,18px)}100%{transform:translate(110px,40px)}}
.sn-gull{animation:snGull 12s ease-in-out infinite}
@keyframes snGull{0%,100%{transform:translate(60px,42px)}50%{transform:translate(76px,36px)}}
.sn-lamb{animation:snHop 2.2s ease-in-out infinite}
@keyframes snHop{0%,100%{transform:translate(62px,118px)}50%{transform:translate(62px,114px)}}

/* the sun spins when it turns the season; the wash between seasons */
.sn-spin{animation:snSpin .9s var(--spring)}
@keyframes snSpin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.25)}100%{transform:rotate(360deg) scale(1)}}
.sn-wash{position:absolute;inset:0;z-index:30;background:#fff;opacity:0;pointer-events:none;transition:opacity .4s}
.sn-wash.on{animation:snWash .9s ease-in-out forwards}
@keyframes snWash{0%{opacity:0}40%{opacity:.85}100%{opacity:0}}