/* ==========================================================================
   Accueil — intro 3D de la clé
   Source : design-export/pages/Intro-3D.html (mêmes durées, courbes et positions).
   Plein écran (décision de Gioele du 23.10.2026, remplace « sous l'en-tête ») : pendant ≈ 3 s,
   on ne voit que la clé et les portes, puis les portes s'ouvrent sur la page. L'intro passe devant
   l'en-tête (z 40), le menu (z 45) et la barre d'appel du téléphone (z 30).
   Visible seulement quand <html> a la classe sr-intro-on (script dans header.php).
   Fluidité (24.10.2026, Gioele : « elle beuge ») : l'intro joue pendant le chargement de la page,
   donc tout ce qui bouge n'anime que transform et opacity (calculés par la carte graphique) :
   apparition en fondu sur la scène et non sur la clé 3D (qu'un fondu aplatit), reflet déplacé
   par translateX au lieu de background-position, éclat de la serrure en fondu de calques
   au lieu d'une ombre floue redessinée à chaque image. Rendu identique à l'export.
   ========================================================================== */
.sr-accueil { position: relative; }

.sr-intro {
  display: none;
  /* Valeurs de l'export : ordinateur (Main.html) */
  --intro-echelle: 1.25;
  --intro-serrure: 144px;
  --intro-serrure-x: -362px;
}
.sr-intro-on .sr-intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  animation: sr-intro-fin 0s 3.3s forwards;
}
@keyframes sr-intro-fin { to { visibility: hidden; } }

/* Les deux portes bleu nuit, avec un filet or au milieu */
.sr-intro__porte { position: absolute; top: 0; bottom: 0; width: 50.5%; background: var(--navy-900); }
.sr-intro__porte--g {
  left: 0;
  box-shadow: inset -1px 0 0 rgba(221,174,42,.35);
  animation: sr-porte-g .9s 2.35s cubic-bezier(.7,0,.2,1) forwards;
}
.sr-intro__porte--d {
  right: 0;
  box-shadow: inset 1px 0 0 rgba(221,174,42,.35);
  animation: sr-porte-d .9s 2.35s cubic-bezier(.7,0,.2,1) forwards;
}
@keyframes sr-porte-g { to { transform: translateX(-101%); } }
@keyframes sr-porte-d { to { transform: translateX(101%); } }

.sr-intro__defs { position: absolute; }

/* La scène 3D : la clé, puis la serrure */
.sr-intro__scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
  /* Apparition (0 → 0,26 s, comme les 12 % du vol de la clé), puis sortie à 2,2 s. */
  animation: sr-scene-entree .26s cubic-bezier(.2,.75,.25,1) both, sr-scene-sortie .45s 2.2s ease forwards;
}
@keyframes sr-scene-entree { from { opacity: 0; } to { opacity: 1; } }
@keyframes sr-scene-sortie { to { opacity: 0; transform: scale(1.05); } }

.sr-intro__echelle { transform: scale(var(--intro-echelle)); transform-style: preserve-3d; }
.sr-intro__cle {
  position: relative;
  width: 440px;
  height: 150px;
  /* Plate, comme le rendu validé : dans l'export, le fondu de la clé l'aplatissait déjà
     (les 14 couches se voyaient en tranches quand elle tourne). La clé tourne en 3D, à plat. */
  transform-style: flat;
  animation: sr-cle-vol 2.15s cubic-bezier(.2,.75,.25,1) both;
}
/* Arrive de loin en tournant, entre dans la serrure, puis tourne d'un quart de tour.
   Pas d'opacity ici : sur un élément 3D, un fondu l'aplatit puis le remet en 3D (à-coup). */
@keyframes sr-cle-vol {
  0%       { transform: translate3d(320px, 60px, -1200px) rotateY(660deg) rotateZ(16deg); }
  58%      { transform: translate3d(70px, 0, 0) rotateY(0deg) rotateZ(0deg) rotateX(0deg); }
  72%      { transform: translate3d(-60px, 0, 0) rotateY(0deg) rotateZ(0deg) rotateX(0deg); }
  90%, 100% { transform: translate3d(-60px, 0, 0) rotateY(0deg) rotateZ(0deg) rotateX(-78deg); }
}
.sr-intro__couche { position: absolute; inset: 0; }
.sr-intro__couche svg { display: block; }
.sr-intro__couche--gravure { transform: translateZ(7.6px); }
.sr-intro__couche--gravure svg { stroke: var(--key-engrave); }

/* Reflet de lumière qui passe sur la clé. La bande (3 fois la largeur de la clé) glisse avec
   translateX : même trajet que l'ancien background-position 100 % → 0 %, sans redessin. */
.sr-intro__reflet {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: path('M294,75 A66,66 0 1,1 426,75 A66,66 0 1,1 294,75 Z M352,79 L346,108 H374 L368,79 A19,19 0 1,0 352,79 Z M38,58 H250 V50 H300 V100 H250 V92 H232 L222,104 L210,92 L198,108 L184,108 L174,96 L162,108 L150,108 L140,98 L128,108 L112,108 L102,96 L92,92 H40 L22,80 V70 Z');
}
.sr-intro__reflet::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 300%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 60%);
  transform: translateX(-66.6667%);
  animation: sr-reflet 1.1s 1.05s ease-in-out forwards;
}
@keyframes sr-reflet { to { transform: translateX(0); } }

/* La serrure : apparaît, puis brille quand la clé tourne */
.sr-intro__serrure {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--intro-serrure);
  height: var(--intro-serrure);
  margin: calc(var(--intro-serrure) / -2) 0 0 var(--intro-serrure-x);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--lock-1), var(--lock-2) 70%);
  box-shadow: 0 0 0 1.5px rgba(221,174,42,.55), var(--shadow-lock);
  opacity: 0;
  transform: scale(.6);
  animation: sr-serrure-arrive .5s 1s cubic-bezier(.2,.8,.2,1) forwards;
}
.sr-intro__serrure path { fill: var(--keyhole); stroke: rgba(221,174,42,.6); stroke-width: 1.2; }
@keyframes sr-serrure-arrive { to { opacity: 1; transform: scale(1); } }
/* Éclat quand la clé tourne (1,95 s → 2,55 s) : deux halos déjà dessinés, seulement fondus.
   ::before = l'éclat vif (maximum à 40 %), ::after = la lueur qui reste ensuite. */
.sr-intro__serrure::before,
.sr-intro__serrure::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.sr-intro__serrure::before {
  box-shadow: 0 0 0 2px rgba(255,214,90,1), 0 0 60px rgba(255,200,60,.55);
  animation: sr-serrure-eclat .6s 1.95s ease-out forwards;
}
.sr-intro__serrure::after {
  box-shadow: 0 0 0 1.5px rgba(221,174,42,.8), 0 0 30px rgba(255,200,60,.25);
  animation: sr-serrure-lueur .6s 1.95s ease-out forwards;
}
@keyframes sr-serrure-eclat { 40% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sr-serrure-lueur { 40% { opacity: .3; } 100% { opacity: 1; } }

/* « Passer l'intro » */
.sr-intro__passer {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  z-index: 3;
  height: var(--btn-skip);
  padding: 0 var(--sp-2);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--white);
  font: inherit;
  font-size: var(--fs-14);
  font-weight: 500;
  cursor: pointer;
  animation: sr-scene-sortie .3s 2.2s forwards;
}

/* Après « Passer l'intro » : fondu rapide (assets/js/intro.js) */
.sr-intro-on .sr-intro.sr-intro--fin {
  animation: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-menu-out) var(--ease-ui);
}

/* Téléphone : valeurs de l'export (Accueil-Mobile.html) */
@media (max-width: 767px) {
  .sr-intro {
    --intro-echelle: .6;
    --intro-serrure: 118px;
    --intro-serrure-x: -184px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sr-intro-on .sr-intro { display: none; }
}