/* Storefront motion system. Everything here is driven by assets/js/motion.js,
   which only adds the `motion` class (and data-anim attributes) when the visitor
   has not asked for reduced motion - so with JS off or reduced motion on, the
   page simply renders in its final state. */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

html { scroll-behavior: smooth; overflow-x: clip; }

/* ---- Scroll reveal ---------------------------------------------------- */
html.motion [data-anim] {
  opacity: 0;
  transform: translate3d(0, var(--dy, 34px), 0);
  transition: opacity 0.95s var(--ease-out) var(--d, 0ms), transform 0.95s var(--ease-out) var(--d, 0ms);
  will-change: opacity, transform;
}
html.motion [data-anim="left"] { transform: translate3d(-36px, 0, 0); }
html.motion [data-anim="right"] { transform: translate3d(36px, 0, 0); }
html.motion [data-anim="zoom"] { transform: scale(0.965); }
html.motion [data-anim].is-in { opacity: 1; transform: none; }
html.motion [data-anim].is-instant { transition: none; }

/* ---- Interactive polish ---------------------------------------------- */
/* Low-specificity defaults: any Tailwind transition-* class still wins. The
   individual `translate`/`scale` properties compose with Tailwind's `transform`
   instead of replacing it, so centred/absolute buttons never jump. */
a, button {
  transition-property: color, background-color, border-color, box-shadow, opacity, translate, scale;
  transition-duration: 0.28s;
  transition-timing-function: var(--ease-soft);
}
a[class*="bg-primary"]:hover, button[class*="bg-primary"]:hover:not(:disabled),
a[class*="bg-gold-light"]:hover, button[class*="bg-gold-light"]:hover:not(:disabled) {
  translate: 0 -2px;
  box-shadow: 0 12px 26px -12px rgba(60, 3, 17, 0.55);
}
button:active:not(:disabled), a[class*="bg-primary"]:active { scale: 0.98; }

@keyframes badgePop {
  0% { transform: scale(1); }
  40% { transform: scale(1.55); }
  100% { transform: scale(1); }
}
.badge-pop { animation: badgePop 0.55s var(--ease-out); }

/* ---- Menus, panels and modals ---------------------------------------- */
@keyframes dropIn {
  from { opacity: 0; transform: translate3d(0, -10px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetIn {
  from { opacity: 0; transform: translate3d(0, -18px, 0) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes drawerIn {
  from { transform: translate3d(-100%, 0, 0); }
  to { transform: none; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}

.sh-mega.is-open { animation: dropIn 0.32s var(--ease-out) both; }
.sh-search--capsule.is-open { animation: dropIn 0.3s var(--ease-out) both; }
.account-dropdown:not(.hidden) { animation: dropIn 0.28s var(--ease-out) both; transform-origin: top right; }
#mobile-nav-overlay:not(.hidden) { animation: fadeIn 0.3s ease both; }
#mobile-nav-overlay:not(.hidden) .sh-drawer { animation: drawerIn 0.45s var(--ease-out) both; }
#faq-modal:not(.hidden) { animation: fadeIn 0.3s ease both; }
#faq-modal:not(.hidden) > div:nth-child(2) { animation: sheetIn 0.5s var(--ease-out) both; }
#lightbox:not(.hidden) { animation: fadeIn 0.3s ease both; }
.tab-content:not(.hidden) { animation: fadeUp 0.55s var(--ease-out) both; }

/* ---- Page leave ------------------------------------------------------- */
html.is-leaving body > main,
html.is-leaving body > footer {
  opacity: 0;
  transform: translate3d(0, -8px, 0);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sh-mega, .sh-search--capsule, .account-dropdown, #mobile-nav-overlay, #mobile-nav-overlay .sh-drawer,
  #faq-modal, #faq-modal > div, #lightbox, .tab-content, .badge-pop { animation: none !important; }
}