/* Shimmer Effect Variables and Animations */
:root {
    --shimmer-hue-1: 213deg;
    --shimmer-sat-1: 95%;
    --shimmer-lit-1: 91%;
    --shimmer-hue-2: 248deg;
    --shimmer-sat-2: 100%;
    --shimmer-lit-2: 86%;
    --shimmer-hue-3: 293deg;
    --shimmer-sat-3: 78%;
    --shimmer-lit-3: 89%;

    --glow-hue: 222deg;
    --shadow-hue: 180deg;
    --spring-easing: linear(0, 0.002, 0.01 0.9%, 0.038 1.8%, 0.156, 0.312 5.8%, 0.789 11.1%, 1.015 14.2%,
            1.096, 1.157, 1.199, 1.224 20.3%, 1.231, 1.231, 1.226, 1.214 24.6%,
            1.176 26.9%, 1.057 32.6%, 1.007 35.5%, 0.984, 0.968, 0.956, 0.949 42%,
            0.946 44.1%, 0.95 46.5%, 0.998 57.2%, 1.007, 1.011 63.3%, 1.012 68.3%,
            0.998 84%, 1);
    --spring-duration: 1.33s;
}

@property --mask {
    syntax: "<angle>";
    inherits: false;
    initial-value: 33deg;
}

@keyframes spin {
    0% {
        --mask: 0deg;
    }

    100% {
        --mask: 360deg;
    }
}

/* Shimmer Structure */
.video-shimmer-container {
    position: relative;
    border-radius: 24px;
    isolation: isolate;
    /* Create new stacking context */
    /* Removed overflow: hidden from here to let glow show */
}

.shimmer {
    position: absolute;
    inset: -40px;
    border-radius: inherit;
    mix-blend-mode: color-dodge;
    mix-blend-mode: plus-lighter;
    pointer-events: none;
    z-index: 10;
    /* Above video */
}

/* Using a specific class for the active shimmer state */
.video-shimmer-container .shimmer {
    mask-image: conic-gradient(from var(--mask, 0deg),
            transparent 0%,
            transparent 10%,
            black 36%,
            black 45%,
            transparent 50%,
            transparent 60%,
            black 85%,
            black 95%,
            transparent 100%);
    mask-size: cover;
    animation: spin 3s linear infinite both -0.5s;
}

.shimmer::before,
.shimmer::after {
    transition: all 0.5s ease;
    opacity: 1;
    /* Always visible for this effect */
    content: "";
    border-radius: inherit;
    position: absolute;
    inset: 40px;
    /* Matches the negative inset to align with border */
}

.shimmer::before {
    box-shadow: 0 0 3px 2px hsl(var(--shimmer-hue-1) 20% 95%),
        0 0 7px 4px hsl(var(--shimmer-hue-1) 20% 80%),
        0 0 13px 8px hsl(var(--shimmer-hue-2) 40% 60%),
        0 0 22px 6px hsl(var(--shimmer-hue-2) 20% 40%);
    z-index: -1;
}

.shimmer::after {
    box-shadow: inset 0 0 0 1px hsl(var(--shimmer-hue-2) 70% 95%),
        inset 0 0 3px 1px hsl(var(--shimmer-hue-2) 100% 80%),
        inset 0 0 9px 1px hsl(var(--shimmer-hue-2) 100% 70%);
    z-index: 2;
}

/* Ensure video inside stays rounded */
.video-shimmer-container video {
    border-radius: 24px;
    display: block;
    width: 100%;
    position: relative;
    z-index: 11;
    /* Above shimmer glow behind it, but below shimmer overlay if any */
}