/* ==========================================================================
   MUJIES STREAMING - ANIMATIONS & AMBIENT EFFECTS
   ========================================================================== */

/* Soft Ambient Pulse for Logo */
@keyframes neon-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 12px var(--brand-primary-glow));
  }
  50% {
    filter: drop-shadow(0 0 20px var(--brand-primary-glow)) drop-shadow(0 0 30px var(--brand-accent-glow));
  }
}

.animate-neon-pulse {
  animation: neon-pulse 3.5s infinite ease-in-out;
}

/* Floating 3D Device Animation */
@keyframes float-subtle {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(0.5deg);
  }
}

@keyframes float-reverse {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(8px) rotate(-0.5deg);
  }
}

.float-slow {
  animation: float-subtle 6s infinite ease-in-out;
}

.float-slow-reverse {
  animation: float-reverse 7s infinite ease-in-out;
}

/* Ambient Radial Glow Orb */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.45;
  transition: opacity var(--transition-medium);
}

[data-theme="light"] .glow-orb,
:root:not([data-theme="dark"]) .glow-orb {
  opacity: 0.25;
}

.glow-orb-cyan {
  background: radial-gradient(circle, var(--brand-primary-glow) 0%, transparent 70%);
}

.glow-orb-purple {
  background: radial-gradient(circle, var(--brand-accent-glow) 0%, transparent 70%);
}

/* Shimmer Highlight for Badges and CTA */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.animate-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 3.5s infinite;
}

/* TV Remote Click Simulation Pulse */
@keyframes remote-highlight-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(229, 9, 20, 0.6);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(229, 9, 20, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(229, 9, 20, 0);
  }
}

.remote-highlight {
  animation: remote-highlight-ring 1.8s infinite;
}

/* Live Stream indicator blink */
@keyframes live-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.live-indicator {
  width: 8px;
  height: 8px;
  background-color: #ef4444;
  border-radius: 50%;
  box-shadow: 0 0 8px #ef4444;
  display: inline-block;
  animation: live-blink 1.2s infinite ease-in-out;
}

/* Scroll reveal utility classes with progressive enhancement */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Modern Native Scroll-Driven Animations (with media query & support check) */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .scroll-reveal {
      animation: reveal-scale auto linear backwards;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }

    @keyframes reveal-scale {
      from {
        opacity: 0;
        transform: translateY(30px) scale(0.96);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
  }
}