$cssPath = "site\assets\style.css"
$css = Get-Content $cssPath -Raw

$oldDotCss = '(?s)\.nav-links a\.is-active::after\s*\{.*?\}.*?@keyframes dotPop\s*\{.*?\}'

$newCircleCss = @"
.nav-links a.is-active::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -60%);
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: #10b981; /* Radiant green */
        box-shadow: 0 4px 14px rgba(16,185,129,0.6);
        z-index: -1;
        animation: circlePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
      }
      @keyframes activePop {
        0% { transform: scale(1); }
        50% { transform: scale(1.1); }
        100% { transform: scale(1); }
      }
      @keyframes circlePop {
        0% { opacity: 0; transform: translate(-50%, -60%) scale(0.4); }
        100% { opacity: 1; transform: translate(-50%, -60%) scale(1); }
      }
"@

# The regex will match .nav-links a.is-active::after {...} and @keyframes dotPop {...}
# But activePop is between them! 
# Let's just match from `.nav-links a.is-active::after` to the end of `dotPop` block.
$css = $css -replace '(?s)\.nav-links a\.is-active::after\s*\{.*?@keyframes dotPop\s*\{.*?\}', $newCircleCss

Set-Content -Path $cssPath -Value $css -Encoding UTF8
Write-Host "Replaced small white dot with a floating radiant green circle."
