/*
 * TwTe --------- +
 *  Twisted Tempo |
 * -------------- +
*/

@import url("../fonts/fonts.css");

:root {
    --sat: env(safe-area-inset-top, 0px);
    --sar: env(safe-area-inset-right, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);

    --pad-x: 1.5rem;
    --pad-top: 3.25rem;
    --pad-bottom: 1.75rem;
}

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

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

html,
body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    touch-action: none;
}

body {
    position: fixed;
    inset: 0;
    height: auto;
    background-color: var(--bg);
    color: var(--txt);
    font-family: "MonaspaceNeon", monospace;
    font-size: 12px;
    letter-spacing: 0.04em;
    -webkit-font-smoothing: none;
    font-smooth: never;
    user-select: none;
    -webkit-user-select: none;
    overscroll-behavior: none;
}

img {
    display: block;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Background */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        repeating-conic-gradient(
            from 45deg,
            #141319 0deg 10deg,
            #000000 10deg 20deg
        ),
        repeating-linear-gradient(90deg, #141319 0px 1px, transparent 1px 40px),
        repeating-linear-gradient(0deg, #141319 0px 1px, transparent 1px 40px);
    background-blend-mode: overlay, normal, normal;
    opacity: 0.5;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(
        ellipse at center,
        transparent 20%,
        #000000 85%
    );
}

/* File Input */
#file-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 20;
    cursor: pointer;
    font-size: 16px;
}

.title-area[data-file-loaded="true"] #file-input {
    pointer-events: none;
}

/* Layout */
.page-container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding-top: calc(var(--sat) + var(--pad-top));
    padding-right: calc(var(--sar) + var(--pad-x));
    padding-bottom: calc(var(--sab) + var(--pad-bottom));
    padding-left: calc(var(--sal) + var(--pad-x));
}

/* Title */
.title-area {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.title {
    position: relative;
    font-family: "AuxMono", monospace;
    font-size: clamp(22px, 7vw, 32px);
    font-weight: 400;
    letter-spacing: 0.15em;
    color: var(--txt);
    text-align: center;
    line-height: 1;
    transition:
        color 0.15s ease,
        opacity 0.15s ease;
    will-change: transform;
    z-index: 10;
}

.title[data-state="idle"] {
    color: var(--sec);
}

.title[data-state="loaded"] {
    color: var(--txt);
}

.title[data-state="playing"] {
    color: var(--txt);
}

.title[data-state="paused"] {
    color: var(--sec);
    opacity: 0.7;
}

.title[data-state="dragging-left"] {
    color: var(--sec);
    transform: translateX(-8px);
}

.title[data-state="dragging-right"] {
    color: var(--acc);
    transform: translateX(8px);
}

/* Drag */
.drag-hints {
    position: absolute;
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 280px;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 5;
    margin-top: 38px;
}

.title-area[data-file-loaded="true"] .drag-hints {
    opacity: 1;
}

.hint {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--sec);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: lowercase;
}

.hint--left {
    flex-direction: row;
}

.hint--right {
    flex-direction: row-reverse;
}

.hint img {
    opacity: 0.6;
}

/* Status */
.status-line {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--txt);
    text-align: center;
    text-transform: lowercase;
    padding: 3px 10px;
    background: color-mix(in oklch, var(--acc) 15%, transparent);
    border: 1px solid color-mix(in oklch, var(--acc) 25%, transparent);
}

.status-line:empty {
    background: transparent;
    border-color: transparent;
}

/* Knobs */
.knobs-area {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(24px, 10vw, 48px);
    /* padding-bottom: 8px; */
    width: 100%;
}

.knob-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.knob-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--sec);
    font-size: 10px;
    letter-spacing: 0.08em;
}

.knob-label img {
    opacity: 0.8;
}

.knob {
    position: relative;
    width: 64px;
    height: 64px;
    cursor: ns-resize;
    touch-action: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.knob__body,
.knob__indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 64px;
    height: 64px;
}

.knob__indicator {
    transform-origin: center center;
    transform: rotate(var(--knob-angle, -135deg));
    will-change: transform;
}

.knob:focus-visible::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 1px solid var(--sec);
    pointer-events: none;
}

/* Export */
.export-overlay {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: color-mix(in oklch, var(--bg) 90%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.export-overlay[data-visible="true"] {
    opacity: 1;
    pointer-events: all;
}

.export-overlay__label {
    font-family: "AuxMono", monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--sec);
    text-transform: lowercase;
}

.export-overlay__bar {
    width: 120px;
    height: 2px;
    background: var(--acc);
    transform-origin: left center;
    transform: scaleX(var(--export-progress, 0));
    transition: transform 0.1s linear;
}

/* Visualizer */
#viz-canvas {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(380px, 95vw);
    height: min(260px, 50vh);
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

#viz-canvas[data-active="true"] {
    opacity: 1;
}