/**
 * PlayAwale — La bulle de bande dessinée
 * -----------------------------------------------------------------------------
 * Deux endroits du site font parler un personnage : la mascotte qui présente
 * les niveaux, et le Semeur Novice qui enseigne pendant la partie. Leur bulle
 * est la même — trait sombre, fond crème, pointe dirigée vers celui qui parle.
 *
 * LA POINTE EST UN MODIFICATEUR
 * Elle change de côté selon l'endroit : vers le bas quand la bulle est au-dessus
 * du personnage, vers la droite ou la gauche quand elle est à côté. Deux
 * triangles superposés la dessinent — bordures d'un élément de taille nulle —
 * le premier pour le trait, le second pour le remplissage, décalé de deux
 * pixels.
 *
 * @package   PlayAwale
 * @version   2.0
 * @author    Nicolas Lion — Développeur web — https://nlion.fr
 * @copyright 2026 Nicolas Lion
 */

.speech {
  position: relative;

  padding: var(--space-sm) var(--space-md);

  color: var(--color-text);
  background-color: var(--color-surface);

  /* La même lumière que partout ailleurs : elle tombe de haut, et le haut de
     la bulle s'éclaircit. Le trait sombre, lui, reste ce qui en fait une case
     de bande dessinée et non un panneau. */
  background-image: var(--gradient-surface-raised);
  border: 2px solid var(--color-brand-dark);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 14px rgba(60, 39, 35, 0.18);
}

.speech::before,
.speech::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}


/* -----------------------------------------------------------------------------
   Pointe vers le bas : la bulle est au-dessus du personnage.
   -------------------------------------------------------------------------- */

.speech--down::before {
  bottom: -14px;
  left: 50%;
  margin-left: -12px;
  border-width: 14px 12px 0 12px;
  border-color: var(--color-brand-dark) transparent transparent transparent;
}

.speech--down::after {
  bottom: -11px;
  left: 50%;
  margin-left: -10px;
  border-width: 12px 10px 0 10px;
  border-color: var(--color-surface) transparent transparent transparent;
}


/* -----------------------------------------------------------------------------
   Pointe vers la droite : le personnage est à droite de la bulle.
   -------------------------------------------------------------------------- */

.speech--right::before {
  top: 50%;
  right: -14px;
  margin-top: -12px;
  border-width: 12px 0 12px 14px;
  border-color: transparent transparent transparent var(--color-brand-dark);
}

.speech--right::after {
  top: 50%;
  right: -11px;
  margin-top: -10px;
  border-width: 10px 0 10px 12px;
  border-color: transparent transparent transparent var(--color-surface);
}


/* -----------------------------------------------------------------------------
   Pointe vers la gauche : le personnage est à gauche de la bulle.
   -------------------------------------------------------------------------- */

.speech--left::before {
  top: 50%;
  left: -14px;
  margin-top: -12px;
  border-width: 12px 14px 12px 0;
  border-color: transparent var(--color-brand-dark) transparent transparent;
}

.speech--left::after {
  top: 50%;
  left: -11px;
  margin-top: -10px;
  border-width: 10px 12px 10px 0;
  border-color: transparent var(--color-surface) transparent transparent;
}


/* -----------------------------------------------------------------------------
   Apparition
   -----------------------------------------------------------------------------
   Une bulle qui surgit sans transition passe inaperçue ou fait sursauter. Elle
   arrive donc en montant légèrement, en un cinquième de seconde — assez pour
   attirer l'œil, trop court pour faire attendre.
   -------------------------------------------------------------------------- */

@keyframes speech-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.speech--enters {
  animation: speech-in 200ms ease-out;

  /* L'origine du grandissement est la pointe : la bulle semble sortir de la
     bouche du personnage plutôt que de son centre. */
  transform-origin: var(--speech-origin, center);
}

@media (prefers-reduced-motion: reduce) {
  .speech--enters {
    animation: none;
  }
}