/* Mecanismos da vitrine Mundo Ghio · 25/09/2026
   Vai junto com js/mecanismos.js. Contrato por atributo:
   [data-topo-video] · [data-coracao] · [data-nasce]
   Sem fonte externa, sem imagem embutida, sem estilo inline.
   Todo movimento para em prefers-reduced-motion. */

:root {
  --mg-teal: #62A89D;
  --mg-roxo: #8B7FA7;
  --mg-coral: #EC6E62;
  --mg-amarelo: #F5B434;
  --mg-grafite: #3A3A3A;
  --mg-areia: #EAE0D6;
  --mg-coracao-tam: 56px;
  --mg-coracao-x: 16px;
  --mg-coracao-y: 16px;
}

@media (min-width: 900px) {
  :root {
    --mg-coracao-tam: 72px;
    --mg-coracao-x: 28px;
    --mg-coracao-y: 28px;
  }
}

/* (a) O vídeo do topo.
   A seção (ou o [data-topo-quadro] dentro dela) decide o tamanho; o vídeo cobre o bloco.
   O botão de play só aparece quando o navegador recusa o play (modo de baixo consumo). */
[data-topo-video],
[data-topo-quadro] {
  position: relative;
}

[data-topo-video] video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--mg-areia);
}

[data-topo-play] {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--mg-amarelo);
  color: var(--mg-grafite);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

[data-topo-play]:focus-visible {
  outline: 3px solid var(--mg-roxo);
  outline-offset: 3px;
}

[data-topo-play][hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-topo-play] {
    display: none;
  }
}

/* (b) A marca pequena fixa no canto: o coração do logo impresso em camadas.
   Nem aqui nem no .mg-obj pode entrar overflow, opacity, filter ou will-change:
   no Safari qualquer um deles achata o preserve-3d. Sem JS fica a <img> parada. */
[data-coracao] {
  position: fixed;
  right: var(--mg-coracao-x);
  bottom: var(--mg-coracao-y);
  width: var(--mg-coracao-tam);
  height: var(--mg-coracao-tam);
  z-index: 40;
  color: var(--mg-coral);
  transition: transform 0.2s ease-out, visibility 0s;
}

/* Sem JS fica a <img> parada, que não faz nada: o toque passa direto para o que está embaixo. */
[data-coracao]:not(.mg-3d) {
  pointer-events: none;
}

/* Quando passa por cima de botão, link ou preço, a marca encolhe e some, e o toque vai para o que
   está embaixo (o JS mede a cada rolagem e escreve data-coracao-longe). Transform e visibility não
   achatam o preserve-3d; opacity achataria no Safari. */
[data-coracao][data-coracao-longe] {
  transform: scale(0.4);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.16s ease-in, visibility 0s linear 0.16s;
}

@media (prefers-reduced-motion: reduce) {
  [data-coracao],
  [data-coracao][data-coracao-longe] {
    transition: none;
  }
}

[data-coracao] > img {
  display: block;
  width: 100%;
  height: 100%;
}

/* pan-y: arrastar na vertical em cima dele rola a página; na horizontal, gira. */
[data-coracao].mg-3d {
  perspective: 260px;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

[data-coracao].mg-3d:active {
  cursor: grabbing;
}

[data-coracao] .mg-defs {
  position: absolute;
  width: 0;
  height: 0;
}

[data-coracao] .mg-obj {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(30deg);
}

[data-coracao] .mg-fatia {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: rgba(58, 58, 58, 0.16);
  stroke-width: 0.35;
  stroke-linejoin: round;
  backface-visibility: visible;
}

/* (c) A foto do card nasce de baixo pra cima, em 30 degraus, 1,2 s, uma vez.
   Só o recorte muda: nenhum pixel da foto é alterado.
   Sem JS (sem a classe mg-js) ou com reduced-motion, a foto aparece direto. */
@media (prefers-reduced-motion: no-preference) {
  .mg-js [data-nasce] > img,
  .mg-js [data-nasce] > picture > img,
  .mg-js img[data-nasce] {
    clip-path: inset(100% 0 0 0);
  }

  .mg-js [data-nasce="nasceu"] > img,
  .mg-js [data-nasce="nasceu"] > picture > img,
  .mg-js img[data-nasce="nasceu"] {
    animation: mg-nasce 1.2s steps(30, end) forwards;
  }
}

@keyframes mg-nasce {
  from {
    clip-path: inset(100% 0 0 0);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}