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

# 1. Extruded 3D Cards (.tool-card, .card)
$oldToolCard = '.tool-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:26px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:14px;transition:.15s;}'
$newToolCard = '.tool-card{background:#fff;border:1.5px solid var(--border-strong);border-radius:20px;padding:26px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:14px;transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s; box-shadow: 0 6px 0 var(--border-strong), 0 15px 25px -5px rgba(0,0,0,0.05); transform: translateY(0);}'
$css = $css.Replace($oldToolCard, $newToolCard)

$oldToolCardHover = '.tool-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-card);transform:translateY(-2px);}'
$newToolCardHover = '.tool-card:hover{border-color:var(--violet-500);box-shadow: 0 8px 0 var(--violet-600), 0 20px 30px -5px rgba(124,47,245,0.25); transform: translateY(-2px);}'
$css = $css.Replace($oldToolCardHover, $newToolCardHover)

# Add Active state for tool-card
$css = $css -replace '(?s)(\.tool-card:hover[^}]*\})', "$1`n.tool-card:active{transform: translateY(6px); box-shadow: 0 0 0 var(--violet-600), 0 0 0 rgba(0,0,0,0) !important; transition: 0.05s;}"

# 2. Recessed Tool Icons
$oldToolIcon = '.tool-icon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;}'
$newToolIcon = '.tool-icon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center; box-shadow: inset 0 3px 6px rgba(0,0,0,0.12), inset 0 -2px 3px rgba(255,255,255,0.6); border: 1px solid rgba(0,0,0,0.05);}'
$css = $css.Replace($oldToolIcon, $newToolIcon)

# 3. 3D Buttons (Update pulseGlow to include the physical 3D shadows)
$oldPulse = '@keyframes pulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(16, 219, 136, 0.9); }
    50% { box-shadow: 0 0 18px 6px rgba(16, 219, 136, 0.75); }
    100% { box-shadow: 0 0 0 0 rgba(16, 219, 136, 0); }
}'
$newPulse = '@keyframes pulseGlow {
    0% { box-shadow: inset 0 2px 0 rgba(255,255,255,0.3), inset 0 -3px 0 rgba(0,0,0,0.15), 0 4px 0 rgba(0,0,0,0.15), 0 0 0 0 rgba(16, 219, 136, 0.9); }
    50% { box-shadow: inset 0 2px 0 rgba(255,255,255,0.3), inset 0 -3px 0 rgba(0,0,0,0.15), 0 4px 0 rgba(0,0,0,0.15), 0 0 18px 6px rgba(16, 219, 136, 0.75); }
    100% { box-shadow: inset 0 2px 0 rgba(255,255,255,0.3), inset 0 -3px 0 rgba(0,0,0,0.15), 0 4px 0 rgba(0,0,0,0.15), 0 0 0 0 rgba(16, 219, 136, 0); }
}'
$css = $css.Replace($oldPulse, $newPulse)

# Add Active state for buttons
$css = $css -replace '(?s)(\.btn\{[^}]*\})', "$1`n.btn:active{transform: translateY(4px) !important; animation: none !important; box-shadow: inset 0 3px 6px rgba(0,0,0,0.2) !important; transition: transform 0.05s, box-shadow 0.05s;}"

# Remove the redundant hover transform on tool cards from trendy tool cards section to avoid conflicts
$css = $css -replace '(?s)\.tool-card:hover\s*\{\s*transform: translateY\(-5px\) scale\(1\.02\);\s*box-shadow: 0 15px 35px -10px rgba\(124,47,245, 0\.2\);\s*\}', ''

Set-Content -Path $cssPath -Value $css -Encoding UTF8
Write-Host "Applied 3D extruded styling to cards, buttons, and icons."
