/* Meus Criativos MC35 — animações progressivas. Mantém as fontes, cores e layout existentes. */

/* Faixa superior em loop: duas cópias idênticas evitam salto na repetição. */
.topbar.mc-marquee {
  overflow: hidden;
  white-space: nowrap;
  padding: 7px 0 !important;
  text-align: left;
}
.mc-marquee-track {
  width: max-content;
  display: flex;
  align-items: center;
  animation: mc-marquee-scroll 27s linear infinite;
  will-change: transform;
}
.mc-marquee-group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-around;
  min-width: 100vw;
}
.mc-marquee-group span {
  display: block;
  flex: 0 0 auto;
  padding: 0 38px;
  font: inherit;
  letter-spacing: inherit;
}
.mc-marquee:hover .mc-marquee-track { animation-play-state: paused; }
@keyframes mc-marquee-scroll {
  to { transform: translate3d(-50%, 0, 0); }
}

/* Entrada escalonada do banner de abertura. Não animamos .hero-copy nem
   .hero-media diretamente: o cliente já ajusta a posição desses contêineres. */
.banner-stage.hero-with-title .hero-copy .hero-kicker {
  animation: mc-hero-enter .65s .05s both cubic-bezier(.22,1,.36,1);
}
.banner-stage.hero-with-title .hero-copy h1 {
  animation: mc-hero-enter .85s .15s both cubic-bezier(.22,1,.36,1);
}
.banner-stage.hero-with-title .hero-copy p {
  animation: mc-hero-enter .75s .32s both cubic-bezier(.22,1,.36,1);
}
.banner-stage.hero-with-title .hero-copy .hero-shop-link {
  animation: mc-hero-enter .75s .46s both cubic-bezier(.22,1,.36,1);
}
.banner-stage.hero-with-title .hero-media .banner-rectangle {
  animation: mc-hero-media .95s .21s both cubic-bezier(.22,1,.36,1);
}
@keyframes mc-hero-enter {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes mc-hero-media {
  from { opacity: 0; scale: .965; }
  to { opacity: 1; scale: 1; }
}

/* Banner: mantém as mesmas imagens e controles, mas desliza da direita para a esquerda. */
.banner-stage.hero-with-title .banner-rectangle [data-hero-slide] {
  transform: translate3d(100%, 0, 0);
  opacity: 1;
  visibility: hidden;
  pointer-events: none;
  transition: transform .85s cubic-bezier(.22,.66,.21,1), visibility 0s linear .85s;
  will-change: transform;
}
.banner-stage.hero-with-title .banner-rectangle [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 [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;
}

/* Minha Conta: elevação sutil + brilho; não desloca os elementos vizinhos. */
.header-main .account-nav .account-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform .24s ease, box-shadow .24s ease, background-color .24s ease;
}
.header-main .account-nav .account-button::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(110deg, transparent 22%, rgba(111,21,207,.13) 50%, transparent 78%);
  transform: translateX(-125%);
  transition: transform .55s ease;
  pointer-events: none;
}
.header-main .account-nav .account-button > * {
  position: relative;
  z-index: 1;
}
.header-main .account-nav .account-button:hover,
.header-main .account-nav .account-button:focus-visible {
  transform: translateY(-2px) !important;
  box-shadow: 0 9px 19px rgba(86,13,164,.17);
}
.header-main .account-nav .account-button:hover::after,
.header-main .account-nav .account-button:focus-visible::after {
  transform: translateX(125%);
}
.header-main .account-nav .account-button:hover .account-user-icon,
.header-main .account-nav .account-button:focus-visible .account-user-icon {
  animation: mc-account-icon .48s ease;
}
@keyframes mc-account-icon {
  50% { transform: scale(1.13) rotate(-5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .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,
  .header-main .account-nav .account-button .account-user-icon {
    animation: none !important;
    opacity: 1 !important;
    translate: none !important;
    scale: 1 !important;
  }
  .banner-stage.hero-with-title .banner-rectangle [data-hero-slide] {
    transform: none !important;
    transition: none !important;
  }
  .header-main .account-nav .account-button,
  .header-main .account-nav .account-button::after {
    transition: none !important;
  }
}