/* --- Electric Card CSS (Isolated) --- */

/* CSS Variables - Scoped to the card container to avoid global pollution but ensure availability */
.electric-card-container {
    --electric-border-color: #dd8448;
    /* Fallback for browsers that don't support oklch */
    --electric-light-color: #f0b080; 
    --gradient-color: rgba(221, 132, 72, 0.4);
    --color-neutral-900: #1a1a1a;
    
    /* Compatibility with Modern Card styles */
    --neon: var(--electric-border-color);
    --neon-bg: rgba(221, 132, 72, 0.15);
    --neon-border: rgba(221, 132, 72, 0.3);

    /* Font from demo */
    font-family: system-ui, -apple-system, sans-serif;
    color: #eee;
}

@supports (color: oklch(0 0 0)) {
    .electric-card-container {
        --electric-light-color: oklch(from var(--electric-border-color) l c h);
        --gradient-color: oklch(
            from var(--electric-border-color) 0.3 calc(c / 2) h / 0.4
        );
        --color-neutral-900: oklch(0.185 0 0);
        color: oklch(0.985 0 0);
    }
}

/* Reset for card internals - Scoped to electric elements only to avoid breaking modern-card styles */
.electric-card-container [class^="electric-"],
.electric-card-container [class^="electric-"] * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Card container - Minimal styles to support the border effect */
.electric-card-container {
    /* Use the hue from the element style (set by JS) */
    --electric-border-color: hsl(var(--hue, 25), 90%, 60%);
    /* Fallback for browsers that don't support oklch */
    --electric-light-color: hsl(var(--hue, 25), 100%, 80%); 
    --gradient-color: hsla(var(--hue, 25), 90%, 60%, 0.4);
    --color-neutral-900: #1a1a1a;
    
    /* Compatibility with Modern Card styles */
    --neon: var(--electric-border-color);
    --neon-bg: hsla(var(--hue, 25), 90%, 60%, 0.15);
    --neon-border: hsla(var(--hue, 25), 90%, 60%, 0.3);
}

@supports (color: oklch(0 0 0)) {
    .electric-card-container {
        --electric-light-color: oklch(from var(--electric-border-color) l c h);
        --gradient-color: oklch(
            from var(--electric-border-color) 0.3 calc(c / 2) h / 0.4
        );
        --color-neutral-900: oklch(0.185 0 0);
        color: oklch(0.985 0 0);
    }
}

/* Reset for card internals - Scoped to electric elements only to avoid breaking modern-card styles */
.electric-card-container [class^="electric-"],
.electric-card-container [class^="electric-"] * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Inner container - Positioned absolutely to overlay/underlay the card */
.electric-inner-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allow clicks to pass through */
    z-index: 1;
}

/* Border layers */
.electric-border-outer {
    border: 2px solid hsla(var(--hue, 25), 90%, 60%, 0.5);
    border-radius: 24px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
}

.electric-main-card {
    width: 100%;
    height: 100%;
    border-radius: 24px;
    border: 2px solid var(--electric-border-color);
    filter: url(#turbulent-displace);
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    /* Background removed to use modern-card background */
}

/* Glow effects */
.electric-glow-layer-1 {
    border: 2px solid hsla(var(--hue, 25), 90%, 60%, 0.6);
    border-radius: 24px;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    filter: blur(1px);
    pointer-events: none;
}

.electric-glow-layer-2 {
    border: 2px solid var(--electric-light-color);
    border-radius: 24px;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    filter: blur(4px);
    pointer-events: none;
}

/* Background glow */
.electric-background-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 24px;
    filter: blur(32px);
    transform: scale(1.1);
    opacity: 0.3;
    z-index: -1;
    background: linear-gradient(
        -30deg,
        var(--electric-light-color),
        transparent,
        var(--electric-border-color)
    );
    pointer-events: none;
}

/* Modern Card Compatibility */
.electric-card-container .modern-card-content {
    padding: 2rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.electric-card-container:hover .modern-card-arrow {
    background: var(--neon);
    border-color: var(--neon);
    color: black;
    transform: rotate(-45deg);
}

/* Mobile Optimization for Electric Card */
@media (max-width: 768px) {
    /* Reset Container Dimensions for Mobile */
    .electric-card-container {
        width: 100%;
        max-width: 300px; /* Slightly smaller for mobile */
        height: auto;
        min-height: 400px;
        margin: 0 auto;
        transform: none !important;
        
        /* New Glowing Card Style */
        background: #191c29;
        padding: 3px; /* Space for the border */
        border-radius: 6px;
        position: relative;
        box-shadow: none; /* Reset previous shadows */
        border: none; /* Reset previous borders */
    }

    /* Hide the previous design's inner elements */
    .electric-inner-container,
    .electric-overlay-1,
    .electric-overlay-2,
    .electric-background-glow {
        display: none !important;
    }

    /* The Rotating Gradient Border (::before) */
    .electric-card-container::before {
        content: "";
        width: 104%;
        height: 102%;
        border-radius: 8px;
        background-image: linear-gradient(
            var(--rotate),
            hsl(var(--hue, 25), 90%, 60%),
            hsl(var(--hue, 25), 80%, 50%) 43%,
            hsl(var(--hue, 25), 70%, 40%)
        );
        position: absolute;
        z-index: -1;
        top: -1%;
        left: -2%;
        animation: spin 4s linear infinite;
        filter: none; /* Ensure no other filters apply */
        opacity: 1;
    }

    /* The Glowing Background (::after) */
    .electric-card-container::after {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        right: 0;
        z-index: -1;
        height: 100%;
        width: 100%;
        margin: 0 auto;
        transform: scale(0.8);
        filter: blur(40px); /* Reduced blur for performance */
        background-image: linear-gradient(
            var(--rotate),
            hsl(var(--hue, 25), 90%, 60%),
            hsl(var(--hue, 25), 80%, 50%) 43%,
            hsl(var(--hue, 25), 70%, 40%)
        );
        opacity: 1;
        transition: opacity 0.5s;
        animation: spin 4s linear infinite;
    }

    @keyframes spin {
        0% { --rotate: 0deg; }
        100% { --rotate: 360deg; }
    }

    /* Adjust Content Layout */
    .electric-content-container {
        position: relative;
        z-index: 10;
        background: #191c29; /* Match card bg to cover the middle */
        border-radius: 6px;
        height: 100%;
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
    }

    .electric-content-top {
        padding: 0;
        padding-bottom: 1rem;
        height: auto;
    }

    .electric-content-bottom {
        padding: 0;
        padding-top: 1rem;
    }

    .electric-title {
        font-size: 1.5rem;
        color: hsl(var(--hue, 25), 90%, 60%);
    }
    
    .electric-description {
        color: hsla(var(--hue, 25), 90%, 60%, 0.7);
    }
    
    .electric-scrollbar-glass {
        color: hsla(var(--hue, 25), 90%, 60%, 0.9);
        background: hsla(var(--hue, 25), 90%, 60%, 0.1);
    }
    
    .electric-divider {
        background-color: hsla(var(--hue, 25), 90%, 60%, 0.3);
        opacity: 1;
    }
}

/* Rotation Property for Mobile Card Design */
@property --rotate {
    syntax: "<angle>";
    initial-value: 132deg;
    inherits: false;
}