/* Base Reveal Transitions */
.reveal {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.reveal-scale {
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

/* Active Reveal States */
.reveal.active,
.reveal-left.active,
.reveal-right.active,
.reveal-scale.active {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

/* Sequential Delays */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* Carousel Transitions */
.slide-active { opacity: 1; transform: scale(1); z-index: 10; transition: opacity 1s ease-in-out, transform 1s ease-in-out; }
.slide-inactive { opacity: 0; transform: scale(1.04); z-index: 0; transition: opacity 1s ease-in-out, transform 1s ease-in-out; }

/* Slide Content Entry Animation */
.slide-active .slide-content {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s, transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}
.slide-inactive .slide-content {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease;
}

/* TASK 01: Content readability — minimum typography standards */
.readable-section p.text-brand-muted,
.readable-section p.font-light,
.readable-section .tab-content p,
.readable-section .tab-content li span.text-brand-muted,
.readable-section .tab-content strong.text-brand-charcoal,
.readable-section .accordion-body,
.readable-section .footer-copy p,
.readable-section .footer-copy li {
    font-size: 15px !important;
    line-height: 1.7 !important;
}
.readable-section .footer-copy ul li a,
.readable-section .footer-copy .footer-address,
.readable-section .footer-copy.logo-desc
{
    font-size: 13px !important;
    line-height: 1.7 !important;
}
@media (min-width: 768px) {
    .readable-section p.text-brand-muted,
    .readable-section p.font-light,
    .readable-section .tab-content p,
    .readable-section .tab-content li span.text-brand-muted,
    .readable-section .tab-content strong.text-brand-charcoal,
    .readable-section .accordion-body,
    .readable-section .footer-copy p,
    .readable-section .footer-copy li {
        font-size: 16px !important;
        line-height: 1.8 !important;
    }
    .readable-section .footer-copy ul li a,
    .readable-section .footer-copy .footer-address,
    .readable-section .footer-copy.logo-desc
    {
        font-size: 13px !important;
        line-height: 1.8 !important;
    }
}

/* Constitution modal */
#constitution-modal:not(.hidden) {
    display: flex;
}
#constitution-modal .modal-panel {
    animation: modalIn 0.25s ease-out;
}
@keyframes modalIn {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Toast notifications */
.toast {
    animation: toastIn 0.3s ease-out;
}
@keyframes toastIn {
    from { opacity: 0; transform: translateX(100%); }
    to { opacity: 1; transform: translateX(0); }
}

/* Infinite Marquee Logo Slider */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.animate-marquee {
    animation: marquee 30s linear infinite;
}
.animate-marquee:hover {
    animation-play-state: paused;
}
.mask-gradient {
    -webkit-mask-image: linear-gradient(to right, transparent, white 15%, white 85%, transparent);
    mask-image: linear-gradient(to right, transparent, white 15%, white 85%, transparent);
}
.contact-href:hover {
    text-decoration: underline;
}