/* =========================================================
   CRT
   ========================================================= */

#crt-overlay {
    position: fixed;

    inset: 0;

    z-index: 9999;

    pointer-events: none;

    opacity: var(--crt-opacity);

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,.06)
            0 1px,
            transparent
            1px 4px
        );

    mix-blend-mode: soft-light;
}


/* =========================================================
   BOOT
   ========================================================= */

.boot-screen {
    position: fixed;

    inset: 0;

    z-index: 10000;

    display: grid;
    place-items: center;

    pointer-events: none;

    visibility: hidden;

    opacity: 0;

    background:
        var(--bg-color);

    color:
        var(--text-color);
}


.boot-screen.show {
    visibility: visible;

    animation:
        bootScreen
        1.45s
        steps(12)
        both;
}


.boot-card {
    width: min(
        310px,
        80vw
    );

    padding: 24px;

    border:
        4px solid
        var(--dark-outline);

    background:
        var(--window-bg);

    text-align: center;

    box-shadow:
        8px 8px 0
        var(--dark-outline);
}


.boot-mascot {
    color:
        var(--accent-main);

    font-size: 25px;

    animation:
        bootMascot
        .6s
        steps(4)
        both;
}


.boot-logo {
    margin-top: 10px;

    font-size: 22px;

    font-weight: 900;

    letter-spacing: 5px;
}


.boot-subtitle {
    margin-top: 5px;

    color:
        var(--muted-color);

    font-size: 8px;
}


.boot-progress {
    height: 12px;

    margin:
        18px 0
        8px;

    padding: 2px;

    border:
        2px solid
        var(--dark-outline);

    background:
        var(--panel-bg);
}


.boot-progress span {
    display: block;

    width: 100%;
    height: 100%;

    background:
        repeating-linear-gradient(
            90deg,
            var(--accent-main)
            0 10px,
            transparent
            10px 13px
        );

    transform-origin: left;

    animation:
        bootLoad
        .8s
        steps(8)
        both;
}


.boot-copy {
    color:
        var(--accent-main);

    font-size: 8px;

    animation:
        blink
        .5s
        steps(2)
        infinite;
}


/* =========================================================
   PAGE
   ========================================================= */

.tab-page.active {
    animation:
        pagePop
        .16s
        steps(3)
        both;
}


/* =========================================================
   CONTROLS
   ========================================================= */

button,
.action-button,
.tab,
select {
    transition:
        filter .08s linear,
        background .08s linear;
}


button:active,
.action-button:active {
    transform:
        translate(
            2px,
            2px
        );

    box-shadow:
        1px 1px 0
        var(--dark-outline);
}


/* =========================================================
   PET
   ========================================================= */

.pet-bounce {
    animation:
        petBounce
        .55s
        steps(6);
}


.pet-spin {
    animation:
        petSpin
        .65s
        steps(8);
}


.pet-heart {
    animation:
        petHeart
        .75s
        steps(6);
}


.pet-dance {
    animation:
        petDance
        .42s
        steps(2)
        infinite;
}


.is-playing .pet-bubble {
    animation:
        musicNote
        .7s
        steps(3)
        infinite;
}


.is-playing .album-heart {
    animation:
        heartBeat
        .65s
        steps(2)
        infinite;
}


/* =========================================================
   BASS
   ========================================================= */

.kritr-window.bass-hit {
    animation:
        bassHit
        .18s
        steps(2);
}


.kritr-window.bass-hit .visualizer-container {
    animation:
        bassFlash
        .18s
        steps(2);
}


.kritr-window.bass-hit .pet-display {
    animation:
        petBass
        .2s
        steps(2);
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes bootScreen {

    0% {
        opacity: 1;
    }

    78% {
        opacity: 1;
    }

    100% {
        opacity: 0;

        visibility: hidden;
    }
}


@keyframes bootMascot {

    0% {
        opacity: 0;

        transform:
            translateY(8px);
    }

    50% {
        opacity: 1;

        transform:
            translateY(-3px);
    }

    100% {
        transform:
            translateY(0);
    }
}


@keyframes bootLoad {

    from {
        transform:
            scaleX(0);
    }

    to {
        transform:
            scaleX(1);
    }
}


@keyframes pagePop {

    from {
        opacity: 0;

        transform:
            translateY(3px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes petBounce {

    0%,
    100% {
        transform:
            translateY(0);
    }

    40% {
        transform:
            translateY(-18px);
    }

    60% {
        transform:
            translateY(-18px);
    }
}


@keyframes petSpin {

    to {
        transform:
            rotate(360deg);
    }
}


@keyframes petHeart {

    0%,
    100% {
        transform:
            scale(1);
    }

    35% {
        color:
            var(--accent-main);

        transform:
            scale(1.25);
    }

    60% {
        transform:
            scale(.94);
    }
}


@keyframes petDance {

    0% {
        transform:
            translateX(-2px)
            rotate(-2deg);
    }

    100% {
        transform:
            translateX(2px)
            rotate(2deg);
    }
}


@keyframes musicNote {

    0% {
        transform:
            translateY(2px);

        opacity: .3;
    }

    100% {
        transform:
            translateY(-3px);

        opacity: 1;
    }
}


@keyframes heartBeat {

    0% {
        transform:
            scale(1);
    }

    100% {
        transform:
            scale(1.3);
    }
}


@keyframes bassHit {

    0% {
        transform:
            translate(0,0);
    }

    45% {
        transform:
            translate(1px,1px);
    }

    100% {
        transform:
            translate(0,0);
    }
}


@keyframes bassFlash {

    50% {
        filter:
            brightness(1.3);
    }
}


@keyframes petBass {

    50% {
        transform:
            translateY(-4px)
            scale(1.05);
    }
}


@keyframes blink {

    50% {
        opacity: .25;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    *,
    *::before,
    *::after {
        animation-duration:
            .001ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .001ms !important;
    }
}
/* Feature-pass bass variants */
body[data-bass-fx="subtle"] .kritr-window.bass-hit { animation-name: bassHitSubtle; }
body[data-bass-fx="wild"] .kritr-window.bass-hit { animation-name: bassHitWild; }
@keyframes bassHitSubtle { 50% { transform: translate(1px,0); } }
@keyframes bassHitWild { 25% { transform: translate(-3px,2px) scale(1.006); } 55% { transform: translate(3px,-2px) scale(1.006); } 100% { transform:none; } }