/**
 * Animations
 */

@keyframes reveal-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reveal-on-scroll {
    animation: reveal-up linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
}

@keyframes card-active-effect {
    10% {
        opacity: 0.6;
        transform: scale(0.95);
        background-color: var(--wp--preset--color--tech-gray);
        color: var(--wp--preset--color--white);
    }

    60% {
        opacity: 1;
        transform: scale(1);
        background-color: var(--wp--preset--color--white);
        color: var(--wp--preset--color--charcoal);
    }

    70% {
        opacity: 0.6;
        transform: scale(0.95);
        background-color: var(--wp--preset--color--tech-gray);
        color: var(--wp--preset--color--white);
    }
}

@keyframes active-pill-highlight {

    0%,
    100% {
        background: var(--wp--preset--color--white);
        color: var(--wp--preset--color--charcoal);
        border-color: var(--wp--preset--color--white);
        font-weight: 600;
        opacity: 1;
        transform: scale(1.05);
    }
}

.has-timeline-scope {
    timeline-scope: --slide-01, --slide-02, --slide-03, --slide-04;
}

.scroll-marker-before {
    scroll-marker-group: before;
}

/* --- GSAP Animation Support --- */

.hero-line {
    height: 1px;
    background-color: var(--wp--preset--color--white);
    width: 100%;
    transform-origin: center center;
    opacity: 0.5;
}

.hero-tech-spec {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    opacity: 1;
    white-space: nowrap;
}

/* Surgical pre-hiding: ONLY hide things with .gsap-reveal (or hero technical markers) and ONLY if JS is enabled. */
.js-enabled .gsap-reveal,
.js-enabled .gsap-hero-tech,
.js-enabled .hero-line {
    opacity: 0;
    visibility: hidden;
    will-change: transform, opacity;
}

/* Ensure parents of reveals don't clip them */
.gsap-hero-impact,
.gsap-centered-intro,
.gsap-services-grid {
    overflow: visible !important;
}

/* Page Loader Styles */
#novamotion-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #111;
    /* Charcoal */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

.loader-content {
    text-align: center;
}

.loader-logo {
    opacity: 0;
    transform: scale(0.95);
}

.loader-progress {
    height: 2px;
    background: white;
    width: 0;
    margin-top: 20px;
}