/* ─────────────────────────────────────────────────────────────────
   KOWL · Effects — shadows, motion, textures
   Source: src/app/globals.css (@keyframes, @utility, focus ring).
   KOWL motion is quick and confident: fades-up, scale-ins, a soft
   pulse on alerts, and an easing curve of cubic-bezier(.2,.8,.2,1).
   ───────────────────────────────────────────────────────────────── */
:root {
  /* ── Easing ─────────────────────────────────────────────────── */
  --ease-kowl: cubic-bezier(0.2, 0.8, 0.2, 1);  /* @kind other */
  --ease-out: ease-out;                         /* @kind other */

  /* ── Durations ──────────────────────────────────────────────── */
  --dur-fast: 0.18s;   /* @kind other */
  --dur-base: 0.25s;   /* @kind other */
  --dur-slow: 0.5s;    /* @kind other */
  --dur-bar: 0.9s;     /* @kind other */

  /* ── Shadows ────────────────────────────────────────────────── */
  /* Cards lift into a deep, soft shadow on hover */
  --shadow-card-hover: 0 24px 48px -16px rgba(0, 0, 0, 0.7);
  /* Floating menus / dropdowns */
  --shadow-menu: 0 20px 60px -30px rgba(0, 0, 0, 0.7);
  /* White pills lift toward the light */
  --shadow-pill-light: 0 8px 24px -12px rgba(255, 255, 255, 0.35);
  --shadow-pill-dark: 0 8px 24px -12px rgba(255, 255, 255, 0.2);
  /* Pink alert badge glow */
  --shadow-alert: 0 4px 16px -2px rgba(255, 0, 106, 0.5);
  /* Big headings get a subtle drop for legibility over imagery */
  --shadow-heading: 0 2px 5px rgba(0, 0, 0, 0.5);

  /* ── Focus ring (keyboard) ──────────────────────────────────── */
  --focus-ring: 0 0 0 2px var(--kowl-bg), 0 0 0 4px rgb(255 255 255 / 0.25);

  /* ── Textures ───────────────────────────────────────────────── */
  /* Dotted "trail" separator between metrics */
  --trail-dots: radial-gradient(circle, #686868 1px, transparent 1.5px); /* @kind other */
  --trail-size: 7px 2px; /* @kind other */
}

/* ── Keyframes (verbatim from the product) ────────────────────── */
@keyframes kowl-fade-up {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes kowl-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes kowl-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes kowl-slide-right {
  from { opacity: 0; transform: translate3d(16px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes kowl-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes kowl-pulse-soft {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50%      { box-shadow: 0 0 0 4px transparent; opacity: 0.85; }
}
@keyframes kowl-shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

/* ── Reusable helper classes (optional sugar) ─────────────────── */
.kowl-animate-fade-up { animation: kowl-fade-up var(--dur-slow) var(--ease-kowl) both; }
.kowl-animate-fade-in { animation: kowl-fade-in 0.4s var(--ease-out) both; }
.kowl-animate-scale-in { animation: kowl-scale-in var(--dur-base) var(--ease-kowl) both; }
.kowl-animate-pulse-soft { animation: kowl-pulse-soft 2.4s ease-in-out infinite; }

/* The dotted trail separator used throughout the headers */
.kowl-trail {
  height: 2px;
  background-image: var(--trail-dots);
  background-size: var(--trail-size);
  background-repeat: repeat-x;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}