/* CSS Reset & Variables */
:root {
    --bg-dark: #0a192f;
    --bg-light: #112240;
    --text-primary: #ccd6f6;
    --text-secondary: #8892b0;
    --accent: #64ffda;
    /* Cyberspunk/Hacker Green */
    --accent-dim: rgba(100, 255, 218, 0.1);

    --font-sans: 'Work Sans', sans-serif;
    --font-mono: 'Space Mono', monospace;

    --transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
}

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

#bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    font-family: var(--font-sans);
    line-height: 1.6;
    overflow-x: hidden;
    zoom: 1.08;
    /* Slightly smaller than 1.15 */
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    color: var(--text-primary);
}

p {
    color: var(--text-secondary);
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* Utility Classes */
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-title {
    display: flex;
    align-items: center;
    font-family: var(--font-mono);
    color: var(--text-primary);
    font-size: 26px;
    margin-bottom: 40px;
}

.section-title::after {
    content: "";
    display: block;
    width: 300px;
    height: 1px;
    background-color: #233554;
    margin-left: 20px;
}

.highlight {
    color: var(--accent);
}

.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid var(--accent);
}

.btn.primary {
    background-color: transparent;
    color: var(--accent);
}

.btn.primary:hover {
    background-color: var(--accent-dim);
}

.btn.secondary {
    border-color: var(--text-secondary);
    color: var(--text-secondary);
    margin-left: 10px;
}

.btn.secondary:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Header & Nav */
header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgba(10, 25, 47, 0.85);
    backdrop-filter: blur(10px);
    z-index: 100;
    padding: 20px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 700;
    color: var(--accent);
    cursor: pointer;
}

.dot {
    color: var(--text-primary);
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 30px;
}

.nav-links a {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-primary);
    text-decoration: none;
}

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

/* Hero Section */
#hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 0 100px;
}

.hero-content {
    max-width: 1300px;
    /* Increased significantly to span wider */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
}

.hero-text {
    flex: 1;
}

.cert-img-container {
    margin-bottom: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    margin-top: -140px;
    /* Slightly more up */
    margin-right: -80px;
    /* Push it further right into padding */
}

.cert-img {
    width: 420px;
    /* Even bigger */
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--accent);
    box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(100, 255, 218, 0.1);
    transition: var(--transition);
    transform: rotate(5deg);
    /* More tilt */
}

.cert-img:hover {
    transform: rotate(0deg) scale(1.02);
    box-shadow: 0 0 30px rgba(100, 255, 218, 0.3);
}

.greeting {
    font-family: var(--font-mono);
    color: var(--accent);
    margin-bottom: 20px;
    font-size: 16px;
}

#hero h1 {
    font-size: 70px;
    line-height: 1.1;
    margin-bottom: 10px;
    position: relative;
    display: inline-block;
}

/* Glitch Effect */
.glitch {
    position: relative;
}

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

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

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

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

    5% {
        clip: rect(12px, 9999px, 59px, 0);
    }

    10% {
        clip: rect(48px, 9999px, 29px, 0);
    }

    15.0% {
        clip: rect(42px, 9999px, 73px, 0);
    }

    20% {
        clip: rect(63px, 9999px, 27px, 0);
    }

    25% {
        clip: rect(34px, 9999px, 55px, 0);
    }

    30.0% {
        clip: rect(86px, 9999px, 73px, 0);
    }

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

    40% {
        clip: rect(26px, 9999px, 60px, 0);
    }

    45% {
        clip: rect(25px, 9999px, 66px, 0);
    }

    50% {
        clip: rect(57px, 9999px, 98px, 0);
    }

    55.0% {
        clip: rect(5px, 9999px, 46px, 0);
    }

    60.0% {
        clip: rect(82px, 9999px, 31px, 0);
    }

    65% {
        clip: rect(54px, 9999px, 27px, 0);
    }

    70% {
        clip: rect(28px, 9999px, 99px, 0);
    }

    75% {
        clip: rect(45px, 9999px, 69px, 0);
    }

    80% {
        clip: rect(23px, 9999px, 85px, 0);
    }

    85.0% {
        clip: rect(54px, 9999px, 84px, 0);
    }

    90% {
        clip: rect(45px, 9999px, 47px, 0);
    }

    95% {
        clip: rect(37px, 9999px, 20px, 0);
    }

    100% {
        clip: rect(4px, 9999px, 91px, 0);
    }
}

@keyframes glitch-anim-2 {
    0% {
        clip: rect(65px, 9999px, 100px, 0);
    }

    5% {
        clip: rect(52px, 9999px, 74px, 0);
    }

    10% {
        clip: rect(79px, 9999px, 85px, 0);
    }

    15.0% {
        clip: rect(75px, 9999px, 5px, 0);
    }

    20% {
        clip: rect(67px, 9999px, 61px, 0);
    }

    25% {
        clip: rect(14px, 9999px, 79px, 0);
    }

    30.0% {
        clip: rect(1px, 9999px, 66px, 0);
    }

    35% {
        clip: rect(86px, 9999px, 30px, 0);
    }

    40% {
        clip: rect(23px, 9999px, 98px, 0);
    }

    45% {
        clip: rect(85px, 9999px, 72px, 0);
    }

    50% {
        clip: rect(71px, 9999px, 75px, 0);
    }

    55.0% {
        clip: rect(2px, 9999px, 48px, 0);
    }

    60.0% {
        clip: rect(30px, 9999px, 16px, 0);
    }

    65% {
        clip: rect(59px, 9999px, 50px, 0);
    }

    70% {
        clip: rect(41px, 9999px, 62px, 0);
    }

    75% {
        clip: rect(2px, 9999px, 82px, 0);
    }

    80% {
        clip: rect(47px, 9999px, 73px, 0);
    }

    85.0% {
        clip: rect(3px, 9999px, 27px, 0);
    }

    90% {
        clip: rect(26px, 9999px, 55px, 0);
    }

    95% {
        clip: rect(42px, 9999px, 97px, 0);
    }

    100% {
        clip: rect(38px, 9999px, 49px, 0);
    }
}

#hero h2 {
    font-size: 60px;
    line-height: 1.1;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.bio {
    max-width: 540px;
    margin-bottom: 50px;
    font-size: 18px;
}

/* About Section */
#about {
    padding: 100px 100px;
}

/* Projects Section */
#projects {
    padding: 100px 50px;
}

/* Contact Section */
#contact {
    padding: 100px 0;
}

.about-text p {
    margin-bottom: 15px;
    font-size: 18px;
}

.tech-stack {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.tech-stack span {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text-primary);
    background-color: var(--bg-light);
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid #233554;
    transition: var(--transition);
}

/* Skills Grid */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

.skill-category h3 {
    font-size: 16px;
    color: var(--accent);
    margin-bottom: 15px;
    font-family: var(--font-mono);
}

.skill-list {
    list-style: none;
    padding: 0;
}

.skill-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.skill-list li::before {
    content: "▹";
    position: absolute;
    left: 0;
    color: var(--accent);
}

/* Projects Grid */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* Animation Utilities */
.animate-item {
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.from-left {
    transform: translateX(-40px);
    /* Reduced distance for smoothness */
}

.from-right {
    transform: translateX(40px);
}

.pop-in {
    transform: scale(0.95) translateY(20px);
    /* Subtler scaling */
}

.fade-up {
    transform: translateY(20px);
}

.animate-item.visible {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* Project Cards */
.project-card {
    background-color: var(--bg-light);
    padding: 30px;
    border-radius: 4px;
    position: relative;
    top: 0;
    display: flex;
    flex-direction: column;
    /* Transition moved to :hover and .animate-item to separate concerns */
}

.project-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 10px 30px -15px rgba(2, 12, 27, 0.7);
    z-index: 2;
    /* Fast transition for hover effect */
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease;
}

/* Conflict resolution: When visible, let the generic transition take over for hover, 
   but we need the reveal transition to finish first. 
   Handled by separating the reveal class logic in JS or CSS structure. 
   Actually, applying the transition on the class .animate-item handles the reveal. 
   The :hover should work after. */


.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.folder-icon {
    color: var(--accent);
    width: 40px;
    height: 40px;
}

.links a {
    color: var(--text-secondary);
    margin-left: 10px;
}

.links a:hover {
    color: var(--accent);
}

.project-card h3 {
    margin-bottom: 10px;
    font-size: 22px;
    color: var(--text-primary);
}

.project-card p {
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: auto;
}

.tags li {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
}

/* Social Links */
.social-links {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    gap: 30px;
}

.social-links a {
    color: var(--text-secondary);
    transition: var(--transition);
    width: 24px;
    height: 24px;
}

.social-links a:hover {
    color: var(--accent);
    transform: translateY(-3px);
}

/* Footer */
footer {
    padding: 20px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

/* Featured Projects Styling */
.project-card.featured {
    grid-column: 1 / -1;
    /* Spans full width of the grid */
    border: 1px solid var(--accent);
    background-color: rgba(17, 34, 64, 0.8);
    /* Slightly distinct bg */
    display: flex;
    flex-direction: column;
    padding: 40px;
    /* More padding for importance */
}

.project-card.featured h3 {
    font-size: 28px;
    /* Bigger title */
    color: var(--accent);
    margin-top: 0;
}

.project-card.featured p {
    font-size: 18px;
    /* Bigger text */
    max-width: 800px;
}

@media (min-width: 768px) {
    .project-card.featured {
        flex-direction: row;
        align-items: start;
        gap: 30px;
    }

    .project-card.featured .card-header {
        flex-direction: column;
        justify-content: flex-start;
        gap: 20px;
        margin-bottom: 0;
        margin-right: 20px;
        min-width: 50px;
    }

    .project-card.featured .folder-icon {
        width: 60px;
        height: 60px;
    }
}

/* Social Links Bottom */
#social-end {
    padding: 50px 0 100px;
}

.social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.social-card {
    background-color: var(--bg-light);
    padding: 25px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid transparent;
    transition: var(--transition);
}

.social-card:hover {
    border-color: var(--accent);
    transform: translateY(-5px);
    text-decoration: none;
}

.social-card .icon-box {
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-card .icon-box svg {
    width: 32px;
    height: 32px;
}

.social-text h3 {
    font-size: 18px;
    /* Slightly bigger */
    margin-bottom: 5px;
    color: var(--text-primary);
}

.social-text p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .cert-img-container {
        margin-right: 0;
        margin-top: 0;
    }

    .cert-img {
        width: 300px;
        transform: rotate(2deg);
    }
}

@media (max-width: 768px) {
    body {
        zoom: 1;
        /* Reset zoom on mobile */
    }

    header {
        padding: 20px;
    }

    .projects-grid,
    .social-grid {
        grid-template-columns: 1fr;
        /* Force single column */
        width: 100%;
    }

    .project-card,
    .social-card {
        width: 100%;
        /* ensure full width */
        max-width: 100%;
        box-sizing: border-box;
        /* Include padding in width */
    }

    #hero {
        padding: 100px 20px 40px;
        /* More top padding to clear header */
        align-items: center;
        text-align: center;
        /* Center everything */
        min-height: auto;
    }

    .hero-content {
        flex-direction: column-reverse;
        /* Text bottom, Image top */
        gap: 20px;
        text-align: center;
        width: 100%;
        max-width: 100%;
    }

    .cert-img-container {
        margin-top: 20px;
        margin-right: 0;
        margin-bottom: 30px;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .cert-img {
        width: 250px;
        max-width: 80%;
        transform: rotate(0);
        margin: 0 auto;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        /* Simpler shadow */
    }

    #hero h1 {
        font-size: 36px;
        margin-bottom: 15px;
    }

    #hero h2 {
        font-size: 24px;
        margin-bottom: 15px;
    }

    #about,
    #projects {
        padding: 60px 20px;
    }

    .cta-buttons {
        display: flex;
        flex-direction: column;
        gap: 20px;
        /* Space between buttons */
        align-items: center;
        width: 100%;
        margin-top: 30px;
    }

    .btn {
        width: 100%;
        max-width: 300px;
        /* Limit width */
        text-align: center;
        margin: 0;
        /* Reset margins */
        display: block;
        /* Ensure full width block */
        box-sizing: border-box;
    }

    .project-card,
    .project-card.featured {
        padding: 20px;
        /* Reduce padding significantly */
        border-width: 1px;
        /* Ensure thin borders */
    }

    .project-card.featured h3 {
        font-size: 22px;
        /* Smaller headings on mobile */
    }

    .project-card.featured p {
        font-size: 15px;
    }

    .section-title::after {
        width: 100%;
    }
}