/*
 * The room glow. CLAUDE.md section 5, "Signature element".
 *
 * This is the one bold thing in the app, so everything else stays quiet.
 * A tile that is on glows in that bulb's own light colour. The Home background
 * carries one soft bloom whose colour and strength are the average of the room.
 *
 * JS sets two custom properties per tile:
 *   --light  the device's current light colour
 *   --glow   0..1, computed as 0.12 + 0.45 * brightness
 */

.tile::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    circle at 28% 22%,
    var(--light, transparent) 0%,
    transparent 68%
  );
  filter: blur(28px);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out),
    background var(--dur) var(--ease-out);
  pointer-events: none;
}

.tile[data-on="true"]::before {
  opacity: var(--glow, 0.3);
}

/*
 * Room bloom. One large soft radial at top centre, behind everything.
 * Fixed so it does not scroll away, and pointer-events none so it never
 * intercepts a tap.
 */
.bloom {
  position: fixed;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: min(180vw, 1100px);
  height: 70vh;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 50% 50% at 50% 12%,
    var(--bloom-color, var(--filament)) 0%,
    transparent 70%
  );
  filter: blur(48px);
  opacity: 0;
  /* 0.6s is the "All off" fade, the one orchestrated moment on Home. */
  transition: opacity var(--dur-slow) var(--ease-out),
    background var(--dur-slow) var(--ease-out);
}

.bloom[data-lit="true"] {
  opacity: var(--bloom-strength, 0);
}

/*
 * Card run screen. The second orchestrated moment: rows start in haze and
 * tick to done as each device confirms.
 */
.run {
  min-height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--s4);
  padding: var(--s6) var(--s4);
  text-align: center;
  position: relative;
  z-index: 1;
}

.run-symbol {
  font-size: 3rem;
  line-height: 1;
}

.run-rows {
  list-style: none;
  padding: 0;
  margin: var(--s4) 0 0;
  display: grid;
  gap: var(--s2);
  width: 100%;
  max-width: 380px;
}

.run-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  color: var(--haze);
  padding: var(--s2) var(--s3);
  border-radius: var(--s3);
  transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}

.run-row[data-state="done"] {
  color: var(--moonlight);
}

.run-row[data-state="failed"] {
  color: var(--alert);
  background: color-mix(in srgb, var(--alert) 10%, transparent);
}

.run-mark {
  width: 20px;
  flex: none;
  text-align: center;
}

.run-result {
  margin-inline-start: auto;
  font-family: var(--font-round);
  font-size: var(--t-sub);
}

@media (prefers-reduced-motion: reduce) {
  /* Replace the orchestrated fades with a plain cross-fade (section 5). */
  .tile::before,
  .bloom {
    transition: opacity var(--dur-fast) linear;
  }
}