/* Custom animations - separate file to prevent Tailwind purging */

/* The ring tracks the theme success colour (daisyUI 5 exposes it as `--color-success`),
   so it stays on-palette in both `murmur` and `murmur-dark`. */

@keyframes pulsate-ring {
  0% {
    box-shadow:
      0 0 0 0 color-mix(in oklab, var(--color-success) 70%, transparent),
      0 0 0 0 color-mix(in oklab, var(--color-success) 50%, transparent),
      0 0 4px 0 color-mix(in oklab, var(--color-success) 90%, transparent);
    filter: blur(0px);
    transform: scale(1);
    opacity: 1;
  }
  15% {
    box-shadow:
      0 0 0 2px color-mix(in oklab, var(--color-success) 60%, transparent),
      0 0 6px 2px color-mix(in oklab, var(--color-success) 40%, transparent),
      0 0 8px 1px color-mix(in oklab, var(--color-success) 70%, transparent);
    filter: blur(0.3px);
    transform: scale(1.08);
    opacity: 1;
  }
  30% {
    box-shadow:
      0 0 0 5px color-mix(in oklab, var(--color-success) 50%, transparent),
      0 0 12px 4px color-mix(in oklab, var(--color-success) 35%, transparent),
      0 0 10px 2px color-mix(in oklab, var(--color-success) 55%, transparent);
    filter: blur(0.5px);
    transform: scale(1.1);
    opacity: 0.98;
  }
  50% {
    box-shadow:
      0 0 0 8px color-mix(in oklab, var(--color-success) 30%, transparent),
      0 0 18px 6px color-mix(in oklab, var(--color-success) 20%, transparent),
      0 0 12px 3px color-mix(in oklab, var(--color-success) 35%, transparent);
    filter: blur(0.6px);
    transform: scale(1.05);
    opacity: 0.96;
  }
  70% {
    box-shadow:
      0 0 0 11px color-mix(in oklab, var(--color-success) 15%, transparent),
      0 0 22px 8px color-mix(in oklab, var(--color-success) 12%, transparent),
      0 0 14px 4px color-mix(in oklab, var(--color-success) 18%, transparent);
    filter: blur(0.5px);
    transform: scale(1.02);
    opacity: 0.97;
  }
  85% {
    box-shadow:
      0 0 0 13px color-mix(in oklab, var(--color-success) 6%, transparent),
      0 0 26px 10px color-mix(in oklab, var(--color-success) 5%, transparent),
      0 0 16px 5px color-mix(in oklab, var(--color-success) 8%, transparent);
    filter: blur(0.3px);
    transform: scale(1.01);
    opacity: 0.99;
  }
  100% {
    box-shadow:
      0 0 0 16px transparent,
      0 0 30px 12px transparent,
      0 0 20px 6px transparent;
    filter: blur(0px);
    transform: scale(1);
    opacity: 1;
  }
}

.pulsate-once {
  animation: pulsate-ring 1800ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Call UI (call_tile.rs, incoming_call_notification.rs) ─────────────────
   Plain CSS on purpose: this file is linked by both the murmur and the loge
   build (loge-ui/index.html), so tiles look the same in both. */

/* Looping halo for a ringing avatar (incoming ring screen, outgoing peer
   tile, call pill). Box-shadow only — unlike `pulsate-ring` it never blurs or
   scales the avatar itself, which would be tiring on a loop. */
@keyframes call-halo {
  0% {
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-success) 55%, transparent);
  }
  70% {
    box-shadow: 0 0 0 18px color-mix(in oklab, var(--color-success) 0%, transparent);
  }
  100% {
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-success) 0%, transparent);
  }
}

.murmur-call-halo {
  border-radius: 9999px;
  animation: call-halo 1.6s ease-out infinite;
}

/* Outgoing call not picked up yet: grey the avatar, not the halo (a filter on
   the halo element would grey its box-shadow too). */
.murmur-call-ringing > * {
  filter: grayscale(1);
  opacity: 0.7;
}

/* Active-speaker border on a whole call tile. Drawn by a pseudo-element on
   top of the content: a plain inset box-shadow on the tile would be painted
   underneath the <video>, which covers the tile completely. */
.call-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 0 transparent;
  transition: box-shadow 150ms ease-out;
}

.call-tile--speaking::after {
  box-shadow: inset 0 0 0 3px var(--color-success);
}

/* Peer connecting/reconnecting/unreachable: grey out the last video frame or
   the avatar; the status pill on top stays at full strength. */
.call-tile--degraded > video,
.call-tile--degraded > .call-tile-avatar {
  filter: grayscale(1);
  opacity: 0.45;
  transition: opacity 150ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .murmur-call-halo {
    animation: none;
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-success) 45%, transparent);
  }

  .call-tile::after,
  .call-tile--degraded > video,
  .call-tile--degraded > .call-tile-avatar {
    transition: none;
  }
}