/* motion.css - subtle polish motion system (Tech Manager Lab)
   Transform + opacity only: no layout shift, no CLS.
   Loaded AFTER each page's inline <style> so these rules win on ties.
   Respects prefers-reduced-motion. */

html { scroll-behavior: smooth; }

/* ---- scroll reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 420ms ease-out, transform 420ms ease-out;
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---- staggered groups ---- */
.reveal-group > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 420ms ease-out, transform 420ms ease-out;
}
.reveal-group.in > * { opacity: 1; transform: translateY(0); }
.reveal-group.in > *:nth-child(1) { transition-delay: 0ms; }
.reveal-group.in > *:nth-child(2) { transition-delay: 60ms; }
.reveal-group.in > *:nth-child(3) { transition-delay: 120ms; }
.reveal-group.in > *:nth-child(4) { transition-delay: 180ms; }
.reveal-group.in > *:nth-child(5) { transition-delay: 240ms; }
.reveal-group.in > *:nth-child(6) { transition-delay: 300ms; }
.reveal-group.in > *:nth-child(7) { transition-delay: 360ms; }
.reveal-group.in > *:nth-child(8) { transition-delay: 420ms; }

/* ---- hover lift ---- */
.lift {
  transition: transform 220ms ease-out, box-shadow 220ms ease-out,
              background-color 220ms ease-out, border-color 220ms ease-out;
}
.lift:hover { transform: translateY(-4px); }

/* ---- hero pulse ---- */
@keyframes tml-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.pulse { animation: tml-pulse 3.2s ease-in-out infinite; }

/* ---- background drift ---- */
@keyframes tml-drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.drift { animation: tml-drift 14s ease-in-out infinite; }

/* ---- button scale ---- */
.btn {
  transition: transform 180ms ease-out, box-shadow 220ms ease-out, filter 180ms ease-out;
}
.btn:hover { transform: scale(1.03); }

/* ---- thumbnail scale ---- */
.thumb { transition: transform 240ms ease-out; }
.thumb:hover { transform: scale(1.03); }

/* ---- reduced motion: kill everything ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal,
  .reveal-group > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .lift, .btn, .thumb { transition: none !important; }
  .lift:hover, .btn:hover, .thumb:hover { transform: none !important; }
  .pulse, .drift { animation: none !important; }
}