/* ==========================================================================
   Transition cinématique entre simulateurs — sitewide (45 pages).
   Fichier isolé : n'affecte que .simcinema-*. Ne touche à aucun composant,
   formulaire, calcul ou route existant. Overlay créé dynamiquement par
   sim-transition.js — aucun balisage statique requis dans les pages.

   Déroulé : une photo réelle de New York remplit l'écran → le mot
   "SIMULATEUR" apparaît petit, au repos → après un court silence, il
   grossit d'un seul mouvement continu (jamais de rebond) jusqu'à recouvrir
   entièrement la photo → le simulateur apparaît. Aucun masquage vidéo/photo
   dans les lettres ici : le mot est un simple texte plein, ce qui le rend
   net et bon marché à animer (transform + opacity uniquement).
   ========================================================================== */

.simcinema-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--navy-deep, #050b16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.simcinema-overlay.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.simcinema-overlay.is-navback {
  /* utilisé sur la page cible : continue le rideau blanc qui vient de se
     refermer sur la page précédente, puis se retire au chargement */
  background: #fff;
  opacity: 1;
  visibility: visible;
}

/* --- Photo de fond (une seule photo réelle, jamais générée par IA) ---
   Volontairement statique (pas de Ken Burns) : sur une séquence aussi
   courte et déjà dense en mouvement (mot qui grossit, rideau qui se
   referme), une couche de plus en transform continu ajoutait du travail
   de composition GPU superflu — au prix de micro-saccades. */
.simcinema-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
}
.simcinema-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(4, 9, 20, 0.55) 0%, rgba(4, 9, 20, 0.3) 40%, rgba(4, 9, 20, 0.6) 100%);
  pointer-events: none;
}

.simcinema-glow {
  position: absolute;
  inset: -25%;
  z-index: 2;
  background: radial-gradient(circle at 50% 50%, rgba(223, 199, 147, 0.14), transparent 62%);
  pointer-events: none;
}

/* --- Rideau blanc : se referme en fondu au moment précis où le mot achève
   sa croissance, garantissant une couverture totale et nette de l'écran,
   quelle que soit la police ou la fenêtre. --- */
.simcinema-curtain {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #fff;
  opacity: 0;
  will-change: opacity;
  pointer-events: none;
}

.simcinema-stage {
  position: relative;
  z-index: 4;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.simcinema-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0 6vw;
}

/* Le mot géant : texte plein (jamais masqué par une vidéo/photo), simple à
   animer — transform + opacity uniquement, aucune re-rasterisation requise,
   net à n'importe quelle échelle. Le text-shadow (utile pour la lisibilité
   pendant la phase "petit/immobile") est retiré en JS juste avant que la
   croissance ne démarre : un flou animé à grande échelle force une
   recomposition coûteuse à chaque frame — c'était une source de
   micro-saccades. */
.simcinema-word {
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 0.98;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.4);
  font-size: clamp(2.6rem, 7.4vw, 6.4rem);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  backface-visibility: hidden;
  contain: paint;
  opacity: 0;
  transform: scale(0.9);
}

/* --- Nom réel du simulateur : apparaît discrètement sous le mot géant.
   Toujours lu dynamiquement depuis le lien cliqué — jamais codé en dur. --- */
.simcinema-subname {
  text-align: center;
  color: rgba(255, 255, 255, 0.88);
  font-weight: 600;
  letter-spacing: 0.01em;
  font-size: clamp(0.95rem, 2.1vw, 1.5rem);
  opacity: 0;
  max-width: 90vw;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
}

.simcinema-tagline {
  position: absolute;
  z-index: 4;
  bottom: 9%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(223, 199, 147, 0.85);
  opacity: 0;
}

/* --- Repli simple (prefers-reduced-motion, ou si Motion One ne charge pas) :
   la photo et le mot restent visibles à taille fixe, aucune croissance,
   juste un fondu élégant. --- */
.simcinema-overlay.reduced .simcinema-word {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.3s ease;
}

/* --- Accessibilité --- */
@media (prefers-reduced-motion: reduce) {
  .simcinema-word {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.3s ease;
  }
  .simcinema-glow { display: none; }
}

/* --- Responsive --- */
@media (max-width: 640px) {
  .simcinema-word { font-size: clamp(2.2rem, 11vw, 3.6rem); }
}

/* Empêche le scroll de la page pendant la cinématique */
body.simcinema-locked { overflow: hidden; }