:root {
    color-scheme: dark;
    --grain: .05;
    --grain-film: .02;
    --scan: .10;
    --px: calc(min(100vw * 9 / 16, 100dvh) / 1080);
    --scan-period: 4px;
    --band: .05;
    --tear: .85;
    --tearx: 6px;
    --tear-lift: 1.09;
    --tear-fast: 2.5s;
    --tear-slow: 4.5s;
    --tear-wait-min: 1s;
    --tear-wait-max: 21s;
}

html,
body {
    margin: 0;
    height: 100%;
    background: #000;
    overflow: hidden;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

#grain {
    position: fixed;
    inset: -200px;
    z-index: 0;
    pointer-events: none;
    background-image: url('/grain.png');
    background-repeat: repeat;
    background-size: 160px 160px;
    image-rendering: pixelated;
    opacity: 0;
    transition: opacity .45s ease;
    animation: boil .72s steps(1) infinite;
    will-change: transform;
}

#grain.on {
    opacity: var(--grain);
}

body.between #grain {
    opacity: 0;
}

@keyframes boil {
    0% { transform: translate3d(0, 0, 0); }
    12% { transform: translate3d(-53px, -97px, 0); }
    25% { transform: translate3d(-118px, -31px, 0); }
    37% { transform: translate3d(-22px, -141px, 0); }
    50% { transform: translate3d(-97px, -112px, 0); }
    62% { transform: translate3d(-141px, -66px, 0); }
    75% { transform: translate3d(-66px, -11px, 0); }
    87% { transform: translate3d(-11px, -84px, 0); }
}

#stage {
    position: relative;
    z-index: 1;
    height: 100dvh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

#frame {
    position: relative;
    line-height: 0;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    width: min(100vw, calc(100dvh * 16 / 9));
}

#warp {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity .45s ease;
    filter: brightness(var(--tear-lift)) saturate(1.1);
    transform: translate3d(var(--tearx), 0, 0);
    clip-path: inset(0 0 100% 0);
    will-change: clip-path;
}

body.tape #warp {
    opacity: var(--tear);
}

#view {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-user-drag: none;
    cursor: url('/cursor.png') 12 12, crosshair;
    touch-action: manipulation;
    opacity: 1;
    transition: opacity .45s ease;
}

#view.fading {
    opacity: 0;
}

#tape {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: opacity .45s ease;
}

body.tape #tape {
    opacity: 1;
}

body.between #tape,
body.between #warp {
    opacity: 0;
    transition-duration: .16s;
    transition-delay: 0s;
}

#film {
    position: absolute;
    inset: -200px;
    pointer-events: none;
    background-image: url('/grain.png');
    background-repeat: repeat;
    background-size: 160px 160px;
    image-rendering: pixelated;
    opacity: var(--grain-film);
    animation: boil .72s steps(1) infinite;
    will-change: transform;
}

#scan {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--scan-period) * -2);
    height: calc(100% + var(--scan-period) * 4);
    background-image: linear-gradient(to bottom,
            rgba(0, 0, 0, var(--scan)) 0 25%,
            rgba(0, 0, 0, 0) 25% 100%);
    background-size: 100% var(--scan-period);
    background-repeat: repeat;
    animation: drift 7s linear infinite;
    will-change: transform;
}

#band {
    position: absolute;
    left: -10%;
    width: 120%;
    height: 14%;
    backdrop-filter: blur(calc(var(--px) * .7)) saturate(1.12);
    -webkit-backdrop-filter: blur(calc(var(--px) * .7)) saturate(1.12);
    background-image: linear-gradient(to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, var(--band)) 45%,
            rgba(255, 255, 255, calc(var(--band) * 1.6)) 55%,
            rgba(255, 255, 255, 0) 100%);
    animation: sweep 19s linear infinite;
    will-change: transform;
}

@keyframes drift {
    to { transform: translate3d(0, var(--scan-period), 0); }
}

@keyframes sweep {
    0% { transform: translate3d(0, -140%, 0); }
    100% { transform: translate3d(0, 820%, 0); }
}

body.still #grain,
body.still #film,
body.still #scan,
body.still #band,
body.still #warp {
    animation-play-state: paused;
}

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

    #grain,
    #film,
    #scan,
    #band,
    #warp {
        animation: none;
    }
}

#rotate {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: #000;
    color: #ddd;
    z-index: 10;
    font: 500 clamp(14px, 4.5vw, 20px)/1.5 system-ui, sans-serif;
    text-align: center;
    padding: 2rem;
}

@media (orientation: portrait) and (pointer: coarse) {
    #rotate {
        display: flex;
    }

    #stage {
        visibility: hidden;
    }
}

@keyframes tear {
    0% { clip-path: inset(0.00% 0 100.00% 0); }
    4% { clip-path: inset(0.00% 0 95.64% 0); }
    8% { clip-path: inset(0.00% 0 91.28% 0); }
    12% { clip-path: inset(4.08% 0 86.92% 0); }
    16% { clip-path: inset(8.44% 0 82.56% 0); }
    20% { clip-path: inset(12.80% 0 78.20% 0); }
    24% { clip-path: inset(17.16% 0 73.84% 0); }
    28% { clip-path: inset(21.52% 0 69.48% 0); }
    32% { clip-path: inset(25.88% 0 65.12% 0); }
    36% { clip-path: inset(30.24% 0 60.76% 0); }
    40% { clip-path: inset(34.60% 0 56.40% 0); }
    44% { clip-path: inset(38.96% 0 52.04% 0); }
    48% { clip-path: inset(43.32% 0 47.68% 0); }
    52% { clip-path: inset(47.68% 0 43.32% 0); }
    56% { clip-path: inset(52.04% 0 38.96% 0); }
    60% { clip-path: inset(56.40% 0 34.60% 0); }
    64% { clip-path: inset(60.76% 0 30.24% 0); }
    68% { clip-path: inset(65.12% 0 25.88% 0); }
    72% { clip-path: inset(69.48% 0 21.52% 0); }
    76% { clip-path: inset(73.84% 0 17.16% 0); }
    80% { clip-path: inset(78.20% 0 12.80% 0); }
    84% { clip-path: inset(82.56% 0 8.44% 0); }
    88% { clip-path: inset(86.92% 0 4.08% 0); }
    92% { clip-path: inset(91.28% 0 0.00% 0); }
    96% { clip-path: inset(95.64% 0 0.00% 0); }
    100% { clip-path: inset(100.00% 0 0.00% 0); }
}