/* Animations + flourishes layered on top of Tailwind + DaisyUI (forest theme). */

/* ── Entrance ─────────────────────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp .5s cubic-bezier(.16,1,.3,1) both; }

/* staggered cards — index set inline via --i */
.stagger { animation: fadeInUp .45s cubic-bezier(.16,1,.3,1) both;
           animation-delay: calc(var(--i, 0) * 45ms); }

/* ── Logo badge ───────────────────────────────────────────────────────────── */
.logo-badge {
  position: relative;
  display: grid; place-items: center;
  width: 3.25rem; height: 3.25rem;
  border-radius: 1rem;
  color: hsl(var(--pc));
  background: linear-gradient(135deg, hsl(var(--p)), hsl(var(--s)));
  box-shadow: 0 8px 24px -6px hsl(var(--p) / .6);
}
.logo-badge-sm { width: 2.25rem; height: 2.25rem; border-radius: .75rem; }
.ping-ring {
  position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid hsl(var(--p));
  animation: pingRing 2.4s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes pingRing {
  0%   { transform: scale(1);   opacity: .7; }
  80%, 100% { transform: scale(1.5); opacity: 0; }
}

/* ── Live dot ─────────────────────────────────────────────────────────────── */
.live-dot {
  width: .55rem; height: .55rem; border-radius: 999px;
  background: hsl(var(--su));
  box-shadow: 0 0 0 0 hsl(var(--su) / .7);
  animation: livePulse 1.8s infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 hsl(var(--su) / .6); }
  70%  { box-shadow: 0 0 0 8px hsl(var(--su) / 0); }
  100% { box-shadow: 0 0 0 0 hsl(var(--su) / 0); }
}

/* status dot inside badges */
.dot { width: .5rem; height: .5rem; border-radius: 999px; display: inline-block; }
.dot-run { background: currentColor; animation: livePulse 1.8s infinite; }

/* ── Ghost cards — removed-but-still-tracked containers ─────────────────────── */
.ghost { opacity: .5; filter: grayscale(.45); border-style: dashed !important; }
.ghost:hover { opacity: .85; }

/* ── Change flash — pulses a card only when its data actually changed ───────── */
@keyframes flashHl {
  0%   { background-color: hsl(var(--p) / .22); box-shadow: 0 0 0 1px hsl(var(--p) / .5); }
  100% { background-color: transparent; box-shadow: 0 0 0 1px transparent; }
}
.flash { animation: flashHl 1.3s ease-out; }

/* ── Shake (login error) ──────────────────────────────────────────────────── */
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}
.shake { animation: shake .5s cubic-bezier(.36,.07,.19,.97) both; }

/* ── Ambient background blobs ─────────────────────────────────────────────── */
.blob {
  position: fixed; border-radius: 999px; filter: blur(70px);
  opacity: .55; pointer-events: none; z-index: 0;
}
.blob-a {
  width: 26rem; height: 26rem; top: -8rem; right: -6rem;
  background: hsl(var(--p) / .55);
  animation: float 14s ease-in-out infinite;
}
.blob-b {
  width: 22rem; height: 22rem; bottom: -8rem; left: -6rem;
  background: hsl(var(--s) / .45);
  animation: float 18s ease-in-out infinite reverse;
}
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(20px, -24px) scale(1.08); }
}

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}