/* 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. */
/* 31-10 his rule: the page only ever scrolls up and down. Nothing wider than the screen can nudge it sideways,
   on any phone, at any angle of swipe (galleries keep their own sideways swipe). */
html, body { overflow-x: hidden; overflow-x: clip; overscroll-behavior-x: none; max-width: 100%; }
@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; }
}