/* ═══════════════════════════════════════════════════════════════════════════
   ELECTRIC BORDER EFFECT - CSS Only Version
   Applied to .info div (image container) - follows 3D tilt animation
   ═══════════════════════════════════════════════════════════════════════════ */

/* CSS Variables for electric border */
:root {
    --electric-border-color: #ff69b4;
    --electric-glow-color: rgba(255, 105, 180, 0.7);
}

/* SVG filter container - hidden but needed */
.electric-svg-container {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Info div with electric border enabled */
.info.has-electric-border {
    position: relative;
}

/* Main animated border - pulsing glow effect */
.info.has-electric-border .electric-main-border {
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 5%;
    border: 5px solid var(--electric-border-color);
    pointer-events: none;
    z-index: 3;
    animation: electric-pulse 2s ease-in-out infinite;
}

@keyframes electric-pulse {

    0%,
    100% {
        box-shadow:
            0 0 10px var(--electric-border-color),
            0 0 20px var(--electric-border-color),
            0 0 35px var(--electric-glow-color),
            inset 0 0 5px var(--electric-glow-color);
        opacity: 1;
    }

    50% {
        box-shadow:
            0 0 25px var(--electric-border-color),
            0 0 50px var(--electric-border-color),
            0 0 75px var(--electric-glow-color),
            0 0 100px var(--electric-glow-color),
            inset 0 0 12px var(--electric-glow-color);
        opacity: 1;
    }
}

/* Glow layer 1 - animated flicker */
.info.has-electric-border .electric-glow-1 {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 5%;
    border: 2px solid var(--electric-glow-color);
    filter: blur(3px);
    pointer-events: none;
    z-index: 2;
    animation: electric-flicker 0.15s infinite;
}

@keyframes electric-flicker {

    0%,
    100% {
        opacity: 1;
    }

    25% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: 0.7;
    }
}

/* Glow layer 2 - outer glow with different timing */
.info.has-electric-border .electric-glow-2 {
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border-radius: 5%;
    border: 4px solid var(--electric-border-color);
    filter: blur(12px);
    pointer-events: none;
    z-index: 2;
    animation: electric-glow 1.5s ease-in-out infinite alternate;
}

@keyframes electric-glow {
    0% {
        opacity: 0.7;
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        filter: blur(20px);
    }
}

/* Background glow - outer ambient effect (not covering image) */
.info.has-electric-border .electric-bg-glow {
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 5%;
    pointer-events: none;
    z-index: 1;
    border: 8px solid transparent;
    box-shadow:
        0 0 30px var(--electric-border-color),
        0 0 60px var(--electric-border-color),
        0 0 90px var(--electric-glow-color);
    opacity: 0.7;
    animation: bg-pulse 3s ease-in-out infinite;
}

@keyframes bg-pulse {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 0.9;
    }
}

/* Override the default glow border for electric border tiles */
.info.has-electric-border::before {
    display: none;
}

/* Enhance the electric effect on hover */
.info.has-electric-border:hover .electric-main-border {
    animation-duration: 1s;
}

.info.has-electric-border:hover .electric-glow-1 {
    animation-duration: 0.1s;
}

.info.has-electric-border:hover .electric-glow-2 {
    opacity: 1;
    filter: blur(10px);
}

.info.has-electric-border:hover .electric-bg-glow {
    opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STAR BADGE - Bottom right corner indicator
   ═══════════════════════════════════════════════════════════════════════════ */

/* Star badge inside .info - follows 3D tilt */
.info.has-star-badge .star-badge {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    background: linear-gradient(135deg, var(--electric-border-color, #ff69b4), #ff1493);
    border-radius: 50%;
    pointer-events: none;
    z-index: 100;
    box-shadow:
        0 0 10px var(--electric-border-color, #ff69b4),
        0 0 20px var(--electric-glow-color, rgba(255, 105, 180, 0.7)),
        0 0 30px var(--electric-glow-color, rgba(255, 105, 180, 0.7));
    animation: star-badge-pulse 2s ease-in-out infinite;
    transition: bottom 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Move star up on hover smoothly, slow down animation */
.info.has-star-badge:hover .star-badge {
    bottom: 38px;
    animation-duration: 4s;
}

.info.has-star-badge .star-badge::before {
    content: '★';
    text-shadow: 0 0 5px #fff;
}

@keyframes star-badge-pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 0 10px var(--electric-border-color, #ff69b4),
            0 0 20px var(--electric-glow-color, rgba(255, 105, 180, 0.7));
    }

    50% {
        transform: scale(1.1);
        box-shadow:
            0 0 15px var(--electric-border-color, #ff69b4),
            0 0 30px var(--electric-glow-color, rgba(255, 105, 180, 0.7)),
            0 0 45px var(--electric-border-color, #ff69b4);
    }
}

/* Ensure star badge follows 3D tilt */
.info.has-star-badge.tilt-active .star-badge {
    transform-style: preserve-3d;
}