/*
 * Revuteck Service Details - Support Us premium image motion
 *
 * Scope: ONLY .sd-support-us-section
 * Purpose: reproduce the restrained sequential icon-focus effect seen in the
 * supplied reference, using the images already delivered by the backend.
 *
 * This file does not change the section grid, card dimensions, typography,
 * scrolling, or database-driven content.
 */

.sd-support-us-section.sd-support-motion-ready {
    --sd-support-motion-color: var(--brand, var(--primary, #dcff10));
    --sd-support-pointer-x: 50%;
    --sd-support-pointer-y: 50%;
}

/* Keep the existing section geometry intact. */
.sd-support-us-section.sd-support-motion-ready .sd-support-us-feature,
.sd-support-us-section.sd-support-motion-ready .sd-support-us-feature-side,
.sd-support-us-section.sd-support-motion-ready .sd-support-us-card {
    isolation: isolate;
}

/* A very faint interactive spotlight, like the reference card surface. */
.sd-support-us-section.sd-support-motion-ready .sd-support-us-feature::after,
.sd-support-us-section.sd-support-motion-ready .sd-support-us-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(
            300px circle at var(--sd-support-pointer-x) var(--sd-support-pointer-y),
            color-mix(in srgb, var(--sd-support-motion-color) 11%, transparent),
            transparent 64%
        );
    transition: opacity .45s ease;
}

.sd-support-us-section.sd-support-motion-ready .sd-support-us-feature:hover::after,
.sd-support-us-section.sd-support-motion-ready .sd-support-us-card:hover::after {
    opacity: 1;
}

/* Ensure content stays above the decorative spotlight. */
.sd-support-us-section.sd-support-motion-ready .sd-support-us-feature-copy,
.sd-support-us-section.sd-support-motion-ready .sd-support-us-feature-side,
.sd-support-us-section.sd-support-motion-ready .sd-support-us-card > * {
    position: relative;
    z-index: 2;
}

/* The image hosts receive the soft ambient bloom. */
.sd-support-us-section.sd-support-motion-ready .sd-support-us-feature-side,
.sd-support-us-section.sd-support-motion-ready .sd-support-us-card-top {
    --sd-support-image-glow-opacity: 0;
}

.sd-support-us-section.sd-support-motion-ready .sd-support-us-feature-side::before,
.sd-support-us-section.sd-support-motion-ready .sd-support-us-card-top::before {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    opacity: var(--sd-support-image-glow-opacity);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--sd-support-motion-color) 34%, white 8%),
        color-mix(in srgb, var(--sd-support-motion-color) 13%, transparent) 38%,
        transparent 72%
    );
    filter: blur(9px);
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1);
}

.sd-support-us-section.sd-support-motion-ready .sd-support-us-feature-side::before {
    width: 190px;
    height: 150px;
    right: -18px;
    top: -12px;
}

.sd-support-us-section.sd-support-motion-ready .sd-support-us-card-top {
    position: relative;
    isolation: isolate;
}

.sd-support-us-section.sd-support-motion-ready .sd-support-us-card-top::before {
    width: 104px;
    height: 104px;
    right: -23px;
    top: -25px;
}

/* Images remain visible at all times; only emphasis changes. */
.sd-support-us-section.sd-support-motion-ready .sd-support-motion-image {
    position: relative;
    z-index: 2;
    opacity: .66;
    transform: translate3d(0, 0, 0) scale(.97);
    filter:
        saturate(.78)
        brightness(.82)
        drop-shadow(0 8px 16px rgba(0, 0, 0, .26));
    transition:
        opacity .72s cubic-bezier(.22, 1, .36, 1),
        transform .72s cubic-bezier(.22, 1, .36, 1),
        filter .72s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform, filter;
}

/* Current image: crisp, slightly lifted, and softly illuminated. */
.sd-support-us-section.sd-support-motion-ready .is-support-image-active {
    --sd-support-image-glow-opacity: .88;
}

.sd-support-us-section.sd-support-motion-ready
.is-support-image-active .sd-support-motion-image {
    opacity: 1;
    transform: translate3d(0, -4px, 0) scale(1.055);
    filter:
        saturate(1.08)
        brightness(1.09)
        drop-shadow(
            0 0 5px
            color-mix(in srgb, var(--sd-support-motion-color) 68%, white 12%)
        )
        drop-shadow(
            0 0 17px
            color-mix(in srgb, var(--sd-support-motion-color) 30%, transparent)
        )
        drop-shadow(0 12px 18px rgba(0, 0, 0, .3));
}

/* A restrained reflective sweep appears only during the active state. */
.sd-support-us-section.sd-support-motion-ready .sd-support-motion-image-host {
    overflow: visible;
}

.sd-support-us-section.sd-support-motion-ready
.sd-support-motion-image-host::after {
    content: "";
    position: absolute;
    z-index: 3;
    pointer-events: none;
    width: 34px;
    height: 125%;
    top: -12%;
    left: -45%;
    opacity: 0;
    transform: skewX(-18deg);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, .46),
        transparent
    );
}

.sd-support-us-section.sd-support-motion-ready
.is-support-image-active.sd-support-motion-image-host::after {
    animation: sd-support-image-sheen 1.05s cubic-bezier(.2, .75, .25, 1) both;
}

@keyframes sd-support-image-sheen {
    0% {
        left: -48%;
        opacity: 0;
    }
    18% {
        opacity: .52;
    }
    72% {
        opacity: .3;
    }
    100% {
        left: 118%;
        opacity: 0;
    }
}

/* Small breathing motion after the focus lands. */
.sd-support-us-section.sd-support-motion-ready
.is-support-image-active .sd-support-motion-image {
    animation: sd-support-image-breathe 2.8s ease-in-out infinite;
}

@keyframes sd-support-image-breathe {
    0%, 100% {
        transform: translate3d(0, -4px, 0) scale(1.055);
    }
    50% {
        transform: translate3d(0, -6px, 0) scale(1.072);
    }
}

/* Hover/focus can take control without disturbing links or scrolling. */
.sd-support-us-section.sd-support-motion-ready
.sd-support-motion-image-host:hover .sd-support-motion-image,
.sd-support-us-section.sd-support-motion-ready
.sd-support-motion-image-host:focus-within .sd-support-motion-image {
    opacity: 1;
}

@media (max-width: 767px) {
    .sd-support-us-section.sd-support-motion-ready
    .sd-support-motion-image {
        opacity: .76;
        transform: translate3d(0, 0, 0) scale(.985);
    }

    .sd-support-us-section.sd-support-motion-ready
    .is-support-image-active .sd-support-motion-image {
        transform: translate3d(0, -2px, 0) scale(1.035);
    }

    @keyframes sd-support-image-breathe {
        0%, 100% {
            transform: translate3d(0, -2px, 0) scale(1.035);
        }
        50% {
            transform: translate3d(0, -3px, 0) scale(1.045);
        }
    }

    /* No pointer spotlight on touch layouts. */
    .sd-support-us-section.sd-support-motion-ready
    .sd-support-us-feature::after,
    .sd-support-us-section.sd-support-motion-ready
    .sd-support-us-card::after {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sd-support-us-section.sd-support-motion-ready
    .sd-support-motion-image,
    .sd-support-us-section.sd-support-motion-ready
    .is-support-image-active .sd-support-motion-image {
        opacity: 1;
        transform: none;
        filter: none;
        animation: none !important;
        transition: none !important;
    }

    .sd-support-us-section.sd-support-motion-ready
    .sd-support-motion-image-host::before,
    .sd-support-us-section.sd-support-motion-ready
    .sd-support-motion-image-host::after {
        display: none !important;
    }
}