/**
 * CTA Section Transition Effects
 * 
 * Adds smooth transitions and animations to all elements in the CTA section
 * Includes hover effects, fade-in animations, and interactive feedback
 */

/* ==========================================================================
   CTA Section Container Animation
   ========================================================================== */

.mandyju-cta-section {
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
    transition: all 0.3s ease !important;
}

/* ==========================================================================
   CTA Heading Transitions
   ========================================================================== */

.mandyju-cta-section .wp-block-heading {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translateY(0) !important;
    opacity: 1;
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}

.mandyju-cta-section .wp-block-heading:hover {
    transform: translateY(-2px) !important;
    text-shadow: 0 2px 8px rgba(255, 255, 255, 0.2) !important;
}

/* ==========================================================================
   CTA Paragraph Text Transitions
   ========================================================================== */

.mandyju-cta-section p {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translateY(0) !important;
    opacity: 1;
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
}

.mandyju-cta-section p:hover {
    transform: translateY(-1px) !important;
    opacity: 0.9 !important;
}

/* ==========================================================================
   CTA Button Container
   ========================================================================== */

.mandyju-cta-section .wp-block-buttons {
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;
    transition: transform 0.3s ease !important;
}

/* ==========================================================================
   CTA Button Transitions
   ========================================================================== */

.mandyju-cta-section .wp-block-button .wp-block-button__link {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    position: relative;
    overflow: hidden;
}

/* Button hover effects */
.mandyju-cta-section .wp-block-button .wp-block-button__link:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
    background-color: var(--wp--preset--color--white) !important;
    color: var(--wp--preset--color--primary) !important;
    border-color: var(--wp--preset--color--white) !important;
}

/* Button active/focus states */
.mandyju-cta-section .wp-block-button .wp-block-button__link:active,
.mandyju-cta-section .wp-block-button .wp-block-button__link:focus {
    transform: translateY(-1px) !important;
    transition-duration: 0.1s !important;
    outline: 2px solid rgba(255, 255, 255, 0.5) !important;
    outline-offset: 2px !important;
}

/* ==========================================================================
   Subtle Shimmer Effect for Button
   ========================================================================== */

.mandyju-cta-section .wp-block-button .wp-block-button__link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.2), 
        transparent
    );
    transition: left 0.6s ease;
}

.mandyju-cta-section .wp-block-button .wp-block-button__link:hover::before {
    left: 100%;
}

/* ==========================================================================
   Fade-in Animation Keyframes
   ========================================================================== */

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 768px) {
    .mandyju-cta-section .wp-block-heading:hover,
    .mandyju-cta-section p:hover {
        transform: none !important;
    }
    
    .mandyju-cta-section .wp-block-button .wp-block-button__link:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    }
}

/* ==========================================================================
   Accessibility: Respect reduced motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .mandyju-cta-section,
    .mandyju-cta-section .wp-block-heading,
    .mandyju-cta-section p,
    .mandyju-cta-section .wp-block-buttons,
    .mandyju-cta-section .wp-block-button .wp-block-button__link {
        animation: none !important;
        transition: none !important;
    }
    
    .mandyju-cta-section .wp-block-button .wp-block-button__link::before {
        display: none !important;
    }
}