/* ============================================================
   MOTION
   One file for every animation on the site. Everything here is
   opt-in through a class, and everything switches off under
   prefers-reduced-motion.
   ============================================================ */

:root {
  --m-fast: .22s;
  --m-base: .42s;
  --m-slow: .7s;
  --m-ease: cubic-bezier(.22,.68,.32,1);
  --m-spring: cubic-bezier(.34,1.46,.5,1);
}

/* ---------- 1. Scroll reveals (directional) ---------- */
.js .reveal-up,
.js .reveal-x,
.js .reveal-left,
.js .reveal-zoom,
.js .reveal-blur,
.js .reveal-rise {
  opacity: 0;
  transition: opacity var(--m-slow) var(--m-ease), transform var(--m-slow) var(--m-ease), filter var(--m-slow) var(--m-ease);
  will-change: opacity, transform;
}
.js .reveal-up     { transform: translateY(30px); }
.js .reveal-x      { transform: translateX(26px); }
.js .reveal-left   { transform: translateX(-26px); }
.js .reveal-zoom   { transform: scale(.93); }
.js .reveal-blur   { filter: blur(9px); transform: translateY(14px); }
.js .reveal-rise   { transform: translateY(46px) scale(.97); }

.js .reveal-up.is-in,
.js .reveal-x.is-in,
.js .reveal-left.is-in,
.js .reveal-zoom.is-in,
.js .reveal-blur.is-in,
.js .reveal-rise.is-in {
  opacity: 1; transform: none; filter: none;
}

/* ---------- 2. Headline word-by-word ---------- */
.js .m-words .m-word {
  display: inline-block;
  opacity: 0; transform: translateY(.5em) rotate(2deg);
  transition: opacity .55s var(--m-ease), transform .55s var(--m-spring);
}
.js .m-words.is-in .m-word { opacity: 1; transform: none; }

/* ---------- 3. Counting numbers ---------- */
.m-count { font-variant-numeric: tabular-nums; }

/* ---------- 4. Underline sweep on links ---------- */
.m-link {
  position: relative; display: inline-block;
}
.m-link::after {
  content: ''; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--m-base) var(--m-ease);
}
.m-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- 5. Button shine ---------- */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.26) 48%, transparent 76%);
  transform: translateX(-120%);
  transition: transform .75s var(--m-ease);
  pointer-events: none;
}
.btn--primary:hover::after { transform: translateX(120%); }

/* ---------- 6. Button press ---------- */
.btn:active, .p-card__act:active, .mini-cart__close:active { transform: scale(.96); }
.btn { transition: background-color var(--m-fast) var(--m-ease), border-color var(--m-fast) var(--m-ease), color var(--m-fast) var(--m-ease), transform .12s var(--m-ease), box-shadow var(--m-fast) var(--m-ease); }

/* ---------- 7. Card lift ---------- */
.m-lift { transition: transform var(--m-base) var(--m-ease), box-shadow var(--m-base) var(--m-ease); }
.m-lift:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }

/* ---------- 8. Sticky header shrink ---------- */
.site-header { transition: box-shadow .3s var(--m-ease), transform .35s var(--m-ease); }
.site-header.is-stuck { box-shadow: 0 6px 22px rgba(12,30,42,.10); }
.site-header.is-hidden { transform: translateY(-100%); }

/* ---------- 9. Scroll progress bar ---------- */
.m-progress {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 120;
  background: linear-gradient(90deg, var(--c-navy), var(--c-steel));
  width: 0%; transition: width .1s linear;
  pointer-events: none;
}

/* ---------- 10. Back-to-top ---------- */
.m-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--c-navy); color: #fff; border: none;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-3); cursor: pointer;
  opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none;
  transition: opacity .3s var(--m-ease), transform .3s var(--m-spring), background-color .2s var(--m-ease);
}
.m-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.m-top:hover { background: var(--c-navy-deep); }
.m-top svg { transform: rotate(-90deg); }

/* ---------- 11. Image reveal (clip wipe) ---------- */
.js .m-wipe { clip-path: inset(0 0 100% 0); transition: clip-path .85s var(--m-ease); }
.js .m-wipe.is-in { clip-path: inset(0 0 0 0); }

/* ---------- 12. Marquee ---------- */
.m-marquee { overflow: hidden; }
.m-marquee__track {
  display: flex; gap: var(--s-6); width: max-content;
  animation: m-marquee 38s linear infinite;
}
.m-marquee:hover .m-marquee__track { animation-play-state: paused; }
@keyframes m-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 13. Parallax float ---------- */
.m-float { animation: m-float 6s ease-in-out infinite; }
@keyframes m-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ---------- 14. Pulse dot ---------- */
.m-pulse { position: relative; }
.m-pulse::before {
  content: ''; position: absolute; inset: -4px; border-radius: inherit;
  border: 1.5px solid currentColor; opacity: .5;
  animation: m-pulse 2.2s var(--m-ease) infinite;
}
@keyframes m-pulse {
  0% { transform: scale(.9); opacity: .55; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { opacity: 0; }
}

/* ---------- 15. Skeleton shimmer ---------- */
.m-skeleton {
  background: linear-gradient(90deg, var(--c-ice) 25%, var(--c-ice-deep) 37%, var(--c-ice) 63%);
  background-size: 400% 100%;
  animation: m-shimmer 1.3s ease-in-out infinite;
}
@keyframes m-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- 16. Drawer / panel slide (already used, refined) ---------- */
.mini-cart__panel { transition: transform var(--m-base) var(--m-ease); }
.mini-cart__overlay { transition: opacity var(--m-base) var(--m-ease); }
.mini-cart__row {
  animation: m-row-in .42s var(--m-ease) both;
}
@keyframes m-row-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

/* ---------- 17. Badge pop ---------- */
@keyframes m-pop { 0% { transform: scale(1); } 45% { transform: scale(1.4); } 100% { transform: scale(1); } }
.m-pop { animation: m-pop .4s var(--m-spring); }

/* ---------- 18. Toast ---------- */
.m-toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 130;
  transform: translate(-50%, 24px); opacity: 0; pointer-events: none;
  background: var(--c-navy-deep); color: #fff;
  border-radius: 999px; padding: 11px var(--s-5);
  font-size: var(--t-sm); font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: var(--sh-3);
  transition: opacity .3s var(--m-ease), transform .3s var(--m-spring);
}
.m-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 19. Tilt ---------- */
.m-tilt { transition: transform .3s var(--m-ease); transform-style: preserve-3d; }

/* ---------- 20. Nav dropdown ---------- */
.mega { transition: opacity .26s var(--m-ease), transform .26s var(--m-ease), visibility .26s; }

/* ---------- 21. Chip hover ---------- */
.spec-chip { transition: background-color var(--m-fast) var(--m-ease), border-color var(--m-fast) var(--m-ease), transform var(--m-fast) var(--m-ease); }
.spec-chip:hover { transform: translateY(-1px); border-color: var(--c-steel); }

/* ---------- 22. Focus ring ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--c-navy); outline-offset: 2px; border-radius: 3px;
}

/* ---------- 23. Page enter ---------- */
.js body { animation: m-page .5s var(--m-ease) both; }
@keyframes m-page { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 24. Accordion chevron ---------- */
.faq__q svg { transition: transform .3s var(--m-spring); }
.faq__q[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ---------- 25. Gallery thumb ---------- */
.p-gallery__thumb { transition: border-color var(--m-fast) var(--m-ease), transform var(--m-fast) var(--m-ease); }
.p-gallery__thumb:hover { transform: translateY(-2px); }

/* ---------- 26. Stat number rise ---------- */
.js .stats-strip__item { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--m-ease), transform .6s var(--m-ease); }
.js .stats-strip__inner.is-in .stats-strip__item { opacity: 1; transform: none; }

/* ---------- 27. Icon nudge ---------- */
.sec-head__link svg, .btn svg, .coll-card__go svg, .promo-card__go svg { transition: transform var(--m-fast) var(--m-ease); }
.sec-head__link:hover svg, .btn:hover svg, .coll-card:hover .coll-card__go svg, .promo-card:hover .promo-card__go svg { transform: translateX(3px); }

/* ---------- 28. Search rail focus ---------- */
.hsearch { transition: box-shadow .25s var(--m-ease), border-color .25s var(--m-ease); }
.hsearch:focus-within { box-shadow: 0 0 0 4px rgba(11,76,124,.12); }

/* ---------- 29. Hero slide crossfade (refined) ---------- */
.hero-slide { transition: opacity .62s var(--m-ease); }
.hero-slider__dot { transition: background-color .2s var(--m-ease), transform .28s var(--m-spring), width .28s var(--m-ease); }
.hero-slider__dot.is-active { width: 22px; border-radius: 999px; }

/* ---------- 30. Footer link slide ---------- */
.footer__links a { display: inline-block; transition: transform var(--m-fast) var(--m-ease), color var(--m-fast) var(--m-ease); }
.footer__links a:hover { transform: translateX(3px); }

/* ============================================================
   Reduced motion: everything above collapses to a plain state.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .js .reveal-up, .js .reveal-x, .js .reveal-left,
  .js .reveal-zoom, .js .reveal-blur, .js .reveal-rise,
  .js .m-words .m-word, .js .stats-strip__item {
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
  .js .m-wipe { clip-path: none; }
  .m-marquee__track, .m-float, .m-pulse::before, .m-skeleton { animation: none; }
  .js body { animation: none; }
  .btn--primary::after { display: none; }
  .m-lift:hover, .spec-chip:hover, .footer__links a:hover,
  .p-gallery__thumb:hover { transform: none; }
}

/* ============================================================
   ICON GUARD
   Every icon carries its own width/height attributes, but any
   component that forgets to constrain them — or an inherited
   `width:100%` — lets the SVG grow to its viewBox. These rules
   keep an icon at the size it was asked for, everywhere.
   ============================================================ */

/* An inline icon already carries width and height in its own markup,
   and the browser honours those unless CSS overrides them. So the guard
   does nothing but keep an icon from being stretched by an inherited
   full-width rule, and stop it shrinking inside a flex row.

   It must NOT set width/height itself: doing that overrode every
   component's own icon size and was what inflated the icons on the shop,
   category and account pages, while the home page — which carries no
   .woocommerce body class — stayed correct. */
svg[aria-hidden="true"] { flex: none; max-width: 100%; }

/* The brand mark is artwork, not an icon: it scales on height only. */
.brand__mark { height: 40px; width: auto; max-width: none; flex: none; }
.drawer__head .brand__mark { height: 34px; }
.brand__lockup { max-width: 200px; height: auto; }

@media (max-width: 1024px) {
  .brand__mark { height: 34px; }
}
@media (max-width: 480px) {
  .brand__mark { height: 30px; }
}

/* ---------- Product grid cascade ---------- */
.js .m-cascade > * {
  opacity: 0; transform: translateY(26px) scale(.97);
  transition: opacity .55s var(--m-ease), transform .55s var(--m-ease);
}
.js .m-cascade.is-in > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .m-cascade > * { opacity: 1 !important; transform: none !important; }
}