body {
    margin: 0;
    background: #000;
    color: #e8e8e8;
    font-family: "Courier New", monospace;
}

.entrance {
    height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
}

.entrance h1 {
    margin: 0;
    font-size: 42px;
    font-weight: normal;
    letter-spacing: 12px;
}

.entrance p {
    margin: 18px 0 42px;
    font-size: 12px;
    letter-spacing: 4px;
    color: #888;
}

.entrance button {
    border: 0;
    background: none;
    color: #666;
    font-family: inherit;
    font-size: 13px;
    letter-spacing: 5px;
    cursor: pointer;
    transition: 0.2s;
}

.entrance button:hover {
    color: #fff;
    text-shadow: 0 0 12px #fff;
}
.archive {
    display: none;
}
.archive {
    width: 100%;
    min-height: 100vh;

    grid-template-columns: 220px 220px 220px;
    grid-template-rows: auto auto;
    gap: 60px 80px;

    align-content: start;

    box-sizing: border-box;
    padding: 70px;
}

.archive h2 {
    margin: 0 0 18px 0;

    font-size: 15px;
    font-weight: normal;
    letter-spacing: 3px;
}

.archive p {
    margin: 8px 0;

    font-size: 13px;
    letter-spacing: 1px;
}
.archive-link {
    cursor: pointer;
    transition: 0.2s;
}

.archive-link:hover {
    color: #fff;
    text-shadow: 0 0 10px #fff;
}
.azazel {
    display: none;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 70px;
}

.azazel-content {
    text-align: center;
    margin-top: 30vh;
}

.azazel-content h1 {
    font-size: 42px;
    font-weight: normal;
    letter-spacing: 14px;
}

.azazel-content p {
    color: #888;
    font-size: 12px;
    letter-spacing: 5px;
}

.back-button {
    border: 0;
    background: none;
    color: #888;
    font-family: inherit;
    letter-spacing: 2px;
    cursor: pointer;
    position: fixed;
top: 60px;
left: 60px;
z-index: 100;
}

.back-button:hover {
    color: #fff;
}
.tracklist {
    width: min(720px, 80vw);
    margin: 70px auto 120px;
    text-align: left;
}

.track {
    display: grid;
    grid-template-columns: 50px 1fr 60px;
    gap: 20px;

    padding: 12px 0;

    font-size: 12px;
    letter-spacing: 2px;
    color: #888;

    border-bottom: 1px solid #161616;
}

.track span:last-child {
    text-align: right;
}

.track:hover {
    color: #fff;
    text-shadow: 0 0 10px #fff;
}
.home-button {
    position: fixed;
    top: 25px;
    left: 60px;
    z-index: 9999;

    border: 0;
    padding: 0;
    background: transparent;
    color: #888;
    font-family: inherit;
    font-size: 12px;
    letter-spacing: 2px;
    cursor: pointer;
}

.home-button:hover {
    color: #fff;
    text-shadow: 0 0 10px #fff;
}
.release-info {
    width: min(720px, 80vw);
    margin: 0 auto 140px;
    text-align: left;
}

.release-block {
    margin-top: 70px;
}

.release-block h2 {
    margin: 0 0 22px;
    color: #888;
    font-size: 11px;
    font-weight: normal;
    letter-spacing: 5px;
}

.release-block p,
.release-block a {
    display: block;
    margin: 10px 0;
    color: #888;
    font-size: 11px;
    letter-spacing: 2px;
    text-decoration: none;
}

.release-block a:hover {
    color: #fff;
    text-shadow: 0 0 10px #fff;
}
.release-footer {
    margin-top: 140px;
    padding-bottom: 40px;

    font-size: 9px;
    letter-spacing: 4px;
    color: #444;

    text-align: center;
}
.collarbone {
    display: none;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 70px;
}
.dudael {
    display: none;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 70px;
}
.skin-graft {
    display: none;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 70px;
}
.bwd {
    display: none;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 70px;
}
.toenail-broth {
    display: none;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 70px;
}
.alone {
    display: none;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 70px;
}
.flesh {
    display: none;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 70px;
}
.cuts1 {
    display: none;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 70px;
}

.cuts-header {
    text-align: center;
    margin: 30px 0 120px;
}

.cuts-header h1 {
    font-size: 42px;
    font-weight: normal;
    letter-spacing: 14px;
}

.cuts-header p {
    color: #888;
    font-size: 12px;
    letter-spacing: 5px;
}

.cuts-gallery {
    width: min(1000px, 85vw);
    margin: 0 auto;
}

.cuts-piece {
    display: flex;
    align-items: center;
    gap: 80px;
    margin-bottom: 160px;
}

.cuts-piece.reverse {
    flex-direction: row-reverse;
}

.cuts-cover {
    width: min(420px, 42vw);
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.cuts-details {
    flex: 1;
}

.cuts-details h2 {
    font-size: 25px;
    font-weight: normal;
    letter-spacing: 7px;
    margin: 10px 0;
}

.cuts-number,
.cuts-duration {
    color: #888;
    font-size: 11px;
    letter-spacing: 3px;
}

.cuts-details a {
    display: block;
    color: #aaa;
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 3px;
    margin-top: 15px;
}

.cuts-details a:hover {
    color: #fff;
}

.cuts-unavailable {
    color: #555;
    font-size: 10px;
    letter-spacing: 3px;
    margin-top: 15px;
}

.cuts-credits {
    margin-top: 35px;
    color: #666;
    font-size: 10px;
    letter-spacing: 2px;
    line-height: 1.8;
}
@media (max-width: 700px) {
    .cuts1 {
        padding: 30px;
    }

    .cuts-piece,
    .cuts-piece.reverse {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
        margin-bottom: 100px;
    }

    .cuts-cover {
        width: 100%;
    }

    .cuts-gallery {
        width: 100%;
    }
}
.cuts2 {
    display: none;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 70px;
}

.cuts2-gallery {
    width: min(900px, 85vw);
    min-height: 650px;
    margin: 0 auto;
    display: block;
    justify-content: center;
    align-items: flex-start;
}

.cuts2-piece {
    text-align: center;
    margin-top: 80px;
}


.cuts2-piece h2 {
    font-size: 25px;
    font-weight: normal;
    letter-spacing: 8px;
    margin: 20px 0;
}

.cuts2-piece a {
    display: block;
    color: #aaa;
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 3px;
    margin-top: 30px;
}

.cuts2-piece a:hover {
    color: #fff;
}

.cuts2-piece .cuts-credits {
    margin-top: 60px;
}
/* PEOPLE */

.person {
    display: none;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 70px;
}

.person-header {
    width: min(800px, 80vw);
    margin: 70px auto 120px;
}

.person-index {
    color: #555;
    font-size: 10px;
    letter-spacing: 4px;
    margin-bottom: 25px;
}

.person-header h1 {
    font-size: 42px;
    font-weight: normal;
    letter-spacing: 14px;
    margin: 0;
}

.person-role {
    color: #888;
    font-size: 11px;
    letter-spacing: 5px;
    margin-top: 20px;
}

.person-record {
    width: min(800px, 80vw);
    margin: 0 auto 140px;
}

.person-section {
    margin-bottom: 90px;
}

.person-section h2 {
    color: #666;
    font-size: 10px;
    font-weight: normal;
    letter-spacing: 5px;
    margin-bottom: 35px;
}

.person-credit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    border-top: 1px solid #222;
    padding: 18px 0;
    font-size: 11px;
    letter-spacing: 2px;
}

.person-credit span:last-child {
    color: #777;
    text-align: right;
}

.person-section a {
    display: block;
    width: fit-content;
    color: #aaa;
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 3px;
    margin: 15px 0;
}

.person-section a:hover {
    color: #fff;
}

.person-unavailable,
.person-placeholder p {
    color: #555;
    font-size: 10px;
    letter-spacing: 3px;
}

@media (max-width: 700px) {
    .person {
        padding: 30px;
    }

    .person-header,
    .person-record {
        width: 100%;
    }

    .person-header {
        margin-top: 80px;
        margin-bottom: 90px;
    }

    .person-header h1 {
        font-size: 30px;
        letter-spacing: 8px;
    }

    .person-credit {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .person-credit span:last-child {
        text-align: left;
    }
}
.archive a.archive-link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.visual-file-name {
    color: #666;
    font-size: 10px;
    letter-spacing: 3px;
    margin-bottom: 20px;
}

.visual-toggle {
    border: 0;
    padding: 0;
    background: none;
    color: #aaa;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 3px;
    cursor: pointer;
}

.visual-toggle:hover {
    color: #fff;
}

.visual-player {
    display: none;
    width: min(900px, 100%);
    margin: 40px auto 0;
}
.cuts2-visual {
    width: min(640px, 100%);
}

.video-container {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.video-container iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
/* MOBILE — ENTRANCE + DIRECTORY */

@media (max-width: 700px) {

    .entrance h1 {
        font-size: 46px;
        letter-spacing: 10px;
    }

    .entrance p {
        font-size: 16px;
        line-height: 2;
    }

    .entrance button {
        font-size: 16px;
        padding: 16px 0;
    }

    .archive h2 {
        font-size: 18px;
        margin-bottom: 18px;
    }

    .archive-link {
        font-size: 16px;
        line-height: 2.2;
    }
}
.archive {
    grid-template-columns: 1fr;
    gap: 45px;
    padding: 70px 30px 40px;
    min-height: 100vh;
    box-sizing: border-box;
}

.archive > div {
    width: 100%;
}

.archive h2 {
    font-size: 16px;
    margin-bottom: 14px;
}

.archive-link {
    font-size: 14px;
    line-height: 1.8;
    margin: 6px 0;
}

.home-button {
    top: 25px;
    left: 25px;
}
/* MOBILE — DISK + SINGLE RELEASE PAGES */

.azazel,
.collarbone,
.dudael,
.skin-graft,
.bwd,
.toenail-broth,
.alone,
.flesh {
    padding: 80px 25px 40px;
}

.azazel-content {
    margin-top: 20px;
}

.azazel-content h1 {
    font-size: 28px;
    letter-spacing: 7px;
    line-height: 1.5;
    overflow-wrap: break-word;
}

.azazel-content p {
    font-size: 11px;
    letter-spacing: 4px;
}

.azazel-cover {
    width: 100%;
    max-width: 420px;
    height: auto;
}

.tracklist {
    width: 100%;
    margin: 50px auto 80px;
}

.track {
    grid-template-columns: 30px minmax(0, 1fr) 45px;
    gap: 10px;
    font-size: 11px;
}

.release-info,
.release-block {
    width: 100%;
    box-sizing: border-box;
}

.back-button {
    top: 25px;
    left: 25px;
}
/* VUU — VISUAL BACKGROUND */

.vuu {
    position: relative;
    overflow: hidden;
    background: #000;
}

.vuu-background {
    position: absolute;
    top: 0;
    right: -100px;

    width: 55%;
    height: 100vh;

    background-image: url("images/vuu.jpg");
    background-size: auto 110%;
    background-position: center top;
    background-repeat: no-repeat;

    filter: grayscale(100%) contrast(115%) brightness(65%);

-webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    transparent 20%,
    rgba(0, 0, 0, 0.25) 42%,
    black 72%
);

mask-image: linear-gradient(
    to right,
    transparent 0%,
    transparent 20%,
    rgba(0, 0, 0, 0.25) 42%,
    black 72%
);

    pointer-events: none;
    z-index: 0;
}


/* ZILL — COLOUR BACKGROUND */

.zill {
    position: relative;
    overflow: hidden;
    background: #000;
}

.zill-background {
    position: absolute;
    top: 0;
    right: -60px;
    width: 60%;
    height: 100vh;

    background-image: url("images/Zill.jpg");
    background-size: auto 85%;
    background-position: center bottom;
    background-repeat: no-repeat;
    filter: brightness(75%) contrast(105%) saturate(110%);

    


-webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 35%,
    black 100%
);

mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 35%,
    black 100%
);




    pointer-events: none;
}

.zill > *:not(.zill-background) {
    position: relative;
    z-index: 1;
}


.vuu .back-button,
.vuu .person-header,
.vuu .person-record {
    position: relative;
    z-index: 1;
}
.vuu::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 55%;
    height: 90px;

    background: linear-gradient(
        to bottom,
        #000 0%,
        transparent 100%
    );

    z-index: 1;
    pointer-events: none;
}
.vuu::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 90px;
    height: 100vh;

    background: linear-gradient(
        to left,
        #000 0%,
        transparent 100%
    );

    z-index: 1;
    pointer-events: none;
}
@media (max-width: 600px) {
    .vuu-background {
        right: 0;
        background-size: auto 98%;
    }
}
.dudael-home-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background-image: url("images/Dudael.JPG");
    background-size: cover;
    background-position: center;

    filter: blur(18px) brightness(35%);
    opacity: 0.55;

    transform: scale(1.08);
}
.dudael-entrance-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background-image: url("images/Dudael.JPG");
    background-size: cover;
    background-position: center;

    filter: blur(22px) brightness(28%);
    opacity: 0.5;

    transform: scale(1.08);
}

.entrance > *:not(.dudael-entrance-bg) {
    position: relative;
    z-index: 1;
}
@media (min-width: 601px) {
    .archive {
        grid-template-columns: repeat(5, 1fr);
    }
}
.entrance h1 {
    font-size: 48px !important;
}

.entrance p {
    font-size: 17px !important;
}

.entrance button {
    font-size: 28px !important;
    letter-spacing: 10px;
    color: #ccc;
}
.entrance h1 {
    font-size: 56px !important;
}
.entrance > p {
    font-size: 16px !important;
}
/* DUDAEL — MIST BACKGROUND */

.dudael {
    position: relative;
    isolation: isolate;
}

.dudael::before {
    content: "";
    position: absolute;
    inset: 0;

    background: url("images/dudael-mist.jpeg") center top / cover no-repeat;
    opacity: 0.18;

    z-index: -1;
    pointer-events: none;
}
.dudael .tracklist {
    width: min(700px, 80vw);
    margin-left: auto;
    margin-right: auto;
}
.dudael .release-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 120px;

    width: min(1200px, 90vw);
    margin: 380px auto 35px;
}

.dudael .release-block {
    width: 100%;
    box-sizing: border-box;
}
.dudael-words {
    width: min(1100px, 85vw);
    margin: 120px auto -120px;

    display: flex;
    justify-content: space-between;

    font-size: 34px;
    letter-spacing: 14px;
    color: rgba(255, 255, 255, 0.035);

    filter: blur(1px);
    user-select: none;
}
@media (max-width: 600px) {

    .dudael-words {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 55px;
        text-align: center;
    }
    .dudael .release-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
    width: 100%;
}

.dudael .release-block {
    min-width: 0;
}
.dudael .release-info .release-block:nth-child(3) {
    grid-column: 1 / -1;
    text-align: center;
}

}
/* AZAZEL — EXHIBIT */

.azazel-exhibit {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #000;
}

.azazel-chaos {
    position: absolute;
    object-fit: cover;
}
.azazel-chaos-main {
    width: 42vw;
    height: 14vw;
    max-width: 720px;
    max-height: 720px;
    object-position: center 70%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 18%, black 82%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black 18%, black 82%, transparent 100%);

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

    z-index: 2;
    -webkit-mask-image: radial-gradient(
    ellipse at center,
    black 55%,
    rgba(0, 0, 0, 0.8) 72%,
    transparent 100%
);

mask-image: radial-gradient(
    ellipse at center,
    black 55%,
    rgba(0, 0, 0, 0.8) 72%,
    transparent 100%
);
}
.azazel-chaos-tnb {
    width: 34vw;
    height: 18vw;

    left: 4%;
    top: 12%;

    object-fit: cover;
    object-position: center 35%;

    filter: blur(3px) contrast(140%) brightness(55%);
    opacity: 0.55;

    z-index: 3;
}
.azazel-chaos-bwd {
    width: 26vw;
    height: 34vw;

    right: 5%;
    bottom: 7%;

    object-fit: cover;
    object-position: center;

    filter: blur(2px) contrast(135%) brightness(45%);
    opacity: 0.48;

    z-index: 1;
}
.azazel-label {
    position: absolute;
    z-index: 5;
    font-size: 9px;
    letter-spacing: 3px;
    line-height: 1.8;
    color: #666;
    pointer-events: none;
}

.azazel-label-a {
    left: 7%;
    bottom: 13%;
}
.azazel-label-b {
    right: 6%;
    top: 12%;
    text-align: right;
    color: #444;
}
@keyframes azazel-drift {
    0% {
        transform: translate(0, 0);
    }

    48.9% {
        transform: translate(8px, -4px);
    }

    49% {
        transform: translate(8px, 32px);
    }

    49.5% {
        transform: translate(8px, -4px);
    }

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

.azazel-chaos-tnb {
    animation: azazel-drift 14s ease-in-out infinite;
}
@keyframes bwd-signal-jump {
    0%, 88%, 100% {
        transform: translate(0, 0);
    }

    89% {
        transform: translate(-5px, 1px);
    }

    90% {
        transform: translate(4px, -1px);
    }

    91% {
        transform: translate(-2px, 0);
    }

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

.azazel-chaos-bwd {
    animation: bwd-signal-jump 9s steps(1) infinite;
}

@keyframes azazel-entry-spasm {
    0%   { transform: translate(0, 0) scale(1); }
    10%  { transform: translate(-18px, 7px) scale(1.03); }
    20%  { transform: translate(12px, -9px) scale(0.98); }
    30%  { transform: translate(-7px, -3px) scale(1.02); }
    40%  { transform: translate(20px, 5px) scale(1); }
    50%  { transform: translate(-13px, 8px) scale(1.04); }
    60%  { transform: translate(9px, -6px) scale(0.99); }
    70%  { transform: translate(-5px, 4px) scale(1.02); }
    80%  { transform: translate(7px, -2px) scale(1); }
    90%  { transform: translate(-3px, 1px) scale(1.01); }
    100% { transform: translate(0, 0) scale(1); }
}

.azazel-entering .azazel-chaos {
    animation: azazel-entry-spasm 650ms steps(1) !important;
}

.azazel-search {
    position: absolute;
    left: 0;
    top: 42%;
    width: 100%;
    z-index: 20;

    text-align: center;
    font-size: clamp(38px, 6vw, 100px);
    letter-spacing: 12px;
    color: #ddd;
    white-space: nowrap;
    pointer-events: none;
}

.azazel-search span {
    display: none;
}

.azazel-entering .azazel-search .searching {
    display: block;
    animation: search-one 650ms steps(1);
}

.azazel-entering .azazel-search .search-result {
    display: block;
    animation: search-two 650ms steps(1);
}

.azazel-entering .azazel-search .search-found {
    display: block;
    animation: search-three 650ms steps(1);
}

@keyframes search-one {
    0%, 27% { visibility: visible; }
    28%, 100% { visibility: hidden; }
}

@keyframes search-two {
    0%, 27% { visibility: hidden; }
    28%, 61% { visibility: visible; }
    62%, 100% { visibility: hidden; }
}

@keyframes search-three {
    0%, 61% { visibility: hidden; }
    62%, 100% { visibility: visible; }
}

.azazel-static {
    position: absolute;
    inset: 0;
    z-index: 15;
    pointer-events: none;
    opacity: 0.24;

    background-image:
        repeating-radial-gradient(
            circle at 20% 30%,
            rgba(255,255,255,0.22) 0px,
            rgba(255,255,255,0.22) 1px,
            transparent 1px,
            transparent 3px
        );

    background-size: 7px 7px;

    animation: azazel-static-move 0.45s steps(2) infinite;
}

@keyframes azazel-static-move {
    0% {
        transform: translate(0, 0);
        background-position: 0 0;
    }

    25% {
        transform: translate(-2px, 1px);
        background-position: 13px -7px;
    }

    50% {
        transform: translate(1px, -1px);
        background-position: -8px 11px;
    }

    75% {
        transform: translate(2px, 1px);
        background-position: 6px 17px;
    }

    100% {
        transform: translate(0, 0);
        background-position: 0 0;
    }
}

@keyframes azazel-eye-jitter {
    0%, 100% {
        transform: translate(-50%, -50%) translateX(0);
    }

    20% {
        transform: translate(-50%, -50%) translateX(-1px);
    }

    40% {
        transform: translate(-50%, -50%) translateX(2px);
    }

    60% {
        transform: translate(-50%, -50%) translateX(-2px);
    }

    80% {
        transform: translate(-50%, -50%) translateX(1px);
    }
}

.azazel-chaos-main {
    animation: azazel-eye-jitter 0.22s steps(1) infinite;
}

.azazel .track:nth-child(2)  { transform: translateX(9px); }
.azazel .track:nth-child(3)  { transform: translateX(-5px); }
.azazel .track:nth-child(4)  { transform: translateX(15px); }
.azazel .track:nth-child(5)  { transform: translateX(-9px); }
.azazel .track:nth-child(6)  { transform: translateX(5px); }
.azazel .track:nth-child(7)  { transform: translateX(-13px); }
.azazel .track:nth-child(8)  { transform: translateX(11px); }
.azazel .track:nth-child(9)  { transform: translateX(-4px); }
.azazel .track:nth-child(10) { transform: translateX(17px); }
.azazel .track:nth-child(11) { transform: translateX(-8px); }

.collarbone-exhibit {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.collarbone-painting-main {
    position: absolute;

    width: 520px;
    height: 310px;
    object-fit: cover;
    object-position: center 27%;

    left: 38%;
top: 38%;
    transform: translate(-50%, -50%);
}
.collarbone-painting-detail {
    position: absolute;

    width: 300px;
    height: 220px;
    object-fit: cover;
    object-position: center 73%;

    left: 68%;
    top: 63%;
    transform: translate(-50%, -50%);
    -webkit-mask-image: radial-gradient(
    ellipse at center,
    black 45%,
    rgba(0, 0, 0, 0.8) 62%,
    transparent 100%
);

mask-image: radial-gradient(
    ellipse at center,
    black 45%,
    rgba(0, 0, 0, 0.8) 62%,
    transparent 100%
);
}

@keyframes collarbone-angel-drift {
    0%, 100% {
        transform: translate(-50%, -50%);
    }

    50% {
        transform: translate(-50%, calc(-50% - 10px));
    }
}

.collarbone-painting-detail {
    animation: collarbone-angel-drift 12s ease-in-out infinite;
}

.collarbone-painting-nude {
    position: absolute;

    width: 300px;
height: 150px;
    object-fit: cover;
    object-position: left bottom;

    left: 25%;
    top: 72%;
    transform: translate(-50%, -50%);
}

@keyframes collarbone-nude-drift {
    0%, 100% {
        transform: translate(-50%, -50%);
    }

    50% {
        transform: translate(calc(-50% + 14px), -50%);
    }
}

.collarbone-painting-nude {
    animation: collarbone-nude-drift 16s ease-in-out infinite;
}

.collarbone-suture {
    position: absolute;
    left: 44%;
    top: 49%;

    width: 1px;
    height: 170px;

    background: #aaa;
    opacity: 0.30;

    transform: rotate(42deg);
    transform-origin: top;

    z-index: 5;
    pointer-events: none;
}

.suture-3 {
    left: 61%;
    top: 43%;
    height: 300px;
    opacity: 0.28;
    transform: rotate(52deg);
}

.suture-4 {
    left: 76%;
    top: 18%;
    height: 360px;
    opacity: 0.24;
    transform: rotate(-42deg);
}
.suture-5 {
    left: 37%;
    top: 58%;
    height: 285px;
    opacity: 0.38;
    transform: rotate(48deg);
}

.collarbone-subject {
    position: absolute;
    top: 10%;
    right: 12%;
    width: 180px;
    height: 130px;
    z-index: 6;
}

.collarbone-subject img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

    filter:
        grayscale(100%)
        contrast(145%)
        brightness(65%);
}

.collarbone-subject span {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);

    color: #888;
    font-size: 9px;
    letter-spacing: 3px;
    white-space: nowrap;
}

.collarbone-subject-grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.32;

    background-image:
        repeating-radial-gradient(
            circle at 30% 40%,
            rgba(255,255,255,0.35) 0px,
            rgba(255,255,255,0.35) 1px,
            transparent 1px,
            transparent 3px
        );

    background-size: 5px 5px;
    mix-blend-mode: overlay;

    animation: collarbone-grain 0.18s steps(2) infinite;
}

@keyframes collarbone-grain {
    0% {
        transform: translate(0, 0);
        background-position: 0 0;
    }

    25% {
        transform: translate(-1px, 1px);
        background-position: 7px -4px;
    }

    50% {
        transform: translate(1px, -1px);
        background-position: -5px 8px;
    }

    75% {
        transform: translate(-1px, 0);
        background-position: 4px 3px;
    }

    100% {
        transform: translate(0, 0);
        background-position: 0 0;
    }
}

.collarbone-graft-label {
    position: absolute;
    left: 21%;
top: 81%;
    z-index: 7;

    color: #888;
    font-size: 9px;
    letter-spacing: 3px;
    white-space: nowrap;
}
.collarbone-suture {
    display: none;
}

.graft-line {
    position: absolute;
    width: 1px;
    background: #aaa;
    opacity: 0.3;
    z-index: 5;
    pointer-events: none;
    transform-origin: top;
}

.graft-line-1 {
    left: 79%;
    top: 18%;
    height: 455px;
    transform: rotate(42deg);
}

.graft-line-2 {
    position: absolute;
    left: 43%;
    top: 51%;
    width: 1px;
    height: 270px;
    background: #aaa;
    opacity: 0.3;
    z-index: 5;
    transform-origin: top center;
    transform: rotate(43deg);
}

.graft-line-3 {
    left: 52%;
    top: 52%;
   height: 230px;
    transform: rotate(-48deg);
}

.collarbone-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 52%;

    background-image: url("images/SKIN GRAFT.jpg");
   background-size: 125% auto;
    background-position: center 28%;
    background-repeat: no-repeat;

    filter: grayscale(100%) contrast(120%) brightness(35%);
    opacity: 0.28;

    z-index: 0;
    pointer-events: none;

    -webkit-mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 55%,
        transparent 100%
    );

    mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 55%,
        transparent 100%
    );
    -webkit-mask-image:
    linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 12%, black 72%, transparent 100%);

-webkit-mask-composite: source-in;

mask-image:
    linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 12%, black 72%, transparent 100%);

mask-composite: intersect;
}

.dudael {
    position: relative;
    overflow: hidden;
}

.dudael-static {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
   opacity: 0.14;

    background-image:
        repeating-radial-gradient(
            circle,
            rgba(255,255,255,0.9) 0px,
            rgba(255,255,255,0.9) 1px,
            rgba(0,0,0,0.9) 1px,
            rgba(0,0,0,0.9) 3px
        );

    background-size: 5px 5px;
    animation: dudael-static-hard 0.22s steps(1) infinite;
}

.dudael > *:not(.dudael-static) {
    position: relative;
    z-index: 1;
}

@keyframes dudael-static-hard {
    0%   { background-position: 0 0; }
    20%  { background-position: 17px -11px; }
    40%  { background-position: -23px 7px; }
    60%  { background-position: 9px 19px; }
    80%  { background-position: -14px -17px; }
    100% { background-position: 21px 5px; }
}

@media (max-width: 600px) {

   .collarbone-painting-main {
    width: 82%;
    height: 32%;
    left: 9%;
    top: 28%;

    object-fit: cover;
    object-position: center center;

    clip-path: none;
    transform: none;
}
.collarbone-painting-detail {
    width: 42%;
    height: auto;

    left: 69%;
    top: 61%;

    transform: translate(-50%, -50%);
}
.collarbone-subject {
    width: 105px;
    right: auto;
    left: 10%;
    top: 17%;
}
.graft-line-1 {
    display: none;
}
.collarbone-exhibit {
  transform: scale(0.74);
    transform-origin: top center;
    width: 122%;
    margin-left: -11%;
}
.collarbone-exhibit {
    height: 100vh;
}
.collarbone-exhibit {
    margin-bottom: -38vh;
}

.azazel-exhibit {
    transform: scale(0.94);
    transform-origin: top center;
}
@media (max-width: 600px) {
  .azazel-chaos-tnb {
    top: -2%;
}

.azazel-label-b {
    top: 5%;
}
}
.azazel-chaos-bwd {
    bottom: 58%;
}

.azazel-label-a {
    bottom: 56%;
}
.azazel-chaos-main {
    top: 33%;
}
.azazel-exhibit {
    height: 36vh;
}
@media (max-width: 600px) {
    .azazel-exhibit {
        margin-top: 8vh;
    }
}
@media (max-width: 600px) {
    .azazel-exhibit {
        position: relative;
        top: 4vh;
    }
}
}
@media (max-width: 600px) {
    .azazel {
    padding-top: 0;
}
.azazel {
    padding-top: 0;
    margin-top: -11vh;
}
}
/* JUJU — VIDEO BACKGROUND */

.juju {
    position: relative;
    overflow: hidden;
    background: #000;
}

.juju-background {
    position: absolute;
    top: 10vh;
    right: 5vw;

    width: 22vw;
    height: 72vh;

    object-fit: cover;

    z-index: 0;
    pointer-events: none;
}
/* JUJU — EARLY IJS ARCHIVE */

.juju-early-archive {
    margin-top: 80px;
}

.juju-archive-item {
    margin-top: 30px;
    width: 220px;
}

.juju-archive-item img {
    display: block;
    width: 100%;
    height: auto;
}

.juju-archive-item p {
    margin-top: 12px;
    font-size: 10px;
    letter-spacing: 3px;
    color: #777;
}
.juju-archive-grid {
    display: flex;
    gap: 25px;
    align-items: flex-start;
}
@media (max-width: 600px) {
    .juju-background {
        top: 64vh;
        right: 5vw;

        width: 25vw;
height: 24vh;
    }
}
.zill-background::after {
    content: "";
    position: absolute;
    inset: 0;
  background: linear-gradient(
    to right,
    #000 0%,
    #000 25%,
    rgba(0, 0, 0, 0.65) 35%,
    rgba(0, 0, 0, 0.2) 45%,
    transparent 55%
);
    pointer-events: none;
}
/* 4U BACKGROUND VIDEO */

.fouru {
    position: relative;
    min-height: 100vh;
    isolation: isolate;
    overflow: hidden;
}

.fouru-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -1;
    pointer-events: none;
}

.fouru::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: -1;
    pointer-events: none;
}
/* 4U TRACK DOWNLOADS */

.fouru-tracks {
    width: min(90%, 850px);
    margin: 60px auto;
    font-family: monospace;
    position: relative;
    z-index: 1;
}

.fouru-track {
    display: grid;
    grid-template-columns: 2fr 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 22px 15px;
    border-bottom: 1px solid rgba(255,255,255,0.35);
    color: white;
    font-size: 13px;
    letter-spacing: 1px;
}

.fouru-track a {
    color: white;
    text-decoration: none;
    white-space: nowrap;
}

.fouru-track a:hover {
    color: #ff4444;
}

@media (max-width: 600px) {
    .fouru-track {
        grid-template-columns: 1fr auto;
        gap: 10px;
    }

    .fouru-track span:nth-child(2) {
        grid-column: 1;
        font-size: 11px;
        opacity: 0.7;
    }

    .fouru-track a {
        grid-column: 2;
        grid-row: 1 / 3;
    }
}