/* Custom components for landing page */
/* These are the compiled versions of @layer components from input.css */

.btn-primary {
    position: relative;
    overflow: hidden;
    padding: 1rem 2rem;
    border-radius: 9999px;
    font-weight: 600;
    color: rgb(255 255 255);
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(99, 102, 241, 0.5);
}

.btn-secondary {
    padding: 1rem 2rem;
    border-radius: 9999px;
    font-weight: 600;
    border-width: 2px;
    border-color: rgb(99 102 241);
    color: rgb(79 70 229);
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.btn-secondary:hover {
    background-color: rgb(240 240 255);
    border-color: rgb(79 70 229);
    transform: translateY(-2px);
}

.glass-card {
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(24px);
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.text-gradient {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-padding {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (min-width: 768px) {
    .section-padding {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

@media (min-width: 1024px) {
    .section-padding {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
}

/* Optimized blur for mobile and tablets */
@media (max-width: 768px) {
    .blur-3xl {
        filter: blur(32px);
    }
    
    .blur-\[40px\] {
        filter: blur(24px);
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .blur-3xl {
        filter: blur(40px);
    }
    
    .blur-\[40px\] {
        filter: blur(32px);
    }
}

/* Base styles */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', sans-serif;
}

img {
    max-width: 100%;
    height: auto;
}

button, a {
    -webkit-tap-highlight-color: transparent;
}

section {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

/* Respect user preferences for reduced motion */
@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;
    }
    
    html {
        scroll-behavior: auto;
    }
}

/* Optimize rendering for transforms */
.animate-float,
.animate-fade-in-up,
.animate-fade-in-down,
[data-reveal],
.scroll-card {
    will-change: transform, opacity;
}

.animate-float:not(:hover),
.animate-fade-in-up:not([data-reveal]),
.animate-fade-in-down:not([data-reveal]) {
    will-change: auto;
}

/* Optimized benefit card shadows - using CSS instead of inline JS */
.benefit-card-wrapper {
    box-shadow: 0 10px 15px -3px var(--shadow-color, rgba(0, 0, 0, 0.1)), 
                0 4px 6px -4px var(--shadow-color, rgba(0, 0, 0, 0.1));
    transition: box-shadow 0.3s ease;
}

@media (hover: hover) {
    .benefit-card-wrapper:hover {
        box-shadow: 0 20px 25px -5px var(--shadow-color-active, rgba(0, 0, 0, 0.15)), 
                    0 8px 10px -6px var(--shadow-color-active, rgba(0, 0, 0, 0.15));
    }
}

/* Adaptive animations for different devices - no blur optimizations needed */
@media (hover: none) and (pointer: coarse) {
    .scroll-card {
        will-change: auto;
    }
    
    /* Disable scale only on small tablets and phones */
    @media (max-width: 1023px) {
        .group-\[\.is-active\]\:scale-110 {
            transform: none !important;
        }
    }
}

/* iPad specific optimizations */
@supports (-webkit-touch-callout: none) {
    /* iPad Pro and large iPads - enable scale animations */
    @media (min-width: 1024px) {
        .group-\[\.is-active\]\:scale-110 {
            transform: scale(1.1);
        }
    }
}