/* =========================================================================
   HERO WIPE REVEAL ANIMATIONS
   ========================================================================= */

/* Initial state: Hidden by clipping from left to right */
.hero-reveal-text {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    transition: clip-path 0.8s ease-out, opacity 0.8s ease-out;
    display: inline-block; /* Essential for clip-path to work precisely on text */
}

/* Active state: Fully revealed */
.hero-reveal-text.active {
    clip-path: inset(0 0 0 0);
    opacity: 1;
}

/* Buttons Reveal (Now matching text wipe reveal) */
.hero-reveal-btns {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    transition: clip-path 0.8s ease-out, opacity 0.8s ease-out;
}

.hero-reveal-btns.active {
    clip-path: inset(0 0 0 0);
    opacity: 1;
}

/* Button Hover Effects */
.hero-btn-reveal {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease !important;
}

.hero-btn-reveal:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Ensure container allows for inline-block children without breaking layout */
.hero-reveal-container {
    overflow: hidden;
}