:root {
    --bass: 0;
    --mid: 0;
    --high: 0;
    --caption-energy: 0;
    --line-energy: 0;
    --caption-rgb-shift: 2.2;
    --caption-cyan-x: 0px;
    --caption-cyan-y: 0px;
    --caption-red-x: 0px;
    --caption-red-y: 0px;
    --caption-cyan-rotation: 0deg;
    --caption-red-rotation: 0deg;
    --line-rgb-shift: 0;
    --line-scale: .28;
    --cyan: 30, 242, 241;
    --red: 246, 5, 10;
    --ink: #050508;
}

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

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--ink);
}

body {
    color: #fff;
    font-family: 'ZCOOL KuaiLe', system-ui, sans-serif;
}

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

button {
    font: inherit;
}

.video-stage,
.stage-video,
.video-shade,
.film-grain,
#fx-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
}

.video-stage {
    z-index: 0;
    overflow: hidden;
    background: #fff;
}

.stage-video {
    object-fit: cover;
}

.intro-video {
    z-index: 2;
    filter: brightness(.98) saturate(.9);
    will-change: transform, opacity;
    transition: transform 1.55s cubic-bezier(.74, 0, .18, 1), opacity .55s 1s ease;
}

.intro-top {
    clip-path: polygon(0 0, 100% 0, 0 100%);
    transform-origin: 50% 49%;
}

.intro-bottom {
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
    transform-origin: 50% 51%;
}

.amv-video {
    z-index: 1;
    opacity: 0;
    filter: brightness(.72) saturate(1.08) contrast(1.04);
    transform: scale(1.035);
    transition: opacity .16s linear, filter .65s ease, transform 1.8s cubic-bezier(.2, .8, .2, 1);
}

body.screen-cutting .amv-video,
body.stage-live .amv-video {
    opacity: 1;
    transform: scale(1);
}

body.screen-cutting .intro-top,
body.stage-live .intro-top {
    transform: translate3d(-3vw, -57vh, 0) rotate(-2deg);
    opacity: 0;
}

body.screen-cutting .intro-bottom,
body.stage-live .intro-bottom {
    transform: translate3d(3vw, 57vh, 0) rotate(2deg);
    opacity: 0;
}

.video-shade {
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(circle at 50% 45%, transparent 24%, rgba(0, 0, 0, .44) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .28));
    transition: opacity 1s ease;
}

body.screen-cutting .video-shade,
body.stage-live .video-shade {
    opacity: 1;
}

.film-grain {
    z-index: 6;
    pointer-events: none;
    opacity: .035;
    background: url('/media/LDR_RGB1_0.png') repeat;
    mix-blend-mode: soft-light;
}

#fx-canvas {
    z-index: 7;
    pointer-events: none;
}

.signal-tear {
    position: fixed;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    overflow: hidden;
}

.signal-tear i {
    position: absolute;
    left: -4%;
    width: 108%;
    height: 2px;
    opacity: 0;
    background: rgba(255, 255, 255, .75);
    box-shadow: -8px 0 0 rgba(var(--cyan), .8), 8px 0 0 rgba(var(--red), .8);
}

.signal-tear i:nth-child(1) { top: 28%; }
.signal-tear i:nth-child(2) { top: 54%; }
.signal-tear i:nth-child(3) { top: 72%; }

body.beat .signal-tear i {
    animation: signal-tear 130ms steps(2, end) both;
}

.signal-tear i:nth-child(2) { animation-delay: 22ms !important; }
.signal-tear i:nth-child(3) { animation-delay: 44ms !important; }

@keyframes signal-tear {
    0% { opacity: 0; transform: translateX(0) scaleY(1); }
    35% { opacity: .9; transform: translateX(calc((var(--bass) + .2) * 28px)) scaleY(9); }
    100% { opacity: 0; transform: translateX(-16px) scaleY(1); }
}

main {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
}

.preview {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    transition: opacity .7s ease, visibility .7s;
}

.preview-content {
    position: relative;
    width: min(94vw, 1100px);
    height: 340px;
    transform: translateY(-2vh);
}

.path {
    position: absolute;
    left: 50%;
    top: 40px;
    width: 100%;
    height: 48px;
    transform: translateX(-50%);
    color: rgb(215, 154, 226);
    font: 700 clamp(16px, 2.3vw, 28px)/48px 'Sawarabi Mincho', serif;
    text-align: center;
    letter-spacing: .025em;
    filter: drop-shadow(0 0 1px rgb(216, 217, 221));
    transition: color .25s ease, filter .25s ease;
    pointer-events: none;
}

.path-half {
    position: absolute;
    inset: 0;
    white-space: nowrap;
    transition: transform 1.25s cubic-bezier(.2, .8, .15, 1), opacity .9s ease;
}

.path-top { clip-path: inset(0 0 49% 0); }
.path-bottom { clip-path: inset(51% 0 0 0); }

.preview-content:hover .path {
    color: #d20000;
    filter: drop-shadow(0 0 14px rgba(255, 0, 0, .85));
}

.katana {
    position: fixed;
    inset: 0;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    isolation: isolate;
    touch-action: none;
    transition: opacity .48s ease, filter .3s ease;
}

.katana canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity .38s ease;
}

.katana-fallback {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: auto;
    height: min(76vw, 700px);
    object-fit: contain;
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
    transition: opacity .45s ease;
}

.katana-loading {
    position: absolute;
    left: 50%;
    top: 50%;
    color: rgba(77, 45, 83, .42);
    font: 9px/1 'Sawarabi Mincho', serif;
    letter-spacing: .22em;
    white-space: nowrap;
    transform: translate(-50%, 42px);
    opacity: 0;
    transition: opacity .3s ease;
}

.katana.model-ready canvas { opacity: 1; }
.katana.model-ready .katana-fallback,
.katana.model-ready .katana-loading { opacity: 0; }
.katana.fallback-visible .katana-fallback { opacity: .9; }
.katana.fallback-visible .katana-loading { opacity: .48; }
.katana.model-failed .katana-loading { display: none; }
.katana:focus-visible { outline: none; }

.enter-hint {
    position: absolute;
    top: 317px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(80, 48, 85, .55);
    font: 11px/1 'Sawarabi Mincho', serif;
    letter-spacing: .28em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
}

.enter-hint > span { display: block; }
.hint-fallback { display: none !important; }
body.katana-ready .enter-hint,
body.katana-fallback-visible .enter-hint { opacity: 1; }
body.katana-fallback-visible .hint-drag { display: none; }
body.katana-fallback-visible .hint-fallback { display: block !important; }

body.katana-drawing .path,
body.screen-cutting .path {
    color: #d20000;
    filter: drop-shadow(0 0 15px rgba(255, 0, 0, .9));
}

body.screen-cutting .path-top {
    opacity: 0;
    transform: translate(24px, -12px) rotate(-1deg);
}

body.screen-cutting .path-bottom {
    opacity: 0;
    transform: translate(-24px, 12px) rotate(1deg);
}

body.screen-cutting .path-half {
    transition: opacity .16s linear, transform .24s cubic-bezier(.2, .8, .2, 1);
}

body.katana-drawing .enter-hint,
body.screen-cutting .enter-hint {
    opacity: 0;
}

body.screen-cutting .katana {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: none;
}

.katana.is-complete,
body.stage-live .katana {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: none;
}

body.katana-drawing .katana {
    pointer-events: none;
}

body.katana-fallback-strike .katana-fallback {
    animation: fallback-katana-strike 1.25s cubic-bezier(.22, .65, .2, 1) forwards;
}
body.katana-fallback-strike .katana canvas { opacity: 0; }

@keyframes fallback-katana-strike {
    0% { transform: translate(-50%, -50%) rotate(90deg); }
    58% { transform: translate(-56%, -68%) rotate(85deg); }
    100% { transform: translate(25vw, -75vh) rotate(72deg); opacity: 0; }
}

body.stage-live .preview {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: none;
}

.content {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 12;
    width: min(94vw, 1180px);
    transform: translate(-50%, -44%);
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s .25s ease, transform 1s .25s cubic-bezier(.2, .8, .2, 1), visibility 1s;
}

body.stage-live .content {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
}

body.screen-cutting .content {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
    transition: opacity .24s .04s ease, transform .3s .04s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}

.caption-link {
    position: relative;
    display: inline-block;
    color: white;
    font-size: clamp(44px, 7vw, 78px);
    line-height: 1;
    text-decoration: none;
    letter-spacing: .01em;
    text-shadow: 0 3px 22px rgba(0, 0, 0, .4);
    isolation: isolate;
    transition: color .25s ease, transform .12s linear;
    transform: translateY(calc(var(--caption-energy) * -1px)) scale(calc(1 + var(--caption-energy) * .008));
}

.caption-link::before,
.caption-link::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .8;
    mix-blend-mode: screen;
}

.caption-link::before {
    color: rgb(var(--cyan));
    transform: translate(
        calc(var(--caption-rgb-shift) * -1px + var(--caption-cyan-x)),
        var(--caption-cyan-y)
    ) rotate(var(--caption-cyan-rotation));
}

.caption-link::after {
    color: rgb(var(--red));
    transform: translate(
        calc(var(--caption-rgb-shift) * 1px + var(--caption-red-x)),
        var(--caption-red-y)
    ) rotate(var(--caption-red-rotation));
}

.caption-link:hover {
    color: rgba(255, 255, 255, .38);
}

.line {
    position: relative;
    width: min(96%, 1100px);
    height: 19px;
    margin: 8px auto 0;
    filter: drop-shadow(0 0 calc(3px + var(--line-energy) * 7px) rgba(255, 255, 255, .7));
}

.line::before,
.line::after,
.line span {
    content: '';
    position: absolute;
    left: 50%;
    top: 6px;
    width: 100%;
    height: 7px;
    transform-origin: center;
    transform: translateX(-50%) scaleX(var(--line-scale));
    transition: none;
    clip-path: polygon(0 46%, 8% 30%, 18% 58%, 34% 24%, 51% 54%, 69% 31%, 84% 61%, 100% 44%, 100% 62%, 84% 78%, 69% 52%, 51% 73%, 34% 48%, 18% 77%, 8% 54%, 0 66%);
}

.line span {
    z-index: 2;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75) 8%, #fff 48%, #fff 52%, rgba(255, 255, 255, .75) 92%, transparent);
}
.line::before { background: rgb(var(--cyan)); transform: translate(calc(-50% - var(--line-rgb-shift) * 1px), calc(var(--line-energy) * -3px)) scaleX(var(--line-scale)); }
.line::after { background: rgb(var(--red)); transform: translate(calc(-50% + var(--line-rgb-shift) * 1px), calc(var(--line-energy) * 3px)) scaleX(var(--line-scale)); }

.videos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px 0;
    margin-top: 7px;
}

.videos button {
    position: relative;
    flex: 0 0 auto;
    padding: 4px 11px;
    border: 0;
    color: rgba(255, 255, 255, .72);
    background: transparent;
    font-size: clamp(12px, 1.6vw, 19px);
    letter-spacing: .035em;
    cursor: pointer;
    transition: color .2s ease, text-shadow .2s ease, transform .2s ease;
}

.videos button:not(:last-child)::after {
    content: '|';
    position: absolute;
    right: -2px;
    color: rgba(255, 255, 255, .32);
}

.videos button:hover,
.videos button:focus-visible,
.videos button.active {
    color: #fff;
    outline: none;
    text-shadow: -2px 0 0 rgb(var(--cyan)), 2px 0 0 rgb(var(--red));
    transform: translateY(-1px);
}

.videos button.active::before {
    content: '';
    position: absolute;
    left: 24%;
    right: 24%;
    bottom: 0;
    height: 2px;
    background: #d00000;
    box-shadow: 0 0 7px rgba(var(--red), .85);
}

.now-playing {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-family: 'Sawarabi Mincho', serif;
    font-size: 9px;
    letter-spacing: .18em;
    color: rgba(255, 255, 255, .4);
    text-transform: uppercase;
}

.now-playing span {
    color: rgba(var(--red), .65);
}

.now-playing b {
    font-weight: 400;
}

.contact {
    position: fixed;
    right: max(7px, env(safe-area-inset-right));
    bottom: max(7px, env(safe-area-inset-bottom));
    z-index: 14;
    margin: 0;
    color: white;
    font-size: 11px;
    opacity: .14;
    transition: opacity .3s ease;
}

.contact a { color: inherit; }
.contact:hover { opacity: .9; }

.model-credit {
    position: fixed;
    right: max(7px, env(safe-area-inset-right));
    bottom: max(27px, calc(env(safe-area-inset-bottom) + 27px));
    z-index: 14;
    margin: 0;
    color: #352a38;
    font-size: 9px;
    opacity: .18;
    transition: color .5s ease, opacity .3s ease;
}

.model-credit a { color: inherit; }
.model-credit:hover { opacity: .75; }
body.stage-live .model-credit { color: #fff; }

.for-upadok {
    position: fixed;
    left: max(4px, env(safe-area-inset-left));
    bottom: max(2px, env(safe-area-inset-bottom));
    z-index: 14;
    width: 72px;
    padding: 0;
    border: 0;
    background: none;
    opacity: .07;
    cursor: pointer;
    transition: width .3s ease, opacity .3s ease, filter .3s ease;
}

.for-upadok img { display: block; width: 100%; }
.for-upadok:hover, .for-upadok:focus-visible { width: 84px; opacity: 1; outline: none; filter: drop-shadow(0 0 8px rgba(var(--cyan), .45)); }

body.track-switching .amv-video {
    filter: brightness(.32) saturate(1.5) contrast(1.2);
}

@media (max-width: 700px) {
    .preview-content { width: 96vw; height: 300px; transform: translateY(-2vh); }
    .path { top: 30px; font-size: clamp(10px, 3.1vw, 17px); letter-spacing: -.04em; }
    .katana-fallback { height: min(90vw, 390px); }
    .katana-loading { transform: translate(-50%, 34px); }
    .enter-hint { top: 272px; font-size: 8px; }
    .content { width: 96vw; }
    .line { width: 96%; }
    .videos button { padding: 5px 6px; }
    .contact, .model-credit { font-size: 8px; }
}

@media (max-width: 420px) {
    .path { letter-spacing: -.055em; }
    .caption-link { font-size: clamp(30px, 9.7vw, 40px); }
    .videos { padding: 0 8px; }
    .videos button { font-size: 10px; }
    .for-upadok { width: 54px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .15s !important;
    }
}