/* ==========================================================================
   Noleggio Giochi Feronia — effetti.css
   Il livello "capolavoro". style.css è il sistema (token, layout, componenti);
   qui c'è l'identità: il sito si comporta come una sala giochi.
   Ogni effetto ha un motivo. Tutto rispetta prefers-reduced-motion.
   ========================================================================== */

/* ---------- 1. NEON VERO ----------------------------------------------------
   Il gradiente sul titolo era una scorciatoia. Un'insegna al neon è luce:
   alone colorato + nucleo bianco. E all'accensione sfarfalla, una volta sola. */

.hero h1 .neon {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #fff;
  text-shadow:
    0 0 3px rgba(255,255,255,.95),
    0 0 10px rgba(255,255,255,.55),
    0 0 24px rgba(255,45,143,.95),
    0 0 48px rgba(255,45,143,.65),
    0 0 90px rgba(255,45,143,.35);
}
.hero h1 .neon--ciano {
  text-shadow:
    0 0 3px rgba(255,255,255,.95),
    0 0 10px rgba(255,255,255,.55),
    0 0 24px rgba(33,212,253,.95),
    0 0 48px rgba(33,212,253,.6),
    0 0 90px rgba(33,212,253,.3);
}

@keyframes accendi {
  0%   { opacity: .25; text-shadow: none; }
  8%   { opacity: 1; }
  12%  { opacity: .3; text-shadow: none; }
  18%  { opacity: 1; }
  22%  { opacity: .5; }
  28%, 100% { opacity: 1; }
}
.js .hero h1 .neon { animation: accendi 1.5s 250ms both; }

/* la scritta del marchio in alto: piccolo alone, sempre */
.marchio__gettone {
  box-shadow: 0 0 22px -3px rgba(255,45,143,.95), inset 0 0 0 1.5px rgba(255,255,255,.18);
}

/* ---------- 2. LUCI CHE CORRONO --------------------------------------------
   La fila di lampadine del frontalino di un cabinato. Divide le sezioni
   meglio di una riga grigia e dice "sala giochi" senza scriverlo. */

.luci {
  height: 16px;
  background-image:
    radial-gradient(circle at 8px 8px, rgba(255,210,63,.95) 2.6px, rgba(255,210,63,.12) 3.2px, transparent 3.6px);
  background-size: 26px 16px;
  background-repeat: repeat-x;
  animation: corri-luci 1.1s linear infinite;
  opacity: .9;
}
.luci--sopra { margin-bottom: -8px; position: relative; z-index: 2; }
@keyframes corri-luci { from { background-position-x: 0; } to { background-position-x: 26px; } }

/* variante ciano, per alternare */
.luci--ciano {
  background-image:
    radial-gradient(circle at 8px 8px, rgba(33,212,253,.95) 2.6px, rgba(33,212,253,.12) 3.2px, transparent 3.6px);
  animation-direction: reverse;
}

/* ---------- 3. TRAMA DA SCHERMO --------------------------------------------
   Scanline finissime sulle superfici scure: danno profondità senza pesare.
   Niente blend mode, niente backdrop-filter (regola performance). */

.trama { position: relative; isolation: isolate; }
.trama::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: repeating-linear-gradient(180deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
}

/* ---------- 4. AURA CHE SEGUE IL PUNTATORE ---------------------------------
   Come la luce di una macchina quando ci passi davanti. Solo su desktop
   con puntatore fine: su touch non ha senso e costerebbe soltanto. */

.hero__aura {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(600px circle at var(--mx, 30%) var(--my, 40%),
              rgba(255,45,143,.20), rgba(61,107,255,.10) 45%, transparent 70%);
  opacity: 0; transition: opacity 600ms ease;
}
@media (hover: hover) and (pointer: fine) { .hero__aura { opacity: 1; } }

/* ---------- 5. TABELLONE A LED ---------------------------------------------
   I tre numeri di prova non sono più una riga di testo tenue: sono un
   tabellone da sala giochi, e i numeri salgono quando entrano in campo. */

.tabellone {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  background: var(--bordo);
  border-radius: var(--raggio-m);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--bordo-vivo), 0 20px 50px -25px rgba(255,45,143,.5);
}
.tabellone__voce {
  padding: var(--s4) var(--s3);
  background: linear-gradient(180deg, #14112a, #0d0b1a);
  text-align: center;
  position: relative;
}
.tabellone__voce::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(180deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px);
}
.tabellone__n {
  display: block;
  font-family: var(--font-titoli); font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1;
  color: var(--giallo);
  text-shadow: 0 0 8px rgba(255,210,63,.85), 0 0 26px rgba(255,180,20,.5);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.tabellone__n--fucsia { color: var(--fucsia-soft); text-shadow: 0 0 8px rgba(255,107,176,.85), 0 0 26px rgba(255,45,143,.5); }
.tabellone__n--ciano  { color: var(--ciano); text-shadow: 0 0 8px rgba(33,212,253,.85), 0 0 26px rgba(33,212,253,.5); }
.tabellone__et {
  display: block; margin-top: .5rem;
  font-size: var(--t-xs); letter-spacing: .13em; text-transform: uppercase;
  color: var(--testo-tenue); font-weight: 600;
}

/* ---------- 6. LA FILA DI CABINATI -----------------------------------------
   Le macchine non stanno in una griglia: stanno in fila, come quando cammini
   dentro una sala giochi. Si scorre in orizzontale, con lo snap e le frecce.
   Su mobile resta la griglia: trascinare in orizzontale su un telefono che già
   scorre in verticale è una pessima idea. */

.fila-wrap { position: relative; }

@media (min-width: 900px) {
  .griglia-giochi.fila {
    display: flex; gap: var(--s3);
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-block: .6rem 1.4rem;
    /* sfuma i bordi: fa capire che continua */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent);
    scrollbar-width: thin;
    scrollbar-color: var(--bordo-vivo) transparent;
  }
  .griglia-giochi.fila > .gioco {
    flex: 0 0 clamp(11rem, 13vw, 13rem);
    scroll-snap-align: center;
  }
  .griglia-giochi.fila::-webkit-scrollbar { height: 6px; }
  .griglia-giochi.fila::-webkit-scrollbar-track { background: transparent; }
  .griglia-giochi.fila::-webkit-scrollbar-thumb { background: var(--bordo-vivo); border-radius: 99px; }
  .griglia-giochi.fila.trascino { scroll-behavior: auto; cursor: grabbing; }
  .griglia-giochi.fila.trascino > .gioco { pointer-events: none; }

  .fila-frecce { display: flex; gap: .6rem; }
}
.fila-frecce { display: none; }
.fila-freccia {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--superficie); color: var(--testo);
  box-shadow: inset 0 0 0 1.5px var(--bordo-vivo);
  transition: transform var(--veloce), box-shadow var(--veloce), color var(--veloce), opacity var(--veloce);
}
.fila-freccia:hover { color: var(--ciano); box-shadow: inset 0 0 0 1.5px var(--ciano); transform: translateY(-2px); }
.fila-freccia[disabled] { opacity: .3; pointer-events: none; }
.fila-freccia svg { width: 20px; height: 20px; }

/* ---------- 7. LE VETRINE (tilt 3D + riflesso) -----------------------------
   Una macchina a premi si guarda attraverso un vetro. Le card si inclinano
   verso il puntatore e prendono un riflesso: è la sensazione del vetro. */

.gioco {
  transform-style: preserve-3d;
  transform:
    perspective(1000px)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    translate3d(0, var(--ty, 0px), 0);
  transition: transform 420ms cubic-bezier(.16,1,.3,1), box-shadow var(--lenta);
}
.gioco.tilt-attivo { transition: transform 90ms linear, box-shadow var(--lenta); }
.gioco__foto { position: relative; }
.gioco__riflesso {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%),
              rgba(255,255,255,.22), rgba(255,255,255,.06) 40%, transparent 65%);
  opacity: 0; transition: opacity 320ms ease;
}
.gioco:hover .gioco__riflesso { opacity: 1; }

/* bordo che si accende dal lato da cui arriva il puntatore */
.gioco::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow var(--lenta);
}
.gioco:hover::after { box-shadow: inset 0 0 0 1.5px rgba(255,45,143,.55), inset 0 0 26px -6px rgba(255,45,143,.5); }

/* ---------- 8. GETTONE CHE GIRA --------------------------------------------
   Un dettaglio, non un fuoco d'artificio: il gettone accanto al titolo della
   sezione macchine gira lentamente. Dice "a gettone" senza una parola. */

.gettone-gira {
  display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.14em;
  margin-right: .3em;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--giallo), #ffa41b);
  box-shadow: inset 0 0 0 .12em rgba(0,0,0,.28), 0 0 18px -3px rgba(255,210,63,.9);
  animation: gira-gettone 4.5s linear infinite;
}
@keyframes gira-gettone {
  0%   { transform: rotateY(0deg)   scaleX(1); }
  50%  { transform: rotateY(180deg) scaleX(.12); }
  100% { transform: rotateY(360deg) scaleX(1); }
}

/* ---------- 9. I PASSI CHE RESTANO -----------------------------------------
   "Come funziona" diventa un blocco sticky: il numero grande resta fermo e
   cambia mentre scorri i quattro passi. Si capisce che sono una sequenza. */

@media (min-width: 900px) {
  .passi-sticky { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--s6); align-items: start; }
  .passi-sticky__fermo { position: sticky; top: calc(var(--nav-h) + 3rem); }
  .passi-sticky__voce { min-height: 24vh; }
}

/* i passi stanno su un binario: si vede che sono una sequenza, non quattro
   paragrafi che galleggiano */
.passi-sticky__lista { display: grid; gap: clamp(1.2rem, 2.5vh, 2rem); border-left: 2px solid var(--bordo); }
.passi-sticky__voce {
  display: flex; flex-direction: column; justify-content: center;
  position: relative; padding-left: var(--s4); padding-block: var(--s3);
}
.passi-sticky__voce::before {
  content: ''; position: absolute; left: -7px; top: 50%; margin-top: -6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--notte); box-shadow: inset 0 0 0 2px var(--bordo-vivo);
  transition: background 320ms ease, box-shadow 320ms ease, transform 320ms ease;
}
.passi-sticky__voce.viva::before {
  background: var(--giallo); transform: scale(1.35);
  box-shadow: 0 0 16px 2px rgba(255,210,63,.85);
}
/* il tratto di binario acceso accanto al passo attivo */
.passi-sticky__voce::after {
  content: ''; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, var(--giallo), transparent);
  opacity: 0; transition: opacity 320ms ease;
}
.passi-sticky__voce.viva::after { opacity: 1; }
.passi-sticky__cifra {
  font-family: var(--font-titoli); font-weight: 700;
  font-size: clamp(4.5rem, 13vw, 9rem); line-height: .85;
  color: transparent;
  -webkit-text-stroke: 2px var(--bordo-vivo);
  transition: color 420ms ease, -webkit-text-stroke-color 420ms ease, text-shadow 420ms ease;
}
.passi-sticky__cifra.viva {
  color: var(--giallo); -webkit-text-stroke-color: transparent;
  text-shadow: 0 0 14px rgba(255,210,63,.7), 0 0 40px rgba(255,180,20,.4);
}
.passi-sticky__voce h3 { transition: color 320ms ease; }
.passi-sticky__voce:not(.viva) h3 { color: var(--testo-tenue); }
.passi-sticky__voce:not(.viva) p { color: var(--testo-fioco); }

/* ---------- 10. TAGLI DI SEZIONE -------------------------------------------
   Bordi obliqui invece di blocchi impilati: rompe la monotonia della colonna. */

.taglio { position: relative; }
.taglio::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 46px;
  background: inherit;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.taglio--giu::before { clip-path: polygon(0 0, 100% 100%, 0 100%); }

/* ---------- 11. REVEAL CON DIREZIONE ---------------------------------------
   Tutto che sale di 26px è il default di ogni template. Qui gli elementi
   entrano da dove ha senso, e le card della stessa fila si accodano. */

.reveal[data-da="sinistra"] { transform: translate3d(-38px, 0, 0); }
.reveal[data-da="destra"]   { transform: translate3d(38px, 0, 0); }
.reveal[data-da="scala"]    { transform: scale(.94); }
.reveal[data-da="sinistra"].dentro,
.reveal[data-da="destra"].dentro,
.reveal[data-da="scala"].dentro { transform: none; }
.reveal[data-ritardo="4"] { transition-delay: 360ms; }
.reveal[data-ritardo="5"] { transition-delay: 450ms; }

/* ---------- 12. PULSANTI CON PIÙ CORPO -------------------------------------- */
.btn {
  box-shadow: 0 10px 30px -10px rgba(255,45,143,.75), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn--wa { box-shadow: 0 10px 30px -10px rgba(37,211,102,.7), inset 0 1px 0 rgba(255,255,255,.28); }
/* il fantasma non ha alone: è un contorno, e va ridichiarato qui perché
   .btn sopra sovrascriverebbe la regola di style.css */
.btn--fantasma { box-shadow: inset 0 0 0 1.5px var(--bordo-vivo); }
.btn--fantasma:hover { box-shadow: inset 0 0 0 1.5px var(--ciano); }
.btn:active { transform: translateY(1px) scale(.985); }

/* ---------- 13. CURSORE A GETTONE ------------------------------------------
   Solo desktop con puntatore fine. Un anello sottile che segue il mouse e si
   allarga sugli elementi interattivi. Non sostituisce il cursore di sistema:
   lo accompagna, così non si perde mai il puntatore. */

.gettone-cursore {
  position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(255,45,143,.85), 0 0 22px -6px rgba(255,45,143,.9);
  opacity: 0;
  transition: opacity 260ms ease, width 220ms cubic-bezier(.16,1,.3,1),
              height 220ms cubic-bezier(.16,1,.3,1), margin 220ms cubic-bezier(.16,1,.3,1),
              box-shadow 220ms ease;
  will-change: transform;
}
.gettone-cursore.vivo { opacity: 1; }
.gettone-cursore.su-link {
  width: 58px; height: 58px; margin: -29px 0 0 -29px;
  box-shadow: inset 0 0 0 1.5px rgba(33,212,253,.9), 0 0 30px -6px rgba(33,212,253,.9);
}
@media (hover: none), (pointer: coarse), (max-width: 1023px) { .gettone-cursore { display: none; } }

/* ---------- 14. SIPARIO IN APERTURA ----------------------------------------
   Mezzo secondo, non di più: il contenuto non deve mai aspettare la grafica. */

.sipario {
  position: fixed; inset: 0; z-index: 300; pointer-events: none;
  background: var(--notte);
  animation: alza-sipario 620ms cubic-bezier(.76,0,.24,1) 60ms both;
}
@keyframes alza-sipario {
  to { clip-path: inset(0 0 100% 0); }
}

/* ---------- 16. MOSAICO -----------------------------------------------------
   Una parete di immagini invece di un'altra griglia regolare: tessere di
   dimensioni diverse, come una bacheca. Serve a far respirare colore in una
   pagina che altrimenti è tutta testo su fondo scuro. */

.mosaico {
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 46vw;
}
@media (min-width: 700px) {
  .mosaico { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 13.5rem; }
  .mosaico__t--largo { grid-column: span 2; }
  .mosaico__t--alto  { grid-row: span 2; }
  .mosaico__t--grande { grid-column: span 2; grid-row: span 2; }
}
.mosaico__t {
  position: relative; overflow: hidden; border-radius: var(--raggio-m);
  box-shadow: inset 0 0 0 1px var(--bordo);
  background: var(--superficie);
}
.mosaico__t img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 900ms cubic-bezier(.16,1,.3,1), filter 500ms ease;
  filter: saturate(1.05);
}
.mosaico__t:hover img { transform: scale(1.06); filter: saturate(1.2); }
.mosaico__t::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(10,9,19,.72) 100%);
}
.mosaico__did {
  position: absolute; left: var(--s2); right: var(--s2); bottom: var(--s2); z-index: 1;
  font-family: var(--font-titoli); font-weight: 500;
  font-size: clamp(.74rem, .68rem + .3vw, .95rem); line-height: 1.25;
  color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.85);
}
@media (min-width: 700px) { .mosaico__did { left: var(--s3); right: var(--s3); bottom: var(--s3); } }

/* ---------- 15. RIDUZIONE MOVIMENTO ----------------------------------------
   Se il sistema chiede meno movimento, resta la grafica e sparisce il moto. */

@media (prefers-reduced-motion: reduce) {
  .js .hero h1 .neon { animation: none; }
  .luci { animation: none; }
  .gettone-gira { animation: none; }
  .sipario { display: none; }
  .gioco { transition: box-shadow var(--lenta); transform: none !important; }
  .gettone-cursore { display: none; }
  .griglia-giochi.fila { scroll-behavior: auto; }
}