/* ===========================
   VISONIX — EFFECTS.CSS
   AV-specific atmosphere, animations,
   and expressive UI treatments.
   All motion wrapped in prefers-reduced-motion.
   =========================== */

/* ===========================
   HERO WAVEFORM — EQ BARS
   Barras de ecualizador en la base del hero.
   Evocan un analizador de espectro de audio.
   =========================== */
.hero-eq {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 110px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  padding: 0 24px;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.15;
  z-index: 0;
}

.hero-eq-bar {
  flex: 1;
  background: linear-gradient(to top, var(--accent), var(--accent-2));
  border-radius: 2px 2px 0 0;
  transform-origin: bottom center;
  height: var(--h, 20%);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-eq-bar {
    animation: eq-pulse var(--dur, 1.4s) ease-in-out infinite alternate;
    animation-delay: var(--delay, 0s);
  }

  @keyframes eq-pulse {
    from { transform: scaleY(1); }
    to   { transform: scaleY(var(--peak, 1.6)); }
  }
}

/* ===========================
   HERO SPOTLIGHT BEAMS
   Haces de luz diagonal que evocan iluminación escénica.
   =========================== */
.hero-spotlight {
  position: absolute;
  top: -20%;
  right: 8%;
  width: 320px;
  height: 130%;
  background: conic-gradient(
    from 200deg at 50% 0%,
    transparent 0deg,
    rgba(77, 142, 255, 0.045) 12deg,
    rgba(34, 211, 238, 0.03) 22deg,
    transparent 32deg
  );
  transform-origin: top center;
  pointer-events: none;
  z-index: 0;
}

.hero-spotlight-2 {
  position: absolute;
  top: -20%;
  left: 12%;
  width: 260px;
  height: 120%;
  background: conic-gradient(
    from 165deg at 50% 0%,
    transparent 0deg,
    rgba(167, 139, 250, 0.03) 10deg,
    rgba(77, 142, 255, 0.025) 20deg,
    transparent 28deg
  );
  transform-origin: top center;
  pointer-events: none;
  z-index: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-spotlight {
    animation: spotlight-sway 8s ease-in-out infinite alternate;
  }
  .hero-spotlight-2 {
    animation: spotlight-sway-2 10s ease-in-out infinite alternate;
  }

  @keyframes spotlight-sway {
    from { transform: rotate(-4deg); opacity: 0.8; }
    to   { transform: rotate(4deg);  opacity: 1; }
  }
  @keyframes spotlight-sway-2 {
    from { transform: rotate(3deg);  opacity: 0.7; }
    to   { transform: rotate(-5deg); opacity: 1; }
  }
}

/* ===========================
   HERO SCAN LINE
   Línea horizontal sutil que barre el hero
   evocando el refresh de una pantalla LED de escenario.
   =========================== */
@media (prefers-reduced-motion: no-preference) {
  .hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(77, 142, 255, 0.22) 30%,
      rgba(34, 211, 238, 0.30) 50%,
      rgba(77, 142, 255, 0.22) 70%,
      transparent 100%
    );
    top: 0;
    animation: scan-line 7s linear infinite;
    pointer-events: none;
    z-index: 2;
  }

  @keyframes scan-line {
    from { transform: translateY(0);    opacity: 0; }
    5%   {                              opacity: 1; }
    95%  {                              opacity: 1; }
    to   { transform: translateY(100vh); opacity: 0; }
  }
}

/* ===========================
   HERO BADGE — entrada suave
   =========================== */
@media (prefers-reduced-motion: no-preference) {
  .hero-badge,
  .hero-title,
  .hero-subtitle,
  .hero-tags,
  .hero-buttons,
  .hero-stats {
    animation: fade-up 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .hero-badge    { animation-delay: 0.05s; }
  .hero-title    { animation-delay: 0.15s; }
  .hero-subtitle { animation-delay: 0.25s; }
  .hero-tags     { animation-delay: 0.35s; }
  .hero-buttons  { animation-delay: 0.44s; }
  .hero-stats    { animation-delay: 0.54s; }

  @keyframes fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0);    }
  }
}

/* ===========================
   HERO STATS — mini panel de control
   Indicador LIVE parpadeante tipo tally light.
   =========================== */
.hero-stats {
  position: relative;
}

.hero-stats::before {
  content: '▶ LIVE';
  position: absolute;
  top: -26px;
  right: 0;
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #4ade80;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-stats::before {
    animation: live-blink 2s step-start infinite;
  }
  @keyframes live-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
  }
}

/* Números de hero-stats con degradado */
.hero-stats .stat-number {
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--text) 0%, rgba(238,241,248,0.65) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===========================
   STAT CARDS — números de mayor impacto
   y glow radial por categoría de color.
   =========================== */
.stat-card {
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 110%,
    var(--stat-glow, rgba(77,142,255,0.08)) 0%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.stat-card:hover::before { opacity: 1; }

.stat-blue   { --stat-glow: rgba(77,142,255,0.14);  }
.stat-purple { --stat-glow: rgba(167,139,250,0.14); }
.stat-orange { --stat-glow: rgba(251,146,60,0.14);  }
.stat-green  { --stat-glow: rgba(74,222,128,0.14);  }

/* Números dramáticamente más grandes */
.stat-card .stat-number {
  font-size: clamp(4rem, 6vw, 6.5rem);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
  display: block;
}

/* Línea de acento debajo del número — crece al hover */
.stat-card .stat-number::after {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: currentColor;
  margin-top: 14px;
  opacity: 0.35;
  transition: width 0.35s ease, opacity 0.35s ease;
}
.stat-card:hover .stat-number::after {
  width: 52px;
  opacity: 0.65;
}

/* ===========================
   SERVICE CARDS — hover spotlight
   El pseudo-elemento traza el borde superior.
   =========================== */
.service-card {
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(77,142,255,0.07) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.service-card:hover::before { opacity: 1; }

/* Borde superior luminoso que se traza al hover */
.service-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--accent) 40%,
    var(--accent-2) 60%,
    transparent 100%
  );
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-card:hover::after { transform: scaleX(1); }

/* Etiqueta de canal AV sobre el icono */
.service-channel {
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent);
  opacity: 0.45;
  margin-bottom: 6px;
  display: block;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: no-preference) {
  .service-card:hover .service-icon {
    transform: scale(1.12) translateY(-3px);
  }
}

/* ===========================
   SERVICE LIST ITEMS (servicios.html)
   Acento lateral izquierdo animado.
   =========================== */
.service-item {
  position: relative;
}

.service-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom,
    transparent 0%,
    var(--accent) 50%,
    transparent 100%
  );
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.4s ease;
}

.service-item:hover::before { transform: scaleY(1); }

/* Número de canal en items del listado */
.service-item-number {
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent);
  opacity: 0.4;
  margin-bottom: 6px;
  display: block;
}

/* ===========================
   PROJECT CARDS — overlay de luz al hover
   =========================== */
.project-image-wrapper {
  position: relative;
}

.project-image-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 35%,
    rgba(6,6,8,0.65) 100%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.project-card:hover .project-image-wrapper::after { opacity: 1; }

/* Placeholder tipo pantalla LED con scan lines */
.project-placeholder {
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(255,255,255,0.012) 3px,
      rgba(255,255,255,0.012) 4px
    ),
    var(--surface-2);
}

@media (prefers-reduced-motion: no-preference) {
  .project-card:hover .project-placeholder {
    filter: brightness(1.18);
    transition: filter 0.35s ease;
  }
}

/* ===========================
   SECTION HEADER — separador tipo VU meter
   =========================== */
.section-header {
  padding-bottom: 4px;
}

/* ===========================
   CTA SECTION — línea inferior brillante
   =========================== */
.cta-section::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(77,142,255,0.35) 30%,
    rgba(34,211,238,0.45) 50%,
    rgba(77,142,255,0.35) 70%,
    transparent 100%
  );
}

/* ===========================
   FOOTER WAVE — waveform decorativo en el top border
   =========================== */
.footer {
  position: relative;
}

.footer-wave {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 44px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.6;
}

.footer-wave svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Wordmark VISONIX en footer con mayor presencia tipográfica */
.footer-brand-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  display: block;
  line-height: 1;
}

/* ===========================
   PAGE HEADER BEAM — haz de luz decorativo
   =========================== */
.page-header-beam {
  position: absolute;
  top: 0;
  right: 15%;
  width: 180px;
  height: 100%;
  background: conic-gradient(
    from 185deg at 50% 0%,
    transparent 0deg,
    rgba(77,142,255,0.045) 8deg,
    rgba(34,211,238,0.035) 14deg,
    transparent 20deg
  );
  pointer-events: none;
  transform-origin: top center;
  z-index: 0;
}

/* ===========================
   NAVBAR — señal de actividad tipo VU
   Tres puntos animados junto al logo.
   =========================== */
.nav-signal {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: 10px;
}

.nav-signal-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .nav-signal-dot:nth-child(1) { animation: sig-pulse 1.8s ease-in-out infinite; }
  .nav-signal-dot:nth-child(2) { animation: sig-pulse 1.8s ease-in-out 0.3s infinite; }
  .nav-signal-dot:nth-child(3) { animation: sig-pulse 1.8s ease-in-out 0.6s infinite; }

  @keyframes sig-pulse {
    0%, 100% { opacity: 0.3; transform: scaleY(1);   }
    50%       { opacity: 1;   transform: scaleY(1.5); }
  }
}

/* ===========================
   TEAM CARDS — avatar hover
   =========================== */
.team-card:hover .team-avatar {
  border-color: rgba(77,142,255,0.5);
  background: rgba(77,142,255,0.1);
  transition: background 0.25s ease, border-color 0.25s ease;
}

/* ===========================
   ABOUT VALUES — acento izquierdo animado
   =========================== */
.value-item {
  position: relative;
  overflow: hidden;
}

.value-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom,
    var(--accent) 0%,
    var(--accent-2) 100%
  );
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s ease;
}

.value-item:hover::before { transform: scaleY(1); }

/* ===========================
   NEWSLETTER FORM — glow al foco
   =========================== */
.newsletter-form:focus-within {
  border-color: rgba(77,142,255,0.45);
  box-shadow: 0 0 0 1px rgba(77,142,255,0.12),
              0 0 24px rgba(77,142,255,0.07);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* ===========================
   CONTACT FORM — barra de acento superior
   =========================== */
.contact-form {
  position: relative;
  overflow: hidden;
}

.contact-form::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--accent) 0%,
    var(--accent-2) 50%,
    transparent 100%
  );
}

/* ===========================
   RESPONSIVE
   =========================== */

/* --- 768px: ocultar efectos pesados --- */
@media (max-width: 768px) {
  /* Spotlights y beam: off en tablet/móvil */
  .hero-spotlight,
  .hero-spotlight-2,
  .page-header-beam { display: none; }

  /* EQ bars: reducir altura */
  .hero-eq { height: 70px; gap: 2px; }

  /* Waveform footer: off */
  .footer-wave { display: none; }

  /* Stat numbers: escalar a móvil */
  .stat-card .stat-number {
    font-size: clamp(2.8rem, 9vw, 4rem);
  }

  /* Hero stats números */
  .hero-stats .stat-number {
    font-size: clamp(1.8rem, 6vw, 2.6rem);
  }
}

/* --- 480px: desactivar EQ bars y scan line --- */
@media (max-width: 480px) {
  /* EQ bars: off en móvil pequeño */
  .hero-eq { display: none; }

  /* Desactivar scan line en móvil (render cost) */
  .hero::after { display: none !important; }

  /* Stat numbers más compactos */
  .stat-card .stat-number {
    font-size: clamp(2.4rem, 10vw, 3.4rem);
  }
}