/* ========== Glass Layers ========== */

/* Shared layered card treatment for interactive content cards. */
.glass-card {
    position: relative;
    background: var(--color-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition:
        transform var(--duration-base) var(--ease-out-quart),
        box-shadow var(--duration-base) var(--ease-out-quart);
}

.glass-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.35;
    z-index: 0;
    transition: opacity var(--duration-base) var(--ease-out-quart);
}

.glass-card:hover .glass-card-bg {
    opacity: 0.45;
}

.glass-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.42);
    z-index: 1;
}

.glass-card-content {
    position: relative;
    z-index: 2;
    padding: var(--glass-card-padding, var(--space-lg));
}

.glass-card::before {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    left: var(--mouse-x, 50%);
    top: var(--mouse-y, 50%);
    transform: translate(-50%, -50%);
    background: var(--color-glow);
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-out-quart);
    pointer-events: none;
    z-index: 3;
}

.glass-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-md);
    background: radial-gradient(
        circle at top left,
        color-mix(in srgb, var(--color-accent) 30%, transparent) 0%,
        transparent 68%
    );
    border: 1px solid color-mix(in srgb, var(--color-accent) 72%, transparent);
    box-shadow: inset 0 0 20px color-mix(in srgb, var(--color-accent) 18%, transparent);
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-out-quart);
    pointer-events: none;
    z-index: 4;
}

.glass-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
}

.glass-card:hover::before,
.glass-card:hover::after {
    opacity: 1;
}

.glass-card:active {
    transform: translateY(-1px);
    box-shadow: var(--shadow-card);
}

.glass-card:focus-visible {
    outline: 3px solid var(--color-coral);
    outline-offset: 3px;
}

.glass-card--dark .glass-card-overlay {
    background: var(--color-overlay);
}

.glass-card--dark .glass-card-content {
    color: var(--color-text-inverse);
}

.glass-card--no-glow::before,
.glass-card--no-glow::after {
    display: none;
}

.glass-card--rounded-sm {
    border-radius: var(--radius-sm);
}

.glass-card--rounded-sm::after {
    border-radius: var(--radius-sm);
}

.glass-card--rounded-lg {
    border-radius: var(--radius-xl);
}

.glass-card--rounded-lg::after {
    border-radius: var(--radius-xl);
}

/* Page-level shared layering without the interactive glow. */
.glass-section {
    position: relative;
    overflow: hidden;
}

.glass-section > .glass-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-image: var(--bg-image);
    opacity: var(--mist-opacity, 0.35);
    filter: blur(var(--mist-blur, 5px));
    z-index: 0;
}

.glass-section > .glass-card-overlay {
    position: absolute;
    inset: 0;
    background: var(--overlay-color, rgba(255, 255, 255, 0.42));
    z-index: 1;
}

.glass-section > .glass-card-content {
    position: relative;
    z-index: 2;
}

@media (hover: none) {
    .glass-card::before,
    .glass-card::after {
        display: block;
        opacity: 0;
    }

    .glass-card:hover {
        transform: none;
        box-shadow: var(--shadow-card);
    }

    .glass-card:hover .glass-card-bg {
        opacity: 0.35;
    }

    .glass-card:active,
    .glass-card.is-pressed,
    .glass-card:focus-within {
        transform: translateY(-1px) scale(0.985);
        box-shadow: var(--shadow-card-hover);
        transition: transform 100ms var(--ease-out-quart),
                    box-shadow 100ms var(--ease-out-quart);
    }

    .glass-card:active::after,
    .glass-card.is-pressed::after,
    .glass-card:focus-visible::after,
    .glass-card:focus-within::after {
        opacity: 0.85;
    }

    .glass-card:active::before,
    .glass-card.is-pressed::before,
    .glass-card:focus-within::before {
        opacity: 0.32;
    }

    .glass-card:active .glass-card-bg,
    .glass-card.is-pressed .glass-card-bg,
    .glass-card:focus-within .glass-card-bg {
        opacity: 0.42;
    }

    .glass-card:focus-visible {
        transform: translateY(-1px);
        box-shadow: var(--shadow-card-hover);
    }
}