html {
    scroll-behavior: smooth;
}
body {
    font-family: 'Fira Code', monospace;
}
/* Estilos para la animación del título con Anime.js */
.letter {
    display: inline-block;
    line-height: 1em;
    opacity: 0; /* Oculto por defecto para la animación */
}
/* Ocultar elementos para la animación con Anime.js */
#hero h1 {
    /* Evita el FOUC (Flash of Unstyled Content) */
    opacity: 0;
}
#experiencia .anim-item,
#habilidades .anim-item,
.section-header h2 {
    opacity: 0;
}

/* Estilos para la animación de encabezados de sección (Estilo MGSV) */
.section-header {
    position: relative;
    display: inline-block;
    padding: 0.5rem 1.5rem;
    /* Variables para animar con JS */
    --bracket-width: 0%;
    --bracket-height: 0%;
}
.section-header::before, .section-header::after {
    content: '';
    position: absolute;
    width: var(--bracket-width); 
    height: var(--bracket-height);
    border-color: #22c55e; /* theme('colors.green.500') */
    border-style: solid;
}
.section-header::before {
    top: 0; left: 0; border-width: 2px 0 0 2px;
}
.section-header::after {
    bottom: 0; right: 0; border-width: 0 2px 2px 0;
}

/* Estilos para el hover de las tarjetas de proyecto */
.project-card {
    position: relative;
}
.project-card .card-border {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid transparent;
}

/* Estilos para el fondo de Matrix */
#matrix-canvas {
    display: none; /* Oculto por defecto */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -10; /* Detrás de todo el contenido */
}
.dark #matrix-canvas {
    display: block; /* Visible solo en modo oscuro */
}

/* Estilos para el efecto Glitch en el hover (genérico) */
.glitch-hover {
    position: relative;
    cursor: pointer;
}
.glitch-hover::after, .glitch-hover::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: inset(50% 50% 50% 50%);
    pointer-events: none; /* Evita que los pseudo-elementos interfieran con el hover */
}
.glitch-hover:hover::before {
    text-shadow: -2px 0 #ff00c1; /* Magenta */
    animation: glitch-anim 1.5s infinite linear alternate-reverse;
}
.glitch-hover:hover::after {
    text-shadow: 2px 0 #00fff9; /* Cyan */
    animation: glitch-anim-2 2s infinite linear alternate-reverse;
}
@keyframes glitch-anim {
    0%{clip-path:inset(40% 0 60% 0)}20%{clip-path:inset(10% 0 85% 0)}40%{clip-path:inset(50% 0 30% 0)}60%{clip-path:inset(70% 0 10% 0)}80%{clip-path:inset(90% 0 5% 0)}100%{clip-path:inset(40% 0 60% 0)}
}
@keyframes glitch-anim-2 {
    0%{clip-path:inset(2% 0 98% 0)}20%{clip-path:inset(90% 0 2% 0)}40%{clip-path:inset(33% 0 60% 0)}60%{clip-path:inset(5% 0 80% 0)}80%{clip-path:inset(60% 0 30% 0)}100%{clip-path:inset(2% 0 98% 0)}
}

/* Estilos para la sección de demostración de animación scroll */
#scroll-demo-container {
    height: 300px;
    position: relative;
    overflow: hidden;
    border: 1px solid #4a5568; /* gray-700 */
    border-radius: 0.5rem;
    padding: 1rem;
}
.demo-square, .demo-circle {
    width: 50px;
    height: 50px;
    background-color: #22c55e; /* green-500 */
    position: absolute;
    opacity: 0; /* Ocultos al inicio */
}
.demo-circle {
    border-radius: 50%;
}

/* Estilos para la animación de apagado de TV */
#tv-off-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    z-index: 9999; /* Por encima de todo */
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}
#tv-off-overlay.animate {
    opacity: 1;
    visibility: visible;
    animation: tv-off-effect 600ms cubic-bezier(0.755, 0.050, 0.855, 0.060);
}
@keyframes tv-off-effect {
    0% { transform: scale(1, 1); opacity: 1; }
    50% { transform: scale(1, 0.005); opacity: 1; }
    80% { transform: scale(0.005, 0.005); opacity: 1; }
    100% { transform: scale(0, 0); opacity: 0; }
}

/* Estilos para la animación de scanlines (monitor antiguo) */
.dark body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(0deg, transparent 0%, rgba(0, 0, 0, 0.25) 50%, transparent 100%);
    background-size: 100% 3px;
    pointer-events: none;
    z-index: 9998; /* Debajo del overlay de TV, encima del resto */
    animation: flicker 0.15s infinite;
}
@keyframes flicker {
  0% { opacity: 0.2; }
  20% { opacity: 0.4; }
  40% { opacity: 0.25; }
  60% { opacity: 0.5; }
  80% { opacity: 0.3; }
  100% { opacity: 0.4; }
}