/* ---------------------------------------------------------------
   QHB — la scène en pixels : la colonne et la phrase sous le dessin

   L'overlay lui-même est celui de la célébration (.celebrate, dans
   celebrate.css) : même fond pétrole, même fondu, même tap pour
   fermer. Ici, ce que les scènes à phrase (garde, doh) partagent.
   Voir public/assets/js/scene.js.
   --------------------------------------------------------------- */

.scene {
  flex-direction: column;
  gap: 0.5rem;   /* le dessin pointe ou regarde le texte : il est juste dessous */
}

.scene-phrase {
  margin: 0;
  display: flex;
  gap: 0.4em;
  font-family: 'Goia', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 800;
  font-size: clamp(2.1rem, 10.5vw, 3.6rem);
  letter-spacing: 0.05em;
  line-height: 1;
  color: #ffffff;
  text-transform: uppercase;
}

/* Un mot à la fois, qui tombe d'un cran en apparaissant : le rythme
   d'une phrase qu'on assène, pas d'un titre qui s'affiche. */
.scene-mot {
  opacity: 0;
  transform: translateY(-0.25em);
  transition: opacity 120ms ease-out, transform 120ms ease-out;
}
.scene-mot-visible {
  opacity: 1;
  transform: none;
}
/* Le mot en or : SAFE, comme les chaînes du garde. */
.scene-mot-or.scene-mot-visible {
  color: #ffd23f;
}

.scene-sous {
  margin: 0.35rem 0 0;
  padding: 0 1rem;
  text-align: center;
  font-family: 'Goia', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  color: #a9c3c3;     /* sauge éclaircie : lisible sur pétrole (le sauge nu ne l'est pas) */
}

@media (prefers-reduced-motion: reduce) {
  .scene-mot { transition: none; }
}