/* Tapp The Button - the backdrop layers.
 *
 * backgrounds.js builds the elements; this file gives them their look. The
 * layer sits above the rendered scene (z-index 1) and below the HUD (2 and up),
 * so rain falls behind the console and coins, never on top of a button.
 *
 * Everything here is CSS: gradients, one repeating-linear-gradient for the CRT
 * scanlines, and keyframes for the particles. No images and no JS per frame.
 */

#bg-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

/* The wash a template brings: a low-alpha colour over sky and field alike, so
   the palette reads as one place instead of a coloured sky over plain grass. */
.bg-tint {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}
.bg-tint.is-on { opacity: 1; }

.bg-body {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.bg-weather {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.bg-weather i { position: absolute; display: block; }

/* ---------------------------------------------------------------- the body */

/* One disc, shaded differently per kind. It is placed low in the sky band
   rather than the top corner: the topbar and the ad slot live up there, and a
   sun behind two translucent bars reads as a smear rather than a sun. */
.bg-disc {
  position: absolute;
  top: 21%;
  right: 8%;
  width: clamp(38px, 17%, 64px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #fff 0%, var(--body, #fff6c2) 46%,
    color-mix(in srgb, var(--body, #fff6c2) 74%, #000) 100%);
  box-shadow: 0 0 38px 10px color-mix(in srgb, var(--body, #fff6c2) 46%, transparent);
  animation: bg-breathe 6.5s ease-in-out infinite alternate;
}

/* The moon is the sun with its light taken off one side: an inset shadow does
   the crescent without a second element or an image. */
.bg-disc--moon {
  box-shadow:
    inset -10px -7px 0 0 rgba(8, 12, 28, .58),
    0 0 30px 7px color-mix(in srgb, var(--body, #d8e6ff) 52%, transparent);
}

/* A planet gets banding and a ring. The ring is drawn across the disc on
   purpose: a ring behind it disappeared at 50px, and this reads as a planet
   from the first glance. */
.bg-disc--planet {
  overflow: visible;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .55) 0%, transparent 54%),
    repeating-linear-gradient(176deg,
      var(--body, #9ad7ff) 0 5px,
      color-mix(in srgb, var(--body, #9ad7ff) 68%, #16233f) 5px 10px);
}
.bg-disc--planet::after {
  content: "";
  position: absolute;
  left: -26%;
  right: -26%;
  top: 46%;
  height: 20%;
  border: 2px solid color-mix(in srgb, var(--body, #9ad7ff) 60%, #ffffff);
  border-radius: 50%;
  transform: rotate(-15deg);
  box-shadow: 0 0 8px color-mix(in srgb, var(--body, #9ad7ff) 55%, transparent);
}

@keyframes bg-breathe {
  from { transform: scale(.97); }
  to { transform: scale(1.03); }
}

/* -------------------------------------------------------------------- rain */

.bg-drop {
  top: -14%;
  width: 1px;
  border-radius: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(206, 228, 248, .9));
  transform: rotate(12deg);
  animation-name: bg-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes bg-fall {
  from { transform: translate3d(0, -40px, 0) rotate(12deg); }
  to { transform: translate3d(var(--dx, -14px), 560px, 0) rotate(12deg); }
}

/* The strike, not the storm: two flickers and seven quiet seconds. */
.bg-flash {
  inset: 0;
  background: radial-gradient(120% 80% at 62% 0%, #ffffff 0%, rgba(255, 255, 255, .45) 38%, transparent 72%);
  opacity: 0;
  animation: bg-lightning 7s linear infinite;
}
@keyframes bg-lightning {
  0%, 86%, 100% { opacity: 0; }
  87% { opacity: .8; }
  88.4% { opacity: .08; }
  90% { opacity: .55; }
  91.5% { opacity: 0; }
}

/* -------------------------------------------------------------------- snow */

.bg-flake {
  top: -8%;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 4px rgba(255, 255, 255, .8);
  animation-name: bg-snow;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes bg-snow {
  from { transform: translate3d(0, -40px, 0); }
  to { transform: translate3d(var(--dx, 20px), 560px, 0); }
}

/* ------------------------------------------------------------------ embers */

.bg-ember {
  bottom: -8px;
  border-radius: 50%;
  box-shadow: 0 0 6px 1px rgba(255, 150, 60, .8);
  animation-name: bg-rise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes bg-rise {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  14% { opacity: .95; }
  100% { transform: translate3d(var(--dx, 20px), -520px, 0); opacity: 0; }
}

/* ------------------------------------------------------------------- stars */

.bg-star {
  width: 1.6px;
  height: 1.6px;
  border-radius: 50%;
  background: #ffffff;
  opacity: .55;
  animation-name: bg-twinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.bg-star--big {
  width: 2.6px;
  height: 2.6px;
  box-shadow: 0 0 4px rgba(255, 255, 255, .9);
}
@keyframes bg-twinkle {
  from { opacity: .22; transform: scale(.85); }
  to { opacity: .95; transform: scale(1.15); }
}

/* -------------------------------------------------------------------- dust */

.bg-mote {
  border-radius: 50%;
  background: rgba(255, 240, 205, .85);
  animation: bg-drift linear infinite;
}
@keyframes bg-drift {
  from { transform: translate3d(-40px, 0, 0); }
  to { transform: translate3d(380px, -18px, 0); }
}

/* ----------------------------------------------------------------- bubbles */

.bg-bubble {
  border: 1.5px solid rgba(255, 255, 255, .8);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .1));
  animation-name: bg-float;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes bg-float {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate3d(var(--dx, 10px), -520px, 0); opacity: 0; }
}

/* ------------------------------------------------------------------ petals */

.bg-petal {
  width: 5px;
  height: 4px;
  border-radius: 60% 40% 55% 45%;
  animation-name: bg-petal-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes bg-petal-fall {
  from { transform: translate3d(0, -30px, 0) rotate(0deg); }
  to { transform: translate3d(var(--dx, 30px), 540px, 0) rotate(var(--spin, 360deg)); }
}

/* --------------------------------------------------------------- scanlines */

/* A CRT needs no particles: the dressing is the gap between two scanlines and
   a dark corner. The glow is one soft ellipse of purple in the sky. */
.bg-weather--scanlines::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg,
    rgba(0, 0, 0, .20) 0 1px,
    transparent 1px 3px);
  opacity: .65;
}
.bg-weather--scanlines::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(118% 92% at 50% 44%, transparent 52%, rgba(0, 0, 0, .42) 100%);
}
.bg-crt-glow {
  inset: 0;
  background: radial-gradient(58% 38% at 50% 28%, rgba(150, 90, 255, .28), transparent 72%);
  mix-blend-mode: screen;
}

/* ------------------------------------------------------------------ aurora */

.bg-ribbon {
  width: 78%;
  height: 58px;
  border-radius: 50%;
  filter: blur(17px);
  background: linear-gradient(90deg,
    rgba(60, 255, 200, 0) 0%,
    rgba(60, 255, 200, .5) 28%,
    rgba(150, 120, 255, .45) 64%,
    rgba(60, 255, 200, 0) 100%);
  transform: rotate(-8deg);
  animation-name: bg-aurora;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes bg-aurora {
  from { transform: translate3d(-24px, 0, 0) rotate(-8deg) scaleY(.85); }
  to { transform: translate3d(40px, -8px, 0) rotate(-4deg) scaleY(1.1); }
}

/* ----------------------------------------------------- a calm page, if asked */

/* Reduced motion keeps the weather's shape and drops the movement: the flakes
   and stars hold their positions (they are laid out with top/left as well as
   their animation), the rain turns into a static wet-glass wash, and the
   lightning never fires. */
@media (prefers-reduced-motion: reduce) {
  .bg-weather i,
  .bg-disc {
    animation: none !important;
  }
  .bg-weather--rain .bg-drop,
  .bg-weather--storm .bg-drop,
  .bg-flash {
    display: none !important;
  }
  .bg-weather--rain::before,
  .bg-weather--storm::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(170, 198, 226, .10), rgba(110, 140, 172, .18));
  }
  .bg-star { opacity: .7; }
}