/* ========================================
   THEMES - Light, Dark, Psycho
   ======================================== */

/* Psycho Mode Base */
[data-theme="psycho"] body {
    background: linear-gradient(45deg, #120338, #1a0845, #0d1b4d, #120338);
    background-size: 400% 400%;
    animation: psychoGradient 20s ease infinite;
}

@keyframes psychoGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Psycho Mode Content Box */
[data-theme="psycho"] .content-box {
    border: 2px solid transparent;
    background-image: 
        linear-gradient(var(--bg-primary), var(--bg-primary)),
        linear-gradient(90deg, #00FFD4, #FF2E97, #FFD700, #00FFD4);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    animation: rainbowBorder 3s linear infinite;
}

@keyframes rainbowBorder {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* Psycho Mode Hovers */
[data-theme="psycho"] .entry-item:hover,
[data-theme="psycho"] .category-link:hover,
[data-theme="psycho"] .subcategory-link:hover,
[data-theme="psycho"] .modal-category-link:hover,
[data-theme="psycho"] .modal-subcategory-link:hover,
[data-theme="psycho"] .header-left:hover,
[data-theme="psycho"] .lang-selector:hover,
[data-theme="psycho"] .dark-mode-toggle:hover,
[data-theme="psycho"] .modal-close:hover,
[data-theme="psycho"] .modal-login:hover,
[data-theme="psycho"] .back-button:hover,
[data-theme="psycho"] .login-link:hover {
    color: var(--accent);
    text-shadow: 0 0 20px var(--accent), 0 0 40px var(--accent);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Psycho Mode Buttons */
[data-theme="psycho"] .action-btn:hover,
[data-theme="psycho"] .submit-btn:hover {
    background: linear-gradient(90deg, #FF2E97, #00FFD4, #FFD700);
    background-size: 200% 100%;
    animation: shimmer 2s linear infinite;
    border-color: var(--accent);
    box-shadow: 0 0 20px var(--accent);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes shimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* Psycho Mode Shadows */
[data-theme="psycho"] .subcategories,
[data-theme="psycho"] .login-box {
    box-shadow: 0 0 30px rgba(0, 255, 212, 0.3);
}

/* Psycho Mode Floating Button */
[data-theme="psycho"] .floating-menu-btn {
    box-shadow: 0 0 30px var(--accent);
    animation: floatPulse 3s ease-in-out infinite;
}

@keyframes floatPulse {
    0%, 100% { 
        transform: translateY(0) scale(1);
        box-shadow: 0 0 30px var(--accent);
    }
    50% { 
        transform: translateY(-5px) scale(1.05);
        box-shadow: 0 0 50px var(--accent);
    }
}

/* Psycho Mode Toggle Button */
[data-theme="psycho"] .dark-mode-toggle {
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.1); }
}

/* Chromatic Aberration on Main Title */
[data-theme="psycho"] .main-title {
    animation: chromatic 5s ease-in-out infinite;
}

@keyframes chromatic {
    0%, 100% {
        text-shadow: 
            2px 2px 0 #FF2E97,
            -2px -2px 0 #00FFD4;
    }
    50% {
        text-shadow: 
            -2px -2px 0 #FF2E97,
            2px 2px 0 #00FFD4;
    }
}

/* Psycho Mode Transitions */
[data-theme="psycho"] * {
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

/* ========================================
   INTRO ANIMATION
   ======================================== */

/* Contenedor del logo - ligeramente más pequeño, alineado con línea superior del título */
.intro-logo-container {
    position: absolute;
    width: clamp(4.5rem, 16vw, 10.5rem);
    height: clamp(4.5rem, 16vw, 10.5rem);
    top: 28%;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
}

/* Logo con animación 2D de rotación - colores según tema */
.intro-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Modo oscuro: logo en blanco - aplicado al contenedor */
[data-theme="dark"] .intro-logo-container {
    filter: invert(1) brightness(10) !important;
}

/* Modo psycho: logo en magenta (#FF2E97) - color del hover */
[data-theme="psycho"] .intro-logo-container {
    filter: brightness(0) saturate(100%) invert(25%) sepia(80%) saturate(5000%) hue-rotate(300deg) brightness(1.2) !important;
}

/* Animación activa - duración 3.5s más lenta */
.intro-logo-container.animate {
    animation: logoFlyAcross2D 3.5s ease-in-out forwards;
}

.intro-logo-container.animate .intro-logo {
    animation: rotate2D 3.5s ease-in-out forwards;
}

/* Título oculto inicialmente, aparece después de que pasa el logo */
.main-title {
    opacity: 0;
}

.main-title.animate {
    animation: titleAppear 3.5s ease-in-out forwards;
}

/* Logo entra desde la derecha, rota en 2D, sale por izquierda */
@keyframes logoFlyAcross2D {
    0% {
        left: calc(100% + 150px);
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        left: -150px;
        opacity: 0;
    }
}

/* Rotación 2D inversa */
@keyframes rotate2D {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-720deg);
    }
}

/* Título aparece después de que el logo pasa */
@keyframes titleAppear {
    0%, 60% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Ocultar logo después de la animación */
.intro-logo-container.complete {
    display: none;
}

/* Responsive para mobile */
@media (max-width: 768px) {
    .intro-logo-container {
        width: clamp(7rem, 26vw, 16rem);
        height: clamp(7rem, 26vw, 16rem);
        top: 25%;
    }
    
    @keyframes logoFlyAcross2D {
        0% {
            left: calc(100% + 100px);
            opacity: 1;
        }
        70% {
            opacity: 1;
        }
        100% {
            left: -100px;
            opacity: 0;
        }
    }
}