/**
 * Modern SaaS Animations
 * Subtle, performant animations for gtechlogic.com homepage
 */

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

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

/* Base hidden state */
.animate-on-scroll,
.fade-up,
.fade-in,
.scale-in {
    opacity: 0;
    will-change: opacity, transform;
}

/* Fade Up Animation */
.fade-up {
    transform: translateY(20px);
    transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-up.animate-show {
    opacity: 1;
    transform: translateY(0);
}

/* Fade In Animation */
.fade-in {
    transform: translateY(10px);
    transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Scale In Animation (for cards/icons) */
.scale-in {
    transform: scale(0.95) translateY(10px);
    transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Generic animate-show class */
.animate-show {
    opacity: 1 !important;
    transform: none !important;
}

/* ============================================
   HERO SECTION ANIMATIONS (Page Load)
   ============================================ */

.hero-label {
    opacity: 0;
    transform: translateY(15px);
    animation: heroFadeUp 700ms cubic-bezier(0.16, 1, 0.3, 1) 0ms forwards;
}

.hero--primary h1 {
    opacity: 0;
    transform: translateY(20px);
    animation: heroFadeUp 700ms cubic-bezier(0.16, 1, 0.3, 1) 100ms forwards;
}

.hero-description {
    opacity: 0;
    transform: translateY(20px);
    animation: heroFadeUp 700ms cubic-bezier(0.16, 1, 0.3, 1) 200ms forwards;
}

.hero-actions {
    opacity: 0;
    transform: translateY(20px);
    animation: heroFadeUp 700ms cubic-bezier(0.16, 1, 0.3, 1) 300ms forwards;
}

@keyframes heroFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   CARD HOVER ANIMATIONS
   ============================================ */

.card,
.bg-white.border.rounded,
.capability-card {
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.card:hover,
.bg-white.border.rounded:hover,
.capability-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
}

/* Prevent hover on mobile */
@media (max-width: 768px) {
    .card:hover,
    .bg-white.border.rounded:hover,
    .capability-card:hover {
        transform: none;
    }
}

/* ============================================
   STAGGER ANIMATIONS
   ============================================ */

/* Stagger delay classes */
.stagger-1 { transition-delay: 0ms; }
.stagger-2 { transition-delay: 50ms; }
.stagger-3 { transition-delay: 100ms; }
.stagger-4 { transition-delay: 150ms; }
.stagger-5 { transition-delay: 200ms; }
.stagger-6 { transition-delay: 250ms; }

/* ============================================
   BUTTON HOVER ENHANCEMENTS
   ============================================ */

.btn-primary,
.btn-dark,
.hero-actions .btn {
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary:hover,
.btn-dark:hover,
.hero-actions .btn:hover {
    transform: translateY(-2px);
}

/* ============================================
   CLEANUP AFTER ANIMATION
   ============================================ */

.animate-complete {
    will-change: auto;
}