@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

/*-- 1. Cascade Layers --*/
@layer base, layout, components;

@layer base {
    :root {
        --primary-color: oklch(95% 0.05 260);
        --secondary-color: oklch(15% 0.05 260);
        --accent-color: oklch(70% 0.2 260);
        --glowing-color: oklch(80% 0.25 260);
        --card-bg: oklch(20% 0.05 260);
        --border-color: oklch(25% 0.05 260);
    }

    body {
        font-family: 'Poppins', sans-serif;
        margin: 0;
        background-color: var(--secondary-color);
        color: var(--primary-color);
        background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.75" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%" height="100%" filter="url(%23n)" opacity="0.1"/%3E%3C/svg%3E');
    }
}

@layer layout {
    header {
        background-color: transparent;
        backdrop-filter: blur(12px) saturate(150%);
        padding: 1rem 2rem;
        position: sticky;
        top: 0;
        z-index: 10;
        border-bottom: 1px solid transparent;
        transition: background-color 0.3s ease, border-bottom-color 0.3s ease;
        display: flex;
        justify-content: flex-end; /* Align nav to the right */
        align-items: center;
    }
    
    header.scrolled {
        background-color: rgba(15, 15, 25, 0.7);
        border-bottom-color: var(--border-color);
    }

    main {
        padding: 2rem;
    }

    #about {
        position: relative;
        min-height: 100vh;
        display: grid;
        place-content: center;
        overflow: hidden;
    }

    section {
        margin-block-end: 5rem;
    }

    footer {
        padding: 4rem 2rem;
        background-color: oklch(10% 0.05 260);
        color: var(--primary-color);
        border-top: 1px solid var(--border-color);
    }

    .skills-container, .projects-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 2rem;
        container-type: inline-size;
    }
}

@layer components {
    #bg-canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }

    .nav-toggle {
        display: none; /* Hidden by default, shown in media query */
        position: absolute;
        top: 1rem;
        right: 1rem;
        z-index: 100;
        background: transparent;
        border: 0;
        cursor: pointer;
    }

    .hamburger {
        display: block;
        position: relative;
        width: 2em;
        height: 3px;
        background: var(--primary-color);
        transition: transform 0.3s ease;
    }

    .hamburger::before, 
    .hamburger::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--primary-color);
        transition: transform 0.3s ease, top 0.3s ease, bottom 0.3s ease;
    }

    .hamburger::before {
        top: -8px;
    }

    .hamburger::after {
        bottom: -8px;
    }

    .nav-open .hamburger {
        transform: rotate(135deg);
    }

    .nav-open .hamburger::before, 
    .nav-open .hamburger::after {
        top: 0;
        bottom: 0;
        transform: rotate(90deg);
    }

    nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    nav li {
        margin-inline: 1.5rem;
    }

    nav a {
        color: var(--primary-color);
        text-decoration: none;
        transition: color 0.3s, text-shadow 0.3s;
        display: flex;
        align-items: center;
        font-weight: 600;
    }

    nav a:hover {
        color: var(--accent-color);
        text-shadow: 0 0 15px var(--glowing-color), 0 0 5px white;
    }

    nav a i {
        margin-inline-end: 0.5rem;
    }

    .profile {
        text-align: center;
        padding-block: 2rem;
        position: relative;
        z-index: 1;
    }

    .profile img {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid var(--accent-color);
        box-shadow: 0 0 25px var(--glowing-color), 0 0 10px var(--accent-color) inset;
        transition: transform 0.3s ease-in-out;
    }

    .profile img:hover {
        transform: scale(1.05);
    }

    h1 {
        font-size: clamp(2.5rem, 5vw, 4rem);
        font-weight: 700;
        margin: 1rem 0 0.5rem;
        background: linear-gradient(45deg, var(--accent-color), var(--primary-color));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .profile p {
        font-size: 1.2rem;
        color: oklch(80% 0.05 260);
    }

    .social-media a {
        margin-inline: 0.75rem;
        color: var(--primary-color);
        text-decoration: none;
        font-size: 1.75rem;
        transition: color 0.3s, text-shadow 0.3s, transform 0.3s;
    }

    .social-media a:hover {
        color: var(--accent-color);
        text-shadow: 0 0 15px var(--glowing-color);
        transform: translateY(-2px);
    }

    .social-media-footer {
        margin-top: 3rem;
        margin-bottom: 1rem;
        text-align: center;
    }

    .social-media-footer a {
        margin-inline: 0.75rem;
        color: var(--primary-color);
        text-decoration: none;
        font-size: 1.75rem;
        transition: color 0.3s, text-shadow 0.3s, transform 0.3s;
    }

    .social-media-footer a:hover {
        color: var(--accent-color);
        text-shadow: 0 0 15px var(--glowing-color);
        transform: translateY(-2px);
    }

    h2 {
        font-size: clamp(2rem, 4vw, 2.8rem);
        font-weight: 700;
        text-align: center;
        margin-block-end: 3rem;
        color: var(--accent-color);
    }

    .skill, project-card {
        background-color: var(--card-bg);
        padding: 1.5rem;
        border-radius: 12px;
        font: inherit;
        border: 1px solid var(--border-color);
        box-shadow: 0 8px 15px rgba(0,0,0,0.2), 0 2px 5px rgba(0,0,0,0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
        text-align: left;
    }
    
    .skill:hover, project-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 25px var(--glowing-color, 0.2), 0 4px 10px rgba(0,0,0,0.1);
    }
    
    .projects-container:has(project-card:hover) project-card:not(:hover) {
        opacity: 0.7;
        transform: scale(0.98);
    }

    .quick-links-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem;
    }

    .quick-link-btn {
        background-color: var(--card-bg);
        color: var(--primary-color);
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        text-decoration: none;
        border: 1px solid var(--border-color);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        transition: transform 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s;
        font-weight: 600;
    }

    .quick-link-btn:hover {
        background-color: var(--accent-color);
        color: var(--secondary-color);
        transform: translateY(-3px);
        box-shadow: 0 8px 15px var(--glowing-color, 0.2);
    }

    .project-detail {
        display: none;
        background-color: var(--card-bg);
        padding: 2rem;
        border-radius: 12px;
        margin-bottom: 2rem;
        border: 1px solid var(--border-color);
        box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    }

    .project-detail h3 {
        color: var(--accent-color);
        margin-top: 0;
    }

    .contact-container {
        max-width: 600px;
        margin: 0 auto;
        width: 100%;
        text-align: center;
    }
    
    #contact-form {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        text-align: left;
    }
    
    #contact-form .form-group {
        display: flex;
        flex-direction: column;
    }
    
    #contact-form label {
        margin-bottom: 0.5rem;
        font-weight: 600;
        color: var(--primary-color);
    }
    
    #contact-form input,
    #contact-form textarea {
        box-sizing: border-box;
        width: 100%;
        padding: 0.75rem;
        border: 1px solid var(--border-color);
        background-color: oklch(25% 0.05 260);
        color: var(--primary-color);
        border-radius: 8px;
        font-family: inherit;
        font-size: 1rem;
        transition: border-color 0.3s, box-shadow 0.3s;
    }
    
    #contact-form input:focus,
    #contact-form textarea:focus {
        outline: none;
        border-color: var(--accent-color);
        box-shadow: 0 0 10px var(--glowing-color);
    }
    
    #contact-form textarea {
        resize: vertical;
        min-height: 120px;
    }
    
    .submit-btn {
        background-color: var(--accent-color);
        color: var(--secondary-color);
        padding: 0.8rem 1.5rem;
        border-radius: 8px;
        border: none;
        font-weight: bold;
        font-size: 1.1rem;
        cursor: pointer;
        transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s;
    }
    
    .submit-btn:hover {
        background-color: var(--primary-color);
        transform: translateY(-3px);
        box-shadow: 0 8px 15px var(--glowing-color, 0.2);
    }

    .submit-btn:disabled {
        background-color: var(--border-color);
        color: oklch(50% 0.05 260);
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }
    
    #form-status {
        text-align: center;
        margin-top: 1rem;
        font-weight: 600;
        min-height: 1.5em; /* Reserve space to prevent layout shift */
    }
    
    #form-status.success {
        color: oklch(70% 0.2 140); /* A nice green */
    }
    
    #form-status.error {
        color: oklch(70% 0.2 20); /* A clear red */
    }
}

@container (max-width: 600px) {
    .projects-container, .skills-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    header {
        justify-content: center; /* Center the nav items when they stack */
    }

    .nav-toggle {
        display: block; /* Show hamburger */
    }

    nav {
        position: fixed;
        background: var(--secondary-color);
        color: var(--primary-color);
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 99;
        transform: translateX(100%);
        transition: transform 250ms cubic-bezier(.5, 0, .5, 1);
    }

    .nav-open nav {
        transform: translateX(0);
    }

    nav ul {
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        height: 100%;
    }

    nav li {
        margin: 0;
    }

    nav a {
        font-size: 1.5rem;
    }

    main {
        padding: 1rem;
    }
}