/*
  Motion Fit — hero de mídia (vídeo -> foto).

  Substitui o hero cinematográfico em SVG. O vídeo abre a home e, quando
  termina, dá lugar à foto fixa com um crossfade. A foto é o último estado:
  não volta para o vídeo.

  Estado inicial do CSS = foto visível. É proposital: sem JS, com
  prefers-reduced-motion, com autoplay bloqueado ou se o arquivo falhar, o
  usuário vê a foto — nunca uma tela preta. O JS é quem liga o vídeo.
*/

.mf-media-hero {
  --mf-lime: #d7ff38;
  --mf-white: #f7fff9;
  /* Preto puro: a borda esquerda funde no fundo, como na referência. */
  --mf-ink: #000;

  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 560px;
  max-height: 900px;
  overflow: hidden;
  isolation: isolate;
  background: var(--mf-ink);
  /*
    Sobe para trás do header, que é sticky e transparente aqui. Sem isto o
    cover começaria logo ABAIXO do header e a transparência mostraria o fundo
    branco da página em vez do vídeo. A altura vem do JS (--mf-header-h), que
    a mede de verdade em vez de assumir um valor fixo.
  */
  margin-top: calc(-1 * var(--mf-header-h, 0px));
}

.mf-media-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.mf-media-hero__video,
.mf-media-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/*
  A foto fica SEMPRE opaca, na camada de baixo. Quem anima é só o vídeo, por
  cima dela. Como o último quadro do vídeo é a própria foto, o fade é um
  dissolve entre duas imagens iguais — não há salto de brilho nem o "vale"
  de opacidade que aparece quando as duas camadas cruzam ao mesmo tempo.
*/
.mf-media-hero__photo {
  z-index: 0;
  opacity: 1;
}

.mf-media-hero__video {
  z-index: 1;
  opacity: 0;
  /* Entrada rápida, saída longa e sem aceleração no fim: é a saída que o
     olho percebe. */
  transition: opacity 1.6s cubic-bezier(.33, 0, .2, 1);
  will-change: opacity;
}

.mf-media-hero.is-playing .mf-media-hero__video {
  opacity: 1;
  transition-duration: .7s;
}

/*
  Usuário rolou a página: corta o vídeo mais rápido (SKIP_FADE no JS). O
  conteúdo e a máscara também entram mais rápido — quem rolou está pedindo
  para seguir, não para assistir a uma transição longa.
*/
.mf-media-hero.is-skipping .mf-media-hero__video {
  transition-duration: .45s;
}

.mf-media-hero.is-skipping .mf-media-hero__mask {
  transition-duration: .5s;
}

.mf-media-hero.is-skipping .mf-media-hero__content > * {
  transition-duration: .4s;
}

/*
  Vinheta do cover. Sem texto sobreposto, ela existe só para fundir a borda
  esquerda no preto (como na referência) e fechar levemente o topo e a base —
  não para dar contraste a nenhum texto. Por isso é bem mais leve que antes.
*/
.mf-media-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      #000 0%,
      rgba(0, 0, 0, .82) 8%,
      rgba(0, 0, 0, .30) 22%,
      transparent 38%),
    linear-gradient(180deg,
      rgba(0, 0, 0, .34) 0%,
      transparent 18%,
      transparent 82%,
      rgba(0, 0, 0, .38) 100%);
}

/* ---------- Máscara que sobe + conteúdo ---------- */
/*
  Estado padrão = revelado. É o mesmo princípio do resto do arquivo: sem JS,
  com autoplay bloqueado ou com movimento reduzido, o texto e os botões já
  estão visíveis. Quando o vídeo começa a tocar, o JS liga .is-playing e
  esconde tudo; ao terminar, a classe sai e a máscara sobe de volta.
*/
.mf-media-hero__mask {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 78%;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 0, 0, .32) 32%,
    rgba(0, 0, 0, .72) 68%,
    rgba(0, 0, 0, .90) 100%);
  transform: translateY(0);
  transition: transform 1.1s cubic-bezier(.22, .61, .36, 1),
              opacity .9s ease;
  will-change: transform;
}

/* Enquanto o vídeo roda, a máscara desce para fora da tela. */
.mf-media-hero.is-playing .mf-media-hero__mask {
  transform: translateY(100%);
  opacity: 0;
}

.mf-media-hero__content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
  padding: 0 clamp(20px, 6vw, 96px) clamp(52px, 8vh, 96px);
  max-width: 1320px;
  margin: 0 auto;
  color: var(--mf-white);
}

/* Cada item sobe um pouco depois do anterior: a entrada fica escalonada em
   vez de tudo aparecer no mesmo instante. */
.mf-media-hero__content > * {
  transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1);
}

.mf-media-hero.is-playing .mf-media-hero__content > * {
  opacity: 0;
  transform: translateY(26px);
}

.mf-media-hero__content > *:nth-child(1) { transition-delay: .10s; }
.mf-media-hero__content > *:nth-child(2) { transition-delay: .18s; }
.mf-media-hero__content > *:nth-child(3) { transition-delay: .26s; }
.mf-media-hero__content > *:nth-child(4) { transition-delay: .34s; }

/* Saindo (quando o vídeo começa) não precisa de escalonamento. */
.mf-media-hero.is-playing .mf-media-hero__content > * {
  transition-delay: 0s;
}

.mf-media-hero__kicker {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(.72rem, 1.4vw, .82rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mf-lime);
}

.mf-media-hero__kicker::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--mf-lime);
}

.mf-media-hero__title {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -.02em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .5);
}

.mf-media-hero__text {
  margin: 0;
  max-width: 54ch;
  font-size: clamp(.95rem, 1.8vw, 1.08rem);
  line-height: 1.6;
  color: rgba(247, 255, 249, .9);
}

.mf-media-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

@media (max-width: 720px) {
  .mf-media-hero { max-height: none; }
  .mf-media-hero__mask { height: 88%; }
  .mf-media-hero__content { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Sem vídeo: a foto fica, e nada anima. */
  .mf-media-hero__mask,
  .mf-media-hero__content > * {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .mf-media-hero__video { display: none; }
  .mf-media-hero__video,
  .mf-media-hero__photo { transition: none; }
}

/* ---------- Navbar transparente sobre o cover ---------- */
/*
  Quando o header gruda no topo e o que está atrás dele é o cover (o usuário
  já rolou além da faixa da campanha), ele vira transparente e em modo
  escuro. A classe é ligada pelo motionfit-hero-media.js.

  Os !important existem porque site-php.css, motionfit-palette.css e
  final-polish.css declaram o header e os itens do menu com !important.
*/
.site-header.is-over-cover {
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* O logo do header é monocromático (#1d1d1b), então brightness(0)+invert(1)
   o deixa branco puro sem perder nenhuma cor da marca. */
.site-header.is-over-cover .brand-logo img {
  filter: brightness(0) invert(1);
}

.site-header.is-over-cover .nav-link,
.site-header.is-over-cover .account-link,
.site-header.is-over-cover .region,
.site-header.is-over-cover .region span {
  color: #fff !important;
}

.site-header.is-over-cover .nav-link .chevron,
.site-header.is-over-cover .region .chevron {
  border-color: #fff !important;
}

.site-header.is-over-cover .region {
  background: rgba(255, 255, 255, .10) !important;
  border-color: rgba(255, 255, 255, .34) !important;
}

.site-header.is-over-cover .nav-search-icon svg {
  stroke: #fff;
}

/* Hover precisa continuar legível sem o fundo branco atrás. */
.site-header.is-over-cover .nav-link:hover,
.site-header.is-over-cover .account-link:hover {
  background: rgba(255, 255, 255, .16) !important;
  color: #fff !important;
}

.site-header.is-over-cover .hamburger {
  background: rgba(255, 255, 255, .12) !important;
  border-color: rgba(255, 255, 255, .34) !important;
}

.site-header.is-over-cover .hamburger span,
.site-header.is-over-cover .hamburger:before,
.site-header.is-over-cover .hamburger:after {
  background: #fff;
}

/* Com o menu de idiomas ou um dropdown aberto o painel é branco: o header
   volta ao sólido para o conteúdo não flutuar sobre o vídeo sem contraste. */
.site-header.is-over-cover:has(.dropdown.open),
.site-header.is-over-cover:has(.language-menu.open) {
  background: rgba(255, 255, 255, .92) !important;
  backdrop-filter: blur(18px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.18) !important;
}

.site-header.is-over-cover:has(.dropdown.open) .brand-logo img,
.site-header.is-over-cover:has(.language-menu.open) .brand-logo img {
  filter: none;
}

.site-header.is-over-cover:has(.dropdown.open) .nav-link,
.site-header.is-over-cover:has(.dropdown.open) .account-link,
.site-header.is-over-cover:has(.dropdown.open) .region,
.site-header.is-over-cover:has(.dropdown.open) .region span,
.site-header.is-over-cover:has(.language-menu.open) .nav-link,
.site-header.is-over-cover:has(.language-menu.open) .account-link,
.site-header.is-over-cover:has(.language-menu.open) .region,
.site-header.is-over-cover:has(.language-menu.open) .region span {
  color: #131312 !important;
}

/* ---------- Faixa da campanha como propaganda sobre o cover ---------- */
/*
  Só na home ($mcOverlay em index.php). A faixa sai do fluxo — a página abre
  direto no cover — e fica fixa na base da tela, escondida abaixo dela. O JS
  a faz subir depois de alguns segundos e a recolhe quando o cover sai de
  vista ou quando o usuário fecha.

  z-index abaixo do WhatsApp flutuante (9999) e do modal (10000), acima do
  conteúdo do hero.
*/
.month-campaign--overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  margin: 0;
  /*
    A classe é "is-strip-in", e não "is-visible": dynamic-scroll.js e
    motionfit-polish.js adicionam "is-visible" a qualquer seção que entra na
    tela, o que fazia a faixa subir na hora, ignorando o atraso.
  */
  transform: translateY(110%);
  transition: transform .85s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
  box-shadow: 0 -14px 40px rgba(0, 0, 0, .38);
}

.month-campaign--overlay.is-strip-in {
  transform: translateY(0);
}

.month-campaign--overlay .month-campaign-link,
.month-campaign--overlay .month-campaign-link img {
  display: block;
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .month-campaign--overlay {
    transition: none;
  }
}