@font-face {
    font-family: Kalameh;
    src: url("../fonts/Kalameh(FaNum)-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Kalameh;
    src: url("../fonts/Kalameh(FaNum)-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --void: #101112;
    --tick: #5ee0c8;
    --mute: #6d7370;
    --img-h: 6114;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    height: 100%;
    background: #121818;
    color: #e8eeec;
    font-family: Kalameh, Tahoma, sans-serif;
}

.deck {
    height: 100svh;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.deck::-webkit-scrollbar {
    display: none;
}

.panel {
    height: 100svh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: grid;
    place-items: center;
    padding: 1.5rem 2.4rem;
    background: var(--bg, #121818);
}

.frame {
    --span: calc(var(--to) - var(--from));
    aspect-ratio: 960 / var(--span);
    width: min(100%, calc((100svh - 3rem) * 960 / var(--span)));
    overflow: hidden;
}

.frame img {
    width: 100%;
    height: auto;
    display: block;
    transform: translateY(calc(var(--from) * -100% / var(--img-h)));
    user-select: none;
    pointer-events: none;
}

.ticks {
    position: fixed;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 7px;
    z-index: 2;
    mix-blend-mode: difference;
}

.ticks button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    background: #fff;
    cursor: pointer;
}

.ticks button.is-on {
    background: #fff;
    height: 18px;
}

.count {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.08em;
    z-index: 2;
    direction: ltr;
    mix-blend-mode: difference;
}

@media (prefers-reduced-motion: reduce) {
    .deck {
        scroll-snap-type: y proximity;
        scroll-behavior: auto;
    }
}