/* ============================================
   ATMOSPHERIC ACCENTS — subtle red accents only
   ============================================ */

/* ---- Glowing red underline on section titles ---- */
.section-title::after {
    background: linear-gradient(135deg, var(--primary-color), #ff6644, var(--secondary-color)) !important;
    box-shadow: 0 0 8px rgba(255, 0, 60, 0.5);
}

/* ---- Red glow on stat cards hover ---- */
.stat:hover {
    box-shadow: 0 0 20px rgba(255, 0, 40, 0.35) !important;
}

/* ---- Red ember glow on primary buttons ---- */
.btn-primary {
    box-shadow: 0 0 14px rgba(255, 0, 60, 0.35),
                0 4px 16px rgba(200, 0, 0, 0.2) !important;
}

/* ---- Red glow on nav logo ---- */
.nav-logo a {
    text-shadow: 0 0 12px rgba(255, 0, 60, 0.4);
}

/* ---- Red hover glow on social icons ---- */
.social-icon-wrapper:hover .social-icon,
.social-link:hover {
    box-shadow: 0 0 16px rgba(255, 0, 60, 0.5) !important;
}

/* ---- Subtle red border on cards ---- */
.skill-category,
.project-card,
.card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(255, 0, 60, 0.05) !important;
    transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}

.skill-category:hover,
.project-card:hover,
.card:hover {
    box-shadow: 0 8px 28px rgba(200, 0, 0, 0.25),
                0 0 0 1px rgba(255, 0, 60, 0.10) !important;
}

/* ---- Red contact hover ---- */
.contact-item:hover {
    box-shadow: 0 0 16px rgba(255, 0, 60, 0.2);
    border-left: 3px solid rgba(255, 0, 60, 0.4);
    transition: all 0.3s ease;
}

/* ---- Red footer border ---- */
.footer {
    border-top: 1px solid transparent !important;
    background-image: linear-gradient(var(--background-dark), var(--background-dark)),
                      linear-gradient(90deg, transparent, rgba(255, 0, 60, 0.25), transparent) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
}