/* ==========================================================================
   TRIYURAA - Premium B2B Website
   File: animations.css
   Description: Keyframes, hover effects, and micro-animations.
   ========================================================================== */

/* -----------------------------------------
   1. KEYFRAMES
----------------------------------------- */

/* Hero full-width Ken Burns */
@keyframes heroKenBurns {
  0%   { transform: scale(1)    translateX(0); }
  100% { transform: scale(1.08) translateX(-15px); }
}

/* Subtle float — for badges */
@keyframes subtleFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* Pulse glow — for primary CTAs */
@keyframes pulseGlow {
  0%   { box-shadow: 0 0 0 0 rgba(74, 103, 65, 0.4); }
  70%  { box-shadow: 0 0 0 12px rgba(74, 103, 65, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 103, 65, 0); }
}

/* Gold shimmer — for section-label pills */
@keyframes goldShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Fade-in-up (for custom non-AOS use) */
@keyframes fadeInUp {
  0%   { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Slide in from left */
@keyframes slideInLeft {
  0%   { opacity: 0; transform: translateX(-40px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Process step stagger */
@keyframes processStepIn {
  0%   { opacity: 0; transform: translateY(24px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Dot pulse for hero slide indicator */
@keyframes dotActivePulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}

/* -----------------------------------------
   2. ANIMATION UTILITY CLASSES
----------------------------------------- */

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

.animate-pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}

/* Ken Burns applied via inline bg on hero */
.hero-bg-image {
  animation: heroKenBurns 22s ease-in-out infinite alternate;
}

/* Active dot pulse */
.dot-active {
  animation: dotActivePulse 2.5s ease-in-out infinite;
}

/* -----------------------------------------
   3. BUTTON MICRO-ANIMATIONS
----------------------------------------- */

/* Arrow nudge on hover already handled in style.css via .btn:hover i */

/* Ripple effect on btn click */
.btn {
  position: relative;
  overflow: hidden;
}
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  animation: rippleAnim 0.55s linear;
  pointer-events: none;
}
@keyframes rippleAnim {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* -----------------------------------------
   4. FEATURE CARD HOVER ENHANCEMENTS
----------------------------------------- */

/* Icon box bounce on card hover */
.feature-card:hover .feature-icon-box {
  animation: iconBounce 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes iconBounce {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* -----------------------------------------
   5. SERVICE CARD ICON HOVER
----------------------------------------- */
.service-card:hover .service-card-icon {
  animation: iconBounce 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* -----------------------------------------
   6. FOOTER LINK MAGNETIC SLIDE
----------------------------------------- */
.footer-menu a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.3s ease;
}
.footer-menu a:hover {
  transform: translateX(6px);
}

/* -----------------------------------------
   7. PRODUCT CARD IMAGE ZOOM
----------------------------------------- */
.product-img-wrapper {
  overflow: hidden;
}
.product-img-wrapper img {
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.product-card:hover .product-img-wrapper img {
  transform: scale(1.07);
}

/* -----------------------------------------
   8. ABOUT IMAGE HOVER PARALLAX
----------------------------------------- */
.about-img-frame {
  overflow: hidden;
}
.about-img-frame img {
  transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.about-img-frame:hover img {
  transform: scale(1.04);
}

/* About stat badge float */
.about-stat-badge {
  animation: subtleFloat 5s ease-in-out infinite;
}

/* -----------------------------------------
   9. PROCESS STEP HOVER GLOW
----------------------------------------- */
.process-step {
  transition:
    transform 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    background 0.38s ease,
    border-color 0.38s ease,
    box-shadow 0.38s ease;
}
.process-step:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

/* -----------------------------------------
   10. NAV LINK UNDERLINE ANIMATION
----------------------------------------- */
.nav-link::after {
  transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* -----------------------------------------
   11. TOP SOCIAL ICON HOVER
----------------------------------------- */
.top-social-link,
.footer-social-link {
  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}
.top-social-link:hover,
.footer-social-link:hover {
  transform: translateY(-3px) scale(1.08);
}

/* -----------------------------------------
   12. HERO CERT BADGE SHIMMER
----------------------------------------- */
.hero-cert-badge {
  background-size: 200% auto;
}

/* -----------------------------------------
   13. SECTION LABEL FADE-IN
----------------------------------------- */
.section-label {
  animation: fadeInUp 0.6s ease both;
}

/* -----------------------------------------
   14. SCROLL INDICATOR (hero dots)
----------------------------------------- */
.hero-slide-dots .dot {
  transition: width 0.35s ease, background 0.35s ease;
}