*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #000000;
    color: #333;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: default;
}

#particles-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.content {
    position: relative;
    z-index: 1;
    width: 90%;
    max-width: 1200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#text-svg {
    width: 100%;
    height: auto;
    font-weight: 900;
    font-size: 180px; 
    user-select: none;
    overflow: visible; /* Allow glow to spill slightly if needed */
}

/* Base styling for the text - THE COVER */
.base-text {
    fill: #0e0e0e; 
    stroke: #0e0e0e; /* Match fill to extend cover slightly over the seam */
    stroke-width: 2px; /* Slightly thicker to ensure full coverage of inner artifacts */
    paint-order: stroke fill;
}

/* The glow text - THE BACKLIGHT */
.glow-text-stroke {
    fill: none; /* No fill needed behind */
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 4px; /* Thicker because half is hidden behind the base text */
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

/* 
   GLOW ANIMATION via CSS 
   Efficiently handles the radius expansion/contraction 
*/
#glow-spotlight {
    r: 60px; /* Default radius */
    /* Smooth return to original size */
    transition: r 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* When clicking anywhere (body:active), expand the radius */
body:active #glow-spotlight {
    r: 1500px; /* Expanded radius */
    /* Fast expansion */
    transition: r 0.3s ease-out;
}