.reveal {
    opacity: 0;
    will-change: transform, opacity;
    visibility: hidden; /* Hide until active to prevent accidental clicks/flashes */
}


/* --- PREMIUM DRAMATIC ANIMATIONS --- */
@keyframes dramatic-tr {
    from { transform: translate3d(100vw, -100vh, 0) scale(0.8); opacity: 0; }
    to { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
}
@keyframes dramatic-br {
    from { transform: translate3d(100vw, 100vh, 0) scale(0.8); opacity: 0; }
    to { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
}
@keyframes dramatic-tl {
    from { transform: translate3d(-100vw, -100vh, 0) scale(0.8); opacity: 0; }
    to { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
}
@keyframes dramatic-bl {
    from { transform: translate3d(-100vw, 100vh, 0) scale(0.8); opacity: 0; }
    to { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
}

/* --- MOBILE SPECIFIC CATEGORY ANIMATIONS (CURTAIN EFFECT) --- */
@keyframes mobile-slide-in-right {
    from { 
        transform: translateX(30px) scale(0.95); 
        clip-path: inset(0 0 0 100%); 
        opacity: 0; 
    }
    to { 
        transform: translateX(0) scale(1); 
        clip-path: inset(0 0 0 0); 
        opacity: 1; 
    }
}

@keyframes mobile-slide-in-left {
    from { 
        transform: translateX(-30px) scale(0.95); 
        clip-path: inset(0 100% 0 0);
        opacity: 0; 
    }
    to { 
        transform: translateX(0) scale(1); 
        clip-path: inset(0 0 0 0); 
        opacity: 1; 
    }
}

.reveal.active {
    opacity: 1 !important;
    visibility: visible !important;
    animation-duration: 2.8s !important;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
    animation-fill-mode: forwards !important;
}

/* --- PREMIUM Reveal Variations --- */

/* 1. Slide from Top (Elegant) */
@keyframes slideFromTop {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reveal-down.active {
    opacity: 1 !important;
    visibility: visible !important;
    animation: slideFromTop 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 2. Scale Up + Fade In (Premium) */
@keyframes scaleFadeIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.reveal-scale.active {
    opacity: 1 !important;
    visibility: visible !important;
    animation: scaleFadeIn 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Initial Off-screen States */
.reveal-tr { transform: translate3d(100vw, -100vh, 0) scale(0.8); }
.reveal-br { transform: translate3d(100vw, 100vh, 0) scale(0.8); }
.reveal-tl { transform: translate3d(-100vw, -100vh, 0) scale(0.8); }
.reveal-bl { transform: translate3d(-100vw, 100vh, 0) scale(0.8); }



.reveal-tr.active { animation-name: dramatic-tr !important; }
.reveal-br.active { animation-name: dramatic-br !important; }
.reveal-tl.active { animation-name: dramatic-tl !important; }
.reveal-bl.active { animation-name: dramatic-bl !important; }

/* Default reveal if no direction class */
@keyframes fadeInUpDramatic {
    from { transform: translateY(50px) scale(0.9); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
.reveal.active:not([class*="reveal-"]) {
    animation-name: fadeInUpDramatic !important;
}

/* --- UNIQUE HERO ENTRANCE (THE CINEMATIC REVEAL) --- */
@keyframes heroBackgroundZoom {
    from { transform: scale(1.1); filter: brightness(0.85); }
    to { transform: scale(1); filter: brightness(1); }
}

.hero {
    overflow: hidden;
}

.hero.hero-revealed {
    animation: heroBackgroundZoom 6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Base states for hero elements */
.hero-content .hero-badge,
.hero-content h1,
.hero-content p,
.hero-content .hero-btns {
    will-change: transform, opacity, filter;
}

/* Badge: 3D Flip Down */
.hero-content .hero-badge {
    opacity: 0;
    transform: perspective(1000px) rotateX(-90deg);
    transform-origin: top;
    transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1);
    visibility: visible;
}

.hero-content.hero-revealed .hero-badge {
    opacity: 1;
    transform: perspective(1000px) rotateX(0);
    transition-delay: 0.1s;
}

/* Heading: Clip-path Rise + Blur Focus (Refined for maximum smoothness) */
.hero-content h1 {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    filter: blur(4px);
    transform: translateY(25px) scale(0.99);
    transition: opacity 1.8s cubic-bezier(0.19, 1, 0.22, 1), 
                transform 1.8s cubic-bezier(0.19, 1, 0.22, 1), 
                filter 1.8s cubic-bezier(0.19, 1, 0.22, 1), 
                clip-path 1.6s cubic-bezier(0.19, 1, 0.22, 1);
    visibility: visible;
}

.hero-content.hero-revealed h1 {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    filter: blur(0);
    transform: translateY(0) scale(1);
    transition-delay: 0.25s;
}

/* Paragraph: JS Typing Reveal (Default transition disabled) */
.hero-content p {
    /* Transitions only for font-size/blur if needed, but opacity handled by JS */
    transition: filter 1s ease, transform 1s ease;
}

/* Temporary state for JS typing setup */
.hero-content p.typing-idle {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Buttons: Bloom (Scale-Up) */
.hero-content .hero-btns {
    opacity: 0;
    transform: scale(0.9) translateY(15px);
    transition: opacity 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    visibility: visible;
}

.hero-content.hero-revealed .hero-btns {
    opacity: 1;
    transform: scale(1) translateY(0);
    transition-delay: 0.7s;
}





/* Hover Effects */
.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* Fade In Up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Shine effect for cards */
.card-shine {
    position: relative;
    overflow: hidden;
}

.card-shine::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.1) 50%,
        rgba(255,255,255,0) 100%
    );
    transform: rotate(45deg);
    transition: all 0.6s ease;
    pointer-events: none;
}

.card-shine:hover::after {
    left: 100%;
    top: 100%;
}