/* ==========================================
   FEATURE: EMS AMBULANCE - FULLSCREEN
========================================== */

.ems-ambulance-animation{
    position:fixed;
    right:-520px;
    left:auto;
    bottom:11vh;
    width:430px;
    height:170px;
    pointer-events:none;
    z-index:6;
    animation:emsAmbulanceDrive 5.2s cubic-bezier(.16,.84,.24,1) forwards;
}

.ems-ambulance{
    position:absolute;
    left:0;
    bottom:28px;
    width:430px;
    height:128px;
    filter:drop-shadow(0 26px 28px rgba(0,0,0,.72));
}

.ems-back-box{
    position:absolute;
    left:120px;
    top:18px;
    width:250px;
    height:92px;
    border-radius:8px 18px 16px 8px;
    background:linear-gradient(180deg,#fff,#e6e6e6 62%,#cfcfcf);
    border:2px solid rgba(255,255,255,.32);
}

.ems-back-box::before{
    content:"";
    position:absolute;
    inset:8px;
    border:1px solid rgba(0,0,0,.12);
    border-radius:6px 14px 12px 6px;
}

.ems-front-cab{
    position:absolute;
    left:42px;
    top:42px;
    width:112px;
    height:68px;
    border-radius:34px 8px 10px 20px;
    background:linear-gradient(180deg,#fff,#dedede 70%,#c9c9c9);
    border:2px solid rgba(255,255,255,.32);
    clip-path:polygon(0 45%,26% 0,100% 0,100% 100%,0 100%);
}

.ems-roof{
    position:absolute;
    left:138px;
    top:6px;
    width:210px;
    height:18px;
    border-radius:10px 14px 0 0;
    background:linear-gradient(180deg,#f7f7f7,#d8d8d8);
}

.ems-windshield,
.ems-side-window,
.ems-rear-window{
    position:absolute;
    background:linear-gradient(135deg,#1c2a36,#05070a);
    box-shadow:inset 0 0 12px rgba(0,120,255,.25);
}

.ems-windshield{
    left:68px;
    top:47px;
    width:42px;
    height:34px;
    clip-path:polygon(18% 0,100% 0,100% 100%,0 100%);
}

.ems-side-window{
    left:164px;
    top:34px;
    width:58px;
    height:32px;
    border-radius:4px;
}

.ems-rear-window{
    right:78px;
    top:34px;
    width:48px;
    height:32px;
    border-radius:4px;
}

.ems-red-stripe{
    position:absolute;
    left:122px;
    top:72px;
    width:246px;
    height:14px;
    background:#d71920;
    box-shadow:0 0 16px rgba(215,25,32,.35);
}

.ems-cross{
    position:absolute;
    left:248px;
    top:32px;
    width:48px;
    height:48px;
    border-radius:6px;
    background:#d71920;
    color:#fff;
    font-size:37px;
    font-weight:900;
    line-height:48px;
    text-align:center;
    box-shadow:0 0 20px rgba(215,25,32,.45);
}

.ems-label{
    position:absolute;
    left:170px;
    top:88px;
    color:#d71920;
    font-size:26px;
    font-weight:900;
    letter-spacing:4px;
}

.ems-front-light{
    position:absolute;
    left:38px;
    top:82px;
    width:18px;
    height:9px;
    border-radius:999px;
    background:#e6fbff;
    box-shadow:
        0 0 18px #9be8ff,
        -52px 0 70px 22px rgba(120,210,255,.5);
}

.ems-rear-light{
    position:absolute;
    right:54px;
    top:82px;
    width:16px;
    height:10px;
    border-radius:999px;
    background:#ff2222;
    box-shadow:0 0 20px rgba(255,0,0,.9);
}

.ems-siren{
    position:absolute;
    left:210px;
    top:-2px;
    width:76px;
    height:14px;
    display:flex;
    background:#111;
    border-radius:999px;
}

.ems-siren span:first-child{
    width:50%;
    background:#0088ff;
    border-radius:999px 0 0 999px;
    animation:emsBlue .28s infinite;
}

.ems-siren span:last-child{
    width:50%;
    background:#ff1f32;
    border-radius:0 999px 999px 0;
    animation:emsRed .28s infinite;
}

.ems-wheel{
    position:absolute;
    bottom:-16px;
    width:54px;
    height:54px;
    border-radius:50%;
    background:radial-gradient(circle,#151515 0 38%,#050505 39% 100%);
    border:7px solid #292929;
    box-shadow:
        inset 0 0 0 5px #080808,
        0 8px 16px rgba(0,0,0,.75);
    animation:emsWheelSpin .34s linear infinite;
}

.ems-wheel i{
    position:absolute;
    inset:11px;
    border-radius:50%;
    border:3px dashed rgba(255,255,255,.25);
}

.ems-wheel-back{
    left:128px;
}

.ems-wheel-front{
    right:72px;
}

.ems-road-glow{
    position:absolute;
    left:70px;
    bottom:0;
    width:310px;
    height:34px;
    border-radius:50%;
    background:linear-gradient(90deg,rgba(255,0,0,.55),rgba(0,120,255,.35));
    filter:blur(20px);
    opacity:.75;
    animation:emsGlow .28s infinite;
}

.ems-speed-lines{
    position:absolute;
    right:-130px;
    top:58px;
    width:300px;
    height:80px;
    background:
        linear-gradient(90deg,transparent,rgba(255,30,30,.8),transparent),
        linear-gradient(90deg,transparent,rgba(0,140,255,.55),transparent),
        linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
    background-size:100% 4px,100% 4px,100% 3px;
    background-position:0 18px,0 46px,0 68px;
    background-repeat:no-repeat;
    filter:blur(2px);
    opacity:.85;
}

@keyframes emsAmbulanceDrive{
    0%{
        transform:translateX(0) translateY(18px) scale(.86);
        opacity:0;
    }

    8%{
        opacity:1;
    }

    74%{
        transform:translateX(calc(-100vw - 220px)) translateY(0) scale(1);
        opacity:1;
    }

    100%{
        transform:translateX(calc(-100vw - 620px)) translateY(-6px) scale(1);
        opacity:0;
    }
}

@keyframes emsWheelSpin{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}

@keyframes emsBlue{
    0%,100%{
        opacity:1;
        box-shadow:0 0 18px #0088ff,-18px 0 44px rgba(0,120,255,.8);
    }

    50%{
        opacity:.25;
        box-shadow:none;
    }
}

@keyframes emsRed{
    0%,100%{
        opacity:.25;
        box-shadow:none;
    }

    50%{
        opacity:1;
        box-shadow:0 0 18px #ff1f32,18px 0 44px rgba(255,0,35,.85);
    }
}

@keyframes emsGlow{
    0%,100%{opacity:.45;}
    50%{opacity:.95;}
}