/* ==========================================================
   MA CHANSON PERSO - Intro animee de l'accueil : socle commun
   Charge uniquement sur l'accueil pendant un theme (voir includes/intro.php).
   Chaque theme ajoute sa propre feuille : intro-halloween.css, intro-noel.css...
   et son script de dessin : intro-halloween.js, intro-noel.js...
   ========================================================== */

.intro { display: none; }
html.intro-on .intro {
  display: block; position: fixed; inset: 0; z-index: 100000; overflow: hidden;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  animation: in-secours 0.01s linear 7s forwards; /* filet de securite si le script ne repond pas */
}
html.intro-on .intro.in-bye { animation: in-bye 0.28s ease forwards; }
@keyframes in-secours { to { visibility: hidden; pointer-events: none; } }
@keyframes in-bye { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* ---------- Scene, canvas, message ---------- */
.in-scene { position: absolute; inset: 0; }
.in-bg { position: absolute; inset: 0; opacity: 0; }
.in-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.in-hello {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 20px 4vh; text-align: center; pointer-events: none;
}
.in-halo {
  position: absolute; left: 50%; top: 44%; width: min(120vw, 760px); aspect-ratio: 1; transform: translate(-50%, -50%);
  opacity: 0;
}
.in-msg, .in-sub { opacity: 0; transform: translateY(14px); }
.in-msg {
  margin: 18px 0 6px; max-width: 18em; text-wrap: balance;
  font: 800 clamp(1.35rem, 5.6vw, 2.5rem)/1.12 'Bricolage Grotesque', sans-serif;
}
.in-sub { margin: 0; font: 500 clamp(0.95rem, 3.4vw, 1.2rem)/1.35 'Figtree', sans-serif; }

@keyframes in-fondre { to { opacity: 1; } }
@keyframes in-apparait { to { opacity: 1; } }
@keyframes in-monte { to { opacity: 1; transform: none; } }

/* ---------- Bouton Passer ---------- */
.in-skip {
  position: absolute; z-index: 5; top: max(14px, env(safe-area-inset-top)); right: 14px;
  background: rgba(0, 0, 0, 0.5); color: #fff; border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 8px 18px; min-height: 44px; border-radius: 999px; cursor: pointer;
  font: 600 0.9rem/1.2 'Figtree', sans-serif;
}
.in-go .in-skip { animation: in-skip-out 0.3s ease 3.3s forwards; }
@keyframes in-skip-out { to { opacity: 0; visibility: hidden; } }
.in-skip:hover, .in-skip:focus-visible { background: rgba(0, 0, 0, 0.78); border-color: #fff; }

@media (prefers-reduced-motion: reduce) { .intro { display: none !important; } }
@media print { .intro { display: none !important; } }