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


/* Global Gradient Background */
body {
    background: linear-gradient(135deg, #27272a 0%, #09090b 50%, #000000 100%);
    background-attachment: fixed;
    color: #ffffff;
}

/* Give the header a "Frosted Glass" separation */
.bg-variation {
    background: rgba(0, 0, 0, 0.5) !important; /* Semi-transparent black */
    backdrop-filter: blur(12px); /* Blurs the gradient behind it */
    -webkit-backdrop-filter: blur(12px); /* Safari support */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* Sharp line to separate the body */
}

/* Add a top line to the contact section to match */
.bg-variation-bottom {
    background: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* --- Language System --- */
/* Hide Spanish text by default */
body:not(.es-active) .lang-es { display: none !important; }

/* Hide English text when Spanish is active */
body.es-active .lang-en { display: none !important; }

/* Basic setup */
html { scroll-behavior: smooth; }
body { background-color: #000; color: #fff; font-family: 'Inter', sans-serif; margin: 0; }

/* Variations */
.bg-variation { background-color: #0a0a0a; border-bottom: 1px solid #111; }
.bg-variation-bottom { background-color: #0a0a0a; border-top: 1px solid #111; }

/* Header Elements */
.contact-trigger { font-size: 0.75rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color: #fff; border: 1px solid rgba(255,255,255,0.2); padding: 0.5rem 1rem; transition: 0.3s; }
.contact-trigger:hover { background: #fff; color: #000; }
.social-icon { color: #444; transition: 0.3s; }
.social-icon:hover { color: #fff; }

/* Inverted CV Button */
.cv-trigger { background: #fff; color: #000; border: 1px solid #fff; font-size: 0.75rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.5rem 1rem; transition: 0.3s; display: inline-block; }
.cv-trigger:hover { background: transparent; color: #fff; }

.social-icon { color: #444; transition: 0.3s; }
.social-icon:hover { color: #fff; }

/* Filter Buttons */
.filter-btn { color: #444; transition: 0.3s; font-weight: 900; letter-spacing: 0.2em; font-size: 0.7rem; text-transform: uppercase; border-bottom: 2px solid transparent; padding-bottom: 4px; }
.filter-btn.active { color: #fff; border-bottom: 2px solid #fff; }

/* Projects */
.project-image { width: 100%; height: 320px; object-fit: cover; border: 1px solid #1a1a1a; transition: 0.5s ease; }
.project-card:hover .project-image { border-color: #555; transform: translateY(-8px); }
.card-title { font-size: 1.5rem; font-weight: 900; text-transform: uppercase; margin-bottom: 0.5rem; transition: 0.3s; }
.project-card:hover .card-title { color: #999; }
.card-desc { color: #666; font-size: 0.875rem; margin-bottom: 1.5rem; line-height: 1.6; }
.card-link { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #fff; border-bottom: 1px solid #fff; padding-bottom: 2px; transition: 0.3s; }
.project-card:hover .card-link { color: #666; border-color: #666; }

/* Form & Contact */
.section-label { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.5em; color: #333; font-weight: 900; margin-bottom: 4rem; font-style: italic; }
.contact-heading { font-size: 3rem; font-weight: 900; letter-spacing: -0.05em; text-transform: uppercase; line-height: 1; margin-bottom: 1.5rem; }
.email-link { font-weight: 700; text-decoration: underline; text-underline-offset: 8px; transition: 0.3s; }
.email-link:hover { color: #999; }
.form-input { background: transparent; border-bottom: 1px solid #222; padding: 0.75rem 0; font-size: 0.75rem; letter-spacing: 0.1em; outline: none; transition: 0.3s; text-transform: uppercase; }
.form-input:focus { border-color: #fff; }
.submit-btn { background: #fff; color: #000; font-weight: 900; text-transform: uppercase; font-size: 0.625rem; letter-spacing: 0.3em; padding: 1rem; margin-top: 1rem; transition: 0.3s; }
.submit-btn:hover { background: #ccc; }

.hidden { display: none; }

/* 1. The container needs to know it's a reference point */
.relative {
    position: relative;
}

/* 2. The overlay needs to be "pinned" to the corners */
.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* The dark tint */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease;
    pointer-events: none; /* This prevents the overlay from blocking clicks */
}

/* 3. The Trigger - This makes it appear */
.project-card:hover .project-overlay {
    opacity: 1;
}
/* --- Global Game Dev Cursor --- */
/*body {
    
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><circle cx="10" cy="10" r="4" fill="%23ffffff" /></svg>') 10 10, auto;
}*/

/* ---- CUSTOM CURSOR, MAYBE A 16x16 or 32x32 PIXEL SWORD --- */
body {
    /* El ../ le dice al CSS: "Sal de la carpeta css, y entra en assets/img" */
    cursor: url('../assets/img/sword_cursor.png'), auto;
}

a, button, input, textarea {
    cursor: pointer;
}

/* --- Cyberpunk Glitch Effect --- */
.glitch-hover {
    position: relative;
    display: inline-block;
    transition: 0.1s;
}

.glitch-hover:hover {
    animation: glitch-anim 0.2s linear infinite;
    color: #fff;
}

@keyframes glitch-anim {
    0% { text-shadow: 3px 0 #ff003c, -3px 0 #00f0ff; transform: translate(1px, 1px); }
    20% { text-shadow: -3px 0 #ff003c, 3px 0 #00f0ff; transform: translate(-1px, -2px); }
    40% { text-shadow: 3px 0 #ff003c, -3px 0 #00f0ff; transform: translate(-2px, 1px); }
    60% { text-shadow: -3px 0 #ff003c, 3px 0 #00f0ff; transform: translate(1px, -1px); }
    80% { text-shadow: 3px 0 #ff003c, -3px 0 #00f0ff; transform: translate(2px, 2px); }
    100% { text-shadow: -3px 0 #ff003c, 3px 0 #00f0ff; transform: translate(-1px, 1px); }
}
/* --- Engine Glow on Project Hover --- */
.project-card .relative {
    transition: box-shadow 0.5s ease;
}

.project-card:hover .relative {
    /* A subtle, ghostly white/cyan glow to match the glitch effect */
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.15); 
}