/* ─────────────────────────────────────────────────────────────────────────────
   Seasonal themes: blank-thread easter eggs (SeasonalStage.razor + per-scene art).
   Animate transform/opacity only (compositor-friendly); no JS loops.
   Mobile (<600px): shorter stage, smaller art, fewer pieces. Reduced motion: static.
   ───────────────────────────────────────────────────────────────────────────── */

.rf-season {
    position: relative;
    width: 100%;
    margin: 0 auto;
    opacity: 0;
    transition: opacity .6s ease;
    text-align: left;
}
.rf-season.is-ready { opacity: 1; }

.rf-season-stage {
    position: relative;
    height: 112px;
    margin-top: 4px;
    overflow: hidden;           /* bats fly off-edge; the peeker drops down from "behind" the prompt box */
    pointer-events: none;       /* only the explicit buttons are interactive */
}
.rf-season-stage button { pointer-events: auto; }

/* ── Info card (Google-Doodle-style tooltip) ── */
.rf-season-tip {
    position: absolute;
    left: 50%;
    top: calc(100% - 2px);
    z-index: 5;
    width: 300px;
    max-width: calc(100vw - 32px);
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #222);
    border: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,.12));
    box-shadow: 0 6px 24px rgba(0,0,0,.14);
    font-size: .85rem;
    line-height: 1.35;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -6px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.rf-season-tip::after {
    content: "";
    position: absolute;
    left: var(--rf-tip-arrow-x, 50%);
    top: 0;
    width: 10px;
    height: 10px;
    background: inherit;
    border-left: inherit;
    border-top: inherit;
    transform: translate(-50%, -6px) rotate(45deg);
}
.rf-season.is-open .rf-season-tip,
.rf-season:has(.rf-season-sprite:focus-visible) .rf-season-tip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
@media (hover: hover) {
    .rf-season:has(.rf-season-sprite:hover) .rf-season-tip,
    .rf-season-tip:hover {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
        transition: opacity .18s ease .25s, transform .18s ease .25s, visibility 0s .25s;
    }
}
.rf-season-tip-title { font-weight: 600; display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; }
.rf-season-tip-emoji { font-size: 1rem; }
.rf-season-tip-date { font-weight: 400; opacity: .65; }
.rf-season-tip-text { margin-top: 4px; opacity: .85; }
.rf-season-tip-hide,
.rf-season-tip-foot {
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--mud-palette-primary, #594ae2);
    font: inherit;
    font-size: .78rem;
    cursor: pointer;
}
.rf-season-tip-foot { color: inherit; opacity: .55; cursor: default; }

/* ── Small × to hide the scene: appears on hover (desktop), always visible on touch ── */
.rf-season-close {
    position: absolute;
    top: 6px;
    right: 0;
    z-index: 6;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,.12));
    border-radius: 50%;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-secondary, #666);
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.rf-season-close svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; fill: none; }
.rf-season:hover .rf-season-close { opacity: .75; }
.rf-season-close:hover { opacity: 1 !important; color: var(--mud-palette-text-primary, #222); }
.rf-season-close:focus-visible { opacity: 1; outline: 2px solid var(--mud-palette-primary, #594ae2); outline-offset: 2px; }
@media (hover: none) { .rf-season-close { opacity: .6; } }

/* ── Sprite (shared by every scene) ── */
.rf-season-sprite {
    position: absolute;
    left: var(--rf-sprite-x, 50%);
    bottom: 4px;
    width: 84px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transform: translateX(-50%);
    -webkit-tap-highlight-color: transparent;
    z-index: 3;
}
.rf-season-sprite img { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; }
.rf-season-sprite:focus-visible { outline: 2px solid var(--mud-palette-primary, #594ae2); outline-offset: 2px; border-radius: 12px; }

/* ═════════════════════════════ Halloween ═════════════════════════════ */

/* Mini ghosts */
.rf-hw-ghost, .rf-hw-peek { position: absolute; }
.rf-hw-ghost svg, .rf-hw-peek svg { display: block; width: 100%; height: auto; overflow: visible; }
.rf-hw-ghost-body { fill: #fff; stroke: #c3cddb; stroke-width: 1.4; stroke-linejoin: round; }
.mud-theme-dark .rf-hw-ghost-body { fill: #f3f5ff; stroke: #8f9bb8; }
.rf-hw-ghost-eyes { transform-box: fill-box; transform-origin: center; animation: rf-hw-blink 4.8s ease-in-out infinite; }
.rf-hw-ghost.g1 { left: 4%; top: 30px; width: 34px; animation: rf-hw-drift 9s ease-in-out infinite; }
.rf-hw-ghost.g2 { right: 4%; top: 12px; width: 28px; animation: rf-hw-drift 11s ease-in-out -4s infinite reverse; }
.rf-hw-ghost.g2 .rf-hw-ghost-eyes { animation-delay: -2s; }
@keyframes rf-hw-drift {
    0%, 100% { transform: translate(0, 0) rotate(-4deg); opacity: .95; }
    25%      { transform: translate(14px, -8px) rotate(3deg); opacity: .8; }
    50%      { transform: translate(0, -3px) rotate(5deg); opacity: 1; }
    75%      { transform: translate(-12px, -9px) rotate(-3deg); opacity: .8; }
}
@keyframes rf-hw-blink { 0%, 90%, 100% { transform: scaleY(1); } 93%, 95% { transform: scaleY(.1); } }

/* Peek-a-boo ghost: drops down from the stage's top edge (behind the prompt box), looks around, ducks back up */
.rf-hw-peek { right: 30%; top: -40px; width: 30px; animation: rf-hw-peek 12s ease-in-out 3s infinite; }
@keyframes rf-hw-peek {
    0%, 58%, 100% { transform: translateY(0) rotate(0); }
    64%           { transform: translateY(34px) rotate(-6deg); }
    70%           { transform: translateY(32px) rotate(7deg); }
    76%           { transform: translateY(34px) rotate(-3deg); }
    82%           { transform: translateY(0) rotate(0); }
}

/* Bats: a lane spans the stage; translating the lane by % of its own width moves the bat edge to edge */
.rf-hw-batlane { position: absolute; left: 0; width: 100%; height: 0; }
.rf-hw-batlane.b1 { top: 8px;  animation: rf-hw-fly 15s linear 1s infinite both; }
.rf-hw-batlane.b2 { top: 34px; animation: rf-hw-fly-back 17s linear 8s infinite both; }
.rf-hw-bat { width: 34px; animation: rf-hw-bob 1.4s ease-in-out infinite alternate; }
.rf-hw-batlane.b2 .rf-hw-bat { width: 26px; }
.rf-hw-bat svg { display: block; width: 100%; height: auto; overflow: visible; }
.rf-hw-bat-body, .rf-hw-wing { fill: #4b3a72; stroke: #2c2145; stroke-width: 1; stroke-linejoin: round; }
.mud-theme-dark .rf-hw-bat-body, .mud-theme-dark .rf-hw-wing { fill: #6a55a0; stroke: #b9a7ea; }
.rf-hw-wing { transform-box: fill-box; animation: rf-hw-flap .26s ease-in-out infinite alternate; }
.rf-hw-wing.l { transform-origin: 100% 60%; }
.rf-hw-wing.r { transform-origin: 0% 60%; }
@keyframes rf-hw-flap { from { transform: scaleY(1) rotate(0); } to { transform: scaleY(.35) rotate(0); } }
@keyframes rf-hw-bob { from { transform: translateY(-4px); } to { transform: translateY(5px); } }
@keyframes rf-hw-fly {
    0%        { transform: translateX(-60px); }
    45%, 100% { transform: translateX(calc(100% + 20px)); }
}
@keyframes rf-hw-fly-back {
    0%        { transform: translateX(calc(100% + 20px)); }
    50%, 100% { transform: translateX(-60px); }
}

/* Jack-o'-lanterns sit along the bottom of the stage (room left for their glow) */
.rf-hw-pumpkin {
    position: absolute;
    bottom: 10px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transform-origin: 50% 100%;
    z-index: 2;
}
.rf-hw-pumpkin svg { position: relative; display: block; width: 100%; height: auto; }
.rf-hw-pumpkin.p1 { left: 12%; width: 46px; }
.rf-hw-pumpkin.p2 { left: 22%; width: 30px; }
.rf-hw-pumpkin.p3 { right: 13%; width: 54px; }
.rf-hw-face path { fill: #ffd25e; }
.rf-hw-face { animation: rf-hw-candle 2.9s steps(1, end) infinite; }
.p2 .rf-hw-face { animation-duration: 2.3s; animation-delay: -.9s; }
.p3 .rf-hw-face { animation-duration: 3.4s; animation-delay: -1.7s; }
@keyframes rf-hw-candle {
    0% { opacity: 1; } 14% { opacity: .78; } 22% { opacity: .96; } 41% { opacity: .84; }
    55% { opacity: 1; } 72% { opacity: .8; } 86% { opacity: .93; }
}
.rf-hw-glow {
    position: absolute;
    left: 50%;
    top: 55%;
    width: 170%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,176,64,.5) 0%, rgba(255,150,40,.18) 40%, rgba(255,140,40,0) 68%);
    transform: translate(-50%, -50%);
    animation: rf-hw-halo 2.9s ease-in-out infinite;
    pointer-events: none;
}
.p2 .rf-hw-glow { animation-duration: 2.3s; animation-delay: -.9s; }
.p3 .rf-hw-glow { animation-duration: 3.4s; animation-delay: -1.7s; }
@keyframes rf-hw-halo {
    0%, 100% { opacity: .7;  transform: translate(-50%, -50%) scale(.94); }
    30%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.04); }
    55%      { opacity: .78; transform: translate(-50%, -50%) scale(.97); }
    80%      { opacity: .95; transform: translate(-50%, -50%) scale(1.02); }
}
.rf-hw-wink { transform-box: fill-box; transform-origin: 50% 80%; animation: rf-hw-wink 9s ease-in-out 2s infinite; }
@keyframes rf-hw-wink { 0%, 88%, 100% { transform: scaleY(1); } 90%, 95% { transform: scaleY(.12); } }

/* Tap a pumpkin: hop + brighter glow (a/b names restart the animation on each tap) */
.rf-hw-pumpkin.poke-a { animation: rf-hw-hop-a .7s cubic-bezier(.3,.7,.4,1); }
.rf-hw-pumpkin.poke-b { animation: rf-hw-hop-b .7s cubic-bezier(.3,.7,.4,1); }
.rf-hw-pumpkin.poke-a .rf-hw-glow, .rf-hw-pumpkin.poke-b .rf-hw-glow { animation: rf-hw-bright .9s ease-out; }
@keyframes rf-hw-hop-a {
    0%   { transform: scale(1, 1); }
    18%  { transform: scale(1.12, .86); }
    45%  { transform: translateY(-18px) scale(.94, 1.08) rotate(-6deg); }
    70%  { transform: translateY(0) scale(1.08, .92); }
    100% { transform: scale(1, 1); }
}
@keyframes rf-hw-hop-b {
    0%   { transform: scale(1, 1); }
    18%  { transform: scale(1.12, .86); }
    45%  { transform: translateY(-18px) scale(.94, 1.08) rotate(6deg); }
    70%  { transform: translateY(0) scale(1.08, .92); }
    100% { transform: scale(1, 1); }
}
@keyframes rf-hw-bright {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    35%  { opacity: 1; transform: translate(-50%, -50%) scale(1.5); }
    100% { opacity: .75; transform: translate(-50%, -50%) scale(1); }
}

/* ═════════════════════════ America Recycles Day ═════════════════════════
   One 9s timeline: lid opens (8–16%), can hops in (14–31%), bottle (36–53%),
   box (58–75%), lid closes (78–89%), the line refills (89–95%). */

.rf-rc-yard { position: absolute; right: 6%; bottom: 8px; width: 280px; height: 96px; transform-origin: 100% 100%; transform: scale(.82); }
.rf-rc-yard svg, .rf-rc-sapling svg, .rf-rc-tuft svg, .rf-rc-plane svg { display: block; width: 100%; height: auto; overflow: visible; }

.rf-rc-bin-back, .rf-rc-bin-front { position: absolute; left: 206px; bottom: 0; width: 66px; transform-origin: 50% 100%; }
.rf-rc-bin-back { z-index: 1; }
.rf-rc-bin-back svg, .rf-rc-bin-front svg { transform-origin: 50% 100%; animation: rf-rc-gulp 9s ease-in-out infinite; }
.rf-rc-bin-front { z-index: 3; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rf-rc-bin-eyes { transform-box: fill-box; transform-origin: center; animation: rf-hw-blink 5.2s ease-in-out infinite; }
.rf-rc-lid { position: absolute; left: 204px; bottom: 65px; width: 70px; z-index: 4; transform-origin: 100% 100%; animation: rf-rc-lid 9s ease-in-out infinite; }
.rf-rc-lid svg { display: block; width: 100%; height: auto; }

.rf-rc-item { position: absolute; bottom: 0; z-index: 2; transform-origin: 50% 100%; }
.rf-rc-item.rf-rc-can    { left: 100px; width: 30px; animation: rf-rc-hop-1 9s ease-in-out infinite; }
.rf-rc-item.rf-rc-bottle { left: 54px;  width: 26px; animation: rf-rc-hop-2 9s ease-in-out infinite; }
.rf-rc-item.rf-rc-box    { left: 2px;   width: 40px; animation: rf-rc-hop-3 9s ease-in-out infinite; }
.rf-rc-wait { transform-origin: 50% 100%; animation: rf-rc-wait 1.3s ease-in-out infinite alternate; }
.rf-rc-item.rf-rc-bottle .rf-rc-wait { animation-delay: -.45s; }
.rf-rc-item.rf-rc-box .rf-rc-wait { animation-delay: -.9s; }

.rf-rc-pop { position: absolute; left: 209px; bottom: 76px; width: 60px; z-index: 5; opacity: 0; transform-origin: 50% 100%; animation: rf-rc-pop 9s ease-out infinite; }

@keyframes rf-rc-lid {
    0%, 8%    { transform: rotate(0); }
    11%       { transform: rotate(38deg); }
    13%       { transform: rotate(27deg); }
    15%, 78%  { transform: rotate(32deg); }
    83%       { transform: rotate(-4deg); }
    86%       { transform: rotate(2deg); }
    89%, 100% { transform: rotate(0); }
}
@keyframes rf-rc-gulp {
    0%, 30%, 35%, 52%, 57%, 74%, 79%, 100% { transform: scale(1, 1); }
    32%, 54%, 76% { transform: scale(1.07, .9); }
}
@keyframes rf-rc-pop {
    0%, 30%, 36%, 52%, 58%, 74%, 80%, 100% { opacity: 0; transform: translateY(6px) scale(.6); }
    32%, 54%, 76% { opacity: 1; transform: translateY(-4px) scale(1); }
    34.5%, 56.5%, 78.5% { opacity: .2; transform: translateY(-12px) scale(1.15); }
}
@keyframes rf-rc-wait { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }

@keyframes rf-rc-hop-1 {
    0%, 14%  { transform: translate(0, 0); opacity: 1; }
    16%      { transform: translate(0, 2px) scale(1.14, .84); }
    22%      { transform: translate(calc(var(--dx) * .55), -80px) rotate(-150deg); }
    27%      { transform: translate(var(--dx), -74px) rotate(-300deg); opacity: 1; }
    31%      { transform: translate(var(--dx), -22px) rotate(-360deg); opacity: 1; }
    32%, 88% { transform: translate(var(--dx), -22px) rotate(-360deg); opacity: 0; }
    89%      { transform: translate(0, 0) scale(.5); opacity: 0; }
    95%      { transform: translate(0, -6px) scale(1.06); opacity: 1; }
    100%     { transform: translate(0, 0) scale(1); opacity: 1; }
}
@keyframes rf-rc-hop-2 {
    0%, 36%  { transform: translate(0, 0); opacity: 1; }
    38%      { transform: translate(0, 2px) scale(1.14, .84); }
    44%      { transform: translate(calc(var(--dx) * .55), -78px) rotate(160deg); }
    49%      { transform: translate(var(--dx), -70px) rotate(300deg); opacity: 1; }
    53%      { transform: translate(var(--dx), -24px) rotate(360deg); opacity: 1; }
    54%, 88% { transform: translate(var(--dx), -24px) rotate(360deg); opacity: 0; }
    90%      { transform: translate(0, 0) scale(.5); opacity: 0; }
    96%      { transform: translate(0, -6px) scale(1.06); opacity: 1; }
    100%     { transform: translate(0, 0) scale(1); opacity: 1; }
}
@keyframes rf-rc-hop-3 {
    0%, 58%  { transform: translate(0, 0); opacity: 1; }
    60%      { transform: translate(0, 2px) scale(1.14, .84); }
    66%      { transform: translate(calc(var(--dx) * .55), -82px) rotate(-40deg); }
    71%      { transform: translate(var(--dx), -76px) rotate(-20deg); opacity: 1; }
    75%      { transform: translate(var(--dx), -20px) rotate(0); opacity: 1; }
    76%, 88% { transform: translate(var(--dx), -20px); opacity: 0; }
    91%      { transform: translate(0, 0) scale(.5); opacity: 0; }
    97%      { transform: translate(0, -6px) scale(1.06); opacity: 1; }
    100%     { transform: translate(0, 0) scale(1); opacity: 1; }
}

/* Tap the bin: a happy wiggle (a/b names restart the animation) */
.rf-rc-bin-front.poke-a { animation: rf-rc-wiggle-a .6s ease-in-out; }
.rf-rc-bin-front.poke-b { animation: rf-rc-wiggle-b .6s ease-in-out; }
@keyframes rf-rc-wiggle-a { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-7deg); } 45% { transform: rotate(6deg); } 70% { transform: rotate(-3deg); } }
@keyframes rf-rc-wiggle-b { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(7deg); } 45% { transform: rotate(-6deg); } 70% { transform: rotate(3deg); } }

/* Left side: sapling + grass */
.rf-rc-sapling { position: absolute; left: 11%; bottom: 8px; width: 50px; transform-origin: 50% 100%; animation: rf-rc-sway 5s ease-in-out infinite; }
@keyframes rf-rc-sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
.rf-rc-tuft { position: absolute; bottom: 8px; width: 26px; }
.rf-rc-tuft.t1 { left: 5%; }
.rf-rc-tuft.t2 { left: 156px; bottom: 0; width: 22px; }

/* Paper airplane glides across now and then */
.rf-rc-plane { position: absolute; left: 0; top: 10px; width: 100%; height: 0; animation: rf-rc-glide 14s linear 2s infinite both; }
.rf-rc-plane-inner { width: 34px; animation: rf-rc-drift 2.4s ease-in-out infinite alternate; }
@keyframes rf-rc-glide {
    0%        { transform: translateX(-60px); }
    48%, 100% { transform: translateX(calc(100% + 20px)); }
}
@keyframes rf-rc-drift { from { transform: translateY(-3px) rotate(-4deg); } to { transform: translateY(8px) rotate(6deg); } }

/* ═════════════════════════════ Thanksgiving ═════════════════════════════ */

/* Drifting leaves: the outer element falls, the inner one sways and tumbles */
.rf-tg-leaf { position: absolute; top: 0; z-index: 1; width: 16px; animation: rf-tg-fall 10s linear infinite both; }
.rf-tg-leaf svg { display: block; width: 100%; height: auto; }
.rf-tg-leaf-sway { animation: rf-tg-sway 2.4s ease-in-out infinite alternate; }
.rf-tg-leaf.l1 { left: 6%;  width: 17px; animation-duration: 9s;    animation-delay: -1s;   --leaf: #e8742c; }
.rf-tg-leaf.l2 { left: 18%; width: 14px; animation-duration: 11s;   animation-delay: -6s;   --leaf: #c8452f; }
.rf-tg-leaf.l3 { left: 31%; width: 18px; animation-duration: 8s;    animation-delay: -3s;   --leaf: #f0b53a; }
.rf-tg-leaf.l4 { left: 42%; width: 14px; animation-duration: 12s;   animation-delay: -9s;   --leaf: #a8642e; }
.rf-tg-leaf.l5 { left: 58%; width: 16px; animation-duration: 10s;   animation-delay: -2s;   --leaf: #e8742c; }
.rf-tg-leaf.l6 { left: 67%; width: 15px; animation-duration: 9.5s;  animation-delay: -7s;   --leaf: #f0b53a; }
.rf-tg-leaf.l7 { left: 79%; width: 18px; animation-duration: 11.5s; animation-delay: -4s;   --leaf: #c8452f; }
.rf-tg-leaf.l8 { left: 92%; width: 14px; animation-duration: 8.5s;  animation-delay: -5.5s; --leaf: #a8642e; }
.rf-tg-leaf.l2 .rf-tg-leaf-sway, .rf-tg-leaf.l5 .rf-tg-leaf-sway, .rf-tg-leaf.l8 .rf-tg-leaf-sway { animation-duration: 3s; animation-delay: -1.2s; }
.rf-tg-leaf.l3 .rf-tg-leaf-sway, .rf-tg-leaf.l6 .rf-tg-leaf-sway { animation-duration: 2s; animation-delay: -.6s; }
.rf-tg-leaf-fill { fill: var(--leaf, #e8742c); }
@keyframes rf-tg-fall {
    0%   { transform: translateY(-30px); opacity: 0; }
    10%  { opacity: .95; }
    82%  { opacity: .9; }
    100% { transform: translateY(118px); opacity: 0; }
}
@keyframes rf-tg-sway { from { transform: translateX(-12px) rotate(-38deg); } to { transform: translateX(12px) rotate(32deg); } }

/* Gourds on a leaf pile (tap: wobble) */
.rf-tg-gourds { position: absolute; left: 6%; bottom: 6px; width: 132px; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer;
                transform-origin: 50% 100%; -webkit-tap-highlight-color: transparent; }
.rf-tg-gourds svg { display: block; width: 100%; height: auto; overflow: visible; }
.rf-tg-g3 { transform-box: fill-box; transform-origin: 50% 100%; animation: rf-tg-rock 4s ease-in-out infinite; }
@keyframes rf-tg-rock { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.rf-tg-gourds.poke-a { animation: rf-tg-wobble-a .7s ease-in-out; }
.rf-tg-gourds.poke-b { animation: rf-tg-wobble-b .7s ease-in-out; }
@keyframes rf-tg-wobble-a { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-5deg) scale(1.04, .96); } 45% { transform: rotate(4deg); } 70% { transform: rotate(-2deg); } }
@keyframes rf-tg-wobble-b { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(5deg) scale(1.04, .96); } 45% { transform: rotate(-4deg); } 70% { transform: rotate(2deg); } }

/* Cornucopia: corn sways, grapes jiggle, the apple rolls out and back; tap: harvest bounce */
.rf-tg-horn { position: absolute; left: 27%; bottom: 6px; width: 104px; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer;
              transform-origin: 50% 100%; -webkit-tap-highlight-color: transparent; }
.rf-tg-horn svg { display: block; width: 100%; height: auto; overflow: visible; }
.rf-tg-corn { transform-box: fill-box; transform-origin: 90% 90%; animation: rf-tg-corn 3.6s ease-in-out infinite; }
@keyframes rf-tg-corn { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
.rf-tg-grapes { transform-box: fill-box; transform-origin: 60% 0%; animation: rf-tg-grapes 2.8s ease-in-out infinite; }
@keyframes rf-tg-grapes { 0%, 100% { transform: rotate(3deg); } 50% { transform: rotate(-4deg); } }
.rf-tg-apple { transform-box: fill-box; transform-origin: 50% 50%; animation: rf-tg-roll 7s ease-in-out 1.5s infinite; }
@keyframes rf-tg-roll {
    0%, 55%, 100% { transform: translateX(0) rotate(0); }
    65%           { transform: translateX(-9px) rotate(-75deg); }
    72%           { transform: translateX(-8px) rotate(-62deg); }
    86%           { transform: translateX(0) rotate(0); }
}
.rf-tg-horn.poke-a { animation: rf-tg-harvest-a .7s cubic-bezier(.3,.7,.4,1); }
.rf-tg-horn.poke-b { animation: rf-tg-harvest-b .7s cubic-bezier(.3,.7,.4,1); }
@keyframes rf-tg-harvest-a { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.06, .9); } 45% { transform: translateY(-10px) scale(.97, 1.04) rotate(-3deg); } 70% { transform: scale(1.04, .95); } }
@keyframes rf-tg-harvest-b { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.06, .9); } 45% { transform: translateY(-10px) scale(.97, 1.04) rotate(3deg); } 70% { transform: scale(1.04, .95); } }

/* Turkey: bobs, fans its tail every 8s; tap for "gobble gobble!" */
.rf-tg-turkey { position: absolute; right: 12%; bottom: 6px; width: 92px; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer;
                -webkit-tap-highlight-color: transparent; }
.rf-tg-turkey-bob { display: block; transform-origin: 50% 100%; animation: rf-tg-bob 2.6s ease-in-out infinite; }
.rf-tg-turkey-bob svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes rf-tg-bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-3px) rotate(1.5deg); } }
.rf-tg-feather { transform-box: view-box; transform-origin: 45px 50px; transform: rotate(calc(var(--a) * .3));
                 stroke: rgba(70,35,10,.45); stroke-width: 1; animation: rf-tg-fan 8s ease-in-out 1s infinite; }
@keyframes rf-tg-fan {
    0%, 10%   { transform: rotate(calc(var(--a) * .3)); }
    18%       { transform: rotate(calc(var(--a) * 1.1)); }
    21%       { transform: rotate(calc(var(--a) * .95)); }
    24%       { transform: rotate(calc(var(--a) * 1.05)); }
    28%, 58%  { transform: rotate(var(--a)); }
    70%, 100% { transform: rotate(calc(var(--a) * .3)); }
}
.rf-tg-head { transform-box: fill-box; transform-origin: 50% 90%; animation: rf-tg-look 5s ease-in-out infinite; }
@keyframes rf-tg-look { 0%, 40%, 100% { transform: rotate(0); } 48%, 60% { transform: rotate(-9deg); } 68%, 80% { transform: rotate(7deg); } }
.rf-tg-wattle { transform-box: fill-box; transform-origin: 30% 0%; animation: rf-tg-jiggle 1.3s ease-in-out infinite alternate; }
@keyframes rf-tg-jiggle { from { transform: rotate(-8deg); } to { transform: rotate(10deg); } }

.rf-tg-gobble {
    position: absolute; right: 78%; top: 4px; z-index: 3;
    padding: 2px 8px; border-radius: 10px; white-space: nowrap;
    font-size: .7rem; font-weight: 600; line-height: 1.4;
    background: var(--mud-palette-surface, #fff); color: var(--mud-palette-text-primary, #222);
    border: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,.12));
    opacity: 0; transform: scale(.6); transform-origin: 100% 100%; pointer-events: none;
}
.rf-tg-turkey.poke-a .rf-tg-gobble { animation: rf-tg-say-a 1.6s ease-out; }
.rf-tg-turkey.poke-b .rf-tg-gobble { animation: rf-tg-say-b 1.6s ease-out; }
@keyframes rf-tg-say-a { 0% { opacity: 0; transform: scale(.6); } 12%, 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.95); } }
@keyframes rf-tg-say-b { 0% { opacity: 0; transform: scale(.6); } 12%, 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.95); } }
.rf-tg-turkey.poke-a .rf-tg-head { animation: rf-tg-gobble-a .7s ease-in-out 2; }
.rf-tg-turkey.poke-b .rf-tg-head { animation: rf-tg-gobble-b .7s ease-in-out 2; }
@keyframes rf-tg-gobble-a { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 50% { transform: rotate(12deg); } 75% { transform: rotate(-8deg); } }
@keyframes rf-tg-gobble-b { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(14deg); } 50% { transform: rotate(-12deg); } 75% { transform: rotate(8deg); } }
.rf-tg-turkey.poke-a .rf-tg-feather { animation: rf-tg-puff-a 1.4s ease-out; }
.rf-tg-turkey.poke-b .rf-tg-feather { animation: rf-tg-puff-b 1.4s ease-out; }
@keyframes rf-tg-puff-a { 0% { transform: rotate(calc(var(--a) * .3)); } 25%, 70% { transform: rotate(calc(var(--a) * 1.12)); } 100% { transform: rotate(calc(var(--a) * .3)); } }
@keyframes rf-tg-puff-b { 0% { transform: rotate(calc(var(--a) * .3)); } 25%, 70% { transform: rotate(calc(var(--a) * 1.12)); } 100% { transform: rotate(calc(var(--a) * .3)); } }

/* ═════════════════════════════ Winter Holidays ═════════════════════════════ */

/* String of lights across the top: scallop tiles, bulbs twinkle in a staggered wave */
.rf-wn-lights { position: absolute; left: 0; right: 0; top: 0; height: 26px; z-index: 0; display: flex; justify-content: center; overflow: hidden; }
.rf-wn-bulb { flex: 0 0 56px; width: 56px; display: block; }
.rf-wn-bulb svg { display: block; width: 100%; height: auto; }
.rf-wn-bulb:nth-child(5n+1) { --bulb: #ff5a5f; }
.rf-wn-bulb:nth-child(5n+2) { --bulb: #ffc93c; }
.rf-wn-bulb:nth-child(5n+3) { --bulb: #3ec97c; }
.rf-wn-bulb:nth-child(5n+4) { --bulb: #4aa8ff; }
.rf-wn-bulb:nth-child(5n+5) { --bulb: #c77dff; }
.rf-wn-bulb-fill { fill: var(--bulb); }
.rf-wn-glow { fill: var(--bulb); opacity: .18; transform-box: fill-box; transform-origin: center; animation: rf-wn-twinkle 3s ease-in-out infinite; }
.rf-wn-bulb:nth-child(3n+2) .rf-wn-glow { animation-delay: -1s; }
.rf-wn-bulb:nth-child(3n+3) .rf-wn-glow { animation-delay: -2s; }
@keyframes rf-wn-twinkle { 0%, 100% { opacity: .12; transform: scale(.8); } 50% { opacity: .55; transform: scale(1.25); } }

/* Snowfall (light theme: pale blue so it shows; dark theme: white) */
.rf-wn-flake { position: absolute; top: 0; z-index: 1; width: 10px; animation: rf-wn-fall 9s linear infinite both; }
.rf-wn-flake svg { display: block; width: 100%; height: auto; }
.rf-wn-flake-sway { animation: rf-wn-sway 2.8s ease-in-out infinite alternate; }
.rf-wn-flake-ink { stroke: #8fbbe6; }
.rf-wn-dot { fill: #b3d3f2; }
.mud-theme-dark .rf-wn-flake-ink { stroke: #ffffff; }
.mud-theme-dark .rf-wn-dot { fill: #e8f2ff; }
.rf-wn-flake.f1  { left: 4%;  width: 12px; animation-duration: 9s;    animation-delay: -1s; }
.rf-wn-flake.f2  { left: 12%; width: 7px;  animation-duration: 7s;    animation-delay: -4s; }
.rf-wn-flake.f3  { left: 21%; width: 13px; animation-duration: 10.5s; animation-delay: -6s; }
.rf-wn-flake.f4  { left: 29%; width: 6px;  animation-duration: 8s;    animation-delay: -2.5s; }
.rf-wn-flake.f5  { left: 37%; width: 10px; animation-duration: 11s;   animation-delay: -8s; }
.rf-wn-flake.f6  { left: 45%; width: 7px;  animation-duration: 7.5s;  animation-delay: -5s; }
.rf-wn-flake.f7  { left: 56%; width: 12px; animation-duration: 9.5s;  animation-delay: -3s; }
.rf-wn-flake.f8  { left: 64%; width: 6px;  animation-duration: 8.5s;  animation-delay: -7s; }
.rf-wn-flake.f9  { left: 72%; width: 11px; animation-duration: 10s;   animation-delay: -1.5s; }
.rf-wn-flake.f10 { left: 80%; width: 7px;  animation-duration: 7s;    animation-delay: -6.5s; }
.rf-wn-flake.f11 { left: 88%; width: 13px; animation-duration: 11.5s; animation-delay: -4.5s; }
.rf-wn-flake.f12 { left: 95%; width: 6px;  animation-duration: 8s;    animation-delay: -.5s; }
.rf-wn-flake.f3 .rf-wn-flake-sway, .rf-wn-flake.f7 .rf-wn-flake-sway, .rf-wn-flake.f11 .rf-wn-flake-sway { animation-duration: 3.6s; animation-delay: -1.4s; }
.rf-wn-flake.f2 .rf-wn-flake-sway, .rf-wn-flake.f6 .rf-wn-flake-sway, .rf-wn-flake.f10 .rf-wn-flake-sway { animation-duration: 2.2s; animation-delay: -.8s; }
@keyframes rf-wn-fall {
    0%   { transform: translateY(-16px); opacity: 0; }
    10%  { opacity: .95; }
    85%  { opacity: .9; }
    100% { transform: translateY(112px); opacity: 0; }
}
@keyframes rf-wn-sway { from { transform: translateX(-8px) rotate(-30deg); } to { transform: translateX(8px) rotate(40deg); } }

/* Snow bank along the bottom */
.rf-wn-bank { position: absolute; left: 2%; right: 2%; bottom: 0; height: 16px; z-index: 1; }
.rf-wn-bank svg { display: block; width: 100%; height: 100%; }
.rf-wn-bank-fill { fill: #dcebf8; }
.mud-theme-dark .rf-wn-bank-fill { fill: #e6f0fa; opacity: .9; }

/* Snowy pines behind the snowman and penguin; each tree sways a touch on its own beat */
.rf-wn-pines { position: absolute; bottom: 8px; width: 104px; z-index: 1; pointer-events: none; }
.rf-wn-pines svg { display: block; width: 100%; height: auto; overflow: visible; }
.rf-wn-pines.left { left: 1%; }
.rf-wn-pines.right { right: 1%; transform: scaleX(-1); }
.rf-wn-pine { transform-box: fill-box; transform-origin: 50% 100%; animation: rf-wn-pine 6s ease-in-out infinite; }
.rf-wn-pine.p1 { animation-delay: -2s; } .rf-wn-pine.p3 { animation-delay: -4s; animation-duration: 5s; }
.rf-wn-pines.right .rf-wn-pine { animation-delay: -1s; }
@keyframes rf-wn-pine { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
.rf-wn-pine-snow { stroke: #ffffff; }
.rf-wn-pine-cap { fill: #ffffff; }
.mud-theme-dark .rf-wn-pine-snow { stroke: #eef5fc; }
.mud-theme-dark .rf-wn-pine-cap { fill: #eef5fc; }

/* Snowman: waves; tap pops his hat */
.rf-wn-snowman { position: absolute; left: 12%; bottom: 4px; width: 66px; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer;
                 -webkit-tap-highlight-color: transparent; }
.rf-wn-snowman svg { display: block; width: 100%; height: auto; overflow: visible; }
.rf-wn-arm { transform-box: fill-box; transform-origin: 0% 100%; animation: rf-wn-wave 5s ease-in-out infinite; }
@keyframes rf-wn-wave { 0%, 50%, 100% { transform: rotate(0); } 58%, 74% { transform: rotate(-18deg); } 66%, 82% { transform: rotate(8deg); } }
.rf-wn-head { transform-box: fill-box; transform-origin: 50% 100%; animation: rf-wn-tilt 5s ease-in-out infinite; }
@keyframes rf-wn-tilt { 0%, 50%, 100% { transform: rotate(0); } 62%, 80% { transform: rotate(5deg); } }
.rf-wn-hat { transform-box: fill-box; transform-origin: 50% 100%; }
.rf-wn-snowman.poke-a .rf-wn-hat { animation: rf-wn-hat-a 1s cubic-bezier(.3,.7,.4,1); }
.rf-wn-snowman.poke-b .rf-wn-hat { animation: rf-wn-hat-b 1s cubic-bezier(.3,.7,.4,1); }
@keyframes rf-wn-hat-a { 0%, 100% { transform: none; } 35% { transform: translateY(-22px) rotate(-200deg); } 55% { transform: translateY(-24px) rotate(-340deg); } 80% { transform: translateY(1px) rotate(-360deg); } 90% { transform: translateY(-2px) rotate(-360deg); } }
@keyframes rf-wn-hat-b { 0%, 100% { transform: none; } 35% { transform: translateY(-22px) rotate(200deg); }  55% { transform: translateY(-24px) rotate(340deg); }  80% { transform: translateY(1px) rotate(360deg); }  90% { transform: translateY(-2px) rotate(360deg); } }

/* Penguin in earmuffs: waddles and flaps; tap for a hop-and-spin */
.rf-wn-penguin { position: absolute; right: 14%; bottom: 6px; width: 54px; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer;
                 -webkit-tap-highlight-color: transparent; }
.rf-wn-penguin-hop, .rf-wn-penguin-waddle { display: block; transform-origin: 50% 100%; }
.rf-wn-penguin-waddle { animation: rf-wn-waddle 1.6s ease-in-out infinite; }
.rf-wn-penguin-waddle svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes rf-wn-waddle { 0%, 100% { transform: rotate(-6deg); } 25% { transform: translateY(-2px) rotate(0); } 50% { transform: rotate(6deg); } 75% { transform: translateY(-2px) rotate(0); } }
.rf-wn-wing { transform-box: fill-box; transform-origin: 50% 0%; animation: rf-wn-flap 4s ease-in-out infinite; }
.rf-wn-wing.l { --flap: 22deg; } .rf-wn-wing.r { --flap: -22deg; }
@keyframes rf-wn-flap { 0%, 60%, 100% { transform: rotate(0); } 66%, 78% { transform: rotate(var(--flap)); } 72%, 84% { transform: rotate(calc(var(--flap) * .3)); } }
.rf-wn-penguin.poke-a .rf-wn-penguin-hop { animation: rf-wn-hop-a .9s cubic-bezier(.3,.7,.4,1); }
.rf-wn-penguin.poke-b .rf-wn-penguin-hop { animation: rf-wn-hop-b .9s cubic-bezier(.3,.7,.4,1); }
@keyframes rf-wn-hop-a { 0%, 100% { transform: none; } 15% { transform: scale(1.1, .88); } 50% { transform: translateY(-20px) rotateY(180deg); } 85% { transform: translateY(0) rotateY(360deg) scale(1.06, .94); } }
@keyframes rf-wn-hop-b { 0%, 100% { transform: none; } 15% { transform: scale(1.1, .88); } 50% { transform: translateY(-20px) rotateY(-180deg); } 85% { transform: translateY(0) rotateY(-360deg) scale(1.06, .94); } }

/* ═════════════════════════════ New Year's ═════════════════════════════ */

/* Fireworks: a spark climbs, then the burst blooms and fades. Base state (no animation) is the open burst. */
.rf-ny-fw { position: absolute; top: 0; width: 54px; height: 54px; z-index: 0; --fw: #ffc93c; --fw2: #fff1b0; }
.rf-ny-fw.w1 { left: 22%; top: 2px; width: 62px; height: 62px;  --fw: #ff5fa2; --fw2: #ffd3e6; }
.rf-ny-fw.w2 { left: 62%; top: -6px; width: 74px; height: 74px; --fw: #ffc93c; --fw2: #fff1b0; }
.rf-ny-fw.w3 { left: 5%;  top: 6px; width: 52px; height: 52px; --fw: #3fc1d0; --fw2: #c8f6fb; }
.rf-ny-fw.w4 { left: 82%; top: 2px; width: 56px; height: 56px; --fw: #9b7bff; --fw2: #e1d8ff; }
.rf-ny-burst { position: absolute; inset: 0; display: block; transform-origin: center; animation: rf-ny-bloom 4s ease-out infinite both; }
.rf-ny-burst svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rf-ny-rays { stroke: var(--fw); }
.rf-ny-tips { fill: var(--fw2); }
.rf-ny-trail { position: absolute; left: calc(50% - 1.5px); top: 50%; width: 3px; height: 12px; border-radius: 2px; opacity: 0;
               background: linear-gradient(var(--fw2), transparent); animation: rf-ny-climb 4s ease-out infinite both; }
.rf-ny-fw.w2 .rf-ny-burst, .rf-ny-fw.w2 .rf-ny-trail { animation-delay: -1.3s; }
.rf-ny-fw.w3 .rf-ny-burst, .rf-ny-fw.w3 .rf-ny-trail { animation-delay: -2.4s; animation-duration: 4.6s; }
.rf-ny-fw.w4 .rf-ny-burst, .rf-ny-fw.w4 .rf-ny-trail { animation-delay: -3.3s; animation-duration: 4.4s; }
@keyframes rf-ny-climb { 0% { opacity: 0; transform: translateY(70px); } 5% { opacity: 1; } 22% { opacity: 1; transform: translateY(-4px); } 26%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes rf-ny-bloom {
    0%, 22% { opacity: 0; transform: scale(.1) rotate(0); }
    26% { opacity: 1; }
    50% { opacity: 1; transform: scale(1) rotate(10deg); }
    80%, 100% { opacity: 0; transform: scale(1.18) rotate(16deg) translateY(4px); }
}

/* Confetti: little paper rectangles tumbling down */
.rf-ny-cf { position: absolute; top: 0; z-index: 1; width: 5px; height: 9px; animation: rf-ny-fall 8s linear infinite both; }
.rf-ny-cf-spin { display: block; width: 100%; height: 100%; border-radius: 1px; background: var(--cf, #ff5fa2);
                 animation: rf-ny-tumble 1.4s linear infinite; }
.rf-ny-cf:nth-child(4n+1) { --cf: #ff5fa2; } .rf-ny-cf:nth-child(4n+2) { --cf: #ffc93c; }
.rf-ny-cf:nth-child(4n+3) { --cf: #3fc1d0; } .rf-ny-cf:nth-child(4n+4) { --cf: #9b7bff; }
.rf-ny-cf.c1  { left: 3%;  animation-duration: 8s;    animation-delay: -1s; }
.rf-ny-cf.c2  { left: 10%; animation-duration: 7s;    animation-delay: -4.5s; height: 6px; }
.rf-ny-cf.c3  { left: 17%; animation-duration: 9s;    animation-delay: -6s; }
.rf-ny-cf.c4  { left: 25%; animation-duration: 7.5s;  animation-delay: -2.5s; height: 6px; }
.rf-ny-cf.c5  { left: 32%; animation-duration: 8.5s;  animation-delay: -7.5s; }
.rf-ny-cf.c6  { left: 39%; animation-duration: 7s;    animation-delay: -3.5s; height: 6px; }
.rf-ny-cf.c7  { left: 46%; animation-duration: 9.5s;  animation-delay: -5s; }
.rf-ny-cf.c8  { left: 55%; animation-duration: 8s;    animation-delay: -.5s; height: 6px; }
.rf-ny-cf.c9  { left: 61%; animation-duration: 7.5s;  animation-delay: -6.5s; }
.rf-ny-cf.c10 { left: 68%; animation-duration: 9s;    animation-delay: -2s; height: 6px; }
.rf-ny-cf.c11 { left: 75%; animation-duration: 8.5s;  animation-delay: -4s; }
.rf-ny-cf.c12 { left: 82%; animation-duration: 7s;    animation-delay: -7s; height: 6px; }
.rf-ny-cf.c13 { left: 89%; animation-duration: 9.5s;  animation-delay: -3s; }
.rf-ny-cf.c14 { left: 96%; animation-duration: 8s;    animation-delay: -5.5s; height: 6px; }
.rf-ny-cf:nth-child(3n) .rf-ny-cf-spin { animation-duration: 1.9s; animation-direction: reverse; }
@keyframes rf-ny-fall {
    0%   { transform: translate(0, -12px); opacity: 0; }
    8%   { opacity: 1; }
    50%  { transform: translate(10px, 50px); }
    88%  { opacity: 1; }
    100% { transform: translate(-6px, 110px); opacity: 0; }
}
@keyframes rf-ny-tumble { 0% { transform: rotate(0) scaleY(1); } 25% { transform: rotate(90deg) scaleY(.3); } 50% { transform: rotate(180deg) scaleY(1); } 75% { transform: rotate(270deg) scaleY(.3); } 100% { transform: rotate(360deg) scaleY(1); } }

/* Skyline silhouette along the bottom with twinkling windows */
.rf-ny-skyline { position: absolute; left: 2%; right: 2%; bottom: 0; height: 40px; z-index: 1; display: flex; justify-content: center; overflow: hidden; pointer-events: none;
                 -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.rf-ny-sky-tile { flex: 0 0 160px; width: 160px; display: block; }
.rf-ny-sky-tile svg { display: block; width: 100%; height: auto; }
.rf-ny-bldg { fill: #d9d3f2; }
.rf-ny-win { fill: #ffffff; }
.mud-theme-dark .rf-ny-bldg { fill: #2c2648; }
.mud-theme-dark .rf-ny-win { fill: #ffd76a; }
.rf-ny-win { animation: rf-ny-win 5s steps(1, end) infinite; }
.rf-ny-win:nth-child(3n+1) { animation-delay: -1.7s; } .rf-ny-win:nth-child(4n+2) { animation-delay: -3.1s; animation-duration: 7s; }
.rf-ny-win:nth-child(5n) { animation-delay: -.6s; animation-duration: 6s; }
@keyframes rf-ny-win { 0%, 100% { opacity: .9; } 70% { opacity: .25; } }

/* Balloons: bob on their strings; tap and the gold one floats up and drifts back */
.rf-ny-balloons { position: absolute; left: 14%; bottom: 2px; width: 70px; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer;
                  -webkit-tap-highlight-color: transparent; }
.rf-ny-balloons svg { display: block; width: 100%; height: auto; overflow: visible; }
.rf-ny-bal { transform-box: fill-box; transform-origin: 50% 100%; animation: rf-ny-bob 3.4s ease-in-out infinite; }
.rf-ny-bal.b { animation-duration: 3.9s; animation-delay: -1.2s; }
.rf-ny-bal.c { animation-duration: 3s; animation-delay: -2s; }
@keyframes rf-ny-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-3px) rotate(4deg); } }
.rf-ny-balloons.poke-a .rf-ny-bal.b { animation: rf-ny-float-a 1.8s cubic-bezier(.4,.1,.4,1); }
.rf-ny-balloons.poke-b .rf-ny-bal.b { animation: rf-ny-float-b 1.8s cubic-bezier(.4,.1,.4,1); }
@keyframes rf-ny-float-a { 0%, 100% { transform: none; } 45% { transform: translate(4px, -30px) rotate(10deg); } 70% { transform: translate(-2px, -20px) rotate(-6deg); } }
@keyframes rf-ny-float-b { 0%, 100% { transform: none; } 45% { transform: translate(-4px, -30px) rotate(-10deg); } 70% { transform: translate(2px, -20px) rotate(6deg); } }

/* Alarm clock: the minute hand ticks to twelve and the clock rings; tap for "ding ding!" */
.rf-ny-clock { position: absolute; right: 14%; bottom: 4px; width: 64px; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer;
               -webkit-tap-highlight-color: transparent; }
.rf-ny-clock-ring { display: block; transform-origin: 50% 90%; animation: rf-ny-ring 6s ease-in-out infinite; }
.rf-ny-clock-ring svg { display: block; width: 100%; height: auto; overflow: visible; }
.rf-ny-minute { transform-box: view-box; transform-origin: 36px 42px; animation: rf-ny-tick 6s steps(1, end) infinite; }
@keyframes rf-ny-tick { 0% { transform: rotate(-18deg); } 14% { transform: rotate(-12deg); } 28% { transform: rotate(-6deg); } 42%, 92% { transform: rotate(0); } }
@keyframes rf-ny-ring {
    0%, 42%, 70%, 100% { transform: rotate(0); }
    45%, 51%, 57%, 63% { transform: rotate(-7deg) translateY(-1px); }
    48%, 54%, 60%, 66% { transform: rotate(7deg) translateY(-1px); }
}
.rf-ny-bell { transform-box: fill-box; transform-origin: 50% 100%; animation: rf-ny-bell 6s ease-in-out infinite; }
.rf-ny-bell.r { animation-name: rf-ny-bell-r; }
@keyframes rf-ny-bell { 0%, 42%, 70%, 100% { transform: none; } 46%, 54%, 62% { transform: translateY(-2px) rotate(-10deg); } 50%, 58%, 66% { transform: rotate(6deg); } }
@keyframes rf-ny-bell-r { 0%, 42%, 70%, 100% { transform: none; } 46%, 54%, 62% { transform: translateY(-2px) rotate(10deg); } 50%, 58%, 66% { transform: rotate(-6deg); } }
.rf-ny-ringline { opacity: 0; animation: rf-ny-lines 6s ease-out infinite; }
@keyframes rf-ny-lines { 0%, 43%, 72%, 100% { opacity: 0; } 47%, 66% { opacity: 1; } }
.rf-ny-ding {
    position: absolute; right: 86%; top: -2px; z-index: 3;
    padding: 2px 8px; border-radius: 10px; white-space: nowrap;
    font-size: .7rem; font-weight: 600; line-height: 1.4;
    background: var(--mud-palette-surface, #fff); color: var(--mud-palette-text-primary, #222);
    border: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,.12));
    opacity: 0; transform: scale(.6); transform-origin: 100% 100%; pointer-events: none;
}
.rf-ny-clock.poke-a .rf-ny-ding { animation: rf-tg-say-a 1.6s ease-out; }
.rf-ny-clock.poke-b .rf-ny-ding { animation: rf-tg-say-b 1.6s ease-out; }
.rf-ny-clock.poke-a .rf-ny-clock-ring { animation: rf-ny-jangle-a .9s ease-in-out; }
.rf-ny-clock.poke-b .rf-ny-clock-ring { animation: rf-ny-jangle-b .9s ease-in-out; }
.rf-ny-clock.poke-a .rf-ny-ringline, .rf-ny-clock.poke-b .rf-ny-ringline { animation: rf-ny-lines-tap .9s ease-out; }
@keyframes rf-ny-jangle-a { 0%, 100% { transform: rotate(0); } 12%, 37%, 62% { transform: rotate(-9deg) translateY(-2px); } 25%, 50%, 75% { transform: rotate(9deg) translateY(-2px); } }
@keyframes rf-ny-jangle-b { 0%, 100% { transform: rotate(0); } 12%, 37%, 62% { transform: rotate(9deg) translateY(-2px); } 25%, 50%, 75% { transform: rotate(-9deg) translateY(-2px); } }
@keyframes rf-ny-lines-tap { 0%, 100% { opacity: 0; } 10%, 80% { opacity: 1; } }

/* ═════════════════════════════ Groundhog Day ═════════════════════════════ */

/* Sun with a drifting cloud; the cloud covers it for the last third of the 8s cycle (shadow gone) */
.rf-gh-sky { position: absolute; right: 28%; top: 2px; width: 92px; height: 52px; z-index: 0; pointer-events: none; }
.rf-gh-sun { position: absolute; left: 6px; top: 0; width: 46px; display: block; }
.rf-gh-sun svg, .rf-gh-cloud svg { display: block; width: 100%; height: auto; overflow: visible; }
.rf-gh-rays { transform-origin: 0 0; animation: rf-gh-spin 14s linear infinite; }
@keyframes rf-gh-spin { to { transform: rotate(360deg); } }
.rf-gh-cloud { position: absolute; left: 0; top: 14px; width: 62px; display: block; animation: rf-gh-drift 8s ease-in-out infinite; transform: translateX(46px); }
.rf-gh-cloud-body { fill: #ffffff; stroke: #c9d6e4; }
.mud-theme-dark .rf-gh-cloud-body { fill: #dfe7f1; stroke: #9fb0c4; }
@keyframes rf-gh-drift { 0%, 58% { transform: translateX(46px); opacity: .85; } 68%, 92% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(46px); opacity: .85; } }

/* A few late-winter flakes */
.rf-gh-flake { position: absolute; top: 0; z-index: 1; width: 5px; height: 5px; border-radius: 50%; background: #b9d7f2; opacity: 0;
               animation: rf-gh-fall 9s linear infinite both; }
.mud-theme-dark .rf-gh-flake { background: #ffffff; }
.rf-gh-flake.f1 { left: 8%;  animation-delay: -1s; }
.rf-gh-flake.f2 { left: 30%; animation-delay: -5s;  animation-duration: 10s; width: 4px; height: 4px; }
.rf-gh-flake.f3 { left: 44%; animation-delay: -3s; }
.rf-gh-flake.f4 { left: 58%; animation-delay: -7.5s; animation-duration: 11s; width: 4px; height: 4px; }
.rf-gh-flake.f5 { left: 80%; animation-delay: -2s;  animation-duration: 10s; }
.rf-gh-flake.f6 { left: 93%; animation-delay: -6s;  width: 4px; height: 4px; }
@keyframes rf-gh-fall { 0% { transform: translate(0, -8px); opacity: 0; } 10%, 85% { opacity: .9; } 50% { transform: translate(8px, 50px); } 100% { transform: translate(-4px, 104px); opacity: 0; } }

/* Ground: grass peeking through a melting snow strip */
.rf-gh-ground { position: absolute; left: 2%; right: 2%; bottom: 0; height: 22px; z-index: 1; pointer-events: none; }
.rf-gh-ground svg { display: block; width: 100%; height: 100%; }
.rf-gh-snow { fill: #eef5fc; }
.mud-theme-dark .rf-gh-snow { fill: #d9e4ef; }

/* The groundhog: pop up, look around, see its shadow, duck back down */
.rf-gh-hog { position: absolute; left: 12%; bottom: 4px; width: 126px; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer;
             -webkit-tap-highlight-color: transparent; }
.rf-gh-hog > svg { display: block; width: 100%; height: auto; overflow: visible; }
.rf-gh-pop { animation: rf-gh-pop 8s ease-in-out infinite; }
@keyframes rf-gh-pop {
    0%, 8% { transform: translateY(48px); }
    13% { transform: translateY(-3px); }
    16%, 38% { transform: translateY(0); }
    41% { transform: translateY(-4px); }
    44%, 52% { transform: translateY(0); }
    60%, 100% { transform: translateY(48px); }
}
.rf-gh-head { transform-box: fill-box; transform-origin: 50% 90%; animation: rf-gh-look 8s ease-in-out infinite; }
@keyframes rf-gh-look { 0%, 17%, 34%, 100% { transform: rotate(0); } 21%, 25% { transform: rotate(-12deg); } 28%, 31% { transform: rotate(12deg); } }
.rf-gh-eyes { transform-box: fill-box; transform-origin: center; animation: rf-gh-eyes 8s ease-in-out infinite; }
@keyframes rf-gh-eyes { 0%, 38%, 47%, 100% { transform: scale(1); } 40%, 45% { transform: scale(1.35); } }
.rf-gh-shadow { fill: #3d4a5c; opacity: .3; animation: rf-gh-shadow 8s ease-in-out infinite; }
.mud-theme-dark .rf-gh-shadow { fill: #000000; opacity: .55; }
@keyframes rf-gh-shadow { 0%, 14%, 58%, 100% { opacity: 0; } 20%, 54% { opacity: .3; } }
.mud-theme-dark .rf-gh-shadow { animation-name: rf-gh-shadow-dk; }
@keyframes rf-gh-shadow-dk { 0%, 14%, 58%, 100% { opacity: 0; } 20%, 54% { opacity: .55; } }
.rf-gh-say {
    position: absolute; left: 64%; top: -6px; z-index: 3;
    padding: 2px 8px; border-radius: 10px; white-space: nowrap;
    font-size: .7rem; font-weight: 600; line-height: 1.4;
    background: var(--mud-palette-surface, #fff); color: var(--mud-palette-text-primary, #222);
    border: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,.12));
    opacity: 0; transform: scale(.6); transform-origin: 0% 100%; pointer-events: none;
}
.rf-gh-hog.poke-a .rf-gh-say { animation: rf-tg-say-a 2.2s ease-out; }
.rf-gh-hog.poke-b .rf-gh-say { animation: rf-tg-say-b 2.2s ease-out; }
.rf-gh-hog.poke-a .rf-gh-pop { animation: rf-gh-pop 8s ease-in-out 2.4s infinite, rf-gh-peek-a 2.4s ease-out; }
.rf-gh-hog.poke-b .rf-gh-pop { animation: rf-gh-pop 8s ease-in-out 2.4s infinite, rf-gh-peek-b 2.4s ease-out; }
@keyframes rf-gh-peek-a { 0% { transform: translateY(30px); } 14% { transform: translateY(-5px); } 22%, 82% { transform: translateY(0); } 100% { transform: translateY(48px); } }
@keyframes rf-gh-peek-b { 0% { transform: translateY(30px); } 14% { transform: translateY(-5px); } 22%, 82% { transform: translateY(0); } 100% { transform: translateY(48px); } }

/* Crocuses poking up through the snow; tap and they bounce */
.rf-gh-crocus { position: absolute; right: 13%; bottom: 8px; width: 66px; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer;
                -webkit-tap-highlight-color: transparent; }
.rf-gh-crocus svg { display: block; width: 100%; height: auto; overflow: visible; }
.rf-gh-fl { transform-box: fill-box; transform-origin: 50% 100%; animation: rf-gh-sway 4s ease-in-out infinite; }
.rf-gh-fl.b { animation-delay: -1.3s; animation-duration: 4.6s; }
.rf-gh-fl.c { animation-delay: -2.6s; animation-duration: 3.6s; }
@keyframes rf-gh-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.rf-gh-crocus.poke-a .rf-gh-fl { animation: rf-gh-boing-a .8s ease-out; }
.rf-gh-crocus.poke-b .rf-gh-fl { animation: rf-gh-boing-b .8s ease-out; }
.rf-gh-crocus.poke-a .rf-gh-fl.b, .rf-gh-crocus.poke-b .rf-gh-fl.b { animation-delay: .08s; }
.rf-gh-crocus.poke-a .rf-gh-fl.c, .rf-gh-crocus.poke-b .rf-gh-fl.c { animation-delay: .16s; }
@keyframes rf-gh-boing-a { 0%, 100% { transform: scale(1); } 30% { transform: scale(.85, 1.18); } 60% { transform: scale(1.08, .92); } }
@keyframes rf-gh-boing-b { 0%, 100% { transform: scale(1); } 30% { transform: scale(.85, 1.18); } 60% { transform: scale(1.08, .92); } }

/* ═════════════════════════════ Valentine's Day ═════════════════════════════ */

/* Little hearts floating up and fading */
.rf-vd-heart { position: absolute; bottom: 10px; z-index: 0; width: 14px; color: #ff6b8f; opacity: 0; pointer-events: none;
               animation: rf-vd-rise 7s ease-in infinite both; }
.rf-vd-heart svg { display: block; width: 100%; height: auto; }
.rf-vd-heart.h1  { left: 6%;  animation-delay: -1s; }
.rf-vd-heart.h2  { left: 24%; animation-delay: -4.5s; width: 10px; color: #ffa3bd; animation-duration: 8s; }
.rf-vd-heart.h3  { left: 33%; animation-delay: -2.5s; width: 12px; color: #b38bff; }
.rf-vd-heart.h4  { left: 40%; animation-delay: -6s;   width: 9px;  color: #ff8fb1; animation-duration: 6s; }
.rf-vd-heart.h5  { left: 47%; animation-delay: -0.3s; width: 11px; color: #ffc2d1; animation-duration: 9s; }
.rf-vd-heart.h6  { left: 56%; animation-delay: -3.5s; width: 13px; color: #e84a6f; }
.rf-vd-heart.h7  { left: 63%; animation-delay: -5.2s; width: 9px;  color: #ffa3bd; animation-duration: 8s; }
.rf-vd-heart.h8  { left: 70%; animation-delay: -1.8s; width: 11px; color: #b38bff; animation-duration: 6.5s; }
.rf-vd-heart.h9  { left: 90%; animation-delay: -4s;   width: 12px; color: #ff6b8f; }
.rf-vd-heart.h10 { left: 96%; animation-delay: -6.5s; width: 9px;  color: #ffc2d1; animation-duration: 7.5s; }
@keyframes rf-vd-rise {
    0% { transform: translate(0, 0) scale(.6); opacity: 0; }
    12% { opacity: .9; }
    35% { transform: translate(6px, -32px) scale(1); }
    65% { transform: translate(-5px, -62px) scale(1); opacity: .75; }
    100% { transform: translate(3px, -96px) scale(.9); opacity: 0; }
}

.rf-vd-ground { position: absolute; left: 2%; right: 2%; bottom: 0; height: 14px; z-index: 1; pointer-events: none; }
.rf-vd-ground svg { display: block; width: 100%; height: 100%; }
.rf-vd-grass { fill: #a9d98f; }
.mud-theme-dark .rf-vd-grass { fill: #4f7d45; }

/* Shared speech bubble */
.rf-vd-say {
    position: absolute; left: 50%; top: -14px; z-index: 3;
    padding: 2px 8px; border-radius: 10px; white-space: nowrap;
    font-size: .7rem; font-weight: 600; line-height: 1.4;
    background: var(--mud-palette-surface, #fff); color: var(--mud-palette-text-primary, #222);
    border: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,.12));
    opacity: 0; transform: scale(.6); transform-origin: 0% 100%; pointer-events: none;
}
.rf-vd-mail.poke-a .rf-vd-say, .rf-vd-birds.poke-a .rf-vd-say { animation: rf-tg-say-a 2.2s ease-out; }
.rf-vd-mail.poke-b .rf-vd-say, .rf-vd-birds.poke-b .rf-vd-say { animation: rf-tg-say-b 2.2s ease-out; }

/* Mailbox: every 7s it wiggles, the flag pops up and a valentine peeks out */
.rf-vd-mail { position: absolute; left: 13%; bottom: 4px; width: 96px; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer;
              -webkit-tap-highlight-color: transparent; }
.rf-vd-mail > svg, .rf-vd-birds > svg { display: block; width: 100%; height: auto; overflow: visible; }
.rf-vd-box { transform-box: view-box; transform-origin: 44px 48px; animation: rf-vd-wiggle 7s ease-in-out infinite; }
@keyframes rf-vd-wiggle { 0%, 60%, 76%, 100% { transform: rotate(0); } 63% { transform: rotate(-4deg); } 67% { transform: rotate(3deg); } 71% { transform: rotate(-1.5deg); } }
.rf-vd-flag { transform-box: view-box; transform-origin: 66px 32px; transform: rotate(-90deg); animation: rf-vd-flag 7s ease-in-out infinite; }
@keyframes rf-vd-flag { 0%, 62%, 92%, 100% { transform: rotate(-90deg); } 67% { transform: rotate(8deg); } 70%, 86% { transform: rotate(0); } }
.rf-vd-env { animation: rf-vd-peek 7s ease-in-out infinite; }
@keyframes rf-vd-peek { 0%, 64%, 92%, 100% { transform: translateY(0); } 70%, 84% { transform: translateY(-10px) rotate(-5deg); } }
.rf-vd-mail.poke-a .rf-vd-env { animation: rf-vd-peek 7s ease-in-out 1.8s infinite, rf-vd-send-a 1.8s ease-out; }
.rf-vd-mail.poke-b .rf-vd-env { animation: rf-vd-peek 7s ease-in-out 1.8s infinite, rf-vd-send-b 1.8s ease-out; }
@keyframes rf-vd-send-a { 0% { transform: translate(0, 0); } 28% { transform: translate(-3px, -24px) rotate(-12deg); }
                          60% { transform: translate(14px, -32px) rotate(8deg); opacity: 1; } 99% { transform: translate(30px, -38px) rotate(-4deg); opacity: 0; } 100% { transform: translate(0, 0); opacity: 0; } }
@keyframes rf-vd-send-b { 0% { transform: translate(0, 0); } 28% { transform: translate(-3px, -24px) rotate(-12deg); }
                          60% { transform: translate(14px, -32px) rotate(8deg); opacity: 1; } 99% { transform: translate(30px, -38px) rotate(-4deg); opacity: 0; } 100% { transform: translate(0, 0); opacity: 0; } }
.rf-vd-mail.poke-a .rf-vd-flag { animation: rf-vd-flag 7s ease-in-out 1.8s infinite, rf-vd-flagup-a 1.8s ease-out; }
.rf-vd-mail.poke-b .rf-vd-flag { animation: rf-vd-flag 7s ease-in-out 1.8s infinite, rf-vd-flagup-b 1.8s ease-out; }
@keyframes rf-vd-flagup-a { 0% { transform: rotate(-90deg); } 20% { transform: rotate(12deg); } 30% { transform: rotate(-5deg); } 40%, 85% { transform: rotate(0); } 100% { transform: rotate(-90deg); } }
@keyframes rf-vd-flagup-b { 0% { transform: rotate(-90deg); } 20% { transform: rotate(12deg); } 30% { transform: rotate(-5deg); } 40%, 85% { transform: rotate(0); } 100% { transform: rotate(-90deg); } }

/* Lovebirds on a power line: they bob, lean in, and a heart pops up between them */
.rf-vd-birds { position: absolute; right: 9%; bottom: 4px; width: 150px; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer;
               -webkit-tap-highlight-color: transparent; }
.rf-vd-birds .rf-vd-say { left: auto; right: 72%; top: -8px; transform-origin: 100% 100%; }
.rf-vd-mail .rf-vd-say { left: auto; right: 70%; top: -6px; transform-origin: 100% 100%; }
.rf-vd-pole { fill: #a77a4e; }
.mud-theme-dark .rf-vd-pole { fill: #8a6744; }
.rf-vd-wire { stroke: #5a4a3a; }
.mud-theme-dark .rf-vd-wire { stroke: #a89c90; }
.rf-vd-bird { transform-box: view-box; animation: rf-vd-lean-l 6s ease-in-out infinite; }
.rf-vd-bird.l { transform-origin: 61px 29px; }
.rf-vd-bird.r { transform-origin: 89px 29px; animation-name: rf-vd-lean-r; }
@keyframes rf-vd-lean-l { 0%, 100% { transform: rotate(0) translateY(0); } 15% { transform: translateY(-1.5px); } 30%, 50% { transform: rotate(0); } 58%, 72% { transform: rotate(12deg); } 80% { transform: rotate(0); } }
@keyframes rf-vd-lean-r { 0%, 100% { transform: rotate(0) translateY(0); } 22% { transform: translateY(-1.5px); } 30%, 50% { transform: rotate(0); } 58%, 72% { transform: rotate(-12deg); } 80% { transform: rotate(0); } }
.rf-vd-pop { transform-box: view-box; transform-origin: 75px 12px; opacity: 0; animation: rf-vd-pop 6s ease-out infinite; }
@keyframes rf-vd-pop { 0%, 58% { opacity: 0; transform: translateY(6px) scale(.2); } 64% { opacity: 1; transform: translateY(0) scale(1.15); } 68%, 76% { opacity: 1; transform: translateY(-2px) scale(1); } 86%, 100% { opacity: 0; transform: translateY(-12px) scale(.8); } }
.rf-vd-birds.poke-a .rf-vd-bird.l { animation: rf-vd-lean-l 6s ease-in-out 1.6s infinite, rf-vd-kiss-l-a 1.6s ease-in-out; }
.rf-vd-birds.poke-b .rf-vd-bird.l { animation: rf-vd-lean-l 6s ease-in-out 1.6s infinite, rf-vd-kiss-l-b 1.6s ease-in-out; }
.rf-vd-birds.poke-a .rf-vd-bird.r { animation: rf-vd-lean-r 6s ease-in-out 1.6s infinite, rf-vd-kiss-r-a 1.6s ease-in-out; }
.rf-vd-birds.poke-b .rf-vd-bird.r { animation: rf-vd-lean-r 6s ease-in-out 1.6s infinite, rf-vd-kiss-r-b 1.6s ease-in-out; }
@keyframes rf-vd-kiss-l-a { 0%, 100% { transform: rotate(0); } 12% { transform: translateY(-5px); } 24% { transform: translateY(0); } 40%, 75% { transform: rotate(14deg); } }
@keyframes rf-vd-kiss-l-b { 0%, 100% { transform: rotate(0); } 12% { transform: translateY(-5px); } 24% { transform: translateY(0); } 40%, 75% { transform: rotate(14deg); } }
@keyframes rf-vd-kiss-r-a { 0%, 100% { transform: rotate(0); } 18% { transform: translateY(-5px); } 30% { transform: translateY(0); } 40%, 75% { transform: rotate(-14deg); } }
@keyframes rf-vd-kiss-r-b { 0%, 100% { transform: rotate(0); } 18% { transform: translateY(-5px); } 30% { transform: translateY(0); } 40%, 75% { transform: rotate(-14deg); } }
.rf-vd-birds.poke-a .rf-vd-pop { animation: rf-vd-pop 6s ease-out 1.6s infinite, rf-vd-burst-a 1.6s ease-out; }
.rf-vd-birds.poke-b .rf-vd-pop { animation: rf-vd-pop 6s ease-out 1.6s infinite, rf-vd-burst-b 1.6s ease-out; }
@keyframes rf-vd-burst-a { 0%, 30% { opacity: 0; transform: translateY(6px) scale(.2); } 45% { opacity: 1; transform: translateY(-2px) scale(1.5); } 70% { opacity: 1; transform: translateY(-6px) scale(1.3); } 100% { opacity: 0; transform: translateY(-20px) scale(1); } }
@keyframes rf-vd-burst-b { 0%, 30% { opacity: 0; transform: translateY(6px) scale(.2); } 45% { opacity: 1; transform: translateY(-2px) scale(1.5); } 70% { opacity: 1; transform: translateY(-6px) scale(1.3); } 100% { opacity: 0; transform: translateY(-20px) scale(1); } }

/* ═════════════════════════════ First Day of Spring ═════════════════════════════ */

.rf-sp-ground { position: absolute; left: 2%; right: 2%; bottom: 0; height: 14px; z-index: 1; pointer-events: none; }
.rf-sp-ground svg { display: block; width: 100%; height: 100%; }
.rf-sp-grass { fill: #9fd987; }
.mud-theme-dark .rf-sp-grass { fill: #4f7d45; }
.rf-sp-soil { fill: #8a5a3a; }
.mud-theme-dark .rf-sp-soil { fill: #6b4a33; }

/* Butterflies: the wrapper flits along a loop, the wings flap */
.rf-sp-bfly { position: absolute; z-index: 2; width: 18px; pointer-events: none; animation: rf-sp-flit 9s ease-in-out infinite; }
.rf-sp-bfly svg { display: block; width: 100%; height: auto; overflow: visible; }
.rf-sp-bfly.b1 { left: 29%; bottom: 52px; }
.rf-sp-bfly.b2 { left: 62%; bottom: 30px; width: 15px; animation-delay: -4s; animation-duration: 10s; }
.rf-sp-bfly.b3 { left: 74%; bottom: 74px; width: 14px; animation-delay: -7s; animation-duration: 11s; animation-direction: reverse; }
.rf-sp-wing { transform-box: fill-box; animation: rf-sp-flap .32s ease-in-out infinite alternate; }
.rf-sp-wing.l { transform-origin: 100% 50%; }
.rf-sp-wing.r { transform-origin: 0% 50%; }
.rf-sp-bfly.b1 .rf-sp-wing path { fill: #ffb347; } .rf-sp-bfly.b1 .rf-sp-wing .rf-sp-wing-lo { fill: #ffd27a; }
.rf-sp-bfly.b2 .rf-sp-wing path { fill: #7ad0f0; } .rf-sp-bfly.b2 .rf-sp-wing .rf-sp-wing-lo { fill: #b5e6f7; }
.rf-sp-bfly.b3 .rf-sp-wing path { fill: #ff8fb1; } .rf-sp-bfly.b3 .rf-sp-wing .rf-sp-wing-lo { fill: #ffc2d1; }
.rf-sp-bfly.b2 .rf-sp-wing { animation-delay: -.12s; }
@keyframes rf-sp-flap { from { transform: scaleX(1); } to { transform: scaleX(.25); } }
@keyframes rf-sp-flit {
    0%, 100% { transform: translate(0, 0) rotate(-8deg); }
    25% { transform: translate(24px, -14px) rotate(10deg); }
    50% { transform: translate(44px, 2px) rotate(-4deg); }
    75% { transform: translate(16px, 10px) rotate(6deg); }
}

/* Shared speech bubble */
.rf-sp-say {
    position: absolute; z-index: 3;
    padding: 2px 8px; border-radius: 10px; white-space: nowrap;
    font-size: .7rem; font-weight: 600; line-height: 1.4;
    background: var(--mud-palette-surface, #fff); color: var(--mud-palette-text-primary, #222);
    border: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,.12));
    opacity: 0; transform: scale(.6); transform-origin: 0% 100%; pointer-events: none;
}
.rf-sp-bed.poke-a .rf-sp-say, .rf-sp-kite.poke-a .rf-sp-say { animation: rf-tg-say-a 2.2s ease-out; }
.rf-sp-bed.poke-b .rf-sp-say, .rf-sp-kite.poke-b .rf-sp-say { animation: rf-tg-say-b 2.2s ease-out; }
.rf-sp-bed .rf-sp-say { left: 86%; top: 2px; }
.rf-sp-kite .rf-sp-say { left: 44%; top: -4px; }

/* Tulip bed: stems sway, heads bloom now and then; tap and they spring up */
.rf-sp-bed { position: absolute; left: 13%; bottom: 2px; width: 104px; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer;
             -webkit-tap-highlight-color: transparent; }
.rf-sp-bed > svg, .rf-sp-kite > svg { display: block; width: 100%; height: auto; overflow: visible; }
.rf-sp-tulip { transform-box: view-box; animation: rf-sp-sway 4s ease-in-out infinite; }
.rf-sp-tulip.t1 { transform-origin: 30px 82px; }
.rf-sp-tulip.t2 { transform-origin: 55px 82px; animation-delay: -1.3s; }
.rf-sp-tulip.t3 { transform-origin: 80px 82px; animation-delay: -2.6s; }
@keyframes rf-sp-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.rf-sp-head { transform-box: fill-box; transform-origin: 50% 100%; animation: rf-sp-bloom 6s ease-in-out infinite; }
.rf-sp-tulip.t2 .rf-sp-head { animation-delay: -.4s; }
.rf-sp-tulip.t3 .rf-sp-head { animation-delay: -.8s; }
@keyframes rf-sp-bloom { 0%, 68%, 92%, 100% { transform: scale(1); } 76% { transform: scale(1.22, 1.12); } 84% { transform: scale(.96, 1.02); } }
.rf-sp-bed.poke-a .rf-sp-tulip { animation: rf-sp-sway 4s ease-in-out infinite, rf-sp-spring-a 1.1s ease-out; }
.rf-sp-bed.poke-b .rf-sp-tulip { animation: rf-sp-sway 4s ease-in-out infinite, rf-sp-spring-b 1.1s ease-out; }
.rf-sp-bed.poke-a .rf-sp-tulip.t2, .rf-sp-bed.poke-b .rf-sp-tulip.t2 { animation-delay: -1.3s, .1s; }
.rf-sp-bed.poke-a .rf-sp-tulip.t3, .rf-sp-bed.poke-b .rf-sp-tulip.t3 { animation-delay: -2.6s, .2s; }
@keyframes rf-sp-spring-a { 0%, 100% { transform: scale(1, 1); } 18% { transform: scale(1.08, .82); } 42% { transform: scale(.94, 1.16); } 66% { transform: scale(1.03, .96); } }
@keyframes rf-sp-spring-b { 0%, 100% { transform: scale(1, 1); } 18% { transform: scale(1.08, .82); } 42% { transform: scale(.94, 1.16); } 66% { transform: scale(1.03, .96); } }

/* Kite: sways on its string, the tail wiggles; tap for a loop-the-loop */
.rf-sp-kite { position: absolute; right: 7%; bottom: 2px; width: 130px; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer;
              -webkit-tap-highlight-color: transparent; }
.rf-sp-stake { fill: #a77a4e; }
.rf-sp-string { stroke: #6b5a4a; }
.mud-theme-dark .rf-sp-string { stroke: #b0a496; }
.rf-sp-swing { transform-box: view-box; transform-origin: 118px 73px; animation: rf-sp-swing 5s ease-in-out infinite; }
@keyframes rf-sp-swing { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg); } }
.rf-sp-kbody { transform-box: view-box; transform-origin: 34px 17px; animation: rf-sp-tilt 3s ease-in-out infinite; }
@keyframes rf-sp-tilt { 0%, 100% { transform: translateY(0) rotate(-7deg); } 50% { transform: translateY(-2px) rotate(7deg); } }
.rf-sp-tail { transform-box: view-box; transform-origin: 34px 34px; animation: rf-sp-tail 1.8s ease-in-out infinite; }
@keyframes rf-sp-tail { 0%, 100% { transform: rotate(10deg); } 50% { transform: rotate(-10deg); } }
.rf-sp-kite.poke-a .rf-sp-kbody { animation: rf-sp-tilt 3s ease-in-out infinite, rf-sp-loop-a 1.4s ease-in-out; }
.rf-sp-kite.poke-b .rf-sp-kbody { animation: rf-sp-tilt 3s ease-in-out infinite, rf-sp-loop-b 1.4s ease-in-out; }
@keyframes rf-sp-loop-a { 0% { transform: translateY(0) rotate(0); } 20% { transform: translateY(-8px) rotate(-30deg); } 75% { transform: translateY(-8px) rotate(330deg); } 100% { transform: translateY(0) rotate(360deg); } }
@keyframes rf-sp-loop-b { 0% { transform: translateY(0) rotate(0); } 20% { transform: translateY(-8px) rotate(-30deg); } 75% { transform: translateY(-8px) rotate(330deg); } 100% { transform: translateY(0) rotate(360deg); } }

/* ═════════════════════════════ Earth Day ═════════════════════════════ */

.rf-ed-ground { position: absolute; left: 2%; right: 2%; bottom: 0; height: 14px; z-index: 1; pointer-events: none; }
.rf-ed-ground svg { display: block; width: 100%; height: 100%; }
.rf-ed-grass { fill: #9fd987; }
.mud-theme-dark .rf-ed-grass { fill: #4f7d45; }
.rf-ed-soil { fill: #8a5a3a; }
.mud-theme-dark .rf-ed-soil { fill: #6b4a33; }

/* Dandelion seeds drift up and across */
.rf-ed-seed { position: absolute; bottom: 10px; z-index: 1; width: 11px; opacity: 0; pointer-events: none; animation: rf-ed-drift 11s linear infinite; }
.rf-ed-seed svg { display: block; width: 100%; height: auto; overflow: visible; stroke: #a08f72; }
.rf-ed-seed-tip { fill: #a08868; stroke: none; }
.mud-theme-dark .rf-ed-seed svg { stroke: #e6ddcc; }
.mud-theme-dark .rf-ed-seed-tip { fill: #cbbb9f; }
.rf-ed-seed.s1 { left: 26%; animation-delay: -1s; }
.rf-ed-seed.s2 { left: 34%; animation-delay: -6s; width: 9px; }
.rf-ed-seed.s3 { left: 58%; animation-delay: -3.5s; }
.rf-ed-seed.s4 { left: 64%; animation-delay: -9s; width: 9px; }
.rf-ed-seed.s5 { left: 20%; animation-delay: -8s; width: 10px; }
.rf-ed-seed.s6 { left: 70%; animation-delay: -4.8s; width: 10px; }
@keyframes rf-ed-drift {
    0% { opacity: 0; transform: translate(0, 0) rotate(-10deg); }
    10% { opacity: .9; }
    40% { transform: translate(26px, -34px) rotate(12deg); }
    70% { transform: translate(40px, -56px) rotate(-8deg); }
    85% { opacity: .8; }
    100% { opacity: 0; transform: translate(64px, -82px) rotate(10deg); }
}

/* Shared speech bubble */
.rf-ed-say {
    position: absolute; z-index: 3;
    padding: 2px 8px; border-radius: 10px; white-space: nowrap;
    font-size: .7rem; font-weight: 600; line-height: 1.4;
    background: var(--mud-palette-surface, #fff); color: var(--mud-palette-text-primary, #222);
    border: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,.12));
    opacity: 0; transform: scale(.6); transform-origin: 0% 100%; pointer-events: none;
}
.rf-ed-tree.poke-a .rf-ed-say, .rf-ed-power.poke-a .rf-ed-say { animation: rf-tg-say-a 2.2s ease-out; }
.rf-ed-tree.poke-b .rf-ed-say, .rf-ed-power.poke-b .rf-ed-say { animation: rf-tg-say-b 2.2s ease-out; }
.rf-ed-tree .rf-ed-say { left: 82%; top: 0; }
.rf-ed-power .rf-ed-say { left: 44%; top: -4px; }

/* Young tree: sways, sprouts wiggle; tap and it stretches up taller */
.rf-ed-tree { position: absolute; left: 13%; bottom: 2px; width: 96px; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer;
              -webkit-tap-highlight-color: transparent; }
.rf-ed-tree > svg, .rf-ed-power > svg { display: block; width: 100%; height: auto; overflow: visible; }
.rf-ed-sway { transform-box: view-box; transform-origin: 48px 80px; animation: rf-ed-sway 4.5s ease-in-out infinite; }
@keyframes rf-ed-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.rf-ed-crown { transform-box: view-box; transform-origin: 49px 40px; animation: rf-ed-rustle 6s ease-in-out infinite; }
@keyframes rf-ed-rustle { 0%, 70%, 100% { transform: scale(1); } 76% { transform: scale(1.06, .96); } 82% { transform: scale(.97, 1.04); } 88% { transform: scale(1.02, .99); } }
.rf-ed-grow { transform-box: view-box; transform-origin: 48px 80px; }
.rf-ed-tree.poke-a .rf-ed-grow { animation: rf-ed-grow-a 1.8s ease-out; }
.rf-ed-tree.poke-b .rf-ed-grow { animation: rf-ed-grow-b 1.8s ease-out; }
@keyframes rf-ed-grow-a { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.06, .9); } 40% { transform: scale(1.12, 1.28); } 60%, 80% { transform: scale(1.1, 1.2); } }
@keyframes rf-ed-grow-b { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.06, .9); } 40% { transform: scale(1.12, 1.28); } 60%, 80% { transform: scale(1.1, 1.2); } }
.rf-ed-sprouts { transform-box: view-box; transform-origin: 50px 80px; animation: rf-ed-pop 6s ease-in-out infinite; }
@keyframes rf-ed-pop { 0%, 30%, 50%, 100% { transform: scaleY(1); } 38% { transform: scaleY(1.25); } 44% { transform: scaleY(.92); } }

/* Wind turbine + solar panel: blades turn, the panel glints; tap and the blades whoosh around */
.rf-ed-power { position: absolute; right: 7%; bottom: 2px; width: 130px; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer;
               -webkit-tap-highlight-color: transparent; }
.rf-ed-tower { fill: #e8edf2; stroke: #9aa7b4; stroke-width: 1.2; }
.rf-ed-blade { fill: #ffffff; stroke: #9aa7b4; stroke-width: 1.1; stroke-linejoin: round; }
.rf-ed-hub { fill: #cfd8e0; stroke: #8794a1; stroke-width: 1.1; }
.mud-theme-dark .rf-ed-tower { fill: #c9d2db; stroke: #7d8a97; }
.mud-theme-dark .rf-ed-blade { fill: #eef2f6; stroke: #7d8a97; }
.rf-ed-blades { transform-box: view-box; transform-origin: 0 0; animation: rf-ed-turn 5s linear infinite; }
@keyframes rf-ed-turn { to { transform: rotate(360deg); } }
.rf-ed-boost { transform-box: view-box; transform-origin: 0 0; }
.rf-ed-power.poke-a .rf-ed-boost { animation: rf-ed-boost-a 1.6s cubic-bezier(.3, .6, .4, 1); }
.rf-ed-power.poke-b .rf-ed-boost { animation: rf-ed-boost-b 1.6s cubic-bezier(.3, .6, .4, 1); }
@keyframes rf-ed-boost-a { from { transform: rotate(0); } to { transform: rotate(1080deg); } }
@keyframes rf-ed-boost-b { from { transform: rotate(0); } to { transform: rotate(1080deg); } }
.rf-ed-glint { animation: rf-ed-glint 5s ease-in-out infinite; }
@keyframes rf-ed-glint { 0%, 60% { transform: translateX(0); } 85%, 100% { transform: translateX(66px); } }
.rf-ed-spark { transform-box: fill-box; transform-origin: center; opacity: 0; animation: rf-ed-spark 5s ease-in-out infinite; }
@keyframes rf-ed-spark { 0%, 78%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 86% { opacity: 1; transform: scale(1.1) rotate(45deg); } }
.rf-ed-power.poke-a .rf-ed-spark { animation: rf-ed-spark 5s ease-in-out infinite, rf-ed-spark-a 1.4s ease-out; }
.rf-ed-power.poke-b .rf-ed-spark { animation: rf-ed-spark 5s ease-in-out infinite, rf-ed-spark-b 1.4s ease-out; }
@keyframes rf-ed-spark-a { 0% { opacity: 0; transform: scale(.4); } 30%, 70% { opacity: 1; transform: scale(1.3) rotate(90deg); } 100% { opacity: 0; transform: scale(.4) rotate(180deg); } }
@keyframes rf-ed-spark-b { 0% { opacity: 0; transform: scale(.4); } 30%, 70% { opacity: 1; transform: scale(1.3) rotate(90deg); } 100% { opacity: 0; transform: scale(.4) rotate(180deg); } }

/* ═════════════════════════════ Drinking Water Week ═════════════════════════════ */

.rf-dw-ground { position: absolute; left: 2%; right: 2%; bottom: 0; height: 14px; z-index: 1; pointer-events: none; }
.rf-dw-ground svg { display: block; width: 100%; height: 100%; }
.rf-dw-grass { fill: #9fd987; }
.mud-theme-dark .rf-dw-grass { fill: #4f7d45; }

/* Bubbles float up and pop */
.rf-dw-bub { position: absolute; bottom: 12px; z-index: 1; width: 8px; height: 8px; border-radius: 50%; opacity: 0; pointer-events: none;
             border: 1.4px solid #6cb8ea; background: radial-gradient(circle at 32% 30%, #ffffff 0 22%, rgba(140, 205, 245, .25) 24%);
             animation: rf-dw-float 7s ease-in infinite; }
.mud-theme-dark .rf-dw-bub { border-color: #8fd0f5; background: radial-gradient(circle at 32% 30%, #ffffff 0 22%, rgba(140, 205, 245, .15) 24%); }
.rf-dw-bub.b1 { left: 27%; animation-delay: -1s; }
.rf-dw-bub.b2 { left: 33%; animation-delay: -4.5s; width: 6px; height: 6px; }
.rf-dw-bub.b3 { left: 40%; animation-delay: -2.6s; width: 10px; height: 10px; }
.rf-dw-bub.b4 { left: 58%; animation-delay: -5.8s; }
.rf-dw-bub.b5 { left: 63%; animation-delay: -.4s; width: 6px; height: 6px; }
.rf-dw-bub.b6 { left: 69%; animation-delay: -3.4s; width: 9px; height: 9px; }
.rf-dw-bub.b7 { left: 22%; animation-delay: -6.4s; width: 7px; height: 7px; }
.rf-dw-bub.b8 { left: 52%; animation-delay: -2s; width: 7px; height: 7px; }
@keyframes rf-dw-float {
    0% { opacity: 0; transform: translate(0, 0) scale(.6); }
    12% { opacity: .9; }
    35% { transform: translate(6px, -30px) scale(.9); }
    65% { transform: translate(-5px, -60px) scale(1); }
    88% { opacity: .85; transform: translate(4px, -80px) scale(1.05); }
    100% { opacity: 0; transform: translate(4px, -86px) scale(1.6); }
}

/* Shared speech bubble */
.rf-dw-say {
    position: absolute; z-index: 3;
    padding: 2px 8px; border-radius: 10px; white-space: nowrap;
    font-size: .7rem; font-weight: 600; line-height: 1.4;
    background: var(--mud-palette-surface, #fff); color: var(--mud-palette-text-primary, #222);
    border: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,.12));
    opacity: 0; transform: scale(.6); transform-origin: 0% 100%; pointer-events: none;
}
.rf-dw-tower.poke-a .rf-dw-say, .rf-dw-tap.poke-a .rf-dw-say { animation: rf-tg-say-a 2.2s ease-out; }
.rf-dw-tower.poke-b .rf-dw-say, .rf-dw-tap.poke-b .rf-dw-say { animation: rf-tg-say-b 2.2s ease-out; }
.rf-dw-tower .rf-dw-say { left: 84%; top: 4px; }
.rf-dw-tap .rf-dw-say { left: auto; right: 84%; top: 0; transform-origin: 100% 100%; }

.rf-dw-tower, .rf-dw-tap { position: absolute; bottom: 2px; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer;
                           -webkit-tap-highlight-color: transparent; }
.rf-dw-tower > svg, .rf-dw-tap > svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Water tower: sways and smiles; tap and it hops and sprinkles droplets */
.rf-dw-tower { left: 13%; width: 92px; }
.rf-dw-legs { fill: none; stroke: #8794a1; stroke-width: 2.4; stroke-linecap: round; }
.rf-dw-roof { fill: #4f9fd8; stroke: #2a6e9e; stroke-width: 1.4; stroke-linejoin: round; }
.rf-dw-body { fill: #9ad6f7; stroke: #2a6e9e; stroke-width: 1.5; }
.rf-dw-band { fill: none; stroke: #5fb0e6; stroke-width: 3; }
.mud-theme-dark .rf-dw-legs { stroke: #a5b1bd; }
.rf-dw-sway { transform-box: view-box; transform-origin: 50px 82px; animation: rf-dw-sway 5s ease-in-out infinite; }
@keyframes rf-dw-sway { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
.rf-dw-tank { transform-box: view-box; transform-origin: 50px 46px; animation: rf-dw-squish 6s ease-in-out infinite; }
@keyframes rf-dw-squish { 0%, 72%, 100% { transform: scale(1); } 78% { transform: scale(1.05, .94); } 85% { transform: scale(.97, 1.04); } 91% { transform: scale(1.01, .99); } }
.rf-dw-hop { transform-box: view-box; transform-origin: 50px 82px; }
.rf-dw-tower.poke-a .rf-dw-hop { animation: rf-dw-hop-a .9s ease-out; }
.rf-dw-tower.poke-b .rf-dw-hop { animation: rf-dw-hop-b .9s ease-out; }
@keyframes rf-dw-hop-a { 0%, 100% { transform: translateY(0) scale(1); } 15% { transform: translateY(0) scale(1.05, .9); } 40% { transform: translateY(-9px) scale(.97, 1.05); } 65% { transform: translateY(0) scale(1.04, .95); } 82% { transform: translateY(-2px) scale(1); } }
@keyframes rf-dw-hop-b { 0%, 100% { transform: translateY(0) scale(1); } 15% { transform: translateY(0) scale(1.05, .9); } 40% { transform: translateY(-9px) scale(.97, 1.05); } 65% { transform: translateY(0) scale(1.04, .95); } 82% { transform: translateY(-2px) scale(1); } }
.rf-dw-sd { fill: #5fb8f5; stroke: #2a6e9e; stroke-width: .8; opacity: 0; }
.rf-dw-tower.poke-a .rf-dw-sd.d1 { animation: rf-dw-sd1-a 1.2s ease-out .25s; } .rf-dw-tower.poke-b .rf-dw-sd.d1 { animation: rf-dw-sd1-b 1.2s ease-out .25s; }
.rf-dw-tower.poke-a .rf-dw-sd.d2 { animation: rf-dw-sd2-a 1.2s ease-out .25s; } .rf-dw-tower.poke-b .rf-dw-sd.d2 { animation: rf-dw-sd2-b 1.2s ease-out .25s; }
.rf-dw-tower.poke-a .rf-dw-sd.d3 { animation: rf-dw-sd3-a 1.2s ease-out .25s; } .rf-dw-tower.poke-b .rf-dw-sd.d3 { animation: rf-dw-sd3-b 1.2s ease-out .25s; }
@keyframes rf-dw-sd1-a { 0% { opacity: 0; transform: translate(0, 4px) rotate(0); } 20% { opacity: 1; } 55% { transform: translate(-16px, -8px) rotate(-35deg); } 100% { opacity: 0; transform: translate(-24px, 10px) rotate(-60deg); } }
@keyframes rf-dw-sd1-b { 0% { opacity: 0; transform: translate(0, 4px) rotate(0); } 20% { opacity: 1; } 55% { transform: translate(-16px, -8px) rotate(-35deg); } 100% { opacity: 0; transform: translate(-24px, 10px) rotate(-60deg); } }
@keyframes rf-dw-sd2-a { 0% { opacity: 0; transform: translate(0, 4px); } 20% { opacity: 1; } 55% { transform: translate(0, -14px); } 100% { opacity: 0; transform: translate(0, -4px); } }
@keyframes rf-dw-sd2-b { 0% { opacity: 0; transform: translate(0, 4px); } 20% { opacity: 1; } 55% { transform: translate(0, -14px); } 100% { opacity: 0; transform: translate(0, -4px); } }
@keyframes rf-dw-sd3-a { 0% { opacity: 0; transform: translate(0, 4px) rotate(0); } 20% { opacity: 1; } 55% { transform: translate(16px, -8px) rotate(35deg); } 100% { opacity: 0; transform: translate(24px, 10px) rotate(60deg); } }
@keyframes rf-dw-sd3-b { 0% { opacity: 0; transform: translate(0, 4px) rotate(0); } 20% { opacity: 1; } 55% { transform: translate(16px, -8px) rotate(35deg); } 100% { opacity: 0; transform: translate(24px, 10px) rotate(60deg); } }

/* Faucet + glass: drips with a ripple; tap and it pours, filling the glass */
.rf-dw-tap { right: 7%; width: 120px; }
.rf-dw-pipe { fill: #cfd8e0; stroke: #7d8a97; stroke-width: 1.4; stroke-linejoin: round; }
.rf-dw-knob { fill: #5fb0e6; stroke: #2a6e9e; stroke-width: 1.3; }
.rf-dw-glass { fill: rgba(225, 242, 255, .7); stroke: none; }
.rf-dw-glass-line { stroke: #6e8ea8; stroke-width: 1.5; stroke-linejoin: round; }
.mud-theme-dark .rf-dw-glass { fill: rgba(200, 230, 255, .18); }
.mud-theme-dark .rf-dw-glass-line { stroke: #a9c4da; }
.rf-dw-water { fill: #6cc4f7; }
.rf-dw-stream { fill: #6cc4f7; transform-box: view-box; transform-origin: 76px 41px; transform: scaleY(0); }
.rf-dw-ripple { fill: none; stroke: #ffffff; stroke-width: .9; transform-box: fill-box; transform-origin: center; opacity: 0; animation: rf-dw-ripple 3.2s ease-out infinite; }
@keyframes rf-dw-ripple { 0%, 34% { opacity: 0; transform: scale(.3); } 38% { opacity: .9; } 70%, 100% { opacity: 0; transform: scale(1.7); } }
.rf-dw-drip { fill: #6cc4f7; stroke: #2a6e9e; stroke-width: .6; opacity: 0; animation: rf-dw-drip 3.2s ease-in infinite; }
@keyframes rf-dw-drip { 0%, 4% { opacity: 0; transform: translateY(0) scale(.4); } 14% { opacity: 1; transform: translateY(0) scale(1); } 24% { opacity: 1; transform: translateY(0); } 36% { opacity: 1; transform: translateY(22px); } 37%, 100% { opacity: 0; transform: translateY(22px); } }
.rf-dw-handle { transform-box: view-box; transform-origin: 50px 18.5px; }
.rf-dw-fill { transform-box: view-box; }
.rf-dw-tap.poke-a .rf-dw-handle { animation: rf-dw-turn-a 2.4s ease-in-out; } .rf-dw-tap.poke-b .rf-dw-handle { animation: rf-dw-turn-b 2.4s ease-in-out; }
.rf-dw-tap.poke-a .rf-dw-stream { animation: rf-dw-pour-a 2.4s ease-in-out; } .rf-dw-tap.poke-b .rf-dw-stream { animation: rf-dw-pour-b 2.4s ease-in-out; }
.rf-dw-tap.poke-a .rf-dw-fill { animation: rf-dw-fill-a 3.2s ease-in-out; } .rf-dw-tap.poke-b .rf-dw-fill { animation: rf-dw-fill-b 3.2s ease-in-out; }
@keyframes rf-dw-turn-a { 0%, 100% { transform: rotate(0); } 12%, 70% { transform: rotate(-24deg); } 82% { transform: rotate(4deg); } }
@keyframes rf-dw-turn-b { 0%, 100% { transform: rotate(0); } 12%, 70% { transform: rotate(-24deg); } 82% { transform: rotate(4deg); } }
@keyframes rf-dw-pour-a { 0%, 10% { transform: scaleY(0); } 22%, 68% { transform: scaleY(1); } 72% { transform: translateY(14px) scaleY(.4); opacity: 1; } 76%, 100% { transform: translateY(27px) scaleY(0); opacity: 0; } }
@keyframes rf-dw-pour-b { 0%, 10% { transform: scaleY(0); } 22%, 68% { transform: scaleY(1); } 72% { transform: translateY(14px) scaleY(.4); opacity: 1; } 76%, 100% { transform: translateY(27px) scaleY(0); opacity: 0; } }
@keyframes rf-dw-fill-a { 0%, 15% { transform: translateY(0); } 55%, 75% { transform: translateY(-9px); } 100% { transform: translateY(0); } }
@keyframes rf-dw-fill-b { 0%, 15% { transform: translateY(0); } 55%, 75% { transform: translateY(-9px); } 100% { transform: translateY(0); } }

/* ═════════════════════════════ Bike to Work Day ═════════════════════════════ */

.rf-bk-ground { position: absolute; left: 2%; right: 2%; bottom: 0; height: 16px; z-index: 1; pointer-events: none; }
.rf-bk-ground svg { display: block; width: 100%; height: 100%; }
.rf-bk-grass { fill: #9fd987; }
.rf-bk-path { fill: #c3cad1; }
.rf-bk-dash { fill: none; stroke: #ffffff; stroke-width: 1.2; stroke-dasharray: 7 6; }
.mud-theme-dark .rf-bk-grass { fill: #4f7d45; }
.mud-theme-dark .rf-bk-path { fill: #59636d; }
.mud-theme-dark .rf-bk-dash { stroke: #d6dde3; }

/* Clouds drift slowly across the sky */
.rf-bk-cloud { position: absolute; left: 0; width: 100%; height: 0; z-index: 0; pointer-events: none; }
.rf-bk-cloud svg { display: block; width: 52px; height: auto; }
.rf-bk-puff { fill: #ffffff; stroke: #c8dcec; stroke-width: 1.2; stroke-linejoin: round; }
.mud-theme-dark .rf-bk-puff { fill: #3a4654; stroke: #56677a; }
.rf-bk-cloud.c1 { top: 6px; animation: rf-bk-drift 46s linear -8s infinite; }
.rf-bk-cloud.c2 { top: 24px; animation: rf-bk-drift 60s linear -34s infinite; }
.rf-bk-cloud.c2 svg { width: 40px; opacity: .85; }
.rf-bk-cloud.c3 { top: 2px; animation: rf-bk-drift 54s linear -20s infinite; }
.rf-bk-cloud.c3 svg { width: 34px; opacity: .75; }
@keyframes rf-bk-drift { from { transform: translateX(-60px); } to { transform: translateX(calc(100% + 10px)); } }

/* A little rider pedals along the path */
.rf-bk-lane { position: absolute; left: 0; width: 100%; bottom: 5px; height: 0; z-index: 1; pointer-events: none;
              animation: rf-bk-ride 13s linear 1.5s infinite both; }
.rf-bk-rider { position: absolute; left: 0; bottom: 0; width: 60px; }
.rf-season--bike-to-work .rf-season-sprite { z-index: 2; }  /* the rider passes behind the sprite */
.rf-bk-rider svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes rf-bk-ride { 0% { transform: translateX(-80px); } 52%, 100% { transform: translateX(calc(100% + 20px)); } }
.rf-bk-bob { animation: rf-bk-bob .45s ease-in-out infinite alternate; }
@keyframes rf-bk-bob { from { transform: translateY(0); } to { transform: translateY(-1px); } }
.rf-bk-ghost { transform-box: view-box; transform-origin: 28px 27px; animation: rf-bk-lean .9s ease-in-out infinite alternate; }
@keyframes rf-bk-lean { from { transform: rotate(-2deg); } to { transform: rotate(3deg); } }
.rf-bk-tire { fill: none; stroke: #2d3640; stroke-width: 2.6; }
.mud-theme-dark .rf-bk-tire { stroke: #c6ced6; }
.rf-bk-spokes { fill: none; stroke: #9aa5b0; stroke-width: .9; transform-box: fill-box; transform-origin: center; animation: rf-bk-spin .7s linear infinite; }
@keyframes rf-bk-spin { to { transform: rotate(360deg); } }
.rf-bk-frame { fill: none; stroke: #2fb39a; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.rf-bk-crank { transform-box: view-box; transform-origin: 32px 44px; animation: rf-bk-spin .9s linear infinite; }
.rf-bk-arm { stroke: #5b6672; stroke-width: 1.8; stroke-linecap: round; }
.rf-bk-pedal { stroke: #2d3640; stroke-width: 1.6; stroke-linecap: round; }
.mud-theme-dark .rf-bk-arm, .mud-theme-dark .rf-bk-pedal { stroke: #aeb8c2; }
.rf-bk-saddle { fill: #3a2f2a; stroke: #3a2f2a; stroke-width: 1; stroke-linejoin: round; }
.mud-theme-dark .rf-bk-saddle { fill: #8a6d5e; stroke: #8a6d5e; }
.rf-bk-gbody { fill: #57c4d4; stroke: #123f4a; stroke-width: 1.3; stroke-linejoin: round; }
.rf-bk-garm { fill: none; stroke: #123f4a; stroke-width: 2.6; stroke-linecap: round; }
.rf-bk-helm { fill: #ffb347; stroke: #123f4a; stroke-width: 1.2; stroke-linejoin: round; }
.rf-bk-vent { fill: none; stroke: #c46a14; stroke-width: 1.4; stroke-linecap: round; }
.rf-bk-whoosh path { fill: none; stroke: #9cc7e6; stroke-width: 1.4; stroke-linecap: round; }
.rf-bk-whoosh { animation: rf-bk-whoosh .5s ease-in-out infinite alternate; }
@keyframes rf-bk-whoosh { from { opacity: .25; transform: translateX(2px); } to { opacity: .85; transform: translateX(-2px); } }

/* Shared speech bubble */
.rf-bk-say {
    position: absolute; z-index: 3;
    padding: 2px 8px; border-radius: 10px; white-space: nowrap;
    font-size: .7rem; font-weight: 600; line-height: 1.4;
    background: var(--mud-palette-surface, #fff); color: var(--mud-palette-text-primary, #222);
    border: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,.12));
    opacity: 0; transform: scale(.6); transform-origin: 0% 100%; pointer-events: none;
}
.rf-bk-park.poke-a .rf-bk-say, .rf-bk-signal.poke-a .rf-bk-say { animation: rf-tg-say-a 2.2s ease-out; }
.rf-bk-park.poke-b .rf-bk-say, .rf-bk-signal.poke-b .rf-bk-say { animation: rf-tg-say-b 2.2s ease-out; }
.rf-bk-park .rf-bk-say { left: 86%; top: 0; }
.rf-bk-signal .rf-bk-say { left: auto; right: 80%; top: 2px; transform-origin: 100% 100%; }

.rf-bk-park, .rf-bk-signal { position: absolute; bottom: 3px; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer;
                             -webkit-tap-highlight-color: transparent; }
.rf-bk-park > svg, .rf-bk-signal > svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Parked bike: flowers sway, the bell jingles; tap and it rings and the wheel spins */
.rf-bk-park { left: 12%; width: 100px; }
.rf-bk-rack { fill: none; stroke: #9aa5b0; stroke-width: 3; stroke-linecap: round; }
.mud-theme-dark .rf-bk-rack { stroke: #6f7b87; }
.rf-bk-pwheel .rf-bk-spokes { animation: none; }
.rf-bk-pframe { fill: none; stroke: #ff7a9c; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.rf-bk-bar { fill: none; stroke: #2d3640; stroke-width: 2.6; stroke-linecap: round; }
.mud-theme-dark .rf-bk-bar { stroke: #c6ced6; }
.rf-bk-kick { fill: none; stroke: #8794a1; stroke-width: 2; stroke-linecap: round; }
.rf-bk-hub { fill: #9aa5b0; stroke: #5b6672; stroke-width: 1; }
.rf-bk-basket { fill: #e3b07a; stroke: #8a5a2b; stroke-width: 1.4; stroke-linejoin: round; }
.rf-bk-weave { fill: none; stroke: #b07a44; stroke-width: 1; }
.rf-bk-stem { fill: none; stroke: #3f9a4a; stroke-width: 1.4; stroke-linecap: round; }
.rf-bk-posy { transform-box: view-box; transform-origin: 80px 31px; animation: rf-bk-posy 3.4s ease-in-out infinite; }
@keyframes rf-bk-posy { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.rf-bk-bloom circle:first-child { stroke: #b2537a; stroke-width: .6; }
.rf-bk-belldome { fill: #ffd34d; stroke: #9a6a00; stroke-width: 1; }
.rf-bk-pbell { transform-box: view-box; transform-origin: 63px 26.5px; animation: rf-bk-jingle 5s ease-in-out infinite; }
@keyframes rf-bk-jingle { 0%, 80%, 100% { transform: rotate(0); } 84% { transform: rotate(-14deg); } 88% { transform: rotate(10deg); } 92% { transform: rotate(-5deg); } }
.rf-bk-ring { fill: none; stroke: #f0a020; stroke-width: 1.5; stroke-linecap: round; opacity: 0; transform-box: fill-box; transform-origin: 100% 50%; }
.rf-bk-ring.r1 { animation: rf-bk-ring 5s ease-out infinite; }
.rf-bk-ring.r2 { animation: rf-bk-ring 5s ease-out .1s infinite; }
@keyframes rf-bk-ring { 0%, 82% { opacity: 0; transform: scale(.6); } 86% { opacity: .9; } 97%, 100% { opacity: 0; transform: scale(1.25); } }
.rf-bk-park.poke-a .rf-bk-pbell { animation: rf-bk-jingle 5s ease-in-out infinite, rf-bk-ding-a 1.1s ease-in-out; }
.rf-bk-park.poke-b .rf-bk-pbell { animation: rf-bk-jingle 5s ease-in-out infinite, rf-bk-ding-b 1.1s ease-in-out; }
@keyframes rf-bk-ding-a { 0%, 100% { transform: rotate(0); } 10%, 50% { transform: rotate(-22deg); } 30%, 70% { transform: rotate(18deg); } 85% { transform: rotate(-6deg); } }
@keyframes rf-bk-ding-b { 0%, 100% { transform: rotate(0); } 10%, 50% { transform: rotate(-22deg); } 30%, 70% { transform: rotate(18deg); } 85% { transform: rotate(-6deg); } }
.rf-bk-park.poke-a .rf-bk-ring.r1 { animation: rf-bk-ring 5s ease-out infinite, rf-bk-ringtap-a .55s ease-out 2; }
.rf-bk-park.poke-b .rf-bk-ring.r1 { animation: rf-bk-ring 5s ease-out infinite, rf-bk-ringtap-b .55s ease-out 2; }
.rf-bk-park.poke-a .rf-bk-ring.r2 { animation: rf-bk-ring 5s ease-out .1s infinite, rf-bk-ringtap-a .55s ease-out .1s 2; }
.rf-bk-park.poke-b .rf-bk-ring.r2 { animation: rf-bk-ring 5s ease-out .1s infinite, rf-bk-ringtap-b .55s ease-out .1s 2; }
@keyframes rf-bk-ringtap-a { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes rf-bk-ringtap-b { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }
.rf-bk-park.poke-a .rf-bk-pwheel .rf-bk-spokes { animation: rf-bk-whirl-a 1.6s cubic-bezier(.2, .7, .3, 1); }
.rf-bk-park.poke-b .rf-bk-pwheel .rf-bk-spokes { animation: rf-bk-whirl-b 1.6s cubic-bezier(.2, .7, .3, 1); }
@keyframes rf-bk-whirl-a { from { transform: rotate(0); } to { transform: rotate(900deg); } }
@keyframes rf-bk-whirl-b { from { transform: rotate(0); } to { transform: rotate(900deg); } }

/* Bike signal: cycles red/green; tap and it flips to green */
.rf-bk-signal { right: 8%; width: 62px; }
.rf-bk-pole { fill: #8794a1; }
.rf-bk-sign { fill: #2f80c8; stroke: #ffffff; stroke-width: 1.4; }
.rf-bk-signglyph { fill: none; stroke: #ffffff; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.rf-bk-box { fill: #36414d; stroke: #1f2830; stroke-width: 1.4; }
.mud-theme-dark .rf-bk-box { fill: #2a333d; stroke: #6f7b87; }
.rf-bk-dim { fill: #4b5662; }
.rf-bk-visor { fill: none; stroke: #1f2830; stroke-width: 2.4; stroke-linecap: round; }
.rf-bk-lglyph { fill: none; stroke: rgba(20, 28, 36, .7); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.rf-bk-redlit { fill: #ff5f5f; animation: rf-bk-red 8s steps(1, end) infinite; }
.rf-bk-greenlit { fill: #5fe08a; animation: rf-bk-green 8s steps(1, end) infinite; }
@keyframes rf-bk-red { 0% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes rf-bk-green { 0% { opacity: 0; } 50%, 100% { opacity: 1; } }
.rf-bk-head { transform-box: view-box; transform-origin: 30px 84px; }
.rf-bk-signal.poke-a .rf-bk-redlit { animation: rf-bk-red 8s steps(1, end) infinite, rf-bk-off-a 2.4s; }
.rf-bk-signal.poke-b .rf-bk-redlit { animation: rf-bk-red 8s steps(1, end) infinite, rf-bk-off-b 2.4s; }
.rf-bk-signal.poke-a .rf-bk-greenlit { animation: rf-bk-green 8s steps(1, end) infinite, rf-bk-go-a 2.4s ease-out; }
.rf-bk-signal.poke-b .rf-bk-greenlit { animation: rf-bk-green 8s steps(1, end) infinite, rf-bk-go-b 2.4s ease-out; }
.rf-bk-signal.poke-a .rf-bk-head { animation: rf-bk-nod-a .8s ease-out; }
.rf-bk-signal.poke-b .rf-bk-head { animation: rf-bk-nod-b .8s ease-out; }
@keyframes rf-bk-off-a { from, to { opacity: 0; } }
@keyframes rf-bk-off-b { from, to { opacity: 0; } }
@keyframes rf-bk-go-a { 0%, 30%, 60%, 100% { opacity: 1; } 15%, 45% { opacity: .45; } }
@keyframes rf-bk-go-b { 0%, 30%, 60%, 100% { opacity: 1; } 15%, 45% { opacity: .45; } }
@keyframes rf-bk-nod-a { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-5deg); } 55% { transform: rotate(3deg); } 80% { transform: rotate(-1deg); } }
@keyframes rf-bk-nod-b { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-5deg); } 55% { transform: rotate(3deg); } 80% { transform: rotate(-1deg); } }

/* ═════════════════════════════ First Day of Summer ═════════════════════════════ */

/* Sea rolls behind a sandy beach */
.rf-su-sea { position: absolute; left: 2%; right: 2%; bottom: 8px; height: 14px; overflow: hidden; z-index: 0; pointer-events: none;
             border-radius: 6px 6px 0 0; }
.rf-su-waves { width: 200%; height: 100%; animation: rf-su-roll 9s linear infinite; }
.rf-su-waves svg { display: block; width: 100%; height: 100%; }
@keyframes rf-su-roll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.rf-su-water { fill: #8fd3f4; }
.rf-su-foam { fill: none; stroke: #ffffff; stroke-width: 1.4; }
.rf-su-glitter { fill: none; stroke: #ffffff; stroke-width: 1; stroke-linecap: round; opacity: .8; }
.mud-theme-dark .rf-su-water { fill: #2f6f92; }
.mud-theme-dark .rf-su-foam { stroke: #a9dcf2; }
.mud-theme-dark .rf-su-glitter { stroke: #bfe6f7; opacity: .55; }
.rf-su-sand { position: absolute; left: 2%; right: 2%; bottom: 0; height: 12px; z-index: 1; pointer-events: none; }
.rf-su-sand svg { display: block; width: 100%; height: 100%; }
.rf-su-beachsand { fill: #f3dca2; }
.rf-su-dots circle { fill: #d4b26a; }
.mud-theme-dark .rf-su-beachsand { fill: #a88d55; }
.mud-theme-dark .rf-su-dots circle { fill: #7d6634; }

/* A little sailboat drifts by on the sea */
.rf-su-lane { position: absolute; left: 0; width: 100%; bottom: 13px; height: 0; z-index: 0; pointer-events: none;
              animation: rf-su-sail 34s linear -9s infinite; }
.rf-su-boat { position: absolute; left: 0; bottom: 0; width: 30px; }
.rf-su-boat svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes rf-su-sail { from { transform: translateX(-40px); } to { transform: translateX(calc(100% + 10px)); } }
.rf-su-rock { transform-box: view-box; transform-origin: 20px 32px; animation: rf-su-rock 2.6s ease-in-out infinite; }
@keyframes rf-su-rock { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(1px); } }
.rf-su-mast { stroke: #6b4a2b; stroke-width: 1.4; }
.rf-su-sail1 { fill: #ffffff; stroke: #9fb3c2; stroke-width: 1; stroke-linejoin: round; }
.rf-su-sail2 { fill: #ffe08a; stroke: #c9a03c; stroke-width: 1; stroke-linejoin: round; }
.rf-su-pennant { fill: #ff7aa8; }
.rf-su-hull { fill: #ff6f5e; stroke: #b5413a; stroke-width: 1; stroke-linejoin: round; }
.rf-su-stripe { stroke: #ffffff; stroke-width: 1.2; }

/* Seagulls glide overhead */
.rf-su-gull { position: absolute; left: 0; width: 100%; height: 0; z-index: 0; pointer-events: none; }
.rf-su-gull svg { display: block; width: 18px; height: auto; overflow: visible; }
.rf-su-gull.g1 { top: 14px; animation: rf-su-glide 22s linear -4s infinite; }
.rf-su-gull.g2 { top: 26px; animation: rf-su-glide 22s linear -6.5s infinite; }
.rf-su-gull.g2 svg { width: 13px; }
@keyframes rf-su-glide { 0% { transform: translateX(-30px) translateY(0); } 50% { transform: translateX(50%) translateY(-5px); } 100% { transform: translateX(calc(100% + 10px)) translateY(0); } }
.rf-su-wing { fill: none; stroke: #5d6f7d; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
              transform-box: fill-box; transform-origin: 50% 80%; animation: rf-su-flap .6s ease-in-out infinite alternate; }
.mud-theme-dark .rf-su-wing { stroke: #c9d4dc; }
@keyframes rf-su-flap { from { transform: scaleY(1); } to { transform: scaleY(.35); } }

/* Shared speech bubble */
.rf-su-say {
    position: absolute; z-index: 3;
    padding: 2px 8px; border-radius: 10px; white-space: nowrap;
    font-size: .7rem; font-weight: 600; line-height: 1.4;
    background: var(--mud-palette-surface, #fff); color: var(--mud-palette-text-primary, #222);
    border: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,.12));
    opacity: 0; transform: scale(.6); transform-origin: 0% 100%; pointer-events: none;
}
.rf-su-sun.poke-a .rf-su-say, .rf-su-beach.poke-a .rf-su-say { animation: rf-tg-say-a 2.2s ease-out; }
.rf-su-sun.poke-b .rf-su-say, .rf-su-beach.poke-b .rf-su-say { animation: rf-tg-say-b 2.2s ease-out; }
.rf-su-sun .rf-su-say { left: 96%; top: 18px; transform-origin: 0% 50%; }
.rf-su-beach .rf-su-say { left: auto; right: 90%; top: 6px; transform-origin: 100% 100%; }

.rf-su-sun, .rf-su-beach { position: absolute; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer;
                           -webkit-tap-highlight-color: transparent; }
.rf-su-sun > svg, .rf-su-beach > svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Smiling sun: rays turn slowly; tap and it pops on sunglasses while the rays spin */
.rf-su-sun { left: 11%; top: 2px; width: 66px; }
.rf-su-rays { fill: #ffc93c; transform-box: view-box; transform-origin: 40px 40px; animation: rf-su-turn 24s linear infinite; }
@keyframes rf-su-turn { to { transform: rotate(360deg); } }
.rf-su-disc { fill: #ffd84d; stroke: #f0a020; stroke-width: 1.6; }
.mud-theme-dark .rf-su-disc { stroke: #ffcf5a; }
.rf-su-face { transform-box: view-box; transform-origin: 40px 40px; animation: rf-su-beam 4s ease-in-out infinite; }
@keyframes rf-su-beam { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.rf-su-shades { opacity: 0; transform: translateY(-26px); }
.rf-su-sun.poke-a .rf-su-shades { animation: rf-su-shades-a 2.8s cubic-bezier(.3, 1.4, .5, 1); }
.rf-su-sun.poke-b .rf-su-shades { animation: rf-su-shades-b 2.8s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes rf-su-shades-a { 0% { opacity: 0; transform: translateY(-26px); } 18%, 80% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-26px); } }
@keyframes rf-su-shades-b { 0% { opacity: 0; transform: translateY(-26px); } 18%, 80% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-26px); } }
.rf-su-sun.poke-a .rf-su-rays { animation: rf-su-turn 24s linear infinite, rf-su-whirl-a 1.4s cubic-bezier(.2, .7, .3, 1); }
.rf-su-sun.poke-b .rf-su-rays { animation: rf-su-turn 24s linear infinite, rf-su-whirl-b 1.4s cubic-bezier(.2, .7, .3, 1); }
@keyframes rf-su-whirl-a { from { transform: rotate(0) scale(1.1); } to { transform: rotate(360deg) scale(1); } }
@keyframes rf-su-whirl-b { from { transform: rotate(0) scale(1.1); } to { transform: rotate(360deg) scale(1); } }

/* Beach umbrella, sandcastle and a bouncing beach ball; tap for a big bounce */
.rf-su-beach { right: 6%; bottom: 3px; width: 120px; }
.rf-su-pole { stroke: #8a6a4a; stroke-width: 2.4; stroke-linecap: round; }
.rf-su-canopy { fill: #ff7aa8; stroke: #b2436d; stroke-width: 1.4; stroke-linejoin: round; }
.rf-su-panel { fill: none; stroke: #ffffff; stroke-width: 2.4; stroke-linecap: round; }
.rf-su-tip { fill: #ffd34d; stroke: #b2436d; stroke-width: 1; }
.rf-su-umb { transform-box: view-box; transform-origin: 46px 78px; animation: rf-su-umb 5s ease-in-out infinite; }
@keyframes rf-su-umb { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
.rf-su-sc { fill: #f0cf86; stroke: #b98f3e; stroke-width: 1.2; stroke-linejoin: round; }
.rf-su-scd { fill: #c99b4c; }
.mud-theme-dark .rf-su-sc { fill: #c9a75e; stroke: #8a6a2c; }
.rf-su-flagpole { stroke: #6b4a2b; stroke-width: 1.2; }
.rf-su-flag { fill: #3aa0ff; transform-box: fill-box; transform-origin: 0 50%; animation: rf-su-flag .8s ease-in-out infinite alternate; }
@keyframes rf-su-flag { from { transform: scaleX(1) skewY(0); } to { transform: scaleX(.75) skewY(8deg); } }
.rf-su-ballrim { fill: none; stroke: #123f4a; stroke-width: 1.3; }
.rf-su-ballshadow { fill: #123f4a; opacity: .18; transform-box: fill-box; transform-origin: center; animation: rf-su-shadow 1.6s ease-in-out infinite; }
.rf-su-ballhop { animation: rf-su-hop 1.6s ease-in-out infinite; }
@keyframes rf-su-hop { 0%, 100% { transform: translateY(0); animation-timing-function: ease-out; } 50% { transform: translateY(-6px); animation-timing-function: ease-in; } }
@keyframes rf-su-shadow { 0%, 100% { transform: scaleX(1); opacity: .2; } 50% { transform: scaleX(.75); opacity: .1; } }
.rf-su-ball { transform-box: fill-box; transform-origin: center; animation: rf-su-roll-ball 6s linear infinite; }
@keyframes rf-su-roll-ball { to { transform: rotate(360deg); } }
.rf-su-beach.poke-a .rf-su-ballhop { animation: rf-su-hop 1.6s ease-in-out infinite, rf-su-boing-a 1.3s; }
.rf-su-beach.poke-b .rf-su-ballhop { animation: rf-su-hop 1.6s ease-in-out infinite, rf-su-boing-b 1.3s; }
@keyframes rf-su-boing-a { 0% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .8, .4, 1); } 40% { transform: translateY(-46px); animation-timing-function: cubic-bezier(.6, 0, .8, .2); }
                           75% { transform: translateY(0); animation-timing-function: ease-out; } 87% { transform: translateY(-9px); animation-timing-function: ease-in; } 100% { transform: translateY(0); } }
@keyframes rf-su-boing-b { 0% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .8, .4, 1); } 40% { transform: translateY(-46px); animation-timing-function: cubic-bezier(.6, 0, .8, .2); }
                           75% { transform: translateY(0); animation-timing-function: ease-out; } 87% { transform: translateY(-9px); animation-timing-function: ease-in; } 100% { transform: translateY(0); } }
.rf-su-beach.poke-a .rf-su-ball { animation: rf-su-roll-ball 6s linear infinite, rf-su-spin-a 1.3s ease-out; }
.rf-su-beach.poke-b .rf-su-ball { animation: rf-su-roll-ball 6s linear infinite, rf-su-spin-b 1.3s ease-out; }
@keyframes rf-su-spin-a { from { transform: rotate(0); } to { transform: rotate(540deg); } }
@keyframes rf-su-spin-b { from { transform: rotate(0); } to { transform: rotate(540deg); } }

/* ═════════════════════════════ Independence Day ═════════════════════════════ */

/* Fireworks rise and bloom in the sky */
.rf-fj-fw { position: absolute; top: -12px; width: 40px; z-index: 0; pointer-events: none; }
.rf-fj-fw svg { display: block; width: 100%; height: auto; overflow: visible; }
.rf-fj-fw.f1 { left: 26%; color: #ff4d6d; --fj-dot: #ffc531; }
.rf-fj-fw.f2 { left: 63%; color: #3a7bff; --fj-dot: #ff7aa8; }
.rf-fj-fw.f3 { left: 39%; top: -18px; width: 32px; color: #ffa41f; --fj-dot: #3a7bff; }
.rf-fj-rays { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.rf-fj-dots circle { fill: var(--fj-dot); }
.rf-fj-core { fill: #ffe27a; }
.rf-fj-rise { fill: currentColor; opacity: 0; }
.rf-fj-burst { transform-box: fill-box; transform-origin: center; opacity: 0; }
.rf-fj-fw.f1 .rf-fj-rise { animation: rf-fj-rise 4.2s ease-out infinite; }
.rf-fj-fw.f1 .rf-fj-burst { animation: rf-fj-burst 4.2s ease-out infinite; }
.rf-fj-fw.f2 .rf-fj-rise { animation: rf-fj-rise 4.2s ease-out -1.7s infinite; }
.rf-fj-fw.f2 .rf-fj-burst { animation: rf-fj-burst 4.2s ease-out -1.7s infinite; }
.rf-fj-fw.f3 .rf-fj-rise { animation: rf-fj-rise 5s ease-out -3.1s infinite; }
.rf-fj-fw.f3 .rf-fj-burst { animation: rf-fj-burst 5s ease-out -3.1s infinite; }
@keyframes rf-fj-rise { 0% { opacity: 0; transform: translateY(0); } 3% { opacity: 1; } 27% { opacity: 1; transform: translateY(-48px); } 30%, 100% { opacity: 0; transform: translateY(-48px); } }
@keyframes rf-fj-burst { 0%, 28% { opacity: 0; transform: scale(.15); } 32% { opacity: 1; } 50% { opacity: 1; transform: scale(1); }
                         72% { opacity: 1; transform: scale(1.06) translateY(1.5px); } 86% { opacity: 0; transform: scale(1.12) translateY(3px); } 100% { opacity: 0; transform: scale(.15); } }

/* Grassy park */
.rf-fj-ground { position: absolute; left: 2%; right: 2%; bottom: 0; height: 16px; z-index: 1; pointer-events: none; }
.rf-fj-ground svg { display: block; width: 100%; height: 100%; }
.rf-fj-grass { fill: #9fd987; }
.mud-theme-dark .rf-fj-grass { fill: #4f7d45; }

/* Shared speech bubble */
.rf-fj-say {
    position: absolute; z-index: 3;
    padding: 2px 8px; border-radius: 10px; white-space: nowrap;
    font-size: .7rem; font-weight: 600; line-height: 1.4;
    background: var(--mud-palette-surface, #fff); color: var(--mud-palette-text-primary, #222);
    border: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,.12));
    opacity: 0; transform: scale(.6); transform-origin: 0% 100%; pointer-events: none;
}
.rf-fj-picnic.poke-a .rf-fj-say, .rf-fj-drum.poke-a .rf-fj-say { animation: rf-tg-say-a 2.2s ease-out; }
.rf-fj-picnic.poke-b .rf-fj-say, .rf-fj-drum.poke-b .rf-fj-say { animation: rf-tg-say-b 2.2s ease-out; }
.rf-fj-picnic .rf-fj-say { left: 62%; top: -8px; }
.rf-fj-drum .rf-fj-say { left: auto; right: 92%; top: 14px; transform-origin: 100% 100%; }

.rf-fj-picnic, .rf-fj-drum { position: absolute; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer;
                             -webkit-tap-highlight-color: transparent; }
.rf-fj-picnic > svg, .rf-fj-drum > svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Picnic blanket: watermelon slice, lemonade, a waving flag; tap and the slice hops and seeds pop */
.rf-fj-picnic { left: 8%; bottom: 2px; width: 112px; }
.rf-fj-blanket { fill: #ef4b63; }
.rf-fj-check { fill: none; stroke: #ffffff; stroke-width: 2.4; opacity: .75; }
.rf-fj-edge { fill: none; stroke: #b02f45; stroke-width: 1.2; stroke-linejoin: round; }
.mud-theme-dark .rf-fj-blanket { fill: #c93d55; }
.mud-theme-dark .rf-fj-check { opacity: .55; }
.rf-fj-pole { stroke: #8a6a4a; stroke-width: 1.4; stroke-linecap: round; }
.rf-fj-cloth { transform-box: fill-box; transform-origin: 0 50%; animation: rf-fj-wave 1.4s ease-in-out infinite alternate; }
@keyframes rf-fj-wave { from { transform: skewY(0) scaleX(1); } to { transform: skewY(6deg) scaleX(.9); } }
.rf-fj-melon { transform-box: fill-box; transform-origin: 50% 100%; animation: rf-fj-wobble 3s ease-in-out infinite; }
@keyframes rf-fj-wobble { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-5deg); } 86% { transform: rotate(4deg); } 93% { transform: rotate(-2deg); } }
.rf-fj-seeds ellipse { opacity: 0; transform-box: fill-box; transform-origin: center; }
.rf-fj-picnic.poke-a .rf-fj-melon { animation: rf-fj-wobble 3s ease-in-out infinite, rf-fj-hop-a .8s cubic-bezier(.3, 1.5, .5, 1); }
.rf-fj-picnic.poke-b .rf-fj-melon { animation: rf-fj-wobble 3s ease-in-out infinite, rf-fj-hop-b .8s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes rf-fj-hop-a { 0% { transform: translateY(0) scale(1.08, .9); } 40% { transform: translateY(-12px) scale(.96, 1.06); } 100% { transform: translateY(0); } }
@keyframes rf-fj-hop-b { 0% { transform: translateY(0) scale(1.08, .9); } 40% { transform: translateY(-12px) scale(.96, 1.06); } 100% { transform: translateY(0); } }
.rf-fj-picnic.poke-a .s1 { animation: rf-fj-seed1-a 1s ease-out .15s; } .rf-fj-picnic.poke-b .s1 { animation: rf-fj-seed1-b 1s ease-out .15s; }
.rf-fj-picnic.poke-a .s2 { animation: rf-fj-seed2-a 1s ease-out .15s; } .rf-fj-picnic.poke-b .s2 { animation: rf-fj-seed2-b 1s ease-out .15s; }
.rf-fj-picnic.poke-a .s3 { animation: rf-fj-seed3-a 1s ease-out .15s; } .rf-fj-picnic.poke-b .s3 { animation: rf-fj-seed3-b 1s ease-out .15s; }
@keyframes rf-fj-seed1-a { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(-12px, -14px) rotate(-200deg); } }
@keyframes rf-fj-seed1-b { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(-12px, -14px) rotate(-200deg); } }
@keyframes rf-fj-seed2-a { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(0, -20px) rotate(180deg); } }
@keyframes rf-fj-seed2-b { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(0, -20px) rotate(180deg); } }
@keyframes rf-fj-seed3-a { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(12px, -14px) rotate(200deg); } }
@keyframes rf-fj-seed3-b { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(12px, -14px) rotate(200deg); } }

/* Parade drum: sticks tap a beat; tap for a drumroll and a big firework overhead */
.rf-fj-drum { right: 7%; bottom: 4px; width: 66px; }
.rf-fj-stick { transform-box: view-box; }
.rf-fj-stick.s1 { transform-origin: 9px 17px; animation: rf-fj-tap1 1.2s ease-in infinite; }
.rf-fj-stick.s2 { transform-origin: 71px 17px; animation: rf-fj-tap2 1.2s ease-in -.6s infinite; }
@keyframes rf-fj-tap1 { 0%, 40%, 100% { transform: rotate(0); } 20% { transform: rotate(-16deg); } }
@keyframes rf-fj-tap2 { 0%, 40%, 100% { transform: rotate(0); } 20% { transform: rotate(16deg); } }
.rf-fj-drumbody { transform-box: fill-box; transform-origin: 50% 100%; }
.rf-fj-drum.poke-a .rf-fj-stick.s1 { animation: rf-fj-tap1 1.2s ease-in infinite, rf-fj-roll1 .2s ease-in-out 5; }
.rf-fj-drum.poke-b .rf-fj-stick.s1 { animation: rf-fj-tap1 1.2s ease-in infinite, rf-fj-roll1b .2s ease-in-out 5; }
.rf-fj-drum.poke-a .rf-fj-stick.s2 { animation: rf-fj-tap2 1.2s ease-in -.6s infinite, rf-fj-roll2 .2s ease-in-out .1s 5; }
.rf-fj-drum.poke-b .rf-fj-stick.s2 { animation: rf-fj-tap2 1.2s ease-in -.6s infinite, rf-fj-roll2b .2s ease-in-out .1s 5; }
@keyframes rf-fj-roll1 { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-14deg); } }
@keyframes rf-fj-roll1b { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-14deg); } }
@keyframes rf-fj-roll2 { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(14deg); } }
@keyframes rf-fj-roll2b { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(14deg); } }
.rf-fj-drum.poke-a .rf-fj-drumbody { animation: rf-fj-thump-a 1.1s ease-out; }
.rf-fj-drum.poke-b .rf-fj-drumbody { animation: rf-fj-thump-b 1.1s ease-out; }
@keyframes rf-fj-thump-a { 0%, 20%, 40%, 60%, 80%, 100% { transform: scale(1); } 10%, 30%, 50%, 70%, 90% { transform: scale(1.05, .94); } }
@keyframes rf-fj-thump-b { 0%, 20%, 40%, 60%, 80%, 100% { transform: scale(1); } 10%, 30%, 50%, 70%, 90% { transform: scale(1.05, .94); } }
.rf-fj-boom { opacity: 0; transform-box: fill-box; transform-origin: center; }
.rf-fj-boomrays { fill: none; stroke: #ff4d6d; stroke-width: 2; stroke-linecap: round; }
.rf-fj-boomrays2 { fill: none; stroke: #3a7bff; stroke-width: 3.4; stroke-linecap: round; }
.rf-fj-drum.poke-a .rf-fj-boom { animation: rf-fj-boom-a 1.5s ease-out .9s backwards; }
.rf-fj-drum.poke-b .rf-fj-boom { animation: rf-fj-boom-b 1.5s ease-out .9s backwards; }
@keyframes rf-fj-boom-a { 0% { opacity: 0; transform: scale(.15); } 12% { opacity: 1; } 55% { opacity: 1; transform: scale(1.25); } 100% { opacity: 0; transform: scale(1.4) translateY(3px); } }
@keyframes rf-fj-boom-b { 0% { opacity: 0; transform: scale(.15); } 12% { opacity: 1; } 55% { opacity: 1; transform: scale(1.25); } 100% { opacity: 0; transform: scale(1.4) translateY(3px); } }

/* ═════════════════════════════ First Day of Fall ═════════════════════════════ */

/* Maple leaves drifting down: outer span falls, inner span rocks side to side */
.rf-fa-leaf { position: absolute; top: -14px; width: 14px; z-index: 0; pointer-events: none; opacity: 0; }
.rf-fa-leaf > span { display: block; }
.rf-fa-leaf svg { display: block; width: 100%; height: auto; }
.rf-fa-vein { fill: none; stroke: rgba(90, 40, 10, .45); stroke-width: .7; stroke-linecap: round; }
.rf-fa-leaf.l1 { left: 22%; fill: #f2702b; animation: rf-fa-fall 9s linear infinite; }
.rf-fa-leaf.l2 { left: 36%; width: 11px; fill: #e8453c; animation: rf-fa-fall 11s linear -4s infinite; }
.rf-fa-leaf.l3 { left: 58%; fill: #f5b82e; animation: rf-fa-fall 10s linear -7s infinite; }
.rf-fa-leaf.l4 { left: 70%; width: 12px; fill: #d9562a; animation: rf-fa-fall 12s linear -2s infinite; }
.rf-fa-leaf.l5 { left: 84%; width: 10px; fill: #f2a03b; animation: rf-fa-fall 9.5s linear -5.5s infinite; }
.rf-fa-leaf > span { animation: rf-fa-rock 2.6s ease-in-out infinite alternate; }
.rf-fa-leaf.l2 > span, .rf-fa-leaf.l4 > span { animation-duration: 3.2s; animation-delay: -1s; }
@keyframes rf-fa-fall { 0% { opacity: 0; transform: translateY(0); } 8% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(118px); } }
@keyframes rf-fa-rock { from { transform: translateX(-12px) rotate(-35deg); } to { transform: translateX(12px) rotate(40deg); } }

/* Grassy hill */
.rf-fa-ground { position: absolute; left: 2%; right: 2%; bottom: 0; height: 16px; z-index: 1; pointer-events: none; }
.rf-fa-ground svg { display: block; width: 100%; height: 100%; }
.rf-fa-grass { fill: #b9cf7a; }
.mud-theme-dark .rf-fa-grass { fill: #66773d; }

/* Shared speech bubble */
.rf-fa-say {
    position: absolute; z-index: 3;
    padding: 2px 8px; border-radius: 10px; white-space: nowrap;
    font-size: .7rem; font-weight: 600; line-height: 1.4;
    background: var(--mud-palette-surface, #fff); color: var(--mud-palette-text-primary, #222);
    border: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,.12));
    opacity: 0; transform: scale(.6); transform-origin: 0% 100%; pointer-events: none;
}
.rf-fa-tree.poke-a .rf-fa-say, .rf-fa-squirrel.poke-a .rf-fa-say { animation: rf-tg-say-a 2.2s ease-out; }
.rf-fa-tree.poke-b .rf-fa-say, .rf-fa-squirrel.poke-b .rf-fa-say { animation: rf-tg-say-b 2.2s ease-out; }
.rf-fa-tree .rf-fa-say { left: 88%; top: 4px; }
.rf-fa-squirrel .rf-fa-say { left: auto; right: 84%; top: 0; transform-origin: 100% 100%; }

.rf-fa-tree, .rf-fa-squirrel { position: absolute; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer;
                               -webkit-tap-highlight-color: transparent; }
.rf-fa-tree > svg, .rf-fa-squirrel > svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Autumn tree: tap and it shakes, a few leaves tumble */
.rf-fa-tree { left: 8%; bottom: 3px; width: 90px; }
.rf-fa-trunk { fill: #8a5a3a; stroke: #5a3418; stroke-width: 1.3; stroke-linejoin: round; }
.rf-fa-crown circle { stroke: none; }
.rf-fa-crown .c1 { fill: #f28c28; } .rf-fa-crown .c2 { fill: #e8553d; } .rf-fa-crown .c3 { fill: #f5a623; }
.rf-fa-crown .c4 { fill: #ffd166; } .rf-fa-crown .c5 { fill: #d9452e; }
.mud-theme-dark .rf-fa-crown .c1 { fill: #d9781f; } .mud-theme-dark .rf-fa-crown .c2 { fill: #c94532; } .mud-theme-dark .rf-fa-crown .c3 { fill: #dc921c; }
.rf-fa-pile { fill: #e8803a; stroke: #a8441a; stroke-width: .8; }
.rf-fa-sway { transform-box: view-box; transform-origin: 45px 89px; animation: rf-fa-sway 5s ease-in-out infinite; }
@keyframes rf-fa-sway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
.rf-fa-tree.poke-a .rf-fa-sway { animation: rf-fa-sway 5s ease-in-out infinite, rf-fa-shake-a .8s ease-in-out; }
.rf-fa-tree.poke-b .rf-fa-sway { animation: rf-fa-sway 5s ease-in-out infinite, rf-fa-shake-b .8s ease-in-out; }
@keyframes rf-fa-shake-a { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-5deg); } 35% { transform: rotate(4.5deg); } 55% { transform: rotate(-3deg); } 75% { transform: rotate(2deg); } }
@keyframes rf-fa-shake-b { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-5deg); } 35% { transform: rotate(4.5deg); } 55% { transform: rotate(-3deg); } 75% { transform: rotate(2deg); } }
.rf-fa-drop { opacity: 0; transform-box: fill-box; transform-origin: center; }
.rf-fa-drop.d1 { fill: #e8453c; } .rf-fa-drop.d2 { fill: #f5b82e; } .rf-fa-drop.d3 { fill: #f2702b; }
.rf-fa-tree.poke-a .d1 { animation: rf-fa-drop1-a 1.8s ease-in .2s; } .rf-fa-tree.poke-b .d1 { animation: rf-fa-drop1-b 1.8s ease-in .2s; }
.rf-fa-tree.poke-a .d2 { animation: rf-fa-drop2-a 1.8s ease-in .35s; } .rf-fa-tree.poke-b .d2 { animation: rf-fa-drop2-b 1.8s ease-in .35s; }
.rf-fa-tree.poke-a .d3 { animation: rf-fa-drop3-a 1.8s ease-in .1s; } .rf-fa-tree.poke-b .d3 { animation: rf-fa-drop3-b 1.8s ease-in .1s; }
@keyframes rf-fa-drop1-a { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 50% { transform: translate(-8px, 20px) rotate(-120deg); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-2px, 40px) rotate(-220deg); } }
@keyframes rf-fa-drop1-b { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 50% { transform: translate(-8px, 20px) rotate(-120deg); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-2px, 40px) rotate(-220deg); } }
@keyframes rf-fa-drop2-a { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 50% { transform: translate(7px, 18px) rotate(140deg); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(2px, 38px) rotate(240deg); } }
@keyframes rf-fa-drop2-b { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 50% { transform: translate(7px, 18px) rotate(140deg); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(2px, 38px) rotate(240deg); } }
@keyframes rf-fa-drop3-a { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 50% { transform: translate(10px, 22px) rotate(100deg); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(16px, 44px) rotate(200deg); } }
@keyframes rf-fa-drop3-b { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 50% { transform: translate(10px, 22px) rotate(100deg); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(16px, 44px) rotate(200deg); } }

/* Squirrel: tail flicks and it nibbles; tap and it hops and tosses its acorn */
.rf-fa-squirrel { right: 8%; bottom: 3px; width: 66px; }
.rf-fa-fur, .rf-fa-tail { fill: #c8763a; }
.mud-theme-dark .rf-fa-fur, .mud-theme-dark .rf-fa-tail { fill: #b86a32; }
.rf-fa-tail { transform-box: view-box; transform-origin: 34px 50px; animation: rf-fa-flick 3.4s ease-in-out infinite; }
@keyframes rf-fa-flick { 0%, 60%, 100% { transform: rotate(0); } 68% { transform: rotate(-8deg); } 76% { transform: rotate(4deg); } 84% { transform: rotate(-4deg); } }
.rf-fa-head { transform-box: view-box; transform-origin: 46px 36px; animation: rf-fa-nibble 2.2s ease-in-out infinite; }
@keyframes rf-fa-nibble { 0%, 50%, 100% { transform: rotate(0); } 58%, 74% { transform: rotate(7deg); } 66%, 82% { transform: rotate(3deg); } }
.rf-fa-sq, .rf-fa-nut { transform-box: fill-box; transform-origin: 50% 100%; }
.rf-fa-nut { transform-origin: center; }
.rf-fa-squirrel.poke-a .rf-fa-sq { animation: rf-fa-hop-a .8s cubic-bezier(.3, 1.4, .5, 1); }
.rf-fa-squirrel.poke-b .rf-fa-sq { animation: rf-fa-hop-b .8s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes rf-fa-hop-a { 0% { transform: translateY(0) scale(1.06, .9); } 40% { transform: translateY(-10px) scale(.96, 1.05); } 70% { transform: translateY(0) scale(1.04, .95); } 100% { transform: translateY(0); } }
@keyframes rf-fa-hop-b { 0% { transform: translateY(0) scale(1.06, .9); } 40% { transform: translateY(-10px) scale(.96, 1.05); } 70% { transform: translateY(0) scale(1.04, .95); } 100% { transform: translateY(0); } }
.rf-fa-squirrel.poke-a .rf-fa-nut { animation: rf-fa-toss-a 1.2s ease-in-out .15s; }
.rf-fa-squirrel.poke-b .rf-fa-nut { animation: rf-fa-toss-b 1.2s ease-in-out .15s; }
@keyframes rf-fa-toss-a { 0%, 100% { transform: translateY(0) rotate(0); } 45% { transform: translateY(-26px) rotate(300deg); } 80% { transform: translateY(0) rotate(360deg); } }
@keyframes rf-fa-toss-b { 0%, 100% { transform: translateY(0) rotate(0); } 45% { transform: translateY(-26px) rotate(300deg); } 80% { transform: translateY(0) rotate(360deg); } }

/* ═════════════════════════════ Public Power Week ═════════════════════════════ */

/* Power lines between two utility poles (wire svg stretches in x only) */
.rf-pp-lines { position: absolute; left: 2%; right: 2%; top: 14px; height: 30px; z-index: 0; pointer-events: none; }
.rf-pp-lines svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rf-pp-wire { fill: none; stroke: #5c6670; stroke-width: 1.2; }
.rf-pp-wire.w2 { stroke-width: 1; opacity: .7; }
.mud-theme-dark .rf-pp-wire { stroke: #7d8894; }
.rf-pp-pole { position: absolute; top: 18px; bottom: 3px; width: 5px; margin-left: -2.5px; z-index: 0; pointer-events: none;
              background: #8a6a4a; border-radius: 2px 2px 0 0; }
.rf-pp-pole.p1 { left: 26%; } .rf-pp-pole.p2 { left: 74%; }
.rf-pp-pole::before, .rf-pp-pole::after { content: ""; position: absolute; left: -9px; width: 23px; height: 3px; background: #6e5238; border-radius: 1px; }
.rf-pp-pole::before { top: 0; } .rf-pp-pole::after { top: 6px; width: 19px; left: -7px; }
.mud-theme-dark .rf-pp-pole { background: #7a5c40; }
.mud-theme-dark .rf-pp-pole::before, .mud-theme-dark .rf-pp-pole::after { background: #634a32; }

/* Little birds perched on the wire */
.rf-pp-bird { position: absolute; top: 12px; width: 20px; margin-left: -10px; z-index: 1; pointer-events: none; }
.rf-pp-bird svg { display: block; width: 100%; height: auto; overflow: visible; }
.rf-pp-bird.b1 { left: 38%; }
.rf-pp-bird.b2 { left: 62%; transform: scaleX(-1); }
.rf-pp-bbody, .rf-pp-btail { fill: #6fb7e8; }
.rf-pp-bird.b2 .rf-pp-bbody, .rf-pp-bird.b2 .rf-pp-btail { fill: #f28c8c; }
.rf-pp-bwing { fill: rgba(0, 0, 0, .14); }
.rf-pp-bob { transform-box: fill-box; transform-origin: 50% 100%; animation: rf-pp-bob 3.2s ease-in-out infinite; }
.rf-pp-bird.b2 .rf-pp-bob { animation-delay: -1.3s; animation-duration: 3.8s; }
@keyframes rf-pp-bob { 0%, 55%, 100% { transform: rotate(0) translateY(0); } 62% { transform: rotate(-12deg) translateY(-1px); } 70% { transform: rotate(4deg); } 78% { transform: rotate(-8deg) translateY(-1px); } 86% { transform: rotate(0); } }

/* Grassy ground */
.rf-pp-ground { position: absolute; left: 2%; right: 2%; bottom: 0; height: 16px; z-index: 1; pointer-events: none; }
.rf-pp-ground svg { display: block; width: 100%; height: 100%; }
.rf-pp-grass { fill: #a8d98a; }
.mud-theme-dark .rf-pp-grass { fill: #4f7d45; }

/* Shared speech bubble */
.rf-pp-say {
    position: absolute; z-index: 3;
    padding: 2px 8px; border-radius: 10px; white-space: nowrap;
    font-size: .7rem; font-weight: 600; line-height: 1.4;
    background: var(--mud-palette-surface, #fff); color: var(--mud-palette-text-primary, #222);
    border: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,.12));
    opacity: 0; transform: scale(.6); transform-origin: 0% 100%; pointer-events: none;
}
.rf-pp-house.poke-a .rf-pp-say, .rf-pp-turbine.poke-a .rf-pp-say { animation: rf-tg-say-a 2.2s ease-out; }
.rf-pp-house.poke-b .rf-pp-say, .rf-pp-turbine.poke-b .rf-pp-say { animation: rf-tg-say-b 2.2s ease-out; }
.rf-pp-house .rf-pp-say { left: 84%; top: 10px; }
.rf-pp-turbine .rf-pp-say { left: auto; right: 78%; top: 2px; transform-origin: 100% 100%; }

.rf-pp-house, .rf-pp-turbine { position: absolute; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer;
                               -webkit-tap-highlight-color: transparent; }
.rf-pp-house > svg, .rf-pp-turbine > svg { display: block; width: 100%; height: auto; overflow: visible; }

/* House with rooftop solar: tap and the lights flicker off, then pop back on */
.rf-pp-house { left: 6%; bottom: 3px; width: 92px; }
.rf-pp-wall { fill: #f2e6cf; }
.rf-pp-roof { fill: #6d8fb3; }
.rf-pp-solar { fill: #2d4f86; }
.rf-pp-door { fill: #b5653a; }
.mud-theme-dark .rf-pp-wall { fill: #c7b898; }
.mud-theme-dark .rf-pp-roof { fill: #4f6d8f; }
.rf-pp-win rect { fill: #ffe27a; }
.rf-pp-glow { fill: #fff3a0; opacity: .35; }
.rf-pp-pop { opacity: 0; transform-box: view-box; transform-origin: 45px 54px; }
.rf-pp-house.poke-a .rf-pp-win rect { animation: rf-pp-flick-a 1.6s steps(1); }
.rf-pp-house.poke-b .rf-pp-win rect { animation: rf-pp-flick-b 1.6s steps(1); }
@keyframes rf-pp-flick-a { 0% { opacity: .15; } 30% { opacity: .7; } 38% { opacity: .15; } 50%, 100% { opacity: 1; } }
@keyframes rf-pp-flick-b { 0% { opacity: .15; } 30% { opacity: .7; } 38% { opacity: .15; } 50%, 100% { opacity: 1; } }
.rf-pp-house.poke-a .rf-pp-pop { animation: rf-pp-pop-a 1.6s ease-out; }
.rf-pp-house.poke-b .rf-pp-pop { animation: rf-pp-pop-b 1.6s ease-out; }
@keyframes rf-pp-pop-a { 0%, 48% { opacity: 0; transform: scale(.8); } 58% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.2); } }
@keyframes rf-pp-pop-b { 0%, 48% { opacity: 0; transform: scale(.8); } 58% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.2); } }

/* Wind turbine: slow steady spin; tap and it whirls up fast */
.rf-pp-turbine { right: 8%; bottom: 3px; width: 54px; }
.rf-pp-tower { fill: #e9edf1; stroke: #8a96a3; stroke-width: 1.1; }
.rf-pp-blade { fill: #f7f9fb; stroke: #8a96a3; stroke-width: 1.1; stroke-linejoin: round; }
.rf-pp-hub { fill: #cfd6dd; stroke: #8a96a3; stroke-width: 1.1; }
.mud-theme-dark .rf-pp-tower, .mud-theme-dark .rf-pp-blade { fill: #d4dae0; }
.rf-pp-rotor, .rf-pp-spin { transform-box: view-box; transform-origin: 30px 30px; }
.rf-pp-rotor { animation: rf-pp-turn 6s linear infinite; }
@keyframes rf-pp-turn { to { transform: rotate(360deg); } }
.rf-pp-turbine.poke-a .rf-pp-spin { animation: rf-pp-whirl-a 2s cubic-bezier(.2, .7, .3, 1); }
.rf-pp-turbine.poke-b .rf-pp-spin { animation: rf-pp-whirl-b 2s cubic-bezier(.2, .7, .3, 1); }
@keyframes rf-pp-whirl-a { from { transform: rotate(0); } to { transform: rotate(1080deg); } }
@keyframes rf-pp-whirl-b { from { transform: rotate(0); } to { transform: rotate(1080deg); } }

/* ── Mobile: 375–430px phones ── */
@media (max-width: 599.98px) {
    .rf-season-stage { height: 86px; }
    .rf-season-sprite { width: 64px; }
    .rf-hw-pumpkin.p1 { left: 6%; width: 38px; }
    .rf-hw-pumpkin.p2 { display: none; }
    .rf-hw-pumpkin.p3 { right: 6%; width: 42px; }
    .rf-hw-ghost.g1 { left: 2%; top: 10px; width: 26px; }
    .rf-hw-pumpkin { bottom: 8px; }
    .rf-hw-ghost.g2,
    .rf-hw-batlane.b2 { display: none; }
    .rf-hw-peek { right: 24%; width: 24px; }
    .rf-hw-batlane.b1 { top: 4px; }
    .rf-hw-bat { width: 28px; }

    /* Recycles: sprite steps left so the whole recycling line fits beside it */
    .rf-season--america-recycles-day { --rf-sprite-x: 22%; --rf-tip-arrow-x: 52px; }
    .rf-rc-yard { right: 1%; transform: scale(.62); }
    .rf-rc-sapling, .rf-rc-tuft.t1 { display: none; }
    .rf-rc-plane-inner { width: 28px; }

    /* Thanksgiving: fewer leaves, smaller gourds and turkey */
    .rf-tg-leaf.l2, .rf-tg-leaf.l4, .rf-tg-leaf.l6, .rf-tg-leaf.l8 { display: none; }
    .rf-tg-gourds { display: none; }      /* phones: the cornucopia takes the gourds' spot */
    .rf-tg-horn { left: 1%; width: 100px; }
    .rf-tg-turkey { right: 3%; width: 70px; }

    /* Winter: fewer flakes, smaller snowman and penguin */
    .rf-wn-flake.f2, .rf-wn-flake.f4, .rf-wn-flake.f6, .rf-wn-flake.f8, .rf-wn-flake.f10, .rf-wn-flake.f12 { display: none; }
    .rf-wn-snowman { left: 5%; width: 52px; }
    .rf-wn-pines { width: 72px; bottom: 6px; }
    .rf-wn-pines.left { left: 0; }
    .rf-wn-pines.right { right: 0; }
    .rf-wn-penguin { right: 8%; width: 44px; }
    .rf-wn-bulb { flex-basis: 46px; width: 46px; }

    /* New Year's: fewer fireworks and confetti, smaller balloons and clock */
    .rf-ny-fw.w3, .rf-ny-fw.w4 { display: none; }
    .rf-ny-fw.w1 { left: 18%; } .rf-ny-fw.w2 { left: 66%; width: 52px; height: 52px; }
    .rf-ny-cf.c2, .rf-ny-cf.c4, .rf-ny-cf.c6, .rf-ny-cf.c8, .rf-ny-cf.c10, .rf-ny-cf.c12, .rf-ny-cf.c14 { display: none; }
    .rf-ny-balloons { left: 5%; width: 50px; }
    .rf-ny-clock { right: 6%; width: 50px; }
    .rf-ny-sky-tile { flex-basis: 120px; width: 120px; }

    /* Groundhog Day */
    .rf-gh-hog { left: 1%; width: 96px; }
    .rf-gh-crocus { right: 4%; width: 52px; }
    .rf-gh-sky { right: 20%; width: 74px; }
    .rf-gh-sun { width: 36px; } .rf-gh-cloud { width: 50px; top: 10px; }
    .rf-gh-flake.f2, .rf-gh-flake.f4 { display: none; }

    /* Valentine's Day */
    .rf-vd-mail { left: 1%; width: 64px; }
    .rf-vd-mail .rf-vd-say { right: auto; left: 92%; top: 4px; transform-origin: 0% 100%; }
    .rf-vd-birds { right: 0; width: 108px; }
    .rf-vd-heart.h2, .rf-vd-heart.h5, .rf-vd-heart.h8 { display: none; }

    /* First Day of Spring */
    .rf-sp-bed { left: 0; width: 74px; }
    .rf-sp-bed .rf-sp-say { left: 8%; top: -16px; }
    .rf-sp-kite { right: 0; width: 96px; }
    .rf-sp-bfly.b1 { left: 24%; bottom: 46px; }
    .rf-sp-bfly.b3 { display: none; }

    /* Earth Day */
    .rf-ed-tree { left: 0; width: 70px; }
    .rf-ed-tree .rf-ed-say { left: 8%; top: -18px; }
    .rf-ed-power { right: 0; width: 100px; }
    .rf-ed-power .rf-ed-say { left: auto; right: 40%; top: -18px; transform-origin: 100% 100%; }
    .rf-ed-seed.s2, .rf-ed-seed.s4 { display: none; }

    /* Drinking Water Week */
    .rf-dw-tower { left: 0; width: 66px; }
    .rf-dw-tower .rf-dw-say { left: 70%; top: -14px; }
    .rf-dw-tap { right: 0; width: 92px; }
    .rf-dw-tap .rf-dw-say { right: 30%; top: -18px; }
    .rf-dw-bub.b2, .rf-dw-bub.b5, .rf-dw-bub.b7 { display: none; }

    /* Bike to Work Day */
    .rf-bk-park { left: 0; width: 72px; }
    .rf-bk-park .rf-bk-say { left: 56%; top: -16px; }
    .rf-bk-signal { right: 2px; width: 46px; }
    .rf-bk-signal .rf-bk-say { right: 50%; top: -16px; }
    .rf-bk-rider { width: 44px; }
    .rf-bk-cloud.c3 { display: none; }

    /* First Day of Summer */
    .rf-su-sun { left: 0; width: 50px; }
    .rf-su-sun .rf-su-say { left: 92%; top: 10px; }
    .rf-su-beach { right: 0; width: 88px; }
    .rf-su-beach .rf-su-say { right: 40%; top: -14px; }
    .rf-su-gull.g2 { display: none; }

    /* Independence Day */
    .rf-fj-picnic { left: 0; width: 80px; }
    .rf-fj-picnic .rf-fj-say { left: 55%; top: -16px; }
    .rf-fj-drum { right: 0; width: 50px; }
    .rf-fj-drum .rf-fj-say { right: 60%; top: -14px; }
    .rf-fj-fw.f1 { left: 24%; }
    .rf-fj-fw.f3 { display: none; }

    /* First Day of Fall */
    .rf-fa-tree { left: 0; width: 66px; }
    .rf-fa-tree .rf-fa-say { left: 70%; top: -14px; }
    .rf-fa-squirrel { right: 0; width: 50px; }
    .rf-fa-squirrel .rf-fa-say { right: 56%; top: -18px; }
    .rf-fa-leaf.l4, .rf-fa-leaf.l5 { display: none; }

    /* Public Power Week */
    .rf-pp-house { left: 0; width: 70px; }
    .rf-pp-house .rf-pp-say { left: 72%; top: -10px; }
    .rf-pp-turbine { right: 1%; width: 40px; }
    .rf-pp-turbine .rf-pp-say { right: 70%; top: -8px; }
    .rf-pp-bird.b2 { display: none; }

}

/* ── Reduced motion: a still scene ── */
@media (prefers-reduced-motion: reduce) {
    .rf-season *, .rf-season *::before, .rf-season *::after { animation: none !important; transition: none !important; }
    .rf-season { transition: none; }
    .rf-hw-batlane, .rf-hw-peek, .rf-rc-plane, .rf-rc-pop, .rf-tg-leaf, .rf-wn-flake, .rf-ny-cf, .rf-ny-trail, .rf-gh-flake, .rf-vd-heart, .rf-ed-seed, .rf-dw-bub, .rf-dw-drip, .rf-dw-ripple, .rf-bk-lane, .rf-bk-ring, .rf-su-lane, .rf-su-gull, .rf-fj-rise, .rf-fa-leaf { display: none; }
    .rf-fj-burst { opacity: 1 !important; }
    .rf-vd-flag { transform: rotate(0); } .rf-vd-pop { opacity: 1; }
    .rf-gh-cloud { transform: translateX(46px); }
    .rf-ny-win { opacity: .9; }
    .rf-ny-burst { opacity: .7; }
    .rf-wn-glow { opacity: .3; }
    .rf-tg-feather { transform: rotate(var(--a)); }
}

/* ── Admin: Model Access > Seasonal Themes ── */
.rf-seasonal-admin-sectors { display: flex; flex-wrap: wrap; gap: 0 16px; }
.rf-seasonal-admin-list { display: flex; flex-direction: column; gap: 2px; }
.rf-seasonal-admin-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rf-seasonal-admin-name { display: flex; flex-direction: column; flex: 1 1 200px; min-width: 0; }
.rf-seasonal-admin-meta { font-size: .75rem; opacity: .65; }
.rf-seasonal-admin-preview { color: var(--mud-palette-primary, #594ae2); font-weight: 600; text-decoration: none; }
.rf-seasonal-admin-preview:hover { text-decoration: underline; }