:root{
    --black:#050505;
    --matte:#0b0b0d;
    --gold:#d4af37;
    --gold2:#f6d77a;
    --silver:#c7c7c7;
    --white:#ffffff;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    height:100vh;
    overflow:hidden;
    background:var(--black);
    font-family:'Inter',sans-serif;
}

/* MAIN SPLASH */
.splash{
    position:relative;
    width:100%;
    height:100vh;
    background:
        radial-gradient(circle at 50% 25%, rgba(212,175,55,.18), transparent 28%),
        linear-gradient(180deg,#070707,#000);
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
}

/* MAP BACKGROUND */
.map{
    position:absolute;
    inset:0;
    opacity:.15;
    background-image:
        linear-gradient(30deg, transparent 48%, rgba(255,255,255,.18) 49%, transparent 51%),
        linear-gradient(120deg, transparent 48%, rgba(255,255,255,.14) 49%, transparent 51%);
    background-size:120px 120px;
    animation:mapMove 18s linear infinite;
}

@keyframes mapMove{
    from{background-position:0 0;}
    to{background-position:300px 180px;}
}

/* GOLD ROUTE */
.route{
    position:absolute;
    width:70%;
    height:240px;
    top:38%;
    left:15%;
}

.route svg{
    width:100%;
    height:100%;
    overflow:visible;
}

.route path{
    fill:none;
    stroke:var(--gold);
    stroke-width:4;
    stroke-linecap:round;
    stroke-dasharray:900;
    stroke-dashoffset:900;
    filter:drop-shadow(0 0 12px rgba(212,175,55,.9));
    animation:drawRoute 3.2s ease forwards .8s;
}

@keyframes drawRoute{
    to{stroke-dashoffset:0;}
}

/* PIN */
.pin{
    position:absolute;
    width:36px;
    height:36px;
    border-radius:50% 50% 50% 0;
    background:linear-gradient(145deg,var(--gold2),var(--gold));
    transform:rotate(-45deg);
    box-shadow:0 0 35px rgba(212,175,55,.9);
    animation:pulse 2s infinite;
}

.pin::after{
    content:"";
    position:absolute;
    width:13px;
    height:13px;
    background:#111;
    border-radius:50%;
    top:11px;
    left:11px;
}

.pin.one{top:33%;left:22%;}
.pin.two{top:27%;right:17%;}

@keyframes pulse{
    0%,100%{transform:rotate(-45deg) scale(1);}
    50%{transform:rotate(-45deg) scale(1.15);}
}

/* CONTENT */
.content{
    position:relative;
    z-index:5;
    width:100%;
    max-width:900px;
    text-align:center;
    padding:20px;
}

/* HEADER IMAGE LOGO */
.header-logo-wrap{
    position:relative;
    width:170px;
    height:120px;
    margin:0 auto 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    animation:float 4s ease-in-out infinite;
}

.header-logo-img{
    width:115px;
    height:115px;
    object-fit:contain;
    position:relative;
    z-index:3;
    filter:
        drop-shadow(0 0 18px rgba(212,175,55,.35))
        drop-shadow(0 18px 35px rgba(0,0,0,.7));
}

/* AIR WINDING LINES BEHIND HEADER LOGO */
.air-line{
    position:absolute;
    height:4px;
    border-radius:20px;
    background:linear-gradient(90deg, transparent, var(--gold), transparent);
    left:-20px;
    z-index:1;
    opacity:.9;
    animation:airMove 1.4s linear infinite;
}

.air-line.a1{
    top:34px;
    width:95px;
}

.air-line.a2{
    top:56px;
    width:135px;
    animation-delay:.2s;
}

.air-line.a3{
    top:78px;
    width:75px;
    animation-delay:.4s;
}

@keyframes airMove{
    from{
        transform:translateX(35px);
        opacity:.15;
    }
    to{
        transform:translateX(-45px);
        opacity:1;
    }
}

/* MIDDLE DELIVERY IMAGE */
.middle-image-wrap{
    position:absolute;
    z-index:4;
    bottom:105px;
    left:50%;
    width:min(520px, 88vw);
    height:360px;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    animation:middleEnter 1.8s cubic-bezier(.2,.8,.2,1) forwards;
}

.middle-image{
    width:100%;
    height:100%;
    object-fit:contain;
    position:relative;
    z-index:3;
    filter:
        drop-shadow(0 35px 65px rgba(0,0,0,.9))
        drop-shadow(0 0 25px rgba(212,175,55,.25));
}

/* LINE PASSING THROUGH IMAGE */
.route-line-through{
    position:absolute;
    width:120%;
    height:4px;
    top:48%;
    left:-10%;
    z-index:2;
    border-radius:30px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(212,175,55,.2),
        var(--gold),
        rgba(255,240,180,.95),
        var(--gold),
        rgba(212,175,55,.2),
        transparent
    );
    box-shadow:0 0 22px rgba(212,175,55,.8);
    animation:lineSweep 2.8s ease-in-out infinite;
}

/* makes it visually feel like the line enters and exits the image */
.route-line-through::after{
    content:"";
    position:absolute;
    inset:-10px 0;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.6),
        transparent
    );
    transform:translateX(-100%);
    animation:shineAcross 3s linear infinite;
}

@keyframes middleEnter{
    from{
        opacity:0;
        transform:translateX(-50%) translateY(40px) scale(.9);
    }
    to{
        opacity:1;
        transform:translateX(-50%) translateY(0) scale(1);
    }
}

@keyframes lineSweep{
    0%,100%{
        transform:translateX(0) scaleX(.92);
        opacity:.75;
    }
    50%{
        transform:translateX(15px) scaleX(1);
        opacity:1;
    }
}

@keyframes shineAcross{
    to{
        transform:translateX(100%);
    }
}

/* LOGO MARK */
.logo-mark{
    margin:0 auto 18px;
    width:110px;
    height:82px;
    position:relative;
    animation:float 4s ease-in-out infinite;
}

.rider{
    position:absolute;
    top:4px;
    left:28px;
    width:38px;
    height:38px;
    border-radius:50%;
    background:var(--white);
}

.rider::before{
    content:"";
    position:absolute;
    width:48px;
    height:24px;
    border:7px solid var(--white);
    border-top:none;
    border-left:none;
    border-radius:0 0 40px 0;
    top:31px;
    left:-5px;
    transform:rotate(10deg);
}

.wheel{
    position:absolute;
    width:28px;
    height:28px;
    border:6px solid var(--white);
    border-radius:50%;
    bottom:0;
}

.wheel.left{left:7px;}
.wheel.right{
    right:7px;
    border-color:var(--gold);
}

.handle{
    position:absolute;
    width:30px;
    height:6px;
    background:var(--gold);
    right:9px;
    top:38px;
    transform:rotate(-25deg);
    border-radius:10px;
}

.motion{
    position:absolute;
    width:48px;
    height:4px;
    background:linear-gradient(90deg,transparent,var(--gold));
    left:-40px;
    bottom:20px;
    border-radius:10px;
    animation:speed 1.1s linear infinite;
}

.motion.m2{bottom:34px;animation-delay:.2s;width:35px;}
.motion.m3{bottom:8px;animation-delay:.4s;width:26px;}

@keyframes speed{
    from{transform:translateX(0);opacity:.2;}
    to{transform:translateX(-30px);opacity:1;}
}

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

/* BRAND */
.brand{
    font-size:clamp(42px,8vw,86px);
    font-weight:800;
    letter-spacing:-3px;
    line-height:1;
    animation:brandIn 1.4s ease forwards;
}

.brand span:first-child{
    color:var(--white);
}

.brand span:last-child{
    color:transparent;
    background:linear-gradient(120deg,var(--gold),#fff2b0,var(--gold));
    background-size:200%;
    -webkit-background-clip:text;
    background-clip:text;
    animation:goldShine 3s linear infinite;
}

@keyframes goldShine{
    from{background-position:-200%;}
    to{background-position:200%;}
}

@keyframes brandIn{
    from{opacity:0;transform:translateY(30px) scale(.94);}
    to{opacity:1;transform:translateY(0) scale(1);}
}

.tagline{
    margin-top:18px;
    color:var(--gold);
    letter-spacing:10px;
    font-size:14px;
    animation:fadeUp 1.4s ease forwards .6s;
    opacity:0;
}

.promise{
    margin-top:300px;
    color:var(--silver);
    letter-spacing:6px;
    font-size:14px;
    text-transform:uppercase;
    animation:fadeUp 1.4s ease forwards 1.2s;
    opacity:0;
}

/* SCOOTER VISUAL */
.scooter{
    position:absolute;
    z-index:3;
    bottom:115px;
    left:50%;
    width:360px;
    height:190px;
    transform:translateX(-50%);
    animation:scooterEnter 1.8s cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes scooterEnter{
    from{transform:translateX(-120%) scale(.9);opacity:0;}
    to{transform:translateX(-50%) scale(1);opacity:1;}
}

.scooter-body{
    position:absolute;
    bottom:38px;
    left:70px;
    width:220px;
    height:75px;
    background:linear-gradient(145deg,#090909,#1a1a1a);
    border-radius:80px 90px 45px 55px;
    border:2px solid rgba(212,175,55,.6);
    box-shadow:0 25px 60px rgba(0,0,0,.9), inset 0 0 18px rgba(212,175,55,.12);
}

.scooter-body::after{
    content:"urbancitycart";
    position:absolute;
    color:var(--gold);
    font-size:13px;
    font-weight:800;
    left:58px;
    top:24px;
}

.scooter-wheel{
    position:absolute;
    bottom:0;
    width:66px;
    height:66px;
    border-radius:50%;
    border:10px solid #111;
    box-shadow:inset 0 0 0 4px var(--gold),0 0 20px rgba(212,175,55,.3);
    animation:wheelSpin 1s linear infinite;
}

.scooter-wheel.left{left:75px;}
.scooter-wheel.right{right:70px;}

@keyframes wheelSpin{
    to{transform:rotate(360deg);}
}

.box{
    position:absolute;
    left:46px;
    bottom:105px;
    width:105px;
    height:70px;
    background:linear-gradient(145deg,#0a0a0a,#181818);
    border:2px solid rgba(212,175,55,.7);
    border-radius:16px;
    box-shadow:0 15px 35px rgba(0,0,0,.8);
}

.box::after{
    content:"urbancitycart";
    color:white;
    font-size:11px;
    position:absolute;
    top:25px;
    left:13px;
}

.rider-body{
    position:absolute;
    left:150px;
    bottom:100px;
    width:62px;
    height:90px;
    background:#090909;
    border-radius:40px 40px 20px 20px;
    border-right:3px solid var(--gold);
    transform:rotate(-8deg);
}

.rider-body::after{
    content:"urbancitycart";
    color:var(--gold);
    font-size:9px;
    position:absolute;
    top:35px;
    left:7px;
}

.helmet{
    position:absolute;
    left:162px;
    bottom:185px;
    width:58px;
    height:48px;
    background:#050505;
    border-radius:50%;
    border:2px solid var(--gold);
    box-shadow:0 0 20px rgba(212,175,55,.25);
}

/* LOADING */
.loader{
    position:absolute;
    z-index:8;
    bottom:42px;
    left:50%;
    transform:translateX(-50%);
    width:340px;
    text-align:center;
}

.bar{
    width:100%;
    height:5px;
    border-radius:20px;
    background:rgba(255,255,255,.12);
    overflow:hidden;
    border:1px solid rgba(212,175,55,.25);
}

.progress{
    height:100%;
    width:0;
    background:linear-gradient(90deg,var(--gold),#fff3b0,var(--gold));
    border-radius:20px;
    box-shadow:0 0 20px rgba(212,175,55,.8);
    animation:load 4s ease forwards;
}

@keyframes load{
    to{width:100%;}
}

.loading-text{
    margin-top:16px;
    color:var(--gold);
    letter-spacing:8px;
    font-size:13px;
}

/* FADE */
@keyframes fadeUp{
    from{opacity:0;transform:translateY(20px);}
    to{opacity:1;transform:translateY(0);}
}

/* EXIT */
.splash.exit{
    animation:splashOut .8s ease forwards;
}

@keyframes splashOut{
    to{opacity:0;transform:scale(1.04);visibility:hidden;}
}

@media(max-width:600px){
    .brand{font-size:46px;letter-spacing:-2px;}
    .tagline{letter-spacing:5px;font-size:12px;}
    .scooter{width:300px;transform:translateX(-50%) scale(.86);}
    .promise{margin-top:280px;font-size:11px;letter-spacing:4px;}
    .loader{width:260px;}
    
    .header-logo-wrap{
    width:140px;
    height:100px;
}

.header-logo-img{
    width:95px;
    height:95px;
}

.middle-image-wrap{
    width:92vw;
    height:300px;
    bottom:105px;
}
}