/* =========================================
   GLOBAL
========================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
}

body {
    background: #050505;
    color: white;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    overflow-x: hidden;
}

body.modal-open {
    overflow: hidden;
}

button,
a {
    font-family: inherit;
}


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

.top-bar {
    width: 100%;
    height: 92px;

    position: relative;

    display: flex;
    align-items: center;

    background: white;

    z-index: 100;
}

.menu-button {
    position: absolute;

    left: 48px;
    top: 50%;

    transform:
        translateY(-50%);

    border: none;

    background: none;

    padding: 0;

    cursor: pointer;

    z-index: 130;

    touch-action: manipulation;

    -webkit-tap-highlight-color:
        transparent;
}

.menu-button span {
    display: block;

    width: 32px;
    height: 2px;

    margin: 8px 0;

    background: #222;

    pointer-events: none;
}

.dropdown-menu {
    position: absolute;

    top: 68px;
    left: 48px;

    width: 185px;

    display: flex;
    flex-direction: column;

    padding: 9px 0;

    background: white;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(-8px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s;

    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, 0.18);

    z-index: 140;
}

.dropdown-menu.open {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    transform:
        translateY(0);
}

.dropdown-menu a {
    display: block;

    padding: 12px 17px;

    color: black;

    text-decoration: none;

    font-size: 15px;

    touch-action: manipulation;

    -webkit-tap-highlight-color:
        rgba(0, 0, 0, 0.08);
}

.dropdown-menu a:hover {
    background: #f2f2f2;
}

.nav-fiend {
    position: absolute;

    width: 112px;

    left: 50%;

    transform:
        translateX(-50%);

    animation:
        ride-in
        0.65s
        ease-out
        forwards;

    /*
       Video is decorative.
       It should NEVER intercept taps.
    */
    pointer-events: none;

    z-index: 105;
}

@keyframes ride-in {

    from {
        left: 110%;
    }

    to {
        left: 50%;
    }

}


/* =========================================
   GENERAL
========================================= */

.gallery-page {
    width: 100%;

    position: relative;

    z-index: 1;
}

.eyebrow {
    margin:
        0 0 8px;

    color: #707070;

    font-size: 11px;

    font-weight: 500;

    letter-spacing:
        0.19em;

    text-transform:
        uppercase;
}

.secondary-title {
    margin: 0;

    font-size:
        clamp(
            28px,
            2.7vw,
            40px
        );

    line-height: 1;

    font-weight: 500;

    letter-spacing:
        -0.025em;
}


/* =========================================
   INTRO
========================================= */

.gallery-intro {
    width:
        min(
            1240px,
            calc(100% - 80px)
        );

    min-height:
        105px;

    margin:
        0 auto;

    padding:
        25px 0;

    display: flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        35px;
}

.gallery-intro h1 {
    margin: 0;

    font-size:
        clamp(
            34px,
            4vw,
            52px
        );

    line-height:
        0.95;

    font-weight:
        600;

    letter-spacing:
        -0.035em;
}

.intro-copy {
    margin:
        0 0 4px;

    color:
        #8b8b8b;

    font-size:
        15px;
}


/* =========================================
   SECTION HEADER
========================================= */

.section-header {
    width:
        min(
            1240px,
            calc(100% - 80px)
        );

    margin:
        0 auto 15px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        30px;
}

.compact-header {
    min-height:
        36px;

    align-items:
        center;
}

.section-only-label {
    margin: 0;
}


/* =========================================
   COLLECTION
========================================= */

.collection-section {
    padding:
        19px 0
        32px;

    border-top:
        1px solid #1d1d1d;

    position: relative;

    z-index: 2;
}


/* =========================================
   ERA BUTTONS
========================================= */

.era-controls,
.one-one-era-controls {
    display:
        flex;

    gap:
        6px;

    position: relative;

    z-index: 20;
}

.era-button,
.one-one-era-button {
    padding:
        9px 13px;

    border:
        1px solid #292929;

    background:
        transparent;

    color:
        #7b7b7b;

    cursor:
        pointer;

    font-size:
        10px;

    letter-spacing:
        0.1em;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;

    position: relative;

    z-index: 21;

    touch-action:
        manipulation;

    -webkit-tap-highlight-color:
        transparent;
}

.era-button:hover,
.one-one-era-button:hover {
    color: white;

    border-color:
        #555;

    transform:
        translateY(-1px);
}

.era-button.active,
.one-one-era-button.active {
    background:
        white;

    border-color:
        white;

    color:
        black;
}


/* =========================================
   FILM STRIP
========================================= */

.film-projector {
    position:
        relative;

    width:
        100%;

    padding:
        27px 0;

    overflow:
        hidden;

    border-top:
        1px solid #282828;

    border-bottom:
        1px solid #282828;

    background:
        #020202;
}

.film-projector::before,
.film-projector::after {
    content: "";

    position:
        absolute;

    left:
        0;

    width:
        100%;

    height:
        9px;

    z-index:
        8;

    pointer-events:
        none;

    background-image:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 11px,
            #ddd7c7 11px,
            #ddd7c7 24px,
            transparent 24px,
            transparent 37px
        );
}

.film-projector::before {
    top:
        4px;
}

.film-projector::after {
    bottom:
        4px;
}

.film-window {
    overflow:
        hidden;
}

.film-track {
    width:
        max-content;

    display:
        flex;

    gap:
        10px;

    padding:
        0 10px;

    animation:
        film-scroll
        70s
        linear
        infinite;

    will-change:
        transform;

    transition:
        opacity 0.18s ease,
        filter 0.18s ease;
}

.film-projector:hover
.film-track {
    animation-play-state:
        paused;
}

@keyframes film-scroll {

    from {
        transform:
            translateX(0);
    }

    to {
        transform:
            translateX(-50%);
    }

}


/* =========================================
   FILM FRAMES
========================================= */

.film-frame {
    flex:
        0 0
        clamp(
            155px,
            13vw,
            205px
        );

    padding:
        5px;

    position:
        relative;

    border:
        1px solid #1f1f1f;

    background:
        #080808;

    color:
        white;

    cursor:
        pointer;

    transition:
        transform 0.22s ease,
        border-color 0.22s ease;

    touch-action:
        manipulation;

    -webkit-tap-highlight-color:
        transparent;
}

.film-frame:hover {
    transform:
        translateY(-6px)
        scale(1.035);

    border-color:
        #5a5a5a;

    z-index:
        20;
}

.frame-art {
    position:
        relative;

    width:
        100%;

    aspect-ratio:
        1 / 1;

    overflow:
        hidden;

    background:
        #111;
}

.frame-art img {
    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    opacity:
        1;

    visibility:
        visible;

    transition:
        transform 0.35s ease;
}

.film-frame:hover
.frame-art img {
    transform:
        scale(1.06);
}

.frame-shine {
    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    transform:
        translateX(-130%);

    transition:
        transform 0.5s ease;

    background:
        linear-gradient(
            110deg,
            transparent 30%,
            rgba(255,255,255,0.09) 47%,
            transparent 60%
        );
}

.film-frame:hover
.frame-shine {
    transform:
        translateX(130%);
}

.frame-id {
    position:
        absolute;

    left:
        6px;

    bottom:
        6px;

    padding:
        4px 6px;

    background:
        rgba(
            0,
            0,
            0,
            0.72
        );

    font-size:
        10px;

    letter-spacing:
        0.06em;

    pointer-events:
        none;
}

.frame-meta {
    display:
        flex;

    justify-content:
        space-between;

    padding:
        7px 1px
        2px;

    color:
        #6d6d6d;

    font-size:
        9px;

    letter-spacing:
        0.09em;

    pointer-events:
        none;
}

.film-fade {
    position:
        absolute;

    top:
        0;

    width:
        100px;

    height:
        100%;

    z-index:
        7;

    pointer-events:
        none;
}

.film-fade-left {
    left:
        0;

    background:
        linear-gradient(
            90deg,
            #020202,
            transparent
        );
}

.film-fade-right {
    right:
        0;

    background:
        linear-gradient(
            -90deg,
            #020202,
            transparent
        );
}


/* =========================================
   COLLECTION FOOTER
========================================= */

.collection-footer {
    width:
        min(
            1240px,
            calc(100% - 80px)
        );

    margin:
        13px auto
        0;

    display:
        grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items:
        center;

    gap:
        20px;
}

.shuffle-button {
    justify-self:
        start;

    padding:
        10px 13px;

    border:
        1px solid #303030;

    background:
        #0d0d0d;

    color:
        #b6b6b6;

    cursor:
        pointer;

    font-size:
        10px;

    letter-spacing:
        0.1em;

    touch-action:
        manipulation;
}

.shuffle-button:hover {
    border-color:
        #666;

    color:
        white;
}

.film-instruction {
    color:
        #555;

    font-size:
        9px;

    letter-spacing:
        0.13em;
}

.opensea-button {
    justify-self:
        end;

    padding:
        10px 14px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        15px;

    background:
        white;

    color:
        black;

    text-decoration:
        none;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        0.09em;

    touch-action:
        manipulation;
}


/* =========================================
   1/1 ARCHIVE
========================================= */

.one-one-section {
    padding:
        23px 0
        31px;

    border-top:
        1px solid #1d1d1d;

    position:
        relative;

    z-index: 2;
}

.one-one-section
.section-header {
    align-items:
        center;
}

.signature-grid {
    width:
        min(
            1240px,
            calc(100% - 80px)
        );

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        repeat(
            7,
            1fr
        );

    gap:
        8px;
}

.signature-card {
    position:
        relative;

    aspect-ratio:
        1 / 1;

    overflow:
        hidden;

    border:
        1px solid #232323;

    background:
        #0a0a0a;

    cursor:
        pointer;

    padding:
        0;

    color:
        white;

    transition:
        transform 0.22s ease,
        border-color 0.22s ease;

    z-index:
        1;

    touch-action:
        manipulation;

    -webkit-tap-highlight-color:
        transparent;
}

.signature-card img,
.signature-card video {
    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;
}

.signature-card img {
    opacity:
        1;

    visibility:
        visible;
}

.signature-card:hover {
    transform:
        scale(1.07);

    border-color:
        #888;

    z-index:
        10;
}

.signature-id {
    position:
        absolute;

    left:
        7px;

    bottom:
        7px;

    padding:
        4px 6px;

    background:
        rgba(
            0,
            0,
            0,
            0.72
        );

    opacity:
        0;

    font-size:
        10px;

    pointer-events:
        none;
}

.signature-card:hover
.signature-id {
    opacity:
        1;
}


/* =========================================
   3D FIENDZ
========================================= */

.three-d-section {
    width:
        min(
            1240px,
            calc(100% - 80px)
        );

    margin:
        0 auto;

    padding:
        32px 0
        40px;

    display:
        grid;

    grid-template-columns:
        minmax(
            240px,
            0.72fr
        )
        minmax(
            320px,
            1fr
        );

    align-items:
        center;

    gap:
        clamp(
            45px,
            7vw,
            110px
        );

    border-top:
        1px solid #1d1d1d;
}

.three-d-preview {
    position:
        relative;

    width:
        100%;

    max-width:
        320px;

    aspect-ratio:
        1 / 1;

    justify-self:
        end;

    perspective:
        1200px;
}

.three-d-glow {
    position:
        absolute;

    width:
        75%;

    height:
        75%;

    left:
        50%;

    top:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );

    border-radius:
        50%;

    background:
        rgba(
            255,
            255,
            255,
            0.1
        );

    filter:
        blur(75px);

    pointer-events:
        none;
}

.model-card {
    position:
        relative;

    width:
        100%;

    height:
        100%;

    padding:
        0;

    border:
        none;

    background:
        transparent;

    cursor:
        pointer;

    perspective:
        1200px;

    z-index:
        2;

    touch-action:
        manipulation;
}

.model-card-inner {
    position:
        relative;

    width:
        100%;

    height:
        100%;

    transform-style:
        preserve-3d;

    transition:
        transform
        0.8s
        cubic-bezier(
            0.2,
            0.75,
            0.2,
            1
        );
}

.model-card.flipped
.model-card-inner {
    transform:
        rotateY(180deg);
}

.model-card-face {
    position:
        absolute;

    inset:
        0;

    overflow:
        hidden;

    backface-visibility:
        hidden;

    border:
        1px solid #292929;

    background:
        #090909;
}

.model-card-face img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}

.model-card-front {
    transform:
        rotateY(0deg);
}

.model-card-back {
    transform:
        rotateY(180deg);
}

.model-view-label {
    position:
        absolute;

    left:
        12px;

    bottom:
        12px;

    padding:
        6px 8px;

    background:
        rgba(
            0,
            0,
            0,
            0.72
        );

    color:
        #b0b0b0;

    font-size:
        10px;

    letter-spacing:
        0.14em;

    pointer-events:
        none;
}

.flip-hint {
    position:
        absolute;

    left:
        50%;

    bottom:
        -24px;

    transform:
        translateX(-50%);

    width:
        max-content;

    color:
        #666;

    font-size:
        9px;

    letter-spacing:
        0.14em;

    pointer-events:
        none;
}

.three-d-copy {
    max-width:
        460px;

    margin:
        16px 0
        22px;

    color:
        #999;

    font-size:
        15px;

    line-height:
        1.6;
}

.three-d-actions {
    display:
        flex;

    gap:
        8px;

    flex-wrap:
        wrap;
}

.three-d-primary,
.three-d-secondary {
    min-width:
        190px;

    padding:
        12px 14px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        space-between;

    text-decoration:
        none;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        0.09em;
}

.three-d-primary {
    background:
        white;

    color:
        black;

    border:
        1px solid white;
}

.three-d-secondary {
    color:
        white;

    border:
        1px solid #383838;
}


/* =========================================
   COMMUNITY
========================================= */

.community-strip {
    min-height:
        62px;

    padding:
        0 40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        15px;

    border-top:
        1px solid #1d1d1d;

    color:
        #666;
}

.community-strip strong {
    color:
        #999;

    font-size:
        11px;

    letter-spacing:
        0.12em;
}

.community-strip span {
    font-size:
        10px;

    letter-spacing:
        0.12em;
}


/* =========================================
   MODAL
========================================= */

.fiend-modal {
    position:
        fixed;

    inset:
        0;

    padding:
        35px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    background:
        rgba(
            2,
            2,
            2,
            0.97
        );

    backdrop-filter:
        blur(14px);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;

    z-index:
        1000;

    isolation:
        isolate;
}

.fiend-modal.open {
    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;
}

.modal-close {
    position:
        absolute;

    right:
        28px;

    top:
        22px;

    width:
        46px;

    height:
        46px;

    border:
        1px solid #333;

    background:
        #080808;

    color:
        white;

    cursor:
        pointer;

    font-size:
        28px;

    z-index:
        30;

    touch-action:
        manipulation;
}

.modal-inner {
    width:
        min(
            980px,
            100%
        );

    display:
        grid;

    grid-template-columns:
        minmax(
            320px,
            1fr
        )
        minmax(
            260px,
            0.65fr
        );

    align-items:
        center;

    gap:
        clamp(
            35px,
            6vw,
            75px
        );

    position:
        relative;

    z-index:
        10;
}

.modal-art {
    position:
        relative;

    width:
        100%;

    aspect-ratio:
        1 / 1;

    overflow:
        hidden;

    border:
        1px solid #303030;

    background:
        #080808;

    transition:
        box-shadow 0.4s ease;
}

.modal-art img,
.modal-video {
    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        contain;
}

.modal-art img {
    opacity:
        1;

    visibility:
        visible;
}

.modal-video {
    display:
        none;
}

.scan-line {
    position:
        absolute;

    left:
        0;

    width:
        100%;

    height:
        1px;

    background:
        rgba(
            255,
            255,
            255,
            0.35
        );

    pointer-events:
        none;

    animation:
        scan-line
        3.5s
        linear
        infinite;
}

@keyframes scan-line {

    from {
        top:
            0;
    }

    to {
        top:
            100%;
    }

}

.modal-info h2 {
    margin:
        0 0
        22px;

    font-size:
        clamp(
            38px,
            5vw,
            65px
        );

    line-height:
        0.9;

    letter-spacing:
        -0.05em;
}

.modal-era-controls {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        5px;

    margin-bottom:
        16px;

    position:
        relative;

    z-index:
        20;
}

.modal-era-controls button {
    padding:
        8px 10px;

    border:
        1px solid #292929;

    background:
        transparent;

    color:
        #7b7b7b;

    cursor:
        pointer;

    font-size:
        10px;

    letter-spacing:
        0.09em;

    touch-action:
        manipulation;
}

.modal-era-controls button.active {
    background:
        white;

    border-color:
        white;

    color:
        black;
}

.modal-actions {
    display:
        flex;

    gap:
        8px;

    flex-wrap:
        wrap;
}

.modal-opensea,
.modal-hypha {
    padding:
        10px 13px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        18px;

    text-decoration:
        none;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    touch-action:
        manipulation;
}

.modal-opensea {
    background:
        white;

    color:
        black;
}

.modal-hypha {
    border:
        1px solid #333;

    color:
        white;
}


/* =========================================
   WARP
========================================= */

.warp-background {
    position:
        absolute;

    inset:
        0;

    overflow:
        hidden;

    pointer-events:
        none;

    opacity:
        0;

    transition:
        opacity 0.45s ease;

    z-index:
        1;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(
                79,
                47,
                140,
                0.42
            ),
            rgba(
                6,
                7,
                18,
                0.92
            )
            44%,
            #010101
            76%
        );
}

.fiend-modal.warp-active
.warp-background {
    opacity:
        1;
}

.warp-core {
    position:
        absolute;

    width:
        430px;

    height:
        430px;

    left:
        50%;

    top:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                255,
                255,
                255,
                0.18
            ),
            rgba(
                110,
                74,
                255,
                0.16
            )
            22%,
            rgba(
                49,
                166,
                255,
                0.10
            )
            42%,
            transparent
            68%
        );

    filter:
        blur(10px);

    animation:
        warp-core-pulse
        3s
        ease-in-out
        infinite;
}

@keyframes warp-core-pulse {

    0%,
    100% {

        transform:
            translate(
                -50%,
                -50%
            )
            scale(0.9);

        opacity:
            0.55;

    }

    50% {

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1.12);

        opacity:
            1;

    }

}

.warp-star {
    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        2px;

    height:
        95px;

    border-radius:
        999px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(
                255,
                255,
                255,
                0.95
            )
        );

    transform-origin:
        50% 100%;

    opacity:
        0;

    animation:
        warp-star-move
        1.45s
        linear
        infinite;

    animation-play-state:
        paused;
}

.fiend-modal.warp-active
.warp-star {
    animation-play-state:
        running;
}

@keyframes warp-star-move {

    0% {

        opacity:
            0;

        transform:
            translate(
                -50%,
                -50%
            )
            rotate(
                var(--angle)
            )
            translateY(-15px)
            scaleY(0.2);

    }

    20% {
        opacity:
            1;
    }

    100% {

        opacity:
            0;

        transform:
            translate(
                -50%,
                -50%
            )
            rotate(
                var(--angle)
            )
            translateY(-850px)
            scaleY(3);

    }

}

.s1  { --angle: 0deg; animation-delay: 0s; }
.s2  { --angle: 18deg; animation-delay: -0.4s; }
.s3  { --angle: 36deg; animation-delay: -0.8s; }
.s4  { --angle: 54deg; animation-delay: -1.2s; }
.s5  { --angle: 72deg; animation-delay: -0.3s; }
.s6  { --angle: 90deg; animation-delay: -1s; }
.s7  { --angle: 108deg; animation-delay: -0.6s; }
.s8  { --angle: 126deg; animation-delay: -1.3s; }
.s9  { --angle: 144deg; animation-delay: -0.15s; }
.s10 { --angle: 162deg; animation-delay: -0.75s; }
.s11 { --angle: 180deg; animation-delay: -1.1s; }
.s12 { --angle: 198deg; animation-delay: -0.5s; }
.s13 { --angle: 216deg; animation-delay: -1.35s; }
.s14 { --angle: 234deg; animation-delay: -0.25s; }
.s15 { --angle: 252deg; animation-delay: -0.9s; }
.s16 { --angle: 270deg; animation-delay: -1.15s; }
.s17 { --angle: 288deg; animation-delay: -0.65s; }
.s18 { --angle: 306deg; animation-delay: -1.4s; }
.s19 { --angle: 324deg; animation-delay: -0.1s; }
.s20 { --angle: 342deg; animation-delay: -0.7s; }

.fiend-modal.warp-active
.modal-art {
    box-shadow:
        0 0 35px
        rgba(
            76,
            105,
            255,
            0.20
        ),
        0 0 90px
        rgba(
            112,
            60,
            255,
            0.13
        );
}


/* =========================================
   WARP TOGGLE
========================================= */

.warp-toggle {
    margin:
        0 0
        18px;

    padding:
        8px 10px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    border:
        1px solid #292929;

    background:
        rgba(
            8,
            8,
            8,
            0.8
        );

    color:
        #7b7b7b;

    cursor:
        pointer;

    font-size:
        9px;

    letter-spacing:
        0.12em;

    transition:
        border-color 0.2s ease,
        color 0.2s ease,
        background 0.2s ease;

    touch-action:
        manipulation;
}

.warp-toggle:hover {
    color:
        white;

    border-color:
        #555;
}

.warp-state {
    min-width:
        18px;

    text-align:
        left;
}

.warp-switch {
    position:
        relative;

    width:
        27px;

    height:
        14px;

    display:
        inline-block;

    border:
        1px solid #333;

    border-radius:
        999px;

    background:
        #111;

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.warp-switch-dot {
    position:
        absolute;

    width:
        8px;

    height:
        8px;

    left:
        2px;

    top:
        2px;

    border-radius:
        50%;

    background:
        #555;

    transition:
        left 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.warp-toggle.active {
    color:
        white;

    border-color:
        rgba(
            126,
            101,
            255,
            0.55
        );

    background:
        rgba(
            48,
            28,
            76,
            0.32
        );
}

.warp-toggle.active
.warp-switch {
    border-color:
        rgba(
            117,
            97,
            255,
            0.75
        );

    background:
        rgba(
            71,
            46,
            121,
            0.55
        );

    box-shadow:
        0 0 12px
        rgba(
            90,
            79,
            255,
            0.3
        );
}

.warp-toggle.active
.warp-switch-dot {
    left:
        15px;

    background:
        white;

    box-shadow:
        0 0 8px
        rgba(
            255,
            255,
            255,
            0.8
        );
}

.fiend-modal.signature-mode
.warp-toggle {
    display:
        none;
}


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

@media (max-width: 900px) {

    .signature-grid {
        grid-template-columns:
            repeat(
                5,
                1fr
            );
    }

}


/* =========================================
   PHONE
========================================= */

@media (max-width: 700px) {

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

    .top-bar {
        height:
            82px;

        position:
            relative;

        z-index:
            500;
    }

    .menu-button {
        left:
            24px;

        width:
            44px;

        height:
            44px;

        display:
            flex;

        flex-direction:
            column;

        justify-content:
            center;

        align-items:
            flex-start;

        z-index:
            530;
    }

    .menu-button span {
        width:
            30px;

        margin:
            4px 0;
    }

    .dropdown-menu {
        left:
            24px;

        top:
            62px;

        width:
            200px;

        z-index:
            540;
    }

    .dropdown-menu a {
        min-height:
            48px;

        display:
            flex;

        align-items:
            center;

        padding:
            12px 18px;
    }

    .nav-fiend {
        width:
            100px;

        z-index:
            505;

        pointer-events:
            none;
    }


    /* =====================================
       INTRO
    ===================================== */

    .gallery-intro {
        width:
            calc(
                100% - 36px
            );

        min-height:
            0;

        padding:
            26px 0
            30px;

        display:
            block;
    }

    .gallery-intro h1 {
        font-size:
            clamp(
                34px,
                11vw,
                48px
            );

        line-height:
            0.95;

        overflow-wrap:
            normal;
    }

    .intro-copy {
        margin-top:
            24px;

        font-size:
            15px;

        line-height:
            1.5;
    }


    /* =====================================
       COLLECTION HEADER
    ===================================== */

    .collection-section {
        padding-top:
            20px;
    }

    .section-header,
    .compact-header {
        width:
            calc(
                100% - 36px
            );

        margin-left:
            auto;

        margin-right:
            auto;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            18px;
    }

    .section-only-label {
        width:
            100%;
    }


    /* =====================================
       ERA BUTTONS
    ===================================== */

    .era-controls,
    .one-one-era-controls {
        width:
            100%;

        display:
            grid;

        grid-template-columns:
            repeat(
                3,
                1fr
            );

        gap:
            6px;

        position:
            relative;

        z-index:
            40;

        pointer-events:
            auto;
    }

    .era-button,
    .one-one-era-button {
        min-width:
            0;

        min-height:
            48px;

        padding:
            11px 5px;

        font-size:
            10px;

        white-space:
            nowrap;

        position:
            relative;

        z-index:
            41;

        pointer-events:
            auto;

        touch-action:
            manipulation;
    }

    .era-button:hover,
    .one-one-era-button:hover {
        transform:
            none;
    }


    /* =====================================
       MOBILE FILM PROJECTOR
    ===================================== */

    .film-projector {
        padding:
            25px 0;

        overflow:
            hidden;
    }

    .film-window {
        width:
            100%;

        overflow-x:
            auto;

        overflow-y:
            hidden;

        -webkit-overflow-scrolling:
            touch;

        scroll-snap-type:
            x mandatory;

        scrollbar-width:
            none;

        overscroll-behavior-x:
            contain;

        /*
           Allows horizontal swipe while
           still permitting vertical page
           scrolling.
        */
        touch-action:
            pan-x pan-y;

        position:
            relative;

        z-index:
            2;
    }

    .film-window::-webkit-scrollbar {
        display:
            none;
    }

    .film-track {
        animation:
            none !important;

        transform:
            none !important;

        will-change:
            auto;

        width:
            max-content;

        gap:
            12px;

        padding:
            0 18px;

        min-height:
            1px;

        transition:
            none;
    }

    .film-projector:hover
    .film-track {
        animation-play-state:
            initial;
    }

    .film-fade {
        display:
            none;
    }


    /* =====================================
       MOBILE FILM CARDS
    ===================================== */

    .film-frame {
        flex:
            0 0
            min(
                72vw,
                290px
            );

        scroll-snap-align:
            center;

        scroll-snap-stop:
            normal;

        padding:
            5px;

        transform:
            none;

        position:
            relative;

        z-index:
            3;
    }

    .film-frame:hover {
        transform:
            none;
    }

    .film-frame:active {
        border-color:
            #666;
    }

    .frame-art {
        background:
            #0b0b0b;
    }

    .frame-art img {
        backface-visibility:
            hidden;

        transform:
            translateZ(0);

        opacity:
            1;

        visibility:
            visible;

        -webkit-user-drag:
            none;

        user-select:
            none;
    }

    .film-frame:hover
    .frame-art img {
        transform:
            translateZ(0);
    }

    .frame-shine {
        display:
            none;
    }

    .frame-id {
        font-size:
            11px;

        padding:
            5px 7px;
    }

    .frame-meta {
        padding-top:
            8px;
    }


    /* =====================================
       COLLECTION FOOTER
    ===================================== */

    .collection-footer {
        width:
            calc(
                100% - 36px
            );

        grid-template-columns:
            auto 1fr;

        grid-template-areas:
            "shuffle collection"
            "instruction instruction";

        gap:
            10px 12px;

        margin-top:
            16px;
    }

    .shuffle-button {
        grid-area:
            shuffle;

        min-height:
            44px;

        justify-self:
            start;
    }

    .opensea-button {
        grid-area:
            collection;

        min-height:
            44px;

        justify-self:
            stretch;

        justify-content:
            space-between;
    }

    .film-instruction {
        grid-area:
            instruction;

        justify-self:
            center;

        padding-top:
            4px;

        font-size:
            9px;
    }

    .film-instruction::before {
        content:
            "SWIPE REEL • ";
    }


    /* =====================================
       1/1 ARCHIVE
    ===================================== */

    .one-one-section {
        padding-top:
            30px;
    }

    .one-one-section
    .section-header {
        align-items:
            stretch;
    }

    .signature-grid {
        width:
            calc(
                100% - 36px
            );

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        gap:
            10px;

        align-items:
            start;
    }

    .signature-card {
        width:
            100%;

        transform:
            none;

        background:
            #0b0b0b;

        z-index:
            2;
    }

    .signature-card:hover {
        transform:
            none;
    }

    .signature-card img,
    .signature-card video {
        transform:
            translateZ(0);

        backface-visibility:
            hidden;
    }

    .signature-card img {
        opacity:
            1;

        visibility:
            visible;

        -webkit-user-drag:
            none;

        user-select:
            none;
    }

    .signature-id {
        opacity:
            1;
    }


    /* =====================================
       3D
    ===================================== */

    .three-d-section {
        width:
            calc(
                100% - 36px
            );

        grid-template-columns:
            1fr;

        gap:
            48px;

        padding:
            40px 0;
    }

    .three-d-preview {
        width:
            min(
                100%,
                320px
            );

        justify-self:
            center;
    }

    .model-card-face img {
        display:
            block;
    }

    .three-d-info {
        min-width:
            0;
    }

    .three-d-actions {
        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            8px;
    }

    .three-d-primary,
    .three-d-secondary {
        width:
            100%;

        min-width:
            0;

        min-height:
            46px;
    }


    /* =====================================
       COMMUNITY
    ===================================== */

    .community-strip {
        padding:
            20px 18px;

        min-height:
            70px;

        flex-wrap:
            wrap;

        text-align:
            center;
    }


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

    .fiend-modal {
        padding:
            70px 18px
            calc(
                24px +
                env(
                    safe-area-inset-bottom
                )
            );

        overflow-x:
            hidden;

        overflow-y:
            auto;

        align-items:
            flex-start;

        -webkit-overflow-scrolling:
            touch;

        z-index:
            1000;
    }

    .modal-close {
        position:
            absolute;

        top:
            calc(
                14px +
                env(
                    safe-area-inset-top
                )
            );

        right:
            18px;

        width:
            44px;

        height:
            44px;

        z-index:
            1100;
    }

    .modal-inner {
        width:
            100%;

        grid-template-columns:
            minmax(
                0,
                1fr
            );

        gap:
            26px;
    }

    .modal-art {
        width:
            100%;

        max-width:
            500px;

        margin:
            0 auto;
    }

    .modal-art img {
        opacity:
            1;

        visibility:
            visible;

        transform:
            translateZ(0);
    }

    .modal-info {
        min-width:
            0;

        padding-bottom:
            30px;
    }

    .modal-info h2 {
        font-size:
            clamp(
                38px,
                13vw,
                58px
            );
    }

    .modal-era-controls {
        display:
            grid;

        grid-template-columns:
            repeat(
                3,
                1fr
            );

        width:
            100%;

        gap:
            5px;

        position:
            relative;

        z-index:
            30;
    }

    .modal-era-controls button {
        min-width:
            0;

        min-height:
            44px;

        padding:
            8px 4px;

        position:
            relative;

        z-index:
            31;
    }

    .warp-toggle {
        min-height:
            44px;
    }

    .modal-actions {
        display:
            grid;

        grid-template-columns:
            1fr;

        width:
            100%;

        gap:
            8px;
    }

    .modal-opensea,
    .modal-hypha {
        width:
            100%;

        min-height:
            46px;

        justify-content:
            space-between;
    }

}


/* =========================================
   EXTRA SMALL PHONES
========================================= */

@media (max-width: 390px) {

    .film-frame {
        flex-basis:
            78vw;
    }

    .gallery-intro h1 {
        font-size:
            34px;
    }

    .era-button,
    .one-one-era-button {
        font-size:
            9px;

        letter-spacing:
            0.06em;
    }

    .collection-footer {
        grid-template-columns:
            1fr;

        grid-template-areas:
            "shuffle"
            "collection"
            "instruction";
    }

    .shuffle-button,
    .opensea-button {
        width:
            100%;

        justify-self:
            stretch;

        justify-content:
            space-between;
    }

}


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

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

    .film-track {
        animation:
            none !important;
    }

    .nav-fiend,
    .scan-line,
    .warp-core,
    .warp-star {
        animation:
            none !important;
    }

}