/* ===== THEME VARIABLES ===== */
:root {
    --bg-primary: #050505;
    --bg-secondary: #0a0a0a;
    --text-main: #e0e0e0;
    --text-muted: #9ca3af;
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.1);
    --card-bg: rgba(255, 255, 255, 0.03);
    --nav-bg: rgba(0, 0, 0, 0.3);
    --section-alt: rgba(0, 0, 0, 0.3);
}

html.light {
    --bg-primary: #f8fafc;
    --bg-secondary: #f1f5f9;
    --text-main: #0f172a;
    --text-muted: #475569;
    --glass-bg: rgba(255, 255, 255, 0.80);
    --glass-border: rgba(0, 0, 0, 0.08);
    --card-bg: rgba(255, 255, 255, 0.90);
    --nav-bg: rgba(248, 250, 252, 0.92);
    --section-alt: rgba(241, 245, 249, 0.8);
}

/* ===== GLOBAL TRANSITIONS ===== */
*,
*::before,
*::after {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* ===== LIGHT MODE OVERRIDES ===== */
html.light body {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

/* Radial gradient bg overlay — remove in light mode */
html.light body>div[class*="radial-gradient"],
html.light .fixed.bg-\[radial-gradient\] {
    opacity: 0 !important;
}

/* Navbar */
html.light nav#navbar {
    background: rgba(248, 250, 252, 0.95) !important;
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.07);
}

html.light nav a,
html.light nav span,
html.light nav p {
    color: #1e293b !important;
}

html.light nav a:hover {
    color: #0ea5e9 !important;
}

html.light .text-gray-300 {
    color: #374151 !important;
}

html.light .text-gray-400 {
    color: #4b5563 !important;
}

html.light .text-gray-500 {
    color: #6b7280 !important;
}

html.light .text-gray-600 {
    color: #6b7280 !important;
}

html.light .text-white {
    color: #0f172a !important;
}

html.light .text-gray-800 {
    color: #1e293b !important;
}

html.light .text-gray-900 {
    color: #111827 !important;
}

/* Primary accent stays cyan but slightly deeper for light readability */
html.light .text-primary {
    color: #0891b2 !important;
}

html.light .border-primary {
    border-color: #0891b2 !important;
}

html.light .bg-primary {
    background-color: #0891b2 !important;
}

html.light .text-secondary {
    color: #6366f1 !important;
}

html.light .bg-secondary {
    background-color: #e0e7ff !important;
}

/* Glass Cards */
html.light .glass-card {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

html.light .glass-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10) !important;
}

/* Section backgrounds */
html.light section {
    background: transparent !important;
}

html.light .bg-black\/30 {
    background: rgba(241, 245, 249, 0.8) !important;
}

html.light .bg-black\/20 {
    background: rgba(241, 245, 249, 0.6) !important;
}

html.light .bg-black\/40 {
    background: rgba(226, 232, 240, 0.7) !important;
}

html.light .bg-black\/50 {
    background: rgba(226, 232, 240, 0.8) !important;
}

html.light .bg-gray-800 {
    background: #e2e8f0 !important;
}

html.light .bg-gray-900 {
    background: #f1f5f9 !important;
}

html.light .bg-gray-700 {
    background: #e2e8f0 !important;
}

/* Borders */
html.light .border-glass-border {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

html.light .border-white\/10 {
    border-color: rgba(0, 0, 0, 0.06) !important;
}

/* Code/tag backgrounds */
html.light .bg-primary\/10 {
    background: rgba(8, 145, 178, 0.10) !important;
}

html.light .bg-primary\/20 {
    background: rgba(8, 145, 178, 0.18) !important;
}

html.light .bg-primary\/5 {
    background: rgba(8, 145, 178, 0.06) !important;
}

html.light .bg-secondary\/10 {
    background: rgba(99, 102, 241, 0.10) !important;
}

html.light .bg-secondary\/20 {
    background: rgba(99, 102, 241, 0.18) !important;
}

/* Skills/tag pill colors */
html.light .bg-purple-900\/50 {
    background: #ede9fe !important;
}

html.light .text-purple-300 {
    color: #7c3aed !important;
}

html.light .border-purple-500\/30 {
    border-color: #a78bfa !important;
}

html.light .bg-yellow-900\/50 {
    background: #fef9c3 !important;
}

html.light .text-yellow-300 {
    color: #b45309 !important;
}

html.light .border-yellow-500\/30 {
    border-color: #fcd34d !important;
}

html.light .bg-orange-900\/50 {
    background: #ffedd5 !important;
}

html.light .text-orange-300 {
    color: #c2410c !important;
}

html.light .border-orange-500\/30 {
    border-color: #fb923c !important;
}

html.light .bg-blue-900\/50 {
    background: #dbeafe !important;
}

html.light .text-blue-300 {
    color: #1d4ed8 !important;
}

html.light .border-blue-500\/30 {
    border-color: #93c5fd !important;
}

html.light .bg-green-900\/30 {
    background: #dcfce7 !important;
}

html.light .text-green-400 {
    color: #16a34a !important;
}

html.light .bg-red-900\/30 {
    background: #fee2e2 !important;
}

html.light .text-red-400 {
    color: #dc2626 !important;
}

/* Mobile menu */
html.light #mobile-menu {
    background: #f8fafc !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Footer */
html.light footer {
    background: #f1f5f9 !important;
    border-top-color: rgba(0, 0, 0, 0.08) !important;
}

/* Scrollbar */
html.light ::-webkit-scrollbar-track {
    background: #f1f5f9;
}

html.light ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
}

html.light ::-webkit-scrollbar-thumb:hover {
    background: #0891b2;
}

/* Backdrop/blur sections in light */
html.light [class*="backdrop-blur"] {
    backdrop-filter: blur(12px);
}

/* Hero gradient text */
html.light .bg-gradient-to-r.from-white {
    --tw-gradient-from: #0f172a;
}

/* ===== PROJECT CARDS — Light mode ===== */
/* Replace the black overlay gradient with a subtle white-to-transparent */
html.light .bg-gradient-to-t.from-black.via-black\/80 {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.80) 40%, transparent 100%) !important;
}

/* Project card wrapper background */
html.light #projects .group.relative.rounded-xl {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

/* Project card image placeholder */
html.light #projects .h-48.bg-gray-800 {
    background: #e2e8f0 !important;
}

html.light #projects .h-48 .flex.items-center {
    background: #f1f5f9 !important;
}

/* Project card text — ensure dark color on light bg */
html.light #projects h4 {
    color: #0f172a !important;
}

html.light #projects p {
    color: #475569 !important;
}

html.light #projects .text-gray-400 {
    color: #64748b !important;
}

html.light #projects a.text-sm.font-bold.text-white {
    color: #0891b2 !important;
}

html.light #projects a.text-sm.font-bold.text-gray-500 {
    color: #94a3b8 !important;
}

/* Tag pills in project cards */
html.light #projects .text-xs.bg-gray-700 {
    background: #e2e8f0 !important;
    color: #475569 !important;
}

/* ===== CONTACT SECTION — Light mode ===== */
/* Dark left panel → branded gradient */
html.light .bg-gradient-to-br.from-gray-900.to-black {
    background: linear-gradient(135deg, #0891b2 0%, #6366f1 100%) !important;
}

/* Text inside that panel stays white (already readable on cyan-blue bg) */
html.light .bg-gradient-to-br.from-gray-900.to-black h3,
html.light .bg-gradient-to-br.from-gray-900.to-black p,
html.light .bg-gradient-to-br.from-gray-900.to-black a,
html.light .bg-gradient-to-br.from-gray-900.to-black .text-gray-400,
html.light .bg-gradient-to-br.from-gray-900.to-black .text-gray-500 {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Contact form inputs in light mode */
html.light input[type="text"],
html.light input[type="email"],
html.light textarea {
    background: #f8fafc !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #0f172a !important;
}

html.light input::placeholder,
html.light textarea::placeholder {
    color: #94a3b8 !important;
}

/* ===== THEME TOGGLE BUTTON ===== */
#theme-toggle {
    position: relative;
    width: 52px;
    height: 26px;
    background: rgba(255, 255, 255, 0.1);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.3s, border-color 0.3s;
}

#theme-toggle .toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #00f2ff;
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(.4, 0, .2, 1), background 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #050505;
}

html.light #theme-toggle {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.15);
}

html.light #theme-toggle .toggle-thumb {
    transform: translateX(26px);
    background: #0891b2;
    color: #fff;
}

/* Glassmorphism Utilities */

.glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* Neon Glow Hover Effect */
.hover-neon:hover {
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.3), inset 0 0 10px rgba(0, 242, 255, 0.1);
    border-color: rgba(0, 242, 255, 0.5);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #050505;
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #00f2ff;
}

/* Animation Utilities */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes float-delayed {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(0px);
    }
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}

.animate-float-delayed {
    animation: float-delayed 5s ease-in-out infinite;
}

/* Hexagon Mask specific if needed, or stick to rounded styles */

/* Typed Cursor Customization */
.typed-cursor {
    color: #00f2ff;
}

/* Navbar active state */
.nav-link.active {
    color: #00f2ff;
}

/* Mobile Menu — top to bottom slide */
#mobile-menu {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

#mobile-menu.open {
    transform: translateY(0) !important;
}

/* Stagger animation for mobile links */
#mobile-menu.open .mobile-link {
    animation: mobileItemIn 0.4s ease-out both;
}

#mobile-menu.open .mobile-link:nth-child(2) {
    animation-delay: 0.05s;
}

#mobile-menu.open .mobile-link:nth-child(3) {
    animation-delay: 0.10s;
}

#mobile-menu.open .mobile-link:nth-child(4) {
    animation-delay: 0.15s;
}

#mobile-menu.open .mobile-link:nth-child(5) {
    animation-delay: 0.20s;
}

#mobile-menu.open .mobile-link:nth-child(6) {
    animation-delay: 0.25s;
}

#mobile-menu.open .mobile-link:nth-child(7) {
    animation-delay: 0.30s;
}

#mobile-menu.open .mobile-link:nth-child(8) {
    animation-delay: 0.35s;
}

@keyframes mobileItemIn {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== CUSTOM CURSOR ===== */
* {
    cursor: none !important;
}

/* Small dot cursor */
#cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    background: #00f2ff;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    transition: width 0.2s ease, height 0.2s ease, background 0.2s ease;
    box-shadow: 0 0 8px #00f2ff, 0 0 16px #00f2ff;
}

/* Large glowing ring */
#cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(0, 242, 255, 0.18) 0%, rgba(0, 242, 255, 0.05) 50%, transparent 70%);
    border: 1.5px solid rgba(0, 242, 255, 0.4);
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.3), inset 0 0 10px rgba(0, 242, 255, 0.1);
    transition: width 0.35s ease, height 0.35s ease, opacity 0.3s ease, border-color 0.3s ease;
}

/* Hover effect on interactive elements */
body.cursor-hover #cursor-dot {
    width: 6px;
    height: 6px;
    background: #87efff;
}

body.cursor-hover #cursor-glow {
    width: 65px;
    height: 65px;
    border-color: rgba(0, 242, 255, 0.7);
    background: radial-gradient(circle, rgba(0, 242, 255, 0.25) 0%, rgba(77, 77, 255, 0.08) 50%, transparent 70%);
    box-shadow: 0 0 25px rgba(0, 242, 255, 0.5), 0 0 50px rgba(0, 242, 255, 0.2), inset 0 0 15px rgba(0, 242, 255, 0.1);
}

/* Click effect */
body.cursor-click #cursor-dot {
    width: 14px;
    height: 14px;
    background: #ffffff;
    box-shadow: 0 0 12px #00f2ff, 0 0 25px #00f2ff;
}

body.cursor-click #cursor-glow {
    width: 30px;
    height: 30px;
    opacity: 0.5;
}

/* Hide cursor on mobile */
@media (hover: none) and (pointer: coarse) {

    #cursor-dot,
    #cursor-glow {
        display: none;
    }

    * {
        cursor: auto !important;
    }
}

/* ===== COMING SOON CARD ANIMATIONS ===== */

/* Background pulse rings */
.cs-pulse {
    position: absolute;
    border-radius: 50%;
    animation: csPulseRing 2.5s ease-out infinite;
    pointer-events: none;
}

.cs-pulse-1 {
    width: 100px;
    height: 100px;
    border: 1.5px solid rgba(0, 242, 255, 0.25);
    animation-delay: 0s;
}

.cs-pulse-2 {
    width: 160px;
    height: 160px;
    border: 1px solid rgba(0, 242, 255, 0.12);
    animation-delay: 0.8s;
}

@keyframes csPulseRing {
    0% {
        transform: scale(0.6);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

/* Orbiting ring + dot */
.cs-orbit {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1.5px dashed rgba(0, 242, 255, 0.25);
    animation: csOrbit 3s linear infinite;
    animation-fill-mode: both;
}

.cs-orbit-dot {
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: #00f2ff;
    border-radius: 50%;
    box-shadow: 0 0 8px #00f2ff, 0 0 16px rgba(0, 242, 255, 0.6);
}

@keyframes csOrbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Glowing core bubble */
.cs-core {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 242, 255, 0.08);
    border: 1.5px solid rgba(0, 242, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: csCorePulse 2s ease-in-out infinite alternate;
    animation-fill-mode: both;
}

@keyframes csCorePulse {
    from {
        box-shadow: 0 0 8px rgba(0, 242, 255, 0.3);
    }

    to {
        box-shadow: 0 0 22px rgba(0, 242, 255, 0.7), 0 0 40px rgba(0, 242, 255, 0.2);
    }
}

/* Blinking cursor after title */
.cs-blink {
    animation: csBlink 1s step-end infinite;
    animation-fill-mode: both;
    display: inline-block;
}

@keyframes csBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* "In Dev" tag border pulse */
.cs-tag-pulse {
    animation: csTagPulse 2s ease-in-out infinite alternate;
    animation-fill-mode: both;
}

@keyframes csTagPulse {
    from {
        box-shadow: none;
    }

    to {
        box-shadow: 0 0 8px rgba(0, 242, 255, 0.5);
    }
}

/* Dot loader before "In Progress" */
.cs-dot-loader {
    display: inline-flex;
    gap: 3px;
    align-items: center;
}

.cs-dot-loader span {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    animation: csDotBounce 1.2s ease-in-out infinite;
    animation-fill-mode: both;
}

.cs-dot-loader span:nth-child(1) {
    animation-delay: 0s;
}

.cs-dot-loader span:nth-child(2) {
    animation-delay: 0.2s;
}

.cs-dot-loader span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes csDotBounce {

    0%,
    80%,
    100% {
        transform: scaleY(1);
        opacity: 0.4;
    }

    40% {
        transform: scaleY(1.6);
        opacity: 1;
    }
}

/* ===== OVERRIDE: keep animations working despite global transition rule ===== */
.cs-orbit,
.cs-orbit-dot,
.cs-pulse,
.cs-core,
.cs-blink,
.cs-tag-pulse,
.cs-dot-loader span {
    transition: none !important;
}

/* ================================================================
   VIBE CARD ANIMATIONS — post-education sections
   ================================================================ */

/* 1. Subtle card float (continuous) */
@keyframes cardFloat {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-6px);
    }
}

/* 2. Hover shimmer sweep across card */
@keyframes shimmerSweep {
    0% {
        left: -80%;
    }

    100% {
        left: 150%;
    }
}

/* 3. Border glow pulse */
@keyframes borderGlow {

    0%,
    100% {
        box-shadow: 0 0 0px transparent;
    }

    50% {
        box-shadow: 0 0 18px var(--card-glow, rgba(0, 242, 255, 0.18));
    }
}

/* 4. Logo icon breathe */
@keyframes iconBreathe {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.12);
    }
}

/* ── Floating card classes (staggered) ── */
.vibe-card {
    --card-glow: rgba(0, 242, 255, 0.15);
    animation: cardFloat 5s ease-in-out infinite, borderGlow 4s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.vibe-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.06) 50%,
            transparent 100%);
    transform: skewX(-15deg);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.vibe-card:hover::after {
    opacity: 1;
    animation: shimmerSweep 0.7s ease forwards;
}

/* Stagger delays for grid children */
.vibe-card:nth-child(1) {
    animation-delay: 0s, 0s;
}

.vibe-card:nth-child(2) {
    animation-delay: 0.5s, 0.4s;
}

.vibe-card:nth-child(3) {
    animation-delay: 1.0s, 0.8s;
}

.vibe-card:nth-child(4) {
    animation-delay: 1.5s, 1.2s;
}

.vibe-card:nth-child(5) {
    animation-delay: 0.75s, 0.6s;
}

.vibe-card:nth-child(6) {
    animation-delay: 1.25s, 1.0s;
}

/* Logo icon breathe */
.vibe-icon {
    animation: iconBreathe 3.5s ease-in-out infinite;
}

.vibe-card:nth-child(2) .vibe-icon {
    animation-delay: 0.6s;
}

.vibe-card:nth-child(3) .vibe-icon {
    animation-delay: 1.2s;
}

.vibe-card:nth-child(4) .vibe-icon {
    animation-delay: 1.8s;
}

.vibe-card:nth-child(5) .vibe-icon {
    animation-delay: 0.9s;
}

.vibe-card:nth-child(6) .vibe-icon {
    animation-delay: 1.5s;
}

/* Per-section glow colour overrides */
#experience .vibe-card {
    --card-glow: rgba(99, 102, 241, 0.20);
}

#leadership .vibe-card {
    --card-glow: rgba(0, 242, 255, 0.15);
}

#cp .vibe-card {
    --card-glow: rgba(0, 242, 255, 0.18);
}

#projects .vibe-card {
    --card-glow: rgba(0, 242, 255, 0.15);
}

/* Disable float on hover so the hover-lift takes over cleanly */
.vibe-card:hover {
    animation-play-state: paused;
}

/* Keep animation running overrides (prevent global transition from killing it) */
.vibe-card,
.vibe-icon {
    transition: transform 0.3s cubic-bezier(.4, 0, .2, 1),
        box-shadow 0.3s ease,
        border-color 0.3s ease,
        background-color 0.3s ease !important;
}