/* ========== CUSTOM STYLES ========== */

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

/* Selection color */
::selection {
    background: rgba(52, 211, 153, 0.3);
    color: #f0fdf4;
}

/* ========== FLOAT ANIMATIONS ========== */
@keyframes float-slow {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes float-medium {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
}

.float-slow {
    animation: float-slow 6s ease-in-out infinite;
}

.float-medium {
    animation: float-medium 4.5s ease-in-out infinite;
}

/* ========== SCROLL REVEAL ========== */
.reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-up {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-left {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-right {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

/* Hidden state for JS-powered reveals */
.js-loaded .reveal,
.js-loaded .reveal-up {
    opacity: 0;
    transform: translateY(30px);
}

.js-loaded .reveal-left {
    opacity: 0;
    transform: translateX(-30px);
}

.js-loaded .reveal-right {
    opacity: 0;
    transform: translateX(30px);
}

/* ========== FAQ ========== */
.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.faq-item.active .faq-content {
    max-height: 200px;
}

/* ========== NAVBAR ========== */
#navbar.scrolled {
    background: rgba(10, 22, 40, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(52, 211, 153, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

/* ========== MOBILE MENU ========== */
#mobileMenu {
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== BUTTON HOVER EFFECTS ========== */
a, button {
    -webkit-tap-highlight-color: transparent;
}

/* ========== CUSTOM SCROLLBAR ========== */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0a1628;
}

::-webkit-scrollbar-thumb {
    background: #1e4078;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #2e5a9f;
}

/* ========== IMAGE LAZY LOAD ========== */
img[loading="lazy"] {
    transition: opacity 0.3s ease;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

img[loading="lazy"]:not(.loaded) {
    opacity: 0;
}