/* MC36 — reliable visible movement without changing brand colors or layout. */

/* 1. Top announcement keeps travelling, including when pointer is above it. */
.topbar.mc-marquee { overflow:hidden !important; white-space:nowrap; }
.topbar.mc-marquee .mc-marquee-track {
  display:flex;
  width:max-content;
  animation: mc36-marquee 16s linear infinite !important;
  animation-play-state:running !important;
  will-change:transform;
}
.topbar.mc-marquee:hover .mc-marquee-track,
.topbar.mc-marquee:focus-within .mc-marquee-track {
  animation-play-state:running !important;
}
.topbar.mc-marquee .mc-marquee-group { display:flex; flex:0 0 auto; min-width:100vw; }
@keyframes mc36-marquee {
  from { transform:translate3d(0,0,0); }
  to { transform:translate3d(-50%,0,0); }
}

/* 2. Entry animation is replayed on each navigation/reload; CTA arrow keeps moving gently. */
.banner-stage.hero-with-title .hero-copy .hero-kicker { animation: mc36-enter .7s .10s both ease-out; }
.banner-stage.hero-with-title .hero-copy h1 { animation: mc36-enter .85s .22s both ease-out; }
.banner-stage.hero-with-title .hero-copy p { animation: mc36-enter .8s .42s both ease-out; }
.banner-stage.hero-with-title .hero-copy .hero-shop-link { animation: mc36-enter .8s .58s both ease-out; }
.banner-stage.hero-with-title .hero-media .banner-rectangle { animation: mc36-banner-enter 1s .22s both ease-out; }
.banner-stage.hero-with-title .hero-shop-link [aria-hidden="true"] {
  display:inline-block;
  animation: mc36-arrow 1.5s ease-in-out infinite;
}
@keyframes mc36-enter {
  from { opacity:0; translate:0 28px; }
  to { opacity:1; translate:0 0; }
}
@keyframes mc36-banner-enter {
  from { opacity:0; scale:.95; }
  to { opacity:1; scale:1; }
}
@keyframes mc36-arrow {
  0%,100% { transform:translate(0,0); }
  50% { transform:translate(4px,-3px); }
}

/* 3. Banner slideshow: incoming right, outgoing left, no hover freeze. */
.banner-stage.hero-with-title .banner-rectangle { position:relative; overflow:hidden; }
.banner-stage.hero-with-title .banner-rectangle .banner-slide[data-hero-slide] {
  position:absolute;
  inset:0;
  transform:translate3d(100%,0,0);
  opacity:1;
  visibility:hidden;
  pointer-events:none;
  z-index:0;
  transition:transform .85s cubic-bezier(.22,.66,.21,1),visibility 0s linear .85s;
  will-change:transform;
}
.banner-stage.hero-with-title .banner-rectangle .banner-slide[data-hero-slide].is-active {
  transform:translate3d(0,0,0);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  z-index:2;
  transition:transform .85s cubic-bezier(.22,.66,.21,1),visibility 0s linear 0s;
}
.banner-stage.hero-with-title .banner-rectangle .banner-slide[data-hero-slide].mc-slide-leaving:not(.is-active) {
  transform:translate3d(-100%,0,0);
  opacity:1;
  visibility:visible;
  pointer-events:none;
  z-index:1;
  transition:transform .85s cubic-bezier(.22,.66,.21,1),visibility 0s linear 0s;
}

/* Keep existing account hover effect visible on keyboard focus too. */
.header-main .account-nav .account-button:focus-visible {
  transform:translateY(-2px);
  box-shadow:0 9px 19px rgba(86,13,164,.17);
}

/* Never override a visitor's accessibility preference. */
@media (prefers-reduced-motion:reduce) {
  .topbar.mc-marquee .mc-marquee-track { animation:none !important; transform:none !important; }
  .banner-stage.hero-with-title .hero-copy .hero-kicker,
  .banner-stage.hero-with-title .hero-copy h1,
  .banner-stage.hero-with-title .hero-copy p,
  .banner-stage.hero-with-title .hero-copy .hero-shop-link,
  .banner-stage.hero-with-title .hero-media .banner-rectangle,
  .banner-stage.hero-with-title .hero-shop-link [aria-hidden="true"] {
    animation:none !important;
    opacity:1 !important;
    translate:none !important;
    scale:1 !important;
  }
  .banner-stage.hero-with-title .banner-rectangle .banner-slide[data-hero-slide] {
    transition:none !important;
  }
}