/* public/css/season-fx.css
   Seasonal motion for the public website: snow in winter, leaves in fall and at Thanksgiving, petals and butterflies in spring,
   sun rays and sparkles in summer, and for Halloween glowing pumpkins whose light flickers on and off, bats, and fog.
   js/season-fx.js builds one fixed layer (<div class="sfx-layer sfx-winter">) when the seasonal look is on; this file moves it.

   Safe by design
   - The layer never takes a click or a tap (pointer-events: none) and never changes the page's layout (it is fixed).
   - Only transform and opacity are animated, so the browser can do it on the graphics chip.
   - Visitors whose device asks for reduced motion get nothing that moves (the Halloween pumpkins just sit there, lit).
   - It pauses while the tab is hidden, and is left out of printing.

   Link it right after css/themes.css:   <link rel="stylesheet" href="css/season-fx.css" /> */

.sfx-layer {
    position: fixed;
    inset: 0;
    z-index: 900;                 /* above the page, below the sticky header (1000) and every pop-up */
    pointer-events: none;
    overflow: hidden;
    contain: layout paint style;
}
.sfx-layer, .sfx-layer * { user-select: none; -webkit-user-select: none; }
.sfx-paused, .sfx-paused * { animation-play-state: paused !important; }

/* ---------- things that fall (snow, leaves, petals) ---------- */
.sfx-p {
    position: absolute;
    top: 0;
    left: var(--x, 50%);
    width: var(--sz, 10px);
    height: var(--sz, 10px);
    opacity: var(--op, 1);
    will-change: transform;
    animation: sfx-fall var(--fall, 12s) linear var(--delay, 0s) infinite;
}
@keyframes sfx-fall {
    from { transform: translate3d(0, -12vh, 0); }
    to   { transform: translate3d(0, 112vh, 0); }
}
.sfx-in {
    width: 100%;
    height: 100%;
    will-change: transform;
    animation: sfx-sway var(--sway, 4s) ease-in-out var(--sdelay, 0s) infinite alternate;
}
@keyframes sfx-sway {
    from { transform: translate3d(calc(var(--amp, 20px) * -1), 0, 0) rotate(calc(var(--rot, 0deg) * -1)); }
    to   { transform: translate3d(var(--amp, 20px), 0, 0) rotate(var(--rot, 0deg)); }
}

/* snow: white, with a thin cool edge so a flake still shows on a light page */
.sfx-snow .sfx-in {
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(60, 120, 190, 0.28), 0 0 7px rgba(255, 255, 255, 0.9);
}
.sfx-snow.sfx-far .sfx-in { filter: blur(1.4px); }

/* leaves */
.sfx-leaf .sfx-in svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.3)); }

/* petals */
.sfx-petal .sfx-in {
    height: 72%;
    border-radius: 150% 0 150% 0;
    background: linear-gradient(135deg, var(--c1, #ffd6e6), var(--c2, #f28fb5));
    box-shadow: inset -1px -1px 2px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(120, 40, 70, 0.25);
}

/* ---------- things that rise (summer sparkles) ---------- */
.sfx-spark {
    position: absolute;
    top: 0;
    left: var(--x, 50%);
    width: var(--sz, 6px);
    height: var(--sz, 6px);
    will-change: transform;
    animation: sfx-rise var(--rise, 14s) linear var(--delay, 0s) infinite;
}
@keyframes sfx-rise {
    from { transform: translate3d(0, 108vh, 0); }
    to   { transform: translate3d(var(--drift, 30px), -10vh, 0); }
}
.sfx-spark i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, #fff6cf 0, #ffd25a 45%, rgba(255, 190, 60, 0) 72%);
    box-shadow: 0 0 8px 1px rgba(255, 190, 60, 0.75);
    animation: sfx-twinkle var(--tw, 2.4s) ease-in-out var(--sdelay, 0s) infinite alternate;
}
@keyframes sfx-twinkle {
    from { opacity: 0.25; transform: scale(0.6); }
    to   { opacity: 1;    transform: scale(1.15); }
}

/* ---------- summer: a warm sun in the corner ---------- */
.sfx-sun {
    position: absolute;
    top: -34vmin;
    right: -34vmin;
    width: 88vmin;
    height: 88vmin;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 230, 150, 0.6) 0, rgba(255, 205, 90, 0.3) 22%, rgba(255, 190, 70, 0) 62%);
    animation: sfx-pulse 6s ease-in-out infinite alternate;
}
.sfx-rays {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(255, 214, 110, 0.2) 0 5deg, rgba(255, 214, 110, 0) 5deg 15deg);
    -webkit-mask-image: radial-gradient(circle, #000 0, transparent 68%);
    mask-image: radial-gradient(circle, #000 0, transparent 68%);
    will-change: transform;
    animation: sfx-spin 90s linear infinite;
}
@keyframes sfx-pulse { from { transform: scale(0.94); opacity: 0.8; } to { transform: scale(1.06); opacity: 1; } }
@keyframes sfx-spin  { to { transform: rotate(360deg); } }

/* ---------- spring: butterflies ---------- */
.sfx-bfly {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--sz, 34px);
    will-change: transform;
    animation: sfx-bfly var(--dur, 34s) linear var(--delay, 0s) infinite;
}
@keyframes sfx-bfly {
    0%   { transform: translate3d(-12vw, 70vh, 0); }
    18%  { transform: translate3d(22vw, 44vh, 0); }
    36%  { transform: translate3d(42vw, 62vh, 0); }
    54%  { transform: translate3d(64vw, 30vh, 0); }
    72%  { transform: translate3d(86vw, 52vh, 0); }
    88%  { transform: translate3d(112vw, 34vh, 0); }
    100% { transform: translate3d(112vw, 34vh, 0); }
}
.sfx-bfly svg { display: block; width: 100%; height: auto; overflow: visible; animation: sfx-bob 1.6s ease-in-out infinite alternate; }
@keyframes sfx-bob { from { transform: translate3d(0, -8px, 0) rotate(-6deg); } to { transform: translate3d(0, 10px, 0) rotate(6deg); } }
.sfx-wl, .sfx-wr { transform-box: view-box; transform-origin: 20px 15px; animation: sfx-flap 0.28s ease-in-out infinite alternate; }
.sfx-wr { animation-name: sfx-flap-r; }
@keyframes sfx-flap   { from { transform: scaleX(1); }  to { transform: scaleX(0.25); } }
@keyframes sfx-flap-r { from { transform: scaleX(1); }  to { transform: scaleX(0.25); } }

/* ---------- Halloween: pumpkins whose light flickers on and off ---------- */
.sfx-pumpkin {
    position: absolute;
    bottom: 0;
    left: var(--left, 14px);
    width: var(--sz, 96px);
    height: calc(var(--sz, 96px) * 0.92);
}
/* the pool of light on the ground under the pumpkin: it goes on and off with the candle */
.sfx-pool {
    position: absolute;
    left: 50%;
    bottom: -6%;
    width: 230%;
    height: 60%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at 50% 60%, rgba(255, 160, 40, 0.7) 0, rgba(255, 130, 20, 0.32) 38%, rgba(255, 120, 20, 0) 70%);
    animation: sfx-flicker var(--fd, 6s) linear var(--fdelay, 0s) infinite;
}
.sfx-pumpkin svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.35)); }
.sfx-lit {
    animation: sfx-flicker var(--fd, 6s) linear var(--fdelay, 0s) infinite;
    filter: drop-shadow(0 0 5px rgba(255, 176, 32, 0.95));
}
@keyframes sfx-flicker {
    0%, 100% { opacity: 1; }
    4%  { opacity: 0.2; }
    7%  { opacity: 1; }
    11% { opacity: 0.55; }
    14% { opacity: 1; }
    38% { opacity: 1; }
    41% { opacity: 0.1; }
    44% { opacity: 0.9; }
    47% { opacity: 0.08; }
    50% { opacity: 1; }
    72% { opacity: 0.85; }
    75% { opacity: 0.2; }
    78% { opacity: 1; }
}

/* bats cross the page now and then */
.sfx-bat {
    position: absolute;
    top: var(--y, 20vh);
    left: 0;
    width: var(--sz, 44px);
    will-change: transform;
    animation: sfx-bat var(--dur, 20s) linear var(--delay, 0s) infinite;
}
@keyframes sfx-bat {
    0%   { transform: translate3d(-14vw, 0, 0); }
    40%  { transform: translate3d(114vw, 0, 0); }
    100% { transform: translate3d(114vw, 0, 0); }
}
.sfx-bob { animation: sfx-batbob 1.1s ease-in-out infinite alternate; }
@keyframes sfx-batbob { from { transform: translate3d(0, -16px, 0); } to { transform: translate3d(0, 24px, 0); } }
.sfx-bat svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 3px rgba(255, 140, 26, 0.65)); animation: sfx-batflap 0.2s ease-in-out infinite alternate; transform-origin: 50% 40%; }
@keyframes sfx-batflap { from { transform: scaleY(1); } to { transform: scaleY(0.5); } }

/* low fog along the bottom edge */
.sfx-fog {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 200%;
    height: 24vh;
    background:
        radial-gradient(ellipse at 18% 100%, rgba(196, 176, 236, 0.3), rgba(196, 176, 236, 0) 58%),
        radial-gradient(ellipse at 52% 100%, rgba(196, 176, 236, 0.22), rgba(196, 176, 236, 0) 55%),
        radial-gradient(ellipse at 84% 100%, rgba(196, 176, 236, 0.28), rgba(196, 176, 236, 0) 58%);
    will-change: transform;
    animation: sfx-drift 46s ease-in-out infinite alternate;
}
.sfx-fog.sfx-fog2 { height: 16vh; opacity: 0.8; animation-duration: 31s; animation-direction: alternate-reverse; }
@keyframes sfx-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-48%, 0, 0); } }

/* ---------- phones: lighter and smaller ---------- */
@media (max-width: 700px) {
    .sfx-pumpkin { left: calc(var(--left, 14px) * 0.5); width: calc(var(--sz, 96px) * 0.7); height: calc(var(--sz, 96px) * 0.64); }
    .sfx-fog2 { display: none; }
}

/* ---------- short screens (small laptops): smaller pumpkins so they cover less of the page ---------- */
@media (max-height: 780px) and (min-width: 701px) {
    .sfx-pumpkin { width: calc(var(--sz, 96px) * 0.72); height: calc(var(--sz, 96px) * 0.66); }
}

/* ---------- visitors who asked for less motion, and printing ---------- */
@media (prefers-reduced-motion: reduce) {
    .sfx-layer .sfx-p, .sfx-layer .sfx-spark, .sfx-layer .sfx-sun, .sfx-layer .sfx-bfly, .sfx-layer .sfx-bat, .sfx-layer .sfx-fog { display: none !important; }
    .sfx-layer .sfx-pool, .sfx-layer .sfx-lit { animation: none !important; opacity: 1; }
}
@media print { .sfx-layer { display: none !important; } }