/* ==========================================================================
   Studio LR — logo animé (repris de Studio-LR-Logo/style.css, sections 1 et 2)
   ========================================================================== */

/* ==========================================================================
   1. RÉGLAGES DU LOGO
   Les longueurs « px » appliquées au logo sont en unités du dessin
   (le logo mesure 1280 × 1090 unités, quelle que soit sa taille à l'écran).
   ========================================================================== */
.lr-logo {
  --lr-line-color: #ff7a2e;        /* couleur du tracé lumineux (phases 1 et 2) */
  --lr-line-width: 3.5px;          /* épaisseur de ce tracé */

  --lr-hover-shift: 14px;          /* écartement des chevrons < > au survol */
  --lr-hover-brightness: 1.06;     /* luminosité au survol (1 = inchangée) */
  --lr-hover-in: 380ms;            /* durée d'arrivée de l'état survolé */
  --lr-hover-out: 520ms;           /* durée du retour au repos */

  --lr-ease-out: cubic-bezier(.22, 1, .36, 1);
}


/* ==========================================================================
   2. LOGO ANIMÉ
   ========================================================================== */
.lr-logo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1280 / 1090;       /* le viewBox garde les proportions à toute taille */
  filter: brightness(1);
  transition: filter var(--lr-hover-out) ease;
  -webkit-tap-highlight-color: transparent;
}

/* Tracés lumineux : invisibles au repos, dessinés par script.js.
   pathLength="1" (dans le SVG) permet d'animer stroke-dashoffset de 1 à 0
   sans avoir à mesurer la longueur de chaque tracé. */
.lr-logo .lr-line {
  fill: none;
  stroke: var(--lr-line-color);
  stroke-width: var(--lr-line-width);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  opacity: 0;
}

/* Lumières d'animation : invisibles au repos */
.lr-logo .lr-spark,
.lr-logo .lr-spot,
.lr-logo .lr-sheen,
.lr-logo .lr-flash { opacity: 0; }

/* Origines des transformations (unités du dessin, boîte de l'élément) */
.lr-logo .lr-build-stem { transform-box: fill-box; transform-origin: 50% 100%; }  /* le fût monte   */
.lr-logo .lr-build-foot { transform-box: fill-box; transform-origin: 0% 50%; }    /* le pied s'étire */
.lr-logo .lr-build-r    { transform-box: fill-box; transform-origin: 0% 50%; }    /* le R part du L  */
.lr-logo .lr-bracket    { transform-box: fill-box; transform-origin: 50% 50%; }

/* --- États posés par script.js dans data-lr-state ----------------------- */

/* « pending » : le script n'a pas encore démarré. Filet de sécurité :
   si JavaScript est désactivé, le logo apparaît quand même après 2,5 s. */
.lr-logo[data-lr-state="pending"] .lr-root {
  opacity: 0;
  animation: lr-safety-reveal .6s ease 2.5s forwards;
}
@keyframes lr-safety-reveal { to { opacity: 1; } }

/* « waiting » : prêt à jouer, en attente d'être visible à l'écran */
.lr-logo[data-lr-state="waiting"] .lr-root { opacity: 0; }

/* Hors intro, les éléments de construction disparaissent :
   le rendu est alors exactement celui du logo statique. */
.lr-logo:not([data-lr-state="intro"]) .lr-cover { display: none; }
.lr-logo:not([data-lr-state="intro"]) .lr-build { clip-path: none; }

/* --- Survol -------------------------------------------------------------
   La classe .is-hover est posée par script.js (souris, stylet ou focus
   clavier ; jamais au toucher, pour éviter un survol « collé » sur mobile). */
.lr-logo .lr-bracket__shift {
  transition: transform var(--lr-hover-out) var(--lr-ease-out);
}
.lr-logo.is-hover {
  filter: brightness(var(--lr-hover-brightness));
  transition-duration: var(--lr-hover-in);
}
.lr-logo.is-hover .lr-bracket--left .lr-bracket__shift {
  transform: translateX(calc(var(--lr-hover-shift) * -1));
  transition-duration: var(--lr-hover-in);
}
.lr-logo.is-hover .lr-bracket--right .lr-bracket__shift {
  transform: translateX(var(--lr-hover-shift));
  transition-duration: var(--lr-hover-in);
}

/* --- « Réduire les animations » : aucun déplacement, seulement la lumière */
.lr-logo.is-reduced .lr-bracket__shift {
  transform: none !important;
  transition: none;
}