/* ============================================================================
   PASA MUSIK — OUVERTURE DE MARQUE (ANIMATION DU LOGO)
   ----------------------------------------------------------------------------
   Une ouverture courte, nette et cinématographique : le logo officiel apparaît
   d'un flou vers une netteté parfaite, dévoilé par un balayage doux, puis la
   page d'accueil se révèle.

   Principes
     • Le logo n'est JAMAIS redessiné, déformé ni recomposé en texte :
       c'est le fichier officiel du site (PM-C1x.png) qui est affiché.
     • L'animation est intégralement en CSS : même si JavaScript échoue,
       le voile disparaît tout seul (animation-fill-mode: forwards).
     • Durée totale : 2,4 s. L'ouverture ne doit jamais devenir un obstacle.
     • Respect strict de prefers-reduced-motion.
     • Aucun décalage de mise en page : le voile est en position fixe.
   ========================================================================== */

/* Le voile n'est peint que si le script d'amorçage l'a armé — c'est-à-dire à
   chaque chargement de page. Sans la classe, il n'existe pas : une page
   servie sans JavaScript ne montre jamais de voile bloquant. */
.pm-intro { display: none; }

html.pm-intro-on .pm-intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: #fbfaf8;
  /* Léger halo chaud : le blanc pur serait clinique. */
  background-image:
    radial-gradient(120% 90% at 50% 42%, #ffffff 0%, #fbfaf8 46%, #f2f0ec 100%);
  will-change: opacity;
  animation: pm-intro-veil 2400ms cubic-bezier(.4, 0, .2, 1) forwards;
}

/* Pendant l'ouverture, la page ne défile pas (filet de sécurité en JS : le
   verrou est relâché dans tous les cas). */
html.pm-intro-on, html.pm-intro-on body { overflow: hidden; }

/* Exception : quand l'adresse vise un ancrage, la page doit pouvoir s'y
   rendre pendant l'ouverture. Sans cela, elle resterait en haut et le
   visiteur arriverait au mauvais endroit. */
html.pm-intro-on.pm-intro-free,
html.pm-intro-on.pm-intro-free body { overflow: visible; }

.pm-intro__stage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  width: min(500px, 66vw);
}

.pm-intro__logo {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  /* Le balayage de dévoilement : un dégradé de masque trois fois plus large
     que le logo, que l'on fait glisser de gauche à droite. */
  -webkit-mask-image: linear-gradient(90deg,
      transparent 0%, transparent 26%,
      rgba(0, 0, 0, .35) 32%, #000 42%, #000 100%);
          mask-image: linear-gradient(90deg,
      transparent 0%, transparent 26%,
      rgba(0, 0, 0, .35) 32%, #000 42%, #000 100%);
  -webkit-mask-size: 300% 100%;
          mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  /* État final sûr : si le masque n'est pas animable, le logo reste visible. */
  -webkit-mask-position: 100% 0;
          mask-position: 100% 0;
  will-change: opacity, transform, filter;
  animation:
    pm-intro-logo 2400ms cubic-bezier(.16, 1, .3, 1) forwards,
    pm-intro-mask 2400ms cubic-bezier(.22, .61, .36, 1) forwards;
}

/* Filet lumineux aux couleurs du logo (orange → rouge → prune → bleu),
   exactement la palette de l'ombre colorée de la marque. */
.pm-intro__rule {
  display: block;
  width: 56%;
  height: 2px;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: 50% 50%;
  opacity: 0;
  background: linear-gradient(90deg, #F3AF20 0%, #EF4424 34%, #8B4A7D 68%, #1C6FB8 100%);
  animation: pm-intro-rule 2400ms cubic-bezier(.16, 1, .3, 1) forwards;
}

/* Bouton « passer » : discret, accessible au clavier, jamais encombrant. */
.pm-intro__skip.pm-intro__skip {
  position: absolute;
  right: clamp(16px, 3vw, 36px);
  bottom: clamp(16px, 3vw, 32px);
  padding: 9px 16px;
  border: 1px solid rgba(11, 37, 48, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .6);
  color: #4a5c66;
  font: 600 11px/1 "Comfortaa", system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  animation: pm-intro-skip 2400ms linear forwards;
  transition: color .25s, border-color .25s, background-color .25s;
}
.pm-intro__skip.pm-intro__skip:hover,
.pm-intro__skip.pm-intro__skip:focus-visible {
  color: #047391;
  border-color: #047391;
  background: #fff;
}

/* --- Déroulé ------------------------------------------------------------ */

@keyframes pm-intro-veil {
  0%, 76%  { opacity: 1; }
  100%     { opacity: 0; visibility: hidden; pointer-events: none; }
}

@keyframes pm-intro-logo {
  0%   { opacity: 0; transform: translate3d(0, 16px, 0) scale(1.075); filter: blur(18px); }
  10%  { opacity: 0; }
  48%  { opacity: 1; transform: translate3d(0, 0, 0)    scale(1);     filter: blur(0); }
  74%  { opacity: 1; transform: translate3d(0, 0, 0)    scale(1);     filter: blur(0); }
  100% { opacity: 0; transform: translate3d(0, -12px, 0) scale(.978); filter: blur(5px); }
}

@keyframes pm-intro-mask {
  0%   { -webkit-mask-position: 0% 0;   mask-position: 0% 0; }
  58%  { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  100% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}

@keyframes pm-intro-rule {
  0%, 16% { transform: scaleX(0);  opacity: 0; }
  26%     {                        opacity: 1; }
  54%     { transform: scaleX(1);  opacity: 1; }
  74%     { transform: scaleX(1);  opacity: 1; }
  100%    { transform: scaleX(1);  opacity: 0; }
}

@keyframes pm-intro-skip {
  0%, 20% { opacity: 0; }
  32%     { opacity: 1; }
  70%     { opacity: 1; }
  100%    { opacity: 0; }
}

/* --- Révélation de la page derrière le voile ----------------------------- */
/* La bande d'artistes se pose en douceur au moment exact où le voile s'efface.
   Seule une opacité est animée : aucune transformation, donc aucun risque pour
   l'en-tête fixe ni aucun décalage de mise en page. */
html.pm-intro-on .pm-hero,
html.pm-intro-on .pm-roster {
  animation: pm-intro-settle 1400ms cubic-bezier(.16, 1, .3, 1) 1500ms both;
}
@keyframes pm-intro-settle {
  from { opacity: .35; }
  to   { opacity: 1; }
}

/* --- Mouvement réduit ---------------------------------------------------- */
/* Le logo apparaît et disparaît en fondu simple : ni flou, ni échelle,
   ni déplacement, ni balayage. Durée raccourcie. */
@media (prefers-reduced-motion: reduce) {
  html.pm-intro-on .pm-intro { animation-duration: 1400ms; }
  .pm-intro__logo {
    animation: pm-intro-logo-reduced 1400ms ease forwards;
    -webkit-mask-image: none; mask-image: none;
    filter: none;
  }
  .pm-intro__rule { animation: none; opacity: 0; }
  .pm-intro__skip { animation: none; opacity: 1; }
  html.pm-intro-on .pm-hero,
  html.pm-intro-on .pm-roster { animation: none; }

  @keyframes pm-intro-logo-reduced {
    0%        { opacity: 0; }
    26%, 74%  { opacity: 1; }
    100%      { opacity: 0; }
  }
}

/* --- Petits écrans ------------------------------------------------------- */
@media (max-width: 600px) {
  .pm-intro__stage { width: min(300px, 74vw); gap: 20px; }
}