/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }

/* ── Floating card animations ── */
.floating-card {
    animation: float1 4s ease-in-out infinite;
}
.floating-card-2 {
    animation: float2 5s ease-in-out infinite;
}
@keyframes float1 {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}
@keyframes float2 {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

/* ── Scroll reveal (progressive enhancement) ── */
@media (prefers-reduced-motion: no-preference) {
    .scroll-reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .scroll-reveal.revealed {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Fallback: always visible if JS disabled or reduced motion */
@media (prefers-reduced-motion: reduce) {
    .scroll-reveal {
        opacity: 1;
        transform: none;
    }
}

/* ── Back to top ── */
.back-to-top {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* ── Mobile menu animation ── */
#mobileMenu {
    transition: max-height 0.3s ease, opacity 0.3s ease;
}
#mobileMenu.hidden {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}
#mobileMenu:not(.hidden) {
    max-height: 400px;
    opacity: 1;
}

/* ── Selection color ── */
::selection {
    background: #065f46;
    color: #fef3c7;
}