/*
 * auth-animations.css
 * Shared animations for Login & Register pages
 */

/* ─────────────────────────────────────────────
   Floating info badges
───────────────────────────────────────────── */
.auth-badge {
    position: absolute;
    background: rgba(255,255,255,.13);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 40px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    z-index: 5;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

    .auth-badge .ab-icon {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        flex-shrink: 0;
    }

.auth-badge-1 {
    top: 18%;
    left: 6%;
    animation: abFloat1 4s ease-in-out infinite;
}

.auth-badge-2 {
    top: 55%;
    left: 4%;
    animation: abFloat2 5s ease-in-out infinite .8s;
}

.auth-badge-3 {
    top: 18%;
    right: 6%;
    animation: abFloat3 4.5s ease-in-out infinite .4s;
}

.auth-badge-4 {
    top: 55%;
    right: 4%;
    animation: abFloat4 5.5s ease-in-out infinite 1.2s;
}

@keyframes abFloat1 {
    0%,100% {
        transform: translateY(0) rotate(-2deg)
    }

    50% {
        transform: translateY(-14px) rotate(2deg)
    }
}

@keyframes abFloat2 {
    0%,100% {
        transform: translateY(0) rotate(1deg)
    }

    50% {
        transform: translateY(-18px) rotate(-1deg)
    }
}

@keyframes abFloat3 {
    0%,100% {
        transform: translateY(-8px) rotate(2deg)
    }

    50% {
        transform: translateY(6px) rotate(-2deg)
    }
}

@keyframes abFloat4 {
    0%,100% {
        transform: translateY(0) rotate(-1deg)
    }

    50% {
        transform: translateY(-12px) rotate(1deg)
    }
}

/* ─────────────────────────────────────────────
   Sparkle dots
───────────────────────────────────────────── */
.auth-sparkle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 3;
}

.auth-sparkle-1 {
    width: 8px;
    height: 8px;
    background: #fff;
    top: 12%;
    left: 22%;
    opacity: .5;
    animation: spk1 3s ease-in-out infinite;
}

.auth-sparkle-2 {
    width: 5px;
    height: 5px;
    background: #0ab39c;
    top: 35%;
    left: 15%;
    opacity: .7;
    animation: spk2 4s ease-in-out infinite 1s;
}

.auth-sparkle-3 {
    width: 6px;
    height: 6px;
    background: #f7b731;
    top: 10%;
    right: 22%;
    opacity: .6;
    animation: spk1 3.5s ease-in-out infinite .5s;
}

.auth-sparkle-4 {
    width: 4px;
    height: 4px;
    background: #fff;
    top: 40%;
    right: 18%;
    opacity: .5;
    animation: spk2 5s ease-in-out infinite 1.5s;
}

@keyframes spk1 {
    0%,100% {
        transform: scale(1);
        opacity: .5
    }

    50% {
        transform: scale(1.8);
        opacity: 1
    }
}

@keyframes spk2 {
    0%,100% {
        transform: translateY(0);
        opacity: .7
    }

    50% {
        transform: translateY(-10px);
        opacity: .3
    }
}

/* ─────────────────────────────────────────────
   Logo pulse
───────────────────────────────────────────── */
.auth-logo img {
    animation: logoPulseAuth 3s ease-in-out infinite;
}

@keyframes logoPulseAuth {
    0%,100% {
        filter: drop-shadow(0 0 4px rgba(10,179,156,.3));
        transform: scale(1);
    }

    50% {
        filter: drop-shadow(0 0 14px rgba(10,179,156,.7));
        transform: scale(1.04);
    }
}

/* ─────────────────────────────────────────────
   Card entrance
───────────────────────────────────────────── */
.auth-page-content .card {
    animation: cardSlideUp .55s cubic-bezier(.22,.68,0,1.2) both;
}

@keyframes cardSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ─────────────────────────────────────────────
   Submit button shimmer
───────────────────────────────────────────── */
.btn-success[type="submit"] {
    position: relative;
    overflow: hidden;
}

    .btn-success[type="submit"]::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 60%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
        animation: btnShimmer 2.5s ease-in-out infinite 1s;
    }

@keyframes btnShimmer {
    0% {
        left: -100%
    }

    60%,100% {
        left: 140%
    }
}

/* ─────────────────────────────────────────────
   Road scene (desktop only)
───────────────────────────────────────────── */
@media (min-width: 1200px) {

    /* Fixed strip at the very bottom of the viewport, behind the form */
    .auth-truck-strip {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1; /* auth-page-content is z-index:2 */
        pointer-events: none;
        height: 130px;
        overflow: visible;
    }

    /* Gray asphalt road */
    .auth-road {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 44px;
        background: linear-gradient(180deg, #5c5e68 0%, #4a4c55 100%);
        border-top: 4px solid #6e707a;
        box-shadow: 0 -4px 20px rgba(0,0,0,.35);
    }
        /* White edge line */
        .auth-road::before {
            content: '';
            position: absolute;
            top: 7px;
            left: 0;
            right: 0;
            height: 2px;
            background: rgba(255,255,255,.18);
        }
        /* Yellow dashed centre line — FIXED, no animation */
        .auth-road::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 4px;
            background: repeating-linear-gradient( 90deg, #f7b731 0px, #f7b731 50px, transparent 50px, transparent 100px );
            transform: translateY(-50%);
        }

    /* ── Scenery: fixed positions spread across the road ── */
    .road-scenery {
        position: absolute;
        bottom: 44px;
        line-height: 1;
        pointer-events: none;
    }

    .road-tree-1 {
        left: 4%;
        font-size: 64px;
    }

    .road-tree-2 {
        left: 22%;
        font-size: 78px;
    }

    .road-tree-3 {
        left: 52%;
        font-size: 58px;
    }

    .road-tree-4 {
        left: 78%;
        font-size: 70px;
    }

    .road-house-1 {
        left: 13%;
        font-size: 68px;
    }

    .road-house-2 {
        left: 37%;
        font-size: 60px;
    }

    .road-house-3 {
        left: 63%;
        font-size: 72px;
    }

    .road-house-4 {
        left: 88%;
        font-size: 56px;
    }

    /* ── Moving delivery vehicles ── */
    .road-mover {
        position: absolute;
        left: 0;
        bottom: 40px;
        line-height: 1;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        filter: drop-shadow(0 3px 6px rgba(0,0,0,.5));
        /* Keep vehicle at 0% keyframe (off-screen right) during its delay */
        animation-fill-mode: backwards;
    }

    .road-truck {
        font-size: 80px;
        animation: roadMove 20s linear infinite 0s backwards;
    }

    .road-lorry {
        font-size: 88px;
        animation: roadMove 24s linear infinite 7s backwards;
    }

    .road-van {
        font-size: 68px;
        animation: roadMove 15s linear infinite 13s backwards;
    }

    .road-man {
        font-size: 60px;
        animation: roadMove 17s linear infinite 4s backwards;
    }
}

@media (max-width: 1199px) {
    .auth-truck-strip,
    .auth-badge {
        display: none !important;
    }
}

/* ─────────────────────────────────────────────
   Road keyframes — defined OUTSIDE @media so
   all browsers resolve them correctly
───────────────────────────────────────────── */
/* Moving vehicles travel right → left across the full viewport */
@keyframes roadMove {
    0% {
        transform: translateX(110vw);
    }

    100% {
        transform: translateX(-15vw);
    }
}