/**
 * animations.css
 * Global GPU-accelerated premium animations for the SaaS Tools Hub.
 * Uses only high-performance layout properties (transform, opacity, filter)
 * and includes a media query to support reduced motion user settings.
 */

:root {
  --anim-fast:    0.2s ease;
  --anim-normal:  0.4s ease;
  --anim-slow:    0.8s cubic-bezier(0.16, 1, 0.3, 1);
  --anim-bounce:  0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  --anim-spring:  0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --anim-elastic: 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* MANDATORY: Respect reduced motion user settings */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════
   1. PAGE LOAD ANIMATIONS
   ══════════════════════════════════════════════════ */

/* Dynamic SVG logo stroke draw */
@keyframes svgLogoStroke {
  0% {
    stroke-dasharray: 0 100;
    stroke-dashoffset: 100;
  }
  100% {
    stroke-dasharray: 100 0;
    stroke-dashoffset: 0;
  }
}
.animate-logo-draw {
  animation: svgLogoStroke 1.5s var(--anim-slow) forwards;
}

/* Staggered cards slide up with delay */
@keyframes cardStaggerUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-stagger-card {
  opacity: 0;
  animation: cardStaggerUp 0.6s var(--anim-spring) forwards;
}

/* Hero Section Fade-up */
@keyframes heroFadeUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-hero-fade {
  animation: heroFadeUp 0.8s var(--anim-slow) forwards;
}

/* ══════════════════════════════════════════════════
   2. SCROLL REVEALS
   ══════════════════════════════════════════════════ */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--anim-normal), transform var(--anim-normal);
}
.reveal-on-scroll.active {
  opacity: 1;
  transform: translateY(0);
}

@keyframes headingWordReveal {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.word-reveal-span {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.word-reveal-span span {
  display: inline-block;
  animation: headingWordReveal 0.6s var(--anim-slow) forwards;
}

/* ══════════════════════════════════════════════════
   3. CUSTOM CURSOR EFFECTS
   ══════════════════════════════════════════════════ */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--primary);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, background-color 0.2s;
  will-change: transform, width, height;
}
.custom-cursor.hover {
  width: 40px;
  height: 40px;
  background-color: rgba(79, 70, 229, 0.1);
  border-color: var(--primary-light);
}

/* ══════════════════════════════════════════════════
   4. HOME HERO PARTICLES
   ══════════════════════════════════════════════════ */
#heroParticlesCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

/* ══════════════════════════════════════════════════
   5. BUTTON & INTERACTIVE STATES
   ══════════════════════════════════════════════════ */

/* CTA Shimmer sweeping wave hover effect */
.btn-shimmer {
  position: relative;
  overflow: hidden;
}
.btn-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  transition: none;
}
.btn-shimmer:hover::after {
  left: 150%;
  transition: all 0.75s ease-in-out;
}

/* Copy to clipboard checkmark morph animation */
@keyframes checkmarkMorph {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.morph-check-success {
  animation: checkmarkMorph 0.35s var(--anim-bounce) forwards;
}

/* Premium pulsing glow effect */
@keyframes premiumPulsingGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(124, 58, 237, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(124, 58, 237, 0);
  }
}
.premium-glow-pulse {
  animation: premiumPulsingGlow 2s infinite;
}

/* ══════════════════════════════════════════════════
   6. PREMIUM CARD INTERACTION
   ══════════════════════════════════════════════════ */
.pricing-card-flip {
  perspective: 1000px;
}
.pricing-card-inner {
  transition: transform 0.6s var(--anim-spring);
  transform-style: preserve-3d;
}
.pricing-card-flip:hover .pricing-card-inner {
  transform: translateY(-8px);
}
.card-hover-glow {
  position: relative;
}
.card-hover-glow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(45deg, var(--primary), var(--secondary));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s;
}
.card-hover-glow:hover::before {
  opacity: 1;
}

/* ══════════════════════════════════════════════════
   7. SUN/MOON TOGGLE & MODE SWITCH
   ══════════════════════════════════════════════════ */
@keyframes sunMoonRotate {
  0% {
    transform: rotate(0) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(0.6);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}
.sun-moon-toggle-rotate {
  animation: sunMoonRotate 0.5s var(--anim-spring) forwards;
}

/* ══════════════════════════════════════════════════
   8. NAVBAR & GLASSMORPHISM
   ══════════════════════════════════════════════════ */
.navbar-glass {
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: padding var(--anim-normal), background-color var(--anim-normal);
}
.navbar-glass.scrolled {
  padding: 0.5rem 2rem;
  background: rgba(15, 23, 42, 0.85);
}

/* Underline slide navigation link */
.nav-underline-effect {
  position: relative;
}
.nav-underline-effect::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--primary);
  transition: width var(--anim-fast);
}
.nav-underline-effect:hover::after,
.nav-underline-effect.active::after {
  width: 100%;
}

/* ══════════════════════════════════════════════════
   9. SYSTEM LOADERS & SKELETON
   ══════════════════════════════════════════════════ */
@keyframes skeletonShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
.shimmer-skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 25%,
    rgba(255, 255, 255, 0.08) 37%,
    rgba(255, 255, 255, 0.03) 63%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s infinite;
}

@keyframes spinnerRotate {
  100% {
    transform: rotate(360deg);
  }
}
.spinning-gear {
  animation: spinnerRotate 2s linear infinite;
  transform-origin: center;
}

/* ══════════════════════════════════════════════════
   10. SECURE FORMS INPUT EFFECTS
   ══════════════════════════════════════════════════ */
.floating-label-group {
  position: relative;
}
.floating-label-input:focus ~ label,
.floating-label-input:not(:placeholder-shown) ~ label {
  top: -8px;
  font-size: 0.75rem;
  color: var(--primary);
  background-color: var(--bg-card);
  padding: 0 4px;
}

@keyframes formControlBorderSweep {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}
.form-input-focus-glow:focus {
  border-color: transparent;
  background-image: linear-gradient(var(--bg-card), var(--bg-card)), 
                    linear-gradient(90deg, var(--primary), var(--secondary));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  animation: formControlBorderSweep 2s linear infinite;
}

@keyframes shakeError {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.shake-validation-error {
  animation: shakeError 0.4s ease-in-out;
}

/* ══════════════════════════════════════════════════
   11. TOAST NOTIFICATIONS
   ══════════════════════════════════════════════════ */
@keyframes toastSlideIn {
  0% {
    transform: translateX(120%) translateY(0);
    opacity: 0;
  }
  50% {
    transform: translateX(-10px) translateY(0);
  }
  100% {
    transform: translateX(0) translateY(0);
    opacity: 1;
  }
}
.toast-slide-enter {
  animation: toastSlideIn 0.4s var(--anim-spring) forwards;
}

/* ══════════════════════════════════════════════════
   12. TOOL RESULTS
   ══════════════════════════════════════════════════ */
@keyframes resultsSlideUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.reveal-tool-results {
  animation: resultsSlideUp 0.6s var(--anim-slow) forwards;
}

/* ══════════════════════════════════════════════════
   13. TYPING & INTERACTIVE HERO GLOBE
   ══════════════════════════════════════════════════ */
.typing-caret {
  border-right: 2px solid var(--primary);
  animation: caretBlink 0.75s step-end infinite;
}
@keyframes caretBlink {
  from, to { border-color: transparent }
  50% { border-color: var(--primary); }
}

@keyframes floatingOrb {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-15px) scale(1.05); }
}
.hero-floating-orb {
  animation: floatingOrb 6s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════
   14. PREMIUM PADLOCK INTERACTION
   ══════════════════════════════════════════════════ */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.animate-float {
  animation: float 3s ease-in-out infinite;
}

@keyframes lockShake {
  0%, 100% { transform: rotate(0); }
  20%, 60% { transform: rotate(-8deg); }
  40%, 80% { transform: rotate(8deg); }
}
.lock-icon-shake {
  animation: lockShake 0.45s ease-in-out;
}

/* ══════════════════════════════════════════════════
   15. FOOTER SOCIALS & EXTRA
   ══════════════════════════════════════════════════ */
.footer-social-bounce:hover {
  transform: translateY(-5px);
  color: var(--secondary) !important;
  transition: transform 0.3s var(--anim-spring), color 0.3s;
}

@keyframes rocketLaunch {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  30% { transform: translateY(10px) scale(0.9); }
  100% { transform: translateY(-100px) scale(0.5); opacity: 0; }
}
.back-to-top-rocket:active {
  animation: rocketLaunch 0.5s ease-in-out forwards;
}