/**
 * logo-smoke.css
 * Réplica exata do efeito da logo do design system (marmitissima-design,
 * assets/css/header.css): duas imagens sobrepostas no mesmo lugar — a logo
 * completa (padrão) e só a fumacinha (aparece ao rolar). Na troca, a logo se
 * desfaz com uma curvatura (como fumaça se dissipando) e a fumacinha
 * some/aparece junto com uns "puffs" que sobem e se dissolvem — controlado
 * pela classe .is-condensed na própria logo (Magento_Theme/js/logo-smoke.js).
 */
.logo.mm-logo {
  position: relative;
  display: inline-grid;
  align-items: center;
  justify-items: center;
  height: 72px;
  margin: 0;
  max-width: none;
  float: none;
  transition: height 400ms ease;
}

/* As duas imagens ocupam a mesma célula do grid (empilhadas), em vez de
   position:absolute — evita que o max-width:100% global colapse a largura. */
.logo.mm-logo .mm-logo__full,
.logo.mm-logo .mm-logo__mark {
  display: block;
  grid-area: 1 / 1;
  width: auto;
  max-width: none;
  max-height: none;
  transition: opacity 1100ms ease, filter 1100ms ease, transform 1100ms ease;
}

.logo.mm-logo .mm-logo__full {
  height: 72px;
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1) rotate(0deg);
  transform-origin: 50% 100%;
}

.logo.mm-logo .mm-logo__mark {
  height: 54px;
  opacity: 0;
  filter: blur(9px);
  transform: translateY(9px) scale(0.5) rotate(10deg);
  transform-origin: 50% 100%;
  pointer-events: none;
  transition: opacity 1100ms ease, filter 1100ms ease, transform 1100ms ease, height 400ms ease;
}

.logo.mm-logo.is-condensed .mm-logo__full {
  opacity: 0;
  filter: blur(9px);
  transform: translateY(-16px) scale(1.2) rotate(-9deg);
}

.logo.mm-logo.is-condensed .mm-logo__mark {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1) rotate(0deg);
}

/* ===== Puffs de fumaça =====
   Três bolhas bem desfocadas que sobem e se dissipam no instante da troca
   (só no sentido logo -> ícone, que é o que acontece ao rolar a página). */
.logo.mm-logo .mm-logo__smoke {
  grid-area: 1 / 1;
  position: relative;
  width: 62px;
  height: 100%;
  pointer-events: none;
}

.logo.mm-logo .mm-logo__puff {
  position: absolute;
  bottom: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(237, 50, 55, 0.55) 0%, rgba(237, 50, 55, 0) 72%);
  opacity: 0;
  transform: translate(-50%, 0) scale(0.4);
}

.logo.mm-logo .mm-logo__puff--1 {
  left: 38%;
}

.logo.mm-logo .mm-logo__puff--3 {
  left: 62%;
}

@keyframes mm-logo-puff-rise {
  0% {
    opacity: 0;
    filter: blur(1px);
    transform: translate(-50%, 0) scale(0.4);
  }
  20% {
    opacity: 0.85;
  }
  55% {
    opacity: 0.5;
    filter: blur(4px);
    transform: translate(-50%, -22px) scale(1.2);
  }
  100% {
    opacity: 0;
    filter: blur(8px);
    transform: translate(-50%, -42px) scale(1.9);
  }
}

.logo.mm-logo.is-condensed .mm-logo__puff--1 {
  animation: mm-logo-puff-rise 1700ms ease-out;
}

.logo.mm-logo.is-condensed .mm-logo__puff--2 {
  animation: mm-logo-puff-rise 1700ms 180ms ease-out;
}

.logo.mm-logo.is-condensed .mm-logo__puff--3 {
  animation: mm-logo-puff-rise 1700ms 360ms ease-out;
}

/* Sem transição/animação brusca pra quem prefere menos movimento. */
@media (prefers-reduced-motion: reduce) {
  .logo.mm-logo .mm-logo__full,
  .logo.mm-logo .mm-logo__mark {
    transition: opacity 200ms linear;
    filter: none;
    transform: none !important;
  }

  .logo.mm-logo .mm-logo__puff {
    display: none;
  }
}

/* ===== Header compacto após a troca =====
   Com a fumacinha no lugar da logo, o header (que acompanha a página) fica
   mais baixo: a área da logo encolhe e o padding vertical diminui. A logo
   completa continua 72px, mas já está invisível — só transborda a caixa. */
.header-container .header_padding {
  transition: padding-top 400ms ease, padding-bottom 400ms ease;
}

.header-container.mm-header-condensed .header_padding {
  padding-top: 8px;
  padding-bottom: 8px;
}

.logo.mm-logo.is-condensed {
  height: 46px;
  margin-top: -20%;
}

.logo.mm-logo.is-condensed .mm-logo__mark {
  height: 46px;
}

@media (prefers-reduced-motion: reduce) {
  .logo.mm-logo,
  .header-container .header_padding {
    transition: none;
  }
}

@media (max-width: 768px) {
  .logo.mm-logo {
    height: 54px;
  }

  .logo.mm-logo.is-condensed,
  .logo.mm-logo.is-condensed .mm-logo__mark {
    height: 38px;
  }

  .header-container.mm-header-condensed .header_padding {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .logo.mm-logo .mm-logo__full {
    height: 54px;
  }

  .logo.mm-logo .mm-logo__mark {
    height: 42px;
  }
}