/* Custom styles that complement Tailwind */
:root {
    --color-midnight-950: #040a10;
    --color-midnight-900: #081420;
    --color-midnight-800: #0d1f33;
    --color-midnight-700: #142d4a;
    --color-mint-400: #5ec088;
    --color-mint-500: #38a367;
}

/* Ensure smooth rendering on all devices */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Selection color */
::selection {
    background: rgba(94, 192, 136, 0.25);
    color: #0d1f33;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #081420;
}
::-webkit-scrollbar-thumb {
    background: #142d4a;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #1e4066;
}

/* Focus styles for accessibility */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #5ec088;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Prevent layout shift on images */
img {
    max-width: 100%;
    height: auto;
}

/* Ensure hero content is visible immediately */
#hero {
    background: linear-gradient(160deg, #040a10 0%, #081420 40%, #0d1f33 100%);
}

/* Mobile menu transition */
#mobile-menu {
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
    opacity: 0;
}
#mobile-menu.open {
    max-height: 400px;
    opacity: 1;
}

/* Smooth image loading */
img {
    transition: opacity 0.3s ease;
}
img[loading="lazy"] {
    opacity: 0;
}
img[loading="lazy"].loaded {
    opacity: 1;
}