/* Welcome-scene — the living backdrop behind the signed-out sign-in card
   (js/welcome-scene.js): a garden at dusk. Fireflies drift and blink over the
   warm light ground in three depth tiers — near lights larger and crisper,
   far ones smaller, dimmer and softly blurred (--ws-blur / --ws-glow, set per
   firefly by the JS) — so the field reads as a place with air in it, not a
   flat scatter of dots. Warmth, not spectacle: slow wander, gentle blink, low
   amplitude.

   Each firefly is a positioned .ws-ff (its slow drift, a transform on the
   outer node) wrapping a .ws-ff__glow (its blink + breath, a transform on the
   inner node) so the two never fight over `transform`. The glow is a warm
   lantern point — a hot ivory core inside an amber halo — that reads on the
   pale ground without a dark sky; a few carry the greener "spring" cast
   (.ws-ff--spring: life = green). All motion gates behind
   prefers-reduced-motion; the reduced-motion baseline is a calm, still field
   of soft glows — no drifting, no blinking. */

.welcome-scene {
  position: absolute;
  inset: 0;
  z-index: 0;              /* below .welcome__card (--z-base: 1) */
  overflow: hidden;
  pointer-events: none;
}

/* Dusk ground — a whisper of deep meadow-green rising from the bottom edge,
   giving the fireflies somewhere to *be*. Kept faint on purpose: the scene
   stays calm and light; the wash only anchors the lights near the ground. */
.welcome-scene::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(
    to top,
    rgba(13, 94, 74, 0.09) 0%,
    rgba(13, 94, 74, 0.035) 45%,
    transparent 100%
  );
}

/* Last light — a soft amber glow leaning in from the top corner, the sun just
   gone. Balances the green ground so the scene reads dusk, not fog. */
.welcome-scene::after {
  content: "";
  position: absolute;
  top: -14%;
  right: -8%;
  width: 48%;
  height: 55%;
  background: radial-gradient(
    ellipse at top right,
    rgba(240, 193, 96, 0.14) 0%,
    transparent 68%
  );
}

.ws-ff {
  position: absolute;
  width: var(--ws-size, 10px);
  height: var(--ws-size, 10px);
}

.ws-ff__glow {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* A lantern point: hot ivory core, amber body, soft falloff — plus a
     two-layer bloom (tight bright + wide soft) so each light truly *glows*
     instead of sitting as a painted dot. */
  background: radial-gradient(
    circle at 44% 40%,
    #fffbe6 0%,
    #ffe9a8 26%,
    #f3c659 52%,
    rgba(233, 167, 74, 0) 74%
  );
  box-shadow:
    0 0 6px 1px rgba(255, 227, 148, 0.65),
    0 0 18px 6px rgba(240, 193, 96, 0.3);
  opacity: var(--ws-glow, 0.78);  /* steady glow at rest → reduced-motion baseline */
  filter: blur(var(--ws-blur, 0px));
}

/* The spring cast — a few fireflies glow the greener gold of new leaves, tying
   the swarm to the brand's "life = green" identity. Same shape, shifted hue. */
.ws-ff--spring .ws-ff__glow {
  background: radial-gradient(
    circle at 44% 40%,
    #fbffe8 0%,
    #eef4b8 30%,
    #c8dc85 56%,
    rgba(163, 199, 108, 0) 76%
  );
  box-shadow:
    0 0 6px 1px rgba(233, 243, 178, 0.55),
    0 0 18px 6px rgba(174, 205, 116, 0.26);
}

@media (prefers-reduced-motion: no-preference) {
  .ws-ff {
    animation-duration: var(--ws-dur, 20s);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }

  .ws-ff--a { animation-name: ws-drift-a; }
  .ws-ff--b { animation-name: ws-drift-b; }
  .ws-ff--c { animation-name: ws-drift-c; }
  .ws-ff--d { animation-name: ws-drift-d; }
  .ws-ff--e { animation-name: ws-drift-e; }

  .ws-ff__glow {
    animation: ws-blink var(--ws-blink, 3s) ease-in-out infinite;
  }
}

/* Slow meandering loops, each returning to its origin so a firefly never
   jumps. Modest amplitude — a lazy hover, not a chase. */
@keyframes ws-drift-a {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(34px, -22px); }
  50% { transform: translate(-12px, -40px); }
  75% { transform: translate(-30px, -14px); }
}

@keyframes ws-drift-b {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-28px, 18px); }
  50% { transform: translate(16px, 36px); }
  75% { transform: translate(32px, 10px); }
}

@keyframes ws-drift-c {
  0%, 100% { transform: translate(0, 0); }
  30% { transform: translate(26px, 24px); }
  60% { transform: translate(-26px, 10px); }
}

@keyframes ws-drift-d {
  0%, 100% { transform: translate(0, 8px); }
  33% { transform: translate(20px, -16px); }
  66% { transform: translate(-22px, -30px); }
}

@keyframes ws-drift-e {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-18px, -24px); }
  55% { transform: translate(22px, -8px); }
  80% { transform: translate(10px, 20px); }
}

/* The blink: fade nearly out, glow up, settle — with a soft breath of scale
   so the light swells as it brightens. The swell tops out relative to each
   firefly's own resting glow (--ws-glow) so far lights never outshine near
   ones mid-blink. */
@keyframes ws-blink {
  0%, 100% {
    opacity: calc(var(--ws-glow, 0.78) * 0.13);
    transform: scale(0.7);
  }
  45% {
    opacity: var(--ws-glow, 0.78);
    transform: scale(1.12);
  }
  70% {
    opacity: calc(var(--ws-glow, 0.78) * 0.62);
    transform: scale(0.95);
  }
}