/* ===================================
   VARIANTS.CSS
   Switchable visual variants for cards, navbar, and border trace
   =================================== */

/* ===================================
   BORDER TRACE HOVER EFFECT
   Glowing line traces around card borders on hover
   Uses @property --border-angle for smooth CSS animation
   =================================== */
@keyframes border-rotate {
    to { --border-angle: 360deg; }
}

.project-card::before,
.education-card::before,
.accordion-item::before,
.skill-category::before,
.highlight-item::before,
.contact-method::before,
.cert-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(
        from var(--border-angle),
        transparent 60%,
        #00f0ff 78%,
        #0066ff 88%,
        transparent 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
    pointer-events: none;
}

.project-card:hover::before,
.education-card:hover::before,
.accordion-item:hover::before,
.skill-category:hover::before,
.highlight-item:hover::before,
.contact-method:hover::before,
.cert-item:hover::before {
    opacity: 1;
    animation: border-rotate 3s linear infinite;
}

/* Fallback for browsers without @property / conic-gradient */
@supports not (background: conic-gradient(red, blue)) {
    .project-card::before,
    .education-card::before,
    .accordion-item::before,
    .skill-category::before,
    .highlight-item::before,
    .contact-method::before,
    .cert-item::before {
        display: none;
    }

    .project-card:hover,
    .education-card:hover,
    .accordion-item:hover,
    .skill-category:hover,
    .highlight-item:hover,
    .contact-method:hover,
    .cert-item:hover {
        border-color: #00f0ff;
        box-shadow: 0 0 20px rgba(0, 240, 255, 0.25);
    }
}

/* ===================================
   GLASS CARD VARIANT
   Frosted glass on dark backgrounds
   =================================== */
[data-cards="glass"] .project-card,
[data-cards="glass"] .education-card,
[data-cards="glass"] .accordion-item,
[data-cards="glass"] .skill-category,
[data-cards="glass"] .highlight-item,
[data-cards="glass"] .contact-method,
[data-cards="glass"] .cert-item,
[data-cards="glass"] .certifications,
[data-cards="glass"] .language-item,
[data-cards="glass"] .model-info {
    background: rgba(0, 240, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(0, 240, 255, 0.1);
}

[data-cards="glass"] .project-card:hover,
[data-cards="glass"] .education-card:hover,
[data-cards="glass"] .accordion-item:hover,
[data-cards="glass"] .skill-category:hover,
[data-cards="glass"] .highlight-item:hover,
[data-cards="glass"] .contact-method:hover,
[data-cards="glass"] .cert-item:hover {
    background: rgba(0, 240, 255, 0.05);
    border-color: rgba(0, 240, 255, 0.2);
}

[data-cards="glass"] .skill-tag,
[data-cards="glass"] .social-link {
    background: rgba(0, 240, 255, 0.04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ===================================
   GLASS NAVBAR VARIANT
   Cyan-tinted glassmorphism
   =================================== */
[data-navbar="glass"] .navbar {
    background: rgba(0, 240, 255, 0.04);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom-color: rgba(0, 240, 255, 0.1);
}

[data-navbar="glass"] .navbar::before {
    display: none;
}

[data-navbar="glass"] .navbar.scrolled {
    background: rgba(0, 240, 255, 0.06);
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.06);
}

[data-navbar="glass"] .nav-link {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    [data-navbar="glass"] .nav-menu {
        background: rgba(5, 5, 8, 0.95);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }
}

/* ===================================
   TRANSPARENT NAVBAR VARIANT
   Invisible until scroll
   =================================== */
[data-navbar="transparent"] .navbar {
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
}

[data-navbar="transparent"] .navbar::before,
[data-navbar="transparent"] .navbar::after {
    display: none;
}

[data-navbar="transparent"] .navbar.scrolled {
    background: rgba(0, 0, 0, 0.85);
    border-bottom-color: rgba(0, 240, 255, 0.15);
}

[data-navbar="transparent"] .navbar.scrolled::after {
    display: block;
}

[data-navbar="transparent"] .nav-link {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    [data-navbar="transparent"] .nav-menu {
        background: rgba(0, 0, 0, 0.95);
    }
}