/* Storefront-only progressive enhancement. Content remains visible before JavaScript runs.
   Motion envelope (tokens in moonarrow-design-tokens.css):
   - attack  (~160ms)  interaction feedback, the only tier used on cart / checkout / member surfaces;
   - sustain (~560ms)  reveals, staggered cards, masks, curtains;
   - reverb  (~1.2s)   brand storytelling on showcase surfaces only (intro, hero, scroll scenes, page transitions).
   Only compositor-friendly properties are animated: transform, opacity, clip-path (and SVG stroke offsets). */

/* ---------- Reveal contract (driven by moonarrow-motion.js) ---------- */
body.storefront-surface.moonarrow-motion-ready [data-moonarrow-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--moonarrow-motion-reveal-distance), 0);
  will-change: opacity, transform;
  transition: opacity var(--moonarrow-motion-reveal) var(--moonarrow-motion-reveal-ease), transform var(--moonarrow-motion-reveal) var(--moonarrow-motion-reveal-ease);
  transition-delay: var(--moonarrow-reveal-delay, 0ms);
}

body.storefront-surface.moonarrow-motion-ready [data-moonarrow-reveal="fade"] {
  transform: none;
}

/* Transactional surfaces stay quiet: short fade with a small lift. */
body.storefront-surface.moonarrow-motion-ready [data-moonarrow-reveal="quiet"] {
  transform: translate3d(0, var(--moonarrow-motion-quiet-distance), 0);
  transition-duration: var(--moonarrow-motion-quiet), var(--moonarrow-motion-quiet);
}

/* Headings rise out of a mask without changing layout height. */
body.storefront-surface.moonarrow-motion-ready [data-moonarrow-reveal="mask"] {
  opacity: 1;
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, 0.45em, 0);
  will-change: clip-path, transform;
  transition: clip-path var(--moonarrow-motion-hero-text) var(--moonarrow-ease-decay), transform var(--moonarrow-motion-hero-text) var(--moonarrow-ease-decay);
  transition-delay: var(--moonarrow-reveal-delay, 0ms);
}

/* Media opens like a curtain, then the photo settles from a slight zoom. */
body.storefront-surface.moonarrow-motion-ready [data-moonarrow-reveal="media"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
  transition: clip-path var(--moonarrow-motion-curtain) var(--moonarrow-ease-curtain);
  transition-delay: var(--moonarrow-reveal-delay, 0ms);
}

body.storefront-surface.moonarrow-motion-ready [data-moonarrow-reveal="media"] :is(#ProductMainImage, .brand-content-gallery img) {
  transform: scale(var(--moonarrow-motion-media-scale));
  transition: transform var(--moonarrow-motion-reverb) var(--moonarrow-ease-decay), opacity var(--moonarrow-motion-base) ease;
  transition-delay: var(--moonarrow-reveal-delay, 0ms), 0ms;
}

body.storefront-surface.moonarrow-motion-ready [data-moonarrow-reveal].is-moonarrow-revealed { opacity: 1; transform: none; }
body.storefront-surface.moonarrow-motion-ready :is([data-moonarrow-reveal="mask"], [data-moonarrow-reveal="media"]).is-moonarrow-revealed { clip-path: inset(0 0 0 0); }
body.storefront-surface.moonarrow-motion-ready [data-moonarrow-reveal="media"].is-moonarrow-revealed :is(#ProductMainImage, .brand-content-gallery img) { transform: none; }
body.storefront-surface.moonarrow-motion-ready [data-moonarrow-reveal].is-moonarrow-reveal-settled { will-change: auto; }
body.storefront-surface.moonarrow-motion-ready :is([data-moonarrow-reveal="mask"], [data-moonarrow-reveal="media"]).is-moonarrow-reveal-settled { clip-path: none; }

/* Line icons draw themselves once their block is revealed (shapes carry pathLength="1"). */
body.storefront-surface.moonarrow-motion-ready [data-moonarrow-reveal] [data-moonarrow-draw] > :is(path, circle) {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--moonarrow-motion-curtain) var(--moonarrow-ease-decay);
  transition-delay: calc(var(--moonarrow-reveal-delay, 0ms) + 160ms);
}

body.storefront-surface.moonarrow-motion-ready [data-moonarrow-reveal].is-moonarrow-revealed [data-moonarrow-draw] > :is(path, circle) {
  stroke-dashoffset: 0;
}

body.storefront-surface [data-moonarrow-count] {
  font-variant-numeric: tabular-nums;
}

body.storefront-surface :is(.btn, button, [role="button"])[aria-busy="true"] {
  cursor: progress;
  opacity: 0.72;
}

body.storefront-surface :is(.product-cart-message, .cart-status-message, [data-site-toast-region]) {
  transition: color var(--moonarrow-motion-fast) ease, opacity var(--moonarrow-motion-fast) ease;
}

@media (prefers-reduced-motion: no-preference) {
  body.storefront-surface :is(.btn, button, [role="button"]):not(:disabled):active {
    transform: translate3d(0, 1px, 0) scale(0.99);
  }

  /* The settle runs on the photo wrapper; the image itself keeps the owner's crop transform. */
  body.storefront-surface .ma-hero .carousel-item.active .ma-hero-photo {
    animation: moonarrow-home-media-settle var(--moonarrow-motion-reverb) var(--moonarrow-ease-decay) both;
    animation-delay: calc(var(--moonarrow-intro-offset) + 160ms);
  }
}

/* ---------- First-visit intro (landing page, once per session; see moonarrow-motion-boot.js) ---------- */
html.moonarrow-intro { --moonarrow-intro-offset: 900ms; }

.moonarrow-intro-overlay { display: none; }

html.moonarrow-intro .moonarrow-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  color: #fbfcfd;
  background: var(--moonarrow-color-nav-deep);
  animation: moonarrow-intro-lift 520ms var(--moonarrow-ease-curtain) 900ms both;
}

html.moonarrow-intro.moonarrow-intro-skipped .moonarrow-intro-overlay {
  animation: moonarrow-intro-fade 180ms ease both;
}

.moonarrow-intro-emblem {
  position: relative;
  display: grid;
  width: 160px;
  height: 160px;
  place-items: center;
}

.moonarrow-intro-ring {
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--moonarrow-color-cyan);
  border-radius: 50%;
  opacity: 0;
  animation: moonarrow-intro-ripple 1100ms var(--moonarrow-ease-decay) both;
}

.moonarrow-intro-ring:nth-child(2) { animation-delay: 140ms; }
.moonarrow-intro-ring:nth-child(3) { animation-delay: 280ms; }

.moonarrow-intro-mark {
  position: relative;
  display: grid;
  width: 104px;
  height: 104px;
  place-items: center;
  border-radius: 50%;
  background: #fbfcfd;
  animation: moonarrow-intro-mark 760ms var(--moonarrow-ease-decay) 120ms both;
}

.moonarrow-intro-mark img {
  width: 74px;
  height: 74px;
  object-fit: contain;
}

.moonarrow-intro-wordmark {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  white-space: nowrap;
  animation: moonarrow-intro-rise 560ms var(--moonarrow-ease-decay) 420ms both;
}

.moonarrow-intro-rule {
  width: 48px;
  height: 1px;
  background: var(--moonarrow-color-cyan);
  animation: moonarrow-scale-in 560ms var(--moonarrow-ease-decay) 480ms both;
}

@media (max-width: 575.98px) {
  html.moonarrow-intro { --moonarrow-intro-offset: 480ms; }
  html.moonarrow-intro .moonarrow-intro-overlay { animation-duration: 320ms; animation-delay: 480ms; }
  .moonarrow-intro-ring { display: none; }
  .moonarrow-intro-mark { animation-duration: 480ms; animation-delay: 0ms; }
  .moonarrow-intro-wordmark { animation-duration: 400ms; animation-delay: 160ms; }
  .moonarrow-intro-rule { animation-duration: 400ms; animation-delay: 200ms; }
}

/* ---------- Landing hero choreography (starts on first paint; offset by the intro when it plays) ---------- */
/* The copy column rises line by line, the square opens beside it — no element moves after it settles. */
@media (prefers-reduced-motion: no-preference) {
  html.moonarrow-js body.storefront-surface .moonarrow-hero .ma-hero-copy > :not(h1),
  html.moonarrow-js body.storefront-surface .moonarrow-hero .ma-hero-line {
    animation: moonarrow-hero-text-enter var(--moonarrow-motion-hero-text) var(--moonarrow-motion-reveal-ease) both;
    animation-delay: calc(var(--moonarrow-intro-offset) + var(--moonarrow-hero-step, 0ms));
  }

  html.moonarrow-js body.storefront-surface .moonarrow-hero .ma-hero-line { --moonarrow-hero-step: 110ms; }
  html.moonarrow-js body.storefront-surface .moonarrow-hero .ma-hero-line--answer { --moonarrow-hero-step: 220ms; }
  html.moonarrow-js body.storefront-surface .moonarrow-hero .ma-hero-intro { --moonarrow-hero-step: 340ms; }
  html.moonarrow-js body.storefront-surface .moonarrow-hero .ma-hero-actions { --moonarrow-hero-step: 440ms; }

  html.moonarrow-js body.storefront-surface .moonarrow-hero .ma-hero-media {
    animation: moonarrow-fade-in var(--moonarrow-motion-curtain) var(--moonarrow-ease-decay) backwards;
    animation-delay: calc(var(--moonarrow-intro-offset) + 120ms);
  }

  /* Written reveal ([data-moonarrow-write], see moonarrow-motion.js): the script splits the text into glyphs
     and each glyph inks in after the one before it, in document order. Until the script has split it the text
     waits hidden, and fades in on its own after a short delay if the script never runs. */
  html.moonarrow-js body.storefront-surface [data-moonarrow-write]:not(.is-moonarrow-writing) {
    animation: moonarrow-fade-in var(--moonarrow-motion-curtain) var(--moonarrow-ease-decay) both;
    animation-delay: calc(var(--moonarrow-intro-offset) + 2400ms);
  }

  html.moonarrow-js body.storefront-surface [data-moonarrow-write].is-moonarrow-writing {
    animation: none;
  }

  body.storefront-surface .moonarrow-write-glyph {
    animation: moonarrow-write-glyph var(--moonarrow-motion-write-glyph) var(--moonarrow-ease-decay) both;
    animation-delay: calc(var(--moonarrow-intro-offset) + 260ms + var(--moonarrow-write-delay, 0ms));
  }

  body.storefront-surface .moonarrow-hero .hero-count-rule.is-moonarrow-sweeping {
    transform-origin: left center;
    animation: moonarrow-scale-in var(--moonarrow-motion-curtain) var(--moonarrow-ease-decay) both;
  }
}

/* ---------- Scroll-linked scenes (CSS scroll-driven animations, no scroll listeners) ---------- */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    html.moonarrow-js body.storefront-surface .moonarrow-scroll-progress {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      z-index: 1001;
      display: block;
      height: 2px;
      background: var(--moonarrow-color-cyan);
      transform: scaleX(0);
      transform-origin: 0 50%;
      pointer-events: none;
      animation: moonarrow-scale-in linear both;
      animation-timeline: scroll(root block);
    }
  }
}

.moonarrow-scroll-progress { display: none; }

/* ---------- Navigation: hide on scroll down, recall on scroll up ---------- */
body.storefront-surface .site-header {
  transition: transform 360ms var(--moonarrow-ease-decay), box-shadow var(--moonarrow-motion-base) ease;
}

body.storefront-surface .site-header.is-moonarrow-nav-scrolled {
  box-shadow: 0 12px 32px rgba(7, 16, 31, 0.16);
}

body.storefront-surface .site-header.is-moonarrow-nav-hidden {
  transform: translate3d(0, -100%, 0);
}

/* ---------- Back to top ---------- */
.moonarrow-top-sentinel {
  position: absolute;
  top: 600px;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

body.storefront-surface .moonarrow-back-to-top {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 16px, 0);
  transition: opacity var(--moonarrow-motion-base) ease, transform 420ms var(--moonarrow-ease-decay), visibility 0s linear var(--moonarrow-motion-base), background-color var(--moonarrow-motion-attack) ease;
}

body.storefront-surface .moonarrow-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* ---------- Product cards ---------- */
body.storefront-surface .product-card.is-moonarrow-entering {
  animation: moonarrow-card-enter var(--moonarrow-motion-reveal) var(--moonarrow-motion-ease) backwards;
  animation-delay: var(--moonarrow-stagger-delay, 0ms);
}

body.storefront-surface.moonarrow-motion-ready .product-card-image {
  opacity: 0;
  transition: opacity var(--moonarrow-motion-base) ease, scale 700ms var(--moonarrow-ease-decay);
}
body.storefront-surface.moonarrow-motion-ready .product-card-image.is-moonarrow-image-ready,
body.storefront-surface.moonarrow-motion-ready #ProductMainImage.is-moonarrow-image-ready { opacity: 1; }
body.storefront-surface .product-card-quick-view { transition: opacity 180ms ease, transform 180ms ease; }

/* ---------- Shared link cards: every clickable card type behaves the same ----------
   Add a new card type HERE (and in tests/motion-module-boundary.check.mjs), never per page.
   Hover uses the independent `translate` / `scale` properties so it never fights the reveal and
   entrance animations, which own `transform`. */
body.storefront-surface :is(.product-card, .news-card, .custom-service-card) {
  transition: box-shadow var(--moonarrow-motion-base) var(--moonarrow-motion-ease), translate var(--moonarrow-motion-base) var(--moonarrow-ease-attack);
}
body.storefront-surface :is(.product-card-image, .news-card-cover img) {
  transition: opacity var(--moonarrow-motion-base) ease, scale 700ms var(--moonarrow-ease-decay);
}

@media (hover: hover) and (pointer: fine) {
  body.storefront-surface :is(.product-card, .news-card, .custom-service-card):is(:hover, :focus-within) {
    box-shadow: var(--moonarrow-shadow-elevated);
    translate: 0 -6px;
  }
  body.storefront-surface :is(.product-card, .news-card):hover :is(.product-card-image, .news-card-cover img) {
    scale: 1.06;
  }
}

/* Storefront performance buttons: the fill sweeps in from the left and out to the right. */
@media (prefers-reduced-motion: no-preference) {
  body.storefront-surface :is(.btn-primary, .btn-outline-primary)::before {
    transition: transform var(--moonarrow-motion-slow) var(--moonarrow-ease-decay);
  }
  body.storefront-surface :is(.ma-hero-buttons button, .ma-featured-control) {
    transition: color var(--moonarrow-motion-fast) ease, background-color var(--moonarrow-motion-fast) ease, border-color var(--moonarrow-motion-fast) ease;
  }
  /* Campaign splits: the cue rule draws across and the 2:1 picture leans in slightly. */
  body.storefront-surface .ma-feature-tile-cue::after {
    transition: transform var(--moonarrow-motion-slow) var(--moonarrow-ease-decay);
  }
  body.storefront-surface .ma-home-features--campaigns .ma-feature-tile-media > img {
    transition: scale 900ms var(--moonarrow-ease-decay);
  }
  body.storefront-surface .ma-home-features--campaigns .ma-feature-tile-link:is(:hover, :focus-visible) .ma-feature-tile-media > img {
    scale: 1.04;
  }
  /* Performance marquee: one slow loop; the track holds two identical runs so -50% is seamless. */
  body.storefront-surface .ma-marquee-track {
    animation: moonarrow-marquee 42s linear infinite;
  }
}

/* Home category tiles: the photo zooms while it washes out and the name fades in (0.5s). `scale` composes
   with the owner's crop transform set inline by home-features.js. */
@media (prefers-reduced-motion: no-preference) {
  body.storefront-surface .ma-home-features--categories .ma-feature-tile-media > img {
    transition: scale 500ms ease, opacity 500ms ease;
  }
  body.storefront-surface .ma-feature-tile-label {
    transition: opacity 500ms ease;
  }
  body.storefront-surface .ma-home-features--categories .ma-feature-tile-link:is(:hover, :focus-visible) .ma-feature-tile-media > img {
    scale: 1.3;
  }
}
@media (prefers-reduced-motion: no-preference) and (hover: none) {
  body.storefront-surface .ma-home-features--categories .ma-feature-tile-link:is(:hover, :focus-visible) .ma-feature-tile-media > img {
    scale: none;
  }
}

body.storefront-surface :is(.product-card, .news-card, .custom-service-card):focus-within { outline: 2px solid rgba(35, 40, 63, 0.35); outline-offset: 3px; }

/* ---------- Shared trailing / leading arrows on links and buttons ---------- */
body.storefront-surface :is(.btn, .text-link, .news-card-link, .custom-service-card-link, .product-card-arrow) > span[aria-hidden="true"]:last-child,
body.storefront-surface .cart-continue-link > span[aria-hidden="true"]:first-child {
  display: inline-block;
  transition: transform var(--moonarrow-motion-attack) var(--moonarrow-ease-attack);
}

@media (hover: hover) and (pointer: fine) {
  body.storefront-surface :is(.btn, .text-link, .news-card-link, .custom-service-card-link):is(:hover, :focus-visible) > span[aria-hidden="true"]:last-child,
  body.storefront-surface :is(.product-card, .news-card, .custom-service-card):is(:hover, :focus-within) :is(.product-card-arrow, .news-card-link, .custom-service-card-link) > span[aria-hidden="true"]:last-child {
    transform: translate3d(4px, 0, 0);
  }
  body.storefront-surface .cart-continue-link:is(:hover, :focus-visible) > span[aria-hidden="true"]:first-child {
    transform: translate3d(-4px, 0, 0);
  }
}

body.storefront-surface .btn:focus-visible > span[aria-hidden="true"]:last-child {
  transform: translate3d(4px, 0, 0);
}

/* ---------- Catalog loading: existing cards become skeletons (no layout change, no CLS) ---------- */
body.storefront-surface [data-product-search-results] { position: relative; }
body.storefront-surface [data-product-search-results][aria-busy="true"] .product-card {
  pointer-events: none;
  animation: moonarrow-skeleton-pulse 1100ms ease-in-out 150ms infinite;
}
body.storefront-surface [data-product-search-results][aria-busy="true"] .product-card-image-frame {
  animation: moonarrow-skeleton-surface 1100ms ease-in-out 150ms infinite;
}
body.storefront-surface [data-product-search-results][aria-busy="true"] .product-card :is(.product-card-image, .product-card-quick-view) {
  animation: moonarrow-skeleton-hide 1100ms linear 150ms infinite;
}
body.storefront-surface [data-product-search-results][aria-busy="true"] .product-card-content :is(h2, p, .product-stock-state, .product-card-arrow) {
  animation: moonarrow-skeleton-text 1100ms ease-in-out 150ms infinite;
}
body.storefront-surface .catalog-filter.is-loading [data-product-search-submit]::after {
  content: "";
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  margin-left: 0.45rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: moonarrow-spin 700ms linear infinite;
  vertical-align: -0.1rem;
}
body.storefront-surface [data-product-search-results].is-moonarrow-results-updated { animation: moonarrow-results-enter var(--moonarrow-motion-base) var(--moonarrow-motion-ease); }

/* ---------- Product details and cart feedback (attack tier) ---------- */
body.storefront-surface .product-detail-main-frame.is-moonarrow-gallery-changing > img { opacity: 0; }
body.storefront-surface.moonarrow-motion-ready .product-detail-main-frame > img { transition: opacity var(--moonarrow-motion-base) ease; }
/* Value updates (price, stock, subtotal): a quiet fade back in place — no tinted flash, no movement. */
body.storefront-surface .is-moonarrow-value-updated { animation: moonarrow-value-refresh 280ms ease-out; }
body.storefront-surface .product-information-list details[open] > p { animation: moonarrow-details-enter var(--moonarrow-motion-base) ease both; }
body.storefront-surface .product-add-button.is-moonarrow-pending,
body.storefront-surface .product-add-button.is-moonarrow-success { pointer-events: none; }
body.storefront-surface .product-add-button { transition: background-color var(--moonarrow-motion-base) ease, border-color var(--moonarrow-motion-base) ease; }
body.storefront-surface .product-add-button.is-moonarrow-success { background: var(--moonarrow-color-success); border-color: var(--moonarrow-color-success); }
body.storefront-surface [data-cart-summary-quantity].is-moonarrow-popping { animation: moonarrow-badge-pop 360ms var(--moonarrow-ease-attack); }

.moonarrow-cart-fly {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3000;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--moonarrow-color-gold);
  box-shadow: 0 0 0 4px rgba(189, 145, 87, 0.22);
  pointer-events: none;
}

/* ---------- Component motion (structure lives in moonarrow-storefront.css) ---------- */
body.storefront-surface #SelectedSpecificationPrice.is-moonarrow-value-updated {
  animation: moonarrow-value-refresh 280ms ease-out;
}
body.storefront-surface input.is-moonarrow-count-up { animation: moonarrow-count-up 260ms var(--moonarrow-ease-decay); }
body.storefront-surface input.is-moonarrow-count-down { animation: moonarrow-count-down 260ms var(--moonarrow-ease-decay); }
body.storefront-surface .is-moonarrow-leaving {
  opacity: 0;
  transform: translate3d(16px, 0, 0);
  pointer-events: none;
  transition: opacity var(--moonarrow-motion-quiet) ease, transform var(--moonarrow-motion-quiet) var(--moonarrow-ease-decay);
}
body.storefront-surface .moonarrow-magnifier { transition: opacity 160ms ease; }
body.storefront-surface .product-zoom-trigger { transition: background-color var(--moonarrow-motion-attack) ease, color var(--moonarrow-motion-attack) ease; }
.moonarrow-lightbox[open] { animation: moonarrow-fade-in 220ms ease both; }
.moonarrow-lightbox.is-closing { animation: moonarrow-vt-fade-out 180ms ease both; }
.moonarrow-lightbox-image.is-moonarrow-slide-next { animation: moonarrow-slide-next 320ms var(--moonarrow-ease-decay); }
.moonarrow-lightbox-image.is-moonarrow-slide-previous { animation: moonarrow-slide-previous 320ms var(--moonarrow-ease-decay); }

@media (prefers-reduced-motion: no-preference) {
  .moonarrow-site .hero-count-rule::after {
    transition: opacity var(--moonarrow-motion-quiet) ease;
  }
  .moonarrow-site .hero-count-rule.is-moonarrow-timing::after {
    animation: moonarrow-timer-fill var(--moonarrow-carousel-interval) linear both;
    animation-delay: var(--moonarrow-timer-delay, 0ms);
  }
  /* A held timer dims so the stop reads as a pause, not a stall. */
  .moonarrow-site .hero-count-rule.is-moonarrow-timer-paused::after {
    animation-play-state: paused;
    opacity: 0.5;
  }
  .moonarrow-site .hero-count-rule.is-moonarrow-timer-advancing::after {
    opacity: 0;
  }
}

/* ---------- Shared on both surfaces (storefront and administration) ---------- */
.validation-field-shake { animation: validation-field-shake 420ms ease both; }
.horizontal-scroll-hint-icon { animation: moonarrow-horizontal-scroll-hint 1.6s ease-in-out infinite; }

/* ---------- Cross-document page transitions (see moonarrow-motion-boot.js for opt-outs) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

body.storefront-surface .site-header { view-transition-name: moonarrow-site-header; }
::view-transition-old(root) { animation: moonarrow-vt-fade-out 180ms var(--moonarrow-ease-attack) both; }
::view-transition-new(root) { animation: moonarrow-vt-rise-in 280ms var(--moonarrow-ease-decay) 60ms both; }
html:active-view-transition-type(moonarrow-back)::view-transition-new(root) { animation-name: moonarrow-vt-drop-in; }
::view-transition-group(moonarrow-product-hero) { animation-duration: 520ms; animation-timing-function: var(--moonarrow-ease-decay); }
::view-transition-group(moonarrow-site-header) { animation-duration: 0s; }

body.storefront-surface .site-navigation .dropdown-menu.show { animation: moonarrow-dropdown-enter var(--moonarrow-motion-fast) var(--moonarrow-motion-ease); }
body.storefront-surface .site-navigation .nav-link,
body.storefront-surface .site-navigation .dropdown-item { text-decoration-thickness: 1px; text-underline-offset: 0.35em; }
@media (min-width: 992px) {
  body.storefront-surface .site-navigation .nav-link:hover,
  body.storefront-surface .site-navigation .nav-link:focus-visible,
  body.storefront-surface .site-navigation .nav-link.is-active { text-decoration: none; }

  body.storefront-surface .site-navigation .dropdown-item:hover,
  body.storefront-surface .site-navigation .dropdown-item:focus-visible,
  body.storefront-surface .site-navigation .dropdown-item.is-active { text-decoration: underline; }
}

body.storefront-surface .moonarrow-filter-trigger { display: none; }
body.storefront-surface .moonarrow-filter-trigger[hidden] { display: none; }
@media (max-width: 767.98px) {
  body.storefront-surface .moonarrow-filter-trigger:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; width: 100%; margin-bottom: 0.75rem; }
  body.storefront-surface .moonarrow-filter-drawer {
    width: min(340px, 88vw);
    top: max(10px, env(safe-area-inset-top));
    bottom: auto;
    height: auto;
    max-height: calc(100dvh - 20px - env(safe-area-inset-top));
    background: var(--moonarrow-color-daylight-soft);
    border-left: 1px solid rgba(7, 16, 31, 0.1);
    border-radius: 16px 0 0 16px;
    box-shadow: -1rem 0 2.5rem rgba(7, 16, 31, 0.16);
  }
  body.storefront-surface .moonarrow-filter-drawer .offcanvas-header {
    padding: 16px 18px 10px;
    border-bottom: 1px solid rgba(7, 16, 31, 0.08);
  }
  body.storefront-surface .moonarrow-filter-drawer .offcanvas-title {
    font-size: 22px;
    line-height: 1.2;
  }
  body.storefront-surface .moonarrow-filter-drawer .btn-close {
    width: 44px;
    height: 44px;
    margin: -10px -10px -10px auto;
    background-size: 0.8rem;
  }
  body.storefront-surface .moonarrow-filter-drawer .catalog-filter {
    display: grid;
    grid-template-columns: 1fr;
    flex: 0 0 auto;
    gap: 10px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  body.storefront-surface .moonarrow-filter-drawer .catalog-filter-field {
    display: grid;
    gap: 6px;
  }
  body.storefront-surface .moonarrow-filter-drawer .catalog-filter-search { grid-column: 1 / -1; }
  body.storefront-surface .moonarrow-filter-drawer :is(select, input) { height: 48px; }
  body.storefront-surface .moonarrow-filter-drawer .catalog-filter-field label { font-size: 14px; }
  body.storefront-surface .moonarrow-filter-drawer .offcanvas-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 0 1 auto;
    gap: 12px;
    min-height: 0;
    padding: 12px 16px 16px;
    overflow-y: auto;
  }
  body.storefront-surface .moonarrow-filter-actions {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(100px, .75fr) minmax(0, 1.25fr);
    gap: 10px;
    margin-top: 8px;
    position: sticky;
    bottom: 0;
    padding: 12px 0 max(12px, env(safe-area-inset-bottom));
    background: linear-gradient(to bottom, rgba(248, 249, 250, 0.9), var(--moonarrow-color-daylight-soft) 20%);
    border-top: 1px solid rgba(7, 16, 31, 0.08);
  }
  body.storefront-surface .moonarrow-filter-actions .btn {
    flex: 0 0 auto;
    min-height: 48px;
    height: 50px;
    padding: 0.65rem 0.75rem;
  }
  body.storefront-surface .product-card.is-moonarrow-entering { animation-delay: 0ms; }
}

@keyframes moonarrow-marquee { to { transform: translate3d(-50%, 0, 0); } }
@keyframes moonarrow-hero-text-enter { from { opacity: 0; transform: translate3d(0, 20px, 0); } to { opacity: 1; transform: none; } }
@keyframes moonarrow-home-media-settle { from { transform: scale(var(--moonarrow-motion-media-scale)); } to { transform: none; } }
@keyframes moonarrow-intro-ripple { 0% { opacity: 0; transform: scale(0.35); } 15% { opacity: 0.9; } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes moonarrow-intro-mark { from { opacity: 0; transform: rotate(-120deg) scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes moonarrow-intro-rise { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
@keyframes moonarrow-intro-lift { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
@keyframes moonarrow-intro-fade { to { opacity: 0; visibility: hidden; } }
@keyframes moonarrow-scale-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes moonarrow-timer-fill { from { transform: translate3d(-100%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes moonarrow-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes moonarrow-write-glyph { from { opacity: 0; } 40% { opacity: 0.55; } to { opacity: 1; } }
@keyframes moonarrow-card-enter { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } }
@keyframes moonarrow-results-enter { from { opacity: 0.35; } to { opacity: 1; } }
@keyframes moonarrow-details-enter { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: none; } }
@keyframes moonarrow-value-refresh { from { opacity: 0.35; } to { opacity: 1; } }
@keyframes moonarrow-badge-pop { 45% { transform: scale(1.35); } }
@keyframes moonarrow-dropdown-enter { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: none; } }
@keyframes moonarrow-spin { to { transform: rotate(360deg); } }
@keyframes moonarrow-skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.62; } }
@keyframes moonarrow-skeleton-surface { 0%, 100% { background-color: var(--moonarrow-color-media-substrate); } 50% { background-color: var(--moonarrow-color-metal-soft); } }
@keyframes moonarrow-skeleton-hide { 0%, 100% { opacity: 0; } }
@keyframes moonarrow-skeleton-text { 0%, 100% { color: transparent; background-color: var(--moonarrow-color-metal-soft); border-radius: 6px; } }
@keyframes moonarrow-vt-fade-out { to { opacity: 0; } }
@keyframes moonarrow-vt-rise-in { from { opacity: 0; transform: translate3d(0, 8px, 0); } }
@keyframes moonarrow-vt-drop-in { from { opacity: 0; transform: translate3d(0, -8px, 0); } }
@keyframes moonarrow-count-up { from { color: transparent; text-shadow: 0 0.9em 0 var(--moonarrow-color-brand-ink); } to { color: transparent; text-shadow: 0 0 0 var(--moonarrow-color-brand-ink); } }
@keyframes moonarrow-count-down { from { color: transparent; text-shadow: 0 -0.9em 0 var(--moonarrow-color-brand-ink); } to { color: transparent; text-shadow: 0 0 0 var(--moonarrow-color-brand-ink); } }
@keyframes moonarrow-slide-next { from { opacity: 0; transform: translate3d(32px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes moonarrow-slide-previous { from { opacity: 0; transform: translate3d(-32px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes validation-field-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }
@keyframes moonarrow-horizontal-scroll-hint { 0%, 100% { transform: translateX(-0.12rem); } 50% { transform: translateX(0.12rem); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .moonarrow-intro-overlay { display: none !important; }
  .validation-field-shake,
  .horizontal-scroll-hint-icon,
  .moonarrow-lightbox,
  .moonarrow-lightbox-image { animation: none !important; }
  body.storefront-surface :is(.news-card, .custom-service-card, .news-card-cover img, .is-moonarrow-leaving, .moonarrow-magnifier),
  body.storefront-surface :is(.btn, .text-link, .news-card-link, .custom-service-card-link, .cart-continue-link) > span,
  body.storefront-surface input { animation: none !important; transition: none !important; }
  body.storefront-surface.moonarrow-motion-ready [data-moonarrow-reveal],
  body.storefront-surface.moonarrow-motion-ready [data-moonarrow-reveal] img,
  body.storefront-surface [data-moonarrow-draw] > *,
  body.storefront-surface .moonarrow-hero *,
  body.storefront-surface .site-header,
  body.storefront-surface .moonarrow-back-to-top,
  body.storefront-surface .product-card,
  body.storefront-surface .product-card *,
  body.storefront-surface .product-detail-main-frame > img,
  body.storefront-surface .product-information-list details[open] > p,
  body.storefront-surface .product-add-button,
  body.storefront-surface [data-cart-summary-quantity],
  body.storefront-surface .catalog-filter,
  body.storefront-surface [data-product-search-results],
  body.storefront-surface .site-navigation .dropdown-menu,
  body.storefront-surface .moonarrow-filter-drawer {
    animation: none !important;
    transition: none !important;
  }
  body.storefront-surface.moonarrow-motion-ready [data-moonarrow-reveal],
  body.storefront-surface.moonarrow-motion-ready [data-moonarrow-reveal] img,
  body.storefront-surface .product-detail-main-frame.is-moonarrow-gallery-changing > img { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  body.storefront-surface [data-moonarrow-draw] > * { stroke-dashoffset: 0 !important; }
  body.storefront-surface .site-header.is-moonarrow-nav-hidden { transform: none !important; }
}