/* Electric Border Effect */
:root {
    --eb-color: #7df9ff;
    --eb-thickness: 0.125rem;
    /* 2px */
    --eb-speed: 1s;
    --eb-chaos: 0.5;
}

.electric-border-wrapper {
    position: relative;
    padding: var(--eb-thickness);
    border-radius: inherit;
    display: flex;
    overflow: visible;
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.3s ease;
}

.electric-border-canvas {
    position: absolute;
    inset: calc(-1 * var(--eb-thickness));
    border: var(--eb-thickness) solid var(--eb-color);
    border-radius: inherit;
    pointer-events: none;
    filter: url(#electric-border-filter);
    box-shadow: 0 0 0.625rem var(--eb-color), inset 0 0 0.3125rem var(--eb-color);
    opacity: 0.8;
    z-index: 1;
    animation: eb-pulse calc(var(--eb-speed) * 2) infinite ease-in-out;
}

.electric-border-content {
    position: relative;
    z-index: 2;
    width: 100%;
    border-radius: inherit;
    background: inherit;
}

@keyframes eb-pulse {

    0%,
    100% {
        opacity: 0.7;
        box-shadow: 0 0 0.625rem var(--eb-color), inset 0 0 0.3125rem var(--eb-color);
    }

    50% {
        opacity: 1;
        box-shadow: 0 0 1rem var(--eb-color), inset 0 0 0.5rem var(--eb-color);
    }
}

/* Hero specific adjustments - Mobile First */
.hero-eb-wrapper {
    width: 100%;
    max-width: calc(100% - 2rem);
    margin-inline: auto;
    border-radius: 1.5rem;
}

@media (min-width: 48rem) {

    /* 768px */
    .hero-eb-wrapper {
        max-width: 50rem;
        /* 800px */
    }
}

.hero-eb-wrapper .electric-border-canvas {
    border-radius: 1.5rem;
}

/* Experience interactions */
.electric-border-wrapper:has(.catalog-experience:hover) {
    transform: translateY(-0.3125rem);
}