/*====================================================
Sommaire (Table des matières)
1. Overlay global
2. Panneau principal
3. Textes
4. États & animations
5. Responsive
====================================================*/

/* 1. Overlay global */

.va-voxensCapOverlay{
  position:fixed;
  inset:0;
  z-index:97;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .26s ease, visibility .26s ease;
}

.va-voxensCapOverlay.is-open{
  opacity:1;
  visibility:visible;
}

/* 2. Panneau principal */

.va-voxensCapOverlay__panel{
  position:relative;
  width:min(92vw, 520px);
  border:2px solid rgba(96, 226, 255, 0.88);
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(96, 226, 255, 0.18), transparent 46%),
    linear-gradient(180deg, rgba(9, 18, 38, 0.96), rgba(4, 8, 20, 0.98));
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.56),
    0 0 0 1px rgba(255,255,255,0.05) inset,
    0 0 24px rgba(96, 226, 255, 0.42),
    0 0 58px rgba(28, 117, 255, 0.24);
  overflow:hidden;
  transform:translateY(14px) scale(calc(.985 * var(--site-global-zoom, 1)));
  transform-origin:center center;
  transition:transform .32s ease;
}

.va-voxensCapOverlay.is-open .va-voxensCapOverlay__panel{
  transform:translateY(0) scale(var(--site-global-zoom, 1));
}

.va-voxensCapOverlay__panel::before,
.va-voxensCapOverlay__panel::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}

.va-voxensCapOverlay__panel::before{
  background:
    linear-gradient(90deg, transparent 0%, rgba(96, 226, 255, 0.16) 22%, transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 22%);
}

.va-voxensCapOverlay__panel::after{
  inset:8px;
  border:1px solid rgba(183, 244, 255, 0.22);
  border-radius:16px;
  box-shadow:0 0 22px rgba(96, 226, 255, 0.16) inset;
}

/* 3. Textes */

.va-voxensCapOverlay__inner{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:28px 26px 26px;
  text-align:center;
}

.va-voxensCapOverlay__eyebrow{
  margin:0;
  color:rgba(183, 244, 255, 0.88);
  font:700 11px/1.2 Orbitron, Inter, system-ui, sans-serif;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.va-voxensCapOverlay__title{
  margin:0;
  color:#dff9ff;
  font:800 clamp(24px, 5vw, 34px)/1.1 Orbitron, Inter, system-ui, sans-serif;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-shadow:
    0 0 10px rgba(96, 226, 255, 0.50),
    0 0 26px rgba(28, 117, 255, 0.28);
}

.va-voxensCapOverlay__text{
  max-width:42ch;
  margin:0;
  color:rgba(253,253,244,.88);
  font:600 14px/1.55 Inter, system-ui, sans-serif;
}

.va-voxensCapOverlay__meter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  margin-top:4px;
  padding:7px 13px;
  border:1px solid rgba(96, 226, 255, 0.40);
  border-radius:999px;
  background:rgba(28, 117, 255, 0.14);
  color:#dff9ff;
  font:800 12px/1 Orbitron, Inter, system-ui, sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  box-shadow:0 0 16px rgba(96, 226, 255, 0.18);
}

/* 4. États & animations */

.va-voxensCapOverlay__spark{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:999px;
  background:#dff9ff;
  box-shadow:0 0 12px rgba(96, 226, 255, .72);
  opacity:.72;
  animation:vaVoxensCapSpark 2.8s ease-in-out infinite;
}

.va-voxensCapOverlay__spark--a{ left:10%; top:20%; animation-delay:.1s; }
.va-voxensCapOverlay__spark--b{ right:12%; top:30%; animation-delay:.8s; }
.va-voxensCapOverlay__spark--c{ left:18%; bottom:18%; animation-delay:1.4s; }

@keyframes vaVoxensCapSpark{
  0%,100%{ transform:scale(.76); opacity:.28; }
  45%{ transform:scale(1.12); opacity:.86; }
}

/* 5. Responsive */

@media (max-width:560px){
  .va-voxensCapOverlay{
    padding:18px;
  }

  .va-voxensCapOverlay__inner{
    padding:24px 20px 22px;
  }

  .va-voxensCapOverlay__text{
    font-size:13px;
  }
}