/* Custom styles to complement Tailwind CSS */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* Gradient text animation */
@keyframes gradient-shift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.animate-gradient {
    background-size: 200% 200%;
    animation: gradient-shift 3s ease infinite;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #3b82f6, #8b5cf6);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #2563eb, #7c3aed);
}

/* Selection color */
::selection {
    background-color: #3b82f6;
    color: white;
}

/* Focus styles */
*:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Loading animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* CytosAI Brand Colors */
.cytosai-neon-cyan {
    color: #31EFFF;
}

.cytosai-bg-neon-cyan {
    background-color: #31EFFF;
}

.cytosai-deep-navy {
    color: #0A0F1F;
    background-color: #0A0F1F;
}

.cytosai-glowing-magenta {
    color: #FF4DF2;
}

.cytosai-bg-glowing-magenta {
    background-color: #FF4DF2;
}

.cytosai-electro-green {
    color: #6CFFB3;
}

.cytosai-bg-electro-green {
    background-color: #6CFFB3;
}

/* CytosAI Gradients */
.cytosai-gradient-primary {
    background: linear-gradient(135deg, #31EFFF 0%, #6CFFB3 50%, #FF4DF2 100%);
}

.cytosai-gradient-glow {
    background: linear-gradient(135deg, #31EFFF 0%, #6CFFB3 100%);
}

.cytosai-gradient-mutation {
    background: linear-gradient(135deg, #FF4DF2 0%, #31EFFF 100%);
}

/* Glow effects for CytosAI */
.cytosai-glow {
    box-shadow: 0 0 20px rgba(49, 239, 255, 0.5), 0 0 40px rgba(49, 239, 255, 0.3);
}

.cytosai-glow-magenta {
    box-shadow: 0 0 20px rgba(255, 77, 242, 0.5), 0 0 40px rgba(255, 77, 242, 0.3);
}

.cytosai-glow-green {
    box-shadow: 0 0 20px rgba(108, 255, 179, 0.5), 0 0 40px rgba(108, 255, 179, 0.3);
}

/* Text glow effects */
.cytosai-text-glow {
    text-shadow: 0 0 10px rgba(49, 239, 255, 0.8), 0 0 20px rgba(49, 239, 255, 0.5);
}

/* CytosAI Hover states */
a.cytosai-hover:hover {
    color: #31EFFF !important;
}

a.cytosai-hover-bg:hover {
    background-color: #31EFFF !important;
}

a.cytosai-hover-magenta:hover {
    color: #FF4DF2 !important;
}

a.cytosai-hover-green:hover {
    color: #6CFFB3 !important;
}

/* LSI Brand Colors (Enterprise/Academic) */
.lsi-slate-black {
    color: #0C0C0C;
    background-color: #0C0C0C;
}

.lsi-bio-gold {
    color: #E0B23F;
}

.lsi-bg-bio-gold {
    background-color: #E0B23F;
}

.lsi-ultramarine-blue {
    color: #2742F7;
}

.lsi-bg-ultramarine-blue {
    background-color: #2742F7;
}

.lsi-graphite-gray {
    color: #2C2C2C;
    background-color: #2C2C2C;
}

/* LSI Gradients */
.lsi-gradient-primary {
    background: linear-gradient(135deg, #2742F7 0%, #E0B23F 100%);
}

.lsi-gradient-academic {
    background: linear-gradient(135deg, #2742F7 0%, #0C0C0C 100%);
}

.lsi-gradient-prestige {
    background: linear-gradient(135deg, #E0B23F 0%, #2742F7 100%);
}

/* LSI Hover states */
a.lsi-hover-blue:hover {
    color: #2742F7 !important;
}

a.lsi-hover-gold:hover {
    color: #E0B23F !important;
}

a.lsi-hover-bg-blue:hover {
    background-color: #2742F7 !important;
}

a.lsi-hover-bg-gold:hover {
    background-color: #E0B23F !important;
}

/* ==============================================
   Page Wrapper & Transition Animation
   ============================================== */

.page-wrapper {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Page transition animation */
@keyframes page-flip-out {
    0% {
        transform: perspective(1000px) rotateY(0deg);
        opacity: 1;
    }
    100% {
        transform: perspective(1000px) rotateY(-90deg);
        opacity: 0;
    }
}

.page-wrapper.flipping-out {
    animation: page-flip-out 0.4s ease-in forwards;
    pointer-events: none;
}

/* ==============================================
   React Component Containers
   ============================================== */

#digital-cell-section,
#cell-engine-architecture-section {
    display: block !important;
    width: 100%;
    min-height: 600px;
    position: relative;
    z-index: 10;
    isolation: isolate;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Specific LSI container styling */
#cell-engine-architecture-section {
    background: linear-gradient(135deg, #0C0C0C 0%, #2C2C2C 50%, #0C0C0C 100%);
}

/* Ensure React-rendered section is visible and doesn't clip */
#digital-cell-section > section,
#cell-engine-architecture-section > section {
    position: relative;
    z-index: 1;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
}

/* Ensure Three.js canvas is visible and interactive */
#digital-cell-section canvas,
#cell-engine-architecture-section canvas {
    display: block !important;
    position: relative !important;
    z-index: 5 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* ==============================================
   Slider Styles
   ============================================== */

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    border-radius: 4px;
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #31EFFF 0%, #6CFFB3 50%, #FF4DF2 100%);
    cursor: pointer;
    box-shadow: 0 0 10px rgba(49, 239, 255, 0.8), 0 0 20px rgba(49, 239, 255, 0.5);
    transition: all 0.2s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 15px rgba(49, 239, 255, 1), 0 0 30px rgba(49, 239, 255, 0.7);
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #31EFFF 0%, #6CFFB3 50%, #FF4DF2 100%);
    cursor: pointer;
    border: none;
    box-shadow: 0 0 10px rgba(49, 239, 255, 0.8), 0 0 20px rgba(49, 239, 255, 0.5);
    transition: all 0.2s ease;
}

input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 15px rgba(49, 239, 255, 1), 0 0 30px rgba(49, 239, 255, 0.7);
}

input[type="range"]::-ms-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #31EFFF 0%, #6CFFB3 50%, #FF4DF2 100%);
    cursor: pointer;
    border: none;
    box-shadow: 0 0 10px rgba(49, 239, 255, 0.8), 0 0 20px rgba(49, 239, 255, 0.5);
}