/* =========================================================
   SLIKTRA CINEMATIC HERO
========================================================= */

.sliktra-cinematic {

    position: relative;

    height: 350vh;

    background:
        #03070d;

    color: #fff;

    isolation: isolate;
}


/* =========================================================
   STICKY VIEWPORT
========================================================= */

.sliktra-cinematic-sticky {

    position: sticky;

    top: 0;

    width: 100%;

    height: 100vh;

    min-height: 620px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 50%,
            #081349 0%,
            #02050a 35%,
            #03070d 72%,
            #02050a 100%
        );

    contain: paint;
}


/* =========================================================
   CANVAS
========================================================= */

#sliktraCanvas {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    display: block;

    z-index: 1;

    pointer-events: none;
}


/* =========================================================
   NOISE
========================================================= */

.sc-noise {

    position: absolute;

    inset: -50%;

    z-index: 4;

    pointer-events: none;

    opacity: .045;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");

    animation:
        scNoiseMove 0.35s steps(2) infinite;
}


@keyframes scNoiseMove {

    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(2%, -1%);
    }

    50% {
        transform: translate(-1%, 2%);
    }

    75% {
        transform: translate(1%, 1%);
    }

    100% {
        transform: translate(-2%, -1%);
    }
}


/* =========================================================
   VIGNETTE
========================================================= */

.sc-vignette {

    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            transparent 25%,
            rgba(0, 0, 0, .12) 55%,
            rgba(0, 0, 0, .72) 100%
        );
}


/* =========================================================
   HERO COPY
========================================================= */

.sc-copy {

    position: absolute;

    z-index: 10;

    top: 50%;

    right: 8%;

    width: min(600px, 42vw);

    transform:
        translateY(-50%);

    pointer-events: none;
}


.sc-eyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 22px;

    color:
        rgba(255,255,255,.6);

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 1.5px;
}


.sc-eyebrow-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #23e0c2;

    box-shadow:
        0 0 14px
        rgba(110,168,255,.9);
}


.sc-copy h1 {

    margin: 0;
    color: #fff;
    font-size:
        clamp(
            46px,
            5.5vw,
            88px
        );

    line-height: 1.04;

    font-weight: 800;

    letter-spacing: -2px;
}


.sc-copy h1 em {

    font-style: normal;

    color: #0033ff;

    text-shadow:
        0 0 50px
        rgba(70,130,255,.25);
}


.sc-copy p {

    max-width: 460px;

    margin:
        28px 0 0;

    color:
        rgba(255,255,255,.52);

    font-size: 16px;

    line-height: 1.9;
}


/* =========================================================
   ACTIONS
========================================================= */

.sc-actions {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 34px;

    pointer-events: auto;
}


.sc-btn {

    min-height: 48px;

    padding:
        0 20px;

    border-radius: 8px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    text-decoration: none;

    font-size: 14px;

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease;
}


.sc-btn:hover {

    transform:
        translateY(-2px);
}


.sc-btn-primary {

    color: #fff;

    background: #0033ff;
}
.sc-btn-primary:hover {

    border:
        1px solid
        rgba(255,255,255,.35);

    /* background:
        rgba(255,255,255,.06); */
}

.sc-btn-primary svg {

    width: 17px;

    height: 17px;

    transform:
        rotate(180deg);
}


.sc-btn-ghost {

    color: #fff;

    border:
        1px solid
        rgba(255,255,255,.16);

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

    backdrop-filter:
        blur(10px);
}



.sc-btn-ghost:hover {

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

    background:
        rgba(255,255,255,.06);
}


/* =========================================================
   SIDE INFO
========================================================= */

.sc-side-info {

    position: absolute;

    z-index: 10;

    left: 5%;

    top: 50%;

    transform:
        translateY(-50%);

    display: flex;

    align-items: center;

    gap: 15px;

    writing-mode:
        vertical-rl;

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

    font-size: 9px;

    letter-spacing: 2px;
}


.sc-side-info strong {

    color: #fff;

    font-size: 12px;

    font-weight: 500;
}


.sc-line {

    position: relative;

    width: 1px;

    height: 100px;

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

    overflow: hidden;
}


.sc-line i {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 20%;

    display: block;

    background: #75aaff;

    box-shadow:
        0 0 10px
        rgba(117,170,255,.8);
}


/* =========================================================
   BOTTOM NAV
========================================================= */

.sc-bottom {

    position: absolute;

    z-index: 10;

    bottom: 32px;

    left: 50%;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap: 14px;

    color:
        rgba(255,255,255,.27);

    font-size: 9px;

    letter-spacing: 2px;

    white-space: nowrap;
}


.sc-bottom-line {

    width: 35px;

    height: 1px;

    background:
        rgba(255,255,255,.15);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .sliktra-cinematic {

        height: 300vh;
    }


    .sc-copy {

        right: 28px;

        left: 28px;

        width: auto;

        top: auto;

        bottom: 90px;

        transform: none;

        text-align: right;
    }


    .sc-copy h1 {

        font-size:
            clamp(
                42px,
                10vw,
                65px
            );

        letter-spacing: -1px;
    }


    .sc-copy p {

        font-size: 14px;

        max-width: 400px;
    }


    .sc-side-info {

        left: 20px;

        top: 35%;
    }


    .sc-bottom {

        bottom: 22px;

        font-size: 7px;
    }

}


@media (max-width: 600px) {

    .sliktra-cinematic {

        height: 280vh;
    }


    .sliktra-cinematic-sticky {

        min-height: 600px;
    }


    .sc-copy {

        bottom: 80px;

        right: 20px;

        left: 20px;
    }


    .sc-copy h1 {

        font-size: 43px;

        line-height: 1.08;
    }


    .sc-copy p {

        margin-top: 18px;

        font-size: 13px;

        line-height: 1.8;
    }


    .sc-actions {

        margin-top: 22px;

        gap: 8px;
    }


    .sc-btn {

        min-height: 44px;

        padding:
            0 15px;

        font-size: 12px;
    }


    .sc-side-info {

        display: none;
    }


    .sc-bottom {

        display: none;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .sc-noise {

        animation: none;
    }

    .sc-btn {

        transition: none;
    }

}