/**
 * PROJECT OUTLIER — Immersive Operating System
 * Ambient Motion + Environmental Awareness (Milestone II)
 *
 * Makes the interface feel alive through restrained, GPU-friendly motion
 * (transform + opacity + CSS variables only). Everything here is additive and
 * collapses completely under reduced-motion (OS preference or the in-app toggle
 * via :root[data-immersive-motion="reduced"]).
 *
 * Environmental awareness:
 *   :root[data-daylight="dawn|day|dusk|night"]  — time-of-day lighting
 *   :root[data-threat="routine|guarded|elevated|high|severe"] — posture atmosphere
 *   :root[data-link="ok|warn|down"]             — connection atmosphere
 * These are set by immersive-shell.js / home.js / storm.js from REAL signals.
 */

/* ── Environmental atmosphere variables (consumed by ambient layers) ── */
:root {
  --im-atmo: transparent;          /* threat/connection tint */
  --im-atmo-strength: 0;           /* 0..1 */
  --im-daylight-dim: 0;            /* extra darkening at night */
  --im-drift: 42s;                 /* background drift duration */
}

/* Time of day: subtle lighting shifts (never harms legibility) */
:root[data-daylight="night"] { --im-daylight-dim: 0.28; }
:root[data-daylight="dusk"]  { --im-daylight-dim: 0.16; }
:root[data-daylight="dawn"]  { --im-daylight-dim: 0.10; }
:root[data-daylight="day"]   { --im-daylight-dim: 0; }

/* Threat atmosphere: gently intensify accent presence as posture rises */
:root[data-threat="routine"]  { --im-atmo: var(--im-sev-routine);  --im-atmo-strength: 0.04; }
:root[data-threat="guarded"]  { --im-atmo: var(--im-sev-guarded);  --im-atmo-strength: 0.05; }
:root[data-threat="elevated"] { --im-atmo: var(--im-sev-elevated); --im-atmo-strength: 0.08; }
:root[data-threat="high"]     { --im-atmo: var(--im-sev-high);     --im-atmo-strength: 0.11; }
:root[data-threat="severe"]   { --im-atmo: var(--im-sev-severe);   --im-atmo-strength: 0.14; }

/* Connection loss visibly changes the atmosphere */
:root[data-link="down"] { --im-atmo: var(--phx-danger); --im-atmo-strength: 0.12; }
:root[data-link="warn"] { --im-atmo: var(--phx-warning); --im-atmo-strength: 0.07; }

/* ─────────────────────────────────────────────────────────────
   Ambient background — slow drifting gradients + threat/daylight wash
   ───────────────────────────────────────────────────────────── */
.im-ambient {
  will-change: transform, opacity;
}
.im-ambient::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(38% 30% at 22% 18%, color-mix(in srgb, var(--im-brand) 30%, transparent), transparent 70%),
    radial-gradient(32% 26% at 82% 30%, color-mix(in srgb, var(--im-accent) 16%, transparent), transparent 70%),
    radial-gradient(40% 34% at 60% 88%, color-mix(in srgb, var(--im-atmo) calc(var(--im-atmo-strength) * 320%), transparent), transparent 72%);
  animation: im-drift var(--im-drift) var(--im-ease-in-out) infinite alternate;
}
/* Threat/connection atmospheric wash over the whole environment */
.im-ambient::after {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.028) 1px, transparent 1px);
}
.im-atmo-wash {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--im-atmo) calc(var(--im-atmo-strength) * 100%), transparent), transparent 60%),
    linear-gradient(180deg, transparent, rgba(0,0,0,var(--im-daylight-dim)));
  transition: background var(--im-motion-cinematic) var(--im-ease-in-out);
}

@keyframes im-drift {
  0%   { transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
  100% { transform: translate3d(1.5%, 1.5%, 0) scale(1.06); }
}

/* ─────────────────────────────────────────────────────────────
   Breathing connection indicator
   ───────────────────────────────────────────────────────────── */
.im-stat--ok .im-stat-dot,
.im-live-dot {
  animation: im-breathe 3.2s var(--im-ease-in-out) infinite;
}
.im-stat--warn .im-stat-dot { animation: im-breathe 1.8s var(--im-ease-in-out) infinite; }
.im-stat--down .im-stat-dot { animation: im-alarm 1.1s steps(2, jump-none) infinite; }
@keyframes im-breathe {
  0%, 100% { opacity: 0.55; box-shadow: 0 0 4px currentColor; }
  50%      { opacity: 1; box-shadow: 0 0 12px currentColor; }
}
@keyframes im-alarm {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.35; }
}

/* ─────────────────────────────────────────────────────────────
   Operational posture — living glow + minor pulse
   ───────────────────────────────────────────────────────────── */
.im-posture-ring {
  position: relative;
  transition: border-color var(--im-motion-cinematic) var(--im-ease-in-out),
    box-shadow var(--im-motion-cinematic) var(--im-ease-in-out);
}
.im-posture-ring::before {
  content: "";
  position: absolute; inset: -10%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--_c, var(--im-sev-routine)) 30%, transparent), transparent 68%);
  opacity: 0.6;
  animation: im-posture-glow 4.5s var(--im-ease-in-out) infinite;
  pointer-events: none;
}
/* Higher postures breathe a little faster / brighter */
.im-posture[data-level="elevated"] .im-posture-ring::before { animation-duration: 3.6s; }
.im-posture[data-level="high"] .im-posture-ring::before { animation-duration: 2.8s; opacity: 0.8; }
.im-posture[data-level="severe"] .im-posture-ring::before { animation-duration: 2.0s; opacity: 0.95; }
@keyframes im-posture-glow {
  0%, 100% { transform: scale(0.98); opacity: 0.4; }
  50%      { transform: scale(1.06); opacity: 0.85; }
}

/* Severe posture: gentle attention sweep around the ring */
.im-posture-ring::after {
  content: "";
  position: absolute; inset: -2px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--_c, var(--im-sev-routine));
  opacity: 0;
}
.im-posture[data-level="high"] .im-posture-ring::after,
.im-posture[data-level="severe"] .im-posture-ring::after {
  opacity: 0.5;
  animation: im-sweep 6s linear infinite;
}
@keyframes im-sweep { to { transform: rotate(360deg); } }

/* ─────────────────────────────────────────────────────────────
   Alert attention — warnings gently attract the eye
   ───────────────────────────────────────────────────────────── */
.im-alert--severe, .im-alert--high {
  animation: im-attention 3.4s var(--im-ease-in-out) infinite;
}
@keyframes im-attention {
  0%, 100% { box-shadow: inset 3px 0 0 -1px var(--_c); }
  50%      { box-shadow: inset 3px 0 0 -1px var(--_c), 0 0 18px -6px var(--_c); }
}

/* Radar sweep pulse (used in Storm/readiness radar chips) */
.im-radar-pulse { position: relative; overflow: hidden; }
.im-radar-pulse::after {
  content: "";
  position: absolute; inset: 0;
  background: conic-gradient(from 0deg, transparent 0deg, color-mix(in srgb, var(--im-accent) 40%, transparent) 30deg, transparent 60deg);
  animation: im-sweep 4s linear infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Officer presence pulse already defined in immersive-home.css (im-officer-pulse) */

/* Live ticker movement */
.im-ticker { overflow: hidden; white-space: nowrap; }
.im-ticker-track {
  display: inline-block;
  padding-left: 100%;
  animation: im-ticker 34s linear infinite;
}
@keyframes im-ticker { to { transform: translateX(-100%); } }

/* Soft entrance reveal for panels (cinematic, subtle) */
.im-reveal { animation: im-reveal-up var(--im-motion-slow) var(--im-ease) both; }
.im-reveal-2 { animation-delay: 70ms; }
.im-reveal-3 { animation-delay: 140ms; }
.im-reveal-4 { animation-delay: 210ms; }
@keyframes im-reveal-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────
   REDUCED MOTION — collapse everything (OS pref OR in-app toggle)
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .im-ambient::before,
  .im-stat-dot, .im-live-dot,
  .im-posture-ring::before, .im-posture-ring::after,
  .im-alert--severe, .im-alert--high,
  .im-radar-pulse::after,
  .im-officer-pulse::after,
  .im-ticker-track,
  .im-reveal, .im-reveal-2, .im-reveal-3, .im-reveal-4 {
    animation: none !important;
  }
  .im-reveal, .im-reveal-2, .im-reveal-3, .im-reveal-4 { opacity: 1 !important; transform: none !important; }
}
:root[data-immersive-motion="reduced"] .im-ambient::before,
:root[data-immersive-motion="reduced"] .im-stat-dot,
:root[data-immersive-motion="reduced"] .im-live-dot,
:root[data-immersive-motion="reduced"] .im-posture-ring::before,
:root[data-immersive-motion="reduced"] .im-posture-ring::after,
:root[data-immersive-motion="reduced"] .im-alert--severe,
:root[data-immersive-motion="reduced"] .im-alert--high,
:root[data-immersive-motion="reduced"] .im-radar-pulse::after,
:root[data-immersive-motion="reduced"] .im-officer-pulse::after,
:root[data-immersive-motion="reduced"] .im-ticker-track,
:root[data-immersive-motion="reduced"] .im-reveal,
:root[data-immersive-motion="reduced"] .im-reveal-2,
:root[data-immersive-motion="reduced"] .im-reveal-3,
:root[data-immersive-motion="reduced"] .im-reveal-4 {
  animation: none !important;
}
:root[data-immersive-motion="reduced"] .im-reveal,
:root[data-immersive-motion="reduced"] .im-reveal-2,
:root[data-immersive-motion="reduced"] .im-reveal-3,
:root[data-immersive-motion="reduced"] .im-reveal-4 { opacity: 1 !important; transform: none !important; }

/* High contrast: kill ambient glows/washes for maximum legibility */
:root[data-immersive-contrast="high"] .im-ambient::before,
:root[data-immersive-contrast="high"] .im-atmo-wash,
:root[data-immersive-contrast="high"] .im-posture-ring::before,
:root[data-immersive-contrast="high"] .im-radar-pulse::after {
  display: none !important;
}