/* Ambient Presence Engine */

:root {
  --ambient-temp-color: #38bdf8;
  --ambient-temp-glow: rgba(56, 189, 248, .25);
  --ambient-bg-a: rgba(56, 189, 248, .14);
  --ambient-bg-b: rgba(59, 130, 246, .12);
  --ambient-atmosphere: rgba(56, 189, 248, .06);
  --ambient-base-start: #020617;
  --ambient-base-mid: #07111f;
  --ambient-base-end: #020617;
  --ambient-atlas-brightness: 1;
}

body.ambient-cold {
  --ambient-temp-color: #7dd3fc;
  --ambient-temp-glow: rgba(125, 211, 252, .32);
  --ambient-bg-a: rgba(125, 211, 252, .12);
  --ambient-bg-b: rgba(14, 165, 233, .08);
  --ambient-atlas-brightness: .94;
}

body.ambient-mild {
  --ambient-temp-color: #34d399;
  --ambient-temp-glow: rgba(52, 211, 153, .28);
  --ambient-bg-a: rgba(52, 211, 153, .10);
  --ambient-bg-b: rgba(56, 189, 248, .10);
  --ambient-atlas-brightness: .98;
}

body.ambient-warm {
  --ambient-temp-color: #facc15;
  --ambient-temp-glow: rgba(250, 204, 21, .26);
  --ambient-bg-a: rgba(250, 204, 21, .10);
  --ambient-bg-b: rgba(56, 189, 248, .10);
  --ambient-atlas-brightness: 1.03;
}

body.ambient-hot {
  --ambient-temp-color: #fb923c;
  --ambient-temp-glow: rgba(251, 146, 60, .30);
  --ambient-bg-a: rgba(251, 146, 60, .12);
  --ambient-bg-b: rgba(56, 189, 248, .08);
  --ambient-atlas-brightness: 1.08;
}

body.ambient-extreme {
  --ambient-temp-color: #f87171;
  --ambient-temp-glow: rgba(248, 113, 113, .34);
  --ambient-bg-a: rgba(248, 113, 113, .11);
  --ambient-bg-b: rgba(251, 146, 60, .08);
  --ambient-atlas-brightness: 1.12;
}

body.ambient-dawn {
  --ambient-atmosphere: rgba(251, 191, 36, .08);
  --ambient-base-mid: #111827;
}

body.ambient-day {
  --ambient-atmosphere: rgba(125, 211, 252, .09);
  --ambient-base-mid: #071426;
}

body.ambient-dusk {
  --ambient-atmosphere: rgba(249, 115, 22, .08);
  --ambient-base-mid: #11112a;
}

body.ambient-night {
  --ambient-atmosphere: rgba(49, 46, 129, .12);
  --ambient-base-mid: #070b1d;
}

body {
  background:
    radial-gradient(circle at 20% 5%, var(--ambient-bg-a), transparent 28%),
    radial-gradient(circle at 88% 12%, var(--ambient-bg-b), transparent 32%),
    radial-gradient(circle at 50% 100%, var(--ambient-atmosphere), transparent 42%),
    linear-gradient(135deg, var(--ambient-base-start), var(--ambient-base-mid) 46%, var(--ambient-base-end)) !important;
  transition: background 280ms ease;
}

#date-line {
  font-size: .96rem;
  color: rgba(226, 232, 240, .82);
  letter-spacing: -0.01em;
}

.ambient-weekday,
.ambient-full-date {
  display: block;
}

.ambient-weekday {
  color: var(--white);
  font-weight: 650;
}

.ambient-full-date {
  margin-top: 2px;
  color: var(--muted);
  font-size: .88em;
}

.ambient-time {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  color: #f8fafc;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

#weather-value {
  color: var(--ambient-temp-color) !important;
  text-shadow: 0 0 18px var(--ambient-temp-glow);
  transition: color 260ms ease, text-shadow 260ms ease;
}

.human-presence,
.presence-ring,
.portrait-glow,
.voice-pulse {
  box-shadow: 0 0 28px var(--ambient-temp-glow) !important;
}

.portrait-glow {
  background: radial-gradient(circle, var(--ambient-temp-glow), transparent 62%) !important;
}

.portrait-head,
.portrait-shoulders,
.portrait-glow,
.presence-ring {
  filter: brightness(var(--ambient-atlas-brightness));
  transition: filter 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}

.human-presence {
  border-color: color-mix(in srgb, var(--ambient-temp-color) 32%, transparent) !important;
  transition: border-color 260ms ease, background 280ms ease, box-shadow 260ms ease;
}

.voice-wave {
  background: linear-gradient(90deg, transparent, var(--ambient-temp-color), transparent) !important;
}