/* YemisiBoutique — motion.
   Design: master_of_works/design.md §5.

   EVERY rule in this file lives inside @media (prefers-reduced-motion:
   no-preference). The reference site animates 164 elements and carries zero
   reduced-motion rules (MEASURED); this shop honours the setting. Motion is a
   progressive enhancement here, never a gate: with `reduce` set, or with this
   stylesheet missing entirely, every control still works and every panel is
   still visible — the drawers open, the submenu opens, the images are painted.

   The timings below were measured off the reference, not invented:
     submenu            0.3s ease-in-out on opacity + visibility
     drawer             0.4s cubic-bezier(.645,.045,.355,1) on transform
     add-to-cart colour 0.45s cubic-bezier(.785,.135,.15,.86) -> 0.35s here
     image fade-in      0.6s ease on opacity
*/

@media (prefers-reduced-motion: no-preference) {

  /* Nav submenu — the reference's exact pattern. */
  .nav__sub {
    transition: opacity .3s ease-in-out, visibility .3s ease-in-out;
  }

  /* Drawers: mobile menu from the left, bag from the right. */
  .drawer {
    transition: transform .4s cubic-bezier(.645, .045, .355, 1),
                visibility .4s;
  }

  /* Cards: the alternate photograph cross-fades in on hover — a fade, not a
     zoom, which is what the reference actually does. */
  .card__img--alt { transition: opacity .4s ease; }
  .card__media    { transition: box-shadow .35s ease; }
  .card:hover .card__media { box-shadow: 0 10px 26px rgba(8, 48, 40, .18); }

  /* Buttons. */
  .btn {
    transition: background-color .35s cubic-bezier(.785, .135, .15, .86),
                color .35s cubic-bezier(.785, .135, .15, .86),
                border-color .35s ease;
  }
  .nav__links a, .nav__icon, .nav__sub-toggle, .foot__col a {
    transition: color .3s ease;
  }

  /* Images fade in once they have loaded (cart.js adds .loaded). */
  .fade-in { opacity: 0; }
  .fade-in.loaded { opacity: 1; transition: opacity .6s ease; }

  /* Scroll reveal: sections arrive with a short rise. motion.js adds
     .reveal-ready only when it boots, so a section is NEVER left invisible
     because JavaScript failed. */
  .reveal-ready .reveal {
    opacity: 0; transform: translateY(20px);
  }
  .reveal-ready .reveal.revealed {
    opacity: 1; transform: translateY(0);
    transition: opacity .6s ease-out, transform .6s ease-out;
  }

  /* The first-order modal. */
  .modal { transition: opacity .3s ease; }
  .modal__box { transition: transform .3s ease; }
  .modal.is-entering .modal__box { transform: scale(.95); }

  /* The announcement bar leaving on a visitor's × dismissal. */
  .announce { transition: opacity .25s ease; }
  .announce.is-going { opacity: 0; }
}