/* ============================================================
   MOTION — Lumina 2027
   Philosophy: purposeful, not decorative.
   One orchestrated reveal > many micro-animations.
   ============================================================ */

:root {
  /* ── EASING ── */
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);   /* @kind other */
  --ease-out-quart:  cubic-bezier(0.25, 1, 0.5, 1);   /* @kind other */
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);    /* @kind other */
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --ease-linear:     linear;                          /* @kind other */

  /* ── DURATION ── */
  --duration-instant: 80ms;  /* @kind other */
  --duration-fast:    150ms; /* @kind other */
  --duration-normal:  250ms; /* @kind other */
  --duration-slow:    400ms; /* @kind other */
  --duration-xslow:   600ms; /* @kind other */
  --duration-reveal:  800ms; /* @kind other */

  /* ── STAGGER DELAYS ── */
  --stagger-1: 0ms;   /* @kind other */
  --stagger-2: 60ms;  /* @kind other */
  --stagger-3: 120ms; /* @kind other */
  --stagger-4: 180ms; /* @kind other */
  --stagger-5: 240ms; /* @kind other */
  --stagger-6: 300ms; /* @kind other */
}

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

/* ── REVEAL KEYFRAMES ── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slide-right {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes pulse-ring {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ── UTILITY ANIMATION CLASSES ──
   Base state is the VISIBLE end-state, so print / PDF / thumbnail /
   reduced-motion contexts always show content. The entrance animation
   is applied only when motion is allowed. */
.animate-fade-up,
.animate-fade-in,
.animate-scale-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .animate-fade-up { animation: fade-up var(--duration-reveal) var(--ease-out-expo) forwards; }
  .animate-fade-in { animation: fade-in var(--duration-slow)  var(--ease-out-quart) forwards; }
  .animate-scale-in{ animation: scale-in var(--duration-normal) var(--ease-spring) forwards; }
}

.stagger-1 { animation-delay: var(--stagger-1); }
.stagger-2 { animation-delay: var(--stagger-2); }
.stagger-3 { animation-delay: var(--stagger-3); }
.stagger-4 { animation-delay: var(--stagger-4); }
.stagger-5 { animation-delay: var(--stagger-5); }
.stagger-6 { animation-delay: var(--stagger-6); }

/* ── TRANSITION BASE (interactive elements) ── */
.transition-base {
  transition:
    color var(--duration-fast) var(--ease-out-quart),
    background-color var(--duration-fast) var(--ease-out-quart),
    border-color var(--duration-fast) var(--ease-out-quart),
    opacity var(--duration-fast) var(--ease-out-quart),
    transform var(--duration-fast) var(--ease-out-quart);
}