/* T024.AQ.3 — Page entrance animations (visual parity z ux-html mockups).
 *
 * Mockup `docs/design-references/ux-html/pages/dashboard.html` używa:
 *   .page-fade — opacity + translateY entrance dla <main> content
 *   .tile-anim — opacity + translateY + scale entrance dla stat tiles
 *
 * Stagger: `style="animation-delay: 50ms"` per tile dla cascade effect.
 *
 * WCAG 2.1 (`prefers-reduced-motion`):
 *   Wszystkie animacje wyłączane w `@media (prefers-reduced-motion: reduce)`.
 *   User wybiera reduce w OS settings → app traktuje to jako preference,
 *   nie disability (CSS opt-out wsadzony w queries below).
 *
 * Performance: only opacity + transform (GPU-accelerated, no layout thrashing).
 * No JavaScript needed — pure CSS animation runs once on element mount.
 *
 * Cleaning up (po launch): jeśli telemetria pokaże że animations odstraszają
 * (rage clicks / bounce rate spike post-launch), wyłączamy globally przez
 * flag `body.no-anim` set'owany serverside na podstawie user preference.
 */

@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tileIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.page-fade {
  animation: pageIn 350ms ease both;
}

.tile-anim {
  animation: tileIn 400ms cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

/* Stagger helper classes — zamiast inline style, semantic delay'e dla
 * KPI tiles (4 tiles → delay 0/50/100/150ms). Lighter than inline styles. */
.anim-delay-0  { animation-delay: 0ms; }
.anim-delay-1  { animation-delay: 50ms; }
.anim-delay-2  { animation-delay: 100ms; }
.anim-delay-3  { animation-delay: 150ms; }
.anim-delay-4  { animation-delay: 200ms; }
.anim-delay-5  { animation-delay: 250ms; }

/* WCAG 2.1 — `prefers-reduced-motion: reduce` honor.
 * User wybiera reduce w OS settings → no animations. */
@media (prefers-reduced-motion: reduce) {
  .page-fade,
  .tile-anim {
    animation: none;
    /* Don't leave them invisible (animation `both` keeps `from` state if disabled). */
    opacity: 1;
    transform: none;
  }
}