/* Modern Blue Banana Farm Styles */

/* CSS Variables for Modern Color Palette */
:root {
    --deep-black: #000000;
    --charcoal: #1F2937;
    --slate: #374151;
    --bbf-blue: #1E90FF;
    --bbf-purple: #9370DB;
    --bbf-yellow: #FFE135;
    --bbf-green: #32CD32;
    --bbf-orange: #FF7F50;
    --bbf-sky: #87CEEB;
    --glass-white: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-hover: rgba(255, 255, 255, 0.1);
}

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

/* Custom scrollbar with modern colors */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--charcoal);
}

::-webkit-scrollbar-thumb {
    background: var(--bbf-blue);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--bbf-purple);
}

/* Enhanced glass morphism effects */
.glass-card {
    background: var(--glass-white);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.glass-card:hover {
    background: var(--glass-hover);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Backdrop blur fallback for older browsers */
@supports not (backdrop-filter: blur(10px)) {
    .backdrop-blur-lg {
        background: var(--deep-black) !important;
        opacity: 0.9;
    }
}

/* Enhanced focus states for accessibility */
button:focus,
a:focus {
    outline: 2px solid var(--bbf-blue);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(30, 144, 255, 0.2);
}

/* Smooth transitions for all interactive elements */
button,
a,
.transition-all {
    transition: all 0.2s ease-in-out;
}

/* Loading animation enhancement */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
        color: var(--bbf-blue);
    }
    50% {
        opacity: 0.6;
        color: var(--bbf-purple);
    }
}

#splashText {
    animation: pulse 2s ease-in-out infinite;
    text-shadow: 0 0 20px rgba(30, 144, 255, 0.5);
}

/* Responsive text scaling */
/* Flip card styles */
.flip-card {
    perspective: 1000px;
    height: 280px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.flip-card-back {
    transform: rotateY(180deg);
}

@media (max-width: 640px) {
    .text-5xl {
        font-size: 2.5rem;
    }
    .text-7xl {
        font-size: 3.5rem;
    }
    .flip-card {
        height: 320px;
    }
}