/* ============================================
   ABOUT PAGE GLOBAL STYLES & FALLBACK ANIMATIONS
   ============================================ */

/* Ensure sections are visible by default with CSS fallback animations */
.reveal-on-scroll,
.reveal-fade,
.reveal-scale,
.reveal-slide-up,
.reveal-slide-left,
.reveal-slide-right {
    opacity: 0;
    animation: autoReveal 0.8s ease-out 0.5s forwards;
}

/* Stagger delays for multiple sections */
.mission-section-premium {
    animation-delay: 0.3s;
}

.values-section-premium {
    animation-delay: 0.5s;
}

.contact-section-premium {
    animation-delay: 0.7s;
}

/* Fallback reveal animation */
@keyframes autoReveal {
    to {
        opacity: 1;
        transform: translateY(0) translateX(0) scale(1);
    }
}

/* Enhanced reveal when JavaScript adds the 'revealed' class */
.reveal-on-scroll.revealed,
.reveal-fade.revealed,
.reveal-scale.revealed,
.reveal-slide-up.revealed,
.reveal-slide-left.revealed,
.reveal-slide-right.revealed {
    opacity: 1 !important;
    transform: translateY(0) translateX(0) scale(1) !important;
}

/* Specific transformations for different reveal types */
.reveal-scale {
    transform: scale(0.95);
}

.reveal-slide-up {
    transform: translateY(40px);
}

.reveal-slide-left {
    transform: translateX(-40px);
}

.reveal-slide-right {
    transform: translateX(40px);
}

/* Card ripple effect */
.card-ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 215, 0, 0.6) 0%,
        rgba(168, 85, 247, 0.3) 50%,
        transparent 70%
    );
    transform: scale(0);
    animation: ripple-animation 0.6s ease-out;
    pointer-events: none;
}

@keyframes ripple-animation {
    to {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* Ensure container has proper background */
.container {
    position: relative;
    z-index: 10;
}

/* Fix any potential z-index issues */
.about-hero-premium,
.mission-section-premium,
.values-section-premium,
.contact-section-premium {
    position: relative;
    z-index: 1;
}