/* ==========================================================================
   ANTRA DIGITAL MEDIA - Advanced Cinematic Keyframes & Animations
   ========================================================================== */

/* 1. Cinematic Fade-In-Up for elements */
.animate-fade-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2. Soft Floating widget effect */
.floating-element-1 {
  animation: float1 6s ease-in-out infinite;
}

.floating-element-2 {
  animation: float2 5s ease-in-out infinite;
}

.floating-element-3 {
  animation: float3 7s ease-in-out infinite;
}

@keyframes float1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(1deg); }
}

@keyframes float2 {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.02); }
}

@keyframes float3 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(-1.5deg); }
}

/* 3. Infinite Glow Pulsing for icons */
.pulse-glow-music {
  animation: pulseGlowMusic 3s ease-in-out infinite;
}

.pulse-glow-video {
  animation: pulseGlowVideo 3s ease-in-out infinite;
}

.pulse-glow-movie {
  animation: pulseGlowMovie 3s ease-in-out infinite;
}

@keyframes pulseGlowMusic {
  0%, 100% { box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4); }
  50% { box-shadow: 0 4px 30px rgba(124, 58, 237, 0.8); }
}

@keyframes pulseGlowVideo {
  0%, 100% { box-shadow: 0 4px 15px rgba(6, 182, 212, 0.4); }
  50% { box-shadow: 0 4px 30px rgba(6, 182, 212, 0.8); }
}

@keyframes pulseGlowMovie {
  0%, 100% { box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4); }
  50% { box-shadow: 0 4px 30px rgba(236, 72, 153, 0.8); }
}

/* 4. Active Soundwave Equalizer lines (CSS Graphic animation) */
.soundwave-indicator {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 20px;
  width: 30px;
}

.soundwave-bar {
  width: 3px;
  height: 5px;
  background: var(--accent-music);
  border-radius: 3px;
  animation: bounceSoundwave 1s ease-in-out infinite alternate;
}

.soundwave-bar:nth-child(2) {
  animation-delay: 0.2s;
  height: 10px;
  background: var(--accent-video);
}

.soundwave-bar:nth-child(3) {
  animation-delay: 0.4s;
  height: 15px;
  background: var(--accent-movie);
}

.soundwave-bar:nth-child(4) {
  animation-delay: 0.1s;
  height: 8px;
  background: var(--accent-gold);
}

@keyframes bounceSoundwave {
  0% { height: 4px; }
  100% { height: 20px; }
}

/* 5. Infinite Rotating Vinyl Record (for portfolio and music theme) */
.rotate-vinyl {
  animation: rotateVinyl 8s linear infinite;
}

@keyframes rotateVinyl {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 6. Subtle moving backdrop gradients */
.bg-cinematic-glow {
  background: linear-gradient(-45deg, #0a0a0c, #111116, #181822, #0d0c15);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 7. Hover Glowing Text */
.hover-neon-glow:hover {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5),
               0 0 20px var(--accent-music-glow);
  color: #fff;
}

/* Animation Delays */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }