/* --- 1. VARIABLES & ROOT --- */
:root {
    /* Color Palette */
    --bg-color: #e2e2e2;
    --text-color: #000000;
    --accent-color: #888888;      /* For meta info like years/tags */
    --ui-border: #eeeeee;
    --ui-soft-bg: #f7f7f7;
    --tag-opacity: 0.6;
    
    /* Typography */
    --font-main: Arial, Helvetica, sans-serif;
    --ls-tight: -0.04em;          /* Heavy Headlines */
    --ls-meta: 0.05em;           /* Tags & Nav */
    
    /* Grid & Spacing */
    --nav-height: 80px;
    --container-padding: 40px;
    --grid-gap: 40px;
    --card-info-gap: 12px;
    
    /* Motion */
    --transition-speed: 0.35s;
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-custom: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --- 2. RESET & BASE --- */
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
button { font-family: inherit; }

/* --- 3. LAYOUT STRUCTURE --- */
#app {
    margin-top: var(--nav-height);
    padding: var(--container-padding);
    min-height: calc(100vh - var(--nav-height));
    width: 100%;
}

/* --- 4. NAVIGATION --- */
#main-nav {
    position: fixed;
    top: 0;
    width: 100%;
    height: var(--nav-height);
    background: var(--bg-color);
    z-index: 1000;
    display: flex;
    align-items: center;
    padding: 0 var(--container-padding);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.logo {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    font-size: 1.2rem;
    font-style: italic;
    
    /* CRITICAL: Must be block or inline-block for filters to track correctly */
    display: inline-block; 
    filter: url(#glitch-filter);
    
    /* Prevent the glitch from moving the actual layout of the nav */
    vertical-align: middle; 
}

/* Better way to hide the SVG without killing the filter */
.glitch-svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
}

.nav-links a {
    margin-right: 25px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: var(--ls-meta);
    transition: opacity var(--transition-speed);
    font-weight: 400;
}


.nav-links a:hover{ opacity: 0.5; }

.nav-links a.active { font-weight: 800; }

.lang-toggle button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--accent-color);
    margin-left: 12px;
}

.lang-toggle button:hover { color: var(--text-color); }

.lang-toggle button.active {
    color: var(--text-color);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* --- HAMBURGER BUTTON --- */
.hamburger {
    display: none; /* Escondido no desktop */
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    width: 32px;
    height: 32px;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    transition: transform var(--transition-speed) var(--ease-out-expo),
                opacity var(--transition-speed);
    transform-origin: center;
}

/* Animação X quando aberto */
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- MOBILE MENU DRAWER --- */
.mobile-menu {
    display: block; 
    position: fixed;
    top: var(--nav-height);
    left: 0;
    width: 100%;
    background: var(--bg-color);
    padding: 40px var(--container-padding);
    z-index: 999;
    border-top: 1px solid var(--ui-border);

    /* Use visibility + opacity for cleaner interaction */
    opacity: 0;
    visibility: hidden; 
    transform: translateY(-8px);
    transition: 
        opacity var(--transition-speed) var(--ease-out-expo),
        transform var(--transition-speed) var(--ease-out-expo),
        visibility var(--transition-speed); /* Syncs with opacity */
    
    /* Hardware acceleration to prevent lag */
    will-change: opacity, transform;
}

.mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/*hwn i uncomment this block, i have a little lag in the hover-in animation of the ".mobile-nav-links a ".... why would that be?*/
/* .mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 40px;
} */

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 40px;
    /* FIX: Prevents the container from re-calculating during child hovers */
    contain: layout; 
}

.mobile-nav-links a {
    font-size: 2rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: var(--ls-tight);
    display: inline-block; /* Better hit area than 'inline' */
    width: fit-content;
    
    /* Specificity: Only transition opacity on hover */
    transition: opacity 0.2s ease; 
    will-change: opacity;
}

.mobile-nav-links a:hover { opacity: 0.4; }
/* .mobile-nav-links a.active { text-decoration: underline; text-underline-offset: 6px; } */
    
.mobile-nav-links a.active { font-weight: 800;}

.mobile-lang-toggle {
    display: flex;
    gap: 12px;
}

.mobile-lang-toggle button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--accent-color);
    letter-spacing: var(--ls-meta);
    text-transform: uppercase;
}

.mobile-lang-toggle button:hover { color: var(--text-color); }
.mobile-lang-toggle button.active {
    color: var(--text-color);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* --- RESPONSIVE BREAKPOINT --- */
@media (max-width: 768px) {
    /* Esconder versão desktop */
    .nav-links,
    .lang-toggle {
        display: none;
    }

    /* Mostrar hamburger */
    .hamburger {
        display: flex;
    }

    /* Mobile menu: display:none por padrão, JS ativa */
    .mobile-menu {
        /* display: block; JS controla visibilidade via opacity/transform + is-open */
        pointer-events: none; /* Não clicável quando fechado */
    }

    .mobile-menu.is-open {
        pointer-events: all;
    }
}

/* --- 5. COMPONENTS --- */

/* Grid System */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--grid-gap);
    width: 100%;
}

/* Project Cards */
.project-card {
    display: block;
    cursor: pointer;
    /* 1. Set initial state to invisible so it doesn't "pop" before animating */
    opacity: 0; 
    
    animation: fadeInUp 1.2s var(--ease-out-expo) forwards;
    /* 3. Performance boost */
    will-change: transform, opacity;
}

.media-container {
    position: relative;
    width: 100%;
    background: var(--ui-soft-bg);
    overflow: hidden;
    margin-bottom: var(--card-info-gap);
}

/* No space between classes means "an element with BOTH classes" */
.media-container.work {
    aspect-ratio: 16 / 9;
}

.media-container.digital-art {
    aspect-ratio: 1 / 1;
}

.media-container img, 
.media-container video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: opacity 0.6s var(--ease-out-expo);
}

/* Hover Logic */
.media-container video { opacity: 0; }
.project-card:hover video { opacity: 1; }
/* .project-card:hover img { opacity: 0.3; } */

/* Editorial Category Tags */
.project-info h3 {
    font-style: italic;
    font-size: 1.1rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}

.project-info .year {
    font-size: 0.7rem;
    color: var(--accent-color);
    letter-spacing: var(--ls-meta);
}

.categories {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.categories span {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--accent-color);
    letter-spacing: var(--ls-meta);
    font-weight: 500;
    opacity: var(--tag-opacity);
}

/* The Dot Separator Strategy */
.categories span:not(:last-child)::after {
    content: "•";
    margin: 0 8px;
    font-size: 0.5rem;
}

/* --- 6. FILTER SYSTEM --- */
.filter-container {
    margin-bottom: 60px;
    display: flex;
    gap: 12px;
}

.filter-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: var(--ls-meta);
    color: var(--accent-color);
    cursor: pointer;
    transition: color var(--transition-speed);
}

.filter-btn:hover { color: var(--text-color); }

.filter-btn.active {
    color: var(--text-color);
    text-decoration: underline;
    text-underline-offset: 6px;
}

/* --- 7. PAGE SPECIFICS --- */

/* Project and Collection pages */
.project-detail {
    max-width: 1200px; /* Constrains the content for better readability */
    margin: 0 auto;
    padding-top: 60px;
}

/* Header Section */
.project-header {
    margin-bottom: 100px;
}

.project-header h1 {
    font-size: clamp(2.5rem, 8vw, 6rem);
    line-height: 0.9;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: var(--ls-tight);
    margin-bottom: 24px;
}

.project-meta {
    display: flex;
    gap: 20px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: var(--ls-meta);
    color: var(--accent-color);
}

.project-meta span:not(:last-child)::after {
    content: "•";
    margin-left: 20px;
    opacity: 0.5;
}

/* Block Layouts */
.project-content {
    display: flex;
    flex-direction: column;
    gap: 80px; /* Vertical spacing between blocks */
}

.project-block {
    width: 100%;
    animation: fadeInUp 1s var(--ease-out-expo) forwards;
}

/* Text Block - Editorial Styling */
.text-block {
    max-width: 800px; /* Narrower for reading comfort */
    margin: 0px auto;
}

.text-block p {
    font-size: 1.2rem;
    line-height: 1.5;
}

/* Media Blocks (Video & Image) */
.image-block img {
    width: 100%;
    background: var(--ui-soft-bg);
    border: none;
    display: block;
}

.video-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.video-block video {
    width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    .video-block video {
        max-height: 70vh;
        max-width: 100%;
    }
}

.caption {
    text-align: center;
    margin-top: 16px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: var(--ls-meta);
    color: var(--accent-color);
}

/* Footer Navigation */
.project-footer {
    margin-top: 40px;
    padding-bottom: 80px;
    border-top: 1px solid var(--ui-border);
    padding-top: 40px;
}
.project-credits {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.credit-row {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: var(--ls-meta);
}

.credit-key {
    color: var(--accent-color);
}

.credit-value {
    opacity: 0.6;
    text-align: right;
}

.credit-link {
    opacity: 0.4;
    transition: opacity var(--transition-speed);
}

.credit-link:hover {
    opacity: 1;
}


.back-link {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: var(--ls-meta);
    transition: opacity var(--transition-speed);
}

.back-link:hover {
    opacity: 0.5;
}

/* Responsive adjustments for the Project Page */
@media (max-width: 768px) {
    .project-header {
        margin-bottom: 60px;
    }
    
    .project-header h1 {
        font-size: 3rem;
    }

    .project-meta {
        flex-direction: column;
        gap: 8px;
    }

    .project-meta span:not(:last-child)::after {
        display: none;
    }

    .project-content {
        gap: 40px;
    }

    .text-block p {
        font-size: 1rem;
    }
}


/* Home Hero */
.home-hero {
    height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;

    opacity: 0; 
    
    animation: fadeInUp 1.2s var(--ease-out-expo) forwards;
    /* 3. Performance boost */
    will-change: transform, opacity;
}

.home-cta {
    display: inline-block;
    border: solid 1px var(--text-color);
    line-height: 1;
    margin-top: 20px;
    padding: 10px;
}

.home-cta:hover {
    background-color: var(--ui-border);
}

.home-hero h1 {
    font-size: clamp(3rem, 12vw, 9rem);
    line-height: 0.85;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: var(--ls-tight);
    hyphens: auto;
    word-break: break-word;
}

/* About Grid */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    margin-top: 60px;
}

.bio video{
    object-fit:cover;
    width: 50%;
    opacity: 0; 
    
    animation: fadeInUp 1.2s var(--ease-out-expo) forwards;
    /* 3. Performance boost */
    will-change: transform, opacity;
}


.bio h2 {
    font-size: 3rem;
    text-transform: uppercase;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 40px;
}

/* Forms */
/* .contact-form {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.form-group input, .form-group textarea {
    width: 100%;
    padding: 12px 0;
    border: none;
    border-bottom: 1px solid var(--ui-border);
    background: transparent;
    font-size: 1rem;
    outline: none;
}

.form-group input:focus, .form-group textarea:focus {
    border-bottom: 1px solid var(--text-color);
} */

/* --- 8. FORMS & BUTTONS --- */

.about-contact h3 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: var(--ls-meta);
    font-weight: 800;
    margin-bottom: 40px;
    color: var(--text-color);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 40px; /* Increased gap for a cleaner look */
}

.form-group {
    position: relative;
    width: 100%;
}

.form-group input, 
.form-group textarea {
    width: 100%;
    padding: 15px 0;
    border: none;
    border-bottom: 1px solid rgba(0,0,0,0.1); /* Subtle start */
    background: transparent;
    font-size: 1rem;
    font-family: var(--font-main);
    color: var(--text-color);
    outline: none;
    transition: border-color var(--transition-speed) var(--ease-custom);
    border-radius: 0; /* Prevents iOS rounding */
}

/* Placeholder styling */
.form-group input::placeholder, 
.form-group textarea::placeholder {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: var(--ls-meta);
    color: var(--accent-color);
    transition: opacity var(--transition-speed);
}

/* Hover & Focus States */
.form-group input:hover, 
.form-group textarea:hover {
    border-bottom: 1px solid var(--accent-color);
}

.form-group input:focus, 
.form-group textarea:focus {
    border-bottom: 1px solid var(--text-color);
}

.form-group input:focus::placeholder {
    opacity: 0.3;
}

/* Submit Button Style */
.btn-primary {
    align-self: flex-start;
    background: var(--text-color);
    color: var(--bg-color);
    border: none;
    padding: 18px 40px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all var(--transition-speed) var(--ease-out-expo);
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-primary:hover {
    background: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.btn-primary:active {
    transform: translateY(0);
}

/* Adjusting the About Grid for better form presentation */
@media (min-width: 769px) {
    .about-contact {
        padding-left: 60px;
        border-left: 1px solid var(--ui-border);
    }
}

/* --- 9. RESPONSIVE --- */
@media (max-width: 1024px) {
    :root { --container-padding: 30px; }
}

@media (max-width: 768px) {
    .projects-grid { grid-template-columns: 1fr; }
    .about-grid { grid-template-columns: 1fr; }
    .home-hero h1 { font-size: 4.0rem; }
    .bio video {width: 100%;}
}

/* ANIMATION */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px); /* Adjust pixels for more/less slide */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}