/* Elemental · animación reutilizable para retratos pixel art
   El contenedor y la imagen permanecen transparentes. */

.elemental-face-stage {
  --face-delay: 0ms;
  display: grid;
  width: var(--face-size, 220px);
  aspect-ratio: 1;
  place-items: center;
  animation: elemental-face-enter 780ms steps(9, end) var(--face-delay) both;
  transform-origin: 50% 78%;
}

.elemental-face {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  transform-origin: 50% 78%;
  filter: drop-shadow(0 12px 17px rgba(45, 108, 223, .14));
  will-change: transform;
}

/* Cada modificador anima únicamente el PNG y aporta un gesto distinto. */
.elemental-face--nod {
  animation: elemental-face-nod 3.7s steps(14, end) calc(var(--face-delay) + 820ms) infinite;
}

.elemental-face--curious {
  animation: elemental-face-curious 4.1s steps(16, end) calc(var(--face-delay) + 820ms) infinite;
}

.elemental-face--bounce {
  animation: elemental-face-bounce 3.5s steps(14, end) calc(var(--face-delay) + 820ms) infinite;
}

.elemental-face--sway {
  animation: elemental-face-sway 4.3s steps(16, end) calc(var(--face-delay) + 820ms) infinite;
}

.elemental-face--double-hop {
  animation: elemental-face-double-hop 3.9s steps(16, end) calc(var(--face-delay) + 820ms) infinite;
}

.elemental-face--peek {
  animation: elemental-face-peek 4.4s steps(17, end) calc(var(--face-delay) + 820ms) infinite;
}

.elemental-face--wiggle {
  animation: elemental-face-wiggle 3.8s steps(15, end) calc(var(--face-delay) + 820ms) infinite;
}

.elemental-face--diagonal {
  animation: elemental-face-diagonal 4.2s steps(16, end) calc(var(--face-delay) + 820ms) infinite;
}

.elemental-face--double-pop {
  animation: elemental-face-double-pop 3.6s steps(14, end) calc(var(--face-delay) + 820ms) infinite;
}

.elemental-face--welcome {
  animation: elemental-face-welcome 4s steps(16, end) calc(var(--face-delay) + 820ms) infinite;
}

@keyframes elemental-face-enter {
  0% {
    opacity: 0;
    transform: translateY(12%) scale(.72) rotate(-2.2deg);
  }
  52% {
    opacity: 1;
    transform: translateY(-3.5%) scale(1.035) rotate(.7deg);
  }
  76% {
    transform: translateY(1.2%) scale(.985) rotate(-.25deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes elemental-face-nod {
  0%, 14%, 58%, 100% { transform: none; }
  24% { transform: translateY(-2.5%) rotate(-.7deg); }
  32% { transform: translateY(1.8%) scaleY(.985) rotate(.35deg); }
  40% { transform: translateY(-.8%) rotate(-.2deg); }
  48% { transform: none; }
}

@keyframes elemental-face-curious {
  0%, 13%, 62%, 100% { transform: none; }
  24% { transform: translateX(-3.2%) translateY(-1%) rotate(-1.7deg); }
  37% { transform: translateX(2.4%) translateY(-1.8%) rotate(1.15deg); }
  50% { transform: translateX(-.7%) rotate(-.3deg); }
  57% { transform: none; }
}

@keyframes elemental-face-bounce {
  0%, 14%, 58%, 100% { transform: none; }
  23% { transform: translateY(-6.5%) scale(1.018, .982); }
  31% { transform: translateY(1.4%) scale(.982, 1.018); }
  39% { transform: translateY(-2.2%) scale(1.006, .994); }
  48% { transform: none; }
}

@keyframes elemental-face-sway {
  0%, 12%, 64%, 100% { transform: none; }
  25% { transform: translateY(-1.4%) rotate(-2deg); }
  39% { transform: translateY(-2%) rotate(1.8deg); }
  52% { transform: translateY(-.5%) rotate(-.65deg); }
  59% { transform: none; }
}

@keyframes elemental-face-double-hop {
  0%, 15%, 62%, 100% { transform: none; }
  23% { transform: translateY(-7%) scale(1.018, .982) rotate(-.8deg); }
  30% { transform: translateY(1.2%) scale(.985, 1.015); }
  38% { transform: translateY(-4.4%) scale(1.01, .99) rotate(.55deg); }
  45% { transform: translateY(.8%) scale(.992, 1.008); }
  53% { transform: none; }
}

@keyframes elemental-face-peek {
  0%, 14%, 66%, 100% { transform: none; }
  25% { transform: translateX(-4%) translateY(-1.5%) rotate(-1.45deg); }
  39% { transform: translateX(3%) translateY(-2.2%) rotate(1deg); }
  52% { transform: translateX(-1%) rotate(-.35deg); }
  60% { transform: none; }
}

@keyframes elemental-face-wiggle {
  0%, 16%, 58%, 100% { transform: none; }
  23% { transform: translateY(-1%) rotate(-2.1deg); }
  29% { transform: translateY(-1.8%) rotate(2deg); }
  35% { transform: translateY(-1%) rotate(-1.15deg); }
  41% { transform: translateY(-1.4%) rotate(.9deg); }
  48% { transform: none; }
}

@keyframes elemental-face-diagonal {
  0%, 13%, 64%, 100% { transform: none; }
  25% { transform: translate(-2.8%, -4.2%) rotate(-1deg); }
  39% { transform: translate(2.2%, -1.4%) rotate(.8deg); }
  52% { transform: translate(-.5%, -.5%) rotate(-.25deg); }
  59% { transform: none; }
}

@keyframes elemental-face-double-pop {
  0%, 15%, 59%, 100% { transform: none; }
  23% { transform: translateY(-3.5%) scale(1.05); }
  30% { transform: translateY(1%) scale(.975); }
  37% { transform: translateY(-1.8%) scale(1.028); }
  45% { transform: translateY(.4%) scale(.993); }
  51% { transform: none; }
}

@keyframes elemental-face-welcome {
  0%, 14%, 64%, 100% { transform: none; }
  24% { transform: translateY(-2.8%) rotate(-1.4deg) scale(1.018); }
  37% { transform: translateY(-1.2%) rotate(1.2deg) scale(1.01); }
  50% { transform: translateY(.8%) rotate(-.35deg) scale(.994); }
  58% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .elemental-face-stage,
  .elemental-face {
    animation: none !important;
    transform: none !important;
  }
}