/* ─── ROOT VARIABLES ─────────────────────────────────────────────────────── */
:root {
    --brand: #22d3ee;
    --brand-dim: rgba(34, 211, 238, 0.15);
    --brand-glow: 0 0 20px rgba(34, 211, 238, 0.4);
    --dark: #0f172a;
    --dark-950: #020617;
    --surface: rgba(30, 41, 59, 0.6);
}

/* ─── SCROLLBAR ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--dark-950); }
::-webkit-scrollbar-thumb { background: #1e3a4a; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* ─── CUSTOM CURSOR ──────────────────────────────────────────────────────── */
body { cursor: none; }
a, button, [onclick], input, textarea, select { cursor: none; }

#cursor-dot {
    width: 6px; height: 6px;
    background: var(--brand);
    border-radius: 50%;
    position: fixed; z-index: 99999;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: width 0.2s ease, height 0.2s ease;
    box-shadow: var(--brand-glow);
}
#cursor-ring {
    width: 32px; height: 32px;
    border: 1.5px solid rgba(34,211,238,0.45);
    border-radius: 50%;
    position: fixed; z-index: 99998;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease, transform 0.06s linear;
}
#cursor-ring.hovered { width: 52px; height: 52px; border-color: rgba(34,211,238,0.9); }
#cursor-ring.clicked { transform: translate(-50%, -50%) scale(0.7); }

/* ─── GRAIN OVERLAY ──────────────────────────────────────────────────────── */
body::after {
    content: ''; position: fixed; inset: 0; z-index: 9997;
    pointer-events: none; opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat; background-size: 128px 128px;
}

/* ─── SCROLL PROGRESS ────────────────────────────────────────────────────── */
#scroll-progress {
    position: fixed; top: 0; left: 0; height: 2px;
    background: var(--brand); box-shadow: 0 0 8px var(--brand);
    z-index: 9999; width: 0%; transition: width 0.05s linear;
}

/* ─── REVEAL ─────────────────────────────────────────────────────────────── */
.reveal {
    opacity: 0; transform: translateY(28px);
    transition: opacity 0.75s cubic-bezier(0.22,1,0.36,1), transform 0.75s cubic-bezier(0.22,1,0.36,1);
}
.reveal.active { opacity: 1; transform: translateY(0); }
@keyframes fallback-show { to { opacity:1; transform:translateY(0); } }
.reveal:not(.active) { animation: fallback-show 0.75s cubic-bezier(0.22,1,0.36,1) 2s forwards; }

/* ─── SCAN BUTTON ────────────────────────────────────────────────────────── */
.scan-btn { position: relative; overflow: hidden; }
.scan-btn::after {
    content: ''; position: absolute; top: -100%; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(34,211,238,0.25), transparent);
    animation: scan 3s infinite;
}
@keyframes scan { 0% { top:-100%; } 100% { top:100%; } }

/* ─── SPOTLIGHT CARDS ────────────────────────────────────────────────────── */
.spotlight-card { position: relative; }
.spotlight-card::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(500px circle at var(--mouse-x,50%) var(--mouse-y,50%), rgba(34,211,238,0.07), transparent 40%);
    opacity: 0; transition: opacity 0.35s; pointer-events: none; z-index: 1; border-radius: inherit;
}
.spotlight-card:hover::before { opacity: 1; }

/* ─── GLASS PANEL ────────────────────────────────────────────────────────── */
.glass-panel {
    background: rgba(15,23,42,0.75);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.06);
}

/* ─── TIMELINE ───────────────────────────────────────────────────────────── */
#experience-container { position: relative; padding-left: 2.5rem; margin-left: 0.5rem; }
#experience-container::before {
    content: ''; position: absolute; left:0; top:0; bottom:0;
    width: 2px; background: rgba(255,255,255,0.05);
}
.timeline-progress {
    position: absolute; left:0; top:0; width:2px; height:0%;
    background: linear-gradient(to bottom, transparent, var(--brand), var(--brand));
    box-shadow: 0 0 12px var(--brand); transition: height 0.12s ease-out; z-index:1;
}
.timeline-dot::before {
    content:''; position:absolute; left:-33px; top:2rem;
    width:12px; height:12px; border-radius:50%;
    background:var(--brand); border:3px solid #0f172a;
    box-shadow:0 0 12px var(--brand); z-index:10;
}
@media(max-width:768px){
    #experience-container{padding-left:2rem;margin-left:.25rem;}
    .timeline-dot::before{left:-22px;top:1.5rem;width:10px;height:10px;}
}

/* ─── HERO ───────────────────────────────────────────────────────────────── */
.hero-glow { text-shadow: 0 0 60px rgba(34,211,238,0.25), 0 0 120px rgba(34,211,238,0.08); }

/* ─── NAV LINK UNDERLINE ─────────────────────────────────────────────────── */
.nav-link { position:relative; }
.nav-link::after {
    content:''; position:absolute; bottom:-4px; left:0;
    width:0; height:1.5px;
    background:var(--brand);
    box-shadow: 0 0 6px var(--brand);
    transition:width 0.3s ease;
}
.nav-link:hover::after, .nav-link.active::after { width:100%; }
.nav-link:hover { color: var(--brand); }
.nav-link.active { color: var(--brand); }

/* ─── SKILL PILL ─────────────────────────────────────────────────────────── */
.skill-pill { transition: all 0.22s ease; }
.skill-pill:hover { background:rgba(34,211,238,0.1); border-color:rgba(34,211,238,0.4); transform:translateX(4px); }

/* ─── ONLINE DOT ─────────────────────────────────────────────────────────── */
@keyframes pulse-ring { 0%{transform:scale(1);opacity:1;} 100%{transform:scale(2.5);opacity:0;} }
.online-dot { position:relative; display:inline-block; width:8px; height:8px; }
.online-dot::before { content:''; position:absolute; inset:0; border-radius:50%; background:#4ade80; animation:pulse-ring 1.8s ease-out infinite; }
.online-dot::after  { content:''; position:absolute; inset:0; border-radius:50%; background:#22c55e; }

/* ─── CERT CARD SHINE ────────────────────────────────────────────────────── */
.cert-card { overflow:hidden; }
.cert-card::after {
    content:''; position:absolute; top:-60%; left:-60%;
    width:40%; height:200%;
    background:linear-gradient(to right, transparent, rgba(255,255,255,0.05), transparent);
    transform:rotate(25deg) translateX(-100%); transition:transform 0.6s ease; pointer-events:none;
}
.cert-card:hover::after { transform:rotate(25deg) translateX(500%); }

/* ─── FORM INPUT ─────────────────────────────────────────────────────────── */
.form-input {
    width:100%; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
    border-radius:1rem; padding:1.25rem 1.5rem; color:white; outline:none;
    font-family:'Inter',sans-serif; transition:border-color 0.25s, background 0.25s, box-shadow 0.25s;
    resize: none;
}
.form-input::placeholder{color:rgba(148,163,184,0.45);}
.form-input:focus{border-color:rgba(34,211,238,0.5);background:rgba(34,211,238,0.04);box-shadow:0 0 0 3px rgba(34,211,238,0.08);}

/* ─── MOBILE MENU ────────────────────────────────────────────────────────── */
.mobile-link{color:white;letter-spacing:0.2em;transition:color 0.2s;}
.mobile-link:hover{color:var(--brand);}

/* ─── STATUS FLOAT ───────────────────────────────────────────────────────── */
.status-widget{animation:float 6s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}

/* ─── BOOT SCREEN ────────────────────────────────────────────────────────── */
#boot-screen{
    position:fixed;inset:0;background:var(--dark-950);z-index:9999;
    display:flex;flex-direction:column;justify-content:flex-end;padding:2.5rem;
    font-family:'Fira Code',monospace;color:var(--brand);transition:opacity 0.6s ease;
}
.boot-bar{
    margin-top:1.5rem;height:2px;width:0%;
    background:var(--brand);box-shadow:var(--brand-glow);transition:width 0.1s linear;
}

/* ─── CURSOR BLINK ───────────────────────────────────────────────────────── */
.cursor::after{content:'|';animation:blink 1s step-start infinite;}
@keyframes blink{50%{opacity:0;}}

/* ─── IFRAME ─────────────────────────────────────────────────────────────── */
iframe{background:white;}

/* ─── PROJECT TABS ───────────────────────────────────────────────────────── */
.project-tab { transition: all 0.2s ease; }
.project-tab.active-tab {
    background: rgba(34,211,238,0.12);
    color: #22d3ee;
    border: 1px solid rgba(34,211,238,0.25);
}

/* ─── MOBILE BOTTOM NAV ──────────────────────────────────────────────────────*/
.mob-nav-item {
    position: relative;
    transition: color 0.2s ease;
}
.mob-nav-item.active {
    color: var(--brand);
}
.mob-nav-item.active svg {
    filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.6));
}
.mob-nav-item::before {
    content: '';
    position: absolute;
    top: 0; left: 20%; right: 20%;
    height: 2px;
    background: var(--brand);
    box-shadow: 0 0 6px var(--brand);
    border-radius: 0 0 2px 2px;
    transform: scaleX(0);
    transition: transform 0.25s ease;
}
.mob-nav-item.active::before {
    transform: scaleX(1);
}

/* Push page content up from bottom nav on mobile */
@media (max-width: 1023px) {
    section:last-of-type {
        padding-bottom: 5rem;
    }
}

/* ─── LINKEDIN FLOAT — clear bottom nav on mobile ───────────────────────────*/
@media (max-width: 1023px) {
    #linkedin-float {
        bottom: calc(4rem + env(safe-area-inset-bottom) + 0.75rem);
    }
}

/* ─── PRINT STYLES ───────────────────────────────────────────────────────────*/
@media print {
    /* Hide interactive / decorative elements */
    #cursor-dot, #cursor-ring, #scroll-progress, #boot-screen,
    #pdf-modal, #linkedin-float, #mobile-bottom-nav,
    nav, canvas, .scan-btn::after, .spotlight-card::before,
    .animate-bounce, .animate-pulse { display: none !important; }

    body {
        background: white !important;
        color: #1e293b !important;
        font-size: 11pt;
        cursor: auto !important;
    }

    /* Remove glass/blur effects */
    .glass-panel {
        background: #f8fafc !important;
        backdrop-filter: none !important;
        border: 1px solid #e2e8f0 !important;
    }

    /* Reset text colors for print */
    .text-white, h1, h2, h3, h4 { color: #0f172a !important; }
    .text-slate-400, .text-slate-500 { color: #475569 !important; }
    .text-brand-400 { color: #0891b2 !important; }
    .hero-glow { text-shadow: none !important; }

    /* Page breaks */
    section { page-break-inside: avoid; padding: 1.5rem 0 !important; }
    #home { min-height: auto !important; padding-top: 1rem !important; }

    /* Show URLs for links */
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #64748b; }
    a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #64748b; }

    /* Reveal elements — force visible */
    .reveal { opacity: 1 !important; transform: none !important; }

    /* Remove backgrounds */
    .bg-dark-950, .bg-dark-900, body { background: white !important; }
}

/* ─── PRINT STYLES ───────────────────────────────────────────────────────────*/
@media print {
    #cursor-dot, #cursor-ring, #scroll-progress, #boot-screen,
    #pdf-modal, #linkedin-float, #mobile-bottom-nav,
    nav, canvas, .scan-btn::after, .spotlight-card::before,
    .animate-bounce, .animate-pulse { display: none !important; }

    body {
        background: white !important;
        color: #1e293b !important;
        font-size: 11pt;
        cursor: auto !important;
    }
    .glass-panel {
        background: #f8fafc !important;
        backdrop-filter: none !important;
        border: 1px solid #e2e8f0 !important;
    }
    .text-white, h1, h2, h3, h4 { color: #0f172a !important; }
    .text-slate-400, .text-slate-500 { color: #475569 !important; }
    .text-brand-400 { color: #0891b2 !important; }
    .hero-glow { text-shadow: none !important; }
    section { page-break-inside: avoid; padding: 1.5rem 0 !important; }
    #home { min-height: auto !important; padding-top: 1rem !important; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #64748b; }
    a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #64748b; }
    .reveal { opacity: 1 !important; transform: none !important; }
    .bg-dark-950, .bg-dark-900, body { background: white !important; }
    @media (max-width: 1023px) { section:last-of-type { padding-bottom: 5rem; } }
}

/* ─── LIGHT MODE ─────────────────────────────────────────────────────────────*/
.light-mode {
    --brand: #0891b2;
    --brand-dim: rgba(8, 145, 178, 0.12);
    --brand-glow: 0 0 20px rgba(8, 145, 178, 0.3);
    --dark: #f1f5f9;
    --dark-950: #ffffff;
    --surface: rgba(226, 232, 240, 0.8);
}

.light-mode body {
    background: #f8fafc;
    color: #1e293b;
}

.light-mode .glass-panel {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 0, 0, 0.08);
}

.light-mode .text-white    { color: #0f172a !important; }
.light-mode .text-slate-300{ color: #334155 !important; }
.light-mode .text-slate-400{ color: #475569 !important; }
.light-mode .text-slate-500{ color: #64748b !important; }
.light-mode .text-slate-600{ color: #94a3b8 !important; }
.light-mode .text-slate-700{ color: #cbd5e1 !important; }

.light-mode .bg-dark-950,
.light-mode .bg-dark-900,
.light-mode section.bg-dark-950,
.light-mode section.bg-dark-950\/50,
.light-mode section.bg-dark-950\/40 { background: #f1f5f9 !important; }

.light-mode nav { background: rgba(248,250,252,0.92) !important; }
.light-mode #mobile-bottom-nav { background: rgba(248,250,252,0.95) !important; border-top-color: rgba(0,0,0,0.08); }

.light-mode .hero-glow { text-shadow: 0 0 40px rgba(8,145,178,0.2); }
.light-mode canvas { opacity: 0.15 !important; }
.light-mode body::after { opacity: 0; }

.light-mode .timeline-dot::before { border-color: #f1f5f9; }
.light-mode #experience-container::before { background: rgba(0,0,0,0.08); }

/* ─── MOBILE NAV LINKEDIN FIX ────────────────────────────────────────────────*/
/* Ensure floating LinkedIn never shows on mobile regardless of screen size */
#linkedin-float { display: none; }
@media (min-width: 1024px) {
    #linkedin-float { display: flex; }
}