/*
   STEINBRÜDER
   3D drill product storytelling
*/

.broca-showcase {
    position:relative;

    height:470svh;
    min-height:3100px;

    background:#000;

    overflow:clip;

    border-top:
        1px solid rgba(255,255,255,.05);

    border-bottom:
        1px solid rgba(255,255,255,.05);
}


.broca-showcase-stage {
    position:sticky;

    top:0;

    height:100svh;
    min-height:650px;

    overflow:hidden;

    isolation:isolate;

    background:
        radial-gradient(
            circle at 50% 47%,
            rgba(255,255,255,.06),
            rgba(255,255,255,.018) 24%,
            rgba(0,0,0,0) 47%
        ),
        #000;
}


/* =========================================================
   THREE.JS
   ========================================================= */

.broca-showcase-layer {
    position:absolute;

    inset:0;

    z-index:2;

    opacity:0;

    cursor:grab;

    touch-action:pan-y;

    will-change:
        opacity,
        transform;
}


.broca-showcase-layer.is-dragging {
    cursor:grabbing;
}


.broca-showcase-layer canvas {
    display:block;

    width:100%;
    height:100%;

    outline:none;
}


/* =========================================================
   CIRCULAR HEAD ACCENT

   Position is calculated from the REAL 3D head
   every frame and projected onto the screen.
   ========================================================= */

.broca-orbit-ring {
    position:absolute;

    left:50%;
    top:50%;

    width:clamp(
        190px,
        24vw,
        390px
    );

    aspect-ratio:1;

    border-radius:50%;

    z-index:1;

    pointer-events:none;

    opacity:0;

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

    box-shadow:
        0 0 45px
        rgba(255,255,255,.055),
        inset 0 0 45px
        rgba(255,255,255,.025);

    background:
        conic-gradient(
            from 30deg,
            rgba(255,255,255,.68),
            rgba(255,255,255,.06) 18%,
            rgba(255,255,255,0) 38%,
            rgba(255,255,255,.38) 64%,
            rgba(255,255,255,0) 82%,
            rgba(255,255,255,.68)
        );

    -webkit-mask:
        radial-gradient(
            farthest-side,
            transparent
            calc(100% - 3px),
            #000
            calc(100% - 2px)
        );

    mask:
        radial-gradient(
            farthest-side,
            transparent
            calc(100% - 3px),
            #000
            calc(100% - 2px)
        );

    will-change:
        left,
        top,
        opacity,
        transform;
}


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

.broca-copy-track {
    position:absolute;

    inset:0;

    z-index:4;

    pointer-events:none;
}


.broca-copy {
    position:absolute;

    top:50%;

    width:
        min(390px,36vw);

    opacity:0;

    will-change:
        opacity,
        transform,
        filter;
}


.broca-copy.left {
    left:
        clamp(
            28px,
            7vw,
            120px
        );

    text-align:left;
}


.broca-copy.right {
    right:
        clamp(
            28px,
            7vw,
            120px
        );

    text-align:right;
}


.broca-copy-eyebrow {
    margin-bottom:18px;

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

    font-size:
        10px;

    line-height:1;

    font-weight:700;

    letter-spacing:.28em;

    text-transform:uppercase;
}


.broca-copy h2 {
    margin:0;

    color:#fff;

    font-size:
        clamp(
            34px,
            4.2vw,
            68px
        );

    line-height:.92;

    letter-spacing:-.045em;

    font-weight:850;
}


.broca-copy p {
    margin:
        24px 0 0;

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

    font-size:
        clamp(
            13px,
            1.05vw,
            16px
        );

    line-height:1.65;
}


.broca-copy-rule {
    display:inline-block;

    width:42px;
    height:1px;

    margin-top:25px;

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


.broca-copy.right
.broca-copy-rule {
    margin-left:auto;
}


/* subtle technical scale */

.broca-showcase-index {
    position:absolute;

    left:50%;
    bottom:34px;

    z-index:4;

    transform:
        translateX(-50%);

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

    font-size:9px;

    font-weight:700;

    letter-spacing:.28em;

    text-transform:uppercase;

    pointer-events:none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:760px) {

    .broca-showcase {
        height:430svh;
        min-height:2700px;
    }


    .broca-copy,
    .broca-copy.left,
    .broca-copy.right {

        width:
            calc(100vw - 48px);

        left:24px;
        right:auto;

        top:auto;
        bottom:72px;

        text-align:left;
    }


    .broca-copy h2 {
        font-size:
            clamp(
                31px,
                10vw,
                52px
            );
    }


    .broca-copy p {
        max-width:360px;
    }


    .broca-orbit-ring {
        width:
            min(
                58vw,
                280px
            );
    }
}


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

    .broca-showcase {
        height:130svh;
        min-height:900px;
    }

    .broca-showcase-layer {
        pointer-events:none;
    }
}