/* EB IT Radio — seasonal decorations (see fx.js). Pointer-transparent, behind menus and the player. */
.fx-layer { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 25; }
.fx-p { position: absolute; top: -3rem; line-height: 1; user-select: none; will-change: transform; }

/* Falling (snow, Christmas, pumpkins): down the screen while swaying side to side. */
.fx-fall { animation-name: fx-fall, fx-sway; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite; animation-direction: normal, alternate; }
.fx-slow { animation-name: fx-fall, fx-sway; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite; animation-direction: normal, alternate; }
.fx-snow { color: #fff; text-shadow: 0 0 4px rgba(120, 170, 220, .9); }
@keyframes fx-fall { from { top: -3rem; } to { top: 105vh; } }
@keyframes fx-sway { from { transform: translateX(-18px) rotate(-12deg); } to { transform: translateX(18px) rotate(12deg); } }

/* Hearts float up from the bottom. */
.fx-rise { top: auto; bottom: -3rem; animation-name: fx-rise, fx-sway; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite; animation-direction: normal, alternate; }
@keyframes fx-rise { from { bottom: -3rem; } to { bottom: 105vh; } }

/* Fireworks pop, glow and fade. */
.fx-burst { opacity: 0; animation-name: fx-burst; animation-timing-function: ease-out; animation-iteration-count: infinite; filter: drop-shadow(0 0 6px rgba(255, 210, 120, .8)); }
@keyframes fx-burst { 0% { transform: scale(.2); opacity: 0; } 12% { opacity: 1; } 35% { transform: scale(1.3); opacity: .95; } 60%, 100% { transform: scale(1.6); opacity: 0; } }

/* Less motion asked for: everything stays where it is. */
.fx-still .fx-p { animation: none !important; opacity: .45 !important; }
.fx-still .fx-rise { bottom: auto; }
.fx-still .fx-burst { opacity: .5 !important; }

/* The switch (bottom left, above the player). */
.fx-toggle { position: fixed; left: 12px; bottom: var(--fx-bottom, 16px); z-index: 31; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(127, 127, 127, .35); background: rgba(16, 38, 60, .82); font-size: 1.15rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.fx-toggle:hover { transform: scale(1.06); }
.fx-toggle.is-off { opacity: .55; filter: grayscale(1); }
@media print { .fx-layer, .fx-toggle { display: none !important; } }