/* MOTION LAYER · every custom store (31-10, his rule: "Anything that I can click on, I want an animation...
   a clean animation, like liquid glass and like a floating satisfying hover... not annoying, not gimmicky,
   on every single website"). Linked by stores/shared/inject_motion.py; the artist build links it itself.
   Pure polish: if this file never loads, the store works the same. Reduced-motion users get none of it. */
@media (prefers-reduced-motion: no-preference) {
  /* everything clickable floats up a touch on hover and presses in on tap */
  :where(button, a.btn, .btn, .atc, .qa, .vp, .tier, .ax, .pcard, .thumbs button, .faq summary, .acc summary,
         .hdr nav a, .mnav a, footer a, input[type=submit], [role=radio], [role=button], .mo-click) {
    transition: transform .38s cubic-bezier(.2, .9, .25, 1), box-shadow .38s cubic-bezier(.2, .9, .25, 1),
                background-color .25s ease, border-color .25s ease, color .25s ease, opacity .25s ease;
    will-change: transform;
  }
  @media (hover: hover) {
    :where(button, a.btn, .btn, .atc, .qa, .vp, .pcard, .thumbs button, input[type=submit], .mo-click):hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .45), 0 2px 6px -2px rgba(0, 0, 0, .12);
    }
    :where(.tier, .ax, [role=radio]):hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .4); }
    :where(.hdr nav a, .mnav a, footer a):hover { transform: translateY(-1px); }
    :where(.faq summary, .acc summary):hover { transform: translateX(3px); }
  }
  :where(button, a.btn, .btn, .atc, .qa, .vp, .tier, .ax, .pcard, input[type=submit], .mo-click):active {
    transform: translateY(0) scale(.975); transition-duration: .12s;
  }
  /* liquid glass: a soft light band glides across the main buttons on hover */
  .mo-glass { position: relative; overflow: hidden; isolation: isolate; }
  .mo-glass > .mo-glint {
    position: absolute; inset: -2px; pointer-events: none; z-index: 1; border-radius: inherit;
    background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .34) 46%, rgba(255, 255, 255, .12) 54%, transparent 66%);
    transform: translateX(-130%); transition: transform .85s cubic-bezier(.2, .8, .2, 1);
  }
  @media (hover: hover) { .mo-glass:hover > .mo-glint { transform: translateX(130%); } }
  .mo-glass.mo-idle > .mo-glint { animation: moGlint 5.5s cubic-bezier(.2, .8, .2, 1) 1.2s infinite; }
  @keyframes moGlint { 0% { transform: translateX(-130%); } 22%, 100% { transform: translateX(130%); } }
  /* picked option settles with a small pop */
  :where(.vp.sel, .tier.sel, .sw.sel) { animation: moPick .42s cubic-bezier(.2, 1.4, .4, 1); }
  @keyframes moPick { 0% { transform: scale(.96); } 100% { transform: scale(1); } }
  /* scroll reveal: blocks below the fold rise in once (only ever added by motion.js) */
  .mo-rv { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1); }
  .mo-rv.mo-in { opacity: 1; transform: none; }
  /* photos breathe a little on hover */
  @media (hover: hover) {
    :where(.iwt, .vwt, .media, .gallery, .pcard) img { transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
    :where(.iwt, .vwt, .pcard):hover img { transform: scale(1.025); }
  }
  /* header gets a soft shadow once you scroll */
  .mo-scrolled :where(header.hdr, .hdr) { box-shadow: 0 8px 24px -18px rgba(0, 0, 0, .35); transition: box-shadow .3s ease; }
}