/* Kivo.Skin Premium Editorial CSS - Hybrid Theme System */

/* --- Animations --- */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes letterSpacing {
    from {
        letter-spacing: -0.05em;
    }

    to {
        letter-spacing: 0.05em;
    }
}

/* Page Entry Animation */
body {
    animation: fadeIn 0.8s ease-out;
}

main>* {
    animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
    /* Start hidden */
    animation-delay: 0.2s;
}

/* Logo Animation */
.logo-anim {
    transition: all 0.5s ease;
}

.logo-anim:hover {
    letter-spacing: 0.05em;
    transform: scale(1.02);
}

/* --- Theme Variables --- */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --text-primary: #111827;
    --text-secondary: #4b5563;
    --border-color: #e5e7eb;
    --nav-bg: rgba(255, 255, 255, 0.95);
    --accent: #2aa4a6;
}

/* --- Dark Mode Overrides --- */
.theme-dark {
    --bg-primary: #000000;
    --bg-secondary: #111111;
    --text-primary: #f3f4f6;
    --text-secondary: #9ca3af;
    --border-color: #333333;
    --nav-bg: rgba(0, 0, 0, 0.95);
}

/* Apply Variables to Elements */
body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* Deep Override for Tailwind Utility Classes in Dark Mode */
.theme-dark .bg-white {
    background-color: var(--bg-primary) !important;
}

.theme-dark .bg-gray-50 {
    background-color: var(--bg-secondary) !important;
}

.theme-dark .bg-gray-100 {
    background-color: #1a1a1a !important;
}

.theme-dark .text-gray-900,
.theme-dark .text-gray-800,
.theme-dark .text-black {
    color: var(--text-primary) !important;
}

.theme-dark .text-gray-600,
.theme-dark .text-gray-500 {
    color: var(--text-secondary) !important;
}

.theme-dark .border-gray-100,
.theme-dark .border-gray-200,
.theme-dark .border-black {
    border-color: var(--border-color) !important;
}

.theme-dark nav {
    background-color: var(--nav-bg) !important;
    border-color: var(--border-color) !important;
}

/* Button Inversion */
.theme-dark .bg-black {
    background-color: #ffffff !important;
    color: #000000 !important;
}

.theme-dark .bg-black:hover {
    background-color: var(--accent) !important;
    color: #ffffff !important;
}

/* --- Modal & Utilities --- */
#wip-modal,
#about-modal {
    transition: opacity 0.3s ease;
}

/* Remove default footer */
body>footer {
    display: none !important;
}

#manage {
    opacity: 0.1;
    transition: opacity 0.3s;
}

#manage:hover {
    opacity: 1;
}

/* Cosmic Pop-In Animation */
@keyframes cosmicEntrance {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }
}

.animate-cosmic {
    animation: cosmicEntrance 0.6s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}