/*
 * Animations System - Draftr/Framer Motion Style
 * Smooth, professional scroll-based animations
 */

/* Progressive Enhancement - Only apply animations if JS is enabled */
.js-enabled .section:not(.hero-section),
.js-enabled .section:not(.hero-section) h2,
.js-enabled .section:not(.hero-section) h3,
.js-enabled .section:not(.hero-section) p,
.js-enabled .section:not(.hero-section) .card,
.js-enabled .section:not(.hero-section) .progression-item,
.js-enabled .section:not(.hero-section) ul li,
.js-enabled .credibility-item,
.js-enabled .credibility-badge {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.44, 0, 0.56, 1),
                transform 0.7s cubic-bezier(0.44, 0, 0.56, 1);
    will-change: opacity, transform;
}

/* Animated state - when element becomes visible */
.js-enabled .section:not(.hero-section).animated,
.js-enabled .section:not(.hero-section) h2.animated,
.js-enabled .section:not(.hero-section) h3.animated,
.js-enabled .section:not(.hero-section) p.animated,
.js-enabled .section:not(.hero-section) .card.animated,
.js-enabled .section:not(.hero-section) .progression-item.animated,
.js-enabled .section:not(.hero-section) ul li.animated,
.js-enabled .credibility-item.animated,
.js-enabled .credibility-badge.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Hero section elements */
.hero-text,
.hero-visual {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.44, 0, 0.56, 1),
                transform 0.8s cubic-bezier(0.44, 0, 0.56, 1);
}

.hero-text.animated,
.hero-visual.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Legacy reveal-on-scroll support */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal-on-scroll.is-visible,
.reveal-on-scroll.animated {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Stagger delays for sequential animations */
.delay-100 {
    transition-delay: 100ms;
}

.delay-200 {
    transition-delay: 200ms;
}

.delay-300 {
    transition-delay: 300ms;
}

.delay-400 {
    transition-delay: 400ms;
}

.delay-500 {
    transition-delay: 500ms;
}

.stagger-1 {
    transition-delay: 100ms;
}

.stagger-2 {
    transition-delay: 200ms;
}

.stagger-3 {
    transition-delay: 300ms;
}

.stagger-4 {
    transition-delay: 400ms;
}

.stagger-5 {
    transition-delay: 500ms;
}

/* Hover effects - Draftr style lift and shadow */
.hover-lift {
    transition: transform 0.3s cubic-bezier(0.44, 0, 0.56, 1),
                box-shadow 0.3s cubic-bezier(0.44, 0, 0.56, 1),
                background-color 0.2s ease;
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.15);
}

/* Button hover animations */
.btn {
    transition: all 0.3s cubic-bezier(0.44, 0, 0.56, 1);
}

.btn:hover {
    transform: translateY(-2px);
}

/* Card animations - specific tweaks */
.card {
    transition: all 0.5s cubic-bezier(0.44, 0, 0.56, 1);
}

/* Smooth anchor scrolling */
html {
    scroll-behavior: smooth;
}

/* Performance - Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Remove will-change after animation completes for better performance */
.animated {
    will-change: auto;
}

/* Specific element animations */

/* Progression items slide in from left */
.js-enabled .section:not(.hero-section) .progression-item:not(.animated) {
    opacity: 0;
    transform: translateX(-30px);
}

.js-enabled .section:not(.hero-section) .progression-item.animated {
    opacity: 1;
    transform: translateX(0);
}

/* List items slight slide from left */
.js-enabled .section:not(.hero-section) ul li:not(.animated) {
    opacity: 0;
    transform: translateX(-20px);
}

.js-enabled .section:not(.hero-section) ul li.animated {
    opacity: 1;
    transform: translateX(0);
}

/* Cards scale and fade in */
.js-enabled .section:not(.hero-section) .card:not(.animated) {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
}

.js-enabled .section:not(.hero-section) .card.animated {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Headings fade and slide up */
.js-enabled .section:not(.hero-section) h2:not(.animated),
.js-enabled .section:not(.hero-section) h3:not(.animated) {
    opacity: 0;
    transform: translateY(25px);
}

.js-enabled .section:not(.hero-section) h2.animated,
.js-enabled .section:not(.hero-section) h3.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Paragraphs subtle fade in */
.js-enabled .section:not(.hero-section) p:not(.animated) {
    opacity: 0;
    transform: translateY(15px);
}

.js-enabled .section:not(.hero-section) p.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Credibility items */
.js-enabled .credibility-item:not(.animated),
.js-enabled .credibility-badge:not(.animated) {
    opacity: 0;
    transform: translateX(-15px);
    transition: opacity 0.5s cubic-bezier(0.44, 0, 0.56, 1),
                transform 0.5s cubic-bezier(0.44, 0, 0.56, 1);
}

.js-enabled .credibility-item.animated,
.js-enabled .credibility-badge.animated {
    opacity: 1;
    transform: translateX(0);
}

/* Fade-in for backgrounds and subtle elements */
.fade-in {
    animation: fadeIn 0.8s cubic-bezier(0.44, 0, 0.56, 1) forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Slide up animation */
.slide-up {
    animation: slideUp 0.8s cubic-bezier(0.44, 0, 0.56, 1) forwards;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scale in animation */
.scale-in {
    animation: scaleIn 0.6s cubic-bezier(0.44, 0, 0.56, 1) forwards;
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}