/* =========================================================================
   SECTION TITLES ANIMATION (SCROLL REVEAL)
   ========================================================================= */

/* 1. Animation for the Title (Fade and Slide Up) */
.reveal-title {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}

.reveal-title.active {
    opacity: 1;
    transform: translateY(0);
}

/* 2. Animation for the Decorative Bar (Expand from Center) */
.reveal-bar {
    width: 0 !important; /* Force initial width 0 */
    opacity: 0;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease-out;
    transition-delay: 0.3s; /* Wait for title to start appearing */
    overflow: hidden;
    white-space: nowrap;
}

.reveal-bar.active {
    width: 80px !important; /* Matches 'w-20' class (20 * 4px = 80px) */
    opacity: 1;
}

/* Optimization for mobile: ensure no horizontal overflow during transition */
section {
    overflow-x: hidden;
}