/* Rendu de l'overlay : utilisé dans OBS (overlay.html) et dans les aperçus du site */

@font-face { font-family: "Inter"; src: url("/static/fonts/inter-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-display: block; }
@font-face { font-family: "Space Grotesk"; src: url("/static/fonts/space-grotesk-latin-wght.woff2") format("woff2"); font-weight: 300 700; font-display: block; }
@font-face { font-family: "Bebas Neue"; src: url("/static/fonts/bebas-neue-latin.woff2") format("woff2"); font-weight: 400; font-display: block; }

.ov-root { line-height: 1.2; white-space: nowrap; }
.ov-text {
  position: relative; display: inline-block; letter-spacing: 0.01em; transform-origin: left center;
  font-variant-numeric: tabular-nums;
}
.ov-root.center .ov-text { transform-origin: center; }
.ov-root.right .ov-text { transform-origin: right center; }
.ov-num { display: inline-block; }

/* Nouveau nombre : il monte en place, avec un léger rebond */
.ov-num.ov-in { animation: ov-in 0.45s cubic-bezier(.2, .8, .3, 1.15) 0.08s both; }
@keyframes ov-in {
  from { transform: translateY(0.6em); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* Ancien nombre qui sort pendant que le nouveau entre (compteur qui roule) */
.ov-ghost { position: absolute; pointer-events: none; }
/* L'ancien part tout de suite (courbe rapide au départ) et a presque disparu quand le nouveau entre (0,08 s plus tard) */
.ov-out-up { animation: ov-out-up 0.22s cubic-bezier(.2, .6, .4, 1) both; }
.ov-out-down { animation: ov-out-down 0.22s cubic-bezier(.2, .6, .4, 1) both; }
@keyframes ov-out-up { from { transform: none; opacity: 1; } 60% { opacity: 0.15; } to { transform: translateY(-0.6em); opacity: 0; } }
@keyframes ov-out-down { from { transform: none; opacity: 1; } 60% { opacity: 0.15; } to { transform: translateY(0.6em); opacity: 0; } }

/* Abonnés en moins : le nombre descend en place, sans rebond */
.ov-num.ov-down { animation: ov-down 0.4s cubic-bezier(.3, .7, .4, 1) 0.08s both; }
@keyframes ov-down {
  from { transform: translateY(-0.6em); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* Objectif atteint : le texte grossit un peu et brille de la couleur des nombres, une seule fois */
.ov-text.ov-celebrate { animation: ov-celebrate 1.3s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes ov-celebrate {
  0% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
  22% { transform: scale(1.06); filter: drop-shadow(0 0 12px var(--ov-accent)); }
  55% { transform: scale(1); filter: drop-shadow(0 0 8px var(--ov-accent)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
}

/* Texte « objectif atteint » qui remplace le texte habituel */
.ov-text.ov-swap { animation: ov-swap 0.4s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes ov-swap {
  from { transform: scale(0.94); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* Retour à un autre état sans animation particulière (fin d'un test, démo qui recommence) */
.ov-root.ov-fade { animation: ov-fade 0.35s ease-out both; }
@keyframes ov-fade { from { opacity: 0; } to { opacity: 1; } }