/* OUVERTURE DE L'ACCUEIL — reprise de l'ouverture d'Okey Conciergerie (mêmes durées, même ouverture, même envol),
   adaptée au logo Papé Matteo : le M se trace au trait crème, se remplit, l'étoile apparaît à la fin, puis la page
   s'ouvre en cercle depuis l'étoile et le M file se poser dans la pastille de l'en-tête ([data-intro-cible]).
   Tracés : M et étoile du logo officiel (sources/LOGOS), arrondis au dixième.
   Noms réservés : .intro*, html.intro-vue / intro-live / intro-ouvre / intro-done, @keyframes intro-*. */
.intro{
  --intro-voile:var(--espresso,#241812);
  --intro-voile-bord:#170F0B;
  --intro-trait:var(--cream,#F7EFE1);
  --intro-rouge:#C7341F;           /* M du logo officiel */
  --intro-etoile:#F29232;          /* étoile du logo officiel */
  --intro-ease:cubic-bezier(.23,1,.32,1);
  display:none;position:fixed;inset:0;z-index:9500;
  font-size:17px;line-height:1.4;font-weight:400;letter-spacing:normal;text-transform:none;text-align:center;
  -webkit-font-smoothing:antialiased;box-sizing:border-box
}
.intro *,.intro *::before,.intro *::after{box-sizing:border-box}
html.intro-vue .intro{display:block;animation:intro-filet .3s linear 4.8s forwards}
html.intro-done .intro{display:none}
@keyframes intro-filet{to{opacity:0;visibility:hidden}}

.intro__fond{position:absolute;inset:0;background:radial-gradient(120% 95% at 50% 42%,var(--intro-voile) 35%,var(--intro-voile-bord) 100%)}
.intro__fond::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 44%,rgba(242,146,50,.16),transparent min(34vmax,520px))}
.intro__scene{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:clamp(22px,4vh,38px)}
.intro__marque{position:relative;width:min(44vw,380px);aspect-ratio:630.2/373.49;transform-origin:0 0;color:var(--intro-rouge)}
.intro__svg{display:block;position:absolute;inset:0;width:100%;height:100%;max-width:none;overflow:visible}

/* 1. le M se trace (0,08 → 0,98 s) */
.intro__trait{fill:none;stroke:var(--intro-trait);stroke-width:4.5;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:intro-trace .9s cubic-bezier(.55,0,.25,1) 80ms forwards}
/* 2. puis se remplit du rouge du logo (0,8 → 1,2 s) */
.intro__plein{fill:currentColor;opacity:0;animation:intro-remplit .4s ease-out .8s forwards}
/* 3. l'étoile apparaît à la fin, en tournant (1 → 1,6 s), avec un éclat qui s'éteint */
.intro__etoile{fill:var(--intro-etoile);transform-box:fill-box;transform-origin:50% 50%;opacity:0;transform:scale(0) rotate(-90deg);
  animation:intro-etoile .6s cubic-bezier(.34,1.56,.64,1) 1s forwards}
.intro__eclat{position:absolute;left:50.36%;top:25%;width:64%;aspect-ratio:1;margin:-32% 0 0 -32%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(242,146,50,.55),rgba(242,146,50,0));opacity:0;transform:scale(.2);
  animation:intro-eclat .9s var(--intro-ease) 1.02s forwards}
/* 4. la phrase */
.intro__word{margin:0;padding:0 16px;font-family:var(--font-script,"Yellowtail",cursive);font-weight:400;
  font-size:clamp(30px,3.4vw,44px);line-height:1.2;color:var(--intro-trait);opacity:0;
  animation:intro-rise .55s var(--intro-ease) 1.15s forwards}
.intro__word span{color:var(--intro-etoile)}

/* ouverture : un trou centré sur l'étoile grandit jusqu'aux coins (intro.js) */
.intro.is-ouverture .intro__fond{-webkit-mask-image:radial-gradient(circle at var(--cx) var(--cy),transparent var(--trou),#000 calc(var(--trou) + 1.5px));mask-image:radial-gradient(circle at var(--cx) var(--cy),transparent var(--trou),#000 calc(var(--trou) + 1.5px))}

@keyframes intro-trace{to{stroke-dashoffset:0}}
@keyframes intro-remplit{to{opacity:1}}
@keyframes intro-etoile{to{opacity:1;transform:none}}
@keyframes intro-eclat{40%{opacity:1}to{opacity:0;transform:scale(1.5)}}
@keyframes intro-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Page préchargée en cachette par Chrome (document.prerendering) : tout reste figé au début jusqu'à l'affichage réel. */
html.intro-attente .intro,html.intro-attente .intro *{animation-play-state:paused!important}

/* Pendant l'ouverture, le vrai logo attend le M ; il reparaît d'un coup quand le M est posé dessus. */
html.intro-live [data-intro-cible]{opacity:0!important;transition:none!important}
/* La cascade du premier écran (et le léger recul de la photo) attend que la page s'ouvre. */
html.intro-live:not(.intro-ouvre) .hero-home .hero-seq,
html.intro-live:not(.intro-ouvre) .hero-home .hero-photo-img{animation-play-state:paused}

@media (max-width:640px){
  .intro__marque{width:66vw}
}
/* Mouvement réduit : le site coupe toutes les animations CSS (§19 de styles.css). Version courte et immobile :
   le logo déjà dessiné et la phrase sur le voile, l'ensemble apparaît puis s'efface en fondu (intro.js, 1,4 s). */
@media (prefers-reduced-motion:reduce){
  .intro__trait{stroke-dashoffset:0}
  .intro__plein,.intro__etoile,.intro__word{opacity:1;transform:none}
  .intro__eclat{display:none}
}