/* ==========================================================================
   PRIMECUT — Motion layer
   Everything here animates only `transform` and `opacity` so the browser can
   keep work on the compositor and hold 60 FPS.
   1. Scroll reveal system
   2. Hero / page-load choreography
   3. Marquee
   4. Interaction motion
   5. Reduced motion
   ========================================================================== */

/* ==========================================================================
   1. SCROLL REVEAL
   Elements start hidden only when JS is available, so the page degrades to a
   fully visible document if scripting is off.
   ========================================================================== */
.js [data-animate] {
  opacity: 0;
  transition:
    opacity 0.75s var(--ease-out),
    transform 0.75s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-animate="fade-up"] { transform: translate3d(0, 36px, 0); }
.js [data-animate="fade-down"] { transform: translate3d(0, -28px, 0); }
.js [data-animate="fade-right"] { transform: translate3d(-40px, 0, 0); }
.js [data-animate="fade-left"] { transform: translate3d(40px, 0, 0); }
.js [data-animate="zoom-in"] { transform: scale(0.93); }

/* One-way switch: once revealed, elements stay revealed. */
.js [data-animate].is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   2. PAGE-LOAD CHOREOGRAPHY
   ========================================================================== */
@keyframes fade-slide-down {
  from { opacity: 0; transform: translate3d(0, -14px, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes card-rise {
  from { opacity: 0; transform: translate3d(0, 30px, 0) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* The inner elements animate, never `.locator` / `.search` themselves: a
   filling transform animation would turn them into containing blocks and the
   fixed-position mobile sheet would anchor to the trigger instead of the
   viewport. */
.js .announce,
.js .header .logo,
.js .header .locator__trigger,
.js .header .search__field,
.js .header__actions > * {
  opacity: 0;
  animation: fade-slide-down 0.7s var(--ease-out) forwards;
}

.js .announce { animation-delay: 0.05s; }
.js .header .logo { animation-delay: 0.15s; }
.js .header .locator__trigger { animation-delay: 0.24s; }
.js .header .search__field { animation-delay: 0.32s; }
.js .header__actions > *:nth-child(1) { animation-delay: 0.40s; }
.js .header__actions > *:nth-child(2) { animation-delay: 0.46s; }

/* The complete image carousel lifts in as one polished banner. */
.js .hero__card {
  opacity: 0;
  animation: card-rise 0.9s var(--ease-out) 0.1s forwards;
}

/* ==========================================================================
   3. MARQUEE
   ========================================================================== */
.marquee {
  overflow: hidden;
  padding-block: 14px;
  background: var(--c-primary);
  color: #fff;
  user-select: none;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 42s linear infinite;
  will-change: transform;
}

.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__group { display: flex; align-items: center; }

.marquee__group > span {
  display: flex;
  align-items: center;
  padding-inline: clamp(16px, 2vw, 30px);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.marquee__group > span::after {
  content: "";
  width: 5px;
  height: 5px;
  margin-left: clamp(16px, 2vw, 30px);
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ==========================================================================
   4. INTERACTION MOTION
   ========================================================================== */
/* Cart badge pop when an item is added */
@keyframes badge-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}
.icon-btn__badge.is-bumped { animation: badge-pop 0.45s var(--ease-out); }

/* Toast entrance uses transition in style.css; this adds a subtle overshoot. */
@keyframes toast-in {
  0%   { transform: translate(-50%, 18px) scale(0.96); opacity: 0; }
  60%  { transform: translate(-50%, -3px) scale(1.01); opacity: 1; }
  100% { transform: translate(-50%, 0) scale(1); opacity: 1; }
}
.toast.is-visible { animation: toast-in 0.45s var(--ease-out); }

/* Header panels (location picker, search suggestions, login) drop into view */
@keyframes panel-in {
  from { opacity: 0; transform: translate3d(0, -10px, 0) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.locator__panel,
.account__panel,
.search__results { animation: panel-in 0.28s var(--ease-out); }

@keyframes sheet-in {
  from { transform: translate3d(0, 100%, 0); }
  to   { transform: none; }
}
.locator__scrim { animation: fade-in 0.25s var(--ease-soft); }

@media (max-width: 760px) {
  .locator__panel { animation: sheet-in 0.36s var(--ease-out); }
}

/* Flash the card a search suggestion jumped to */
@keyframes found-pulse {
  0%        { box-shadow: 0 0 0 0 rgba(187, 24, 29, 0); }
  25%, 60%  { box-shadow: 0 0 0 4px rgba(187, 24, 29, 0.3); }
  100%      { box-shadow: 0 0 0 0 rgba(187, 24, 29, 0); }
}
.product.is-found,
.category.is-found {
  border-radius: var(--r-xl);
  animation: found-pulse 1.8s var(--ease-out);
}

/* ==========================================================================
   5. REDUCED MOTION
   Respect the OS-level preference: content appears instantly, loops stop.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-animate],
  .js .hero__card,
  .js .announce,
  .js .header .logo,
  .js .header .locator__trigger,
  .js .header .search__field,
  .js .header__actions > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .marquee__track { animation: none; }

  .hero__track { transition: none !important; }
  .hero__slide img { transform: none !important; }
}