/* public/css/motion.css
   Scroll animations for the public website (Phase 6): fade-ins, slide-ups, slide-ins and a gentle parallax on the big photos.
   The list of things that animate lives in js/motion.js (one place), which also writes the "hidden until it scrolls in" rules.
   This file holds only the moves themselves, so changing a speed or a distance is a one-line edit here.

   It is safe by design:
     - Nothing is hidden unless js/motion.js is running (it adds class "mo" to <html>), so with JavaScript off, or when the visitor has
       asked their device for reduced motion, the whole page is simply there, as before.
     - A move only plays once, then the element is left exactly as the page's own CSS draws it (hover effects keep working).

   Link it after css/styles.css:   <link rel="stylesheet" href="css/motion.css" /> */

:root {
    --mo-distance: 22px;      /* how far things travel while they fade in — tighter = snappier */
    --mo-time: 0.55s;         /* slightly faster reveals feel more responsive */
    --mo-ease: cubic-bezier(0.16, 1, 0.3, 1);  /* spring-like ease-out */
}

@keyframes mo-up    { from { opacity: 0; transform: translate3d(0, var(--mo-distance), 0); } to { opacity: 1; transform: none; } }
@keyframes mo-down  { from { opacity: 0; transform: translate3d(0, calc(var(--mo-distance) * -1), 0); } to { opacity: 1; transform: none; } }
@keyframes mo-left  { from { opacity: 0; transform: translate3d(calc(var(--mo-distance) * -1.6), 0, 0); } to { opacity: 1; transform: none; } }
@keyframes mo-right { from { opacity: 0; transform: translate3d(calc(var(--mo-distance) * 1.6), 0, 0); } to { opacity: 1; transform: none; } }
@keyframes mo-zoom  { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes mo-fade  { from { opacity: 0; } to { opacity: 1; } }

/* "backwards" = the first frame is held during the stagger delay, and when the move ends the element goes back to its own styles */
html.mo .mo-in {
    animation-duration: var(--mo-time);
    animation-timing-function: var(--mo-ease, cubic-bezier(0.16, 1, 0.3, 1));
    animation-fill-mode: backwards;
    animation-delay: var(--mo-delay, 0ms);
}
html.mo .mo-in[data-mo="up"]    { animation-name: mo-up; }
html.mo .mo-in[data-mo="down"]  { animation-name: mo-down; }
html.mo .mo-in[data-mo="left"]  { animation-name: mo-left; }
html.mo .mo-in[data-mo="right"] { animation-name: mo-right; }
html.mo .mo-in[data-mo="zoom"]  { animation-name: mo-zoom; }
html.mo .mo-in[data-mo="fade"]  { animation-name: mo-fade; }

/* anything the owner (or a page) marks by hand:  <div data-motion="up" data-motion-delay="150"> */
html.mo [data-motion]:not(.mo-in) { opacity: 0; }

/* ---------- parallax ----------
   The photo is drawn a little larger than its frame and slides inside it while the page scrolls.
   js/motion.js sets the "translate" value; the frame hides the overflow. */
html.mo [data-parallax-frame] { overflow: hidden; }
html.mo [data-parallax-frame] > [data-parallax],
html.mo [data-parallax-frame] [data-parallax] { will-change: translate; }
html.mo [data-parallax-frame] [data-parallax="soft"] { scale: 1.1; }
html.mo .hero-bg-image img[data-parallax] { scale: 1.12; }

@media (prefers-reduced-motion: reduce) {
    html.mo .mo-in { animation: none !important; }
    html.mo [data-motion]:not(.mo-in) { opacity: 1; }
}