/* =========================================================
   ANIMATION D'ARRIVÉE « PARENTHÈSE » (2,4 s)
   Sur fond nuit, les deux parenthèses du logo, serrées au centre, s'écartent ;
   le mot « Parenthèse » apparaît entre elles ; puis elles s'ouvrent sur la page et l'écran s'efface.
   L'animation est 100 % CSS (elle démarre au premier affichage) ; intro.js gère le passage au clic / Échap,
   l'apparition du contenu (.ps-reveal) et le retrait de l'écran. Sans JS, l'écran s'efface seul à 2,4 s.
   ========================================================= */

/* L'intro n'existe que si le script du <head> a posé html.ps-intro-on (1re visite de la session) */
#ps-intro{display:none}
html.ps-intro-on #ps-intro{
  display:grid;place-items:center;position:fixed;inset:0;z-index:10000;overflow:hidden;
  background:#1b201d;cursor:pointer;-webkit-tap-highlight-color:transparent;
  animation:ps-intro-out 2.4s linear forwards
}
@keyframes ps-intro-out{0%,68%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}

#ps-intro .ps-intro__stage{position:relative;width:100%;height:min(34vh,230px);font-size:clamp(17px,4.2vw,30px)}
#ps-intro .ps-intro__paren{position:absolute;top:0;left:50%;width:min(10.2vh,69px);height:100%;color:#c4a36e;opacity:0;will-change:transform,opacity}
#ps-intro .ps-intro__paren--l{animation:ps-open-l 2.4s cubic-bezier(.65,0,.35,1) forwards}
#ps-intro .ps-intro__paren--r{animation:ps-open-r 2.4s cubic-bezier(.65,0,.35,1) forwards}
#ps-intro .ps-intro__word{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;
  font-family:"Montserrat","Montserrat Fallback",sans-serif;font-weight:300;font-size:1.5em;color:#f7f5f1;
  opacity:0;letter-spacing:.34em;padding-left:.16em;animation:ps-word 2.4s cubic-bezier(.215,.61,.355,1) forwards
}
/* Parenthèse gauche : collée au centre -> s'écarte (4,9 em) -> s'ouvre vers le bord en s'effaçant */
@keyframes ps-open-l{
  0%{transform:translateX(-100%);opacity:0}
  9%{transform:translateX(-100%);opacity:1}
  50%,68%{transform:translateX(calc(-100% - 4.9em));opacity:1}
  100%{transform:translateX(calc(-100% - 15em));opacity:0}
}
@keyframes ps-open-r{
  0%{transform:scaleX(-1);opacity:0}
  9%{transform:scaleX(-1);opacity:1}
  50%,68%{transform:translateX(4.9em) scaleX(-1);opacity:1}
  100%{transform:translateX(15em) scaleX(-1);opacity:0}
}
@keyframes ps-word{
  0%,34%{opacity:0;letter-spacing:.34em}
  58%,70%{opacity:1;letter-spacing:.16em}
  100%{opacity:0;letter-spacing:.16em}
}
html.ps-intro-lock{overflow:hidden}

/* Apparition du contenu pendant la sortie de l'intro (class="ps-reveal", décalage : style="--ps-delay:.1s") */
/* Sécurité : sans intro.js, le contenu réapparaît seul après 2,6 s (juste après l'effacement de l'écran) */
html.ps-intro-on .ps-reveal{opacity:0;transform:translateY(18px);animation:ps-reveal-failsafe .5s 2.6s forwards}
@keyframes ps-reveal-failsafe{to{opacity:1;transform:none}}
html.ps-intro-revealed .ps-reveal{opacity:1;transform:none;animation:none;transition:opacity .8s cubic-bezier(.215,.61,.355,1),transform .8s cubic-bezier(.215,.61,.355,1);transition-delay:calc(.15s + var(--ps-delay,0s))}

@media (prefers-reduced-motion:reduce){#ps-intro{display:none!important}html.ps-intro-on .ps-reveal{opacity:1;transform:none;animation:none}}