/* Calcebra fox scene: the storybook fox (storyArt.js), rasterised into one
   bitmap per body part and animated here with transform/opacity only, so
   the compositor runs it. Walks the rail landscape's trail in the
   afternoon, keeps his morning routine and his evening camp by the tent.
   Lives inside #scenery (clipped with the landscape), over the left rail.
   Part transform origins are set inline in the fox's drawing units
   (400 x 560); scene positions are rail pixels (768 x 1376). Motion stops
   for the Motion setting, the Fox animation setting and reduced motion. */

#foxScene {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--scene-left, 186px);
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
    /* weatherFx.js sets --wind (0 still .. 1 gale) on #scenery: the gusts,
       the grass and the tail lean further in real wind. */
    --fs-wind-k: calc(1 + var(--wind, 0) * 1.6);
}

/* A box in rail pixels, scaled onto the rail by foxScene.js. */
#foxScene .fs-stage {
    position: absolute;
    left: 0;
    top: 0;
    width: 768px;
    height: 1376px;
    transform-origin: 0 0;
}

#foxScene .fs-at {
    position: absolute;
    width: 0;
    height: 0;
}

/* ------------------------------------------------------------- the fox */

#foxScene .fs-fox {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    will-change: transform, opacity;
    visibility: hidden;
}

#foxScene .fs-fox.fs-ready { visibility: visible; }

/* A board pop-up has borrowed him (CalcebraFoxScene.summon): fade away. */
#foxScene .fs-fox,
#foxScene .fs-stick-svg,
#foxScene .fs-mushroom-held { transition: opacity 0.6s ease; }
#foxScene.fs-away .fs-fox,
#foxScene.fs-away .fs-stick-svg,
#foxScene.fs-away .fs-mushroom-held { opacity: 0 !important; }

/* The mushroom by the path, and in his paw once picked. */
#foxScene .fs-mushroom,
#foxScene .fs-mushroom-held { position: absolute; left: 0; top: 0; width: 40px; height: 44px; transform-origin: 0 0; filter: var(--fs-grade, none); }
#foxScene .fs-mushroom svg,
#foxScene .fs-mushroom-held svg { width: 100%; height: 100%; display: block; overflow: visible; }

#foxScene .fs-fox-flip,
#foxScene .fs-bob,
#foxScene .fs-p,
#foxScene .fs-pa {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

#foxScene .fs-pc {
    width: 100%;
    height: 100%;
    display: block;
    /* The light's colour look sits on each bitmap (inside its moving box):
       a filter around animated boxes would take them off the compositor. */
    filter: var(--fs-grade, none);
}

#foxScene .fs-bob { transform-origin: 194px 518px; }

/* Blinks: the closed lids flash on for a moment every few seconds. */
#foxScene .fs-p-blink { opacity: 0; animation: fs-blink 5.3s steps(1, end) infinite; }
#foxScene .fs-act-yawn .fs-p-blink,
#foxScene .fs-act-rub .fs-p-blink,
#foxScene .fs-act-chew .fs-p-blink { animation: none; }

@keyframes fs-blink {
    0%, 93% { opacity: 0; }
    94%, 96% { opacity: 1; }
    97%, 100% { opacity: 0; }
}

/* ---------------------------------------------------------- the walk */

/* One stride (two steps) every 1.36 s: each foot lifts in turn, the body
   rises over the planted foot, the free arm swings, the bundle lags. */
#foxScene .fs-pose-walk .fs-bob { animation: fs-bob 0.9s ease-in-out infinite; }
#foxScene .fs-pose-walk .fs-p-leg-back > .fs-pa { animation: fs-step 1.8s ease-in-out infinite; }
#foxScene .fs-pose-walk .fs-p-leg-front > .fs-pa { animation: fs-step 1.8s ease-in-out -0.9s infinite; }
#foxScene .fs-pose-walk .fs-p-arm-back > .fs-pa { animation: fs-arm-swing 1.8s ease-in-out infinite; }
#foxScene .fs-pose-walk .fs-p-arm-front > .fs-pa,
#foxScene .fs-pose-walk .fs-p-held > .fs-pa { animation: fs-arm-swing 1.8s ease-in-out -0.9s infinite; }
#foxScene .fs-pose-walk .fs-p-head > .fs-pa,
#foxScene .fs-pose-walk .fs-p-blink > .fs-pa { animation: fs-nod 1.8s ease-in-out infinite; }
#foxScene .fs-pose-walk .fs-p-tail > .fs-pa { animation: fs-tail-step 1.8s ease-in-out infinite; }

@keyframes fs-bob {
    0%, 100% { transform: translateY(2px); }
    50% { transform: translateY(-5px); }
}

@keyframes fs-step {
    0% { transform: translate(0, 0); }
    18% { transform: translate(1px, -15px); }
    32% { transform: translate(1px, -9px); }
    50%, 100% { transform: translate(0, 0); }
}

@keyframes fs-arm-swing {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}

@keyframes fs-nod {
    0%, 100% { transform: rotate(-1deg); }
    50% { transform: rotate(1deg); }
}

@keyframes fs-tail-step {
    0%, 100% { transform: rotate(-2.5deg); }
    50% { transform: rotate(2.5deg); }
}

/* Stops on the walk: looking around, or the mushroom. */
#foxScene .fs-act-look .fs-p-head > .fs-pa,
#foxScene .fs-act-look .fs-p-blink > .fs-pa { animation: fs-look 9s ease-in-out infinite; }
#foxScene .fs-act-pick .fs-p-arm-front > .fs-pa { animation: fs-pick 1.2s ease-in-out infinite; }
#foxScene .fs-act-inspect .fs-p-head > .fs-pa,
#foxScene .fs-act-inspect .fs-p-blink > .fs-pa { animation: fs-sniff 1.6s ease-in-out infinite; }
#foxScene .fs-act-pocket .fs-p-arm-front > .fs-pa { animation: fs-tug 1.2s ease-in-out infinite; }

@keyframes fs-look {
    0%, 100% { transform: rotate(0deg) translateX(0); }
    20%, 38% { transform: rotate(-4deg) translateX(-3px); }
    55%, 75% { transform: rotate(4deg) translateX(3px); }
}

@keyframes fs-pick {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(14deg); }
}

@keyframes fs-sniff {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    30% { transform: rotate(5deg) translateY(4px); }
    45% { transform: rotate(4deg) translateY(3px); }
}

/* --------------------------------------------- standing, sitting, idling */

#foxScene .fs-act-idle .fs-p-torso > .fs-pa,
#foxScene .fs-act-roast .fs-p-torso > .fs-pa,
#foxScene .fs-act-pause .fs-p-torso > .fs-pa,
#foxScene .fs-act-fiddle .fs-p-torso > .fs-pa { animation: fs-breathe 4.6s ease-in-out infinite; }
#foxScene .fs-act-idle .fs-p-head > .fs-pa,
#foxScene .fs-act-idle .fs-p-blink > .fs-pa,
#foxScene .fs-act-roast .fs-p-head > .fs-pa,
#foxScene .fs-act-roast .fs-p-blink > .fs-pa,
#foxScene .fs-act-pause .fs-p-head > .fs-pa,
#foxScene .fs-act-pause .fs-p-blink > .fs-pa { animation: fs-head-breathe 4.6s ease-in-out infinite; }
#foxScene .fs-act-idle .fs-p-tail > .fs-pa { animation: fs-tail-idle 6.2s ease-in-out infinite; }

@keyframes fs-breathe {
    0%, 100% { transform: scale(1, 1); }
    45% { transform: scale(1.01, 1.018); }
}

@keyframes fs-head-breathe {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    45% { transform: translateY(-2px) rotate(-0.8deg); }
}

@keyframes fs-tail-idle {
    0%, 100% { transform: rotate(-1.5deg); }
    50% { transform: rotate(4deg); }
}

/* ------------------------------------------------- the morning routine */

/* Waking: a long yawn with his head back, rubbing an eye, a big stretch. */
#foxScene .fs-act-yawn .fs-p-head > .fs-pa,
#foxScene .fs-act-yawn .fs-p-blink > .fs-pa { animation: fs-yawn 5s ease-in-out infinite; }
#foxScene .fs-act-rub .fs-p-hand-front > .fs-pa { animation: fs-rub 0.55s ease-in-out infinite; }
#foxScene .fs-act-rub .fs-p-head > .fs-pa,
#foxScene .fs-act-rub .fs-p-blink > .fs-pa { animation: fs-head-breathe 3s ease-in-out infinite; }
#foxScene .fs-act-stretch .fs-bob { animation: fs-stretch 4s ease-in-out infinite; }
#foxScene .fs-act-stretch .fs-p-arm-front > .fs-pa { animation: fs-reach-l 4s ease-in-out infinite; }
#foxScene .fs-act-stretch .fs-p-arm-back > .fs-pa { animation: fs-reach-r 4s ease-in-out infinite; }

@keyframes fs-yawn {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    40%, 70% { transform: rotate(-5deg) translateY(-4px); }
}

@keyframes fs-rub {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(3px, -2px); }
    50% { transform: translate(5px, 1px); }
    75% { transform: translate(2px, 2px); }
}

@keyframes fs-stretch {
    0%, 100% { transform: scale(1, 1); }
    45%, 65% { transform: scale(1.01, 1.035); }
}

@keyframes fs-reach-l {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-6deg); }
}

@keyframes fs-reach-r {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(6deg); }
}

/* The bucket shower: a shiver under the cold water, then drying off. */
#foxScene .fs-act-spray .fs-bob { animation: fs-shiver 0.22s linear infinite; }
#foxScene .fs-act-dry .fs-p-hand-front > .fs-pa { animation: fs-rub 0.4s ease-in-out infinite; }
#foxScene .fs-act-dry .fs-p-head > .fs-pa,
#foxScene .fs-act-dry .fs-p-blink > .fs-pa { animation: fs-shake 1.6s ease-in-out infinite; }

@keyframes fs-shiver {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-1.6px); }
    75% { transform: translateX(1.6px); }
}

@keyframes fs-shake {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(-3deg); }
    40% { transform: rotate(3deg); }
    60% { transform: rotate(-2deg); }
}

#foxScene .fs-drops,
#foxScene .fs-crumbs { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none; }
#foxScene .fs-spraying .fs-drops { display: block; }
#foxScene .fs-act-chew .fs-crumbs,
#foxScene .fs-act-bite .fs-crumbs { display: block; }

#foxScene .fs-drops i {
    position: absolute;
    top: 30px;
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: rgba(146, 192, 226, 0.85);
    animation: fs-drop 0.9s linear infinite;
    opacity: 0;
}

@keyframes fs-drop {
    0% { transform: translateY(0); opacity: 0; }
    10% { opacity: 0.9; }
    100% { transform: translateY(440px); opacity: 0.2; }
}

#foxScene .fs-crumbs i {
    position: absolute;
    top: 300px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #b98a48;
    animation: fs-crumb 2.6s ease-in infinite;
    opacity: 0;
}

@keyframes fs-crumb {
    0% { transform: translate(0, 0); opacity: 0; }
    8% { opacity: 1; }
    100% { transform: translate(6px, 190px); opacity: 0; }
}

/* Brushing: quick scrubs, a pause to glare. */
#foxScene .fs-act-scrub .fs-p-hand-front > .fs-pa { animation: fs-scrub 0.3s ease-in-out infinite; }
#foxScene .fs-act-scrub .fs-p-head > .fs-pa,
#foxScene .fs-act-scrub .fs-p-blink > .fs-pa { animation: fs-nod 0.6s ease-in-out infinite; }

@keyframes fs-scrub {
    0%, 100% { transform: translate(-3px, 1px); }
    50% { transform: translate(4px, -2px); }
}

/* Lunch: a bite, then slow chewing, pleased with himself. */
#foxScene .fs-act-bite .fs-p-hand-front > .fs-pa { animation: fs-bite 3s ease-in-out infinite; }
#foxScene .fs-act-chew .fs-p-head > .fs-pa,
#foxScene .fs-act-chew .fs-p-blink > .fs-pa { animation: fs-chew 0.55s ease-in-out infinite; }

@keyframes fs-bite {
    0%, 100% { transform: translate(0, 4px); }
    40%, 60% { transform: translate(2px, -3px); }
}

@keyframes fs-chew {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(1.5px) rotate(0.8deg); }
}

/* ------------------------------------------------------------ camp work */

#foxScene .fs-act-hammer .fs-p-arm-front > .fs-pa { animation: fs-hammer 1.15s ease-in infinite; }
#foxScene .fs-act-strike .fs-p-arm-front > .fs-pa { animation: fs-strike 1.7s ease-in-out infinite; }
#foxScene .fs-act-raise .fs-p-arm-front > .fs-pa { animation: fs-push-up 3.2s ease-in-out infinite; }
#foxScene .fs-act-pull .fs-p-arm-front > .fs-pa,
#foxScene .fs-act-feed .fs-p-arm-front > .fs-pa { animation: fs-tug 2.4s ease-in-out infinite; }
#foxScene .fs-act-fiddle .fs-p-arm-front > .fs-pa { animation: fs-fiddle 2.6s ease-in-out infinite; }
#foxScene .fs-act-blow .fs-p-head > .fs-pa,
#foxScene .fs-act-blow .fs-p-blink > .fs-pa { animation: fs-blow 2.4s ease-in-out infinite; }
#foxScene .fs-act-roast .fs-p-arm-front > .fs-pa { animation: fs-turn-stick 7s ease-in-out infinite; }

@keyframes fs-hammer {
    0%, 100% { transform: rotate(0deg); }
    55% { transform: rotate(-6deg); }
    80% { transform: rotate(34deg); }
    88% { transform: rotate(30deg); }
}

@keyframes fs-strike {
    0%, 60%, 100% { transform: rotate(0deg); }
    70% { transform: rotate(-9deg); }
    78% { transform: rotate(3deg); }
}

@keyframes fs-push-up {
    0%, 100% { transform: rotate(-22deg); }
    50% { transform: rotate(-30deg); }
}

@keyframes fs-tug {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-8deg); }
}

@keyframes fs-fiddle {
    0%, 100% { transform: rotate(0deg); }
    40% { transform: rotate(-6deg); }
    70% { transform: rotate(3deg); }
}

@keyframes fs-blow {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    40% { transform: translate(-3px, 4px) rotate(-4deg); }
}

@keyframes fs-turn-stick {
    0%, 100% { transform: rotate(0deg); }
    30% { transform: rotate(-2deg); }
    65% { transform: rotate(1.5deg); }
}

/* ------------------------------------------------------------ the camp */

#foxScene .fs-camp,
#foxScene .fs-zzz,
#foxScene .fs-leaves { display: none; }
#foxScene.fs-mode-camp .fs-camp,
#foxScene.fs-mode-sleep .fs-camp,
#foxScene.fs-mode-morning .fs-camp,
#foxScene.fs-mode-sleep .fs-zzz,
#foxScene.fs-season-autumn.fs-day .fs-leaves,
#foxScene.fs-season-spring.fs-day .fs-leaves { display: inline; }

#foxScene .fs-tent-art,
#foxScene .fs-fire-base,
#foxScene .fs-shower { position: absolute; filter: var(--fs-prop-grade, none); }
#foxScene .fs-tent-art svg,
#foxScene .fs-fire-base svg { width: 100%; height: 100%; display: block; overflow: visible; }
#foxScene .fs-shower { display: none; }
#foxScene .fs-shower.fs-on { display: block; }
#foxScene .fs-stick-svg { position: absolute; left: 0; top: 0; overflow: visible; }
#foxScene .fs-fx-defs { position: absolute; }

#foxScene .fs-sparks,
#foxScene .fs-embers { display: none; }
#foxScene .fs-sparking .fs-sparks,
#foxScene .fs-blazing .fs-embers { display: block; }

/* ---------------------------------------------------------- the wind */

/* One shared gust every 23 s (the delay is set from the clock so the
   grass and the tail lean together). */
#foxScene .fs-p-tail,
#foxScene .fs-gust-grass { animation-duration: 23s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: var(--fs-gust-delay, 0s); }
#foxScene .fs-p-tail { animation-name: fs-gust; }
#foxScene .fs-gust-grass { animation-name: fs-gust-grass; }

@keyframes fs-gust {
    0%, 52%, 100% { transform: rotate(0deg); }
    62% { transform: rotate(calc(5deg * var(--fs-wind-k, 1))); }
    68% { transform: rotate(calc(2.5deg * var(--fs-wind-k, 1))); }
    76% { transform: rotate(calc(6deg * var(--fs-wind-k, 1))); }
    88% { transform: rotate(calc(1deg * var(--fs-wind-k, 1))); }
}

@keyframes fs-gust-grass {
    0%, 52%, 100% { transform: rotate(0deg); }
    62% { transform: rotate(calc(6deg * var(--fs-wind-k, 1))); }
    68% { transform: rotate(calc(3deg * var(--fs-wind-k, 1))); }
    76% { transform: rotate(calc(7deg * var(--fs-wind-k, 1))); }
    88% { transform: rotate(calc(1.5deg * var(--fs-wind-k, 1))); }
}

#foxScene .fs-grass { position: absolute; left: 0; top: 0; width: 768px; height: 1376px; }
#foxScene .fs-gust-grass { position: absolute; }
#foxScene .fs-blades { position: absolute; inset: 0; }
#foxScene .fs-blades svg { display: block; overflow: visible; }
#foxScene .fs-blades path { stroke: #2b1d16; stroke-width: 0.9; stroke-opacity: 0.55; }
#foxScene .fs-sway-a { animation: fs-sway 4.3s ease-in-out infinite; }
#foxScene .fs-sway-b { animation: fs-sway 5.6s ease-in-out -2.1s infinite; }

@keyframes fs-sway {
    0%, 100% { transform: rotate(calc(-1.6deg * var(--fs-wind-k, 1))); }
    50% { transform: rotate(calc(2.2deg * var(--fs-wind-k, 1))); }
}

/* Blade colours from the landscape's foreground, per season and light. */
#foxScene .fs-b1 { fill: #8fa45e; }
#foxScene .fs-b2 { fill: #a2b36d; }
#foxScene .fs-b3 { fill: #b6c27f; }
#foxScene .fs-b4 { fill: #77904f; }
#foxScene.fs-season-autumn .fs-b1 { fill: #a6955a; }
#foxScene.fs-season-autumn .fs-b2 { fill: #b6a768; }
#foxScene.fs-season-autumn .fs-b3 { fill: #c6b277; }
#foxScene.fs-season-autumn .fs-b4 { fill: #92824c; }
#foxScene.fs-season-winter .fs-b1 { fill: #b7c0bc; }
#foxScene.fs-season-winter .fs-b2 { fill: #c6cdc9; }
#foxScene.fs-season-winter .fs-b3 { fill: #a9b3ae; }
#foxScene.fs-season-winter .fs-b4 { fill: #9aa5a0; }
#foxScene.fs-dusk .fs-blades svg { filter: brightness(0.8) saturate(0.85); }
#foxScene.fs-night .fs-blades svg { filter: brightness(0.42) saturate(0.6) hue-rotate(20deg); }

/* A leaf (autumn) or a petal (spring) now and then, drifting across. */
#foxScene .fs-leaf,
#foxScene .fs-leaf-spin,
#foxScene .fs-leaf-flip { position: absolute; left: 0; top: 0; width: 0; height: 0; }
#foxScene .fs-leaf svg { position: absolute; left: -5px; top: -5px; display: block; }
#foxScene .fs-leaf-body { fill: #d9822f; }
#foxScene .fs-leaf-b .fs-leaf-body { fill: #e6b23d; }
#foxScene.fs-season-spring .fs-leaf-body { fill: #f3cbd3; }
#foxScene.fs-season-spring .fs-leaf-b .fs-leaf-body { fill: #fbf3ee; }
#foxScene .fs-leaf-a { animation: fs-leaf-a 31s linear infinite; }
#foxScene .fs-leaf-b { animation: fs-leaf-b 43s linear -17s infinite; }
#foxScene .fs-leaf-spin { animation: fs-leaf-spin 2.9s linear infinite; }
#foxScene .fs-leaf-flip { animation: fs-leaf-flip 1.9s ease-in-out infinite; }

@keyframes fs-leaf-a {
    0% { transform: translate(170px, 860px); opacity: 0; }
    2% { opacity: 0.95; }
    9% { transform: translate(270px, 905px); }
    17% { transform: translate(370px, 890px); }
    26% { transform: translate(470px, 950px); }
    34% { transform: translate(590px, 990px); opacity: 0.95; }
    35%, 100% { transform: translate(590px, 990px); opacity: 0; }
}

@keyframes fs-leaf-b {
    0% { transform: translate(170px, 1010px); opacity: 0; }
    2% { opacity: 0.9; }
    8% { transform: translate(260px, 1060px); }
    15% { transform: translate(350px, 1045px); }
    22% { transform: translate(450px, 1120px); }
    29% { transform: translate(590px, 1170px); opacity: 0.9; }
    30%, 100% { transform: translate(590px, 1170px); opacity: 0; }
}

@keyframes fs-leaf-spin { to { transform: rotate(360deg); } }

/* Fallen leaves on the ground hop and skitter along in the shared gust
   (autumn only; spring has drifting petals instead). */
#foxScene .fs-skit { position: absolute; width: 0; height: 0; display: none; }
#foxScene.fs-season-autumn .fs-skit { display: block; }
#foxScene .fs-skit svg { position: absolute; left: -5px; top: -3px; display: block; }
#foxScene .fs-skit-hop { animation: fs-skit 23s ease-in-out infinite; animation-delay: var(--fs-gust-delay, 0s); }
#foxScene .fs-skit-b .fs-skit-hop { animation-delay: calc(var(--fs-gust-delay, 0s) - 0.4s); }
#foxScene .fs-skit-c .fs-skit-hop { animation-delay: calc(var(--fs-gust-delay, 0s) - 0.8s); }

@keyframes fs-skit {
    0%, 55% { transform: translate(0, 0) rotate(0deg); }
    60% { transform: translate(14px, -6px) rotate(140deg); }
    64% { transform: translate(26px, 0) rotate(250deg); }
    70% { transform: translate(40px, -3px) rotate(330deg); }
    76%, 90% { transform: translate(50px, 0) rotate(380deg); opacity: 1; }
    94% { transform: translate(50px, 0) rotate(380deg); opacity: 0; }
    95% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    100% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
}

@keyframes fs-leaf-flip {
    0%, 100% { transform: scale(1, 1); }
    50% { transform: scale(0.35, 1); }
}

/* ---------------------------------------------------------- the fire */

#foxScene .fs-flames { will-change: transform; }
#foxScene .fs-flame { position: absolute; }
#foxScene .fs-flame svg { width: 100%; height: 100%; display: block; overflow: visible; }
#foxScene .fs-smoke-puff svg { display: block; overflow: visible; }

#foxScene .fs-coals {
    position: absolute;
    left: -14px;
    top: -4px;
    width: 28px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(closest-side, #ffb04a, #d4441a 55%, #5a1a0a);
}

#foxScene .fs-glow {
    position: absolute;
    left: -150px;
    top: -150px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 184, 102, 0.55), rgba(232, 130, 58, 0.22) 35%, rgba(184, 82, 28, 0));
}

#foxScene .fs-glow-ground {
    position: absolute;
    left: -62px;
    top: -3px;
    width: 124px;
    height: 34px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 207, 128, 0.7), rgba(224, 106, 34, 0));
}

#foxScene .fs-ember,
#foxScene .fs-spark {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
}

#foxScene .fs-spark { width: 2.4px; height: 2.4px; background: #ffe08a; }
#foxScene .fs-smoke-puff { position: absolute; left: -6px; top: -40px; width: 12px; height: 41px; transform-origin: 6px 40px; }

#foxScene .fs-z {
    position: absolute;
    left: 0;
    top: 0;
    font: italic 15px/1 Georgia, "Times New Roman", serif;
    color: #efe6cf;
    transform-origin: 0 100%;
}

#foxScene .fs-flame-1 { animation: fs-flicker-a 1.13s ease-in-out infinite; }
#foxScene .fs-flame-2 { animation: fs-flicker-b 0.87s ease-in-out -0.3s infinite; }
#foxScene .fs-flame-3 { animation: fs-flicker-a 0.71s ease-in-out -0.5s infinite; }

@keyframes fs-flicker-a {
    0%, 100% { transform: scale(1, 1) skewX(0deg); }
    27% { transform: scale(0.94, 1.08) skewX(3deg); }
    52% { transform: scale(1.04, 0.93) skewX(-2deg); }
    78% { transform: scale(0.97, 1.05) skewX(1.5deg); }
}

@keyframes fs-flicker-b {
    0%, 100% { transform: scale(1, 1) skewX(0deg); }
    33% { transform: scale(1.05, 0.91) skewX(-3deg); }
    66% { transform: scale(0.95, 1.1) skewX(2deg); }
}

#foxScene .fs-glow-pulse { animation: fs-glow-pulse 2.3s ease-in-out infinite; }
#foxScene .fs-glow-pulse-2 { animation: fs-glow-pulse 3.1s ease-in-out -1.2s infinite; }
#foxScene .fs-coals-pulse { animation: fs-coals 5.5s ease-in-out infinite; }

@keyframes fs-glow-pulse {
    0%, 100% { opacity: 1; }
    40% { opacity: 0.82; }
    70% { opacity: 0.93; }
}

@keyframes fs-coals {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}

/* Plain numbers in the keyframes (no custom properties) so they stay on
   the compositor. */
#foxScene .fs-ember { animation: fs-ember-r 4.4s ease-out infinite; opacity: 0; }
#foxScene .fs-ember:nth-child(2) { animation: fs-ember-l 5.2s ease-out -1.1s infinite; }
#foxScene .fs-ember:nth-child(3) { animation: fs-ember-r 3.9s ease-out -2.6s infinite; }
#foxScene .fs-ember:nth-child(4) { animation: fs-ember-l 6s ease-out -3.4s infinite; }

@keyframes fs-ember-r {
    0% { transform: translate(0, 0); opacity: 0; }
    8% { opacity: 1; }
    100% { transform: translate(7px, -62px); opacity: 0; }
}

@keyframes fs-ember-l {
    0% { transform: translate(0, 0); opacity: 0; }
    8% { opacity: 1; }
    100% { transform: translate(-6px, -58px); opacity: 0; }
}

#foxScene .fs-spark { animation: fs-spark-r 2.7s ease-out infinite; opacity: 0; }
#foxScene .fs-spark:nth-child(2) { animation: fs-spark-l 2.7s ease-out -0.4s infinite; }
#foxScene .fs-spark:nth-child(3) { animation: fs-spark-r 3.3s ease-out -1.3s infinite; }
#foxScene .fs-spark:nth-child(4) { animation: fs-spark-l 2.7s ease-out -1.9s infinite; }
#foxScene .fs-spark:nth-child(5) { animation: fs-spark-r 3.9s ease-out -2.2s infinite; }

@keyframes fs-spark-r {
    0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
    3% { transform: translate(0, -1px) scale(1.5); opacity: 1; }
    16% { transform: translate(4px, -9px) scale(0.6); opacity: 0; }
    100% { opacity: 0; }
}

@keyframes fs-spark-l {
    0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
    3% { transform: translate(0, -1px) scale(1.5); opacity: 1; }
    16% { transform: translate(-4px, -8px) scale(0.6); opacity: 0; }
    100% { opacity: 0; }
}

#foxScene .fs-smoke-puff { animation: fs-smoke 7s ease-out infinite; opacity: 0; }
#foxScene .fs-smoke-puff:nth-child(2) { animation-delay: -3.5s; }

@keyframes fs-smoke {
    0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
    15% { opacity: 0.55; }
    100% { transform: translate(9px, -70px) scale(1.7); opacity: 0; }
}

/* ---------------------------------------------------------- sleeping */

#foxScene .fs-z { animation: fs-z 10.5s ease-in-out infinite; opacity: 0; }
#foxScene .fs-z:nth-child(2) { animation-delay: -3.5s; }
#foxScene .fs-z:nth-child(3) { animation-delay: -7s; }

@keyframes fs-z {
    0% { transform: translate(0, 0) scale(0.55); opacity: 0; }
    14% { opacity: 0.85; }
    45% { transform: translate(11px, -26px) scale(0.9); }
    75% { transform: translate(3px, -48px) scale(1.15); opacity: 0.6; }
    100% { transform: translate(14px, -70px) scale(1.35); opacity: 0; }
}

/* ---------------------------------------------------------- stillness */

#foxScene.fs-fox-still .fs-fox *,
#foxScene.fs-still * {
    animation: none !important;
    transition: none !important;
}

#foxScene.fs-still .fs-leaves,
#foxScene.fs-still .fs-skit,
#foxScene.fs-still .fs-sparks,
#foxScene.fs-still .fs-embers,
#foxScene.fs-still .fs-smoke,
#foxScene.fs-fox-still .fs-drops,
#foxScene.fs-fox-still .fs-crumbs,
#foxScene.fs-still .fs-z:not(:first-child) { display: none; }
#foxScene.fs-still .fs-z:first-child { opacity: 0.7; transform: translate(8px, -22px); }

@media (prefers-reduced-motion: reduce) {
    #foxScene * { animation: none !important; transition: none !important; }
    #foxScene .fs-leaves,
    #foxScene .fs-sparks,
    #foxScene .fs-embers,
    #foxScene .fs-smoke,
    #foxScene .fs-drops,
    #foxScene .fs-crumbs { display: none; }
}