/**
 * today-scene.css — weather scene and paper dolls for the Today screen.
 *
 * The backdrop takes its colour and motion from the real condition, and each
 * child stands in it wearing what today actually calls for. Ported from
 * frontend/lab/10-ambient.html.
 *
 * Everything is layered behind the existing Today content, so the weather dial
 * and clothing list carry on working untouched.
 */

#screen-today {
  --wx: #c3d3dc;          /* scene colour, set per condition below */
  position: relative;
  isolation: isolate;
}

#screen-today[data-wx="sun"]   { --wx: #ffcf7a; }
#screen-today[data-wx="cloud"] { --wx: #c3d3dc; }
#screen-today[data-wx="rain"]  { --wx: #7fb6ff; }
#screen-today[data-wx="snow"]  { --wx: #bfe6ff; }
#screen-today[data-wx="fog"]   { --wx: #cbd6d9; }
#screen-today[data-wx="wind"]  { --wx: #7fd9ff; }
#screen-today[data-wx="storm"] { --wx: #c4b5fd; }

#today-sky {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  display: block;
}

/* A light wash on top of the canvas, tying the scene to the theme colour. */
.wx-scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 118%, color-mix(in srgb, var(--wx) 18%, transparent), transparent 62%);
  transition: background .8s ease;
}

/* Fog gets a flat haze; nothing else does. */
.wx-haze {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--wx) 22%, transparent) 60%, transparent);
  transition: opacity .8s ease;
}
#screen-today[data-wx="fog"] .wx-haze { opacity: 1; }

/* Precipitation, drawn as repeating streaks rather than per-drop elements —
   a Fire Stick should not be animating hundreds of nodes for a backdrop. */
.wx-fall {
  position: absolute;
  inset: -20% 0 0 0;
  opacity: 0;
  background-repeat: repeat;
  transition: opacity .8s ease;
}
/* Precipitation is drawn on the canvas now, not faked with gradients. */

/* ── The children ───────────────────────────────────────────────── */

.wx-dolls {
  /* Stood along the bottom rather than placed in the grid. As a grid row the
     tall weather column pushed them off a viewport-locked screen; the bottom
     band was empty anyway, and a row of children standing on the floor of the
     screen is what the lab page was doing. */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3vh;
  display: flex;
  gap: 6vw;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.wx-kid { text-align: center; --c: var(--kid, #64748b); }

.wx-kid svg {
  height: 30vh;
  width: auto;
  display: block;
  transform-origin: 50% 100%;
  animation: wx-sway 6s ease-in-out infinite;
}
.wx-kid:nth-child(2) svg { animation-delay: -2s; }
.wx-kid:nth-child(3) svg { animation-delay: -4s; }
/* Wind leans on them harder. */
#screen-today[data-wx="wind"] .wx-kid svg,
#screen-today[data-wx="storm"] .wx-kid svg { animation-duration: 2.4s; }
@keyframes wx-sway {
  0%, 100% { transform: rotate(-1.2deg); }
  50% { transform: rotate(1.2deg); }
}

.wx-kid .skin  { fill: #1a2622; stroke: var(--c); stroke-width: 1.6; }
.wx-kid .cloth { fill: color-mix(in srgb, var(--c) 22%, #0d1410); stroke: var(--c); stroke-width: 1.6; }
.wx-kid .coat  { fill: color-mix(in srgb, var(--c) 42%, #0d1410); stroke: var(--c); stroke-width: 1.8; stroke-linejoin: round; }
.wx-kid .line  { fill: none; stroke: var(--c); stroke-width: 1.6; stroke-linecap: round; }
.wx-kid .fill  { fill: var(--c); stroke: none; }
.wx-kid .welly { fill: color-mix(in srgb, var(--c) 70%, #fff); stroke: none; }
.wx-kid .hiv   { fill: #d9ff3a; fill-opacity: .85; stroke: #eaff80; stroke-width: 1.2; }
.wx-kid .hivs  { fill: none; stroke: #fff; stroke-width: 3; stroke-opacity: .8; }
.wx-kid .accent { fill: color-mix(in srgb, var(--c) 60%, #fff); stroke: none; }
.wx-kid .dotf  { fill: var(--c); }
.wx-kid .doll  { height: 100%; width: auto; display: block; overflow: visible; }

.wx-kid .nm {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 3.2vh;
  text-transform: uppercase;
  color: var(--c);
  letter-spacing: .04em;
  margin-top: .6vh;
}
.wx-kid .kit {
  font-family: 'Share Tech Mono', monospace;
  font-size: 1.7vh;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #64748b;
}

@media (max-height: 800px) {
  .wx-kid svg { height: 20vh; }
}

@media (prefers-reduced-motion: reduce) {
  .wx-kid svg, .wx-fall { animation: none; }
}