/* ==========================================================================
   ANIMATIONS & DYNAMIC EFFECTS - RCD (RISE UP CREATIVE DIGITAL)
   ========================================================================== */

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

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

@keyframes pulseGoldGlow {
  0%, 100% {
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.25), 0 0 60px rgba(212, 175, 55, 0.1);
  }
  50% {
    box-shadow: 0 0 45px rgba(212, 175, 55, 0.45), 0 0 90px rgba(212, 175, 55, 0.2);
  }
}

@keyframes pulseRoseGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(230, 57, 70, 0.2);
  }
  50% {
    box-shadow: 0 0 40px rgba(230, 57, 70, 0.45);
  }
}

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

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

@keyframes shineSweep {
  0% {
    left: -120%;
  }
  50%, 100% {
    left: 140%;
  }
}

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

@keyframes marqueeScroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes ripple {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Utilities for classes */
.anim-float {
  animation: floatSlow 6s ease-in-out infinite;
}

.anim-float-rev {
  animation: floatReverse 7s ease-in-out infinite;
}

.anim-pulse-gold {
  animation: pulseGoldGlow 4s ease-in-out infinite;
}

.anim-rotate-slow {
  animation: rotateCrest 45s linear infinite;
}

.anim-rotate-rev {
  animation: rotateSlowReverse 35s linear infinite;
}

/* Hover shine button */
.btn-shine-effect {
  position: relative;
  overflow: hidden;
}

.btn-shine-effect::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.25),
    rgba(247, 223, 148, 0.4),
    transparent
  );
  transform: skewX(-25deg);
  pointer-events: none;
}

.btn-shine-effect:hover::before {
  animation: shineSweep 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Scroll reveal utility classes handled via IntersectionObserver in JS */
.reveal-init {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-init.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-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-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(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-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

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

.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* ==========================================================================
   RCD INTRO SCREEN - REFINED & TASTEFUL ANIMATIONS (CLEAN, NOT LEBAY)
   ========================================================================== */
@keyframes cleanRingDraw {
  0% {
    stroke-dashoffset: 290;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes cleanLogoIn {
  0% {
    opacity: 0;
    transform: scale(0.92);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px);
  }
}

@keyframes cleanGlintPass {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}

@keyframes cleanTitleSlideUp {
  0% {
    transform: translateY(115%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes cleanLineScale {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }
  100% {
    transform: scaleX(1);
    opacity: 0.85;
  }
}