/* ==========================================================================
   Mago animado — "toque no Mago": ele bate o cajado no chão e o cristal brilha.

   Em repouso só existe a imagem original (.mago-animado__base). Ao tocar, o
   mago-animado.js cria as camadas (assets/mago/camadas/*.webp, todas 800x993,
   empilhadas no mesmo lugar da base) e liga uma destas classes no botão:
     .mago-animado--sequencia  a batida do cajado (camadas no lugar da base)
     .mago-animado--brilho     só um brilho no cristal (quem pede menos movimento)
     .mago-animado--pulinho    plano de emergência se alguma camada não carregar
   Todas as medidas são porcentagens do botão: funciona em qualquer largura.
   A duração (--mago-dur) tem de ser a mesma de DURACAO em mago-animado.js.
   ========================================================================== */

.mago-animado {
  --mago-dur: 1300ms;
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  aspect-ratio: 800 / 993;
  line-height: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.mago-animado__base {
  display: block;
  width: 100%;
  height: auto;
}
.mago-animado img {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ---------- Moldura (parada, recorta no tamanho do botão) > palco: as camadas ficam exatamente sobre a base ---------- */
.mago-animado__moldura,
.mago-animado__palco,
.mago-animado__efeitos,
.mago-animado__braco,
.mago-animado__cajado,
.mago-animado__camada,
.mago-animado__brilho {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
}
.mago-animado__moldura {
  overflow: hidden;         /* nada vaza do botão: sem rolagem lateral, sem mexer no layout */
  visibility: hidden;
  /* se a página puser filtro na imagem base (realce ao passar o mouse), o JS repete aqui o mesmo valor */
  filter: var(--mago-filtro-base, none);
}
.mago-animado__palco { transform-origin: 50% 94.4%; }                 /* chão */
.mago-animado__braco { transform-origin: 20.25% 68.28%; }             /* braço que aponta: fica parado */
.mago-animado__camada--braco { transform-origin: 40.25% 62%; }        /* ombro (atrás da barba) */
.mago-animado__camada--barba { transform-origin: 48% 59.62%; }        /* queixo */
.mago-animado__cajado { transform-origin: 82.75% 66.7%; }             /* mão que segura */
.mago-animado__camada--clarao,
.mago-animado__brilho {
  opacity: 0;
  transform-origin: 86.4% 29%;                                        /* centro do cristal */
}

/* Efeitos desenhados em CSS (nenhuma imagem) */
.mago-animado__onda {
  position: absolute;
  left: 63.6%;
  top: 91%;
  width: 30%;
  height: 6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(185, 140, 255, 0) 52%, rgba(178, 130, 255, 0.9) 70%, rgba(200, 159, 251, 0) 94%);
  opacity: 0;
}
.mago-animado__faisca,
.mago-animado__estrela {
  position: absolute;
  aspect-ratio: 1;
  background: linear-gradient(135deg, #d9bcff, #9d7bff);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0;
}
.mago-animado__faisca { left: 77.2%; top: 92.4%; width: 2.8%; }
.mago-animado__faisca--1 { --mago-dx: -560%; --mago-dy: -330%; }
.mago-animado__faisca--2 { --mago-dx: -300%; --mago-dy: -640%; }
.mago-animado__faisca--3 { --mago-dx: 60%;   --mago-dy: -760%; }
.mago-animado__faisca--4 { --mago-dx: 380%;  --mago-dy: -560%; }
.mago-animado__faisca--5 { --mago-dx: 520%;  --mago-dy: -250%; }
.mago-animado__estrela { width: 4.2%; }
.mago-animado__estrela--1 { left: 73.5%; top: 21%; }
.mago-animado__estrela--2 { left: 94%;   top: 25.5%; width: 3.2%; }
.mago-animado__estrela--3 { left: 78.5%; top: 37%;   width: 2.8%; }

/* ---------- Sequência: só a batida do cajado (1,3 s) ----------
   O braço que aponta e o rosto ficam parados. O corpo e a barba só sentem o impacto. */
.mago-animado--sequencia .mago-animado__moldura { visibility: visible; }

.mago-animado--sequencia .mago-animado__base { animation: mago-base var(--mago-dur) linear both; }
.mago-animado--sequencia .mago-animado__palco { animation: mago-palco var(--mago-dur) linear both, mago-surge var(--mago-dur) linear both; will-change: transform, opacity; }
.mago-animado--sequencia .mago-animado__camada--barba { animation: mago-barba var(--mago-dur) linear both; will-change: transform; }
.mago-animado--sequencia .mago-animado__cajado { animation: mago-cajado var(--mago-dur) linear both; will-change: transform; }
.mago-animado--sequencia .mago-animado__camada--clarao { animation: mago-clarao var(--mago-dur) linear both; will-change: transform, opacity; }
.mago-animado--sequencia .mago-animado__onda { animation: mago-onda var(--mago-dur) linear both; }
.mago-animado--sequencia .mago-animado__faisca { animation: mago-faisca var(--mago-dur) linear both; }
.mago-animado--sequencia .mago-animado__estrela { animation: mago-estrela var(--mago-dur) linear both; }
.mago-animado--sequencia .mago-animado__estrela--2 { animation-delay: 70ms; }
.mago-animado--sequencia .mago-animado__estrela--3 { animation-delay: 140ms; }

/* Troca base <-> camadas sem piscar: a base fica por baixo nos primeiros e nos últimos
   instantes (camadas ainda/já na pose de repouso) e as camadas entram e saem em fusão rápida. */
@keyframes mago-base {
  0%, 5.1%     { visibility: visible; }
  5.3%, 93.5%  { visibility: hidden; }
  93.6%, 100%  { visibility: visible; }
}
@keyframes mago-surge {
  0%    { opacity: 0; }
  4.8%  { opacity: 1; }
  94.2% { opacity: 1; }
  100%  { opacity: 0; }
}

/* BATER O CAJADO (0 a ~0,7 s): sobe, pendura um instante, bate, quica.
   (nos primeiros 5% nada se mexe: é quando a base ainda está por baixo) */
@keyframes mago-cajado {
  0%, 5.4% { transform: translate(0, 0) rotate(0deg); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  10.8% { transform: translate(0, 0.25%) rotate(0.2deg); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  26.9% { transform: translate(0.3%, -3.5%) rotate(-1.6deg); animation-timing-function: ease-in-out; }
  32.3% { transform: translate(0.3%, -3.7%) rotate(-1.7deg); animation-timing-function: cubic-bezier(.7, 0, 1, .5); }
  38.8% { transform: translate(0, 0) rotate(0deg); animation-timing-function: cubic-bezier(.2, .8, .4, 1); }
  43.5% { transform: translate(0.06%, -0.75%) rotate(0.5deg); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  48.2% { transform: translate(0, 0) rotate(0deg); animation-timing-function: ease-out; }
  50.8% { transform: translate(0, -0.18%) rotate(-0.15deg); animation-timing-function: ease-in; }
  53.8%, 100% { transform: translate(0, 0) rotate(0deg); }
}

/* Corpo: estica de leve quando o cajado sobe, amassa no impacto e acomoda */
@keyframes mago-palco {
  0%, 5.4% { transform: rotate(0deg) scale(1, 1); animation-timing-function: ease-in-out; }
  10.8% { transform: rotate(0deg) scale(1.004, 0.994); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  28%   { transform: rotate(0.25deg) scale(0.995, 1.009); animation-timing-function: ease-in-out; }
  37.9% { transform: rotate(0.2deg) scale(0.996, 1.007); animation-timing-function: cubic-bezier(.2, .9, .3, 1); }
  43.1% { transform: rotate(0deg) scale(1.016, 0.976); animation-timing-function: cubic-bezier(.3, 0, .3, 1); }
  51.7% { transform: rotate(0deg) scale(0.995, 1.008); animation-timing-function: ease-in-out; }
  60.3% { transform: rotate(0deg) scale(1.002, 0.997); animation-timing-function: ease-in-out; }
  68.9%, 100% { transform: rotate(0deg) scale(1, 1); }
}

/* Clarão do cristal no impacto, com duas pulsações */
@keyframes mago-clarao {
  0%, 37.5% { opacity: 0; transform: scale(0.9); animation-timing-function: cubic-bezier(.1, .8, .3, 1); }
  41.8% { opacity: 1; transform: scale(1.08); animation-timing-function: ease-in-out; }
  51.7% { opacity: 0.5; transform: scale(1); animation-timing-function: ease-in-out; }
  61.4% { opacity: 0.85; transform: scale(1.05); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  90.5% { opacity: 0; transform: scale(0.96); }
  100%  { opacity: 0; transform: scale(0.9); }
}

/* Onda e faíscas na base do cajado */
@keyframes mago-onda {
  0%, 38.3% { opacity: 0; transform: scale(0.12); animation-timing-function: cubic-bezier(.1, .7, .3, 1); }
  40.9% { opacity: 0.95; transform: scale(0.34); animation-timing-function: cubic-bezier(.1, .6, .3, 1); }
  71.1% { opacity: 0; transform: scale(1); }
  100%  { opacity: 0; transform: scale(1); }
}

@keyframes mago-faisca {
  0%, 38.5% { opacity: 0; transform: translate(0, 0) scale(0.3) rotate(0deg); animation-timing-function: cubic-bezier(.1, .7, .3, 1); }
  42%   { opacity: 1; transform: translate(calc(var(--mago-dx) * 0.35), calc(var(--mago-dy) * 0.35)) scale(1) rotate(40deg); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  75.4% { opacity: 0; transform: translate(var(--mago-dx), var(--mago-dy)) scale(0.35) rotate(160deg); }
  100%  { opacity: 0; transform: translate(var(--mago-dx), var(--mago-dy)) scale(0.35) rotate(160deg); }
}

/* Estrelinhas em volta do cristal */
@keyframes mago-estrela {
  0%, 38.8% { opacity: 0; transform: scale(0.2) rotate(-30deg); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  46.3% { opacity: 1; transform: scale(1.15) rotate(10deg); animation-timing-function: ease-in-out; }
  58.2% { opacity: 0.9; transform: scale(0.85) rotate(35deg); animation-timing-function: ease-in; }
  77.5% { opacity: 0; transform: scale(0.2) rotate(80deg); }
  100%  { opacity: 0; transform: scale(0.2) rotate(80deg); }
}

/* Barba: só sente o tranco do impacto e volta */
@keyframes mago-barba {
  0%, 38.8% { transform: skewX(0deg) scale(1, 1); animation-timing-function: cubic-bezier(.2, .9, .3, 1); }
  44.2% { transform: skewX(0deg) scale(1.008, 1.045); animation-timing-function: ease-in-out; }
  51.7% { transform: skewX(0.5deg) scale(0.998, 0.985); animation-timing-function: ease-in-out; }
  60.3% { transform: skewX(0deg) scale(1, 1.008); animation-timing-function: ease-in-out; }
  68.9%, 100% { transform: skewX(0deg) scale(1, 1); }
}

/* ---------- Plano de emergência: alguma camada não carregou ---------- */
.mago-animado--pulinho .mago-animado__base {
  animation: mago-pulinho 520ms cubic-bezier(.3, 0, .3, 1) both;
  transform-origin: 50% 94.4%;
}
@keyframes mago-pulinho {
  /* nunca fica mais larga que o botão (não cria rolagem lateral) */
  0%   { transform: translateY(0) scale(1, 1); }
  18%  { transform: translateY(0) scale(1, 0.97); }
  48%  { transform: translateY(-2.4%) scale(0.985, 1.02); }
  78%  { transform: translateY(0) scale(1, 0.98); }
  100% { transform: translateY(0) scale(1, 1); }
}

/* ---------- Menos movimento: só um brilho suave no cristal ---------- */
.mago-animado--brilho .mago-animado__brilho { animation: mago-brilho-calmo 1100ms ease-in-out both; }
@keyframes mago-brilho-calmo {
  0%   { opacity: 0; }
  40%  { opacity: 0.8; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  /* a base da página zera todas as animações com !important; este brilho (só opacidade) é a exceção combinada */
  .mago-animado.mago-animado--brilho .mago-animado__brilho { animation-duration: 1100ms !important; }
}