/* ============================================
   MOBILE ANIMATIONS CSS
   Unique animations and effects for mobile views
   ============================================ */

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */

/* Touch Ripple Expand */
@keyframes rippleExpand {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(40);
    opacity: 0;
  }
}

/* Mobile Float - Enhanced floating animation */
@keyframes mobileFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-10px) rotate(0.5deg);
  }
  50% {
    transform: translateY(-5px) rotate(0deg);
  }
  75% {
    transform: translateY(-15px) rotate(-0.5deg);
  }
}

/* Pulse Glow Animation */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(212, 175, 55, 0.3),
                0 0 10px rgba(212, 175, 55, 0.2),
                0 0 15px rgba(212, 175, 55, 0.1);
  }
  50% {
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5),
                0 0 20px rgba(212, 175, 55, 0.3),
                0 0 30px rgba(212, 175, 55, 0.2);
  }
}

/* Stagger Reveal */
@keyframes staggerReveal {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Text Reveal Slide */
@keyframes textRevealSlide {
  0% {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Shimmer Effect */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Elastic Bounce */
@keyframes elasticBounce {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(0.95);
  }
  50% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
  }
}

/* Smooth Fade In */
@keyframes smoothFadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Menu Item Slide */
@keyframes menuItemSlide {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Image Reveal */
@keyframes imageReveal {
  0% {
    opacity: 0;
    transform: scale(1.1);
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

/* Button Press */
@keyframes buttonPress {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

/* Gradient Shift */
@keyframes gradientShift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Icon Bounce */
@keyframes iconBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* Subtle Shake */
@keyframes subtleShake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-2px);
  }
  75% {
    transform: translateX(2px);
  }
}

/* Scale Pop */
@keyframes scalePop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Rotate In */
@keyframes rotateIn {
  0% {
    transform: rotate(-10deg) scale(0.9);
    opacity: 0;
  }
  100% {
    transform: rotate(0) scale(1);
    opacity: 1;
  }
}

/* Border Glow */
@keyframes borderGlow {
  0%, 100% {
    border-color: rgba(212, 175, 55, 0.3);
  }
  50% {
    border-color: rgba(212, 175, 55, 0.8);
  }
}

/* ============================================
   ANIMATION CLASSES
   ============================================ */

/* Touch Ripple Container */
.touch-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.3);
  transform: scale(0);
  animation: rippleExpand 0.6s ease-out forwards;
  pointer-events: none;
  z-index: 1;
}

/* Mobile Animate Ready State */
.mobile-animate-ready {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger Reveal Items */
.stagger-reveal-item {
  animation: staggerReveal 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

/* Pulse Glow Effect */
.pulse-glow {
  animation: pulseGlow 3s ease-in-out infinite;
}

/* Text Reveal Animation */
.text-reveal-animate {
  animation: textRevealSlide 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Card Touch State */
.card-touched {
  transform: scale(0.98) !important;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out !important;
}

/* Header Scroll States */
.header-scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.header-hidden {
  transform: translateY(-100%) !important;
  transition: transform 0.3s ease-in-out !important;
}

.header:not(.header-hidden) {
  transform: translateY(0) !important;
  transition: transform 0.3s ease-in-out !important;
}

/* Menu Item Animation */
.menu-item-animate {
  animation: menuItemSlide 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Button States */
.btn-pressed {
  transform: scale(0.95) !important;
  transition: transform 0.1s ease-out !important;
}

.btn-released {
  animation: elasticBounce 0.4s ease-out;
}

/* Image Loading States */
.img-loading {
  opacity: 0;
  transform: scale(1.05);
  filter: blur(5px);
}

.img-revealed {
  animation: imageReveal 0.5s ease-out forwards;
}

/* Shimmer Effect */
.shimmer-effect {
  background: linear-gradient(
    90deg,
    rgba(212, 175, 55, 0.05) 0%,
    rgba(212, 175, 55, 0.15) 50%,
    rgba(212, 175, 55, 0.05) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Elastic Button */
.elastic-button {
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

.elastic-button:active {
  animation: elasticBounce 0.4s ease-out;
}

/* Smooth Appear */
.smooth-appear {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.smooth-appear.appeared {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   MOBILE-SPECIFIC STYLES (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {
  /* Enhanced Card Hover/Touch */
  .card-3d,
  .bento-item,
  .feature-card,
  .contact-card {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s ease-out !important;
  }

  /* Navigation Items */
  .navbar-menu li {
    opacity: 0;
    transform: translateX(-20px);
  }

  .navbar-menu.active li {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  }

  /* Staggered menu item delays */
  .navbar-menu.active li:nth-child(1) { transition-delay: 0.05s; }
  .navbar-menu.active li:nth-child(2) { transition-delay: 0.1s; }
  .navbar-menu.active li:nth-child(3) { transition-delay: 0.15s; }
  .navbar-menu.active li:nth-child(4) { transition-delay: 0.2s; }
  .navbar-menu.active li:nth-child(5) { transition-delay: 0.25s; }

  /* Hero Section Animations */
  .hero-title {
    animation: textRevealSlide 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
  }

  .hero-subtitle {
    animation: textRevealSlide 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
  }

  .hero-actions {
    animation: smoothFadeIn 0.6s ease-out 0.6s both;
  }

  /* Buttons with gradient animation */
  .btn-primary {
    background-size: 200% 200%;
    animation: gradientShift 4s ease infinite;
  }

  /* Icons bounce on scroll into view */
  .feature-icon,
  .feature-icon-primary,
  .feature-icon-secondary,
  .contact-icon {
    animation: iconBounce 2s ease-in-out infinite;
    animation-play-state: paused;
  }

  .mobile-animate-in .feature-icon,
  .mobile-animate-in .feature-icon-primary,
  .mobile-animate-in .feature-icon-secondary,
  .mobile-animate-in .contact-icon {
    animation-play-state: running;
  }

  /* Footer social links */
  .social-link {
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }

  .social-link:active {
    transform: scale(0.9);
  }

  /* Language dropdown animation */
  .language-dropdown {
    transform-origin: top right;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0.2s;
  }

  .language-selector:focus-within .language-dropdown,
  .language-dropdown.active {
    animation: scalePop 0.3s ease-out forwards;
  }

  /* Bento items with stagger */
  .bento-grid .bento-item:nth-child(1) { animation-delay: 0s; }
  .bento-grid .bento-item:nth-child(2) { animation-delay: 0.1s; }
  .bento-grid .bento-item:nth-child(3) { animation-delay: 0.2s; }
  .bento-grid .bento-item:nth-child(4) { animation-delay: 0.3s; }
  .bento-grid .bento-item:nth-child(5) { animation-delay: 0.4s; }

  /* Service cards pop in */
  .card-3d {
    animation: scalePop 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
  }

  /* CTA section glow */
  .cta-section .glass-panel {
    animation: borderGlow 3s ease-in-out infinite;
    border: 2px solid rgba(212, 175, 55, 0.3);
  }
}

/* ============================================
   SMALL MOBILE (max-width: 767px)
   ============================================ */
@media (max-width: 767px) {
  /* Faster animations for smaller devices */
  .mobile-animate-ready {
    transition-duration: 0.4s;
  }

  .stagger-reveal-item {
    animation-duration: 0.4s;
  }

  /* Simplified floating for performance */
  @keyframes mobileFloat {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-8px);
    }
  }

  /* Touch feedback for interactive elements */
  .nav-link:active,
  .btn:active,
  .dropdown-item:active {
    background: rgba(212, 175, 55, 0.15) !important;
    transition: background 0.1s ease-out;
  }

  /* Menu slide from left */
  .navbar-menu {
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.35s ease-out,
                visibility 0.35s;
  }

  .navbar-menu.active {
    transform: translateX(0);
  }

  /* Hamburger animation */
  .mobile-menu-toggle .hamburger {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease-out;
  }

  /* Cards scale down slightly on touch */
  .card-3d:active,
  .bento-item:active {
    transform: scale(0.97);
  }

  /* Hero glass container subtle animation */
  .hero-glass-container {
    animation: mobileFloat 6s ease-in-out infinite;
  }

  /* Scroll indicator pulse */
  .scroll-indicator {
    animation: iconBounce 1.5s ease-in-out infinite;
  }
}

/* ============================================
   VERY SMALL MOBILE (max-width: 374px)
   ============================================ */
@media (max-width: 374px) {
  /* Reduce animation complexity */
  .pulse-glow {
    animation: none;
  }

  .mobile-animate-ready {
    transition-duration: 0.3s;
  }

  /* Simpler transforms */
  .card-touched {
    transform: scale(0.98) !important;
  }
}

/* ============================================
   REDUCED MOTION PREFERENCE
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .mobile-animate-ready {
    opacity: 1;
    transform: none;
  }

  .pulse-glow,
  .shimmer-effect {
    animation: none;
  }

  .elastic-button {
    transition: none !important;
  }
}

/* ============================================
   DARK MODE ADJUSTMENTS
   ============================================ */
[data-theme="dark"] .touch-ripple {
  background: rgba(212, 175, 55, 0.4);
}

[data-theme="dark"] .header-scrolled {
  background: rgba(11, 37, 69, 0.95) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .shimmer-effect {
  background: linear-gradient(
    90deg,
    rgba(212, 175, 55, 0.08) 0%,
    rgba(212, 175, 55, 0.2) 50%,
    rgba(212, 175, 55, 0.08) 100%
  );
  background-size: 200% 100%;
}

[data-theme="dark"] .card-touched {
  box-shadow: 0 5px 25px rgba(212, 175, 55, 0.15) !important;
}

[data-theme="dark"] .pulse-glow {
  animation-name: pulseGlowDark;
}

@keyframes pulseGlowDark {
  0%, 100% {
    box-shadow: 0 0 5px rgba(212, 175, 55, 0.4),
                0 0 10px rgba(212, 175, 55, 0.2),
                0 0 15px rgba(212, 175, 55, 0.1);
  }
  50% {
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.6),
                0 0 25px rgba(212, 175, 55, 0.4),
                0 0 35px rgba(212, 175, 55, 0.2);
  }
}