/* ==========================================================================
   GlassIcon — shared glass badge styles
   Used by: icon-cards, showcase, related-categories, toolbox, help-cards
   ========================================================================== */

/* --- Badge container --- */
.thch-glass-badge {
    position: relative;
    width: 6.25rem;
    height: 6.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.thch-glass-badge > svg,
.thch-glass-badge > img {
    width: 2.5rem;
    height: 2.5rem;
    display: block;
    position: relative;
    z-index: 2;
}

/* --- CSS arc ring (no-JS fallback) ---
   Conic gradient masked to a ring shape, ~270deg arc
   brightest upper-right, fading to transparent lower-left */
.thch-glass-badge::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    z-index: 3;
    pointer-events: none;
    background: conic-gradient(
        from 110deg,
        transparent 0deg,
        transparent 40deg,
        rgba(255, 255, 255, 0.08) 80deg,
        rgba(255, 255, 255, 0.35) 160deg,
        rgba(255, 255, 255, 0.55) 200deg,
        rgba(255, 255, 255, 0.35) 240deg,
        rgba(255, 255, 255, 0.08) 300deg,
        transparent 340deg,
        transparent 360deg
    );
    mask-image: radial-gradient(
        circle,
        transparent calc(50% - 2.5px),
        black calc(50% - 1px),
        black calc(50% + 1px),
        transparent calc(50% + 2.5px)
    );
    -webkit-mask-image: radial-gradient(
        circle,
        transparent calc(50% - 2.5px),
        black calc(50% - 1px),
        black calc(50% + 1px),
        transparent calc(50% + 2.5px)
    );
}

/* Light variant (white/neutral card bg): very subtle gray circle + light gray arc */
.thch-glass-badge--light {
    background: rgba(0, 0, 0, 0.03);
}

.thch-glass-badge--light::after {
    background: conic-gradient(
        from 110deg,
        transparent 0deg,
        transparent 120deg,
        rgba(120, 125, 145, 0.02) 160deg,
        rgba(120, 125, 145, 0.08) 190deg,
        rgba(120, 125, 145, 0.10) 200deg,
        rgba(120, 125, 145, 0.08) 210deg,
        rgba(120, 125, 145, 0.02) 240deg,
        transparent 280deg,
        transparent 360deg
    );
}

/* When JS canvas ring is active, hide CSS fallback */
.thch-glass-badge--enhanced::after {
    display: none;
}

/* --- Lens layer (for photo backgrounds, positioned by JS) --- */
.thch-glass-badge__lens {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
}

.thch-glass-badge__lens img {
    position: absolute;
    display: block;
    max-width: none;
    height: auto;
    transition: transform 0.3s;
}

/* --- Canvas ring overlay --- */
.thch-glass-badge__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    z-index: 3;
    pointer-events: none;
}

.thch-glass-badge__ring canvas {
    width: 100%;
    height: 100%;
    display: block;
}