/* ==========================================================================
   CUTNERO POST PRODUCTION STUDIO - KEYFRAMES, SCROLL REVEALS & CURSOR
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DUAL MARQUEE INFINITE SCROLL KEYFRAMES
   -------------------------------------------------------------------------- */
@keyframes marquee-scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes marquee-scroll-right {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

/* --------------------------------------------------------------------------
   2. PULSE & GLOW KEYFRAMES
   -------------------------------------------------------------------------- */
@keyframes pulse-glow {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 10px var(--cutnero-orange);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.3);
    box-shadow: 0 0 20px var(--cutnero-orange);
  }
}

@keyframes float-gentle {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.float-animation {
  animation: float-gentle 4s infinite ease-in-out;
}

/* --------------------------------------------------------------------------
   2B. HERO AUDIENCE ICON ANIMATIONS
   -------------------------------------------------------------------------- */
@keyframes icon-heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.25); filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.6)); }
  28% { transform: scale(1); }
  42% { transform: scale(1.18); filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.4)); }
  70% { transform: scale(1); }
}

@keyframes icon-sparkle-pulse {
  0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 4px rgba(255, 0, 122, 0.4)); }
  50% { transform: scale(1.2) rotate(12deg); filter: drop-shadow(0 0 10px rgba(255, 0, 122, 0.8)); }
}

@keyframes icon-play-bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15) translateY(-2px); filter: drop-shadow(0 0 6px rgba(255, 0, 0, 0.5)); }
}

@keyframes icon-float-subtle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* --------------------------------------------------------------------------
   3. CUSTOM CURSOR & AURA FOLLOWER (LIGHT THEME)
   -------------------------------------------------------------------------- */
.custom-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--cutnero-orange);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease, background-color 0.2s ease;
}

.custom-cursor-aura {
  position: fixed;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  border: 1.5px solid rgba(255, 94, 54, 0.4);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: transform 0.18s ease-out, border-color 0.25s ease, width 0.25s ease, height 0.25s ease;
  background: rgba(255, 94, 54, 0.04);
}

body.cursor-hover .custom-cursor-dot {
  transform: translate(-50%, -50%) scale(2.2);
  background: var(--cutnero-pink);
}

body.cursor-hover .custom-cursor-aura {
  width: 65px;
  height: 65px;
  border-color: rgba(255, 0, 122, 0.6);
  background: rgba(255, 0, 122, 0.08);
}

@media (hover: none) and (pointer: coarse) {
  .custom-cursor-dot, .custom-cursor-aura {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   4. SCROLL REVEAL POP-UP ANIMATIONS (IntersectionObserver)
   -------------------------------------------------------------------------- */
.reveal-fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-pop-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

.is-visible {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) !important;
}

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