/* ═══════════════════════════════════════════════════════════════════════════
 * Kallisto Design System — Smart Tiles & Liquid Pack
 * Frosted-glass IoT tiles, liquid fills, radial dials, color spectrum,
 * map previews, live feed cards, forecast strips, room pill nav, and a
 * fresh set of loading states (wave, blob morph, radar pulse).
 * Inspired by mobile dashboard, smart-home, and AR/glass UI references.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Smart Tile (frosted glass widget) ──────────────────────────────── */
.kal-tile {
  position: relative;
  border-radius: var(--r-xl);
  padding: 16px;
  background: var(--glass-bg);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid var(--glass-stroke-2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    var(--shadow-sm);
  overflow: hidden;
  transition: transform .25s var(--ease-decelerate), box-shadow .25s;
  min-height: 120px;
}
.kal-tile:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), var(--shadow-md); }
.kal-tile__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.kal-tile__icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--glass-bg-strong); border: 1px solid var(--glass-stroke-2);
  color: var(--ink); flex-shrink: 0;
}
.kal-tile__title { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.kal-tile__sub   { font-size: 11px; color: var(--ink-3); margin-top: 2px; line-height: 1.2; }
.kal-tile__body  { display: flex; flex-direction: column; gap: 4px; }
.kal-tile__value { font-size: 26px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; line-height: 1; }
.kal-tile__label { font-size: 11px; color: var(--ink-3); font-family: var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }

/* corner pill action (the ↗ button on reference tiles) */
.kal-tile__corner {
  position: absolute; top: 12px; right: 12px;
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-stroke-2);
  color: var(--ink); cursor: pointer; transition: transform .2s, background .2s;
  z-index: 2;
}
.kal-tile__corner:hover { transform: rotate(45deg) scale(1.05); background: var(--ink); color: var(--bg-1); }

/* corner power button — circular outline (refs: TV / WiFi / Alexa) */
.kal-tile__power {
  position: absolute; top: 14px; right: 14px;
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1.5px solid var(--ink-3);
  color: var(--ink-3); cursor: pointer; transition: all .2s; z-index: 2;
}
.kal-tile__power:hover { color: var(--ink); border-color: var(--ink); }
.kal-tile__power--on { color: var(--ok); border-color: var(--ok); box-shadow: 0 0 12px color-mix(in oklch, var(--ok) 30%, transparent); }

/* live "online" dot indicator (the green dot on Air Conditioner / Ambient LED tiles) */
.kal-tile__live-dot {
  width: 12px; height: 12px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 0 color-mix(in oklch, var(--ok) 50%, transparent);
  animation: kal-radar 2s ease-out infinite;
}

/* ── 2. Liquid Fill Tank ────────────────────────────────────────────────
   A tile that visualises a percentage as a wavy liquid surface.
   The wave is two SVG paths riding on top of each other for parallax.
   Use --fill (0..1) to set the water level. ────────────────────────────── */
.kal-liquid {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid var(--glass-stroke-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), var(--shadow-sm);
  min-height: 200px;
  --fill: 0.28; /* 0..1 */
  --liquid-from: oklch(0.78 0.16 50);   /* light orange */
  --liquid-to:   oklch(0.66 0.20 35);   /* deep coral */
}
.kal-liquid__body {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--fill) * 100%);
  transition: height .8s var(--ease-decelerate);
  background: linear-gradient(180deg, var(--liquid-from), var(--liquid-to));
}
.kal-liquid__wave {
  position: absolute; left: -50%; right: -50%; top: -28px;
  height: 56px;
}
.kal-liquid__wave svg { width: 100%; height: 100%; display: block; }
.kal-liquid__wave--front { animation: kal-wave-flow 6s linear infinite; opacity: .9; }
.kal-liquid__wave--back  { animation: kal-wave-flow 9s linear infinite reverse; opacity: .55; top: -24px; }
.kal-liquid__bubble {
  position: absolute; bottom: 8px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--glass-bg);
  animation: kal-bubble 4s ease-in infinite;
}
.kal-liquid__bubble--2 { left: 60%; width: 4px; height: 4px; animation-delay: 1.5s; animation-duration: 5s; }
.kal-liquid__bubble--3 { left: 30%; width: 8px; height: 8px; animation-delay: 2.8s; animation-duration: 6s; }
.kal-liquid__bubble--1 { left: 20%; animation-delay: 0s; }
.kal-liquid__center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; padding: 20px 16px;
  z-index: 3; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.kal-liquid__center--top { justify-content: flex-start; color: var(--ink); text-shadow: none; }
.kal-liquid__pct { font-size: 36px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.kal-liquid__lbl { font-size: 11px; font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .85; margin-top: 4px; }

/* ── 3. Gradient Stat Card (the "Balance / $1018.06" with sparkline) ───── */
.kal-statcard {
  position: relative; border-radius: var(--r-xl);
  padding: 16px; overflow: hidden; min-height: 180px;
  background:
    radial-gradient(120% 80% at 100% 0%, oklch(0.95 0.06 60 / .8), transparent 60%),
    linear-gradient(135deg, oklch(0.82 0.14 55), oklch(0.68 0.20 35));
  color: #fff; box-shadow: var(--shadow-md);
}
.kal-statcard__bg-chart {
  position: absolute; left: 0; right: 0; bottom: 0; height: 70%; pointer-events: none;
  opacity: .55;
}
.kal-statcard__bg-chart svg { width: 100%; height: 100%; display: block; }
.kal-statcard__label { font-size: 11px; font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.kal-statcard__value { font-size: 26px; font-weight: 600; margin-top: 4px; letter-spacing: -.02em; }
.kal-statcard__foot  { position: absolute; left: 16px; bottom: 14px; right: 16px; z-index: 2; }

/* ── 4. Radial Dial / Gauge ────────────────────────────────────────────── */
.kal-dial {
  position: relative; width: 100%; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
}
.kal-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.kal-dial__track { stroke: var(--line); }
.kal-dial__fill  { stroke: var(--violet); transition: stroke-dashoffset .6s var(--ease-decelerate); }
.kal-dial__center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; text-align: center;
}
.kal-dial__value { font-size: 24px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; line-height: 1; }
.kal-dial__cap   { font-size: 10px; font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
/* tick variant — adds notched scale around the dial (AC reference) */
.kal-dial--ticks::before {
  content: ''; position: absolute; inset: 8%;
  border-radius: 50%;
  background:
    conic-gradient(from -90deg, transparent 0 calc(var(--pct,.5) * 360deg), transparent 0);
}

/* ── 5. Floating Icon Toolbar (the top glass pill toolbar) ─────────────── */
.kal-toolbar {
  display: inline-flex; gap: 6px; padding: 6px;
  border-radius: var(--r-full);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border: 1px solid var(--glass-stroke-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), var(--shadow-md);
}
.kal-toolbar__btn {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; color: var(--ink-2);
  transition: all .2s;
}
.kal-toolbar__btn:hover { color: var(--ink); background: var(--glass-bg); }
.kal-toolbar__btn--active {
  background: var(--glass-bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--glass-stroke-2);
}
/* "primary" variant — solid circle (refs: the dark search button) */
.kal-toolbar__btn--solid {
  background: var(--ink); color: var(--bg-1);
}
.kal-toolbar__btn--solid:hover { background: var(--ink); color: var(--bg-1); transform: scale(1.05); }

/* ── 6. Room Pill Nav (bottom pill with category icons) ────────────────── */
.kal-roompill {
  display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px;
  border-radius: var(--r-full);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid var(--glass-stroke-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), var(--shadow-md);
}
.kal-roompill__item {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 10px; border-radius: var(--r-full);
  font-size: 12px; font-weight: 500; color: var(--ink-2); cursor: pointer; border: 0;
  background: transparent; transition: all .2s;
}
.kal-roompill__item:hover { color: var(--ink); }
.kal-roompill__item--active { background: var(--glass-bg); color: var(--ink); padding: 0 12px 0 10px; }
.kal-roompill__add {
  width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: var(--ink); color: var(--bg-1); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ── 7. Map Tile (small map preview with marker) ───────────────────────── */
.kal-map {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  min-height: 140px;
  background:
    radial-gradient(120px 80px at 30% 40%, oklch(0.95 0.02 250 / .6), transparent 70%),
    radial-gradient(160px 100px at 70% 70%, oklch(0.92 0.02 240 / .5), transparent 70%),
    linear-gradient(180deg, var(--bg-2), var(--bg-3));
  border: 1px solid var(--glass-stroke-2);
}
.kal-map__grid {
  position: absolute; inset: 0; opacity: .35;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 32px 32px;
}
.kal-map__roads {
  position: absolute; inset: 0;
  background:
    linear-gradient(110deg, transparent 30%, var(--glass-stroke-2) 30%, var(--glass-stroke-2) 31%, transparent 31%),
    linear-gradient(20deg,  transparent 55%, var(--glass-stroke-2) 55%, var(--glass-stroke-2) 56%, transparent 56%),
    linear-gradient(80deg,  transparent 70%, var(--glass-stroke-2) 70%, var(--glass-stroke-2) 71%, transparent 71%);
  opacity: .8;
}
.kal-map__pin {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: var(--violet); box-shadow: 0 0 0 4px color-mix(in oklch, var(--violet) 25%, transparent);
}
.kal-map__pin--lg {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--violet); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 6px color-mix(in oklch, var(--violet) 18%, transparent), var(--shadow-md);
  animation: kal-radar 2.2s ease-out infinite;
}
.kal-map__label {
  position: absolute; left: 14px; bottom: 12px;
  font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -.01em;
}

/* ── 8. Live Camera Card ───────────────────────────────────────────────── */
.kal-live {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  background: var(--bg-3); aspect-ratio: 16/10;
  border: 1px solid var(--glass-stroke-2);
}
.kal-live__feed {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 70% at 30% 50%, oklch(0.72 0.04 230 / .6), transparent 70%),
    linear-gradient(160deg, oklch(0.55 0.03 250), oklch(0.42 0.03 260));
}
.kal-live__tag {
  position: absolute; top: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-full);
  background: rgba(0,0,0,.5); color: #fff; font-size: 10px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.kal-live__tag::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: #ef4444;
  box-shadow: 0 0 8px #ef4444; animation: kal-breathe 1.5s ease-in-out infinite;
}
.kal-live__chip {
  position: absolute; top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px; border-radius: var(--r-full);
  background: rgba(255,255,255,.18); color: #fff; font-size: 11px; font-weight: 500;
  backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.18);
}
.kal-live__controls {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  display: inline-flex; gap: 6px;
}
.kal-live__ctrl {
  width: 32px; height: 32px; border-radius: 10px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.16); color: #fff; backdrop-filter: blur(10px);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.15);
}
.kal-live__ctrl:hover { background: rgba(255,255,255,.28); }

/* ── 9. Color Spectrum Slider (Ambient LED color picker) ───────────────── */
.kal-spectrum {
  position: relative; height: 14px; border-radius: var(--r-full);
  background: linear-gradient(90deg,
    oklch(0.7 0.22 25),  oklch(0.78 0.16 70),  oklch(0.85 0.14 110),
    oklch(0.78 0.16 160), oklch(0.72 0.16 220), oklch(0.62 0.20 295),
    oklch(0.65 0.20 330), oklch(0.7 0.22 25));
  box-shadow: inset 0 1px 2px rgba(0,0,0,.15);
}
.kal-spectrum__thumb {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 3px solid var(--ink);
  box-shadow: var(--shadow-md);
}

/* ── 10. Forecast Strip (Sat/Sun/Mon/Tue) ──────────────────────────────── */
.kal-forecast { display: grid; grid-auto-flow: column; gap: 8px; }
.kal-forecast__day {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 10px; border-radius: var(--r-lg);
  background: transparent; min-width: 72px;
  border: 1px solid transparent;
}
.kal-forecast__day--active {
  background: var(--glass-bg-strong); border-color: var(--glass-stroke-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
.kal-forecast__name { font-size: 14px; font-weight: 600; color: var(--ink); }
.kal-forecast__icon { color: var(--ink-2); }
.kal-forecast__hi-lo { font-size: 11px; color: var(--ink-3); font-family: var(--font-mono); letter-spacing: .02em; }

/* ── 11. Avatar Stack with + ───────────────────────────────────────────── */
.kal-avstack { display: inline-flex; padding: 4px; border-radius: var(--r-full); }
.kal-avstack__item {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--lavender-2); color: var(--ink); font-weight: 600; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg-1); margin-left: -10px; box-shadow: var(--shadow-sm);
}
.kal-avstack__item:first-child { margin-left: 0; }
.kal-avstack__add {
  width: 36px; height: 36px; border-radius: 50%;
  background: transparent; color: var(--ink-2);
  border: 1.5px dashed var(--ink-3);
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: -10px; cursor: pointer;
}

/* ── 12. Now Playing Card ──────────────────────────────────────────────── */
.kal-nowplay { padding: 16px; border-radius: var(--r-xl);
  background: var(--glass-bg); backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid var(--glass-stroke-2); box-shadow: var(--shadow-sm);
}
.kal-nowplay__art {
  width: 100%; aspect-ratio: 16/9; border-radius: var(--r-md); overflow: hidden;
  background:
    radial-gradient(60% 90% at 50% 50%, rgba(255,255,255,0.18), transparent 70%),
    linear-gradient(135deg, var(--violet), var(--violet-2));
  position: relative; margin-bottom: 12px;
}
.kal-nowplay__art::after {
  content: 'WAVEFORM'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  color: rgba(255,255,255,.55);
}
.kal-nowplay__meta { margin-bottom: 12px; }
.kal-nowplay__artist { font-size: 11px; font-family: var(--font-mono); color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }
.kal-nowplay__title  { font-size: 15px; font-weight: 600; color: var(--ink); margin-top: 2px; line-height: 1.2; }
.kal-nowplay__controls {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
  color: var(--ink-2);
}
.kal-nowplay__ctrl { background: transparent; border: 0; cursor: pointer; color: inherit; padding: 4px; }
.kal-nowplay__ctrl:hover { color: var(--ink); }
.kal-nowplay__ctrl--play {
  width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--bg-1);
  display: inline-flex; align-items: center; justify-content: center;
}
.kal-nowplay__scrub {
  height: 4px; border-radius: 2px; background: var(--line); position: relative; overflow: hidden;
}
.kal-nowplay__scrub::after {
  content: ''; position: absolute; inset: 0; right: 60%; background: var(--ink); border-radius: 2px;
}
.kal-nowplay__times { display: flex; justify-content: space-between; margin-top: 4px;
  font-size: 10px; font-family: var(--font-mono); color: var(--ink-3); }

/* ── 13. App-launcher chips (Netflix / Prime / Apple TV style) ─────────── */
.kal-applauncher { display: inline-flex; gap: 8px; }
.kal-applauncher__app {
  width: 36px; height: 36px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; letter-spacing: .04em;
  color: #fff; box-shadow: var(--shadow-sm);
}
.kal-applauncher__add {
  width: 36px; height: 36px; border-radius: 9px;
  border: 1.5px dashed var(--ink-3); color: var(--ink-3); background: transparent;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}

/* ── 14. Hero Card (onboarding with floating illustration) ─────────────── */
.kal-hero-card {
  position: relative; padding: 18px 18px 20px; border-radius: var(--r-xl);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--glass-stroke-2);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.kal-hero-card__chip {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, oklch(0.78 0.16 50), oklch(0.66 0.20 35));
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.kal-hero-card__title { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.kal-hero-card__desc  { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin-top: 6px; }
.kal-hero-card__blob {
  position: absolute; right: -40px; top: -40px;
  width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, oklch(0.85 0.14 55 / .9), oklch(0.62 0.20 30 / .7));
  filter: blur(2px);
  animation: kal-morph 8s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * NEW LOADING STATES
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Wave loader (rising water in a glass) ─────────────────────────────── */
.kal-load-wave {
  position: relative; width: 64px; height: 80px; border-radius: 14px 14px 18px 18px;
  border: 2px solid var(--ink-3); overflow: hidden;
}
.kal-load-wave__fill {
  position: absolute; left: -25%; right: -25%; bottom: 0;
  height: 60%; background: var(--violet);
  animation: kal-wave-fill 3s ease-in-out infinite alternate;
}
.kal-load-wave__fill::before, .kal-load-wave__fill::after {
  content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 16px;
  background: radial-gradient(circle at 8px 8px, var(--violet) 8px, transparent 8.5px) repeat-x;
  background-size: 16px 16px;
}
.kal-load-wave__fill::after { top: -6px; opacity: .6; animation: kal-wave-shift 2s linear infinite; }

/* ── Liquid blob morph ─────────────────────────────────────────────────── */
.kal-load-blob {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--violet), var(--sky));
  animation: kal-morph 4s ease-in-out infinite, kal-spin 8s linear infinite;
  filter: blur(0.5px);
}

/* ── Radar pulse rings ─────────────────────────────────────────────────── */
.kal-load-radar {
  position: relative; width: 60px; height: 60px;
}
.kal-load-radar::before, .kal-load-radar::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--violet);
  animation: kal-radar-ring 1.6s ease-out infinite;
}
.kal-load-radar::after { animation-delay: 0.8s; }
.kal-load-radar__core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 14px; height: 14px; border-radius: 50%; background: var(--violet);
  box-shadow: 0 0 12px var(--violet);
}

/* ── Droplet bounce (water drop loader) ────────────────────────────────── */
.kal-load-drop {
  display: inline-flex; gap: 6px; align-items: flex-end; height: 32px;
}
.kal-load-drop__d {
  width: 10px; height: 10px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: linear-gradient(135deg, var(--violet), var(--sky));
  animation: kal-drop-bounce 1.4s ease-in-out infinite;
}
.kal-load-drop__d:nth-child(2) { animation-delay: 0.2s; }
.kal-load-drop__d:nth-child(3) { animation-delay: 0.4s; }

/* ═══════════════════════════════════════════════════════════════════════════
 * KEYFRAMES (new)
 * ═══════════════════════════════════════════════════════════════════════════ */
@keyframes kal-wave-flow {
  0% { transform: translateX(0); }
  100% { transform: translateX(50%); }
}
@keyframes kal-wave-fill {
  0% { height: 35%; }
  100% { height: 90%; }
}
@keyframes kal-wave-shift {
  0% { transform: translateX(0); }
  100% { transform: translateX(16px); }
}
@keyframes kal-bubble {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  20% { opacity: .9; }
  100% { transform: translateY(-120px) scale(1); opacity: 0; }
}
@keyframes kal-morph {
  0%, 100% { border-radius: 60% 40% 50% 50% / 40% 60% 40% 60%; }
  25%      { border-radius: 40% 60% 65% 35% / 55% 45% 55% 45%; }
  50%      { border-radius: 55% 45% 35% 65% / 60% 40% 60% 40%; }
  75%      { border-radius: 45% 55% 50% 50% / 35% 65% 35% 65%; }
}
@keyframes kal-radar {
  0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--violet) 45%, transparent); }
  70% { box-shadow: 0 0 0 14px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes kal-radar-ring {
  0% { transform: scale(0.3); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}
@keyframes kal-drop-bounce {
  0%, 100% { transform: rotate(-45deg) translateY(0); }
  50% { transform: rotate(-45deg) translateY(-14px); }
}

@media (prefers-reduced-motion: reduce) {
  .kal-liquid__wave--front, .kal-liquid__wave--back,
  .kal-liquid__bubble, .kal-hero-card__blob,
  .kal-load-wave__fill, .kal-load-wave__fill::after,
  .kal-load-blob, .kal-load-radar::before, .kal-load-radar::after,
  .kal-load-drop__d, .kal-tile__live-dot, .kal-map__pin--lg,
  .kal-live__tag::before {
    animation: none !important;
  }
}