/* ─────────────────────────────────────────────────────────────
   BursaEdge motion system — SPEC v2 §2.4 (one shared file for the app).
   Rules: movement is transform + opacity only (SVG stroke-dashoffset is the
   one paint-only exception for chart lines); colour state changes fade at
   --dur-fast; no `transition: all`; nothing loops except loaders; reduced
   motion collapses every duration to 0.01ms and renders final states.
   Loaded after styles.css by AppLayout, AuthLayout and LegalLayout.
   ───────────────────────────────────────────────────────────── */

:root {
  --dur-instant: 0ms;
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --dur-reveal: 480ms;
  --dur-draw: 900ms;
  --ease-out: cubic-bezier(.2,0,0,1);
  --ease-in: cubic-bezier(.4,0,1,1);
  --ease-emph: cubic-bezier(.2,1,.3,1);
  --reveal-shift: 12px;
  --stagger: 60ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0.01ms;
    --dur-fast: 0.01ms;
    --dur-base: 0.01ms;
    --dur-slow: 0.01ms;
    --dur-reveal: 0.01ms;
    --dur-draw: 0.01ms;
    --reveal-shift: 0;
    --stagger: 0.01ms;
  }
}

/* ── Hover ring: an opacity-faded ::after, never a lift ─────── */

.ring {
  position: relative;
}
.ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px var(--c-border-strong), 0 0 0 4px var(--c-accent-soft);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.ring:hover::after,
.ring:focus-visible::after {
  opacity: 1;
}

/* ── Arrive: KPI values and counts on first paint only ──────── */

@keyframes be-arrive {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.arrive {
  animation: be-arrive var(--dur-base) var(--ease-out) both;
}
.arrive:nth-child(2) { animation-delay: var(--stagger); }
.arrive:nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
.arrive:nth-child(n + 4) { animation-delay: calc(var(--stagger) * 3); }

/* ── Section reveal (opacity + translateY, once) ─────────────── */

@keyframes be-reveal {
  from { opacity: 0; transform: translateY(var(--reveal-shift)); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal {
  animation: be-reveal var(--dur-reveal) var(--ease-out) both;
}

/* ── Popover / sheet: in --dur-slow --ease-out, out --dur-base --ease-in ── */

@keyframes be-pop-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes be-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.notif-dropdown:not([hidden]) {
  animation: be-pop-in var(--dur-slow) var(--ease-out) both;
}
/* The tour popover centres itself with a transform, so it fades only. */
.tour-popover {
  animation: be-fade-in var(--dur-slow) var(--ease-out) both;
}

/* ── Chart line draw-in (SVG stroke only; paint, not layout) ─── */

@keyframes be-draw {
  from { stroke-dashoffset: var(--draw-length, 1200); }
  to   { stroke-dashoffset: 0; }
}
.draw-line {
  stroke-dasharray: var(--draw-length, 1200);
  animation: be-draw var(--dur-draw) var(--ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
  .ring::after,
  .arrive,
  .reveal,
  .notif-dropdown:not([hidden]),
  .tour-popover,
  .draw-line {
    animation: none;
    transition: none;
    opacity: 1;
    stroke-dashoffset: 0;
  }
  .ring::after { opacity: 0; }
  .ring:hover::after,
  .ring:focus-visible::after { opacity: 1; }
}