﻿/* =====================================================
   Landing Page Background & Layout
   ===================================================== */

html, body {
    height: 100%;
    margin: 0;
}

/* -------------------------------
   Background image
-------------------------------- */
body {
    background-image: url('/assets/media/backgrounds/landing.png');
    background-repeat: no-repeat;
    /* Desktop: fill screen */
    background-size:cover;
    background-position: center ;
    background-color: #e5e7eb;
}

/* Dark mode fallback */
html.dark body {
    background-color: #0b1220;
}

/* -------------------------------
   Mobile optimization
-------------------------------- */
@media (max-width: 768px) {
    body {
        /* Prevent top cropping on tall screens */
        background-size: cover;
        background-position: center top;
    }
}

/* -------------------------------
   Sign-in button positioning
-------------------------------- */
.landing-login {
    position: absolute;
    top: 1rem;
    right: 0;
    z-index: 10;
}

@media (min-width: 640px) {
    .landing-login {
        top: 1.5rem;
        right: 1.5rem;
    }
}
/* =========================================
   Landing Bee Icon
   ========================================= */
/* =========================================
   Bee floating animation
   ========================================= */
@keyframes bee-float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(12px);
    }

    100% {
        transform: translateY(0);
    }
}

.bee-animate {
    animation: bee-float 4s ease-in-out infinite;
}
/* =========================================
   Bee circular flight animation
   ========================================= */
@keyframes bee-circle {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(40px, -40px);
    }

    50% {
        transform: translate(80px, 0);
    }

    75% {
        transform: translate(40px, 40px);
    }

    100% {
        transform: translate(0, 0);
    }
}

/* Apply animation */
.bee-fly {
    animation: bee-circle 6s ease-in-out infinite;
}
