/**
 * Animations CSS for Index Page
 * Keyframes, transitions, and scroll-triggered animations
 */

/* Keyframe Animations */
@keyframes successSlideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes shield-pulse {
    0%, 100% { 
        transform: scale(1);
        filter: drop-shadow(0 0 0 transparent);
    }
    50% { 
        transform: scale(1.05);
        filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.3));
    }
}

/* Accessibility: Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll,
    .how-it-works-section .neomorphism-steps li,
    .how-it-works-section .security-shield,
    .connecting-line,
    .guides-link,
    .privacy-text,
    .animate-card-title,
    .security-badge {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* How It Works Animation Styles */
.how-it-works-section .neomorphism-steps {
    position: relative;
}

.how-it-works-section .neomorphism-steps li {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.how-it-works-section .neomorphism-steps li.animate-slide-in {
    opacity: 1;
    transform: translateX(0);
}

/* Stagger delays for animated steps */
.how-it-works-section .neomorphism-steps li:nth-child(2).animate-slide-in {
    transition-delay: 200ms;
}

.how-it-works-section .neomorphism-steps li:nth-child(3).animate-slide-in {
    transition-delay: 350ms;
}

.how-it-works-section .neomorphism-steps li:nth-child(4).animate-slide-in {
    transition-delay: 500ms;
}

.how-it-works-section .neomorphism-steps li:nth-child(5).animate-slide-in {
    transition-delay: 650ms;
}

.how-it-works-section .neomorphism-steps li:nth-child(6).animate-slide-in {
    transition-delay: 800ms;
}

/* Privacy Text Animation - Mobile Only */
@media (max-width: 768px) {
    .privacy-text {
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        transition-delay: 300ms;
    }

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

    /* Card title animations */
    .animate-card-title {
        opacity: 0;
        transform: translateY(-10px);
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .animate-card-title.animate-fade-down {
        opacity: 1;
        transform: translateY(0);
    }

    /* Security badges animation */
    .security-badge {
        display: block;
        opacity: 0;
        transform: translateX(-20px);
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .security-badge.animate-badge {
        opacity: 1;
        transform: translateX(0);
    }
    
    .how-it-works-section .neomorphism-steps li {
        transform: translateX(-20px);
    }
    
    .privacy-text {
        transform: translateY(15px);
    }
}

/* Ensure floating nav is always visible above content */
@media (max-width: 768px) {
    /* Prevent sections from overlapping floating nav */
    .card, .cta-section {
        position: relative;
        z-index: 1;
    }
    
    /* Ensure body doesn't cut off fixed elements */
    html, body {
        overflow-x: hidden;
        position: relative;
        /* Reset any transforms that might affect fixed positioning */
        transform: none !important;
    }
    
    /* Ensure main content doesn't have transforms that affect fixed children */
    main, .container, .row, .col-12, .col-md-8, .col-lg-6 {
        transform: none !important;
        position: relative;
    }
    
    /* Ensure parent elements don't interfere with floating nav */
    .how-it-works-section,
    .col-lg-4,
    .card,
    .container,
    .row,
    main,
    body {
        /* Prevent these from creating new stacking contexts or positioning contexts */
        position: static !important;
        transform: none !important;
        contain: none !important;
        /* Ensure no backdrop filters or other effects that create new contexts */
        backdrop-filter: none !important;
        filter: none !important;
        /* Prevent any 3D transforms */
        transform-style: flat !important;
        /* Ensure no isolation contexts */
        isolation: auto !important;
    }
    
    /* Specific rule to ensure floating nav is always positioned relative to viewport */
    html {
        /* Ensure the root element doesn't interfere */
        transform: none !important;
        position: static !important;
    }
}

/* Modal media styling */
.step-media-modal {
    margin: 1rem 0;
    text-align: center;
}

.modal-step-image,
.modal-step-gif {
    transition: transform 0.3s ease;
    cursor: pointer;
}

.modal-step-image:hover,
.modal-step-gif:hover {
    transform: scale(1.02);
}

.modal-gif-container {
    display: inline-block;
    position: relative;
}

.modal-step-video {
    background: #000;
}

/* Upload Zone Hover Animations */
.upload-zone {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.upload-zone:hover {
    transform: translateY(-1px);
}

/* Provider Logo Animations */
.provider-logo,
.provider-logo-compact {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.provider-logo-compact:hover {
    transform: translateY(-1px);
}

/* Button Hover Animations */
.btn-primary,
.cta-button,
.guides-link {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.cta-button:hover {
    transform: translateY(-2px) !important;
}

.hero-logo-link {
    transition: transform 0.3s ease !important;
}

.hero-logo-link:hover {
    transform: scale(1.02) !important;
}

/* CTA Title Hover Animation */
.cta-title {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.cta-title:hover {
    transform: translateY(-2px) !important;
}

/* Form Element Animations */
.form-select,
.currency-select,
.anonymization-toggle-container {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Toggle Switch Animations */
.slider,
.slider:before {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tooltip Animations */
.privacy-tooltip-content,
.custom-tooltip .tooltip-text {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.privacy-help-icon {
    transition: all 0.3s ease;
}

.privacy-help-icon:hover {
    transform: scale(1.1);
}

/* Neomorphism Step Hover Animations */
.neomorphism-steps li::before {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.neomorphism-steps li:hover::before {
    transform: translateY(-50%) scale(1.05);
}

/* Icon Animations */
.guides-link i:last-child {
    transition: transform 0.3s ease;
}

.guides-link:hover i:last-child {
    transform: translateX(2px);
}

.custom-tooltip i {
    transition: color 0.3s ease;
}

/* Provider Image Filters */
.provider-logo img,
.provider-logo-compact img {
    transition: filter 0.3s ease;
}