/* ==========================================================================
   PIN FIBER - ANIMACIONES, MICROINTERACCIONES SVG Y TRANSICIONES SCROLL
   Efectos Tipo Video Bidireccionales (Bajada y Subida) y Keyframes
   ========================================================================== */

/* --- Scroll Reveal Bidireccional (Tipo Video) --- */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(45px) scale(0.96);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Variaciones Direccionales */
.reveal-left {
  opacity: 0;
  transform: translateX(-50px) scale(0.96);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.reveal-right {
  opacity: 0;
  transform: translateX(50px) scale(0.96);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.reveal-zoom {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-zoom.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Retardos Escalonados */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

/* --- Transición Cinemática de Sección (Tipo Video) --- */
.cinema-scroll-section {
  position: relative;
  transition: background 0.6s ease;
}

/* Efecto de líneas de velocidad en scroll */
.speed-lines-stream {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.25;
}

.stream-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pinfiber-cyan), transparent);
  animation: streamMove 2.5s infinite linear;
}

@keyframes streamMove {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* --- Microanimaciones SVG para Planes y Beneficios --- */

/* 1. Pulso de Fibra Óptica */
.svg-pulse-fiber {
  animation: svgFiberGlow 2.5s ease-in-out infinite alternate;
}

@keyframes svgFiberGlow {
  0% { filter: drop-shadow(0 0 2px var(--pinfiber-cyan)); }
  100% { filter: drop-shadow(0 0 10px #00FFFF); }
}

/* 2. Gamepad Gamer Pulso */
.svg-gamer-pulse {
  animation: gamerVibe 3s infinite ease-in-out;
}

@keyframes gamerVibe {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.06) rotate(-3deg); }
  75% { transform: scale(1.06) rotate(3deg); }
}

/* 3. Pantallas Streaming en Sincronía */
.svg-streaming-float {
  animation: screenFloat 4s ease-in-out infinite alternate;
}

@keyframes screenFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-6px); }
}

/* 4. Halo Luminoso de Oferta */
.promo-badge-pulse {
  animation: badgePulse 2s infinite;
}

@keyframes badgePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 199, 0, 0.6);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 199, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 199, 0, 0);
  }
}

/* Botón con brillo deslizante */
.btn-shine-effect {
  position: relative;
  overflow: hidden;
}

.btn-shine-effect::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    60deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(25deg);
  animation: btnShine 4s infinite cubic-bezier(0.19, 1, 0.22, 1);
}

@keyframes btnShine {
  0% { left: -60%; }
  35%, 100% { left: 140%; }
}