/* ============================================================================
   Kinema — Motion tokens
   Calm, "Apple-like": soft fades and slide-ups, never bouncy.
   Always honor prefers-reduced-motion.
   ============================================================================ */

:root {
  --kinema-ease: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ /* standard curve */
  --kinema-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */

  --kinema-dur-fast:   0.2s;  /* @kind other */
  --kinema-dur-pop:    0.32s; /* @kind other */
  --kinema-dur-reveal: 0.45s; /* @kind other */
  --kinema-dur-glow:   1.4s;  /* @kind other */
}

/* ── Scroll reveal ────────────────────────────────────────────────────────── */
@keyframes kinema-reveal-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Modal / panel pop ────────────────────────────────────────────────────── */
@keyframes kinema-pop {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Backdrop fade ────────────────────────────────────────────────────────── */
@keyframes kinema-backdrop-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Loader breathing glow (never animate position/scale of glows) ────────── */
@keyframes kinema-glow-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.32; }
}

.kinema-reveal { animation: kinema-reveal-up var(--kinema-dur-reveal) var(--kinema-ease) both; }
.kinema-pop    { animation: kinema-pop var(--kinema-dur-pop) var(--kinema-ease) both; }

@media (prefers-reduced-motion: reduce) {
  .kinema-reveal,
  .kinema-pop { animation: none; }
}