/* GlowCard CSS for HTML files */

/* Base glow card styles */
.glow-card {
    border-radius: 1rem;
    position: relative;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Glow effects using pseudo-elements */
[data-glow-card]::before,
[data-glow-card]::after {
    pointer-events: none;
    content: "";
    position: absolute;
    inset: calc(var(--border-size) * -1);
    border: var(--border-size) solid transparent;
    border-radius: calc(var(--radius) * 1px);
    background-attachment: fixed;
    background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
    background-repeat: no-repeat;
    background-position: 50% 50%;
    
    /* Better browser compatibility for masks */
    -webkit-mask: 
        linear-gradient(#fff 0 0) padding-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: subtract;
    mask: 
        linear-gradient(#fff 0 0) padding-box, 
        linear-gradient(#fff 0 0);
    mask-composite: subtract;
    
    /* Fallback for browsers without mask support */
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
}

[data-glow-card]::before {
    background-image: radial-gradient(
        calc(var(--spotlight-size) * 0.75) calc(var(--spotlight-size) * 0.75) at
        calc(var(--x, 0) * 1px)
        calc(var(--y, 0) * 1px),
        hsl(0 0% 100% / var(--border-spot-opacity, 1)), transparent 100%
    );
    filter: brightness(2);
}

[data-glow-card]::after {
    background-image: radial-gradient(
        calc(var(--spotlight-size) * 0.5) calc(var(--spotlight-size) * 0.5) at
        calc(var(--x, 0) * 1px)
        calc(var(--y, 0) * 1px),
        hsl(0 100% 100% / var(--border-light-opacity, 1)), transparent 100%
    );
}

[data-glow] [data-glow] {
    position: absolute;
    inset: 0;
    will-change: filter;
    opacity: var(--outer, 1);
    border-radius: calc(var(--radius) * 1px);
    border-width: calc(var(--border-size) * 20);
    filter: blur(calc(var(--border-size) * 10));
    background: none;
    pointer-events: none;
    border: none;
}

[data-glow] > [data-glow]::before {
    inset: -10px;
    border-width: 10px;
}

/* Base glow card styles */
[data-glow-card] {
    position: relative;
    overflow: hidden;
    touch-action: none;
    /* Default styles */
    --base: 0;
    --spread: 0;
    --radius: 14;
    --border: 2;
    --backdrop: rgba(255, 255, 255, 0.05);
    --backup-border: rgba(255, 255, 255, 0.2);
    --size: 200;
    --outer: 1;
    --border-size: calc(var(--border, 2) * 1px);
    --spotlight-size: calc(var(--size, 200) * 1px);
    --hue: 0;
    --saturation: 0;
    --lightness: 100;
    --bg-spot-opacity: 0.1;
    --border-spot-opacity: 1;
    --border-light-opacity: 1;

    background-image: radial-gradient(
        var(--spotlight-size) var(--spotlight-size) at
        calc(var(--x, 0) * 1px)
        calc(var(--y, 0) * 1px),
        hsl(var(--hue, 210) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 70) * 1%) / var(--bg-spot-opacity, 0.1)), transparent
    );
    background-color: var(--backdrop, transparent);
    background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
    background-position: 50% 50%;
    background-attachment: fixed;
    border: var(--border-size) solid var(--backup-border);
    border-radius: calc(var(--radius) * 1px);
}

/* Default glow card variables */
.glow-card {
    --saturation: 100;
    --lightness: 70;
    --bg-spot-opacity: 0.1;
    --border-spot-opacity: 1;
    --border-light-opacity: 1;
}

/* Enhanced feature cards */
.feature-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* Card content styling */
.card-content {
    position: relative;
    z-index: 2;
}

/* Stats cards */
.stats-card-glow {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    text-align: center;
    border-radius: 1rem;
}

/* Tool page card styling */
.tool-card-glow {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 1.5rem;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.tool-card-glow:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}