/* HUD Indicators */
.hud-indicators {
    position: absolute;
    top: 50%;
    left: 2rem;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: var(--primary);
    opacity: 0.5;
    pointer-events: none;
    writing-mode: vertical-rl;
}

.hud-item {
    padding: 1rem 0;
    border-right: 1px solid var(--glass-border);
}

/* Glitch Effect */
.glitch-text {
    position: relative;
    display: inline-block;
}

.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-dark);
}

.glitch-text:hover::before {
    left: 2px;
    text-shadow: -2px 0 #ff00c1;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch-text:hover::after {
    left: -2px;
    text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
    animation: glitch-anim2 1s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% {
        clip: rect(31px, 9999px, 94px, 0);
    }

    100% {
        clip: rect(67px, 9999px, 12px, 0);
    }
}

@keyframes glitch-anim2 {
    0% {
        clip: rect(10px, 9999px, 85px, 0);
    }

    100% {
        clip: rect(40px, 9999px, 20px, 0);
    }
}

/* Type Effect Cursor */
.type-target::after {
    content: "|";
    animation: blink 0.7s infinite;
    color: var(--primary);
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

:root {
    --primary: #6366f1;
    --primary-hover: #4f46e5;
    --bg-dark: #0f172a;
    --bg-card: rgba(30, 41, 59, 0.7);
    --text-white: #f8fafc;
    --text-dim: #94a3b8;
    --accent: #10b981;
    --glass-border: rgba(255, 255, 255, 0.1);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-white);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    /* Blueprint Grid with intersection points */
    background-image:
        radial-gradient(rgba(99, 102, 241, 0.15) 1px, transparent 1px),
        linear-gradient(rgba(99, 102, 241, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.05) 1px, transparent 1px);
    background-size: 50px 50px, 50px 50px, 50px 50px;
}

/* Scanline HUD Overlay */
.scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%,
            rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg,
            rgba(255, 0, 0, 0.02),
            rgba(0, 255, 0, 0.01),
            rgba(0, 0, 255, 0.02));
    background-size: 100% 4px, 3px 100%;
    z-index: 1000;
    pointer-events: none;
    opacity: 0.3;
}

/* Robot Background Asset */
.robot-bg {
    position: fixed;
    bottom: -10%;
    right: -5%;
    width: 60%;
    height: 80%;
    background: url('assets/robot.png') no-repeat center center;
    background-size: contain;
    z-index: -3;
    opacity: 0.15;
    pointer-events: none;
    filter: drop-shadow(0 0 30px rgba(99, 102, 241, 0.4));
    animation: robot-float 10s ease-in-out infinite, robot-pulse 5s ease-in-out infinite alternate;
}

@keyframes robot-float {

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

    50% {
        transform: translateY(-30px) rotate(1deg);
    }
}

@keyframes robot-pulse {
    from {
        filter: drop-shadow(0 0 30px rgba(99, 102, 241, 0.2)) brightness(0.8);
    }

    to {
        filter: drop-shadow(0 0 50px rgba(99, 102, 241, 0.5)) brightness(1.2);
    }
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.02) 0%, transparent 80%),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300"><path d="M0 50 L50 50 L50 100 L100 100 M200 0 L200 50 L250 50 L250 100 M0 250 L50 250 L50 200 L100 200 M300 250 L250 250 L250 200 L200 200 M150 120 L150 180 M120 150 L180 150" fill="none" stroke="rgba(99, 102, 241, 0.1)" stroke-width="1.5"/></svg>');
    background-size: cover, 300px 300px;
    z-index: -2;
    pointer-events: none;
    opacity: 0.5;
}

/* Scanning Pulse */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(99, 102, 241, 0.08) 50%, transparent);
    background-size: 100% 300px;
    animation: scan-bot 6s linear infinite;
    z-index: -1;
    pointer-events: none;
}

@keyframes scan-bot {
    0% {
        transform: translateY(-300px);
    }

    100% {
        transform: translateY(100vh);
    }
}

/* Glassmorphism Utility */
.glass {
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 1rem;
}

/* Typography */
h1,
h2,
h3 {
    font-weight: 700;
    letter-spacing: -0.025em;
}

.gradient-text {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Layout */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

section {
    padding: 80px 0;
}

/* Navigation */
nav {
    position: fixed;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: fit-content;
    z-index: 1000;
    padding: 0.5rem;
    background: rgba(30, 41, 59, 0.4);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    transition: var(--transition);
}

.nav-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    padding: 0 1rem;
}

.nav-links {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
}

.nav-links a {
    color: var(--text-dim);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    transition: var(--transition);
}

.nav-links a:hover {
    color: var(--text-white);
    background: rgba(255, 255, 255, 0.05);
}

/* Typography Overhaul */
h1 {
    font-size: clamp(3rem, 8vw, 5rem);
    line-height: 1.1;
    margin-bottom: 2rem;
}

/* Hero Section */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -10%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
    filter: blur(40px);
    z-index: -1;
}

.hero-content {
    max-width: 800px;
}

.hero h1 {
    font-size: 4.5rem;
    margin-bottom: 1.5rem;
}

.hero p {
    font-size: 1.25rem;
    color: var(--text-dim);
    margin-bottom: 2rem;
    max-width: 600px;
}

.btn {
    display: inline-block;
    padding: 0.8rem 2rem;
    border-radius: 0.5rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
}

.btn-primary {
    background: var(--primary);
    color: white;
    position: relative;
    overflow: hidden;
    z-index: 10;
    border: none;
}

.btn-primary::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(transparent,
            rgba(255, 255, 255, 0.3),
            transparent 30%);
    animation: rotate-border 4s linear infinite;
    z-index: -1;
}

@keyframes rotate-border {
    0% {
        transform: rotate(0deg);
    }

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

.btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.4);
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
}

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

/* Bento Grid */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    gap: 1.5rem;
    margin-top: 3rem;
}

.bento-item {
    padding: 2rem;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.bento-1 {
    grid-column: span 2;
    grid-row: span 2;
}

.bento-2 {
    grid-column: span 2;
}

.bento-3 {
    grid-column: span 1;
}

.bento-4 {
    grid-column: span 1;
}

.section-title {
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 1rem;
    text-align: left;
}

.subtitle {
    font-size: 1.1rem;
    color: var(--text-dim);
    margin-bottom: 3rem;
    max-width: 600px;
}

/* About / Resume Section */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.resume-item {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    border-left: 2px solid var(--primary);
}

.resume-item h3 {
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.resume-date {
    font-size: 0.9rem;
    color: var(--text-dim);
    margin-bottom: 1rem;
}

/* Projects Section */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.project-card {
    position: relative;
    overflow: hidden;
    height: 350px;
    cursor: pointer;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.project-card:hover {
    transform: translateY(-10px) rotateX(5deg) rotateY(1deg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(99, 102, 241, 0.2);
    border-color: var(--primary);
}

.project-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(99, 102, 241, 0.05));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.project-card:hover::before {
    opacity: 1;
}

.project-img {
    width: 100%;
    height: 100%;
    background: #1e293b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    position: relative;
}

/* Robot/Tech Icon simulation */
.project-img::after {
    content: "◈";
    font-size: 3rem;
    color: var(--primary);
    opacity: 0.3;
    animation: pulse 2s infinite alternate;
}

@keyframes pulse {
    from {
        transform: scale(1);
        opacity: 0.3;
    }

    to {
        transform: scale(1.1);
        opacity: 0.6;
    }
}

.project-card:hover .project-img {
    transform: scale(1.1);
}

.project-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2rem;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.9), transparent);
}

/* Contact Section */
.contact-container {
    max-width: 600px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-control {
    width: 100%;
    padding: 1rem;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid var(--glass-border);
    border-radius: 0.5rem;
    color: white;
    font-size: 1rem;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
}

footer {
    padding: 2rem 0;
    text-align: center;
    border-top: 1px solid var(--glass-border);
    color: var(--text-dim);
}

/* Responsive */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 3rem;
    }

    .nav-links {
        display: none;
    }

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

/* Additional Bento Responsiveness */
@media (max-width: 992px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .bento-grid {
        grid-template-columns: 1fr;
    }

    .bento-1,
    .bento-2,
    .bento-3,
    .bento-4 {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }
}
/* Matrix Background */
#matrix-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -4;
    opacity: 0.1;
    pointer-events: none;
}