/* Shared motion for every public page: one easing family, press feedback, scroll reveals
   driven by js/motion.js, a single hero entrance and smooth disclosures. Reduced motion
   gets none of it; content is never hidden unless js/motion.js has marked the page ready. */
:root {
  --m-ease: cubic-bezier(.22, 1, .36, 1);
  --m-expo: cubic-bezier(.16, 1, .3, 1);
  --m-start: left;
}
html[dir="rtl"] { --m-start: right; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; interpolate-size: allow-keywords; }

  /* Below-the-fold content waits for js/motion.js to fade it up as it scrolls in. */
  .m-ready .m-pending { opacity: 0; }

  /* Press feedback on every button family; hover lift only where a pointer can hover. */
  .c-button, .small-button, .load-more, .preferences-link, .gender-tabs button, .category-tabs button,
  .catalog-collection, .filter-sheet-done, .save-button, .rail-step {
    transition-property: background-color, color, border-color, box-shadow, transform;
    transition-duration: .18s;
    transition-timing-function: var(--m-ease);
  }
  :is(.c-button, .small-button, .load-more, .preferences-link, .gender-tabs button, .category-tabs button,
    .catalog-collection, .filter-sheet-done, .rail-step, .btn):active:not(:disabled) { transform: scale(.97); }
  .save-button:active { transform: scale(.88); }
  @media (hover: hover) {
    .c-button.primary:hover, .btn-tape:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -12px oklch(55% 0.12 85); }
    .product-photo img { transition: transform .7s var(--m-expo); }
    .product-card:hover .product-photo img, .gallery-slide:hover img { transform: scale(1.045); }
    .app-logo svg { transition: transform .6s var(--m-expo); }
    .app-logo:hover svg { transform: rotate(-12deg) scale(1.06); }
    .app-desktop-nav a { transition: color .2s ease, background-color .25s var(--m-ease); }
  }

  /* Home hero: the tape underline draws, the mirror rises and the measuring tape slides in, once. */
  .size-hero .fit-word::after { transform-origin: var(--m-start) center; animation: m-draw .9s .2s var(--m-expo) both; }
  .size-hero .main-photo { animation: m-rise .9s var(--m-expo) both; }
  .size-hero .detail-photo { animation: m-rise .9s .1s var(--m-expo) both; }
  .size-hero .tape-mark { animation: m-tape 1s .3s var(--m-expo) both; }
  .size-hero .hero-actions > * { animation: m-rise .7s var(--m-expo) both; }
  .size-hero .hero-actions > :nth-child(2) { animation-delay: .06s; }
  .size-hero .hero-actions > :nth-child(3) { animation-delay: .12s; }

  /* The phone mirror tab catches the light once when a page opens. */
  .app-mirror { overflow: hidden; }
  .app-mirror::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / 70%) 50%, transparent 65%);
    transform: translateX(-120%); animation: m-shine 1.1s .6s var(--m-ease) both;
  }

  /* Disclosures open and close smoothly where the browser supports animating to auto. */
  details:not([data-sheet])::details-content {
    block-size: 0; overflow-y: clip;
    transition: block-size .35s var(--m-ease), content-visibility .35s allow-discrete;
  }
  details:not([data-sheet])[open]::details-content { block-size: auto; }

  /* Pages cross-fade with a short lift; the shell bars stay put (js/app-shell names them). */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: m-page-out .16s ease-in both; }
  ::view-transition-new(root) { animation: m-page-in .34s var(--m-expo) both; }
}

/* A small burst when a piece is saved (js/motion.js places it over the heart). */
.m-burst { position: fixed; z-index: 200; width: 0; height: 0; pointer-events: none; }
.m-burst i {
  position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-accent, oklch(85% 0.145 91));
  animation: m-burst .6s var(--m-expo) forwards;
}
.m-burst i:nth-child(even) { background: var(--c-green, oklch(40% 0.047 157)); width: 5px; height: 5px; }

@keyframes m-draw { from { transform: scaleX(0); } }
@keyframes m-rise { from { opacity: 0; transform: translateY(16px) scale(.985); } }
@keyframes m-tape { from { opacity: 0; transform: translateX(-36px) rotate(-14deg); } to { opacity: 1; transform: rotate(-6deg); } }
@keyframes m-shine { to { transform: translateX(120%); } }
@keyframes m-page-out { to { opacity: 0; } }
@keyframes m-page-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes m-burst {
  0% { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; }
  100% { transform: rotate(var(--a)) translateY(-26px) scale(.2); opacity: 0; }
}

@media print { .m-pending { opacity: 1 !important; } }