/* ==========================================================================
   Red Ruby Custom CSS - Animations & Global Utilities
   ========================================================================== */

/* Typography Overrides */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif;
  letter-spacing: -0.02em;
}

body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Scroll Animation Base Classes */
.scroll-animate {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: 600ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-animate[data-animation="fade-in-up"] {
  transform: translateY(30px);
}

.scroll-animate[data-animation="fade-in-left"] {
  transform: translateX(-40px);
}

.scroll-animate[data-animation="fade-in-right"] {
  transform: translateX(40px);
}

.scroll-animate.animated {
  opacity: 1;
  transform: translate(0) scale(1) !important;
}

/* Stagger Delays */
.scroll-animate[data-delay="100"] { transition-delay: 100ms; }
.scroll-animate[data-delay="200"] { transition-delay: 200ms; }
.scroll-animate[data-delay="300"] { transition-delay: 300ms; }
.scroll-animate[data-delay="400"] { transition-delay: 400ms; }

/* Custom Keyframe Animations */
@keyframes floating {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

.animate-floating {
  animation: floating 6s ease-in-out infinite;
}

@keyframes slowPulse {
  0% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 0.8; }
}

.animate-slow-pulse {
  animation: slowPulse 4s ease-in-out infinite;
}

/* Custom Navigation Highlight Effect */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #b91c1c; /* ruby red */
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover::after, .nav-link.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.dark .nav-link::after {
  background-color: #ef4444; /* light ruby for dark mode */
}

.logo-img {
  height: 100px;
  width: auto;
  object-fit: contain;
}

/* FAQ Accordion Styling */
.faq-content {
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
}

.faq-item.active .faq-content {
  opacity: 1;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

/* Partner Logo Hover Transition */
.partner-logo-container img {
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.partner-logo-container:hover img {
  transform: scale(1.05);
}

/* Infinite Marquee Animation */
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  display: flex;
  width: max-content;
  animation: marquee 25s linear infinite;
}

.animate-marquee:hover {
  animation-play-state: paused;
}