/* Kahani motion layer — entrance, scroll reveals, gentle floats, hover lifts.
   Uses the individual `translate` / `rotate` properties so it never fights the
   design's own inline `transform: rotate(...)` tilts. Off for reduced-motion. */

@keyframes m-rise { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
@keyframes m-float { from { translate: 0 0; } to { translate: 0 -9px; } }
@keyframes m-wobble { 0%, 100% { rotate: -5deg; } 50% { rotate: 5deg; } }
@keyframes m-pop { 0% { scale: .6; opacity: 0; } 70% { scale: 1.06; opacity: 1; } 100% { scale: 1; } }

@media (prefers-reduced-motion: no-preference) {
  /* 1. Page entrance: hero content rises in on load (CSS only, no flash) */
  .m-js main section:first-of-type > *,
  .m-js main .post-head > *,
  .m-js main .simple-hero > * {
    animation: m-rise .8s cubic-bezier(.2, .75, .25, 1) both;
  }
  .m-js main section:first-of-type > *:nth-child(2), .m-js main .post-head > *:nth-child(2), .m-js main .simple-hero > *:nth-child(2) { animation-delay: .12s; }
  .m-js main section:first-of-type > *:nth-child(3), .m-js main .post-head > *:nth-child(3), .m-js main .simple-hero > *:nth-child(3) { animation-delay: .24s; }
  .m-js main section:first-of-type > *:nth-child(n+4), .m-js main .post-head > *:nth-child(n+4) { animation-delay: .36s; }

  /* 2. Scroll reveal (classes added by motion.js only to below-the-fold blocks) */
  .m-reveal { opacity: 0; translate: 0 28px; transition: opacity .75s cubic-bezier(.2, .75, .25, 1), translate .75s cubic-bezier(.2, .75, .25, 1); transition-delay: var(--m-delay, 0s); }
  .m-reveal.m-in { opacity: 1; translate: 0 0; }

  /* 3. Ambient motion: polaroids drift, stat badges wobble */
  .m-float { animation: m-float var(--m-dur, 6s) ease-in-out var(--m-delay, 0s) infinite alternate; }
  .m-wobble { animation: m-pop .7s cubic-bezier(.3, 1.4, .5, 1) .5s both, m-wobble 7s ease-in-out 1.2s infinite; }

  /* 4. Hover: cards lift, pills nudge */
  .m-lift { transition: translate .25s ease, box-shadow .25s ease; }
  .m-lift:hover, .m-lift:focus-visible { translate: 0 -5px; box-shadow: 6px 8px 0 -1px rgba(25, 24, 25, .9); }
  .m-nudge { transition: translate .2s ease, scale .2s ease; }
  .m-nudge:hover, .m-nudge:focus-visible { translate: 0 -2px; scale: 1.03; }
  .m-zoom { overflow: hidden; }
  .m-zoom img { transition: scale .6s cubic-bezier(.2, .75, .25, 1); }
  .m-zoom:hover img { scale: 1.05; }
}

@media (prefers-reduced-motion: reduce) {
  .m-reveal { opacity: 1 !important; translate: none !important; }
}