/* ============================================
   SOUL RIO — Premium Animations & Dark-Mode Fixes
   ============================================ */

/* ------------------------------------------
   MOBILE MENU: Dark-mode text fix
   The header-scrolled CSS can override text colors
   with !important. These rules ensure the mobile
   menu panel always has readable text.
   ------------------------------------------ */
#mobileMenu {
  z-index: 50;
}

/* Light mode: dark text on light bg */
#mobileMenu a,
#mobileMenu button {
  color: rgb(26 40 48) !important;
}
#mobileMenu .text-secondary,
#mobileMenu .font-bold.text-secondary {
  color: rgb(184 145 106) !important;
}

/* Dark mode: light text on dark bg */
.dark #mobileMenu a,
.dark #mobileMenu button {
  color: rgba(232, 228, 223, 0.95) !important;
}
.dark #mobileMenu .text-secondary,
.dark #mobileMenu .font-bold.text-secondary {
  color: rgb(184 145 106) !important;
}

/* Hover states */
#mobileMenu a:hover,
#mobileMenu button:hover {
  color: rgb(184 145 106) !important;
}

/* ------------------------------------------
   ENHANCED REVEAL ANIMATIONS
   ------------------------------------------ */

/* Override default reveal for smoother feel */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Scale-up reveal */
.reveal-scale {
  opacity: 0;
  transform: scale(0.96) translateY(16px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Blur-to-clear reveal */
.reveal-blur {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(12px);
  transition:
    opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, filter, transform;
}
.reveal-blur.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Slide from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide from right */
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Image curtain reveal */
.reveal-image {
  position: relative;
  overflow: hidden;
}
.reveal-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(12 27 33);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}
.dark .reveal-image::after {
  background: rgb(10 17 24);
}
.reveal-image.is-visible::after {
  transform: scaleX(0);
  transform-origin: right;
}

/* Counter number animation */
.reveal-counter {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-counter.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Enhanced stagger (more variety) */
.stagger-1 { transition-delay: 0.08s; }
.stagger-2 { transition-delay: 0.16s; }
.stagger-3 { transition-delay: 0.24s; }
.stagger-4 { transition-delay: 0.32s; }
.stagger-5 { transition-delay: 0.40s; }
.stagger-6 { transition-delay: 0.48s; }
.stagger-7 { transition-delay: 0.56s; }
.stagger-8 { transition-delay: 0.64s; }

/* ------------------------------------------
   MICRO-INTERACTIONS
   ------------------------------------------ */

/* Smooth underline on hover for links */
.link-underline {
  position: relative;
}
.link-underline::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: rgb(184 145 106);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.link-underline:hover::after {
  width: 100%;
}

/* Glow shadow for CTA buttons on hover */
.btn-glow:hover {
  box-shadow: 0 0 30px rgba(184, 145, 106, 0.25), 0 0 60px rgba(184, 145, 106, 0.08);
}

/* Card tilt effect */
.card-tilt {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.card-tilt:hover {
  transform: perspective(1000px) rotateX(-2deg) rotateY(2deg) translateY(-4px);
}

/* Floating subtle animation */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.animate-float {
  animation: float 4s ease-in-out infinite;
}

/* Shimmer effect for premium labels */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer-text {
  background: linear-gradient(
    90deg,
    rgb(184 145 106) 0%,
    rgb(212 173 125) 40%,
    rgb(255 235 205) 50%,
    rgb(212 173 125) 60%,
    rgb(184 145 106) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s ease-in-out infinite;
}

/* Subtle pulse for "explore" indicators */
@keyframes gentlePulse {
  0%, 100% { opacity: 0.5; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}
.animate-gentle-pulse {
  animation: gentlePulse 2.5s ease-in-out infinite;
}

/* Section divider grow animation */
.section-divider {
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible .section-divider,
.reveal-left.is-visible .section-divider {
  width: 3rem;
}

/* Image parallax depth */
.parallax-slow {
  transition: transform 0.1s linear;
  will-change: transform;
}

/* Word-by-word text reveal */
.reveal-words .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-words.is-visible .word {
  opacity: 1;
  transform: translateY(0);
}

/* Line reveal decoration */
.line-reveal {
  position: relative;
  overflow: hidden;
}
.line-reveal::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgb(184 145 106);
  transform: translateX(-101%);
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.line-reveal.is-visible::before {
  transform: translateX(0);
}

/* ------------------------------------------
   REDUCED MOTION SAFETY
   ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-scale,
  .reveal-blur,
  .reveal-left,
  .reveal-right,
  .reveal-counter,
  .reveal-image,
  .reveal-words .word {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .reveal-image::after {
    display: none;
  }
  .animate-float,
  .shimmer-text,
  .animate-gentle-pulse {
    animation: none;
  }
}