/* 
 * LaunchPage AI - Utilities Styles
 * 
 * Modal styling, utility classes, custom effects, performance optimizations, and print styles
 */

/* ============================================
   SECTION ELEMENTS
   ============================================ */

.hd {
    /* Headlines */
    opacity: 1;
}

.sub {
    /* Subheads */
    opacity: 1;
}

.cta-primary {
    /* Primary CTA buttons */
    opacity: 1;
}

.bullet {
    /* Bullet points */
    opacity: 1;
}

.card {
    /* Testimonial/feature cards */
    opacity: 1;
}

.badge {
    /* Badge elements */
    opacity: 1;
}

.step-icon {
    /* Step icons in mechanism section */
    transition: transform 0.3s ease;
}

.faq-item {
    /* FAQ accordion items */
    transition: all 0.3s ease;
}

.faq-caret {
    /* FAQ caret icons */
    transition: transform 0.3s ease;
}

.timeline-line {
    /* Timeline line */
    transition: width 0.8s ease;
}

/* ============================================
   SMOOTH SCROLLING (Optional)
   ============================================ */

html {
    scroll-behavior: smooth;
}

/* If using locomotive-scroll or similar, disable default */
html.has-smooth-scroll {
    scroll-behavior: auto;
}

/* ============================================
   MODAL STYLING ENHANCEMENTS
   ============================================ */

.modal {
    backdrop-filter: blur(8px);
}

.modal-content {
    will-change: transform, opacity;
}

/* Custom scrollbar for modal content */
.modal-content::-webkit-scrollbar {
    width: 8px;
}

.modal-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.modal-content::-webkit-scrollbar-thumb {
    background: rgba(77, 124, 254, 0.5);
    border-radius: 10px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: rgba(77, 124, 254, 0.8);
}

/* ============================================
   CUSTOM ANIMATIONS & EFFECTS
   ============================================ */

/* Ambient glow pulse for CTAs */
@keyframes ctaGlowPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(77, 124, 254, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(77, 124, 254, 0.6);
    }
}

.cta-primary.glow-pulse {
    animation: ctaGlowPulse 6s ease-in-out infinite;
}

/* Badge shine effect */
@keyframes badgeShineEffect {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

.badge-shine {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 40%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0.1) 60%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: badgeShineEffect 12s linear infinite;
}

/* Card idle float (subtle) */
@keyframes cardFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-4px);
    }
}

.card-float {
    animation: cardFloat 4s ease-in-out infinite;
}

/* Gradient flow background */
@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.bg-gradient-flow {
    background-size: 200% 200%;
    animation: gradientFlow 15s ease infinite;
}

/* ============================================
   STICKY CTA SPECIFIC STYLES
   ============================================ */

#sticky-cta {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile positioning adjustment */
@media (max-width: 768px) {
    #sticky-cta {
        bottom: 1rem;
        top: auto;
        right: 1rem;
    }
}

/* ============================================
   SECTION-SPECIFIC ADJUSTMENTS
   ============================================ */

/* Problem → Transformation diagonal divider animation */
.problem-col,
.transformation-col {
    will-change: transform, opacity;
}

/* Comparison table responsive */
@media (max-width: 640px) {
    .comparison-table .grid-cols-3 {
        font-size: 0.875rem;
    }
}

/* FAQ smooth accordion transitions */
.faq-answer {
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* GPU acceleration for animated elements */
.cta-primary,
.card,
.step-icon,
.modal-content {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Prevent layout shift on hover transforms */
.card:hover,
.cta-primary:hover {
    backface-visibility: hidden;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Text gradient clip fix for Safari */
.bg-clip-text {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Custom focus states for accessibility */
.form-group input:focus,
.form-group textarea:focus {
    outline: 2px solid rgba(77, 124, 254, 0.5);
    outline-offset: 2px;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    #sticky-cta,
    .modal {
        display: none !important;
    }
}