:root {
    /* Hacker Black/White/Neon Green palette */
    --bg-color: #050505;
    --bg-secondary: #0a0a0a;
    --text-primary: #f0f0f0;
    --text-secondary: #888888;
    --accent-cyan: #ffffff;
    /* White */
    /* Neon green */
    --accent-purple: #ffffff;
    /* Pure white */
    --accent-pink: #ffffff;
    /* White */

    /* Glassmorphism - clean dark */
    --glass-bg: rgba(10, 10, 10, 0.65);
    --glass-border: rgba(255, 255, 255, 0.08);
    /* Crisp white borders */
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8);

    --font-main: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: var(--font-main);
    overflow-x: hidden;
    line-height: 1.7;
}

body.intro-active {
    overflow: hidden;
}

/* =====================
   INTRO SCREEN
======================== */
#intro-screen {
    position: fixed;
    inset: 0;
    background-color: #000000;
    /* Pure black for intro */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease-in-out, visibility 0.8s;
    padding: 2rem;
}

#intro-text {
    color: #00ff41;
    font-size: clamp(1rem, 5vw, 2.5rem);
    font-family: var(--font-mono);
    text-align: center;
    max-width: 100%;
    line-height: 1.4;
    white-space: nowrap;
    /* Keep it on one line for the "hacker" feel */
}

@media (max-width: 480px) {
    #intro-text {
        font-size: 0.9rem;
        /* Force a small enough size for very small screens */
    }
}

#particle-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: slowCinematicZoom 7s ease-out forwards;
}

@keyframes slowCinematicZoom {
    0% {
        transform: scale(0.95);
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    100% {
        transform: scale(1.05);
    }
}

/* =====================
   BACKGROUND
======================== */

/* Subtle tech grid - White/Grey lines */
.grid-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    z-index: -2;
}

/* Ambient gradient glow in corners */
.grid-background::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
    pointer-events: none;
}

.grid-background::after {
    content: '';
    position: absolute;
    bottom: -10%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

/* Mouse glow tracker */
#cursor-glow {
    position: fixed;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
    transition: width 0.4s ease, height 0.4s ease;
}

/* =====================
   TYPOGRAPHY
======================== */

h1,
h2,
h3 {
    font-weight: 800;
    letter-spacing: -0.02em;
}

.mono-text {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--accent-cyan);
    letter-spacing: 0.05em;
}

/* =====================
   GLASS PANELS
======================== */

.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.02);
    border-radius: 16px;
    padding: 2.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.glass-panel:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(255, 255, 255, 0.05);
}

/* =====================
   NAVIGATION
======================== */

.glass-nav {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1100px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 2rem;
    background: rgba(5, 5, 5, 0.8);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 100px;
    z-index: 100;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
}

.side-logo-container {
    position: fixed;
    left: 40px;
    top: 35px;
    z-index: 1000;
}

.side-logo {
    display: block;
    font-family: 'Press Start 2P', system-ui;
    font-size: 0.8rem;
    color: var(--text-primary);
    text-decoration: none;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.side-logo:hover {
    color: #00ff41;
    text-shadow: 0 0 15px rgba(0, 255, 65, 0.5);
}

@media (max-width: 768px) {
    .side-logo-container {
        left: 50%;
        transform: translateX(-50%);
        top: 36px;
    }

    .side-logo {
        font-size: 0.65rem;
    }
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2.5rem;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.3s;
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--accent-cyan);
    transition: width 0.3s ease;
}

.nav-links a:hover {
    color: var(--text-primary);
}

.nav-links a:hover::after {
    width: 100%;
}

/* =====================
   SECTIONS
======================== */

.section-padding {
    padding: 9rem 2rem 4rem 2rem;
    max-width: 1100px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* =====================
   HERO SECTION
======================== */

.hero {
    position: relative;
}

.hero-content {
    max-width: 780px;
    padding: 3.5rem !important;
}

.hero-title {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    margin: 1.2rem 0;
    line-height: 1.1;
    color: var(--text-primary);
}

.hero-title .typewriter {
    background: linear-gradient(90deg, var(--text-primary), var(--accent-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cursor {
    color: var(--accent-cyan);
    animation: blink 1s infinite;
    -webkit-text-fill-color: var(--accent-cyan);
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.hero-subtitle {
    font-size: 1.15rem;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
    max-width: 560px;
    line-height: 1.8;
}

/* Buttons */
.cta-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

/* ---- Shared animated button base ---- */
.glass-btn {
    --border-radius: 24px;
    --padding: 4px;
    --transition: 0.4s;
    --button-color: #101010;
    --highlight-color-hue: 210deg;

    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55em 1em 0.55em 1em;
    font-family: var(--font-main);
    font-size: clamp(0.8rem, 2vw, 0.95rem);
    font-weight: 400;
    text-decoration: none;
    color: #fff5;
    background-color: var(--button-color);
    box-shadow:
        inset 0px 1px 1px rgba(255, 255, 255, 0.2),
        inset 0px 2px 2px rgba(255, 255, 255, 0.15),
        inset 0px 4px 4px rgba(255, 255, 255, 0.1),
        inset 0px 8px 8px rgba(255, 255, 255, 0.05),
        inset 0px 16px 16px rgba(255, 255, 255, 0.05),
        0px -1px 1px rgba(0, 0, 0, 0.02),
        0px -2px 2px rgba(0, 0, 0, 0.03),
        0px -4px 4px rgba(0, 0, 0, 0.05),
        0px -8px 8px rgba(0, 0, 0, 0.06),
        0px -16px 16px rgba(0, 0, 0, 0.08);
    border: solid 1px #fff2;
    border-radius: var(--border-radius);
    cursor: pointer;
    position: relative;
    transition: box-shadow var(--transition), border var(--transition),
        background-color var(--transition), transform var(--transition);
}

.glass-btn::before {
    content: '';
    position: absolute;
    top: calc(0px - var(--padding));
    left: calc(0px - var(--padding));
    width: calc(100% + var(--padding) * 2);
    height: calc(100% + var(--padding) * 2);
    border-radius: calc(var(--border-radius) + var(--padding));
    pointer-events: none;
    background-image: linear-gradient(0deg, #0004, #000a);
    z-index: -1;
    transition: box-shadow var(--transition);
    box-shadow:
        0 -8px 8px -6px #0000 inset,
        0 -16px 16px -8px #00000000 inset,
        1px 1px 1px #fff2,
        2px 2px 2px #fff1,
        -1px -1px 1px #0002,
        -2px -2px 2px #0001;
}

.glass-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    pointer-events: none;
    background-image: linear-gradient(
        0deg,
        #fff,
        hsl(var(--highlight-color-hue), 100%, 70%),
        hsla(var(--highlight-color-hue), 100%, 70%, 50%),
        8%,
        transparent
    );
    opacity: 0;
    transition: opacity var(--transition), filter var(--transition);
}

/* ---- Color variants ---- */
.primary-btn   { --highlight-color-hue: 140deg; }
.secondary-btn { --highlight-color-hue: 210deg; }

/* ---- Shared sub-elements ---- */
.btn-svg {
    flex-shrink: 0;
    height: 1.4em;
    width: 1.4em;
    margin-right: 0.5em;
    fill: none;
    stroke: #e8e8e8;
    stroke-width: 1.8;
    animation: flicker 2s linear infinite;
    animation-delay: 0.5s;
    filter: drop-shadow(0 0 2px #fff9);
    transition: stroke var(--transition), filter var(--transition), opacity var(--transition);
}

@keyframes flicker {
    50% { opacity: 0.3; }
}

.txt-wrapper {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.btn-letter {
    position: relative;
    display: inline-block;
    color: #fff5;
    animation: letter-anim 2s ease-in-out infinite;
    transition: color var(--transition), text-shadow var(--transition);
}

@keyframes letter-anim {
    50% {
        text-shadow: 0 0 3px #fff8;
        color: #fff;
    }
}

/* Animation delays (covers both buttons — 11 letters each) */
.btn-letter:nth-child(1)  { animation-delay: 0s; }
.btn-letter:nth-child(2)  { animation-delay: 0.08s; }
.btn-letter:nth-child(3)  { animation-delay: 0.16s; }
.btn-letter:nth-child(4)  { animation-delay: 0.24s; }
.btn-letter:nth-child(5)  { animation-delay: 0.32s; }
.btn-letter:nth-child(6)  { animation-delay: 0.40s; }
.btn-letter:nth-child(7)  { animation-delay: 0.48s; }
.btn-letter:nth-child(8)  { animation-delay: 0.56s; }
.btn-letter:nth-child(9)  { animation-delay: 0.64s; }
.btn-letter:nth-child(10) { animation-delay: 0.72s; }
.btn-letter:nth-child(11) { animation-delay: 0.80s; }

/* ---- Hover ---- */
.glass-btn:hover {
    border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%);
    transform: translateY(-2px);
}

.glass-btn:hover::before {
    box-shadow:
        0 -8px 8px -6px #fffa inset,
        0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset,
        1px 1px 1px #fff2,
        2px 2px 2px #fff1,
        -1px -1px 1px #0002,
        -2px -2px 2px #0001;
}

.glass-btn:hover::after {
    opacity: 1;
    mask-image: linear-gradient(0deg, #fff, transparent);
}

.glass-btn:hover .btn-svg {
    stroke: #fff;
    filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009);
    animation: none;
}

/* ---- Active ---- */
.glass-btn:active {
    border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%);
    background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5);
    transform: translateY(0);
}

.glass-btn:active::before {
    box-shadow:
        0 -8px 12px -6px #fffa inset,
        0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset,
        1px 1px 1px #fff4,
        2px 2px 2px #fff2,
        -1px -1px 1px #0002,
        -2px -2px 2px #0001;
}

.glass-btn:active::after {
    opacity: 1;
    mask-image: linear-gradient(0deg, #fff, transparent);
    filter: brightness(200%);
}

.glass-btn:active .btn-letter {
    text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%);
    animation: none;
}

/* ---- Responsive ---- */
@media (max-width: 480px) {
    .glass-btn {
        font-size: 0.8rem;
        padding: 0.45em 0.8em;
    }

    .btn-svg {
        height: 1.2em;
        width: 1.2em;
    }
}

/* =====================
   SECTION TITLES
======================== */

.section-title {
    font-size: 2.5rem;
    margin-bottom: 3rem;
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.section-title span {
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--text-secondary);
}

/* =====================
   ABOUT SECTION
======================== */

.about-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 2rem;
    align-items: start;
}

.about-text p {
    color: var(--text-secondary);
    font-size: 1.05rem;
}

.tech-stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 2rem;
    list-style: none;
}

.tech-stack li {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tech-stack li::before {
    content: "▹";
    color: var(--accent-cyan);
}

/* Animated visual element */
.about-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
}

.tech-circle {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    position: relative;
    animation: rotate 8s linear infinite;
}

.tech-circle::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    background: linear-gradient(var(--bg-color), var(--bg-color)) padding-box,
        linear-gradient(90deg, var(--text-secondary), var(--accent-cyan)) border-box;
}

.tech-circle::after {
    content: '<dev/>';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--text-primary);
    animation: rotate-reverse 8s linear infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotate-reverse {
    100% {
        transform: rotate(-360deg);
    }
}

/* =====================
   PROJECTS SECTION
======================== */

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
}

.project-card {
    position: relative;
}

.project-tech {
    color: var(--text-secondary);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.project-card h3 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.project-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.project-link {
    display: inline-block;
    margin-top: 1.5rem;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s;
    font-family: var(--font-mono);
}

.project-link:hover {
    transform: translateX(6px);
    color: var(--accent-cyan);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* =====================
   SCROLL REVEAL
======================== */

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s cubic-bezier(0.5, 0, 0, 1),
        transform 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.delay-1 {
    transition-delay: 0.15s;
}

.delay-2 {
    transition-delay: 0.30s;
}

/* =====================
   CONTACT PAGE
======================== */
.contact-page {
    padding-top: 60px;
    min-height: 100vh;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-top: 2rem;
}

.contact-info,
.contact-form-container {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.social-links {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1rem;
}

.social-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    text-decoration: none;
    color: var(--text-primary);
    width: fit-content;
}

.email-box {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    font-size: 0.9rem;
}

.email-box span {
    color: var(--text-secondary);
    margin-right: 0.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.glass-input {
    background: rgba(10, 10, 10, 0.4);
    border: 1px solid var(--glass-border);
    padding: 1rem;
    border-radius: 8px;
    color: var(--text-primary);
    font-family: var(--font-main);
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.glass-input:focus {
    border-color: var(--text-primary);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.submit-btn {
    margin-top: 1rem;
    cursor: pointer;
    font-family: var(--font-mono);
    width: 100%;
}

/* --- Mobile Menu Toggle --- */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 25px;
    height: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 200;
    /* Must be above the mobile nav overlay */
    position: relative;
}

.menu-toggle span {
    width: 100%;
    height: 2px;
    background-color: var(--text-primary);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* =====================
   RESPONSIVENESS
======================== */

/* Tablet & Mobile Optimizations */
@media (max-width: 992px) {
    .section-padding {
        padding: 7rem 1.5rem 3rem 1.5rem;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .hero-content {
        padding: 2.5rem !important;
    }
}

@media (max-width: 768px) {
    .glass-nav {
        padding: 1rem 2rem;
        width: 90%;
        border-radius: 20px;
        /* Less rounded for better edge fit on mobile */
        justify-content: flex-end;
        /* Push hamburger menu to the right to avoid overlapping the centered logo */
    }

    .menu-toggle {
        display: flex;
    }

    .nav-links {
        display: flex;
        /* Required for flexbox to work on the overlay */
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: rgba(5, 5, 5, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2.5rem;
        transition: right 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
        z-index: 150;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .nav-links.active {
        right: 0;
    }

    .nav-links li {
        margin: 0;
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.4s ease;
    }

    .nav-links.active li {
        opacity: 1;
        transform: translateY(0);
    }

    /* Staggered animation for links */
    .nav-links.active li:nth-child(1) {
        transition-delay: 0.1s;
    }

    .nav-links.active li:nth-child(2) {
        transition-delay: 0.2s;
    }

    .nav-links.active li:nth-child(3) {
        transition-delay: 0.3s;
    }

    .nav-links.active li:nth-child(4) {
        transition-delay: 0.4s;
    }

    .nav-links a {
        font-size: 1.8rem;
        font-weight: 700;
        color: var(--text-primary);
        font-family: var(--font-mono);
    }

    /* Hamburger Animation */
    .menu-toggle.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
        transform: translateX(-10px);
    }

    .menu-toggle.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    #logo-canvas {
        width: 120px;
        height: 35px;
    }

    .hero-title {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .section-title {
        font-size: 2rem;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }

    .footer-links {
        align-items: center;
    }
}

/* Small Mobile Optimizations */
@media (max-width: 480px) {
    .hero-content {
        padding: 1.5rem !important;
        text-align: center;
    }

    .cta-buttons {
        justify-content: center;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .glass-panel {
        padding: 1.5rem;
    }
}

/* =====================
   FOOTER
======================== */
.site-footer {
    border-top: 1px solid var(--glass-border);
    background: rgba(5, 5, 5, 0.8);
    padding: 2rem;
    margin-top: 4rem;
    position: relative;
    z-index: 10;
}

.footer-content {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.footer-left h4 {
    margin-bottom: 0.5rem;
}

.footer-left p {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 0;
}

.footer-center p {
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-align: center;
}

.footer-heading {
    color: var(--text-primary);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-links a {
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #00ff41;
    /* Neon green hover for footer links */
}

.footer-right p {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* =====================
   FEATURED CARD SNAKE GLOW
======================== */
@property --border-angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0turn;
}

.featured-card {
    position: relative;
    border: none;
    /* override static glass border */
    --border-angle: 0turn;
}

/* The solid snake border with a glow */
.featured-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;
    border-radius: 16px;
    padding: 2px;
    /* thickness of the snake */
    background: conic-gradient(from var(--border-angle), transparent 60%, #00ff41 100%);

    /* Cross-browser masking so it ONLY shows on the 2px border */
    -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;

    /* Drop shadow creates the glow without needing a second unmasked element */
    filter: drop-shadow(0 0 8px #00ff41);

    pointer-events: none;
    animation: rotateSnake 6s linear infinite;
}

@keyframes rotateSnake {
    to {
        --border-angle: 1turn;
    }
}

/* =====================
   LENIS SMOOTH SCROLLING
======================== */
html.lenis, html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    scroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

/* =====================
   SCROLL PROGRESS BAR
======================== */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: linear-gradient(90deg, #00ff41, #ffffff);
    z-index: 9999;
    transition: width 0.1s linear;
    box-shadow: 0 0 8px rgba(0, 255, 65, 0.6);
}

/* =====================
   ACTIVE NAV LINK
======================== */
.nav-links a.active {
    color: var(--text-primary);
}

.nav-links a.active::after {
    width: 100%;
}

/* =====================
   PROJECT SKELETON LOADER
======================== */
@keyframes shimmer {
    0% { background-position: -800px 0; }
    100% { background-position: 800px 0; }
}

.skeleton-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 280px;
}

.skeleton-line {
    border-radius: 6px;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.04) 25%,
        rgba(255,255,255,0.10) 50%,
        rgba(255,255,255,0.04) 75%
    );
    background-size: 800px 100%;
    animation: shimmer 1.6s infinite linear;
}

.skeleton-line.short  { height: 12px; width: 40%; }
.skeleton-line.medium { height: 22px; width: 70%; }
.skeleton-line.long   { height: 12px; width: 95%; }
.skeleton-line.image  { height: 160px; width: 100%; border-radius: 8px; }

/* =====================
   COLD START BANNER
======================== */
#cold-start-banner {
    display: none;
    text-align: center;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    background: rgba(0, 255, 65, 0.05);
    border: 1px solid rgba(0, 255, 65, 0.2);
    border-radius: 8px;
    color: #00ff41;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    animation: pulse-border 2s ease-in-out infinite;
}

@keyframes pulse-border {
    0%, 100% { border-color: rgba(0, 255, 65, 0.2); }
    50%       { border-color: rgba(0, 255, 65, 0.5); }
}

/* =====================
   FEATURED BADGE
======================== */
.featured-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: #00ff41;
    background: rgba(0, 255, 65, 0.08);
    border: 1px solid rgba(0, 255, 65, 0.3);
    border-radius: 100px;
    padding: 0.2rem 0.65rem;
    margin-bottom: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}