
.reveal {
    opacity: 0;
    transition: all 1s cubic-bezier(0.2, 1, 0.3, 1);
    visibility: hidden;
    will-change: transform, opacity;
}


.reveal-left {
    transform: translateX(-80px);
}


.reveal-right {
    transform: translateX(80px);
}


.reveal.active {
    opacity: 1;
    transform: translateX(0) translateY(0);
    visibility: visible;
}


.step-card {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
}

.reveal.active .step-card {
    opacity: 1;
    transform: translateY(0);
}


.reveal.active .step-card:nth-child(1) { transition-delay: 0.3s; }
.reveal.active .step-card:nth-child(2) { transition-delay: 0.5s; }
.reveal.active .step-card:nth-child(3) { transition-delay: 0.7s; }



/* --- Drop-down Reveal Animation --- */
.reveal-down {
    opacity: 0;
    transform: translateY(-50px); 
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); 
    visibility: hidden;
}


.reveal-down.active {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}


.section-header.reveal-down {
    transition-delay: 0.1s;
}


.highlight-card-pro:nth-child(1) { transition-delay: 0.3s; }
.highlight-card-pro:nth-child(2) { transition-delay: 0.5s; }
.highlight-card-pro:nth-child(3) { transition-delay: 0.7s; }






.stat-number {
    display: flex;
    justify-content: center;
    align-items: baseline;
    font-variant-numeric: tabular-nums; 
}

.counter {
    display: inline-block;
    min-width: 1.2ch; 
}





/* --- Audience Cards Reveal --- */
.reveal-fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    visibility: hidden;
}

.reveal-fade-up.active {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}


.audience-grid-pro .audience-card-pro:nth-child(1) { transition-delay: 0.1s; }
.audience-grid-pro .audience-card-pro:nth-child(2) { transition-delay: 0.3s; }
.audience-grid-pro .audience-card-pro:nth-child(3) { transition-delay: 0.5s; }
.audience-grid-pro .audience-card-pro:nth-child(4) { transition-delay: 0.7s; }




/* --- Tech Cards Zoom-in Animation --- */
.reveal-zoom {
    opacity: 0;
    transform: scale(0.9); 
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    visibility: hidden;
}

.reveal-zoom.active {
    opacity: 1;
    transform: scale(1); 
    visibility: visible;
}


.details-grid-modern .detail-card-tech:nth-child(1) { transition-delay: 0.1s; }
.details-grid-modern .detail-card-tech:nth-child(2) { transition-delay: 0.3s; }
.details-grid-modern .detail-card-tech:nth-child(3) { transition-delay: 0.5s; }


.detail-stat-row {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.6s ease 0.8s; 
}

.reveal-zoom.active .detail-stat-row {
    opacity: 1;
    transform: translateY(0);
}




/* --- Pro Tools Flip-Up Animation --- */
.reveal-pro {
    opacity: 0;
    transform: translateY(30px) rotateX(-10deg); 
    transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
    visibility: hidden;
}

.reveal-pro.active {
    opacity: 1;
    transform: translateY(0) rotateX(0);
    visibility: visible;
}


.pro-grid-modern .pro-card-minimal:nth-child(1) { transition-delay: 0.1s; }
.pro-grid-modern .pro-card-minimal:nth-child(2) { transition-delay: 0.2s; }
.pro-grid-modern .pro-card-minimal:nth-child(3) { transition-delay: 0.3s; }
.pro-grid-modern .pro-card-minimal:nth-child(4) { transition-delay: 0.4s; }





/* 1. Global Reset - Site ekema akuru lassanata balance wenna */
* {  
   
    /* Akuru poddak (poddakma poddak) lan kala - kiyawanna lesiyi */
    letter-spacing: -0.38px; 
}

/* 2. Main Headings - Headers walata thara loku spacing adu kirimak */
h1, h2, h3, .section-title-main, .hero-text-area h1 {
    letter-spacing: -1.2px !important;
    line-height: 1.1;
}

/* 3. Sub-headings & Card Titles */
h4, .step-content h4, .p-text h4, .audience-card-pro h3 {
    letter-spacing: -0.8px !important;
}

/* 4. Paragraphs & Body Text - Sinhala akuru lassanata penna spacing */
p, span, li, a, .stat-desc, .note-content {
    letter-spacing: -0.15px !important; 
    line-height: 1.6; /* Akuru kiyawanna thiyena lesiya wadi kala */
}

/* 5. Navigation & Buttons */
.top-nav a, .btn-neon, .nav-links a, .switch-btn {
    letter-spacing: -0.4px !important;
}

/* 6. Akuraa.lk Logo Text (Footer & Hero) */
.footer-logo span, .hero-text-area .accent {
    letter-spacing: -0.9px !important;
}/* --- Mobile Device Spacing Optimization --- */
@media (max-width: 768px) {
    /* 1. Global Reset for Mobile */
    * {  
        
        letter-spacing: -0.1px !important; 
    }

    /* 2. Mobile Main Headings */
    h1, h2, h3, .section-title-main, .hero-text-area h1 {
        letter-spacing: -0.5px !important; 
        line-height: 1.2;
    }

    /* 3. Mobile Sub-headings */
    h4, .step-content h4, .p-text h4, .audience-card-pro h3 {
        letter-spacing: -0.3px !important;
    }

    /* 4. Mobile Paragraphs & Body Text */
    p, span, li, a, .stat-desc, .note-content {
        
        letter-spacing: 0.02px !important; 
        line-height: 1.7;
    }

    /* 5. Mobile Navigation & Buttons */
    .top-nav a, .btn-neon, .nav-links a, .switch-btn {
        letter-spacing: 0px !important;
    }

    /* 6. Mobile Logo Text */
    .footer-logo span, .hero-text-area .accent {
        letter-spacing: -0.4px !important;
    }
}