/* ==========================================================================================
   ringraziamenti.css — /ringraziamenti/ (agente storia): titoli di testa e titoli di coda.
   Centrati, ruoli in mono, nomi in grottesco, su nero con un bagliore viola.
   ========================================================================================== */

.rg-luce { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.rg-luce i { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.rg-luce i:nth-child(1) {
  width: min(120vw, 1300px); aspect-ratio: 1.4;
  background: radial-gradient(closest-side, rgba(105, 49, 170, .42), rgba(65, 37, 108, .16) 55%, rgba(65, 37, 108, 0));
  animation: rg-respira 18s ease-in-out infinite alternate;
}
.rg-luce i:nth-child(2) {
  top: 100%; width: 160vw; height: 60vw;
  background: radial-gradient(closest-side, rgba(35, 20, 61, .9), rgba(35, 20, 61, 0));
}
@keyframes rg-respira { to { transform: translate(-50%, -50%) scale(1.14); opacity: .8; } }

/* ================================================================ TITOLI DI TESTA ====== */
.rg-testa {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: grid; align-content: center; justify-items: center; gap: clamp(22px, 4vh, 40px);
  padding: calc(var(--testata-h) + 40px) var(--margine) calc(var(--hud-h) + 56px);
  text-align: center;
}
.rg-testa__titolo { max-width: 100%; }
.rg-testa__intro { max-width: 44ch; color: var(--carta-2); }
.rg-testa__giu { display: inline-flex; gap: 10px; align-items: center; color: var(--carta-3); margin-top: 2vh; }
.rg-testa__giu .freccia { animation: rg-giu 2.4s var(--curva-expo) infinite; }
@keyframes rg-giu { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }

/* ================================================================ TITOLI DI CODA ======= */
.rg-coda { position: relative; isolation: isolate; }
.rg-schermo { position: relative; padding: clamp(64px, 12vh, 140px) var(--margine) clamp(96px, 16vh, 180px); }
.rg-luce--coda i:nth-child(1) { top: 50%; }
.rg-rullo { position: relative; display: grid; justify-items: center; text-align: center; }
.rg-sezione { color: var(--carta-3); letter-spacing: .28em; margin-bottom: clamp(72px, 18vh, 200px); }
.rg-titoli { display: grid; gap: clamp(96px, 22vh, 260px); justify-items: center; }
.rg-titolo { display: grid; justify-items: center; gap: 18px; max-width: 100%; }
.rg-ruolo { color: var(--carta-3); letter-spacing: .24em; }
.rg-nomi {
  display: grid; justify-items: center; gap: .06em;
  font: var(--peso-display) clamp(38px, 6.4vw, 104px)/.92 var(--font-display);
  letter-spacing: -.035em; text-transform: uppercase; color: var(--carta);
  max-width: 100%; overflow-wrap: anywhere;
}
.rg-frase { max-width: 42ch; margin-top: 10px; font-size: clamp(18px, 1.5vw, 23px); line-height: 1.45; color: var(--carta-2); text-wrap: balance; }
.rg-fine { display: grid; justify-items: center; gap: 16px; margin-top: clamp(120px, 26vh, 300px); }
.rg-fine__nome { font: var(--peso-display) clamp(30px, 3.6vw, 56px)/1 var(--font-display); letter-spacing: -.03em; text-transform: uppercase; }
.rg-fine__dove { color: var(--carta-3); }
.rg-fine__azioni { margin-top: 10px; }

/* il rullo in pin (ringraziamenti.js, ≥ 820 px, senza movimento ridotto): lo schermo è alto una finestra,
   il rullo sale più lento dello scroll e sfuma in alto e in basso come sotto una lente */
.rg-coda.is-rullo .rg-schermo {
  height: 100svh; padding: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}
.rg-coda.is-rullo .rg-luce { -webkit-mask-image: none; }
.rg-coda.is-rullo .rg-rullo { position: absolute; left: var(--margine); right: var(--margine); top: 0; will-change: transform; }

html.ridotto .rg-luce i, html.ridotto .rg-testa__giu .freccia { animation: none; }