/* ======================== */
/* HERO SECTION             */
/* ======================== */

/* ======================== */
/* SCROLL INDICATOR         */
/* ======================== */

/* Testo sempre visibile su tutte le varianti — posizionato sopra l'indicatore */
.scroll-text {
  position: absolute;
  bottom: 76px; /* 32px base + 32px altezza indicatore + 12px gap */
  left: 50%;
  transform: translateX(-50%);
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--muted);
  white-space: nowrap;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.scroll-text.hidden {
  opacity: 0;
}

/* Variante 1: solo la freccia (il testo è ora fuori) */
.scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.scroll-indicator.hidden {
  opacity: 0;
}

.scroll-arrow {
  font-size: 14px;
  color: var(--muted);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50%       { opacity: 1;   transform: translateY(6px); }
}

/* ======================== */
/* SCROLL VARIANTS          */
/* ======================== */

/* Logica visibilità: per default mostra v1, nascondi il resto.
   La classe scroll-vN su #hero attiva la variante corrispondente. */

/* — Default: mostra v1, nascondi tutto il resto — */
.scroll-line,
.scroll-spiral { display: none; }

/* — v1: arrow (default, nessuna classe su #hero) — */
/* .scroll-indicator già visibile di default */

/* — v2: linea che scorre — */
#hero.scroll-v2 .scroll-indicator { display: none; }
#hero.scroll-v2 .scroll-line      { display: block; }

/* — v3: spirale SVG — */
#hero.scroll-v3 .scroll-indicator { display: none; }
#hero.scroll-v3 .scroll-spiral    { display: block; }

/* ======================== */
/* SCROLL GLITCH TEXT       */
/* ======================== */

/* Nascosto di default — attivato dal toggle devtools */
.scroll-glitch {
  display: none;
  position: absolute;
  bottom: 76px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--muted);
  white-space: nowrap;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.scroll-glitch.hidden {
  opacity: 0;
}

.scroll-glitch::before,
.scroll-glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
}

.scroll-glitch::before {
  color: var(--accent);
  animation: glitchTrigger 4s infinite;
}

.scroll-glitch::after {
  color: var(--primary);
  animation: glitchTrigger 4s infinite 0.05s;
}

@keyframes glitchTrigger {
  0%, 90%, 100% { opacity: 0;   transform: translateX(0);   }
  92%           { opacity: 0.8; transform: translateX(-3px); }
  94%           { opacity: 0.8; transform: translateX(3px);  }
  96%           { opacity: 0;   transform: translateX(0);    }
}

/* — Attivo con classe su #hero — */
/* Quando glitch è attivo, nascondi il testo statico e mostra quello glitch */
#hero.scroll-glitch-on .scroll-text   { display: none; }
#hero.scroll-glitch-on .scroll-glitch { display: block; }

/* — off: nascondi tutto — */
#hero.scroll-off .scroll-text      { display: none; }
#hero.scroll-off .scroll-indicator { display: none; }

/* ======================== */
/* SCROLL LINE (v2)         */
/* ======================== */

.scroll-line {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 36px;
  background: var(--border);
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.scroll-line.hidden {
  opacity: 0;
}

.scroll-line-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--accent), var(--primary));
  animation: lineScroll 2s ease-in-out infinite;
  transform: translateY(-100%);
}

@keyframes lineScroll {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* ======================== */
/* SCROLL SPIRAL (v3)       */
/* ======================== */

.scroll-spiral {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  animation: spiralCollapse 3s ease-in-out infinite;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.scroll-spiral.hidden {
  opacity: 0;
}

.scroll-spiral svg {
  width: 100%;
  height: 100%;
}

@keyframes spiralCollapse {
  0%   { transform: translateX(-50%) scale(1);   opacity: 1;   }
  50%  { transform: translateX(-50%) scale(0.3); opacity: 0.3; }
  51%  { transform: translateX(-50%) scale(1.2); opacity: 0;   }
  100% { transform: translateX(-50%) scale(1);   opacity: 1;   }
}

/* ======================== */
/* TITOLO                   */
/* ======================== */

.hero-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2; /* sopra il canvas bg (z:0), sotto navbar (z:1000) */

  font-family: 'Syne', sans-serif;
  font-size: clamp(32px, 6vw, 80px);
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--accent), var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  white-space: nowrap; /* evita a capo su schermi stretti */
  pointer-events: none; /* non intercetta click o touch */
}

/* ======================== */
/* TITLE EFFECTS            */
/* ======================== */

/* — 1. Glow — */
body.title-glow .hero-title {
  animation: titleGlow 3s ease-in-out infinite;
}

@keyframes titleGlow {
  0%,100% { filter: drop-shadow(0 0 8px var(--accent)); }
  50%      { filter: drop-shadow(0 0 24px var(--accent))
                     drop-shadow(0 0 48px var(--primary)); }
}

/* — 2. Glitch — */
/* Riusa glitch1/glitch2 definiti in 404.html — qui ridefiniamo solo
   l'animazione sul testo; i pseudo-elementi mimano lo stesso pattern. */
body.title-glitch .hero-title {
  animation: titleGlitch 2.5s infinite;
}

body.title-glitch .hero-title::before,
body.title-glitch .hero-title::after {
  content: 'SPYRALVERSE';
  position: absolute;
  inset: 0;
  background: inherit;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.title-glitch .hero-title::before {
  clip-path: polygon(0 20%, 100% 20%, 100% 50%, 0 50%);
  animation: titleGlitchA 2.5s infinite;
}

body.title-glitch .hero-title::after {
  clip-path: polygon(0 55%, 100% 55%, 100% 80%, 0 80%);
  animation: titleGlitchB 2s infinite;
}

@keyframes titleGlitch {
  0%,100% { transform: translate(-50%,-50%); }
}

@keyframes titleGlitchA {
  0%,  90%, 100% { transform: translateX(0);   }
  92%            { transform: translateX(-3px); }
  94%            { transform: translateX(3px);  }
  96%            { transform: translateX(-3px); }
  98%            { transform: translateX(3px);  }
}

@keyframes titleGlitchB {
  0%,  88%, 100% { transform: translateX(0);   }
  90%            { transform: translateX(3px);  }
  92%            { transform: translateX(-3px); }
  94%            { transform: translateX(3px);  }
  96%            { transform: translateX(0);    }
}

/* — 3. Shimmer — */
body.title-shimmer .hero-title {
  background: linear-gradient(
    135deg,
    var(--primary), var(--accent),
    #fff, var(--accent), var(--primary)
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* — 4. Outline fantasma — */
body.title-outline .hero-title::after {
  content: 'SPYRALVERSE';
  position: absolute;
  top: 4px;
  left: 4px;
  -webkit-text-stroke: 1px var(--accent);
  -webkit-text-fill-color: transparent;
  opacity: 0.25;
  z-index: -1;
}

/* ======================== */
/* HERO SECTION             */
/* ======================== */

/* — Base — */
/* position: relative + z-index: 1 → sta sopra #bg (z-index: 0).
   height: 100vh → occupa la prima schermata come lo sfondo.
   Il contenuto (testo, CTA) verrà centrato qui dentro. */
#hero {
  position: relative; /* z-index funziona solo con position != static */
  z-index: 1;         /* sopra #bg, sotto navbar (z:1000) e cursor (z:99999) */
  height: 100vh;      /* prima schermata */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: var(--nav-h); /* spazio per la navbar */
}