/* ==========================================================
   MOCLO CAMPAIGN SLIDER
========================================================== */

.campaign-slider{

    position:relative;

     width:100%;

    height:100dvh;

    overflow:hidden;

    background:#111;

    margin:0;

}

.campaign-track{

    display:flex;

    width:100%;

    height:100%;

    transition:transform .9s cubic-bezier(.22,.61,.36,1);

    will-change:transform;

}

.campaign-slide{

    position:relative;

    flex:0 0 100%;

    width:100%;

    height:100dvh;

    overflow:hidden;

}

.campaign-image{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:center;

    transform:scale(1);

    animation:campaignZoom 8s ease-out forwards;

}

.campaign-slide::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.45) 0%,
            rgba(0,0,0,.15) 35%,
            rgba(0,0,0,.05) 70%,
            rgba(0,0,0,.12) 100%
        );

    pointer-events:none;

}
.campaign-prev,
.campaign-next{

    position:absolute;

    top:50%;
    transform:translateY(-50%);

    width:54px;
    height:54px;

    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;

    background:rgba(255,255,255,.08);
    backdrop-filter:blur(18px);

    color:#fff;

    font-size:18px;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    transition:.35s ease;

    z-index:20;

}

.campaign-prev{

    left:40px;

}

.campaign-next{

    right:40px;

}

.campaign-prev:hover,
.campaign-next:hover{

    background:rgba(255,255,255,.18);

    transform:translateY(-50%) scale(1.06);

    border-color:rgba(255,255,255,.35);

}
.campaign-controls{

    position:absolute;

    left:50%;
    bottom:40px;

    transform:translateX(-50%);

    display:flex;
    align-items:center;
    gap:10px;

    padding:12px 18px;

    border:1px solid rgba(255,255,255,.15);
    border-radius:999px;

    background:rgba(255,255,255,.08);
    backdrop-filter:blur(20px);

    z-index:20;

}

.campaign-dots{

    display:flex;
    gap:10px;

}

.campaign-dot{

    width:8px;
    height:8px;

    border:none;
    border-radius:50%;

    background:rgba(255,255,255,.35);

    cursor:pointer;

    transition:.3s;

}

.campaign-dot.active{

    width:28px;

    border-radius:999px;

    background:#fff;

}

.campaign-progress{

    display:flex;
    align-items:center;
    gap:8px;

    color:#fff;

    font-size:.75rem;

    letter-spacing:.18em;

    text-transform:uppercase;

}
.campaign-image{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
    object-position:center center;

    user-select:none;
    -webkit-user-drag:none;

    transform:scale(1);

    animation:campaignZoom 12s linear forwards;

}

@keyframes campaignZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.03);

    }

}