/* Estilos Base Mantenidos */
body {
    background-image:
        linear-gradient(rgba(0, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    overflow-x: hidden;
    min-height: 100vh;
}

.scanlines {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.25));
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 50;
}

/* Animación de entrada suave para el contenido */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
    opacity: 0; /* Empieza oculto para la animación */
}

/* Efecto Glitch Nativo */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
    content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.glitch::before {
    left: 3px; text-shadow: -2px 0 oklch(var(--su)); animation: glitch-anim-1 2s infinite linear alternate-reverse;
}
.glitch::after {
    left: -3px; text-shadow: -2px 0 oklch(var(--s)); animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
    0% { clip-path: inset(20% 0 80% 0); }
    20% { clip-path: inset(60% 0 10% 0); }
    40% { clip-path: inset(40% 0 50% 0); }
    60% { clip-path: inset(80% 0 5% 0); }
    80% { clip-path: inset(10% 0 70% 0); }
    100% { clip-path: inset(30% 0 40% 0); }
}
@keyframes glitch-anim-2 {
    0% { clip-path: inset(10% 0 60% 0); }
    20% { clip-path: inset(30% 0 20% 0); }
    40% { clip-path: inset(70% 0 10% 0); }
    60% { clip-path: inset(20% 0 50% 0); }
    80% { clip-path: inset(90% 0 5% 0); }
    100% { clip-path: inset(5% 0 80% 0); }
}

/* EFECTO DE TRANSICIÓN PACMAN */
#transition-container {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none; z-index: 9999; overflow: hidden; display: none;
}
.wipe-block {
    position: absolute; top: 0; left: -200vw; width: 200vw; height: 100vh; background: #000;
    display: flex; align-items: center; justify-content: flex-end;
}
.wipe-block.animate-sweep { animation: sweepAcross 1.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards; }
@keyframes sweepAcross { 0% { left: -200vw; } 50% { left: -50vw; } 100% { left: 100vw; } }

/* Efecto Parpadeo Sutil (Flicker) */
@keyframes glitch-flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; transform: translate(0, 0) skew(0deg); }
    20% { opacity: 0.8; transform: translate(-2px, 1px) skew(2deg); }
    22% { opacity: 0.6; transform: translate(2px, -1px) skew(-2deg); }
    24% { opacity: 0.9; transform: translate(-1px, -1px) skew(1deg); }
    55% { opacity: 0.3; transform: translate(1px, 1px) skew(-1deg); }
}
.animate-glitch-sutil {
    animation: glitch-flicker 4s infinite linear;
}

.pacman-head {
    width: 60vmin; height: 60vmin; background: oklch(var(--p)); border-radius: 50%;
    position: absolute; right: -30vmin; animation: chomp 0.35s infinite;
    box-shadow: 0 0 50px oklch(var(--p) / 0.5);
}
@keyframes chomp {
    0%   { clip-path: polygon(100% 74%, 50% 50%, 100% 26%, 100% 0, 0 0, 0 100%, 100% 100%); }
    50%  { clip-path: polygon(100% 50%, 50% 50%, 100% 50%, 100% 0, 0 0, 0 100%, 100% 100%); }
    100% { clip-path: polygon(100% 74%, 50% 50%, 100% 26%, 100% 0, 0 0, 0 100%, 100% 100%); }
}

/* Scrollbar Estilo Cyberpunk / Neón */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { 
    background: oklch(var(--b3)); 
    border-left: 1px solid oklch(var(--p) / 0.3); 
}
::-webkit-scrollbar-thumb { 
    background: repeating-linear-gradient(45deg, oklch(var(--p)), oklch(var(--p)) 4px, oklch(var(--p) / 0.6) 4px, oklch(var(--p) / 0.6) 8px);
    border: 2px solid oklch(var(--b3)); 
    border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover { 
    background: repeating-linear-gradient(45deg, oklch(var(--a)), oklch(var(--a)) 4px, oklch(var(--a) / 0.6) 4px, oklch(var(--a) / 0.6) 8px);
}
::-webkit-scrollbar-corner { background: oklch(var(--b3)); }

/* Partículas Flotantes (Flujo de Datos) */
.particle {
    position: absolute;
    background-color: oklch(var(--p));
    box-shadow: 0 0 8px oklch(var(--p));
    bottom: -10px;
    pointer-events: none;
    animation: floatUp var(--duration) linear infinite;
    animation-delay: var(--delay);
    left: var(--left);
    width: var(--size);
    height: var(--size);
}
@keyframes floatUp {
    0% { transform: translateY(0); opacity: 0; }
    10% { opacity: 0.8; }
    90% { opacity: 0.3; }
    100% { transform: translateY(-100vh); opacity: 0; }
}

/* Partículas en estado de Hackeo (Rojo Neón) */
#cyber-particles.hacked-particles .particle {
    background-color: oklch(var(--er)) !important;
    box-shadow: 0 0 20px oklch(var(--er)) !important;
}

/* Reflejo de Miniaturas (Carrusel) */
.reflect-bottom {
    -webkit-box-reflect: below 2px linear-gradient(to bottom, transparent, transparent 60%, rgba(255,255,255,0.3));
}

/* Efecto de destello interno (Glare) para botones */
@keyframes btn-glare {
    0% { left: -100%; }
    50%, 100% { left: 200%; }
}
.animate-btn-glare {
    animation: btn-glare 2s infinite;
}

/* Lluvia Digital / Cyber Confetti */
@keyframes cyber-rain {
    0% { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
    100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}
.cyber-drop {
    position: fixed;
    top: -10vh;
    color: oklch(var(--p)); /* Hereda el color principal del tema activo */
    pointer-events: none;
    z-index: 99999; /* Por encima de todo, incluyendo el modal */
    text-shadow: 0 0 10px oklch(var(--p));
    animation: cyber-rain linear forwards;
}

/* Alarma Roja del Sistema (Easter Egg) */
@keyframes system-alarm {
    0%, 100% { background-color: rgba(255, 0, 0, 0); box-shadow: inset 0 0 0px rgba(255, 0, 0, 0); }
    50% { background-color: rgba(255, 0, 0, 0.15); box-shadow: inset 0 0 100px rgba(255, 0, 0, 0.3); }
}
.animate-system-alarm {
    animation: system-alarm 0.6s infinite ease-in-out;
}

/* Animaciones On-Scroll para Proyectos */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Escáner Láser Vertical para botones */
@keyframes laser-scan {
    0% { top: -10%; opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { top: 110%; opacity: 0; }
}
.animate-laser-scan {
    animation: laser-scan 2s linear infinite;
}

/* Efecto Rebote Escalonado para Badges (Skills) */
.reveal-bounce {
    opacity: 0;
    transform: scale(0.5) translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reveal-bounce.is-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Estela Luminosa (Despegue) para botón Volver Arriba */
.btn-launch-trail::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 0;
    background: linear-gradient(to bottom, oklch(var(--p)), transparent);
    filter: blur(2px);
    z-index: -1;
    transition: height 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 0;
    pointer-events: none;
}
.btn-launch-trail.is-launching::after {
    height: 40vh; /* Largo de la estela luminosa */
    opacity: 1;
    animation: thrusterFlicker 0.05s infinite alternate;
}
.btn-launch-trail.is-launching {
    animation: launchShake 0.1s infinite;
}
@keyframes thrusterFlicker {
    0% { height: 35vh; opacity: 0.7; }
    100% { height: 45vh; opacity: 1; }
}
@keyframes launchShake {
    0%, 100% { margin-bottom: 0; margin-right: 0; }
    25% { margin-bottom: 1px; margin-right: -1px; }
    50% { margin-bottom: -1px; margin-right: 1px; }
    75% { margin-bottom: -1px; margin-right: -1px; }
}

/* Efecto Sacudida (Screen Shake) */
@keyframes screenShake {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-3px, 2px); }
    40% { transform: translate(3px, -2px); }
    60% { transform: translate(-3px, -2px); }
    80% { transform: translate(3px, 2px); }
}
.shake-active {
    animation: screenShake 0.25s ease-in-out;
}

/* Resplandor infinito para el botón de contacto */
@keyframes contact-glow {
    0%, 100% { box-shadow: 0 0 10px oklch(var(--s) / 0.4); }
    50% { box-shadow: 0 0 25px oklch(var(--s) / 0.9), 0 0 40px oklch(var(--s) / 0.4); }
}
.animate-contact-glow {
    /* Dura 2 segundos, ciclo infinito y suavizado */
    animation: contact-glow 2s infinite ease-in-out;
}

/* Resplandores de Redes Sociales (Hover) */
@keyframes glow-p {
    0%, 100% { box-shadow: 0 0 10px oklch(var(--p) / 0.2), inset 0 0 5px oklch(var(--p) / 0.1); }
    50% { box-shadow: 0 0 25px oklch(var(--p) / 0.6), inset 0 0 15px oklch(var(--p) / 0.2); }
}
@keyframes glow-in {
    0%, 100% { box-shadow: 0 0 10px oklch(var(--in) / 0.2), inset 0 0 5px oklch(var(--in) / 0.1); }
    50% { box-shadow: 0 0 25px oklch(var(--in) / 0.6), inset 0 0 15px oklch(var(--in) / 0.2); }
}
@keyframes glow-er {
    0%, 100% { box-shadow: 0 0 10px oklch(var(--er) / 0.2), inset 0 0 5px oklch(var(--er) / 0.1); }
    50% { box-shadow: 0 0 25px oklch(var(--er) / 0.6), inset 0 0 15px oklch(var(--er) / 0.2); }
}

.hover-glow-p:hover { animation: glow-p 1.5s infinite ease-in-out; z-index: 10; }
.hover-glow-in:hover { animation: glow-in 1.5s infinite ease-in-out; z-index: 10; }
.hover-glow-er:hover { animation: glow-er 1.5s infinite ease-in-out; z-index: 10; }

/* Onda Expansiva Visual (Click Shockwave) */
.click-shockwave {
    position: fixed;
    width: 300px; height: 300px;
    margin-top: -150px; margin-left: -150px; /* Centra el anillo en el cursor */
    border-radius: 50%;
    border: 2px solid oklch(var(--p));
    box-shadow: 0 0 20px oklch(var(--p)), inset 0 0 20px oklch(var(--p) / 0.5);
    pointer-events: none;
    z-index: 5;
    animation: shockwaveExpand 0.6s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}
@keyframes shockwaveExpand {
    0% { transform: scale(0); opacity: 1; border-width: 8px; }
    100% { transform: scale(1); opacity: 0; border-width: 1px; }
}