:root {
    --rr-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --rr-ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
    --rr-fast: 180ms;
    --rr-mid: 420ms;
    --rr-slow: 760ms;
}

@media (prefers-reduced-motion: no-preference) {
    .rr-hero-video-layer[data-rr-parallax] .rr-hero-video {
        transform: translate3d(0, var(--rr-shift, 0px), 0) scale(1.14);
        will-change: transform;
    }

    [data-rr-kinetic] {
        --rr-settle: calc(1 - var(--rr-progress, 1));
    }

    .rr-card,
    .service-card,
    .rosales-service-card,
    div.contact-content .info-card,
    .county-item {
        transition:
            transform var(--rr-mid) var(--rr-ease),
            box-shadow var(--rr-mid) var(--rr-ease),
            border-color var(--rr-mid) var(--rr-ease);
    }

    .rr-projects .rr-card:hover,
    .service-card:hover,
    .rosales-service-card:hover,
    div.contact-content .info-card:hover,
    .county-item:hover {
        transform: translate3d(0, -6px, 0);
        box-shadow: 0 18px 44px rgba(19, 88, 110, 0.1);
    }

    .rr-card .rr-card-img,
    .rr-card-media img,
    .service-card img,
    .rosales-service-card img {
        transition: transform var(--rr-slow) var(--rr-ease);
        will-change: transform;
    }

    .rr-card:hover .rr-card-img,
    .rr-card:hover .rr-card-media img,
    .service-card:hover img,
    .rosales-service-card:hover img {
        transform: scale(1.04);
    }

    a,
    button,
    .rr-card-link,
    .rosales-hero-button,
    .rosales-btn,
    .rr-btn {
        transition:
            color var(--rr-fast) var(--rr-ease-soft),
            background-color var(--rr-fast) var(--rr-ease-soft),
            border-color var(--rr-fast) var(--rr-ease-soft),
            transform var(--rr-fast) var(--rr-ease-soft),
            box-shadow var(--rr-fast) var(--rr-ease-soft);
    }

    .rosales-hero-button:active,
    .rosales-btn:active,
    .rr-btn:active,
    button:active {
        transform: translate3d(0, 1px, 0) scale(0.99);
    }

    .rr-card-link span,
    .rr-btn span[aria-hidden='true'] {
        display: inline-block;
        transition: transform var(--rr-mid) var(--rr-ease);
    }

    .rr-card:hover .rr-card-link span,
    .rr-card-link:hover span,
    .rr-btn:hover span[aria-hidden='true'] {
        transform: translate3d(4px, 0, 0);
    }

    [data-rr-spotlight] {
        position: relative;
        isolation: isolate;
    }

    [data-rr-spotlight]::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        opacity: 0;
        transition: opacity var(--rr-mid) var(--rr-ease);
        background: radial-gradient(
            circle at var(--rr-px, 50%) var(--rr-py, 0%),
            rgba(33, 139, 165, 0.12),
            transparent 62%
        );
    }

    [data-rr-spotlight]:hover::before {
        opacity: 1;
    }
}

:is(a, button, [tabindex]):focus-visible {
    outline: 2px solid #218ba5;
    outline-offset: 3px;
    border-radius: 4px;
}

.rr-field-host {
    position: relative;
    isolation: isolate;
}

.rr-field-host > canvas[data-rr-field] {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--rr-slow) var(--rr-ease);
}

.rr-field-host > canvas.rr-field-live {
    opacity: 1;
}