@font-face {
    font-family: 'Anime Ace';
    src: url('/fonts/animeace2_bld.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* Animaciones básicas */
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* Clases de animación */
.fade-in {
    animation: fadeIn 0.5s ease-in-out forwards;
}

.slide-in-left {
    animation: slideInLeft 0.6s ease-out forwards;
}

.slide-in-right {
    animation: slideInRight 0.6s ease-out forwards;
}

.bounce {
    animation: bounce 2s ease infinite;
}

.float {
    animation: float 3s ease-in-out infinite;
}

/* Animaciones para elementos al hacer scroll */
.reveal {
    opacity: 0;
    transition: all 0.8s ease;
}

.reveal.active {
    opacity: 1;
}

.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s ease;
}

.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s ease;
}

.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

/* Efecto de escala al hacer clic */
.clicked {
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

/* Al pasar el mouse por encima del botón */
.social-button:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Fondo general */
body.dark {
    font-family: 'Anime Ace', sans-serif;
    background-color: #1a202c; /* Oscuro */
    color: #f7fafc; /* Texto claro */
}

/* Header en modo oscuro */
body.dark .hero,
body.dark header.hero,
body.dark .hero.bg-white {
    background: linear-gradient(to right, #4a5568, #2d3748) !important; /* Gradiente oscuro */
    color: #f7fafc !important;
}

/* Navbar en modo oscuro */
body.dark .navbar,
body.dark nav,
body.dark nav.bg-white {
    background-color: #2d3748 !important;
    color: #f7fafc !important;
}
/* Modifica el elemento que contiene al "Azukuki" en el nav */
body.dark .text-purple-600,
body.dark #easter-egg-title{
    color: #9f7aea !important;
}
/*Letras en modo oscuro */
body.dark p{
    color: #e2e8f0;
}
body.dark .bg-gray-100 {
    background-color: #4a5568;
    color: #f7fafc;
}

body.dark .bg-gray-100 p {
    color: #f7fafc; /* Textos claros en modo oscuro */
}

body.dark .bg-purple-100 {
    background-color: #6b46c1;
    color: #f7fafc;
}

body.dark .bg-purple-100 p{
    color: #f7fafc;
}
/* Enlaces */
body.dark a {
    color: #9f7aea;
}
/*Titulos */
body.dark h2 {
    color: #9f7aea;
}
/* Galería */
body.dark .gallery img {
    filter: brightness(95%);
}

/* Botones en modo oscuro */
body.dark .btn,
body.dark .social-button {
    background-color: #6b46c1; /* Botón morado */
    color: white;
}

/* Botones hover */
body.dark .btn:hover,
body.dark .social-button:hover {
    background-color: #553c9a; /* Hover más oscuro */
}

/* Footer */
body.dark .footer {
    background-color: #2d3748;
    color: #f7fafc;
}

/* Modo oscuro para la sección de portafolio */
body.dark .portfolio {
    background-color: #1a202c; /* Fondo oscuro */
    color: #f7fafc; /* Texto claro */
}

/* Modo oscuro para la sección de Ko-fi */
body.dark .kofi-section {
    background-color: #1a202c; /* Fondo oscuro */
    color: #f7fafc; /* Texto claro */
}

/* Asegurar que los textos y marcos tengan un contraste adecuado */
body.dark .kofi-section h2 {
    color: #9f7aea; /* Texto claro */
}

body.dark iframe#kofiframe {
    background: #2d3748; /* Fondo oscuro para el iframe */
}

/* Modo oscuro para la sección de redes sociales */
body.dark .social {
    background-color: #1a202c; /* Fondo oscuro */
    color: #f7fafc; /* Texto claro */
}

/* Botones en modo oscuro */
body.dark .social .social-button {
    background-color: #4a5568; /* Fondo oscuro para los botones */
    color: #f7fafc; /* Texto claro */
}

/* Efectos hover en modo oscuro */
body.dark .social .social-button:hover {
    background-color: #2d3748; /* Fondo más oscuro en hover */
    color: #e2e8f0; /* Texto ligeramente más claro */
}

body {
    font-family: 'Anime Ace', sans-serif;
    font-size: 16px;
    background-color: #f7fafc; /* Fondo blanco */
    color: #111111; /* Texto oscuro */
}


/* Modo oscuro para la sección de preguntas frecuentes */
body.dark #faq {
    background-color: #2d3748; /* Fondo oscuro */
    color: #f7fafc; /* Texto claro */
}
/* Ajusta el contenedor de preguntas frecuentes*/
body.dark #chat-container {
    color: #f7fafc;
}
/* Ajusta los backgrounds de los mensajes del chat*/
body.dark .bg-gray-100 {
    background-color: #4a5568;
}
body.dark .bg-purple-100 {
    background-color: #6b46c1
}
/* Modo oscuro para la sección de about */
body.dark main,
body.dark #about,
body.dark .about,
body.dark section.bg-gray-50,
body.dark section.bg-white {
    background-color: #1a202c !important;
    color: #f7fafc;
}

body.dark .max-w-4xl.mx-auto.bg-white {
    background-color: #2d3748 !important;
    color: #f7fafc;
}

/* Estilos para partículas y conectores entre secciones */
.particle-container {
    position: relative;
    height: 50px;
    margin-top: -25px;
    margin-bottom: -25px;
    z-index: 1;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #9f7aea;
    opacity: 0.6;
    filter: blur(1px);
}

body.dark .particle {
    background-color: #805ad5;
    opacity: 0.8;
}

/* Conectores visuales entre secciones */
.section-connector {
    height: 60px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.section-connector::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, #9f7aea, transparent);
    transform: translateX(-50%);
}

.section-connector::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #9f7aea;
    transform: translateX(-50%) translateY(50%);
    box-shadow: 0 0 10px #9f7aea;
}

body.dark .section-connector::before {
    background: linear-gradient(to bottom, transparent, #805ad5, transparent);
}

body.dark .section-connector::after {
    background-color: #805ad5;
    box-shadow: 0 0 10px #805ad5;
}