/* Webbo Effects for Elementor Containers */
.webbo-effect-glass {
    -webkit-backdrop-filter: blur(var(--webbo-effect-glass-blur, 16px));
    backdrop-filter: blur(var(--webbo-effect-glass-blur, 16px));
}

/* Shared layer setup for effects that render on pseudo-elements. */
.webbo-effect-grain,
.webbo-effect-spotlight,
.webbo-effect-sheen,
.webbo-effect-animated-border {
    position: relative;
    isolation: isolate;
}

/* Grain */
.webbo-effect-grain::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    border-radius: inherit;
    opacity: var(--webbo-effect-grain-opacity, 0.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: var(--webbo-effect-grain-size, 140px) var(--webbo-effect-grain-size, 140px);
    mix-blend-mode: soft-light;
    z-index: 2;
}

/* Spotlight: pointer-following radial light. */
.webbo-effect-spotlight {
    --webbo-effect-spotlight-x: 50%;
    --webbo-effect-spotlight-y: 50%;
}

.webbo-effect-spotlight::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(
        circle var(--webbo-effect-spotlight-size, 320px) at var(--webbo-effect-spotlight-x, 50%) var(--webbo-effect-spotlight-y, 50%),
        var(--webbo-effect-spotlight-color, #ffffff) 0%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 220ms ease;
    z-index: 2;
}

.webbo-effect-spotlight:hover::after,
.webbo-effect-spotlight:focus-within::after {
    opacity: var(--webbo-effect-spotlight-opacity, 0.18);
}

/* Sheen: a polished light streak sweeps across the container on hover. */
.webbo-effect-sheen::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background-image: linear-gradient(
        var(--webbo-effect-sheen-angle, 115deg),
        transparent calc(50% - var(--webbo-effect-sheen-width, 10%)),
        var(--webbo-effect-sheen-color, #ffffff) 50%,
        transparent calc(50% + var(--webbo-effect-sheen-width, 10%))
    );
    background-size: 300% 100%;
    background-position: 180% 0;
    background-repeat: no-repeat;
    opacity: var(--webbo-effect-sheen-opacity, 0.22);
    transition: background-position var(--webbo-effect-sheen-duration, 900ms) cubic-bezier(.22, 1, .36, 1);
    z-index: 2;
}

.webbo-effect-sheen:hover::after,
.webbo-effect-sheen:focus-within::after {
    background-position: -80% 0;
}

/* Animated Border: moving two-colour gradient clipped to the border ring. */
.webbo-effect-animated-border::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: var(--webbo-effect-border-thickness, 1px);
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(
        120deg,
        var(--webbo-effect-border-color-one, #ffffff) 0%,
        var(--webbo-effect-border-color-two, #7c3aed) 35%,
        var(--webbo-effect-border-color-one, #ffffff) 70%,
        var(--webbo-effect-border-color-two, #7c3aed) 100%
    );
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: webbo-effect-border-shift var(--webbo-effect-border-duration, 3200ms) linear infinite alternate;
    z-index: 3;
}

@keyframes webbo-effect-border-shift {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .webbo-effect-sheen::after {
        transition-duration: 0.01ms !important;
    }

    .webbo-effect-animated-border::after {
        animation: none !important;
        background-position: 50% 50%;
    }
}