/* ========================================
           MEET OUR ARTISTS
           ONLY FILMSTRIP ON THE PAGE
           ======================================== */

        .artists-section {
            position: relative;

            width: 100%;

            overflow: hidden;

            background: #ffffff;
        }


        /* ========================================
           ARTISTS TITLE
           ======================================== */

        .artists-header {
            position: relative;

            z-index: 5;

            height:
                clamp(
                    118px,
                    14vw,
                    170px
                );

            display: flex;

            align-items: center;

            justify-content: center;

            background: #245f9c;

            overflow: hidden;
        }

        .artists-title {
            position: relative;

            z-index: 2;

            display: inline-block;

            padding:
                .35rem 1rem;

            color: #ffffff;

            font-family:
                'League Spartan',
                sans-serif;

            font-size:
                clamp(
                    2rem,
                    4vw,
                    3.5rem
                );

            font-weight: 800;

            line-height: 1;

            text-align: center;

            text-shadow:
                0 1px 2px
                rgba(0,0,0,.7);
        }

        /*
         * Wave ribbon behind the title,
         * matching opencode/wave-title.png:
         * lighter-blue band flowing continuously
         * through — both edges and the underside
         * bleed past the box, so the band is cut
         * mid-flow like the reference image edges.
         */

        .artists-title::before {
            content: "";

            position: absolute;

            z-index: -1;

            left: 50%;
            top: 50%;

            width: 110%;
            height: 115%;

            min-width:
                min(200px, 85vw);

            transform:
                translate(-50%, -50%)
                rotate(180deg);

            background:
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 120' preserveAspectRatio='none'%3E%3Cpath d='M-10,49 C60,16 125,19 175,41 C225,64 265,56 310,29 L310,89 C250,110 205,107 155,94 C105,76 55,79 -10,99 Z' fill='%234d8fd1'/%3E%3C/svg%3E")
                no-repeat
                center /
                100% 100%;
        }


        /* ========================================
           ARTIST FILMSTRIP AREA
           ======================================== */

        .artists-film-area {
            position: relative;

            width: 100%;

            background: #000000;

            padding:
                38px 0 48px;

            overflow: hidden;

            z-index: 3;
        }


        /* ========================================
           ARTIST FILMSTRIP
           ======================================== */

        .artists-filmstrip {
            position: relative;

            width: 100%;

            background: #000000;

            padding:
                0 58px;

            overflow: visible;
        }


        /* ========================================
           PERFORATIONS
           ======================================== */

        .artists-filmstrip::before,
        .artists-filmstrip::after {
            content: "";

            position: absolute;

            left: 0;

            width: 100%;

            height: 18px;

            z-index: 10;

            pointer-events: none;

            background:
                repeating-linear-gradient(
                    90deg,
                    #245f9c 0 11px,
                    transparent 11px 21px
                );
        }

        .artists-filmstrip::before {
            top: -27px;
        }

        .artists-filmstrip::after {
            bottom: -27px;
        }


        /* ========================================
           ARTIST WINDOW
           ======================================== */

        .artists-window {
            width: 100%;

            overflow: hidden;

            position: relative;
        }


        /* ========================================
           ARTIST TRACK
           ======================================== */

        .artists-track {
            display: flex;

            align-items: stretch;

            gap: 3px;

            width: max-content;

            will-change: transform;

            cursor: grab;

            touch-action: pan-y;

            user-select: none;
        }

        .artists-track:active {
            cursor: grabbing;
        }


        /* ========================================
           ARTIST FRAME
           ======================================== */

        .artist-frame {
            flex:
                0 0 clamp(
                    150px,
                    18vw,
                    285px
                );

            text-decoration: none;

            width:
                clamp(
                    150px,
                    18vw,
                    285px
                );

            height:
                clamp(
                    175px,
                    22vw,
                    290px
                );

            position: relative;

            overflow: hidden;

            background: #111;

            border:
                2px solid #000;

            display: flex;

            flex-direction: column;
        }

        .artist-frame img {
            width: 100%;

            height: 100%;

            object-fit: cover;

            display: block;

            pointer-events: none;

            user-select: none;
        }

        /*
         * Soft scrim so the floating name
         * stays legible over any photo.
         */

        .artist-frame::after {
            content: "";

            position: absolute;

            left: 0;
            right: 0;
            bottom: 0;

            height: 45%;

            z-index: 2;

            background:
                linear-gradient(
                    to bottom,
                    transparent 0%,
                    rgba(0, 0, 0, .85) 100%
                );

            pointer-events: none;
        }

        .artist-name {
            position: absolute;

            left: 0;
            right: 0;
            bottom: 0;

            z-index: 3;

            display: flex;

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

            padding: 0 5px 8px;

            color: #ffffff;

            font-family:
                'League Spartan',
                sans-serif;

            font-size:
                clamp(
                    .75rem,
                    1.05vw,
                    1.15rem
                );

            font-weight: 800;

            line-height: 1;

            text-align: center;

            text-shadow:
                0 1px 4px rgba(0, 0, 0, .8);

            white-space: nowrap;

            pointer-events: none;
        }


        /* ========================================
           ARTISTS ARROWS
           ======================================== */

        .artist-arrow {
            position: absolute;

            top: 50%;

            z-index: 20;

            width: 42px;
            height: 70px;

            transform:
                translateY(-50%);

            background: transparent;

            border: 0;

            cursor: pointer;

            padding: 0;

            opacity: .95;
        }

        .artist-arrow::before {
            content: "";

            position: absolute;

            top: 50%;

            width: 28px;
            height: 28px;

            border-top:
                2px solid #ffffff;

            border-right:
                2px solid #ffffff;
        }

        .artist-arrow-left {
            left: 14px;
        }

        .artist-arrow-left::before {
            left: 8px;

            transform:
                translateY(-50%)
                rotate(-135deg);
        }

        .artist-arrow-right {
            right: 14px;
        }

        .artist-arrow-right::before {
            right: 8px;

            transform:
                translateY(-50%)
                rotate(45deg);
        }

        .artist-arrow:hover {
            opacity: 1;
        }


        /* ========================================
           HALFTONE BLUE → WHITE AREA
           ======================================== */

        .artists-halftone {
            position: relative;

            height:
                clamp(
                    145px,
                    20vw,
                    230px
                );

            width: 100%;

            overflow: hidden;

            background: #ffffff;
        }

        .artists-halftone::before {
            content: "";

            position: absolute;

            inset: 0;

            /*
             * Dense blue dots at the top,
             * gradually becoming smaller/lighter
             * toward the bottom.
             */

            background-image:
                radial-gradient(
                    circle,
                    #1476c7 0 1.2px,
                    transparent 1.4px
                );

            background-size:
                5px 5px;

            opacity: 1;

            mask-image:
                linear-gradient(
                    to bottom,
                    #000 0%,
                    rgba(0,0,0,.95) 12%,
                    rgba(0,0,0,.70) 35%,
                    rgba(0,0,0,.38) 58%,
                    rgba(0,0,0,.12) 78%,
                    transparent 100%
                );

            -webkit-mask-image:
                linear-gradient(
                    to bottom,
                    #000 0%,
                    rgba(0,0,0,.95) 12%,
                    rgba(0,0,0,.70) 35%,
                    rgba(0,0,0,.38) 58%,
                    rgba(0,0,0,.12) 78%,
                    transparent 100%
                );
        }

        .artists-halftone::after {
            content: "";

            position: absolute;

            inset: 0;

            background:
                linear-gradient(
                    to bottom,
                    rgba(36,95,156,.05) 0%,
                    rgba(255,255,255,.15) 45%,
                    rgba(255,255,255,.85) 100%
                );

            pointer-events: none;
        }


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

        @media (max-width: 700px) {

            .artists-film-area {
                padding:
                    32px 0 42px;
            }

            .artists-filmstrip {
                padding:
                    0 42px;
            }

            .artist-frame {
                flex:
                    0 0 155px;

                width: 155px;

                height: 185px;
            }

            .artist-name {
                font-size: .78rem;
            }

            .artist-arrow {
                width: 35px;
            }

            .artist-arrow-left {
                left: 5px;
            }

            .artist-arrow-right {
                right: 5px;
            }

            .artist-arrow::before {
                width: 23px;
                height: 23px;
            }

            .artists-halftone {
                height: 170px;
            }
        }