.interactive-surface {
    position: relative;
    isolation: isolate;
    --pointer-x: 50%;
    --pointer-y: 50%;
}

.interactive-surface::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image:
        radial-gradient(
            circle at var(--pointer-x) var(--pointer-y),
            rgb(184 154 91 / 19%),
            transparent 23rem
        ),
        linear-gradient(rgb(112 111 82 / 5%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(112 111 82 / 5%) 1px, transparent 1px);
    background-position: center, 50% 50%, 50% 50%;
    background-size: auto, 48px 48px, 48px 48px;
    opacity: 0.34;
    pointer-events: none;
    transition: opacity 260ms ease, filter 260ms ease;
    animation: none;
}
.interactive-surface.is-pointer-active::after {
    opacity: 0.92;
    filter: saturate(1.2);
    animation: mesh-drift 18s ease-in-out infinite alternate;
}

.hero.interactive-surface::after {
    border-radius: 2px;
}

.expertise-section.interactive-surface::after {
    background-image:
        radial-gradient(
            circle at var(--pointer-x) var(--pointer-y),
            rgb(184 154 91 / 15%),
            transparent 22rem
        ),
        linear-gradient(rgb(112 111 82 / 5%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(112 111 82 / 5%) 1px, transparent 1px);
}

.contact-section.interactive-surface::after {
    background-image:
        radial-gradient(
            circle at var(--pointer-x) var(--pointer-y),
            rgb(207 189 140 / 15%),
            transparent 25rem
        ),
        linear-gradient(rgb(230 231 213 / 5%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(230 231 213 / 5%) 1px, transparent 1px);
}

@keyframes mesh-drift {
    from {
        background-position: center, 48% 50%, 50% 48%;
    }

    to {
        background-position: center, 52% 50%, 50% 52%;
    }
}

@media (hover: none), (pointer: coarse) {
    .interactive-surface::after {
        background-image:
            linear-gradient(rgb(112 111 82 / 4%) 1px, transparent 1px),
            linear-gradient(90deg, rgb(112 111 82 / 4%) 1px, transparent 1px);
        background-size: 56px 56px;
        opacity: 0.26;
    }

    .contact-section.interactive-surface::after {
        background-image:
            linear-gradient(rgb(230 231 213 / 4%) 1px, transparent 1px),
            linear-gradient(90deg, rgb(230 231 213 / 4%) 1px, transparent 1px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .interactive-surface::after {
        animation: none;
        transition: none;
    }
}