/* ============================================================
   JEREMY JACOBLAND
   STYLE.CSS
   ============================================================ */


/* ============================================================
   RESET
   ============================================================ */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


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

:root {
    --ticker-height: 30px;

    --site-font:
        "Courier New",
        Courier,
        monospace;
}

html {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;

    background:
        #000000
        center center
        / cover
        no-repeat
        fixed;
}


body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;

    background: transparent;

    color: #ae8574;

    font-family: var(--site-font);
}

button,
input,
textarea,
select {
    font-family: var(--site-font);
}

a {
    color: white;
    text-decoration: none;
}

button,
a,
input,
textarea {
    -webkit-tap-highlight-color: transparent;
}

button,
a {
    touch-action: manipulation;
}

/* ============================================================
   ATMOSPHERIC TEXTURE
   ============================================================ */

body::after {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    z-index: 999999;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255, 255, 255, .04) 0px,
            rgba(255, 255, 255, .08) 1px,
            transparent 1px,
            transparent 4px
        );

    opacity: 1;
}


/* ============================================================
   STATIC CURTAIN FRAME
   ============================================================ */

.static-curtain {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100dvh;

    overflow: hidden;

    z-index: 100000;

    pointer-events: none;

    background: transparent;
}

.static-curtain picture,
.static-curtain img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;
}

.static-curtain img {
    object-fit: fill;
}


/* ============================================================
   PANELS
   ============================================================ */

.panel {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100dvh;

    overflow: hidden;

    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;

    box-shadow:
        0 20px 20px rgba(0, 0, 0, .8);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    transform:
        translate3d(0, -100dvh, 0);

    transition:
        transform .9s cubic-bezier(.77, 0, .18, 1);

    will-change: transform;

    z-index: 1;
}


/* ============================================================
   PANEL STATES
   ============================================================ */

.panel.is-visible {
    transform:
        translate3d(0, 0, 0);
}

.panel.is-coming-down {
    transform:
        translate3d(0, 0, 0);
}

.panel.is-leaving-back {
    transform:
        translate3d(0, -100dvh, 0);
}


/* ============================================================
   SCROLL ARROW
   ============================================================ */

.panel-01 .scroll-arrow {
    position: absolute;

    top: 50px;
    left: 50%;

    transform:
        translateX(-50%);

    font-size: 32px;
    line-height: 1;

    color: #ae8574;

    opacity: .75;

    z-index: 40;

    pointer-events: none;

    animation:
        arrowBounce 1.8s ease-in-out infinite;

    transition:
        opacity .6s ease;
}

.panel-01 .scroll-arrow.gone {
    opacity: 0;
    animation: none;
}

@keyframes arrowBounce {

    0%,
    100% {
        transform:
            translateX(-50%)
            translateY(0);

        opacity: .4;
    }

    50% {
        transform:
            translateX(-50%)
            translateY(9px);

        opacity: .9;
    }
}


/* ============================================================
   CONTENT ALIGNMENT
   ============================================================ */

.panel-content,
.panel-content-left,
.panel-contentleft,
.panel-content-right {
    position: absolute;

    top: 0;
    left: 0;
    right: 0;
    bottom: var(--ticker-height);

    z-index: 20;

    display: flex;
    align-items: center;
}

.panel-content {
    justify-content: center;
}

.panel-content-left,
.panel-contentleft {
    justify-content: flex-start;
}

.panel-content-right {
    justify-content: flex-end;
}


/* ============================================================
   IMAGES
   ============================================================ */

.panel-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

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

    opacity: 0;

    transition:
        opacity .3s ease;
}

.panel-image.loaded {
    opacity: 1;
}

.logo-image {
    width: 50px;
    height: auto;

    display: block;

    object-fit: contain;

    position: relative;
}

.logo-left {
    position: absolute;
    left: 0;
}

.logo-right {
    position: absolute;
    right: 0;

    transform:
        rotate(180deg);
}

.find-image {
    width: 200px;
    max-width: 80vw;

    height: auto;

    display: block;

    object-fit: contain;

    position: relative;
}

.email-image {
    width: 350px;
    max-width: 90vw;

    height: auto;

    display: block;

    object-fit: contain;

    position: relative;
}


/* ============================================================
   VIDEO PANELS
   ============================================================ */

.video-frame {
    position: absolute;
    inset: 0;

    overflow: hidden;

    z-index: 1;

    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.panel-02 .video-frame {
    background-image:
        url("images/section2.webp");
}

.panel-04 .video-frame {
    background-image:
        url("images/section4.webp");
}

.panel-06 .video-frame {
    background-image:
        url("images/section6.webp");
}

.panel-10 .video-frame {
    background-image:
        url("images/section10.webp");
}


/* ============================================================
   VIMEO FULL BLEED
   ============================================================ */

.video-frame iframe {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 100vw;
    height: 56.25vw;

    min-width: 177.78vh;
    min-height: 100vh;

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

    border: 0;

    opacity: 1;

    z-index: 2;

    pointer-events: none;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}


/* ============================================================
   DESKTOP / MOBILE VIDEO
   ============================================================ */

.desktop-frame {
    display: block;
}

.mobile-frame {
    display: none;
}


/* ============================================================
   HERO IMAGE
   ============================================================ */

.panel-01 {
    background: none;
}

.panel-01 picture,
.panel-01 img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;
}

.panel-01 img {
    object-fit: cover;
}


/* ============================================================
   TICKER
   ============================================================ */

.ticker-wrap {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: var(--ticker-height);

    overflow: hidden;

    background:
        rgba(69, 41, 28, 1);

    z-index: 50;
}

.ticker-track {
    display: flex;
    align-items: center;

    width: max-content;
    height: 100%;

    animation:
        tickerMove 120s linear infinite;

    will-change: transform;
}

.ticker-item {
    flex-shrink: 0;

    white-space: nowrap;

    padding-right: 50px;

    font-size: 12px;

    letter-spacing: .03em;

    line-height: 30px;

    font-weight: 400;

    color: #ae8574;

    font-family: inherit;
}

@keyframes tickerMove {

    from {
        transform: translateX(0);
    }

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


/* ============================================================
   EMAIL ARRIVAL
   ============================================================ */

.email-arrival {
    position: absolute;

    left: 0;
    bottom: var(--ticker-height);

    z-index: 20;

    transform:
        translateY(-180px);
}


/* ============================================================
   LOADING SCREEN
   ============================================================ */

.loading-screen {
    position: fixed;
    inset: 0;

    z-index: 1000000;

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

    background: #000;

    overflow: visible;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, .8);

    transform:
        translateY(0);

    animation:
        transmissionLift
        6.8s
        cubic-bezier(.2, .8, .15, 1)
        forwards;

    animation-delay: 4.2s;

    will-change: transform;
}


/* ============================================================
   LOADING BACKGROUND
   ============================================================ */

.loading-background {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

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

    z-index: 0;

    opacity: 1;

    clip-path:
        inset(0 0 100% 0);

    animation:
        loadingReveal
        1.5s
        linear
        forwards;
}

.loading-overlay {
    position: absolute;
    inset: 0;

    background:
        rgba(0, 0, 0, .15);

    z-index: 1;
}

.loading-text,
.loading-progress {
    position: relative;
    z-index: 2;
}

@keyframes loadingReveal {

    from {
        clip-path:
            inset(0 0 100% 0);
    }

    to {
        clip-path:
            inset(0 0 0 0);
    }
}


/* ============================================================
   LOADING SCANLINES
   ============================================================ */

.loading-screen::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(20, 10, 5, .35) 0px,
            rgba(20, 10, 5, .35) 1px,
            transparent 2px,
            transparent 4px
        );

    mix-blend-mode: multiply;

    opacity: .15;

    animation:
        loadingSignal
        1.5s
        linear
        forwards;
}

@keyframes loadingSignal {

    from {
        opacity: .35;
    }

    to {
        opacity: 0;
    }
}


/* ============================================================
   LOADING COLOR DRIFT
   ============================================================ */

.loading-screen::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(255, 0, 0, .18),
            transparent 25%,
            transparent 75%,
            rgba(0, 255, 255, .18)
        );

    opacity: 0;

    animation:
        loadingColorDrift
        1.5s
        linear
        forwards;
}

@keyframes loadingColorDrift {

    0%,
    60%,
    100% {
        opacity: 0;
    }

    75% {
        opacity: .35;
    }
}


/* ============================================================
   LOADING BAR
   ============================================================ */

.loading-progress {
    position: absolute;

    top:
        calc(50% + 60px);

    left: 50%;

    transform:
        translateX(-50%);

    width: 150px;
    height: 10px;

    background:
        rgba(255, 241, 227, .25);

    overflow: hidden;
}

.loading-progress-bar {
    width: 0%;
    height: 100%;

    background: #17150e;

    animation:
        progressLoad
        4s
        linear
        forwards;
}

@keyframes progressLoad {

    0% {
        width: 0%;
    }

    80% {
        width: 90%;
    }

    100% {
        width: 100%;
    }
}


/* ============================================================
   LOADING TEXT
   ============================================================ */

.loading-text {
    text-align: center;

    color: #281e17;

    line-height: 2.5;
}

.loading-text div {
    opacity: 0;

    animation:
        transmissionText
        .95s
        steps(2, end)
        forwards;
}


.loading-text div:nth-child(1) {
    animation-delay: .1s;
}

.loading-text div:nth-child(2) {
    animation-delay: .45s;
}

@keyframes transmissionText {

    from {
        opacity: 0;

        transform:
            translateY(8px);
    }

    to {
        opacity: .8;

        transform:
            translateY(0);
    }
}


/* ============================================================
   TRANSMISSION EXIT
   ============================================================ */

@keyframes transmissionLift {

    0% {
        transform:
            translateY(0);

        opacity: 1;

        filter: brightness(1);
    }

    70% {
        opacity: 1;
    }

    100% {
        transform:
            translateY(
                calc(-100% - var(--ticker-height))
            );

        opacity: 1;

        visibility: hidden;

        pointer-events: none;
    }
}


/* ============================================================
   LOADING BOTTOM BORDER
   ============================================================ */

.loading-border {
    position: absolute;

    top: 100%;
    left: 0;

    width: 100%;
    height: var(--ticker-height);

    background:
        rgba(69, 41, 28, 1);

    overflow: hidden;

    z-index: 10;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, .8);
}

.loading-ticker-track {
    display: flex;

    width: max-content;
    height: 100%;

    align-items: center;

    animation:
        loadingTickerMove
        120s
        linear
        infinite;

    will-change: transform;
}

.loading-ticker-track .ticker-item {
    white-space: nowrap;

    padding-right: 50px;

    font-size: 12px;

    letter-spacing: .03em;

    line-height: 30px;

    color: #c4ada4;

    font-family: inherit;
}

@keyframes loadingTickerMove {

    from {
        transform: translateX(0);
    }

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


/* ============================================================
   SCANNER BEAM
   ============================================================ */

.panel.scanning::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    width: 3px;

    left: 0;

    background:
        rgba(174, 141, 127, .45);

    box-shadow:
        0 0 12px rgba(174, 141, 127, .55),
        0 0 30px rgba(174, 141, 127, .25);

    pointer-events: none;

    z-index: 30;

    animation:
        scanBeam
        6s
        linear
        forwards;
}

@keyframes scanBeam {

    from {
        left: 0;
    }

    to {
        left: 100%;
    }
}


/* ============================================================
   MACHINE CHATTER
   ============================================================ */

.machine-chatter-overlay {
    position: fixed;
    inset: 0;

    pointer-events: none;

    z-index: 999997;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 1.5s ease,
        visibility 1.5s ease;
}

.machine-chatter-overlay.active {
    opacity: 1;
    visibility: visible;
}

.machine-chatter {
    position: absolute;

    right: 7%;
    top: 1.1%;

    transform:
        rotate(-180deg);

    transform-origin: center;

    color: #ae8574;

    letter-spacing: 5px;

    font-size: 12px;

    text-transform: uppercase;

    white-space: nowrap;

    opacity: .55;

    font-family: inherit;

    animation:
        chatterPulse
        4s
        ease-in-out
        infinite;
}

@keyframes chatterPulse {

    0%,
    100% {
        opacity: .25;
    }

    50% {
        opacity: .7;
    }
}


/* ============================================================
   SOCIAL LINKS — PANEL 09
   ============================================================ */

.panel-09 .panel-content {
    gap: 20px;
}

.xtwitterx {
    background: #45291c;

    border: none;

    color: #ae8574;

    font-family: inherit;

    width: 50px;
    height: 250px;

    font-size: 13px;

    letter-spacing: 4px;

    line-height: 1.15;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    writing-mode: vertical-lr;
}


/* ============================================================
   PANEL 07 — THEATER 003
   ============================================================ */

.panel-07 {
    background: #000 !important;
    background-image: none !important;
}

.panel-07 .panel-image {
    display: none !important;
}

.panel-07 .panel-07-theater {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: flex;

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

    overflow: hidden;

    background: #000;

    z-index: 10;

    pointer-events: auto;
}

.panel-07 .panel-07-theater iframe {
    display: block;

    width:
        min(450px, 95vw);

    height:
        min(1000px, 100vh);

    max-width: 95vw;
    max-height: 100vh;

    margin: 0;
    padding: 0;

    border: 0;
    outline: none;

    background: #000;

    overflow: hidden;

    flex: none;
}


/* ============================================================
   SEO HIDDEN CONTENT
   ============================================================ */

.seo-title,
.seo-content {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip-path:
        inset(50%);

    white-space: nowrap;

    border: 0;
}


/* ============================================================
   AUDIO NAVIGATION
   ============================================================ */

.audio-button {
    position: fixed;

    left: 5px;
    bottom: 50px;

    z-index: 100001;

    margin: 0;

    width: 102px;
    height: 22px;

    color:
        rgba(255, 255, 255, 0.45);

    opacity: .7;

    font-family: inherit;

    font-size: 18px;

    line-height: 22px;

    text-align: left;

    cursor: pointer;

        transform: rotate(90deg);


    background: transparent;

    border: none;

    padding: 0;

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

.audio-button:hover {
    color: #ffffff;

    opacity: 1;

transform:
    rotate(90deg);
}

.audio-button.is-on {
    color: #ffffff;

    opacity: 1;

        transform: rotate(90deg);

}

.audio-button.is-on::before {
    content: "";

    position: absolute;

    left: -8px;

    top: 50%;

    width: 3px;
    height: 3px;

    transform:
        translateY(-50%);

    border-radius: 50%;

    background:
        currentColor;
}


/* ============================================================
   MOBILE AUDIO NAVIGATION
   ============================================================ */

@media (max-width: 768px) {

    .audio-button {
        left: 10px;
        bottom: 52px;

        width: 50px;
        height: 20px;

        font-size: 13px;

        line-height: 20px;
    }

    .audio-button.is-on::before {
        left: -6px;
    }
}

/* ============================================================
   LAYER NAVIGATION
   ============================================================ */

.layer-navigation {
    position: fixed;

    left: 38px;
    top: 50%;

    transform:
        translateY(-50%);

    z-index: 100001;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 7px;

    margin: 0;
    padding: 0;

    pointer-events: auto;
}

.layer-button {
    position: relative;

    appearance: none;

    width: 32px;
    height: 50px;

    margin: 0;
    padding: 0;

    border: 0;
    outline: none;

    background: transparent;

    color:
        rgba(255, 255, 255, 0.45);

    font-family: inherit;

    font-size:  24px;

    line-height: 22px;

    text-align: center;

    cursor: pointer;

    opacity: .7;

    pointer-events: auto;

    transition:
        color 180ms ease,
        opacity 180ms ease,
        transform 180ms ease;
}

.layer-button:hover {
    color: #ffffff;

    opacity: 1;

    transform:
        translateX(3px);
}

.layer-button.is-active {
    color: #ffffff;

    opacity: 1;
}

.layer-button.is-active::before {
    content: "";

    position: absolute;

    left: -8px;

    top: 50%;

    width: 3px;
    height: 3px;

    transform:
        translateY(-50%);

    border-radius: 50%;

    background:
        currentColor;
}


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

@media (max-width: 768px) {

    .desktop-frame {
        display: none;
    }

    .mobile-frame {
        display: block;
    }

    .drawer-sigil {
        width: 48px;
        height: 48px;
    }

    .layer-navigation {
        left: 20px;

        gap: 4px;
            z-index: 100001;

    }

    .layer-button {
        width: 28px;
        height: 35px;

        font-size: 18px;

        line-height: 20px;
    }

    .layer-button.is-active::before {
        left: -6px;

        width: 3px;
        height: 3px;
    }
}


@media (max-width: 380px) {

    .drawer-sigil {
        width: 44px;
        height: 44px;
    }
}


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

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

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    .ticker-track,
    .loading-screen,
    .loading-text {
        animation: none;
    }
}

/* ============================================================
   VIDEO PLAY / PAUSE
   ============================================================ */

   .video-play-button {
position: absolute;


left: 50%;
bottom: 25px;

transform:
    translateX(-50%);

z-index: 10;

width: 200px;
height: 100px;

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

padding: 0;
margin: 0;

border: 0;

background: transparent;

color: #fff;

font-family: inherit;

font-size: 14px;
font-weight: 400;

line-height: 1;

text-align: center;

cursor: pointer;

opacity: .9;

-webkit-tap-highlight-color: transparent;


}

.video-play-button:hover {
opacity: 1;
}

.video-play-button.is-hidden {
display: flex;
}


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

@media (max-width: 768px) {
    
html,
body {
    overflow: hidden;
    height: 100%;
    position: fixed;
    width: 100%;
}

main {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.panel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}