@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&display=swap');
/* Loader a griglia (tunnel sci-fi) per operazioni lente: overlay semi-trasparente, nessun
   countdown. Il tunnel scorre in attesa; l'USCITA (panning + dive + scritta COMPLETED verso
   lo schermo) è guidata da js/gridloader.js con la Web Animations API, partendo dal transform
   corrente per essere fluida (niente snap/riallineamenti). Form attivati con [data-gridloader]. */
.gl-tunnel {
  position: fixed; inset: 0; z-index: 3000; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  perspective: 480px; perspective-origin: 50% 50%;
  background: rgba(2, 8, 5, .72); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 1; /* visibile subito */
}

/* camera: banca e curva come una navicella 80s che sterza dentro il tunnel */
.gl-cam { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; will-change: transform; animation: gl-curve 12s ease-in-out infinite; }
@keyframes gl-curve {
  0%   { transform: rotateY(0deg)   rotateZ(0deg)  translateX(0); }
  20%  { transform: rotateY(11deg)  rotateZ(-5deg) translateX(46px); }
  40%  { transform: rotateY(-4deg)  rotateZ(2deg)  translateX(-16px); }
  55%  { transform: rotateY(-12deg) rotateZ(5deg)  translateX(-48px); }
  75%  { transform: rotateY(5deg)   rotateZ(-2deg) translateX(18px); }
  100% { transform: rotateY(0deg)   rotateZ(0deg)  translateX(0); }
}
.gl-tube { position: absolute; left: 0; top: 0; transform-style: preserve-3d; will-change: transform; animation: gl-fly .11s linear infinite; }
@keyframes gl-fly { from { transform: translateZ(-55px); } to { transform: translateZ(0); } }

/* maglia a linee RETTE e parallele che convergono verso il centro (la curva la fa il TUNNEL,
   cioè il banking della camera). Passo 55px -> maglia più fitta; il tile = passo del translateZ
   del tubo (55) per una ripetizione senza scalini. */
.gl-wall {
  position: absolute;
  background-image: linear-gradient(rgba(46, 230, 138, .5) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(46, 230, 138, .5) 1px, transparent 1px);
  background-size: 55px 55px;
}
.gl-wall.f, .gl-wall.c { width: 600px; height: 3080px; margin: -1540px 0 0 -300px; }
.gl-wall.l, .gl-wall.r { width: 3080px; height: 600px; margin: -300px 0 0 -1540px; }
.gl-wall.f { transform: translateY(300px) rotateX(90deg); }
.gl-wall.c { transform: translateY(-300px) rotateX(-90deg); }
.gl-wall.l { transform: translateX(-300px) rotateY(90deg); }
.gl-wall.r { transform: translateX(300px) rotateY(-90deg); }

/* nebbia di profondità: sfuma le linee verso il fondo del tunnel (niente taglio netto) e fa
   da sfondo scuro all'etichetta. Radiale a schermo pieno centrata sul punto di fuga. */
.gl-core {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at 50% 50%,
    rgba(2, 8, 5, .97) 0%, rgba(2, 8, 5, .9) 10%, rgba(2, 8, 5, .6) 24%, rgba(2, 8, 5, 0) 50%);
}
/* contenitore etichette: le scritte si sovrappongono al centro (crossfade) e vivono nel 3D */
.gl-labels { position: relative; z-index: 3; perspective: 480px; perspective-origin: 50% 50%; }
/* scritta d'azione (Analyzing e-mail, Checking...) con alone NEON verde */
.gl-label {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  color: #d6ffe8; font-family: "Orbitron", "Space Grotesk", monospace;
  letter-spacing: .28em; font-size: 13px; font-weight: 700; white-space: nowrap;
  text-shadow: 0 0 4px #2ee68a, 0 0 10px #2ee68a, 0 0 22px rgba(46, 230, 138, .9), 0 0 40px rgba(46, 230, 138, .55);
  animation: gl-pulse 1.15s ease-in-out infinite;
}
/* parola finale "COMPLETED": font anni 80 (Orbitron) e alone NEON molto ampio */
.gl-label.gl-done {
  font-family: "Orbitron", "Space Grotesk", monospace; font-size: 30px; font-weight: 900;
  letter-spacing: .14em; animation: none; color: #eafff2;
  text-shadow: 0 0 8px #2ee68a, 0 0 18px #2ee68a, 0 0 36px #2ee68a,
               0 0 70px rgba(46, 230, 138, .9), 0 0 120px rgba(46, 230, 138, .7),
               0 0 180px rgba(46, 230, 138, .5);
}
@keyframes gl-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* flash di luce verde a tutto schermo quando COMPLETED riempie lo schermo (come il tunnel col countdown) */
.gl-flash {
  position: absolute; left: 50%; top: 50%; width: 200vmax; height: 200vmax; margin: -100vmax 0 0 -100vmax;
  border-radius: 50%; z-index: 2; pointer-events: none; transform: scale(0); opacity: 0;
  background: radial-gradient(circle, #daffed 0%, #2ee68a 42%, rgba(46, 230, 138, 0) 72%);
}

@media (prefers-reduced-motion: reduce) { .gl-tube, .gl-cam { animation: none; } .gl-label { animation: none; } }