/* Trame -- le visage de Max (voir max-visage.js)
   L'ecran est toujours sombre, dans les deux themes : c'est un objet, comme un
   cadran. Seuls les points s'allument. */

.mx-visage {
  --mx-taille: 160px;
  --mx-point: #ecebff;
  --mx-lueur: rgba(165, 161, 255, 0.55);
  position: relative;
  width: var(--mx-taille);
  height: var(--mx-taille);
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 30%, #1e1c36, #0b0b12 68%);
  box-shadow: inset 0 0 0 1px rgba(165, 161, 255, 0.16), inset 0 -12px 30px rgba(0, 0, 0, 0.45);
}
.mx-visage.capsule { --mx-taille: 44px; }

.mx-grille {
  width: 84%;
  aspect-ratio: 17 / 11;
  display: grid;
  grid-template-columns: repeat(var(--mx-c), 1fr);
  grid-template-rows: repeat(var(--mx-r), 1fr);
  filter: drop-shadow(0 0 calc(var(--mx-taille) * 0.02) var(--mx-lueur));
  transform-origin: 50% 60%;
}
.mx-grille i {
  display: block;
  width: 84%;
  aspect-ratio: 1;
  margin: auto;
  border-radius: 50%;
  background: var(--mx-point);
  opacity: 0.2;
  transform: scale(0.2);
  /* un balayage de gauche a droite : chaque colonne part 6 ms apres la precedente */
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1) calc(var(--mx-i) * 6ms),
              opacity 160ms ease calc(var(--mx-i) * 6ms);
}
.mx-grille i.on { opacity: 1; }

/* --- gestes : un par expression, jamais plus de 420 ms -------------------- */
.mx-sursaut .mx-grille  { animation: mx-sursaut 280ms cubic-bezier(0.23, 1, 0.32, 1); }
.mx-saut .mx-grille     { animation: mx-saut 300ms cubic-bezier(0.23, 1, 0.32, 1); }
.mx-secoue .mx-grille   { animation: mx-secoue 420ms cubic-bezier(0.36, 0, 0.2, 1); }
.mx-penche .mx-grille   { animation: mx-penche 260ms cubic-bezier(0.23, 1, 0.32, 1) forwards; }
.mx-affaisse .mx-grille { animation: mx-affaisse 380ms cubic-bezier(0.23, 1, 0.32, 1) forwards; }
.mx-souffle .mx-grille  { animation: mx-souffle 3.6s ease-in-out infinite; }
.mx-onde .mx-grille i.on { animation: mx-onde 1s cubic-bezier(0.23, 1, 0.32, 1) infinite;
                           animation-delay: calc(var(--mx-i) * 70ms); }

@keyframes mx-sursaut { 0% { transform: none; } 40% { transform: translateY(-6%) scale(1.06); } 100% { transform: none; } }
@keyframes mx-saut    { 0% { transform: none; } 45% { transform: translateY(-7%); } 100% { transform: none; } }
@keyframes mx-secoue  { 0%, 100% { transform: none; } 18% { transform: translateX(-7%); } 40% { transform: translateX(6%); }
                        62% { transform: translateX(-4%); } 82% { transform: translateX(2%); } }
@keyframes mx-penche  { to { transform: rotate(-8deg) translateX(2%); } }
@keyframes mx-affaisse{ to { transform: translateY(5%); } }
@keyframes mx-souffle { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.85; } }
@keyframes mx-onde    { 0%, 100% { transform: scale(0.35); } 40% { transform: scale(1); } }

/* le regard qui suit le curseur : pas de balayage, une reponse directe */
.mx-suit .mx-grille i { transition-duration: 120ms; transition-delay: 0s; }

/* figer pour une capture : aucune transition */
.mx-fige .mx-grille i { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .mx-grille, .mx-grille i { animation: none !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
}