/* =========================================
   SLP AUCTION SCROLL EXPERIENCE
   VERSION 1.2 - CLEAN CSS
   Fullscreen Pinned Parallax
   ========================================= */

/* 01. BASE STYLES */

.slp-auction-native,
.slp-auction-native *,
.slp-auction-portal,
.slp-auction-portal * {
    box-sizing: border-box;
}

.slp-auction-native {
    position: relative;
    display: block;
    width: 100vw;
    max-width: none;
    margin: 0;
    margin-left: calc(50% - 50vw);
    background: #05080d;
    color: #eef3fa;
    font-family: Arial, Helvetica, sans-serif;
    line-height: normal;
    scroll-behavior: smooth;
    isolation: isolate;
    overflow: visible;
}

/* 02. SCROLL JOURNEY */

.slp-auction-native #journey {
    height: 520vh;
    min-height: 2600px;
    position: relative;
}

.slp-auction-native .stage {
    position: sticky;
    top: 0;
    width: 100%;
    height: var(--slp-stage-height, 100svh);
    overflow: hidden;
    background:
        radial-gradient(
            ellipse at 58% 60%,
            #13243855,
            transparent 60%
        ),
        #05080d;
}

/* 03. HEADER */

.slp-auction-native header,
.slp-auction-portal header {
    position: absolute;
    z-index: 20;
    top: 0;
    left: 0;
    right: 0;
    padding: 27px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ffffff12;
    backdrop-filter: blur(14px);
}

.slp-auction-native .brand,
.slp-auction-portal .brand {
    font-size: 17px;
    letter-spacing: 6px;
    color: #ffffff;
}

.slp-auction-native header span,
.slp-auction-portal header span {
    font-size: 10px;
    letter-spacing: 2px;
    color: #8c9bab;
}

/* 04. BUTTONS */

.slp-auction-native button,
.slp-auction-portal button {
    cursor: pointer;
    background: none;
    color: #d8e8f9;
    border: 1px solid #425363;
    border-radius: 40px;
    padding: 10px 20px;
    font-size: 10px;
    letter-spacing: 2px;
    font-family: inherit;
}

/* 05. BACKGROUND GRID */

.slp-auction-native .grid,
.slp-auction-portal .grid {
    position: absolute;
    inset: -30%;
    background-image:
        linear-gradient(
            #65829c0b 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            #65829c0b 1px,
            transparent 1px
        );
    background-size: 100px 100px;
    transform: perspective(700px) rotateX(65deg);
    opacity: 0.5;
}

.slp-auction-native .halo,
.slp-auction-portal .halo {
    position: absolute;
    width: 70vw;
    height: 15vw;
    left: 15%;
    top: 66%;
    border-radius: 50%;
    background: #3063a530;
    filter: blur(70px);
}

/* 06. MAIN HEADLINE */

.slp-auction-native .copy,
.slp-auction-portal .copy {
    position: absolute;
    z-index: 4;
    top: 20%;
    left: 7%;
    pointer-events: none;
}

.slp-auction-native .eyebrow,
.slp-auction-portal .eyebrow {
    font-size: 10px;
    color: #9fcfff !important;
    -webkit-text-fill-color: #9fcfff !important;
    letter-spacing: 4px;
    margin-bottom: 19px;
}

.slp-auction-native h1,
.slp-auction-native h2,
.slp-auction-portal h1,
.slp-auction-portal h2 {
    font-weight: 400;
    letter-spacing: -5px;
    line-height: 0.96;
    margin: 0;
    font-size: clamp(58px, 7.5vw, 115px);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.slp-auction-native .copy h1,
.slp-auction-portal .copy h1 {
    font-size: clamp(48px, 6.1vw, 94px);
    max-width: 900px;
    letter-spacing: -3px;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.slp-auction-native .copy p,
.slp-auction-portal .copy p {
    font-size: 13px;
    line-height: 1.8;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    max-width: 280px;
    margin-top: 23px;
}

/* 07. CAR VISUAL */

.slp-auction-native .car,
.slp-auction-portal .car {
    position: absolute;
    width: 83vw;
    height: 75vh;
    left: 20%;
    top: 26%;
    object-fit: contain;
    transform-origin: 43% 60%;
    will-change: transform, opacity;
    mix-blend-mode: screen;
}

/* 08. ENGINE VISUAL */

.slp-auction-native .engineWrap,
.slp-auction-portal .engineWrap {
    position: absolute;
    width: min(800px, 90vw);
    height: min(620px, 70vh);
    top: 21%;
    left: 50%;
    transform: translateX(-50%);
    will-change: transform, opacity;
    opacity: 0;
}

.slp-auction-native .engineWrap svg,
.slp-auction-portal .engineWrap svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* 09. ENGINE TEXT */

.slp-auction-native .engineCopy,
.slp-auction-portal .engineCopy {
    position: absolute;
    left: 7%;
    top: 21%;
    opacity: 0;
    z-index: 5;
}

.slp-auction-native .engineCopy h2,
.slp-auction-portal .engineCopy h2 {
    font-size: clamp(52px, 6vw, 88px);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.slp-auction-native .engineCopy p,
.slp-auction-portal .engineCopy p {
    color: #ffffff !important;
    font-size: 13px;
    line-height: 1.8;
    max-width: 220px;
}

/* 10. ENGINE INFORMATION TAG */

.slp-auction-native .tag,
.slp-auction-portal .tag {
    position: absolute;
    right: 7%;
    top: 45%;
    opacity: 0;
    border-left: 1px solid #65b7fa;
    padding: 12px 0 12px 20px;
    font-size: 11px;
    line-height: 2;
    color: #a7bbce;
    letter-spacing: 1px;
}

.slp-auction-native .tag b,
.slp-auction-portal .tag b {
    color: #ffffff;
    font-weight: 400;
    font-size: 16px;
}

/* 11. BOTTOM INFORMATION */

.slp-auction-native .bottom,
.slp-auction-portal .bottom {
    position: absolute;
    bottom: 37px;
    left: 5%;
    right: 5%;
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    letter-spacing: 2px;
    color: #8b9aab;
    z-index: 10;
}

.slp-auction-native .scroll,
.slp-auction-portal .scroll {
    display: flex;
    align-items: center;
    gap: 12px;
}

.slp-auction-native .scroll i,
.slp-auction-portal .scroll i {
    height: 35px;
    width: 1px;
    background: linear-gradient(
        white,
        transparent
    );
}

/* 12. PROGRESS RAIL */

.slp-auction-native .rail,
.slp-auction-portal .rail {
    position: absolute;
    right: 26px;
    top: 42%;
    width: 2px;
    height: 140px;
    background: #ffffff16;
    z-index: 20;
}

.slp-auction-native .rail i,
.slp-auction-portal .rail i {
    display: block;
    width: 2px;
    background: #a8d8ff;
    height: 0;
}

/* 13. CHAPTER LABEL */

.slp-auction-native .chapter,
.slp-auction-portal .chapter {
    position: absolute;
    bottom: 107px;
    left: 5%;
    font-size: 10px;
    color: #a9c9e7;
    letter-spacing: 3px;
}

/* 14. END SECTION */

.slp-auction-native .end {
    position: relative;
    min-height: 65vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 24px;
    background: #0c121b;
}

.slp-auction-native .end h2 {
    font-size: clamp(40px, 6vw, 80px);
    letter-spacing: -3px;
    margin: 18px 0 28px;
    color: #ffffff !important;
}

.slp-auction-native .end p {
    font-size: 12px;
    color: #8c9bab;
    line-height: 1.8;
}

.slp-auction-native .end small {
    display: block;
    margin-top: 30px;
    color: #526476;
    font-size: 10px;
}

/* 15. IMAGE RESET */

.slp-auction-native img,
.slp-auction-portal img {
    border: 0;
    max-width: none;
}

/* 16. ENGINE PULSE */

.slp-auction-native .pulse,
.slp-auction-portal .pulse {
    animation: slp-pulse 2s infinite alternate;
}

@keyframes slp-pulse {
    to {
        opacity: 0.35;
    }
}

/* =========================================
   17. PINNED FULLSCREEN PORTAL
   ========================================= */

.slp-auction-portal {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    max-width: none !important;
    margin: 0 !important;
    z-index: 9999 !important;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    overflow: hidden !important;
    color: #eef3fa;
    font-family: Arial, Helvetica, sans-serif;
    line-height: normal;
}

.slp-auction-portal.slp-is-pinned {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.slp-auction-portal .stage {
    position: relative !important;
    top: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    overflow: hidden !important;
    background:
        radial-gradient(
            ellipse at 58% 60%,
            #13243855,
            transparent 60%
        ),
        #05080d;
}

/* WordPress admin bar compatibility */

body.admin-bar .slp-auction-portal {
    top: var(
        --wp-admin--admin-bar--height,
        32px
    ) !important;
    height: calc(
        100dvh -
        var(--wp-admin--admin-bar--height, 32px)
    ) !important;
}

body.admin-bar .slp-auction-portal .stage {
    height: 100% !important;
}

/* =========================================
   18. MOBILE RESPONSIVE
   ========================================= */

@media (max-width: 700px) {

    .slp-auction-native {
        width: 100%;
        margin-left: 0;
    }

    .slp-auction-native header,
    .slp-auction-portal header {
        padding: 22px 6%;
    }

    .slp-auction-native .brand,
    .slp-auction-portal .brand {
        font-size: 12px;
        letter-spacing: 4px;
    }

    .slp-auction-native header span,
    .slp-auction-portal header span {
        display: none;
    }

    .slp-auction-native .copy,
    .slp-auction-portal .copy {
        top: 18%;
    }

    .slp-auction-native .copy h1,
    .slp-auction-portal .copy h1 {
        letter-spacing: -3px;
    }

    .slp-auction-native .car,
    .slp-auction-portal .car {
        width: 135vw;
        left: -10%;
        top: 33%;
        height: 62vh;
    }

    .slp-auction-native .engineWrap,
    .slp-auction-portal .engineWrap {
        top: 32%;
        width: 110vw;
    }

    .slp-auction-native .engineCopy,
    .slp-auction-portal .engineCopy {
        top: 17%;
    }

    .slp-auction-native .engineCopy h2,
    .slp-auction-portal .engineCopy h2 {
        letter-spacing: -3px;
    }

    .slp-auction-native .engineCopy p,
    .slp-auction-portal .engineCopy p {
        max-width: 270px;
    }

    .slp-auction-native .tag,
    .slp-auction-portal .tag {
        top: auto;
        bottom: 150px;
        right: 9%;
        font-size: 9px;
    }

    .slp-auction-native .rail,
    .slp-auction-portal .rail {
        right: 12px;
    }

    .slp-auction-native .bottom,
    .slp-auction-portal .bottom {
        font-size: 8px;
        line-height: 1.8;
    }

    .slp-auction-native .bottom > span,
    .slp-auction-portal .bottom > span {
        max-width: 130px;
        text-align: right;
    }
}

/* =========================================
   19. ACCESSIBILITY
   ========================================= */

@media (prefers-reduced-motion: reduce) {

    .slp-auction-native {
        scroll-behavior: auto;
    }

    .slp-auction-native .pulse,
    .slp-auction-portal .pulse {
        animation: none;
    }
}