/* ==========================================================================
   Cameo Cinema — MOTION
   ========================================================================== */

:root {
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 1020ms;
}

/* ---- Global transition baseline --------------------------------------- */
.motion,
.motion * {
  transition-timing-function: var(--ease-cinema);
}

/* Elements that should animate by default */
a,
button,
.btn,
.card,
.surface--lift,
.movie-card__poster,
.nav__link {
  transition:
    transform var(--dur-base) var(--ease-cinema),
    box-shadow var(--dur-base) var(--ease-cinema),
    border-color var(--dur-base) var(--ease-cinema),
    color var(--dur-fast) var(--ease-cinema),
    background var(--dur-fast) var(--ease-cinema),
    filter var(--dur-fast) var(--ease-cinema),
    opacity var(--dur-fast) var(--ease-cinema);
}

/* ---- Hover lift utility ------------------------------------------------ */
.hover-lift {
  transition:
    transform var(--dur-base) var(--ease-cinema),
    box-shadow var(--dur-base) var(--ease-cinema);
}

.hover-lift:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-lift), var(--glow-primary);
}

/* ---- Subtle hover (text / icons) -------------------------------------- */
.hover-soft:hover {
  color: var(--neon);
  text-shadow: 0 0 18px rgba(0, 212, 255, 0.18);
}

/* ---- Active press ------------------------------------------------------ */
.press:active {
  transform: translateY(-2px) scale(1.01);
  filter: brightness(0.96);
}

/* ---- Fade & slide (JS-triggered) -------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--dur-slow) var(--ease-cinema),
    transform var(--dur-slow) var(--ease-cinema);
}

/* Directional variants */
.reveal--left {
  transform: translateX(-18px);
}

.reveal--right {
  transform: translateX(18px);
}

.reveal--scale {
  transform: scale(0.96);
}

.reveal.is-visible.reveal--left,
.reveal.is-visible.reveal--right,
.reveal.is-visible.reveal--scale {
  transform: none;
}

/* ---- Stagger helpers --------------------------------------------------- */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(14px);
}

[data-stagger].is-visible > * {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-slow) var(--ease-cinema),
    transform var(--dur-slow) var(--ease-cinema);
}

[data-stagger].is-visible > *:nth-child(1) {
  transition-delay: 0ms;
}
[data-stagger].is-visible > *:nth-child(2) {
  transition-delay: 80ms;
}
[data-stagger].is-visible > *:nth-child(3) {
  transition-delay: 160ms;
}
[data-stagger].is-visible > *:nth-child(4) {
  transition-delay: 240ms;
}
[data-stagger].is-visible > *:nth-child(5) {
  transition-delay: 320ms;
}

/* ---- Pulse (attention, sparingly) ------------------------------------- */
.pulse {
  position: relative;
}

.pulse::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.25), transparent 60%);
  opacity: 0;
  animation: pulse 2.4s var(--ease-cinema) infinite;
}

@keyframes pulse {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }
  40% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

/* ---- Loading spinner --------------------------------------------------- */
.spinner {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--primary);
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- Page transitions (optional) -------------------------------------- */
.page-fade {
  animation: pageFadeIn 420ms var(--ease-cinema) both;
}

@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- Reduced motion compliance --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}