/* La Baraque TV — « veille » : la télé s'éteint (AU REVOIR) quand la souris quitte la page par le haut.
   Utilisé par index.html (écran d'entrée) et baraque.html ; comportement dans assets/js/veille.js */

/* ---------- Effet « vieux téléviseur » : animations utilisées par la veille (plus bas) ---------- */
@keyframes volet { to { transform: scaleY(1); } }
@keyframes ligne-apparait { to { opacity: 1; } }
@keyframes ligne-retracte { to { transform: scaleX(.004) scaleY(1.6); } }
@keyframes point-eteint { to { opacity: 0; transform: scaleX(.001) scaleY(.4); } }
@keyframes message-apparait { to { opacity: 1; } }

/* ---------- Veille (souris sortie par le haut / retour sur l'onglet) ----------
   Ne bloque jamais les clics. */
.veille {
  position: fixed; inset: 0;
  z-index: 99;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}
.veille.eteinte, .veille.rallume { visibility: visible; }
.veille__volet {
  position: absolute; left: 0; right: 0;
  height: 50.5%;
  background: #000;
  transform: scaleY(0);
}
.veille__volet--haut { top: 0; transform-origin: top; }
.veille__volet--bas { bottom: 0; transform-origin: bottom; }
.veille__ligne {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 3px;
  margin-top: -1.5px;
  background: #fff;
  box-shadow: 0 0 12px 4px rgba(255,255,255,.9), 0 0 40px 10px rgba(255,220,190,.5);
  opacity: 0;
}
/* Extinction (≈ 1,6 s) : l'image se referme en une ligne (0,6 s), la ligne devient un point (0,46 s), le point s'éteint */
.veille.eteinte .veille__volet { animation: volet .6s cubic-bezier(.55,0,.9,.4) forwards; }
.veille.eteinte .veille__ligne {
  animation:
    ligne-apparait .16s .47s forwards,
    ligne-retracte .46s .6s cubic-bezier(.6,0,.4,1) forwards,
    point-eteint .5s 1.06s ease-out forwards;
}
/* « Au revoir » : apparaît au-dessus de la ligne pendant que l'image se referme, reste sur le noir,
   disparaît dès le rallumage */
.veille__texte {
  position: absolute; left: 0; right: 0; top: 50%;
  margin: 0;
  transform: translateY(calc(-100% - 28px));
  font-family: var(--f-menu);
  font-weight: 500;
  font-size: clamp(1.6rem, 1rem + 2vw, 2.8rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 18px rgba(255,220,190,.55);
  opacity: 0;
}
.veille.eteinte .veille__texte { animation: message-apparait .6s .5s ease-out forwards; }   /* écran presque noir */
/* Déjà noir (onglet quitté) : pas d'animation, pas de texte au retour */
.veille.eteinte.instantane .veille__volet { animation: none; transform: scaleY(1); }
.veille.eteinte.instantane .veille__ligne { animation: none; }
.veille.eteinte.instantane .veille__texte { animation: none; opacity: 0; }
/* Rallumage (≈ 0,9 s) : un point s'allume, s'étire en ligne, puis l'image s'ouvre */
.veille.rallume .veille__volet { transform: scaleY(1); animation: volet-ouvre .45s .45s cubic-bezier(.2,.6,.4,1) forwards; }
.veille.rallume .veille__ligne { animation: ligne-deploie .9s ease-out forwards; }
@keyframes volet-ouvre { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes ligne-deploie {
  0%   { opacity: 0; transform: scaleX(.004) scaleY(.6); }
  15%  { opacity: 1; transform: scaleX(.004) scaleY(1.6); }
  50%  { opacity: 1; transform: scaleX(1) scaleY(1); }
  100% { opacity: 0; transform: scaleX(1) scaleY(.3); }
}

@media (prefers-reduced-motion: reduce) {
  .veille { display: none; }
}