/* 1. REVEAL ON SCROLL LOGIC */
/* Elements start slightly lower and smaller, then 'pop' into place */
.reveal {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* 2. ANIMATIONS */
/* Floating effect for the hero badge */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.animate-float { 
    animation: float 4s ease-in-out infinite; 
}

/* 3. BACKGROUND EFFECTS */
/* Custom blueprint-style grid overlay for dark sections */
.bg-grid {
    background-size: 40px 40px;
    background-image: linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
}

/* 4. ACCREDITATION LOGO INTERACTION */
/* Logos start subtle/grayscale and pop to color on hover */
.grayscale-logo {
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.4s ease;
}

.logo-pop:hover .grayscale-logo {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

/* 5. SUCCESS MODAL STYLING */
#success-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(10px);
    z-index: 100;
    align-items: center;
    justify-content: center;
}

#success-modal.active { 
    display: flex; 
}

/* 6. BUTTON TRANSITIONS */
/* Smoother feel for the magnetic buttons */
a[href="#contact"], #submit-btn {
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}