/* ==========================================================================
   INTRO — sequenza d'ingresso in stile anime (Blue Lock)
   --------------------------------------------------------------------------
   ATTENZIONE: file scritto a mano, NON generato da Tailwind.
   Vive accanto a main.css (che invece è il prodotto di `npm run build:css`)
   perché l'intro è un blocco isolato: si carica solo dove serve e non deve
   entrare nel bundle di ogni pagina finché la valutazione non è chiusa.

   Principi ereditati dal sistema visivo:
   1. Un solo accento (blu elettrico). Nessun'altra famiglia cromatica.
   2. Angoli tagliati, mai arrotondati.
   3. I numeri sono protagonisti.
   4. Contrasto alto, asimmetria, elementi che escono dal frame.

   Regola tecnica: si animano solo `transform`, `opacity` e `clip-path`.
   Nessuna proprietà che forzi il layout, altrimenti sui telefoni la
   sequenza perde fotogrammi proprio nei momenti d'urto.
   ========================================================================== */

.bli {
  --bli-void: #04070C;
  --bli-steel: #0E141D;
  --bli-line: #1B2531;
  --bli-edge: #2A3646;
  --bli-mute: #5C6B7E;
  --bli-chalk: #C6D2E0;
  --bli-blue: #00A8FF;
  --bli-glow: #4DD8FF;
  --bli-deep: #0057B8;
  --bli-gold: #FFC53D;

  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: var(--bli-void);
  color: #fff;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  /* `isolation` tiene i blend mode (aberrazione cromatica, grana) dentro
     l'overlay: senza, sanguinerebbero sul sito già montato dietro. */
  isolation: isolate;
  contain: strict;
}

/* Il palcoscenico è ciò che trema: lo scuotimento di camera si applica qui,
   non alla radice, così le bande e i comandi restano fermi. */
.bli-stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.bli-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* --- Fondo: nero freddo con la luce che sale da terra -------------------- */
.bli-bg {
  background:
    radial-gradient(80% 55% at 50% 100%, rgba(0, 87, 184, 0.38) 0%, transparent 70%),
    radial-gradient(60% 45% at 50% 40%, rgba(0, 168, 255, 0.10) 0%, transparent 70%),
    var(--bli-void);
}

/* Alone che pulsa a ogni battito: separato dal fondo per poterlo animare
   senza ridipingere i gradienti pesanti. */
.bli-pulse {
  background: radial-gradient(50% 40% at 50% 50%, rgba(0, 168, 255, 0.30) 0%, transparent 70%);
  opacity: 0;
}

/* --- Pavimento in prospettiva: la struttura del Blue Lock ---------------- */
.bli-grid {
  perspective: 520px;
  perspective-origin: 50% 38%;
  overflow: hidden;
  opacity: 0;
}

.bli-grid-plane {
  position: absolute;
  left: -60%;
  right: -60%;
  top: 34%;
  height: 260%;
  transform-origin: 50% 0%;
  transform: rotateX(76deg) translateY(0);
  will-change: transform;
  background-image:
    linear-gradient(rgba(0, 168, 255, 0.42) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 168, 255, 0.22) 1px, transparent 1px);
  background-size: 88px 88px;
  /* La griglia deve sfumare all'orizzonte, altrimenti si legge come una
     texture piatta invece che come uno spazio. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 55%, transparent 92%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 55%, transparent 92%);
}

/* Orizzonte: la riga di luce che chiude la prospettiva */
.bli-horizon {
  position: absolute;
  left: 0;
  right: 0;
  top: 34%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bli-glow), transparent);
  box-shadow: 0 0 24px 2px rgba(0, 168, 255, 0.55);
  transform: scaleX(0);
  transform-origin: 50% 50%;
}

/* --- Linee di velocità: la firma dell'animazione giapponese -------------- */
.bli-speed {
  opacity: 0;
}

.bli-speed svg {
  position: absolute;
  inset: -25%;
  width: 150%;
  height: 150%;
}

.bli-speed line {
  stroke: #fff;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

/* --- Occhio: il fotogramma della consapevolezza --------------------------
   Il disegno vive in `includes/intro_eye.html`. Qui solo la messa in scena.
   Nota sulle proporzioni: l'iride occupa quasi tutta l'apertura. È la scelta
   che separa il disegno animato dall'illustrazione realistica — un occhio con
   molta sclera e poca iride legge come una fotografia, non come un
   fotogramma. */
.bli-eye {
  display: grid;
  place-items: center;
  opacity: 0;
}

.bli-eye-svg {
  width: min(74vw, 62vh);
  height: auto;
  overflow: visible;
}

/* Fibre dell'iride: sottili, irregolari, mai equidistanti */
.bli-iris-shard {
  stroke: rgba(190, 240, 255, 0.55);
  stroke-width: 1.4;
  stroke-linecap: round;
  fill: none;
}

/* Campo dentro l'iride: linee sottili, alta luminosità, nessun riempimento */
.bli-eye-pitch {
  opacity: 0;
}

.bli-eye-pitch rect,
.bli-eye-pitch line,
.bli-eye-pitch circle {
  fill: none;
  stroke: #DFF7FF;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  opacity: 0.85;
}

.bli-eye-vectors line {
  stroke: #FFFFFF;
  stroke-width: 1.8;
  stroke-dasharray: 4 3;
}

.bli-eye-dots circle {
  fill: #DFF7FF;
  stroke: none;
  opacity: 1;
}

.bli-eye-dots .bli-eye-dot-key {
  fill: var(--bli-gold);
}

/* Bagliore che attraversa l'occhio: acceso una volta sola, all'urto */
.bli-eye-flare {
  opacity: 0;
}

/* --- Fotogramma d'urto: l'inversione a piena pagina ---------------------- */
.bli-impact {
  background: #fff;
  opacity: 0;
  display: grid;
  place-items: center;
  mix-blend-mode: difference;
}

/* --- Tipografia cinetica ------------------------------------------------- */
.bli-words {
  display: grid;
  place-items: center;
}

.bli-word {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  white-space: nowrap;
}

.bli-word-text {
  font-family: 'Anton', 'Archivo', sans-serif;
  font-size: clamp(3.2rem, 15vw, 12rem);
  line-height: 0.8;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 60px rgba(0, 168, 255, 0.45);
}

.bli-word-text.is-hollow {
  color: transparent;
  -webkit-text-stroke: 2px var(--bli-blue);
}

/* Lastra nera tagliata che accompagna la parola: dà peso all'urto */
.bli-word-slab {
  position: absolute;
  left: -6vw;
  right: -6vw;
  top: -0.18em;
  bottom: -0.18em;
  z-index: -1;
  background: var(--bli-void);
  box-shadow: 0 0 0 1px var(--bli-line), 0 30px 80px -20px #000;
  clip-path: polygon(3vw 0, 100% 0, calc(100% - 3vw) 100%, 0 100%);
  transform: scaleX(0);
  transform-origin: 0% 50%;
}

/* --- Tabellone della classifica ------------------------------------------
   Griglia di celle numerate che sfila in profondità. Alcune sono barrate:
   in una lega dove entrano tutti e ne resta uno, l'eliminazione va vista. */
.bli-board {
  display: grid;
  place-items: center;
  perspective: 900px;
  opacity: 0;
}

.bli-board-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  width: 150%;
  max-width: 1500px;
  transform-style: preserve-3d;
  will-change: transform;
}

.bli-cell {
  position: relative;
  aspect-ratio: 8 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Anton', 'Archivo', sans-serif;
  font-size: clamp(0.9rem, 2.1vw, 2rem);
  line-height: 1;
  color: var(--bli-edge);
  background: rgba(14, 20, 29, 0.86);
  box-shadow: inset 0 0 0 1px var(--bli-line);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

.bli-cell-out {
  color: rgba(255, 45, 63, 0.85);
  box-shadow: inset 0 0 0 1px rgba(255, 45, 63, 0.4);
}

/* Sbarra dell'eliminazione */
.bli-cell-out::after {
  content: '';
  position: absolute;
  left: -6%;
  right: -6%;
  top: 50%;
  height: 2px;
  background: var(--bli-blood);
  transform: rotate(-14deg);
  box-shadow: 0 0 10px rgba(255, 45, 63, 0.8);
}

.bli-cell-lead {
  color: var(--bli-void);
  background: var(--bli-blue);
  box-shadow: 0 0 30px -4px rgba(0, 168, 255, 0.9);
}

.bli-cell-top {
  color: var(--bli-void);
  background: var(--bli-gold);
  box-shadow: 0 0 40px -4px rgba(255, 197, 61, 0.9);
}

/* --- Numeri di classifica in corsa --------------------------------------- */
.bli-ranks {
  opacity: 0;
}

.bli-rank {
  position: absolute;
  font-family: 'Anton', 'Archivo', sans-serif;
  line-height: 0.72;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: transparent;
  -webkit-text-stroke: 2px var(--bli-edge);
  will-change: transform, opacity;
}

.bli-rank.is-lead {
  color: var(--bli-blue);
  -webkit-text-stroke: 0;
  text-shadow: 0 0 40px rgba(0, 168, 255, 0.6);
}

.bli-rank.is-gold {
  color: var(--bli-gold);
  -webkit-text-stroke: 0;
  text-shadow: 0 0 40px rgba(255, 197, 61, 0.55);
}

/* --- Fascio verticale: il momento della convergenza ---------------------- */
.bli-beam {
  display: grid;
  place-items: center;
  opacity: 0;
}

.bli-beam span {
  display: block;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, transparent, var(--bli-glow) 30%, #fff 50%, var(--bli-glow) 70%, transparent);
  box-shadow: 0 0 60px 12px rgba(0, 168, 255, 0.75);
  transform: scaleY(0);
}

/* --- Marchio finale ------------------------------------------------------ */
.bli-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, 2.2vh, 1.6rem);
  padding: 0 6vw;
  text-align: center;
  opacity: 0;
}

.bli-mark {
  position: relative;
  display: grid;
  place-items: center;
}

.bli-mark img {
  width: clamp(84px, 15vh, 150px);
  height: auto;
  display: block;
}

/* Cerchio che si disegna attorno al marchio: eco del cerchio di centrocampo */
.bli-mark-ring {
  position: absolute;
  inset: -14%;
  width: 128%;
  height: 128%;
}

.bli-mark-ring circle {
  fill: none;
  stroke: var(--bli-blue);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

/* --- Serratura -----------------------------------------------------------
   Lucchetto completo: corpo e staffa. La versione precedente aveva la sola
   staffa sospesa sopra il logo e leggeva come un gancio — un arco isolato non
   è un lucchetto, è un arco. Piccolo e accanto al sottotitolo funziona meglio
   di grande e ambiguo. */
.bli-lucchetto {
  width: 1.35em;
  height: 1.35em;
  vertical-align: -0.34em;
  margin-right: 0.5em;
  overflow: visible;
}

.bli-lucchetto-staffa {
  fill: none;
  stroke: var(--bli-chalk);
  stroke-width: 2.2;
  stroke-linecap: round;
  /* Lo scatto parte dalla base della staffa, dove incontra il corpo. */
  transform-origin: 12px 12px;
}

.bli-lucchetto-corpo {
  fill: var(--bli-blue);
}

.bli-lucchetto-foro {
  fill: var(--bli-void);
}

/* --- Morsa: quattro staffe che serrano il marchio ------------------------
   Stesso segno del mirino già nel sistema visivo (`.bl-bracket`), qui in
   movimento: scattano verso l'interno e si fermano. */
.bli-morsa {
  position: absolute;
  width: clamp(22px, 4vw, 42px);
  height: clamp(22px, 4vw, 42px);
  border: 3px solid var(--bli-blue);
  box-shadow: 0 0 18px -2px rgba(0, 168, 255, 0.8);
  pointer-events: none;
  opacity: 0;
}

.bli-morsa-tl { top: 4%;  left: 6%;  border-right: 0; border-bottom: 0; }
.bli-morsa-tr { top: 4%;  right: 6%; border-left: 0;  border-bottom: 0; }
.bli-morsa-bl { bottom: 4%; left: 6%;  border-right: 0; border-top: 0; }
.bli-morsa-br { bottom: 4%; right: 6%; border-left: 0;  border-top: 0; }

.bli-wordmark {
  position: relative;
  font-family: 'Anton', 'Archivo', sans-serif;
  font-size: clamp(2.4rem, 9vw, 7rem);
  line-height: 0.82;
  text-transform: uppercase;
  color: #fff;
}

.bli-wordmark .bli-lg-b { color: var(--bli-blue); }

/* Aberrazione cromatica: due copie sfalsate che rientrano.
   `screen` su fondo nero somma le due dominanti senza sporcare il bianco. */
.bli-ghost {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
}

.bli-ghost-r { color: #FF2D3F; }
.bli-ghost-c { color: #00E5FF; }

.bli-ghost .bli-lg-b { color: inherit; }

.bli-tagline {
  font-size: clamp(0.6rem, 1.5vw, 0.75rem);
  font-weight: 800;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--bli-mute);
  /* Rivelazione a tendina, come `.bl-wipe` del sistema */
  clip-path: inset(0 100% 0 0);
}

.bli-hazard {
  height: 4px;
  width: min(560px, 72vw);
  background: repeating-linear-gradient(-45deg,
    var(--bli-blue) 0 12px,
    var(--bli-void) 12px 24px);
  transform: scaleX(0);
}

/* --- Lampo e bande cinematografiche -------------------------------------- */
.bli-flash {
  background: #fff;
  opacity: 0;
}

.bli-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 9vh;
  background: var(--bli-void);
  z-index: 3;
}

.bli-bar-top { top: 0; transform: translateY(-100%); }
.bli-bar-bot { bottom: 0; transform: translateY(100%); }

/* --- Grana e vignettatura ------------------------------------------------ */
.bli-grain {
  z-index: 4;
  opacity: 0.32;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.bli-vignette {
  z-index: 4;
  box-shadow: inset 0 0 26vw 6vw rgba(0, 0, 0, 0.85);
}

/* --- Comandi: salta e avanzamento ---------------------------------------- */
.bli-skip {
  position: absolute;
  right: clamp(1rem, 3vw, 2.25rem);
  bottom: calc(9vh + clamp(1rem, 3vw, 2rem));
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 1rem;
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bli-chalk);
  background: rgba(4, 7, 12, 0.72);
  border: 0;
  cursor: pointer;
  opacity: 0;
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px var(--bli-edge);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: color 140ms cubic-bezier(0.2, 0.9, 0.25, 1),
              background 140ms cubic-bezier(0.2, 0.9, 0.25, 1),
              box-shadow 140ms cubic-bezier(0.2, 0.9, 0.25, 1);
}

.bli-skip:hover,
.bli-skip:focus-visible {
  color: #fff;
  background: rgba(0, 168, 255, 0.16);
  box-shadow: inset 0 0 0 1px var(--bli-blue);
  outline: none;
}

.bli-skip-ring {
  width: 18px;
  height: 18px;
  transform: rotate(-90deg);
}

.bli-skip-ring circle {
  fill: none;
  stroke-width: 2.5;
}

.bli-skip-ring .bli-skip-track { stroke: var(--bli-edge); }
.bli-skip-ring .bli-skip-head {
  stroke: var(--bli-blue);
  stroke-linecap: butt;
  /* r = 7 → circonferenza ≈ 43.98 */
  stroke-dasharray: 43.98;
  stroke-dashoffset: 43.98;
}

.bli-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 6;
  height: 2px;
  width: 100%;
  background: var(--bli-blue);
  box-shadow: 0 0 12px rgba(0, 168, 255, 0.8);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* --- Variante a movimento ridotto ---------------------------------------
   Non una versione «più lenta»: una versione diversa, statica, che dura un
   istante. Chi ha attivato quella preferenza non vuole una sequenza addolcita,
   vuole nessuna sequenza. */
.bli-reduced .bli-stage > *:not(.bli-bg):not(.bli-lockup),
.bli-reduced .bli-bar,
.bli-reduced .bli-skip,
.bli-reduced .bli-progress {
  display: none !important;
}

.bli-reduced .bli-lockup { opacity: 1; }

/* Blocco dello scorrimento mentre l'intro è a schermo. La classe viene messa
   dallo script d'apertura in <head>, prima del primo fotogramma. */
html.bli-lock,
html.bli-lock body {
  overflow: hidden !important;
}