@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root {
  --primary-blue: #0ea5e9;
  --primary-blue-hover: #38bdf8;
  --accent-azure: #00f0ff; /* Ciano algoritmico */
  --accent-magenta: #ff007f; /* Magenta */
  --text-dark: #f8fafc; /* Testo principale chiaro */
  --text-muted: #94a3b8; /* Testo mutato chiaro */
  --bg-light: #05070f; /* Sfondo scuro principale */
  --bg-white: #08080c; /* Sfondo scuro secondario */
  --gold: #ffd700;
  --gold-bright: rgba(255, 215, 0, 1);
}

html, body {
  overflow-x: hidden;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-light);
  color: var(--text-dark);
}

.font-serif-elegant {
  font-family: 'Playfair Display', Georgia, serif;
}

.font-developer {
  font-family: 'JetBrains Mono', monospace;
}

/* Forzare l'utilizzo di JetBrains Mono ovunque sia specificato font-mono o font-developer */
.font-mono, [class*="font-mono"] {
  font-family: 'JetBrains Mono', monospace !important;
}

.font-serif, [class*="font-serif"] {
  font-family: 'Playfair Display', serif !important;
}

/* Shadow premium ad effetto bagliore azzurro */
.azure-glow-hover {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.azure-glow-hover:hover {
  box-shadow: 0 10px 30px -5px rgba(2, 132, 199, 0.15);
  transform: translateY(-4px);
  border-color: rgba(56, 189, 248, 0.4);
}

/* Glassmorphism premium light per le card */
.glass-card-light {
  background: rgba(8, 8, 12, 0.65);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

/* Background gradiente morbido azzurro per Hero */
.bg-soft-azure-grad {
  background-color: #ffffff;
  background-image:
    radial-gradient(at 0% 0%, rgba(224, 242, 254, 0.6) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(240, 249, 255, 0.8) 0px, transparent 50%),
    radial-gradient(at 50% 50%, rgba(56, 189, 248, 0.04) 0px, transparent 50%);
}

/* Bottoni Premium in Azzurro */
.btn-azure {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.025em;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-azure:hover {
  background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
  box-shadow: 0 0 20px rgba(2, 132, 199, 0.3);
  transform: scale(1.02);
}

/* Sfumatura azzurro sul testo */
.text-azure-gradient {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 50%, #2563eb 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Micro-animazione per icone o pulsanti */
@keyframes subtle-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.03); opacity: 0.95; }
}

.pulse-premium {
  animation: subtle-pulse 3s infinite ease-in-out;
}

/* Transizione morbida globale */
.transition-premium {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Effetto Testo Cromato Argento 3D coerente con il Logo S */
.text-chrome-3d {
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #f8fafc 15%,
    #e2e8f0 30%,
    #cbd5e1 45%,
    #64748b 50%,
    #475569 55%,
    #94a3b8 70%,
    #cbd5e1 85%,
    #ffffff 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0px 1px 0px rgba(255, 255, 255, 0.8)) drop-shadow(1px 2px 1.5px rgba(15, 23, 42, 0.5));
  font-weight: 900;
  letter-spacing: 0.05em;
  display: inline-block;
}

/* ==========================================
   COMPONENTE INTERATTIVO VISION — VORTICI
   ========================================== */

/* Keyframes per gli anelli dorati */
@keyframes gold-ring-pulse {
  0%, 100% {
    box-shadow:
      0 0 18px rgba(218, 165, 32, 0.55),
      0 0 40px rgba(218, 165, 32, 0.25),
      0 0 80px rgba(218, 165, 32, 0.1);
    border-color: rgba(218, 165, 32, 0.6);
    opacity: 0.85;
  }
  50% {
    box-shadow:
      0 0 30px rgba(255, 210, 70, 0.8),
      0 0 60px rgba(218, 165, 32, 0.45),
      0 0 120px rgba(218, 165, 32, 0.2);
    border-color: rgba(255, 210, 70, 0.85);
    opacity: 1;
  }
}

@keyframes gold-ring-rotate-cw {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes gold-ring-rotate-ccw {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}

@keyframes vortex-active-ring-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.5), 0 0 50px rgba(56, 189, 248, 0.2);
    border-color: rgba(56, 189, 248, 0.9);
  }
  50% {
    box-shadow: 0 0 35px rgba(125, 211, 252, 0.8), 0 0 80px rgba(56, 189, 248, 0.3);
    border-color: rgba(125, 211, 252, 1.0);
  }
}

/* Wrapper principale */
#vision-interactive-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: relative;
}

#vision-interactive-wrapper::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(95%, 900px);
  height: 280px;
  background: radial-gradient(ellipse at center, rgba(218, 165, 32, 0.12) 0%, rgba(56, 189, 248, 0.06) 40%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Constellation grid — 4 vortici affiancati */
#vortices-constellation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 1.25rem;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 0.5rem 2rem;
  position: relative;
  z-index: 1;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 900px) {
  #vortices-constellation {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    gap: 1.25rem;
    padding: 2rem 0;
  }
}

@media (min-width: 1200px) {
  #vortices-constellation {
    gap: 2rem;
  }
}

/* ---- Vortex Nav Item ---- */
.vortex-nav-item {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vortex-nav-item.is-active {
  transform: scale(1.08) !important;
  opacity: 1 !important;
}

.vortex-nav-item.is-dimmed {
  transform: scale(0.9) !important;
  opacity: 0.55 !important;
}

.vortex-nav-item.is-dimmed .vortex-ring-gold-1,
.vortex-nav-item.is-dimmed .vortex-ring-gold-2,
.vortex-nav-item.is-dimmed .vortex-ring-gold-3 {
  opacity: 0.45;
}

/* ---- Wrapper del cerchio (dimensione controllata qui) ---- */
.vortex-circle-wrap {
  position: relative;
  width: 148px;
  height: 148px;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .vortex-circle-wrap {
    width: 168px;
    height: 168px;
  }
}

@media (min-width: 1024px) {
  .vortex-circle-wrap {
    width: 185px;
    height: 185px;
  }
}

/* ---- Cerchio interno WebGL ---- */
.vortex-inner-circle {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at center, #060c1e 0%, #030810 100%);
  border: 2px solid rgba(218, 165, 32, 0.4);
  box-shadow:
    0 0 20px rgba(218, 165, 32, 0.35),
    0 0 50px rgba(218, 165, 32, 0.15),
    inset 0 0 30px rgba(0, 0, 0, 0.5);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vortex-nav-item:hover .vortex-inner-circle {
  border-color: rgba(255, 210, 70, 0.7);
  box-shadow:
    0 0 30px rgba(255, 210, 70, 0.6),
    0 0 70px rgba(218, 165, 32, 0.3),
    0 0 120px rgba(218, 165, 32, 0.12),
    inset 0 0 30px rgba(0, 0, 0, 0.4);
}

.vortex-nav-item.is-active .vortex-inner-circle {
  border-color: rgba(56, 189, 248, 0.8);
  box-shadow:
    0 0 30px rgba(56, 189, 248, 0.5),
    0 0 70px rgba(56, 189, 248, 0.2),
    inset 0 0 30px rgba(0, 0, 0, 0.4);
}

/* ---- Anello dorato 1 (più vicino, pulsante) ---- */
.vortex-ring-gold-1 {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid rgba(218, 165, 32, 0.65);
  animation: gold-ring-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

/* ---- Anello dorato 2 (medio, rotante lento) ---- */
.vortex-ring-gold-2 {
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  border: 1.5px solid rgba(218, 165, 32, 0.28);
  box-shadow: 0 0 15px rgba(218, 165, 32, 0.12);
  animation:
    gold-ring-pulse 2.4s ease-in-out infinite 0.8s,
    gold-ring-rotate-cw 20s linear infinite;
  pointer-events: none;
  z-index: 2;
}

/* ---- Anello 3 (esterno, arco luminoso rotante) ---- */
.vortex-ring-gold-3 {
  position: absolute;
  inset: -36px;
  border-radius: 50%;
  border: 1px solid rgba(218, 165, 32, 0.1);
  overflow: hidden;
  animation: gold-ring-rotate-ccw 12s linear infinite;
  pointer-events: none;
  z-index: 2;
}

.vortex-ring-gold-3::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    transparent 0deg,
    rgba(218, 165, 32, 0.04) 20deg,
    rgba(218, 165, 32, 0.15) 55deg,
    rgba(255, 210, 70, 0.28) 85deg,
    rgba(218, 165, 32, 0.15) 115deg,
    rgba(218, 165, 32, 0.04) 150deg,
    transparent 185deg,
    transparent 360deg
  );
}

/* Anello stato active (azzurro, JS) */
.vortex-ring-active {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 2.5px solid rgba(56, 189, 248, 0.0);
  transition: border-color 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

.vortex-nav-item.is-active .vortex-ring-active {
  border-color: rgba(56, 189, 248, 0.9);
  opacity: 1;
  animation: vortex-active-ring-pulse 1.8s ease-in-out infinite;
}

/* Hover: rings più vividi */
.vortex-nav-item:hover .vortex-ring-gold-1 {
  border-color: rgba(255, 210, 70, 0.85);
  animation-duration: 1.4s;
}

/* ---- Label ---- */
.vortex-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e2e8f0;
  transition: color 0.3s ease, text-shadow 0.3s ease;
  margin-bottom: 0.85rem;
  text-align: center;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .vortex-label {
    font-size: 0.75rem;
    letter-spacing: 0.18em;
  }
}

@media (min-width: 1024px) {
  .vortex-label {
    font-size: 0.82rem;
    letter-spacing: 0.2em;
  }
}

.vortex-nav-item:hover .vortex-label {
  color: #fbbf24;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.7);
}

.vortex-nav-item.is-active .vortex-label {
  color: #7dd3fc;
  text-shadow: 0 0 12px rgba(125, 211, 252, 0.9);
}

/* ---- Icona SVG ---- */
.vortex-icon {
  width: 2.75rem;
  height: 2.75rem;
  opacity: 0.92;
  transition: all 0.35s ease;
  position: relative;
  z-index: 5;
  filter: drop-shadow(0 0 8px rgba(218, 165, 32, 0.65));
}

@media (min-width: 768px) {
  .vortex-icon {
    width: 3.25rem;
    height: 3.25rem;
  }
}

.vortex-nav-item:hover .vortex-icon {
  opacity: 1;
  transform: scale(1.12);
  filter: drop-shadow(0 0 10px rgba(255, 210, 70, 0.75));
}

.vortex-nav-item.is-active .vortex-icon {
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.7));
}

/* ---- Canvas WebGL ---- */
.vortex-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

/* ---- Hover brightness sul canvas ---- */
.vortex-nav-item:hover .vortex-canvas {
  filter: brightness(1.3) contrast(1.1) saturate(1.15);
}

.vortex-nav-item.is-active .vortex-canvas {
  filter: brightness(1.45) contrast(1.2) saturate(1.25);
}

/* ==========================================
   ICONE VORTEX — GLOW NEON MULTI-LIVELLO
   (3 drop-shadow sovrapposti per effetto neon
   coerente tra browser, senza SVG filter piatto)
   ========================================== */

.vortex-icon {
  filter:
    drop-shadow(0 0 2px rgba(218, 165, 32, 0.85))
    drop-shadow(0 0 6px rgba(218, 165, 32, 0.45))
    drop-shadow(0 0 14px rgba(218, 165, 32, 0.18));
}

.vortex-nav-item:hover .vortex-icon {
  filter:
    drop-shadow(0 0 3px rgba(255, 210, 70, 1.0))
    drop-shadow(0 0 9px rgba(255, 210, 70, 0.65))
    drop-shadow(0 0 22px rgba(255, 210, 70, 0.28));
}

.vortex-nav-item.is-active .vortex-icon {
  filter:
    drop-shadow(0 0 3px rgba(56, 189, 248, 1.0))
    drop-shadow(0 0 9px rgba(56, 189, 248, 0.6))
    drop-shadow(0 0 20px rgba(56, 189, 248, 0.25));
}

/* ==========================================
   ANIMAZIONE DI INGRESSO — fade-in + scale
   sfasata di 150ms tra un marcatore e l'altro
   ========================================== */

@keyframes vortex-entrance {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

[data-target="vision"] {
  animation: vortex-entrance 0.72s cubic-bezier(0.16, 1, 0.3, 1) 0.20s both;
}
[data-target="libri"] {
  animation: vortex-entrance 0.72s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}
[data-target="strumenti"] {
  animation: vortex-entrance 0.72s cubic-bezier(0.16, 1, 0.3, 1) 0.50s both;
}
[data-target="biografia"] {
  animation: vortex-entrance 0.72s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both;
}

/* ==========================================
   ANIMAZIONI IDLE — diverse per tipo
   ========================================== */

/* VISION — raggio che pulsa in opacità */
@keyframes vision-ray-pulse {
  0%, 100% { opacity: 0.30; }
  50%       { opacity: 0.90; }
}
[data-target="vision"] .vision-ray {
  animation: vision-ray-pulse 2.8s ease-in-out infinite;
}

/* LIBRI — pagine che ondeggiano sfasate */
@keyframes page-flutter-1 {
  0%, 100% { transform: translateY(0) rotate(0deg);   opacity: 0.85; }
  45%       { transform: translateY(-2.5px) rotate(-4deg); opacity: 1; }
}
@keyframes page-flutter-2 {
  0%, 100% { transform: translateY(0) rotate(0deg);   opacity: 0.7; }
  55%       { transform: translateY(-3.5px) rotate(5deg);  opacity: 1; }
}
[data-target="libri"] .page-1 {
  transform-origin: 13.5px 10px;
  animation: page-flutter-1 3.4s ease-in-out infinite;
}
[data-target="libri"] .page-2 {
  transform-origin: 15px 7px;
  animation: page-flutter-2 3.4s ease-in-out infinite 0.5s;
}

/* STRUMENTI — pietra ferma, solo crepe e wrench che pulsano in opacità */
@keyframes strumenti-crack-breathe {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 0.85; }
}
@keyframes strumenti-wrench-breathe {
  0%, 100% { opacity: 0.75; }
  50%       { opacity: 1; }
}
[data-target="strumenti"] .crack-glow {
  animation: strumenti-crack-breathe 4s ease-in-out infinite;
}
[data-target="strumenti"] .wrench-glow {
  animation: strumenti-wrench-breathe 4s ease-in-out infinite 0.7s;
}

/* BIO — germoglio oscilla piano, puntini DNA ruotano */
@keyframes bio-sway {
  0%, 100% { transform: rotate(-2deg); }
  50%       { transform: rotate(2deg); }
}
@keyframes dna-orbit-1 {
  0%, 100% { transform: translate(0, 0);           opacity: 0.9; }
  50%       { transform: translate(-1.5px, -1.5px); opacity: 1;   }
}
@keyframes dna-orbit-2 {
  0%, 100% { transform: translate(0, 0);          opacity: 0.7; }
  50%       { transform: translate(1.5px, 1.5px); opacity: 1;   }
}
[data-target="biografia"] .bio-content {
  transform-origin: 12px 19.5px;
  animation: bio-sway 4.6s ease-in-out infinite;
}
[data-target="biografia"] .dna-dot-1 {
  animation: dna-orbit-1 2.4s ease-in-out infinite;
}
[data-target="biografia"] .dna-dot-2 {
  animation: dna-orbit-2 2.4s ease-in-out infinite 0.4s;
}

/* ==========================================
   HOVER LABEL — linea tratteggiata verso il cerchio
   ========================================== */

.vortex-label {
  position: relative;
}
.vortex-label::after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 1px;
  height: 0;
  border-left: 1px dashed rgba(251, 191, 36, 0);
  transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
  pointer-events: none;
}
.vortex-nav-item:hover .vortex-label::after {
  height: clamp(8px, 1.2vw, 14px);
  border-color: rgba(251, 191, 36, 0.7);
}

/* ==========================================
   PANNELLO DETTAGLIO (slide-up sotto la costellazione)
   ========================================== */

#detail-panel-container {
  width: 100%;
  max-width: 700px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px);
  transition:
    max-height 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s ease 0.1s,
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;
}

#detail-panel-container.panel-open {
  max-height: 520px;
  opacity: 1;
  transform: translateY(0);
}

/* Card Dettaglio */
.detail-card-overlay {
  background: rgba(6, 10, 25, 0.88);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1.5px solid rgba(218, 165, 32, 0.3);
  box-shadow:
    0 20px 60px -10px rgba(0, 0, 0, 0.75),
    0 0 60px rgba(218, 165, 32, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  border-radius: 1.25rem;
  padding: 1.5rem;
  position: relative;
  transition: opacity 0.3s ease;
}

.detail-card-overlay.hide-card {
  display: none;
}

.detail-card-overlay.show-card {
  display: block;
}

/* Connettore visivo */
#panel-connector {
  width: 2px;
  height: 0;
  background: linear-gradient(to bottom, rgba(218, 165, 32, 0.7), rgba(218, 165, 32, 0));
  margin: 0 auto;
  transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(218, 165, 32, 0.4);
}

#panel-connector.connector-visible {
  height: 28px;
}

/* ==========================================
   HEADER DINAMICO — BIANCO ALLO SCROLL
   ========================================== */

/* ==========================================
   HEADER — BARRA BIANCA FISSA IN ALTO
   ========================================== */

/* Stato iniziale: barra scura premium */
header.header-top-dark {
  background: rgba(5, 7, 15, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 16px rgba(0, 0, 0, 0.2);
}

header.header-top-dark .header-logo-text {
  color: #ffffff;
  text-shadow: none;
}

header.header-top-dark #header-nav {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

header.header-top-dark .nav-text-link {
  color: #e2e8f0;
  font-weight: 600;
}

header.header-top-white .nav-text-link:hover {
  color: #0284c7;
}

header.header-top-white .nav-text-link::after {
  background-color: #0284c7;
}

/* CTA solido azzurro */
.header-cta-solid {
  background: linear-gradient(135deg, var(--accent-azure) 0%, var(--primary-blue) 100%);
  color: #05070f;
  border: none;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace !important;
  box-shadow: 0 4px 15px rgba(0, 240, 255, 0.3);
}

.header-cta-solid:hover {
  background: linear-gradient(135deg, #38bdf8 0%, var(--accent-azure) 100%);
  color: #05070f;
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.55);
  transform: translateY(-2px) scale(1.02);
}

/* Link navbar: testo semplice, aspetto pulito */
.nav-text-link {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: none;
  padding: 0.45rem 0.55rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .nav-text-link {
    font-size: 0.78rem;
    padding: 0.45rem 0.75rem;
  }
}

.nav-text-link:hover {
  color: #38bdf8;
}

/* Sottolineatura hover */
.nav-text-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1.5px;
  background-color: #38bdf8;
  transition: width 0.3s ease;
  transform: translateX(-50%);
}

.nav-text-link:hover::after {
  width: 60%;
}

/* CTA Iscrizione discreta */
.header-cta-discrete {
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  color: #f1f5f9;
  background-color: rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  font-weight: 700;
  transition: all 0.3s ease;
}

.header-cta-discrete:hover {
  border-color: rgba(56, 189, 248, 0.7);
  background-color: rgba(56, 189, 248, 0.12);
  color: #7dd3fc;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.3);
}

/* ---- Header Scrolled: ombra più marcata ---- */
header.scrolled {
  background: rgba(8, 8, 12, 0.95);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* Nav links su sfondo scuro */
header.scrolled #header-nav {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

header.scrolled .nav-text-link {
  color: #cbd5e1;
  font-weight: 700;
}

header.scrolled .nav-text-link:hover {
  color: #00f0ff;
  text-shadow: none;
}

header.scrolled .nav-text-link::after {
  background-color: #00f0ff;
}

/* Logo su sfondo scuro */
header.scrolled .header-logo-text {
  color: #ffffff;
  text-shadow: none;
}

/* CTA su sfondo scuro */
header.scrolled .header-cta-discrete {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3);
}

header.scrolled .header-cta-discrete:hover {
  background: linear-gradient(135deg, #00f0ff 0%, #0ea5e9 100%);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
}

/* Admin button su sfondo scuro */
header.scrolled a[href="admin.html"] {
  color: #94a3b8 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

header.scrolled a[href="admin.html"]:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Mobile Menu Drawer */
#mobile-menu-drawer.open {
  transform: translateX(0);
}

.mobile-nav-link {
  transition: all 0.3s ease;
}

.mobile-nav-link:hover {
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
}

/* ==========================================
   HERO PREVIEW STYLE - 4 VORTICI CINEMATICI
   ========================================== */

@keyframes vortex-flow-cw {
  from { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.035); }
  to { transform: rotate(360deg) scale(1); }
}

@keyframes vortex-flow-ccw {
  from { transform: rotate(360deg) scale(1.02); }
  50% { transform: rotate(180deg) scale(0.98); }
  to { transform: rotate(0deg) scale(1.02); }
}

@keyframes vortex-breathe {
  0%, 100% {
    opacity: 0.78;
    filter: blur(0.6px) brightness(1);
  }
  50% {
    opacity: 1;
    filter: blur(0.2px) brightness(1.22);
  }
}

@keyframes vortex-sparkle-drift {
  from { transform: rotate(0deg); opacity: 0.58; }
  50% { opacity: 1; }
  to { transform: rotate(-360deg); opacity: 0.58; }
}

@keyframes vortex-icon-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.035); }
}

#manifesto {
  min-height: min(84vh, 760px);
  padding-bottom: clamp(2rem, 4.5vw, 4rem) !important;
  background-color: #05070f !important;
  background-image: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.06) 0%, rgba(5, 7, 15, 0) 75%) !important;
}

#vision {
  background: radial-gradient(ellipse at top, rgba(0, 240, 255, 0.05) 0%, rgba(5, 7, 15, 0) 75%), #05070f !important;
}

#pubblicazioni {
  background: radial-gradient(ellipse at top, rgba(16, 185, 129, 0.05) 0%, rgba(5, 7, 15, 0) 75%), #05070f !important;
}

#strumenti {
  background: radial-gradient(ellipse at top, rgba(255, 215, 0, 0.05) 0%, rgba(5, 7, 15, 0) 75%), #05070f !important;
}

#biografia {
  background: radial-gradient(ellipse at top, rgba(255, 0, 127, 0.05) 0%, rgba(5, 7, 15, 0) 75%), #05070f !important;
}

#manifesto::before {
  content: none;
}

#vision-interactive-wrapper {
  isolation: isolate;
  margin-top: clamp(1.2rem, 3vw, 2.2rem) !important;
  margin-bottom: clamp(0.75rem, 2vw, 1.5rem) !important;
}

#vision-interactive-wrapper::before {
  content: none;
  background: none;
  box-shadow: none;
}

#vision-interactive-wrapper::after {
  content: none;
}

#vortices-constellation {
  max-width: 1180px;
  gap: clamp(1.75rem, 5vw, 3.5rem) clamp(0.7rem, 2.2vw, 2rem);
  padding: clamp(1.15rem, 2.2vw, 2rem) 0 clamp(1.4rem, 2.4vw, 2.2rem);
}

@media (min-width: 900px) {
  #vortices-constellation {
    gap: clamp(0.7rem, 2vw, 2rem);
  }
}

.vortex-nav-item {
  min-width: clamp(136px, 21vw, 232px);
  padding-top: 0.25rem;
}

.vortex-nav-item.is-active {
  transform: scale(1.045) !important;
}

.vortex-nav-item.is-dimmed {
  opacity: 0.66 !important;
  transform: scale(0.94) !important;
}

.vortex-label {
  font-size: clamp(0.88rem, 1.55vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #f8fafc;
  margin-bottom: clamp(0.65rem, 1.1vw, 0.95rem);
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.95),
    0 0 18px rgba(255, 255, 255, 0.35);
}

.vortex-nav-item:hover .vortex-label,
.vortex-nav-item.is-active .vortex-label {
  color: #ffffff;
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.95),
    0 0 20px rgba(251, 191, 36, 0.85),
    0 0 28px rgba(125, 211, 252, 0.46);
}

.vortex-circle-wrap {
  width: clamp(130px, 17vw, 198px);
  height: clamp(130px, 17vw, 198px);
  filter: drop-shadow(0 18px 28px rgba(2, 6, 23, 0.78));
}

@media (min-width: 1280px) {
  .vortex-circle-wrap {
    width: 210px;
    height: 210px;
  }
}

.vortex-circle-wrap::before,
.vortex-circle-wrap::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.vortex-circle-wrap::before {
  inset: -22px;
  z-index: 1;
  opacity: 0.78;
  background:
    conic-gradient(from 18deg,
      transparent 0deg,
      transparent 18deg,
      rgba(255, 239, 196, 0.1) 30deg,
      rgba(255, 226, 160, 0.86) 50deg,
      rgba(125, 211, 252, 0.42) 66deg,
      transparent 92deg,
      transparent 192deg,
      rgba(255, 207, 135, 0.68) 222deg,
      rgba(255, 248, 214, 0.9) 240deg,
      rgba(56, 189, 248, 0.28) 258deg,
      transparent 294deg,
      transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 58%, #000 61%, #000 68%, transparent 73%);
  mask: radial-gradient(circle, transparent 0 58%, #000 61%, #000 68%, transparent 73%);
  animation: vortex-flow-cw 8.5s linear infinite, vortex-breathe 3.8s ease-in-out infinite;
}

.vortex-circle-wrap::after {
  inset: -46px;
  z-index: 0;
  opacity: 0.42;
  background:
    conic-gradient(from 190deg,
      transparent 0deg,
      transparent 28deg,
      rgba(56, 189, 248, 0.14) 42deg,
      rgba(255, 229, 182, 0.62) 64deg,
      rgba(255, 255, 255, 0.24) 78deg,
      transparent 108deg,
      transparent 224deg,
      rgba(255, 191, 110, 0.55) 258deg,
      rgba(125, 211, 252, 0.34) 285deg,
      transparent 326deg,
      transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 66%, #000 69%, #000 72%, transparent 77%);
  mask: radial-gradient(circle, transparent 0 66%, #000 69%, #000 72%, transparent 77%);
  filter: blur(0.4px);
  animation: vortex-flow-ccw 13s linear infinite;
}

.vortex-inner-circle {
  inset: 4%;
  z-index: 4;
  border: 1px solid rgba(255, 231, 186, 0.45);
  background:
    radial-gradient(circle at 50% 47%, rgba(251, 191, 36, 0.08), transparent 18%),
    radial-gradient(circle at center, rgba(6, 13, 34, 0.78) 0%, rgba(3, 8, 19, 0.92) 62%, rgba(1, 4, 13, 0.98) 100%);
  box-shadow:
    0 0 26px rgba(251, 191, 36, 0.22),
    0 0 54px rgba(56, 189, 248, 0.13),
    inset 0 0 42px rgba(0, 0, 0, 0.78),
    inset 0 0 18px rgba(255, 229, 186, 0.08);
}

.vortex-ring-gold-1,
.vortex-ring-gold-2,
.vortex-ring-gold-3 {
  border: none;
  pointer-events: none;
}

.vortex-ring-gold-1 {
  inset: -18px;
  z-index: 3;
  opacity: 0.9;
  background:
    conic-gradient(from 0deg,
      transparent 0deg,
      rgba(255, 214, 145, 0.14) 20deg,
      rgba(255, 247, 219, 0.92) 46deg,
      rgba(249, 168, 96, 0.64) 68deg,
      transparent 105deg,
      transparent 176deg,
      rgba(125, 211, 252, 0.16) 202deg,
      rgba(255, 228, 176, 0.82) 230deg,
      rgba(255, 255, 255, 0.5) 246deg,
      transparent 292deg,
      transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 60%, #000 63%, #000 67%, transparent 71%);
  mask: radial-gradient(circle, transparent 0 60%, #000 63%, #000 67%, transparent 71%);
  filter: drop-shadow(0 0 10px rgba(255, 220, 160, 0.78));
  animation: vortex-flow-cw 5.8s linear infinite;
}

.vortex-ring-gold-2 {
  inset: -31px;
  z-index: 2;
  opacity: 0.52;
  background:
    conic-gradient(from 100deg,
      transparent 0deg,
      rgba(56, 189, 248, 0.12) 26deg,
      rgba(255, 231, 189, 0.72) 58deg,
      rgba(255, 255, 255, 0.26) 74deg,
      transparent 116deg,
      transparent 196deg,
      rgba(251, 191, 36, 0.56) 226deg,
      rgba(125, 211, 252, 0.32) 254deg,
      transparent 300deg,
      transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 67%, #000 70%, #000 72%, transparent 77%);
  mask: radial-gradient(circle, transparent 0 67%, #000 70%, #000 72%, transparent 77%);
  filter: blur(0.35px) drop-shadow(0 0 12px rgba(125, 211, 252, 0.32));
  animation: vortex-flow-ccw 10.5s linear infinite;
}

.vortex-ring-gold-3 {
  inset: -42px;
  z-index: 1;
  overflow: visible;
  animation: vortex-sparkle-drift 18s linear infinite;
}

.vortex-ring-gold-3::before {
  inset: 0;
  background:
    radial-gradient(circle at 18% 36%, rgba(255, 244, 214, 0.95) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 72% 24%, rgba(125, 211, 252, 0.78) 0 1px, transparent 2.2px),
    radial-gradient(circle at 84% 68%, rgba(255, 221, 172, 0.9) 0 1.4px, transparent 2.6px),
    radial-gradient(circle at 31% 82%, rgba(255, 255, 255, 0.74) 0 1px, transparent 2.2px),
    conic-gradient(from 280deg, transparent, rgba(255, 232, 189, 0.28), transparent 35%, transparent);
  -webkit-mask: radial-gradient(circle, transparent 0 55%, #000 61%, #000 84%, transparent 88%);
  mask: radial-gradient(circle, transparent 0 55%, #000 61%, #000 84%, transparent 88%);
  filter: drop-shadow(0 0 8px rgba(255, 234, 196, 0.72));
}

.vortex-ring-active {
  inset: -21px;
  z-index: 5;
  border-width: 1px;
}

.vortex-canvas {
  opacity: 0.95;
  mix-blend-mode: screen;
}

.vortex-nav-item:hover .vortex-inner-circle {
  border-color: rgba(255, 239, 214, 0.74);
  box-shadow:
    0 0 32px rgba(255, 220, 160, 0.36),
    0 0 72px rgba(56, 189, 248, 0.18),
    inset 0 0 38px rgba(0, 0, 0, 0.68);
}

.vortex-nav-item:hover .vortex-circle-wrap::before,
.vortex-nav-item.is-active .vortex-circle-wrap::before {
  animation-duration: 4.7s, 2.7s;
  filter: drop-shadow(0 0 16px rgba(255, 231, 187, 0.94));
}

.vortex-nav-item:hover .vortex-ring-gold-1,
.vortex-nav-item.is-active .vortex-ring-gold-1 {
  animation-duration: 4.2s;
}

.vortex-icon {
  width: clamp(3.2rem, 5.6vw, 4.9rem);
  height: clamp(3.2rem, 5.6vw, 4.9rem);
  opacity: 0.96;
  stroke-width: 1.25;
  filter:
    drop-shadow(0 0 7px rgba(255, 232, 194, 0.86))
    drop-shadow(0 0 18px rgba(125, 211, 252, 0.32));
  animation: vortex-icon-float 4.8s ease-in-out infinite;
}

.vortex-icon text {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 700;
  fill: rgba(255, 236, 214, 0.96);
  stroke: rgba(255, 236, 214, 0.62);
  stroke-width: 0.35px;
}

.vortex-nav-item:hover .vortex-icon,
.vortex-nav-item.is-active .vortex-icon {
  transform: scale(1.08);
  filter:
    drop-shadow(0 0 10px rgba(255, 244, 214, 0.95))
    drop-shadow(0 0 24px rgba(251, 191, 36, 0.5));
}

@media (max-width: 640px) {
  #manifesto {
    min-height: auto;
  }

  #vision-interactive-wrapper::before {
    height: 78%;
    top: 55%;
  }

  #vision-interactive-wrapper::after {
    top: 4.75rem;
    width: 92vw;
  }

  .vortex-nav-item {
    min-width: 0;
  }

  .vortex-label {
    font-size: 0.78rem;
    line-height: 1.1;
  }
}

/* ==========================================
   FAST PREMIUM VORTICES - CSS ONLY
   ========================================== */

@keyframes premium-vortex-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes premium-vortex-counterspin {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes premium-vortex-shimmer {
  0%, 100% { opacity: 0.66; }
  50% { opacity: 0.94; }
}

@keyframes premium-vortex-icon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.vortex-nav-item[data-target="vision"] {
  --vortex-accent: rgba(56, 189, 248, 0.88);
  --vortex-soft: rgba(56, 189, 248, 0.18);
  --vortex-warm: rgba(255, 226, 170, 0.9);
}

.vortex-nav-item[data-target="libri"] {
  --vortex-accent: rgba(168, 85, 247, 0.78);
  --vortex-soft: rgba(168, 85, 247, 0.18);
  --vortex-warm: rgba(255, 219, 157, 0.92);
}

.vortex-nav-item[data-target="strumenti"] {
  --vortex-accent: rgba(14, 165, 233, 0.92);
  --vortex-soft: rgba(14, 165, 233, 0.2);
  --vortex-warm: rgba(213, 241, 255, 0.9);
}

.vortex-nav-item[data-target="biografia"] {
  --vortex-accent: rgba(217, 70, 239, 0.74);
  --vortex-soft: rgba(217, 70, 239, 0.16);
  --vortex-warm: rgba(255, 225, 183, 0.92);
}

#vortices-constellation {
  max-width: 1060px;
  gap: clamp(1rem, 2.7vw, 2.2rem);
  padding: clamp(1rem, 2.2vw, 1.7rem) 0 clamp(1.1rem, 2.4vw, 1.8rem);
}

.vortex-nav-item {
  min-width: clamp(124px, 18vw, 190px);
  will-change: transform, opacity;
}

.vortex-label {
  font-size: clamp(0.92rem, 1.25vw, 1.15rem);
  line-height: 1.1;
  margin-bottom: 0.72rem;
  letter-spacing: 0;
  color: #f8fafc;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

.vortex-circle-wrap {
  width: clamp(124px, 14.5vw, 174px);
  height: clamp(124px, 14.5vw, 174px);
  filter: drop-shadow(0 16px 24px rgba(2, 6, 23, 0.55));
}

@media (min-width: 1280px) {
  .vortex-circle-wrap {
    width: 182px;
    height: 182px;
  }
}

.vortex-canvas {
  display: none !important;
}

.vortex-circle-wrap::before {
  inset: -15px;
  opacity: 0.92;
  background:
    conic-gradient(from 24deg,
      transparent 0 42deg,
      rgba(255, 244, 218, 0.18) 50deg,
      var(--vortex-warm) 61deg,
      #ffffff 66deg,
      var(--vortex-accent) 73deg,
      transparent 94deg,
      transparent 190deg,
      rgba(255, 221, 166, 0.6) 220deg,
      rgba(255, 255, 255, 0.92) 236deg,
      var(--vortex-accent) 246deg,
      transparent 275deg,
      transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 58%, #000 62%, #000 66%, transparent 70%);
  mask: radial-gradient(circle, transparent 0 58%, #000 62%, #000 66%, transparent 70%);
  filter: drop-shadow(0 0 9px rgba(255, 232, 190, 0.46));
  animation: premium-vortex-spin 9s linear infinite;
}

.vortex-circle-wrap::after {
  inset: -27px;
  opacity: 0.42;
  background:
    conic-gradient(from 205deg,
      transparent 0 60deg,
      var(--vortex-accent) 82deg,
      rgba(255, 255, 255, 0.28) 94deg,
      transparent 120deg,
      transparent 232deg,
      rgba(255, 223, 178, 0.55) 260deg,
      transparent 294deg,
      transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 65%, #000 69%, #000 71%, transparent 75%);
  mask: radial-gradient(circle, transparent 0 65%, #000 69%, #000 71%, transparent 75%);
  animation: premium-vortex-counterspin 15s linear infinite;
}

.vortex-inner-circle {
  inset: 7%;
  border: 1px solid rgba(255, 231, 190, 0.48);
  background:
    radial-gradient(circle at 50% 50%, var(--vortex-soft) 0 15%, transparent 37%),
    radial-gradient(circle at 50% 50%, rgba(255, 247, 232, 0.08), transparent 48%),
    linear-gradient(145deg, rgba(11, 18, 37, 0.96), rgba(2, 6, 18, 0.98));
  box-shadow:
    0 0 18px rgba(255, 226, 170, 0.16),
    0 0 30px var(--vortex-soft),
    inset 0 0 22px rgba(0, 0, 0, 0.72),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.vortex-inner-circle::before,
.vortex-inner-circle::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.vortex-inner-circle::before {
  inset: 12%;
  background:
    conic-gradient(from -30deg,
      transparent 0 26deg,
      rgba(255, 255, 255, 0.94) 43deg,
      var(--vortex-warm) 52deg,
      transparent 75deg,
      transparent 138deg,
      var(--vortex-accent) 160deg,
      rgba(255, 255, 255, 0.88) 172deg,
      transparent 198deg,
      transparent 252deg,
      rgba(255, 227, 176, 0.86) 278deg,
      transparent 310deg,
      transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 42%, #000 48%, #000 56%, transparent 63%);
  mask: radial-gradient(circle, transparent 0 42%, #000 48%, #000 56%, transparent 63%);
  filter: drop-shadow(0 0 8px rgba(255, 238, 204, 0.56));
  animation: premium-vortex-spin 6.8s linear infinite, premium-vortex-shimmer 3.4s ease-in-out infinite;
}

.vortex-inner-circle::after {
  inset: 22%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.18), transparent 30%),
    conic-gradient(from 160deg, transparent, var(--vortex-accent), transparent 34%, transparent);
  -webkit-mask: radial-gradient(circle, transparent 0 28%, #000 35%, #000 41%, transparent 48%);
  mask: radial-gradient(circle, transparent 0 28%, #000 35%, #000 41%, transparent 48%);
  opacity: 0.62;
  animation: premium-vortex-counterspin 10.5s linear infinite;
}

.vortex-ring-gold-1,
.vortex-ring-gold-2,
.vortex-ring-gold-3 {
  background: none;
  border: 0;
  box-shadow: none;
  filter: none;
}

.vortex-ring-gold-1 {
  inset: -4px;
  border: 1px solid rgba(255, 231, 190, 0.34);
}

.vortex-ring-gold-2 {
  inset: -12px;
  border: 1px solid rgba(125, 211, 252, 0.16);
}

.vortex-ring-gold-3 {
  inset: -21px;
}

.vortex-ring-gold-3::before {
  background:
    radial-gradient(circle at 20% 35%, rgba(255, 248, 226, 0.95) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 25%, rgba(125, 211, 252, 0.72) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 70%, rgba(255, 226, 176, 0.8) 0 1px, transparent 2px);
  -webkit-mask: none;
  mask: none;
  filter: none;
  opacity: 0.52;
  animation: premium-vortex-counterspin 18s linear infinite;
}

.vortex-icon {
  width: clamp(2.95rem, 4.6vw, 4.1rem);
  height: clamp(2.95rem, 4.6vw, 4.1rem);
  color: #fff7e8;
  opacity: 0.9;
  filter:
    drop-shadow(0 0 6px rgba(255, 238, 204, 0.78))
    drop-shadow(0 0 14px var(--vortex-soft));
  animation: premium-vortex-icon 5.2s ease-in-out infinite;
}

.vortex-icon text {
  fill: rgba(255, 239, 218, 0.94);
  stroke: rgba(255, 239, 218, 0.48);
}

.vortex-nav-item:hover .vortex-inner-circle,
.vortex-nav-item.is-active .vortex-inner-circle {
  border-color: rgba(255, 244, 218, 0.76);
  box-shadow:
    0 0 22px rgba(255, 226, 170, 0.24),
    0 0 42px var(--vortex-soft),
    inset 0 0 20px rgba(0, 0, 0, 0.64);
}

.vortex-nav-item:hover .vortex-circle-wrap::before,
.vortex-nav-item.is-active .vortex-circle-wrap::before {
  animation-duration: 6.2s;
}

.vortex-nav-item:hover .vortex-icon,
.vortex-nav-item.is-active .vortex-icon {
  transform: scale(1.05);
}

@media (max-width: 640px) {
  #vortices-constellation {
    gap: 1.15rem 0.75rem;
    padding-top: 0.9rem;
  }

  .vortex-circle-wrap {
    width: clamp(114px, 35vw, 132px);
    height: clamp(114px, 35vw, 132px);
    filter: drop-shadow(0 10px 16px rgba(2, 6, 23, 0.42));
  }

  .vortex-circle-wrap::before {
    inset: -11px;
    animation-duration: 11s;
  }

  .vortex-circle-wrap::after,
  .vortex-ring-gold-3 {
    display: none;
  }

  .vortex-inner-circle::before {
    animation-duration: 8.5s;
  }

  .vortex-label {
    font-size: 0.76rem;
    margin-bottom: 0.5rem;
  }

  .vortex-icon {
    width: 2.75rem;
    height: 2.75rem;
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vortex-circle-wrap::before,
  .vortex-circle-wrap::after,
  .vortex-inner-circle::before,
  .vortex-inner-circle::after,
  .vortex-ring-gold-3::before,
  .vortex-icon {
    animation: none !important;
  }
}

/* Final mobile-first performance pass: no masks or heavy filters on moving layers. */
.vortex-circle-wrap {
  filter: none;
}

.vortex-circle-wrap::before {
  inset: -8px;
  opacity: 0.82;
  background:
    conic-gradient(from 28deg,
      transparent 0 42deg,
      rgba(255, 242, 213, 0.95) 58deg,
      var(--vortex-accent) 74deg,
      transparent 102deg,
      transparent 198deg,
      rgba(255, 224, 174, 0.86) 230deg,
      rgba(255, 255, 255, 0.78) 244deg,
      transparent 276deg,
      transparent 360deg);
  -webkit-mask: none;
  mask: none;
  filter: none;
  animation: premium-vortex-spin 10.5s linear infinite;
}

.vortex-circle-wrap::after {
  inset: -14px;
  opacity: 0.24;
  background:
    conic-gradient(from 205deg,
      transparent 0 74deg,
      var(--vortex-accent) 94deg,
      transparent 126deg,
      transparent 242deg,
      rgba(255, 231, 190, 0.58) 270deg,
      transparent 306deg,
      transparent 360deg);
  -webkit-mask: none;
  mask: none;
  filter: none;
  animation: premium-vortex-counterspin 18s linear infinite;
}

.vortex-inner-circle {
  inset: 12%;
  z-index: 4;
}

.vortex-inner-circle::before {
  inset: 0;
  opacity: 0.72;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08), transparent 24%),
    conic-gradient(from -18deg,
      transparent 0 32deg,
      rgba(255, 255, 255, 0.86) 48deg,
      var(--vortex-warm) 60deg,
      transparent 88deg,
      transparent 150deg,
      var(--vortex-accent) 174deg,
      rgba(255, 255, 255, 0.62) 188deg,
      transparent 216deg,
      transparent 270deg,
      rgba(255, 226, 178, 0.68) 292deg,
      transparent 322deg,
      transparent 360deg);
  -webkit-mask: none;
  mask: none;
  filter: none;
  animation: premium-vortex-spin 7.8s linear infinite;
}

.vortex-inner-circle::after {
  display: none;
}

.vortex-ring-gold-3,
.vortex-ring-gold-3::before {
  display: none;
}

.vortex-icon {
  filter: none;
}

@media (max-width: 640px) {
  .vortex-circle-wrap::before {
    inset: -7px;
    animation-duration: 13s;
  }

  .vortex-circle-wrap::after {
    display: none;
  }

  .vortex-inner-circle::before {
    animation-duration: 10s;
  }
}

/* Ultra-light animated arcs: safest path for mobile GPUs. */
.vortex-circle-wrap::before,
.vortex-circle-wrap::after,
.vortex-inner-circle::before {
  background: none;
  -webkit-mask: none;
  mask: none;
  filter: none;
}

.vortex-circle-wrap::before {
  inset: -9px;
  border: 2px solid rgba(255, 233, 196, 0.12);
  border-top-color: rgba(255, 246, 226, 0.92);
  border-right-color: var(--vortex-accent);
  border-bottom-color: rgba(255, 220, 166, 0.38);
  box-shadow: 0 0 18px rgba(255, 232, 190, 0.16);
  opacity: 0.92;
  animation: premium-vortex-spin 8.5s linear infinite;
}

.vortex-circle-wrap::after {
  display: block;
  inset: -18px;
  border: 1px solid rgba(125, 211, 252, 0.08);
  border-left-color: rgba(255, 231, 190, 0.48);
  border-top-color: var(--vortex-accent);
  opacity: 0.46;
  box-shadow: none;
  animation: premium-vortex-counterspin 14s linear infinite;
}

.vortex-inner-circle::before {
  inset: 17%;
  border: 3px solid transparent;
  border-top-color: rgba(255, 248, 230, 0.9);
  border-right-color: var(--vortex-accent);
  border-bottom-color: rgba(255, 224, 176, 0.72);
  opacity: 0.82;
  box-shadow: 0 0 16px var(--vortex-soft);
  animation: premium-vortex-spin 5.8s linear infinite;
}

.vortex-inner-circle::after {
  display: block;
  inset: 35%;
  background:
    radial-gradient(circle, rgba(255, 248, 230, 0.28), var(--vortex-soft) 42%, transparent 72%);
  opacity: 0.8;
  animation: premium-vortex-shimmer 3.6s ease-in-out infinite;
}

.vortex-ring-gold-1 {
  inset: -2px;
  border: 1px solid rgba(255, 231, 190, 0.28);
}

.vortex-ring-gold-2 {
  inset: -12px;
  border: 1px solid rgba(125, 211, 252, 0.12);
}

@media (max-width: 640px) {
  .vortex-circle-wrap::before {
    inset: -7px;
    border-width: 1.5px;
    animation-duration: 10s;
  }

  .vortex-circle-wrap::after {
    display: none;
  }

  .vortex-inner-circle::before {
    border-width: 2px;
    animation-duration: 7s;
  }
}

/* ==========================================
   MINI VORTEX NAV - STATIC AND LIGHT
   ========================================== */

header #header-nav.mini-vortex-nav,
header.header-top-dark #header-nav.mini-vortex-nav,
header.scrolled #header-nav.mini-vortex-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 1.4vw, 1.25rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s ease;
}

header.mini-nav-visible #header-nav.mini-vortex-nav {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.mini-vortex-link {
  --mini-accent: #00f0ff;
  --mini-warm: #ffd700;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2rem;
  padding: 0.25rem 0.3rem;
  color: #cbd5e1;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: color 0.18s ease, transform 0.18s ease;
  contain: layout paint;
}

.mini-vortex-link[data-mini-vortex="vision"] {
  --mini-accent: #0ea5e9;
  --mini-warm: #bae6fd;
}

.mini-vortex-link[data-mini-vortex="libri"] {
  --mini-accent: #10b981;
  --mini-warm: #a7f3d0;
}

.mini-vortex-link[data-mini-vortex="strumenti"] {
  --mini-accent: #eab308;
  --mini-warm: #fef08a;
}

.mini-vortex-link[data-mini-vortex="biografia"] {
  --mini-accent: #8b5cf6;
  --mini-warm: #ddd6fe;
}

.mini-vortex-link:hover {
  color: #00f0ff;
  transform: translateY(-1px);
}

.mini-vortex-dot {
  position: relative;
  display: inline-block;
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #06101f 0 42%, transparent 43%),
    conic-gradient(from 28deg, transparent 0 34deg, var(--mini-warm) 52deg, #ffffff 60deg, var(--mini-accent) 74deg, transparent 96deg, transparent 210deg, var(--mini-warm) 234deg, transparent 266deg, transparent 360deg);
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    0 0 8px rgba(56, 189, 248, 0.12);
}

.mini-vortex-dot::after {
  content: '';
  position: absolute;
  inset: 0.38rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.26), rgba(56, 189, 248, 0.12) 52%, transparent 72%);
}

.mini-vortex-label {
  display: inline-block;
}

@media (max-width: 767px) {
  #vision, #pubblicazioni, #strumenti, #biografia {
    scroll-margin-top: 9.5rem !important;
  }

  header #header-nav.mini-vortex-nav,
  header.header-top-dark #header-nav.mini-vortex-nav,
  header.scrolled #header-nav.mini-vortex-nav {
    position: fixed;
    top: 4.9rem;
    left: 50%;
    z-index: 49;
    width: min(calc(100vw - 1rem), 24rem);
    gap: 0.25rem;
    justify-content: space-between;
    padding: 0.35rem 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(8, 8, 12, 0.95);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
    transform: translate(-50%, -8px);
  }

  header.mini-nav-visible #header-nav.mini-vortex-nav {
    transform: translate(-50%, 0);
  }

  .mini-vortex-link {
    gap: 0.25rem;
    padding: 0.2rem 0.16rem;
    font-size: 0.65rem;
  }

  .mini-vortex-dot {
    width: 1.08rem;
    height: 1.08rem;
  }

  .mini-vortex-dot::after {
    inset: 0.31rem;
  }
}

@media (max-width: 360px) {
  .mini-vortex-label {
    display: none;
  }

  .mini-vortex-link {
    justify-content: center;
    min-width: 2rem;
  }
}

/* Mini vortices readability boost */
.mini-vortex-link {
  gap: 0.56rem;
  min-height: 2.55rem;
  padding: 0.28rem 0.48rem;
  font-size: 0.82rem;
}

.mini-vortex-dot {
  width: 2.75rem;
  height: 2.75rem;
  background:
    radial-gradient(circle at center, #081323 0 39%, transparent 40%),
    conic-gradient(from 24deg,
      transparent 0 28deg,
      rgba(255, 245, 224, 0.96) 44deg,
      var(--mini-warm) 58deg,
      var(--mini-accent) 76deg,
      transparent 104deg,
      transparent 188deg,
      rgba(255, 231, 190, 0.82) 222deg,
      #ffffff 238deg,
      transparent 270deg,
      transparent 360deg);
  border: 1.5px solid rgba(15, 23, 42, 0.2);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.58),
    inset 0 0 12px rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.55),
    0 5px 13px rgba(15, 23, 42, 0.14);
}

.mini-vortex-dot::before {
  content: '';
  position: absolute;
  inset: 0.28rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 236, 204, 0.44);
}

.mini-vortex-dot::after {
  inset: 50% auto auto 50%;
  width: auto;
  height: auto;
  transform: translate(-50%, -52%);
  border-radius: 0;
  background: none;
  color: rgba(255, 244, 225, 0.96);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.75),
    0 0 7px var(--mini-accent);
}

.mini-vortex-link[data-mini-vortex="vision"] .mini-vortex-dot::after {
  content: 'V';
}

.mini-vortex-link[data-mini-vortex="libri"] .mini-vortex-dot::after {
  content: 'L';
}

.mini-vortex-link[data-mini-vortex="strumenti"] .mini-vortex-dot::after {
  content: 'S';
}

.mini-vortex-link[data-mini-vortex="biografia"] .mini-vortex-dot::after {
  content: 'B';
}

@media (max-width: 767px) {
  header #header-nav.mini-vortex-nav,
  header.header-top-dark #header-nav.mini-vortex-nav,
  header.scrolled #header-nav.mini-vortex-nav {
    top: 4.05rem;
    width: min(calc(100vw - 0.75rem), 25.5rem);
    padding: 0.42rem 0.5rem;
  }

  .mini-vortex-link {
    gap: 0.3rem;
    min-height: 2.35rem;
    padding: 0.22rem 0.2rem;
    font-size: 0.72rem;
  }

  .mini-vortex-dot {
    width: 2.3rem;
    height: 2.3rem;
  }

  .mini-vortex-dot::before {
    inset: 0.24rem;
  }

  .mini-vortex-dot::after {
    font-size: 0.94rem;
  }
}

@media (max-width: 360px) {
  .mini-vortex-link {
    min-width: 2.45rem;
  }
}

/* HD vector mini vortices */
.mini-vortex-dot {
  background: none;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

.mini-vortex-dot::before,
.mini-vortex-dot::after {
  content: none !important;
  display: none !important;
}

.mini-vortex-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}

.mini-vortex-bg {
  fill: #071221;
  stroke: rgba(255, 255, 255, 0.26);
  stroke-width: 1.2;
}

.mini-vortex-frame {
  fill: none;
  stroke: rgba(15, 23, 42, 0.2);
  stroke-width: 1.35;
}

.mini-vortex-arc {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mini-vortex-arc-light {
  stroke: #fff7e5;
  stroke-width: 4.2;
}

.mini-vortex-arc-accent {
  stroke: var(--mini-accent);
  stroke-width: 3.4;
}

.mini-vortex-arc-warm {
  stroke: var(--mini-warm);
  stroke-width: 3.2;
}

.mini-vortex-swirl {
  fill: none;
  stroke: rgba(255, 244, 224, 0.62);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mini-vortex-core {
  fill: var(--mini-accent);
  fill-opacity: 0.25;
  stroke: rgba(255, 255, 255, 0.42);
  stroke-width: 0.8;
}

.mini-vortex-letter {
  fill: #fff1d8;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.45);
  stroke-width: 0.7px;
}

.mini-vortex-link:hover .mini-vortex-frame {
  stroke: rgba(2, 132, 199, 0.5);
}

.mini-vortex-link:hover .mini-vortex-arc-accent {
  stroke-width: 4;
}

/* Simple colorful HD mini portals */
.mini-vortex-bg {
  fill: #07111f;
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 1.1;
}

.mini-vortex-frame {
  fill: none;
  stroke: rgba(15, 23, 42, 0.26);
  stroke-width: 1.25;
}

.mini-vortex-ring {
  fill: none;
  stroke-linecap: round;
  transform-origin: 32px 32px;
  vector-effect: non-scaling-stroke;
}

.mini-vortex-ring-light {
  stroke: #fff4da;
  stroke-width: 5;
  stroke-dasharray: 28 72;
  stroke-dashoffset: 4;
  transform: rotate(-28deg);
}

.mini-vortex-ring-accent {
  stroke: var(--mini-accent);
  stroke-width: 4.25;
  stroke-dasharray: 22 78;
  stroke-dashoffset: 21;
  transform: rotate(42deg);
}

.mini-vortex-ring-warm {
  stroke: var(--mini-warm);
  stroke-width: 3.5;
  stroke-dasharray: 17 83;
  stroke-dashoffset: 50;
  transform: rotate(132deg);
}

.mini-vortex-swirl,
.mini-vortex-arc {
  display: none;
}

.mini-vortex-core {
  fill: rgba(5, 12, 24, 0.96);
  stroke: rgba(255, 246, 224, 0.48);
  stroke-width: 1;
}

.mini-vortex-letter {
  fill: #fff1d8;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 800;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(2, 6, 23, 0.62);
  stroke-width: 0.8px;
}

.mini-vortex-link:hover .mini-vortex-ring-accent {
  stroke-width: 4.8;
}

.mini-vortex-link:hover .mini-vortex-frame {
  stroke: rgba(2, 132, 199, 0.42);
}

/* Final simple colored-dot nav */
.mini-vortex-link {
  gap: 0.48rem;
}

.mini-vortex-dot {
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  background: var(--mini-accent);
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.3),
    0 2px 5px rgba(0, 0, 0, 0.4);
}

.mini-vortex-svg {
  display: none !important;
}

.mini-vortex-label {
  color: #cbd5e1;
}

.mini-vortex-link:hover .mini-vortex-dot {
  transform: scale(1.12);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.12),
    0 0 0 4px color-mix(in srgb, var(--mini-accent) 18%, transparent),
    0 2px 6px rgba(15, 23, 42, 0.16);
}

@media (max-width: 767px) {
  .mini-vortex-dot {
    width: 0.68rem;
    height: 0.68rem;
  }
}

/* ==========================================
   HERO TRAIL SIGNPOSTS
   ========================================== */

@keyframes trail-sign-sway {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(calc(var(--tilt) - 1.2deg));
  }
  50% {
    transform: translate(-50%, -50%) rotate(calc(var(--tilt) + 1.2deg));
  }
}

#vision-interactive-wrapper {
  min-height: clamp(310px, 36vw, 430px);
}

#vortices-constellation.trail-signposts {
  position: relative;
  display: block;
  width: min(100%, 1180px);
  height: clamp(300px, 35vw, 430px);
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
}

#vortices-constellation.trail-signposts > svg,
#vortices-constellation.trail-signposts .vortex-circle-wrap {
  display: none !important;
}

#vortices-constellation.trail-signposts .vortex-nav-item {
  --sign-x: 50%;
  --sign-y: 58%;
  --tilt: 0deg;
  --sway-speed: 4.8s;
  position: absolute;
  left: var(--sign-x);
  top: var(--sign-y);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: clamp(118px, 13vw, 176px);
  height: clamp(122px, 13vw, 170px);
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  outline: none;
  opacity: 0.98;
  filter: drop-shadow(0 16px 20px rgba(68, 34, 13, 0.38));
  transform-origin: center 86%;
  animation: trail-sign-sway var(--sway-speed) ease-in-out infinite;
  animation-delay: var(--sway-delay, 0s);
}

#vortices-constellation.trail-signposts .vortex-nav-item::before {
  content: '';
  position: absolute;
  top: clamp(40px, 4.8vw, 58px);
  left: 50%;
  z-index: 0;
  width: clamp(12px, 1.25vw, 17px);
  height: clamp(76px, 8.5vw, 118px);
  border-radius: 3px;
  background:
    linear-gradient(90deg, rgba(52, 27, 11, 0.96), rgba(137, 83, 39, 0.98) 36%, rgba(82, 42, 17, 0.98) 72%, rgba(39, 20, 9, 0.96)),
    repeating-linear-gradient(0deg, rgba(255, 233, 185, 0.18) 0 2px, transparent 2px 7px);
  box-shadow:
    inset 2px 0 3px rgba(255, 224, 160, 0.2),
    inset -3px 0 5px rgba(0, 0, 0, 0.32),
    0 10px 12px rgba(43, 24, 12, 0.3);
  transform: translateX(-50%) rotate(1.5deg);
}

#vortices-constellation.trail-signposts .vortex-label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: clamp(40px, 4.6vw, 58px);
  margin: 0;
  padding: 0.35rem 1.35rem 0.35rem 0.95rem;
  color: #fff7df;
  background:
    linear-gradient(180deg, rgba(187, 122, 58, 0.96) 0%, rgba(126, 70, 29, 0.98) 48%, rgba(83, 43, 18, 0.98) 100%),
    repeating-linear-gradient(7deg, rgba(255, 238, 190, 0.2) 0 2px, transparent 2px 9px);
  clip-path: polygon(0 0, 78% 0, 100% 50%, 78% 100%, 0 100%, 9% 50%);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(0.78rem, 1.25vw, 1.16rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow:
    0 1px 0 rgba(80, 39, 13, 0.95),
    0 2px 5px rgba(0, 0, 0, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 196, 0.5),
    inset 0 -5px 9px rgba(61, 31, 13, 0.35),
    0 8px 14px rgba(58, 31, 12, 0.28);
}

#vortices-constellation.trail-signposts .vortex-label::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    repeating-linear-gradient(0deg, rgba(255, 226, 166, 0.13) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 18% 45%, rgba(52, 25, 9, 0.34) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 45%, rgba(255, 232, 174, 0.26) 0 1px, transparent 3px);
}

#vortices-constellation.trail-signposts .vortex-label::after {
  content: '';
  position: absolute;
  left: 18%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(74, 39, 17, 0.78);
  box-shadow:
    0 0 0 1px rgba(255, 224, 166, 0.22),
    inset 0 1px 1px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -50%);
}

#vortices-constellation.trail-signposts .vortex-nav-item:hover,
#vortices-constellation.trail-signposts .vortex-nav-item:focus-visible {
  animation-play-state: paused;
  transform: translate(-50%, -50%) rotate(calc(var(--tilt) + 3deg)) scale(1.06) !important;
  filter: drop-shadow(0 18px 24px rgba(68, 34, 13, 0.46)) drop-shadow(0 0 14px rgba(255, 215, 153, 0.28));
}

#vortices-constellation.trail-signposts .vortex-nav-item:hover .vortex-label,
#vortices-constellation.trail-signposts .vortex-nav-item:focus-visible .vortex-label {
  color: #ffffff;
  background:
    linear-gradient(180deg, rgba(214, 148, 76, 0.98) 0%, rgba(147, 82, 35, 0.98) 52%, rgba(94, 48, 19, 0.98) 100%),
    repeating-linear-gradient(7deg, rgba(255, 238, 190, 0.2) 0 2px, transparent 2px 9px);
}

#vortices-constellation.trail-signposts .vortex-nav-item[data-target="vision"] {
  --sign-x: 35%;
  --sign-y: 75%;
  --tilt: -8deg;
  --sway-speed: 4.6s;
}

#vortices-constellation.trail-signposts .vortex-nav-item[data-target="libri"] {
  --sign-x: 51%;
  --sign-y: 65%;
  --tilt: 5deg;
  --sway-speed: 5.1s;
  --sway-delay: -0.8s;
}

#vortices-constellation.trail-signposts .vortex-nav-item[data-target="strumenti"] {
  --sign-x: 66%;
  --sign-y: 55%;
  --tilt: -4deg;
  --sway-speed: 4.9s;
  --sway-delay: -1.4s;
}

#vortices-constellation.trail-signposts .vortex-nav-item[data-target="biografia"] {
  --sign-x: 79%;
  --sign-y: 45%;
  --tilt: 7deg;
  --sway-speed: 5.3s;
  --sway-delay: -2s;
}

@media (max-width: 767px) {
  #vision-interactive-wrapper {
    min-height: clamp(320px, 76vw, 430px);
  }

  #vortices-constellation.trail-signposts {
    height: clamp(310px, 74vw, 430px);
  }

  #vortices-constellation.trail-signposts .vortex-nav-item {
    width: clamp(96px, 28vw, 130px);
    height: 118px;
  }

  #vortices-constellation.trail-signposts .vortex-nav-item[data-target="vision"] {
    --sign-x: 24%;
    --sign-y: 77%;
  }

  #vortices-constellation.trail-signposts .vortex-nav-item[data-target="libri"] {
    --sign-x: 43%;
    --sign-y: 68%;
  }

  #vortices-constellation.trail-signposts .vortex-nav-item[data-target="strumenti"] {
    --sign-x: 62%;
    --sign-y: 59%;
  }

  #vortices-constellation.trail-signposts .vortex-nav-item[data-target="biografia"] {
    --sign-x: 79%;
    --sign-y: 50%;
  }
}

/* ==========================================
   HERO FLOATING WISPS
   ========================================== */

@keyframes hero-wisp-drift {
  0%, 100% {
    transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(1);
  }
  35% {
    transform: translate(-50%, -50%) translate3d(8px, -9px, 0) scale(1.04);
  }
  70% {
    transform: translate(-50%, -50%) translate3d(-6px, 5px, 0) scale(0.98);
  }
}

@keyframes hero-wisp-glow {
  0%, 100% {
    opacity: 0.7;
    filter: blur(12px) saturate(1.05);
  }
  50% {
    opacity: 0.98;
    filter: blur(16px) saturate(1.22);
  }
}

#vision-interactive-wrapper {
  min-height: clamp(300px, 34vw, 420px);
}

#vortices-constellation.hero-wisps {
  position: relative;
  display: block;
  width: min(100%, 1180px);
  height: clamp(300px, 34vw, 420px);
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
}

#vortices-constellation.hero-wisps > svg,
#vortices-constellation.hero-wisps .vortex-circle-wrap {
  display: none !important;
}

#vortices-constellation.hero-wisps .vortex-nav-item {
  --wisp-x: 50%;
  --wisp-y: 35%;   /* spostato in alto: era 58% */
  --wisp-main: rgba(255, 232, 178, 0.96);
  --wisp-core: rgba(255, 255, 255, 0.95);
  --wisp-blue: rgba(125, 211, 252, 0.55);
  --wisp-size: clamp(72px, 7.5vw, 105px);
  --drift-speed: 6.6s;
  position: absolute;
  left: var(--wisp-x);
  top: var(--wisp-y);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--wisp-size);
  height: calc(var(--wisp-size) * 0.72);  /* più alto: era 0.62 */
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  opacity: 1;
  filter:
    drop-shadow(0 0 14px rgba(255, 231, 186, 0.52))
    drop-shadow(0 0 28px rgba(255, 210, 140, 0.35))
    drop-shadow(0 3px 10px rgba(129, 83, 42, 0.18));
  transform-origin: center;
  animation: hero-wisp-drift var(--drift-speed) ease-in-out infinite;
  animation-delay: var(--drift-delay, 0s);
  mix-blend-mode: screen;
  will-change: transform;
}

#vortices-constellation.hero-wisps .vortex-nav-item::before,
#vortices-constellation.hero-wisps .vortex-nav-item::after {
  content: '';
  position: absolute;
  inset: -18%;
  z-index: 0;
  border-radius: 55% 45% 58% 42% / 58% 45% 55% 42%;
  pointer-events: none;
}

/* Versione densa/corporea del fuoco fatuo */
#vortices-constellation.hero-wisps .vortex-nav-item::before {
  background:
    radial-gradient(circle at 42% 48%, var(--wisp-core) 0 12%, var(--wisp-main) 22%, rgba(255, 221, 164, 0.55) 44%, transparent 68%),
    radial-gradient(circle at 64% 42%, rgba(255, 247, 218, 0.92), transparent 34%),
    radial-gradient(circle at 26% 58%, var(--wisp-blue), transparent 46%);
  animation: hero-wisp-glow 3.8s ease-in-out infinite;
  animation-delay: var(--drift-delay, 0s);
}

#vortices-constellation.hero-wisps .vortex-nav-item::after {
  inset: 7% -4% 0;
  background:
    radial-gradient(circle at 22% 48%, rgba(255, 255, 255, 0.75) 0 4px, transparent 10px),
    radial-gradient(circle at 78% 35%, rgba(255, 235, 184, 0.65) 0 3px, transparent 9px),
    radial-gradient(ellipse at 52% 56%, rgba(255, 236, 190, 0.58), transparent 62%);
  filter: blur(1.5px);
  opacity: 0.95;
}

#vortices-constellation.hero-wisps .vortex-label {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(100%, 7.2rem);
  margin: 0;
  padding: 0.5rem 0.9rem;
  color: rgba(255, 255, 255, 0.96);
  background: transparent;
  border: 0;
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.76rem, 1.03vw, 0.98rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow:
    0 1px 3px rgba(89, 41, 12, 0.55),
    0 0 10px rgba(255, 250, 230, 0.7),
    0 0 22px rgba(255, 201, 134, 0.55);
  box-shadow: none;
}

#vortices-constellation.hero-wisps .vortex-label::before,
#vortices-constellation.hero-wisps .vortex-label::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

#vortices-constellation.hero-wisps .vortex-label::before {
  inset: -0.85rem -1.35rem;
  z-index: -1;
  border-radius: 56% 44% 52% 48% / 48% 56% 44% 52%;
  background:
    radial-gradient(circle at 28% 52%, rgba(255, 255, 255, 0.5), transparent 27%),
    radial-gradient(circle at 68% 40%, rgba(255, 237, 190, 0.58), transparent 31%),
    radial-gradient(ellipse at 50% 58%, rgba(255, 215, 152, 0.36), rgba(255, 232, 186, 0.18) 48%, transparent 74%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.32),
    inset 0 0 14px rgba(255, 255, 255, 0.14),
    0 0 14px rgba(255, 220, 166, 0.26);
  filter: blur(3.4px);
}

#vortices-constellation.hero-wisps .vortex-label::after {
  right: 0.35rem;
  top: 0.38rem;
  width: 0.32rem;
  height: 0.32rem;
  background: rgba(255, 255, 255, 0.82);
  box-shadow:
    -1.15rem 1.05rem 0 -1px rgba(255, 232, 179, 0.68),
    0 0 9px rgba(255, 255, 255, 0.75);
}

#vortices-constellation.hero-wisps .vortex-nav-item:hover,
#vortices-constellation.hero-wisps .vortex-nav-item:focus-visible {
  animation-play-state: paused;
  transform: translate(-50%, -50%) scale(1.12) !important;
  opacity: 1;
}

#vortices-constellation.hero-wisps .vortex-nav-item:hover .vortex-label,
#vortices-constellation.hero-wisps .vortex-nav-item:focus-visible .vortex-label {
  text-shadow:
    0 1px 3px rgba(89, 41, 12, 0.52),
    0 0 13px rgba(255, 255, 255, 0.9),
    0 0 28px rgba(255, 212, 148, 0.72);
}

/* Posizioni aggiornate: altezza spalla dell'uomo */
#vortices-constellation.hero-wisps .vortex-nav-item[data-target="vision"] {
  --wisp-x: 32%;
  --wisp-y: 40%;   /* era 54% */
  --wisp-blue: rgba(125, 211, 252, 0.6);
  --drift-speed: 6.3s;
}

#vortices-constellation.hero-wisps .vortex-nav-item[data-target="libri"] {
  --wisp-x: 47%;
  --wisp-y: 34%;   /* era 47% */
  --wisp-main: rgba(255, 217, 160, 0.96);
  --wisp-blue: rgba(255, 193, 128, 0.48);
  --drift-speed: 6.9s;
  --drift-delay: -1.2s;
}

#vortices-constellation.hero-wisps .vortex-nav-item[data-target="strumenti"] {
  --wisp-x: 61%;
  --wisp-y: 28%;   /* era 41% */
  --wisp-main: rgba(255, 235, 184, 0.98);
  --wisp-blue: rgba(186, 230, 253, 0.58);
  --wisp-size: clamp(80px, 8.5vw, 115px);
  --drift-speed: 6.5s;
  --drift-delay: -2.1s;
}

#vortices-constellation.hero-wisps .vortex-nav-item[data-target="biografia"] {
  --wisp-x: 74%;
  --wisp-y: 22%;   /* era 34% */
  --wisp-main: rgba(255, 228, 183, 0.95);
  --wisp-blue: rgba(255, 255, 255, 0.52);
  --drift-speed: 7.1s;
  --drift-delay: -3s;
}

@media (max-width: 767px) {
  #vision-interactive-wrapper {
    min-height: clamp(300px, 74vw, 410px);
  }

  #vortices-constellation.hero-wisps {
    height: clamp(300px, 72vw, 410px);
  }

  #vortices-constellation.hero-wisps .vortex-nav-item {
    --wisp-size: clamp(55px, 15vw, 78px);
  }

  #vortices-constellation.hero-wisps .vortex-label {
    min-width: 0;
    padding: 0.38rem 0.62rem;
    font-size: clamp(0.62rem, 2.4vw, 0.78rem);
  }

  #vortices-constellation.hero-wisps .vortex-nav-item[data-target="vision"] {
    --wisp-x: 24%;
    --wisp-y: 40%;   /* era 55% */
  }

  #vortices-constellation.hero-wisps .vortex-nav-item[data-target="libri"] {
    --wisp-x: 42%;
    --wisp-y: 34%;   /* era 48% */
  }

  #vortices-constellation.hero-wisps .vortex-nav-item[data-target="strumenti"] {
    --wisp-x: 60%;
    --wisp-y: 28%;   /* era 42% */
  }

  #vortices-constellation.hero-wisps .vortex-nav-item[data-target="biografia"] {
    --wisp-x: 75%;
    --wisp-y: 22%;   /* era 35% */
  }
}

/* === Glow neon multi-livello sulle icone === */
.vortex-icon {
  filter:
    drop-shadow(0 0 2px rgba(218, 165, 32, 0.85))
    drop-shadow(0 0 6px rgba(218, 165, 32, 0.45))
    drop-shadow(0 0 14px rgba(218, 165, 32, 0.18));
}
.vortex-nav-item:hover .vortex-icon {
  filter:
    drop-shadow(0 0 3px rgba(255, 210, 70, 1.0))
    drop-shadow(0 0 9px rgba(255, 210, 70, 0.65))
    drop-shadow(0 0 22px rgba(255, 210, 70, 0.28));
}
.vortex-nav-item.is-active .vortex-icon {
  filter:
    drop-shadow(0 0 3px rgba(56, 189, 248, 1.0))
    drop-shadow(0 0 9px rgba(56, 189, 248, 0.6))
    drop-shadow(0 0 20px rgba(56, 189, 248, 0.25));
}

/* === Animazione ingresso sfasata (fade-in + scale) === */
@keyframes vortex-entrance {
  from { opacity: 0; transform: scale(0.8) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
[data-target="vision"]    { animation: vortex-entrance 0.72s cubic-bezier(0.16,1,0.3,1) 0.20s both; }
[data-target="libri"]     { animation: vortex-entrance 0.72s cubic-bezier(0.16,1,0.3,1) 0.35s both; }
[data-target="strumenti"] { animation: vortex-entrance 0.72s cubic-bezier(0.16,1,0.3,1) 0.50s both; }
[data-target="biografia"] { animation: vortex-entrance 0.72s cubic-bezier(0.16,1,0.3,1) 0.65s both; }

/* === Animazioni idle per tipo === */

/* VISION — raggio che pulsa */
@keyframes vision-ray-pulse {
  0%, 100% { opacity: 0.30; }
  50%       { opacity: 0.90; }
}
[data-target="vision"] .vision-ray {
  animation: vision-ray-pulse 2.8s ease-in-out infinite;
}

/* LIBRI — pagine che ondeggiano sfasate */
@keyframes page-flutter-1 {
  0%, 100% { transform: translateY(0) rotate(0deg);      opacity: 0.85; }
  45%       { transform: translateY(-2.5px) rotate(-4deg); opacity: 1; }
}
@keyframes page-flutter-2 {
  0%, 100% { transform: translateY(0) rotate(0deg);     opacity: 0.7; }
  55%       { transform: translateY(-3.5px) rotate(5deg); opacity: 1; }
}
[data-target="libri"] .page-1 {
  transform-origin: 13.5px 10px;
  animation: page-flutter-1 3.4s ease-in-out infinite;
}
[data-target="libri"] .page-2 {
  transform-origin: 15px 7px;
  animation: page-flutter-2 3.4s ease-in-out infinite 0.5s;
}

/* STRUMENTI — crepe e chiave pulsano in opacità, pietra ferma */
@keyframes strumenti-crack-breathe {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 0.85; }
}
@keyframes strumenti-wrench-breathe {
  0%, 100% { opacity: 0.75; }
  50%       { opacity: 1; }
}
[data-target="strumenti"] .crack-glow {
  animation: strumenti-crack-breathe 4s ease-in-out infinite;
}
[data-target="strumenti"] .wrench-glow {
  animation: strumenti-wrench-breathe 4s ease-in-out infinite 0.7s;
}

/* BIO — germoglio oscilla, puntini DNA orbitano */
@keyframes bio-sway {
  0%, 100% { transform: rotate(-2deg); }
  50%       { transform: rotate(2deg); }
}
@keyframes dna-orbit-1 {
  0%, 100% { transform: translate(0, 0);            opacity: 0.9; }
  50%       { transform: translate(-1.5px, -1.5px); opacity: 1; }
}
@keyframes dna-orbit-2 {
  0%, 100% { transform: translate(0, 0);           opacity: 0.7; }
  50%       { transform: translate(1.5px, 1.5px);  opacity: 1; }
}
[data-target="biografia"] .bio-content {
  transform-origin: 12px 19.5px;
  animation: bio-sway 4.6s ease-in-out infinite;
}
[data-target="biografia"] .dna-dot-1 {
  animation: dna-orbit-1 2.4s ease-in-out infinite;
}
[data-target="biografia"] .dna-dot-2 {
  animation: dna-orbit-2 2.4s ease-in-out infinite 0.4s;
}

/* === Hover label: linea tratteggiata verso il cerchio === */
.vortex-label { position: relative; }
.vortex-label::after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 1px;
  height: 0;
  border-left: 1px dashed rgba(251, 191, 36, 0);
  transition: height 0.35s cubic-bezier(0.16,1,0.3,1), border-color 0.35s ease;
  pointer-events: none;
}
.vortex-nav-item:hover .vortex-label::after {
  height: clamp(8px, 1.2vw, 14px);
  border-color: rgba(251, 191, 36, 0.7);
}

/* Card principali interattive (Hero) */
.interactive-card {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.5s ease;
}

.interactive-card.fade-hidden {
  opacity: 0 !important;
  transform: translateY(30px) scale(0.96) !important;
  pointer-events: none !important;
}

.interactive-card:hover {
  transform: translateY(-4px) scale(1) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

/* Animazione pulsazione per i core dei nodi */
@keyframes pulse-glow {
  0%, 100% { transform: scale(1); opacity: 0.8; filter: drop-shadow(0 0 5px currentColor); }
  50% { transform: scale(1.08); opacity: 1; filter: drop-shadow(0 0 20px currentColor); }
}
.core-pulse {
  animation: pulse-glow 3s infinite ease-in-out;
}

/* Miglioramento leggibilità scritte grigie su sfondo animato (Cybervangelo/Three.js) */
body.dark-theme .text-slate-300 {
  color: #ffffff !important; /* Bianco acceso */
}
body.dark-theme .text-slate-400 {
  color: #f8fafc !important; /* Grigio molto chiaro (quasi bianco) */
}
body.dark-theme .text-slate-500 {
  color: #cbd5e1 !important; /* Grigio chiaro leggibile */
}

/* ==========================================
   VETRINA POPUP SYSTEM (MODALS & CARDS)
   ========================================== */

.vetrina-modal {
  transition: opacity 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out;
}

.vetrina-modal.show {
  opacity: 1 !important;
}

/* Transizione all'apertura del pannello interno */
.vetrina-modal > div {
  transform: scale(0.95) translateY(10px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.vetrina-modal.show > div {
  transform: scale(1) translateY(0);
}

/* Scrollbar personalizzata elegante per le vetrine */
.vetrina-scroll-container::-webkit-scrollbar {
  height: 6px;
}

.vetrina-scroll-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 999px;
}

.vetrina-scroll-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  transition: background 0.2s;
}

.vetrina-scroll-container::-webkit-scrollbar-thumb:hover {
  background: rgba(14, 165, 233, 0.5); /* Sky blue glow */
}

/* Stili per le card della vetrina */
.vetrina-card {
  width: 290px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: rgba(10, 15, 30, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 1.25rem;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  scroll-snap-align: start;
}

.vetrina-card:hover {
  transform: translateY(-6px);
  border-color: rgba(14, 165, 233, 0.3);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5), 0 0 15px rgba(14, 165, 233, 0.1);
}

/* Badge Featured nella vetrina */
.vetrina-featured-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 20;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: white;
  font-size: 8px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.4);
}

/* Freccetta animata per Vedi tutti i libri */
@keyframes bounce-horizontal {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(6px);
  }
}
.animate-bounce-horizontal {
  display: inline-block;
  animation: bounce-horizontal 1.2s infinite ease-in-out;
}