/* Stand-ins for framer-motion. site.css is the original compiled Tailwind, untouched.
   Hidden start states apply only when JS runs (html.js), so content never stays invisible. */

/* framer-motion tween default ease is easeInOut */
html.js [data-m]:not(.m-done) {
  opacity: 0;
  transition: opacity .6s cubic-bezier(.42, 0, .58, 1), transform .6s cubic-bezier(.42, 0, .58, 1);
  will-change: opacity, transform;
}
html.js [data-m="load"]  { transform: translateY(30px); }
html.js [data-m="load"]:not(.m-done) { transition-duration: .8s; }
html.js [data-m="up"]    { transform: translateY(20px); }
html.js [data-m="left"]  { transform: translateX(-20px); }
html.js [data-m="right"] { transform: translateX(20px); }
html.js [data-m].is-in   { opacity: 1; transform: none; }

/* Once the entrance has played, site.js adds .m-done and the element's own
   Tailwind transition (hover border, shadow) takes over again. */
html.js [data-m].m-done { opacity: 1; transform: none; }

/* mobile menu: AnimatePresence height 0 <-> auto, 0.3s */
#mobile-menu { overflow: hidden; }
#mobile-menu.menu-anim { transition: height .3s cubic-bezier(.42, 0, .58, 1), opacity .3s cubic-bezier(.42, 0, .58, 1); }

/* gallery lightbox */
.lb { opacity: 0; transition: opacity .3s ease; }
.lb .lb-inner { transform: scale(.8); transition: transform .45s cubic-bezier(.34, 1.36, .64, 1); }
.lb.lb-open { opacity: 1; }
.lb.lb-open .lb-inner { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  html.js [data-m] { opacity: 1 !important; transform: none !important; transition: none; }
  .lb, .lb .lb-inner, #mobile-menu.menu-anim { transition: none; }
}