@font-face {
    font-family: 'Web437 Amstrad PC-2y';
    src: url('./Web437_Amstrad_PC-2y.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

:root {

    --bg-color: #f3efe6;

    --text-color: #736254;
    --border-color: #a39382;

    --btn-bg: transparent;
    --btn-bg-hover: transparent;
    --nav-highlight-color: #3b3028;
    --bg-text-fill: rgba(115, 98, 84, 0.10);
    --scanline-tint: rgba(115, 98, 84, 0.3);
    --snow-opacity: 0.1;
    --snow-blend: hard-light;
    --vhs-blend: hard-light;
    --vignette-image: radial-gradient(
        ellipse at center,
        transparent 15%,
        rgba(115, 98, 84, 0.20) 50%,
        rgba(75, 60, 48, 0.55) 82%,
        rgba(40, 30, 22, 0.85) 100%
    );
    --vignette-inset: inset 0 0 120px rgba(50, 38, 28, 0.65);

    --btn-glow: none;
    --btn-glow-hover: none;
    --btn-text-glow: none;
    --btn-text-glow-hover: none;
    --bg-text-glow: none;
    --bg-text-glow-hover: none;
    --effect-button-glow: 0 0 12px rgba(115, 98, 84, 0.28),
                          0 0 3px rgba(115, 98, 84, 0.42);
    --font-main: 'BBH Bogle', sans-serif;
    --font-ui: 'Inter', sans-serif;

    --vhs-frame: 77ms;

    --wobble-frames: 2;

    --glitch-frames: 25;

    --channel-change-frames: 5;

    --nav-highlight-frames: 1;

    --nav-active-frames: 3;

    --click-feedback-frames: 2;

    --bg-text-frames: 2;

    --menu-frames: 3;

    --loader-label-hold-frames: 4;
    --loader-label-scroll-frames: 2;
    --loader-progress-transition-frames: 1;
    --loader-progress-max-step: 4;
    --loader-complete-frames: 4;
    --loader-idle-frames: 4;
}

@media not all {
    :root {
        --bg-color: #14110d;
        --text-color: #c9b391;
        --border-color: #6b5a45;

        --btn-bg: rgba(62, 52, 39, 0.35);
        --btn-bg-hover: rgba(104, 87, 65, 0.50);
        --nav-highlight-color: #8f795b;
        --bg-text-fill: rgba(201, 179, 145, 0.14);

        --scanline-tint: rgba(0, 0, 0, 0.30);

        --snow-opacity: 0.16;
        --snow-blend: hard-light;
        --vhs-blend: screen;

        --vignette-image: radial-gradient(
            ellipse at center,
            transparent 30%,
            rgba(0, 0, 0, 0.15) 60%,
            rgba(0, 0, 0, 0.40) 85%,
            rgba(0, 0, 0, 0.62) 100%
        );
        --vignette-inset: inset 0 0 90px rgba(0, 0, 0, 0.45);

        --btn-glow: 0 0 15px rgba(255, 226, 173, 0.10),
                    inset 0 0 6px rgba(255, 226, 173, 0.05);
        --btn-glow-hover: 0 0 16px rgba(255, 232, 190, 0.90),
                          inset 0 0 10px rgba(255, 232, 190, 0.15);
        --btn-text-glow: 0 0 5px rgba(255, 226, 173, 0.55);
        --btn-text-glow-hover: 0 0 9px rgba(255, 240, 208, 0.70);

        --bg-text-glow: drop-shadow(0 0 14px rgba(255, 226, 173, 0.18));
        --bg-text-glow-hover: drop-shadow(0 0 34px rgba(255, 236, 200, 0.38));
        --effect-button-glow: 0 0 28px rgba(255, 232, 190, 0.98),
                              0 0 10px rgba(255, 240, 208, 0.78),
                              inset 0 0 13px rgba(255, 232, 190, 0.20);
    }
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    position: relative;
}

.navigation {
    opacity: 1;
    visibility: visible;
    transition: opacity calc(var(--vhs-frame) * 2) steps(2, end),
                visibility 0s;
}

body.is-loading .navigation {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.page-loader {
    --loader-progress: 0%;
    --loader-progress-ratio: 0;
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity calc(var(--vhs-frame) * 2) steps(2, end),
                visibility 0s;
}

body.is-loaded .page-loader {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition-delay: 0s, calc(var(--vhs-frame) * 2);
}

.sound-toggle {
    position: fixed;
    top: clamp(12px, 2.4vh, 20px);
    left: 50%;
    z-index: 10040;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    padding: 6px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--nav-highlight-color);
    cursor: pointer;
    transform: translateX(-50%);
    transition: opacity calc(var(--vhs-frame) * 2) steps(2, end),
                transform calc(var(--vhs-frame) * 2) steps(2, end);
}

.sound-toggle svg {
    display: block;
    width: 24px;
    height: 24px;
}

.sound-toggle .speaker-muted {
    display: none;
}

.sound-toggle.is-muted .speaker-wave {
    display: none;
}

.sound-toggle.is-muted .speaker-muted {
    display: block;
}

.sound-toggle:hover {
    opacity: 0.72;
    transform: translateX(-50%) scale(1.06);
}

.sound-toggle:focus-visible {
    outline: 2px solid var(--nav-highlight-color);
    outline-offset: 2px;
}

.sound-toggle.is-muted {
    opacity: 0.52;
}

body.is-loading .sound-toggle {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.page-loader-shell {
    position: relative;
    width: 100vw;
    height: 1.36em;
    color: var(--text-color);
    font-family: 'Web437 Amstrad PC-2y', monospace;
    font-size: clamp(16px, 2.25vw, 24px);
    font-weight: 400;
    isolation: isolate;
}

.page-loader-copy {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.page-loader-copy-inverted {
    z-index: 3;
    color: var(--bg-color);
    clip-path: inset(0 calc(100% - var(--loader-progress)) 0 0);
    transition: clip-path
                calc(var(--vhs-frame) * var(--loader-progress-transition-frames))
                steps(var(--loader-progress-transition-frames), end);
}

.page-loader-label-window {
    width: calc(12ch + 20px);
    height: 1.2em;
    overflow: hidden;
    text-align: center;
}

.page-loader-label-stack {
    display: flex;
    flex-direction: column;
    transform: translateY(0);
    transition: transform
                calc(var(--vhs-frame) * var(--loader-label-scroll-frames))
                steps(var(--loader-label-scroll-frames), end);
}

.page-loader.show-wait .page-loader-label-stack {
    transform: translateY(-1.2em);
}

.page-loader-label {
    flex: 0 0 1.2em;
    height: 1.2em;
    line-height: 1.2;
    white-space: nowrap;
}

.page-loader-idle,
.page-loader-glitch {
    display: inline-block;
}

.page-loader-idle {
    animation: loader-text-idle
               calc(var(--vhs-frame) * var(--loader-idle-frames))
               steps(1, end) infinite;
}

.page-loader-glitch {
    animation: glitch-anim
               calc(var(--vhs-frame) * var(--glitch-frames))
               steps(1, end) infinite;
}

.page-loader-track {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.page-loader-bar {
    width: 100%;
    height: 100%;
    background-color: var(--nav-highlight-color);
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0 1px,
        color-mix(in srgb, var(--bg-color) 10%, transparent) 1px 2px
    );
    transform: scaleX(var(--loader-progress-ratio));
    transform-origin: left center;
    transition: transform
                calc(var(--vhs-frame) * var(--loader-progress-transition-frames))
                steps(var(--loader-progress-transition-frames), end);
}

.page-loader.is-complete .page-loader-bar,
.page-loader.is-complete .page-loader-copy-inverted,
.page-loader.is-complete .page-loader-idle,
.page-loader.is-complete .page-loader-glitch {
    animation: none;
}

.page-loader.is-complete .page-loader-bar {
    background-color: var(--bg-color);
    transform: scaleX(1);
}

.page-loader.is-complete .page-loader-copy,
.page-loader.is-complete .page-loader-copy-inverted {
    color: var(--nav-highlight-color);
}

.page-loader.is-complete .page-loader-copy-inverted {
    clip-path: inset(0);
}

.page-loader.is-complete .page-loader-bar,
.page-loader.is-complete .page-loader-copy-inverted {
    transition: none;
}

.page-loader-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@keyframes loader-text-idle {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-1px, 0); }
    50% { transform: translate(0, 1px); }
    75% { transform: translate(1px, 0); }
}

#screenWrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: visible;
    animation: wobbley calc(var(--vhs-frame) * var(--wobble-frames))
               steps(1, end) infinite,
               wobblex calc(var(--vhs-frame) * var(--wobble-frames))
               steps(1, end) infinite;
}

#crtPicture {
    position: absolute;
    inset: 0;
    overflow: visible;
}

#signalPicture {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: visible;
    pointer-events: none;
    transform-origin: center;
    transform: translate(0, 0);
    filter: none;
}

@keyframes wobblex {
    50% { transform: translateX(1px); }
    51% { transform: translateX(0); }
}

@keyframes wobbley {
    0% { transform: translateY(1px); }
    100% { transform: translateY(0); }
}

#snowCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    z-index: 0;
    opacity: var(--snow-opacity);
    mix-blend-mode: var(--snow-blend);
    pointer-events: none;
}

#crtPicture[data-vhs-effect="overexposure"] #snowCanvas {
    opacity: 0.5;
    mix-blend-mode: hard-light;
    filter: brightness(var(--fx-snow-brightness, 1.32))
            contrast(var(--fx-snow-contrast, 1.2));
}

.scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9998;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 50%,
        var(--scanline-tint) 50%
    ),
    linear-gradient(
        90deg,
        rgba(255, 0, 0, 0.02),
        rgba(0, 255, 0, 0.01),
        rgba(0, 0, 255, 0.02)
    );
    background-size: 100% 3px, 3px 100%;
    pointer-events: none;
}

.vignette {
    position: absolute;
    inset: -2px;
    z-index: 9999;
    background: var(--vignette-image);
    box-shadow: var(--vignette-inset);
    pointer-events: none;
    mix-blend-mode: hard-light;
}

.vhs-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9997;
    pointer-events: none;
}

.vhs-line {
    position: absolute;
    left: -100%;
    width: 100%;
    background: var(--text-color);
    mix-blend-mode: var(--vhs-blend);
}

@keyframes vhs-sweep {
    0% { left: -100%; }
    100% { left: 100%; }
}

.audio-reactive-background {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: visible;
    pointer-events: none;
    transform-origin: center;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    will-change: transform;
}

.bg-text-container {
    position: absolute;
    inset: -100px;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity calc(var(--vhs-frame) * var(--bg-text-frames))
                steps(var(--bg-text-frames), end);
}

.bg-story-container {
    position: absolute;
    inset: -100px;
    z-index: 1;
    height: 100vh;
    padding: clamp(12px, 1.6vw, 26px);
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    color: color-mix(in srgb, var(--text-color) 20%, transparent);
    font-family: 'Hoefler Text', 'HoeflerText-Regular', Baskerville, Georgia, serif;
    font-size: clamp(12px, 1.18vw, 17px);
    font-weight: 400;
    line-height: 1.18;
    text-align: justify;
    text-wrap: pretty;
    column-count: 4;
    column-gap: clamp(20px, 2.5vw, 42px);
    column-fill: auto;
    opacity: 0;
    transform: scale(0.99);
    transform-origin: center;
    transition: opacity calc(var(--vhs-frame) * var(--bg-text-frames))
                steps(var(--bg-text-frames), end),
                transform calc(var(--vhs-frame) * var(--bg-text-frames))
                steps(var(--bg-text-frames), end);
}

.bg-story-container p {
    margin: 0 0 0.8em;
}

.bg-story-container p + p {
    text-indent: 1.35em;
}

body.story-background .bg-text-container {
    opacity: 0;
}

body.story-background .bg-story-container {
    opacity: 1;
    transform: scale(1);
}

.bg-text-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    pointer-events: none;
}

.bg-text-link {
    pointer-events: none;
}

.bg-text-link.is-active {
    pointer-events: visiblePainted;
    cursor: pointer;
}

.bg-text-el {
    font-family: var(--font-main);
    font-size: 920px;
    font-weight: 900;
    fill: var(--bg-text-fill);
    text-anchor: middle;
    dominant-baseline: central;
    transform-box: fill-box;
    transform-origin: center;

    filter: var(--bg-text-glow);
    transition: transform calc(var(--vhs-frame) * var(--bg-text-frames))
                steps(var(--bg-text-frames), end),
                opacity calc(var(--vhs-frame) * var(--bg-text-frames))
                steps(var(--bg-text-frames), end),
                filter calc(var(--vhs-frame) * var(--bg-text-frames))
                steps(var(--bg-text-frames), end);
}

.bg-text-el.lit {
    filter: var(--bg-text-glow-hover);
}

.bg-text-el.text-changing {
    transform: scale(0.98);
    opacity: 0.7;
}

.glitch-active {
    animation: glitch-anim calc(var(--vhs-frame) * var(--glitch-frames))
               steps(1, end) forwards;
}

@keyframes glitch-anim {
    0% { transform: translateX(0); filter: blur(0); }
    20% { transform: translateX(-6px) skew(-2deg); filter: blur(2px); }
    40% { transform: translateX(6px) skew(2deg); filter: blur(0px); }
    60% { transform: translateX(-3px); filter: blur(3px); }
    80% { transform: translateX(3px); filter: blur(1px); }
    100% { transform: translateX(0) skew(0); filter: blur(0); }
}

.navigation {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding-left: 8%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 10;
}

.nav-btn {
    font-family: 'Web437 Amstrad PC-2y', monospace;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: lowercase;

    border: none;
    color: var(--text-color);
    cursor: pointer;

    transition: background calc(var(--vhs-frame) * 2) steps(2, end),
                transform calc(var(--vhs-frame) * 2) steps(2, end),
                box-shadow calc(var(--vhs-frame) * 2) steps(2, end),
                text-shadow calc(var(--vhs-frame) * 2) steps(2, end);
    position: relative;
    isolation: isolate;
    outline: none;
    width: max-content;
    align-self: flex-start;
    padding: 0.08em 0;

    overflow: visible;
}

.main-btn {
    font-size: 30px;
}

.nav-btn:not(.is-active):hover {
    background: transparent;
    transform: translateY(-1px);
    box-shadow: var(--btn-glow-hover);
    text-shadow: var(--btn-text-glow-hover);
}

.nav-btn.has-hover-clone,
.nav-btn.is-active:not(.portal-nav-clone) {
    opacity: 0;
}

#cleanButtonPortal {
    position: fixed;
    inset: 0;
    z-index: 10020;
    pointer-events: none;
}

.portal-nav-clone {
    position: absolute;
    margin: 0;
    pointer-events: none;
    overflow: visible;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    text-shadow: none;
    filter: none;
    transform: none;
    transition: none;
}

.clean-hover-clone {
    z-index: 2;
    color: var(--text-color);
}

.clean-hover-clone::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: -0.08em;
    right: 0;
    bottom: -0.08em;
    left: calc(-1 * var(--nav-left, 0px) - 4px);
    background-color: var(--nav-highlight-color);
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0 1px,
        color-mix(in srgb, var(--bg-color) 10%, transparent) 1px 2px
    );
    clip-path: inset(0 100% 0 0);
    transition: clip-path calc(var(--vhs-frame) * var(--nav-highlight-frames))
                steps(var(--nav-highlight-frames), end);
}

.clean-hover-clone .btn-label-inverted {
    display: inline-block;
    z-index: 2;
    color: var(--bg-color);
    clip-path: inset(0 var(--nav-reveal-ratio, 100%) 0 0);
    transition: clip-path calc(var(--vhs-frame) * var(--nav-highlight-frames))
                steps(var(--nav-highlight-frames), end);
}

.clean-hover-clone.is-highlighted::before,
.clean-hover-clone.is-highlighted .btn-label-inverted {
    clip-path: inset(0 0 0 0);
}

.clean-hover-clone.is-click-feedback,
.clean-hover-clone.is-click-feedback .btn-label-inverted {
    color: var(--nav-highlight-color);
}

.clean-hover-clone.is-click-feedback::before {
    background-color: var(--bg-color);
}

.active-nav-clone {
    z-index: 1;
    color: var(--bg-color);
}

.active-nav-clone::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: -0.08em;
    right: 0;
    bottom: -0.08em;
    left: calc(-1 * var(--nav-left, 0px) - 4px);
    pointer-events: none;
    background-color: var(--nav-highlight-color);
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0 1px,
        color-mix(in srgb, var(--bg-color) 10%, transparent) 1px 2px
    );
    transition: right calc(var(--vhs-frame) * var(--nav-active-frames)) ease-out;
}

.active-nav-clone.is-expanded::before {
    right: calc(-1 * var(--nav-right, 0px) - 4px);
}

.active-nav-clone.is-click-feedback {
    color: var(--nav-highlight-color);
}

.active-nav-clone.is-click-feedback::before {
    background-color: var(--bg-color);
}

.vhs-hover-hitbox {
    position: absolute;
    z-index: 3;
    pointer-events: auto;
    cursor: pointer;
    background: transparent;
}

.btn-label-stack {
    position: relative;
    z-index: 1;
    display: inline-grid;
}

.btn-label,
.btn-label-inverted {
    position: relative;
    grid-area: 1 / 1;
    display: inline-block;
    white-space: pre;
}

.btn-label-inverted {
    display: none;
}

.submenu-wrapper {
    position: relative;
    margin-top: 10px;
    padding-left: 1.25rem;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    transition: max-height calc(var(--vhs-frame) * var(--menu-frames))
                steps(var(--menu-frames), end),
                opacity calc(var(--vhs-frame) * var(--menu-frames))
                steps(var(--menu-frames), end);
}

.submenu-wrapper.open {
    max-height: 200px;
    opacity: 1;
    pointer-events: auto;
    overflow: visible;
}

.submenu-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

.submenu-item {
    position: relative;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity calc(var(--vhs-frame) * var(--menu-frames))
                steps(var(--menu-frames), end),
                transform calc(var(--vhs-frame) * var(--menu-frames))
                steps(var(--menu-frames), end);
}

.submenu-wrapper.open .submenu-item {
    opacity: 1;
    transform: translateX(0);
}

.submenu-wrapper.open .submenu-item:nth-child(1) { transition-delay: 0s; }
.submenu-wrapper.open .submenu-item:nth-child(2) { transition-delay: var(--vhs-frame); }
.submenu-wrapper.open .submenu-item:nth-child(3) { transition-delay: calc(var(--vhs-frame) * 2); }

#crtPicture[data-vhs-effect="frame-stutter"] #signalPicture {
    transform: translate(var(--fx-x, 0), var(--fx-y, 0))
               scale(var(--fx-scale-x, 1), var(--fx-scale-y, 1));
    filter: contrast(var(--fx-contrast, 1.45))
            brightness(var(--fx-brightness, 1));
    opacity: var(--fx-opacity, 1);
}

#crtPicture[data-vhs-effect="tracking-failure"] #signalPicture {
    transform: translateX(var(--fx-x, 0))
               scaleX(var(--fx-scale-x, 1));
    filter: contrast(var(--fx-contrast, 1.35))
            brightness(var(--fx-brightness, 1));
}

#crtPicture[data-vhs-effect="tape-wrinkle"] #signalPicture {
    transform: translate(var(--fx-x, 0), var(--fx-y, 0))
               skewX(var(--fx-skew, 0deg))
               scale(var(--fx-scale-x, 1), var(--fx-scale-y, 1));
    filter: contrast(var(--fx-contrast, 1.3))
            saturate(var(--fx-saturation, 1.5));
}

#crtPicture[data-vhs-effect="tape-wrinkle"] .bg-text-container,
#crtPicture[data-vhs-effect="tape-wrinkle"] .bg-story-container {
    filter: drop-shadow(var(--fx-channel, 4px) 0 0 rgba(151, 78, 56, 0.30))
            drop-shadow(calc(var(--fx-channel, 4px) * -1) 0 0 rgba(62, 102, 106, 0.26));
}

#crtPicture[data-vhs-effect="overexposure"] #signalPicture {
    transform: translate(var(--fx-x, 0), var(--fx-y, 0));
    filter: brightness(var(--fx-brightness, 1.9))
            contrast(var(--fx-contrast, 1.45))
            saturate(0.7);
}

#crtPicture[data-vhs-effect="overexposure"] .bg-text-container,
#crtPicture[data-vhs-effect="overexposure"] .bg-story-container {
    filter: brightness(0.9) contrast(0.5);
}

#crtPicture[data-vhs-effect="overexposure"] .bg-story-container {
    color: color-mix(in srgb, var(--text-color) 40%, transparent);
    filter: brightness(var(--fx-story-brightness, 0.42))
            contrast(var(--fx-story-contrast, 5));
    mix-blend-mode: hard-light;
}

#crtPicture[data-vhs-effect="overexposure"] .bg-text-el {
    fill: var(--text-color);
    opacity: 0.2;
}

#vhsActiveFx {
    position: absolute;
    inset: 0;
    z-index: 10010;
    overflow: hidden;
    pointer-events: none;
    display: none;
}

#crtPicture[data-vhs-effect] #vhsActiveFx {
    display: block;
}

.fx-tear-band {
    position: absolute;
    left: -6%;
    width: 112%;
    display: none;
    border-top: 1px solid color-mix(in srgb, var(--text-color) 55%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--bg-color) 55%, transparent);
    background: repeating-linear-gradient(
        to bottom,
        color-mix(in srgb, var(--text-color) 10%, transparent) 0 1px,
        transparent 1px 3px
    );
    filter: contrast(1.25);
    mix-blend-mode: hard-light;
}

#crtPicture[data-vhs-effect="tracking-failure"] .fx-tear-band,
#crtPicture[data-vhs-effect="tape-wrinkle"] .fx-tear-band {
    display: block;
}

#crtPicture[data-vhs-effect="tape-wrinkle"] .fx-tear-band {
    border-radius: 45%;
    filter: contrast(1.2) saturate(1.35);
}

.fx-frame-hold {
    position: absolute;
    inset: 0;
    display: none;
    opacity: var(--fx-hold-opacity, 0.18);
    background: repeating-linear-gradient(
        to bottom,
        transparent 0 7px,
        color-mix(in srgb, var(--text-color) 22%, transparent) 7px 9px,
        transparent 9px 17px
    );
    mix-blend-mode: difference;
}

#crtPicture[data-vhs-effect="frame-stutter"] .fx-frame-hold {
    display: block;
}

.fx-head-switch {
    position: absolute;
    left: -8%;
    bottom: 0;
    width: 116%;
    height: var(--fx-head-height, 22px);
    display: none;
    opacity: var(--fx-head-opacity, 0.92);
    background:
        repeating-linear-gradient(90deg,
            rgba(255,255,255,0.78) 0 2px,
            rgba(0,0,0,0.82) 2px 5px,
            transparent 5px 9px),
        repeating-linear-gradient(to bottom,
            var(--text-color) 0 1px,
            transparent 1px 3px);
    background-position: var(--fx-head-x, 0) 0;
    box-shadow: 0 -5px 14px color-mix(in srgb, var(--text-color) 55%, transparent);
    mix-blend-mode: hard-light;
    transform: skewX(var(--fx-head-skew, 0deg));
}

#crtPicture[data-vhs-effect="overexposure"] .fx-head-switch {
    display: block;
}

.fx-whiteout {
    position: absolute;
    inset: 0;
    display: none;
    opacity: var(--fx-whiteout, 0.18);
    background: var(--text-color);
    mix-blend-mode: screen;
}

#crtPicture[data-vhs-effect="overexposure"] .fx-whiteout {
    display: block;
}

#crtPicture.vhs-fx-static #signalPicture {
    transform: none !important;
    opacity: 1 !important;
}

#crtPicture.channel-changing #signalPicture,
#crtPicture.channel-changing #snowCanvas {
    animation: crt-channel-bounce
               calc(var(--vhs-frame) * var(--channel-change-frames))
               steps(1, end) both;
}

#crtPicture.channel-changing::after {
    content: '';
    position: absolute;
    z-index: 10011;
    top: 50%;
    left: -2%;
    width: 104%;
    height: clamp(3px, 0.55vh, 7px);
    pointer-events: none;
    opacity: 0;
    background: color-mix(in srgb, var(--text-color) 72%, transparent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--text-color) 48%, transparent);
    mix-blend-mode: hard-light;
    animation: crt-channel-roll
               calc(var(--vhs-frame) * var(--channel-change-frames))
               steps(1, end) both;
}

@keyframes crt-channel-bounce {
    0%, 100% { transform: translateY(0) scaleY(1); }
    20% { transform: translateY(-9px) scaleY(0.965); }
    40% { transform: translateY(12px) scaleY(1.035); }
    60% { transform: translateY(-4px) scaleY(0.988); }
    80% { transform: translateY(2px) scaleY(1.006); }
}

@keyframes crt-channel-roll {
    0% { opacity: 0; transform: translateY(-54vh); }
    20% { opacity: 0.64; }
    80% { opacity: 0.34; }
    100% { opacity: 0; transform: translateY(54vh); }
}

@media (prefers-reduced-motion: reduce) {
    #screenWrapper,
    .glitch-active,
    .page-loader-bar,
    .page-loader-copy-inverted,
    .page-loader-idle,
    .page-loader-glitch,
    #crtPicture.channel-changing #signalPicture,
    #crtPicture.channel-changing #snowCanvas,
    #crtPicture.channel-changing::after {
        animation: none !important;
    }

    body,
    .bg-text-container,
    .bg-text-el,
    .bg-story-container,
    .submenu-wrapper,
    .submenu-item,
    .nav-btn,
    .navigation,
    .page-loader,
    .page-loader-bar,
    .page-loader-copy-inverted,
    .page-loader-label-stack,
    .sound-toggle {
        transition-duration: 1ms !important;
        transition-delay: 0ms !important;
    }

    .clean-hover-clone::before,
    .clean-hover-clone .btn-label-inverted,
    .active-nav-clone::before {
        transition-duration: 1ms !important;
        transition-delay: 0ms !important;
    }

    .audio-reactive-background {
        transform: none !important;
        filter: none !important;
    }

    .nav-btn:not(.is-active):hover {
        transform: none;
    }

    .clean-hover-clone {
        transform: none;
    }

    .vhs-line {
        display: none;
    }
}

@media (max-width: 768px) {
    .navigation { padding-left: 5%; }
    .nav-btn,
    .main-btn { font-size: 16px; padding: 0.08em 0; }
    .bg-story-container {
        column-count: 1;
        column-gap: 0;
    }
}