/* L'ancien titre « YANN2012 » est remplacé par le nom laser : masqué DÈS le premier affichage (sinon il apparaît
   une fraction de seconde au chargement, le temps que nom.js s'exécute). Gardé si « réduire les animations ». */
@media (prefers-reduced-motion: no-preference) { .titre { display: none; } }
/* Police du nom (Sarpanch, licence OFL) hébergée sur le site : aucun appel à un service tiers */
@font-face { font-family: Sarpanch; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/sarpanch-500.woff2) format('woff2'); }
@font-face { font-family: Sarpanch; font-style: normal; font-weight: 900; font-display: swap; src: url(fonts/sarpanch-900.woff2) format('woff2'); }
/* ESSAI TEMPORAIRE — série 3 du nom animé (essai-nom3.js). --q construction, --sortie effacement. */
.essai-nom .titre { display: none; }        /* l'ancien titre « YANN2012 » est remplacé par le nom animé */
.nom3 { position: absolute; z-index: 2; pointer-events: none; left: clamp(16px, 5vw, 72px); bottom: clamp(90px, 14vh, 150px);
  opacity: var(--sortie, 1); }
@media (max-width: 820px) { .nom3 { bottom: auto; top: 14vh; } }

/* F · nom-écran : un canevas plein écran par-dessus le film (le terminal reste au-dessus) */
.nom3.nF { inset: 0; left: 0; bottom: 0; top: 0; opacity: 1; }
.nom3.nF canvas { display: block; width: 100%; height: 100%; }
.nom3.nF ~ .terminal { z-index: 4; }
@media (max-width: 820px) { .nom3.nF { top: 0; } }

/* sélecteur de police (F et K), au-dessus du sélecteur de concept */
.essai-choix.essai-police { bottom: 64px; }

/* G · extrusion (Nabla, couleurs de la police remplacées par une palette rouge / acier / cyan) */
@font-palette-values --y12 { font-family: Nabla; base-palette: 0;
  override-colors: 0 #2a0308, 1 #ff2a40, 2 #c40f25, 3 #7a0614, 4 #ff6b78, 5 #4a030c, 6 #e8edf2, 7 #43deff, 8 #9aa3ad, 9 #ffffff; }
.nom3.nG .mot { display: inline-block; font-family: Nabla, sans-serif; font-palette: --y12; font-size: clamp(54px, 10vw, 150px); line-height: 1;
  transform-origin: 0 100%; }

/* H · balayage CRT (Sixtyfour) */
.nom3.nH .mot { position: relative; display: inline-block; white-space: nowrap; line-height: 1; font-family: Sixtyfour, monospace;
  font-size: clamp(38px, 6.6vw, 96px); letter-spacing: -.02em; color: #bff4ff; }
.nom3.nH b { font-weight: inherit; color: #ff2a40; }
.nom3.nH .base { opacity: calc(1 - var(--g, 0) * .85); }
.nom3.nH .tranche { position: absolute; inset: 0; color: #43deff; mix-blend-mode: screen;
  clip-path: inset(calc(var(--i) * 100% / var(--n)) 0 calc((var(--n) - var(--i) - 1) * 100% / var(--n)) 0); }
.nom3.nH .tranche:nth-child(odd) { color: #ff2a40; }

/* I · hologramme (Tilt Warp plein rouge + Tilt Prism cyan décalé) */
.nom3.nI .mot { position: relative; display: inline-block; white-space: nowrap; line-height: 1; font-size: clamp(50px, 9.5vw, 140px); }
.nom3.nI .l { display: inline-block; }
.nom3.nI .warp { font-family: "Tilt Warp", sans-serif; color: #ff2a40; }
.nom3.nI .prisme { position: absolute; left: 0; top: 0; font-family: "Tilt Prism", sans-serif; color: #43deff; mix-blend-mode: screen;
  translate: var(--dx, 0) calc(var(--dx, 0) * -.5); }

/* J · découpe laser (Panchang) : fantôme du tracé, métal rouge découpé, bord chauffé à blanc, laser, étincelles */
.nom3.nJ .mot { position: relative; display: inline-block; white-space: nowrap; line-height: 1; padding: .05em 0;
  font-family: Panchang, sans-serif; font-weight: 800; font-size: clamp(36px, 6.4vw, 92px); letter-spacing: -.01em; }
.nom3.nJ .fantome { color: transparent; -webkit-text-stroke: 1px rgba(67,222,255,.45); }
.nom3.nJ .metal, .nom3.nJ .chaud { position: absolute; inset: 0; padding: inherit; }
.nom3.nJ .metal { color: #e3122c; clip-path: inset(0 calc(100% - var(--x, 0%)) 0 0); }
.nom3.nJ .chaud { color: #fff2c8; clip-path: inset(0 calc(100% - var(--x, 0%)) 0 calc(var(--x, 0%) - 9%));
  -webkit-mask-image: linear-gradient(to right, transparent calc(var(--x, 0%) - 9%), #000 var(--x, 0%)); mask-image: linear-gradient(to right, transparent calc(var(--x, 0%) - 9%), #000 var(--x, 0%)); }
.nom3.nJ .laser { position: absolute; top: -.25em; bottom: -.25em; left: var(--x, 0%); width: 2px; translate: -1px 0; opacity: var(--laser, 0);
  background: #fff; box-shadow: 0 0 8px 2px #ff4a5c, 0 0 22px 6px rgba(255,42,64,.55); }
.nom3.nJ .etincelles { position: absolute; left: -100px; top: -100px; pointer-events: none; }

/* F et K : le terminal (et son voile) se cache tant que l'écran est noir (--noir-nom posé par essai-nom3.js) */
.nom3.nF ~ .terminal, .nom3.nF ~ .terminal-fond { opacity: calc((1 - var(--zoom, 0) * 3) * (1 - var(--noir-nom, 0))); }

/* Rideau noir au chargement (F / K) : posé avant tout dessin, retiré quand le nom géant est dessiné */
html.intro-noire .scene::before { content: ""; position: absolute; inset: 0; z-index: 3; background: #07070a; }
html.intro-noire .terminal, html.intro-noire .terminal-fond { opacity: 0; }

/* F / K : invitation à défiler sous le nom géant — version raffinée : un faisceau d'un pixel balaie lentement la
   phrase, les lettres s'éclaircissent doucement à son passage, et son point d'impact glisse sur un fin rail lumineux.
   --x : position du faisceau (propriété enregistrée pour pouvoir être animée). */
@property --x { syntax: "<percentage>"; inherits: true; initial-value: -6%; }
.nom3.nF .invite { position: absolute; left: 50%; top: var(--invite-y, 70%); translate: -50% 0; opacity: var(--invite, 0); pointer-events: none;
  animation: balaye-phrase 5.2s cubic-bezier(.6,0,.4,1) infinite; }   /* --x animé ici, hérité par la phrase et ses reflets */
.nom3.nF .invite span { position: relative; display: inline-block; padding: 4px 2px 12px; white-space: nowrap;
  font: 500 clamp(16px, 1.45vw, 19px)/1.2 Sarpanch, system-ui, sans-serif; letter-spacing: .06em; color: rgba(196,230,244,.72); }
/* les lettres qui s'éclaircissent au passage */
.nom3.nF .invite span::before { content: attr(data-t); position: absolute; inset: 0; padding: inherit; color: transparent;
  background: linear-gradient(90deg, transparent calc(var(--x) - 14%), rgba(255,140,150,.55) calc(var(--x) - 5%), rgba(255,246,236,.95) calc(var(--x) - .5%), transparent var(--x));
  -webkit-background-clip: text; background-clip: text; }
/* le faisceau (1 px) */
.nom3.nF .invite span::after { content: ""; position: absolute; top: 0; bottom: 8px; left: var(--x); width: 1px;
  background: linear-gradient(rgba(255,255,255,0), #fff 35%, #fff 80%, #ff4a5c);
  box-shadow: 0 0 5px rgba(255,58,80,.85), 0 0 12px rgba(255,42,64,.35);
  opacity: calc(min(1, (var(--x) + 6%) / 6%) * min(1, (106% - var(--x)) / 6%)); }
/* le rail sous la phrase, et le point d'impact qui glisse dessus */
.nom3.nF .invite::before { content: ""; position: absolute; left: 2px; right: 2px; bottom: 7px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(67,222,255,.28) 12%, rgba(67,222,255,.28) 88%, transparent); }
.nom3.nF .invite::after { content: ""; position: absolute; bottom: 5px; left: var(--x); width: 5px; height: 5px; translate: -2px 0; border-radius: 50%;
  background: #fff; box-shadow: 0 0 6px 2px rgba(255,58,80,.8); opacity: calc(min(1, (var(--x) + 6%) / 6%) * min(1, (106% - var(--x)) / 6%)); }
@keyframes balaye-phrase { 0% { --x: -6%; } 70%, 100% { --x: 106%; } }
@media (prefers-reduced-motion: reduce) { .nom3.nF .invite { animation: none; } }

/* sélecteur du prologue (essai) */
.essai-choix.essai-intro { bottom: 116px; }