/* MP Rezeau — vue eclatee au defilement. Tout est porte par .mpr-eclate.
 *
 * Le bloc est DETOURE : le canevas WebGL est rendu en alpha et le bloc n'a
 * aucun fond propre. C'est la section qui l'accueille qui donne le fond, et
 * l'on peut poser ce que l'on veut par-dessus.
 *
 * Deux reglages, poses par le code court :
 *   --mpr3d-fond   fond du bloc            (defaut : transparent)
 *   data-texte     « clair » ou « sombre » (defaut : clair)
 * La polarite du texte se choisit separement du fond : un fond transparent
 * sur une section claire demande data-texte="sombre".
 */
.mpr-eclate{
  --mpr3d-encre:#E8E4DF;
  --mpr3d-sourd:#8A8580;
  --mpr3d-cuivre:#C88A62;
  --mpr3d-cuivre-clair:#E3AC80;
  --mpr3d-trait:#242428;
  --mpr3d-voile:11,11,12;
  --mpr3d-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  position:relative;height:var(--mpr3d-h,540vh);margin:0 0 64px;
  background:var(--mpr3d-fond,transparent);color:var(--mpr3d-encre)}

.mpr-eclate[data-texte="sombre"]{
  --mpr3d-encre:#151515;
  --mpr3d-sourd:#6B6660;
  --mpr3d-cuivre:#A96B44;
  --mpr3d-cuivre-clair:#8E5730;
  --mpr3d-trait:#DAD5CD;
  --mpr3d-voile:255,255,255}

.mpr-eclate .mpr3d-collant{position:sticky;top:0;height:100vh;overflow:hidden}
/* pendant le texte d'ouverture, la piece descend pour lui laisser le haut
   du cadre, puis remonte a sa place quand le texte s'efface */
.mpr-eclate .mpr3d-scene{position:absolute;inset:0;
  transform:translateY(var(--mpr3d-dy,0px));will-change:transform}
.mpr-eclate .mpr3d-scene canvas{display:block;width:100%;height:100%;background:transparent}
.mpr-eclate .mpr3d-traits{position:absolute;inset:0;pointer-events:none}
/* le trait de rappel est pose en attribut par le pilote : la feuille prime,
   donc la polarite du texte l'emporte sans toucher au JavaScript */
.mpr-eclate .mpr3d-traits path{stroke:var(--mpr3d-cuivre)}
.mpr-eclate .mpr3d-traits circle{fill:var(--mpr3d-cuivre-clair)}
.mpr-eclate .mpr3d-photo{position:absolute;pointer-events:none;opacity:0;max-width:none;
  transform:translateY(var(--mpr3d-dy,0px));will-change:opacity,transform}
/* --- texte d'ouverture ------------------------------------------------ *
 * Pose dans le cadre collant, sous la piece. Les mots sont eclaircis un a un
 * au fil du defilement par le pilote : la feuille ne fixe que l'etat eteint,
 * pour qu'un navigateur sans JavaScript affiche un texte lisible plutot que
 * rien du tout. */
/* centre par les marges, et non par une transformation : le pilote se sert
   de « transform » pour la sortie, il ne doit pas avoir a la reconstituer */
.mpr-eclate .mpr3d-intro{position:absolute;left:0;right:0;top:6%;margin:0 auto;
  width:min(880px,84vw);text-align:center;pointer-events:none;
  will-change:opacity,transform}
.mpr-eclate .mpr3d-intro i{display:block;font-style:normal;font-family:var(--mpr3d-mono);
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mpr3d-cuivre);margin-bottom:14px}
/* le titre vit dans le cadre, avec la piece : le theme impose ses propres
   marges et couleurs aux h2, on les reprend explicitement */
.mpr-eclate .mpr3d-intro-t{margin:0 0 16px !important;padding:0 !important;
  font-size:clamp(22px,2vw,34px) !important;font-weight:400 !important;line-height:1.22 !important;
  letter-spacing:-.01em;color:var(--mpr3d-cuivre) !important;text-transform:none !important}
.mpr-eclate .mpr3d-intro-txt{margin:0;font-size:clamp(16px,1.22vw,21px);line-height:1.6;
  letter-spacing:-.005em;color:var(--mpr3d-encre)}
.mpr-eclate .mpr3d-intro-txt + .mpr3d-intro-txt{margin-top:14px}
.mpr-eclate .mpr3d-intro-txt span{opacity:.16;will-change:opacity}

.mpr-eclate .mpr3d-charge{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mpr3d-mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mpr3d-sourd);transition:opacity .5s}

.mpr-eclate .mpr3d-etiq{position:absolute;left:0;top:0;width:250px;padding:0 0 0 2px;
  transform:translateY(-50%);opacity:0;transition:opacity .5s ease}
.mpr-eclate .mpr3d-etiq.vue{opacity:1}
.mpr-eclate .mpr3d-etiq b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em;
  line-height:1.25;color:var(--mpr3d-encre)}
.mpr-eclate .mpr3d-etiq i{display:block;font-style:normal;font-family:var(--mpr3d-mono);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mpr3d-cuivre);margin-bottom:5px}
.mpr-eclate .mpr3d-etiq p{margin:5px 0 0;font-size:12.5px;line-height:1.5;color:var(--mpr3d-sourd)}

.mpr-eclate .mpr3d-phase{position:absolute;right:66px;bottom:44px;text-align:right;
  pointer-events:none;opacity:0;transition:opacity .45s}
.mpr-eclate .mpr3d-phase.vue{opacity:1}
.mpr-eclate .mpr3d-phase span{font-family:var(--mpr3d-mono);font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mpr3d-sourd)}

.mpr-eclate .mpr3d-regle{position:absolute;right:32px;top:50%;transform:translateY(-50%);
  width:34px;height:min(46vh,360px)}
.mpr-eclate .mpr3d-curseur{position:absolute;right:0;width:34px;height:1.5px;display:block;
  background:var(--mpr3d-cuivre-clair);box-shadow:0 0 10px rgba(227,172,128,.7);transition:top .12s linear}
.mpr-eclate[data-texte="sombre"] .mpr3d-curseur{box-shadow:none}
.mpr-eclate .mpr3d-regle b{position:absolute;right:44px;font-family:var(--mpr3d-mono);
  font-size:10px;color:var(--mpr3d-cuivre-clair);font-variant-numeric:tabular-nums;
  transform:translateY(-50%);transition:top .12s linear;white-space:nowrap}

.mpr-eclate .mpr3d-commande{position:absolute;left:66px;bottom:40px;display:flex;align-items:center;
  gap:14px;background:rgba(var(--mpr3d-voile),.72);border:1px solid var(--mpr3d-trait);padding:10px 18px;
  backdrop-filter:blur(8px)}
.mpr-eclate .mpr3d-commande label{font-family:var(--mpr3d-mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mpr3d-sourd);margin:0}
.mpr-eclate .mpr3d-commande input[type=range]{width:190px;accent-color:var(--mpr3d-cuivre);margin:0}

@media (max-width:820px){
  .mpr-eclate{height:var(--mpr3d-hm,470vh)}
  .mpr-eclate .mpr3d-phase{right:20px;left:auto;bottom:96px}
  .mpr-eclate .mpr3d-commande{left:50%;transform:translateX(-50%);bottom:26px}
  .mpr-eclate .mpr3d-regle{display:none}
  /* sur mobile la legende passe sous la piece : un degrade la detache du fond,
     dans la teinte du fond justement, pour rester invisible en tant que tel */
  .mpr-eclate .mpr3d-etiq{width:auto !important;left:16px !important;right:16px !important;
    top:auto !important;bottom:118px;transform:none !important;text-align:center;
    background:linear-gradient(to top,rgba(var(--mpr3d-voile),.92) 55%,rgba(var(--mpr3d-voile),0));
    padding:14px 8px 6px}
  .mpr-eclate .mpr3d-intro{top:5%;width:88vw}
  .mpr-eclate .mpr3d-intro i{margin-bottom:10px}
  .mpr-eclate .mpr3d-intro-t{font-size:20px !important;margin-bottom:12px !important}
  .mpr-eclate .mpr3d-intro-txt{font-size:15px;line-height:1.55}
  .mpr-eclate .mpr3d-etiq b{font-size:15px}
  .mpr-eclate .mpr3d-etiq i{margin-bottom:3px}
  .mpr-eclate .mpr3d-etiq p{font-size:12.5px;margin-top:3px}
}

/* sans la reglette de relecture, les mentions reprennent le bas du cadre */
.mpr-eclate.mpr3d-nu .mpr3d-phase{bottom:34px}
@media (max-width:820px){
  .mpr-eclate.mpr3d-nu .mpr3d-etiq{bottom:52px}
  .mpr-eclate.mpr3d-nu .mpr3d-phase{bottom:22px}
}

/* afficheur de mesures, actif seulement sur ?mpr3d=diag */
.mpr-eclate .mpr3d-diag{position:absolute;left:14px;top:14px;z-index:9;
  font-family:var(--mpr3d-mono);font-size:11px;line-height:1.65;white-space:pre;
  color:#7CE0A6;background:rgba(0,0,0,.72);border:1px solid rgba(124,224,166,.35);
  padding:10px 14px;pointer-events:none}