/* =========================================================
   SLIDE 3 · WURUS = OR  (Acte II — 25 s) ⭐
   La slide magique. Deux lignes, rien d'autre. Tout ce qui
   n'est pas le mot doit disparaître de la conscience du jury.
   ========================================================= */

/* Fond sombre (cf. styles/dark.css). C'est le seul endroit du deck où le mot
   WURUS peut porter l'or de marque pur : 5,5:1 sur brun profond, contre
   2,7:1 sur crème. Le nom se lit enfin comme du métal. */
.slide-or {
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Le filigrane ne vit qu'en marges (.geo-wash--margins, cf. layout.css) :
   au centre, plus rien. */

/* La poussière monte du bas et se dissipe : sans ce dégradé, le champ
   couvre l'écran uniformément et se lit comme du bruit, pas comme de l'or. */
.slide-or .fx-canvas {
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.55) 42%, transparent 88%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.55) 42%, transparent 88%);
}

/* --- Halo : la respiration dorée derrière le mot --- */
.or__halo {
  position: absolute;
  top: 238px;
  left: 50%;
  z-index: 0;
  width: 1180px;
  height: 520px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(212, 162, 68, 0.30) 0%,
    rgba(184, 134, 43, 0.13) 46%,
    rgba(184, 134, 43, 0) 100%);
  filter: blur(6px);
  pointer-events: none;
  opacity: 0;
}
.or__halo.is-breathing {
  animation: wurus-halo 5.2s var(--ease-in-out) infinite;
}

@keyframes wurus-halo {
  0%, 100% { opacity: 0.72; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.045); }
}

@media (prefers-reduced-motion: reduce) {
  .or__halo.is-breathing { animation: none; opacity: 0.8; }
}

/* --- Le mot --- */
/* Le mot occupe la moitié haute, l'image la moitié basse. Le slide n'est
   plus centré sur un seul bloc : il se lit de haut en bas, comme la phrase
   « … de l'or entre les mains » se dit. */
.or__inner {
  position: absolute;
  z-index: 2;
  top: 126px;
  left: 0;
  right: 0;
  text-align: center;
}

/* Nasalization plutôt qu'Unbounded : ses lettres larges, fines et
   géométriques sont celles qui approchent le plus le mot-symbole du logo.
   Unbounded ExtraBold pesait trop pour un slide qui doit respirer, et
   écrasait l'image sous sa masse. */
.or__word {
  font-family: var(--font-label);
  font-weight: 400;
  font-size: 186px;
  line-height: 1;
  letter-spacing: 0.16em;

  /* Sur fond sombre, l'or de marque est lisible : couleur de repli #B8862B
     à 5,5:1. C'est le seul slide où le nom porte l'or exact de la charte. */
  color: var(--gold);
}

/* Chaque lettre est un bloc animable (cf. splitChars).
   Le dégradé est porté par la lettre, pas par le mot : `background-clip: text`
   ne peint que le texte de l'élément qui porte le fond, or le découpage en
   lettres déplace ce texte dans des enfants. Sur le mot, tout disparaissait. */
.or__word .char {
  display: inline-block;
  will-change: transform, opacity;
  background-image: linear-gradient(178deg, #E7BC63 0%, #D4A244 38%, #A97A22 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Le tracking ajoute une chasse après la dernière lettre, qui décentre le
   mot d'une trentaine de pixels. On la reprend. */
.or__word .char:last-child { margin-right: -0.16em; }

/* Repli explicite si background-clip: text n'est pas supporté :
   la couleur pleine reprend la main. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .or__word .char {
    background-image: none;
    -webkit-text-fill-color: currentColor;
  }
}

/* --- La traduction --- */
.or__gloss {
  margin-top: 26px;
  font-family: var(--font-intent);
  font-size: 46px;
  line-height: 1.2;
  color: var(--dark-ink);
  letter-spacing: 0.005em;
  opacity: 0;
}

/* ---------------------------------------------------------
   L'or entre les mains
   Photo détourée (scripts/tools/cutout-gold-hands.py). Le détourage
   laisse quelques bords sombres semi-transparents : invisibles ici,
   ils se fondent dans le brun profond. C'est pourquoi ce visuel ne
   fonctionne que sur un slide sombre.
   --------------------------------------------------------- */

.or__hands {
  position: absolute;
  z-index: 1;               /* sous le texte, qui est en z-index 2 */
  bottom: -64px;
  width: 880px;
  margin: 0;
  /* Centrage par `left` et non par `translateX(-50%)` : GSAP pilote
     `transform` pour le suivi du curseur et écrasait le centrage, ce qui
     envoyait l'image se coller à droite. Le transform ne porte donc plus
     que le décalage, à partir de zéro. */
  left: calc(50% - 440px);
  /* Propriétés autonomes "rotate" et "translate", et non "transform" :
     GSAP pilote "transform" pour l'entrée et le suivi du curseur. Les trois
     se composent au lieu de s'écraser, ce qui laisse le balancement tourner
     pendant que les mains suivent le pointeur. */
  rotate: 5deg;
  pointer-events: none;
}

/* --- Le balancement ---
   Deux oscillations de périodes différentes et premières entre elles :
   l'inclinaison sur 7,4 s, la flottaison sur 9,6 s. Elles ne se
   resynchronisent qu'au bout de plusieurs minutes, donc le mouvement ne
   se lit jamais comme une boucle. Amplitudes minuscules — une main qui
   tient de l'or ne se balance pas, elle respire. */
.or__hands.is-swinging {
  animation:
    wurus-hands-swing 7.4s var(--ease-in-out) infinite,
    wurus-hands-float 9.6s var(--ease-in-out) infinite;
}

@keyframes wurus-hands-swing {
  0%, 100% { rotate: 4.1deg; }
  50%      { rotate: 6.1deg; }
}

@keyframes wurus-hands-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}

@media (prefers-reduced-motion: reduce) {
  .or__hands.is-swinging { animation: none; }
}

.or__hands img {
  display: block;
  width: 100%;
  height: auto;
  /* Réchauffe la photo vers l'or de la charte et remonte un peu les noirs,
     sinon les mains se perdent dans le fond. */
  filter: saturate(1.12) contrast(1.04) brightness(1.06);
  /* Les doigts sont coupés par le cadre de la photo d'origine. Plutôt que
     de les escamoter derrière un fondu court — qui se lisait comme une
     coupe nette —, on les laisse monter et se dissoudre lentement sur la
     moitié haute de l'image : ils passent derrière le texte au lieu de
     s'arrêter devant lui. Les tranches gauche et droite gardent un fondu
     court : là, c'est bien un bord de cadre à effacer. */
  -webkit-mask-image:
    linear-gradient(to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.22) 15%,
      rgba(0, 0, 0, 0.62) 32%,
      rgba(0, 0, 0, 0.90) 44%,
      #000 56%),
    linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.22) 15%,
      rgba(0, 0, 0, 0.62) 32%,
      rgba(0, 0, 0, 0.90) 44%,
      #000 56%),
    linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-composite: intersect;
}

/* Lueur derrière les pépites — elles doivent être le point le plus
   lumineux du slide, davantage que le mot. */
.or__hands-glow {
  position: absolute;
  z-index: -1;
  top: 32%;
  left: 54%;
  width: 460px;
  height: 460px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(255, 216, 130, 0.26) 0%,
    rgba(212, 162, 68, 0.12) 44%,
    rgba(184, 134, 43, 0) 100%);
  opacity: 0;
}
.or__hands-glow.is-breathing {
  animation: wurus-nugget 4.4s var(--ease-in-out) infinite;
}

@keyframes wurus-nugget {
  0%, 100% { opacity: 0.7;  transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .or__hands-glow.is-breathing { animation: none; opacity: 0.85; }
}

/* --- Crédit de la photo ---
   Il doit être là — la source porte la mention — mais il n'a rien à
   revendiquer. Posé sur un doigt de la main gauche, incliné dans son axe,
   à la limite de la lisibilité : on le trouve si on le cherche, on ne le
   voit pas si on écoute. */
.or__credit {
  position: absolute;
  left: 84%;
  bottom: 58%;
  rotate: -38deg;
  transform-origin: left center;
  font-family: var(--font-body);
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: rgba(255, 236, 200, 0.5);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}