@font-face {
    font-family: "Lato-Regular";
    src: url(./fonts/Lato/Lato-Regular.ttf);
}

@font-face {
    font-family: "Lato-Italic";
    src: url(./fonts/Lato/Lato-Italic.ttf);
}

@font-face {
    font-family: "Lato-Bold";
    src: url(./fonts/Lato/Lato-Bold.ttf);
}

:root {
    --voice1-color: #a0c4ff;
    --voice2-color: #ffdd57;
    --voice3-color: #a8e6cf;
    --voice4-color: #ffffff;
    --voice5-color: #ff6b6b;

    --glow-scale: 1;
    --flash-brightness: 1;
    --effect-speed: 1;
}

@supports (color: color(display-p3 0 0 0)) {
    :root {
        --voice1-color: color(display-p3 0.627 0.769 1);
        --voice2-color: color(display-p3 1 0.867 0.341);
        --voice3-color: color(display-p3 0.659 0.902 0.812);
        --voice4-color: color(display-p3 1 1 1);
        --voice5-color: color(display-p3 1 0.42 0.42);
    }
}

body[data-effects="low"] {
    --glow-scale: 0.65;
    --flash-brightness: 0.65;
    --effect-speed: 1.15;
}

body[data-effects="medium"] {
    --glow-scale: 1;
    --flash-brightness: 1;
    --effect-speed: 1;
}

body[data-effects="high"] {
    --glow-scale: 1.35;
    --flash-brightness: 1.25;
    --effect-speed: 0.9;
}

body {
    display: grid;
    height: 100vh;
    margin: 0;
    justify-content: center;
    background: #000;
    transition: background 0.3s;
}

#video-container {
    margin: auto;
    position: relative;
}

#video-mask {
    aspect-ratio: 240.5 / 100;
    display: grid;
    overflow: hidden;
    align-content: center;
    transition: box-shadow 0.2s ease, filter 0.2s ease, background 0.2s ease;
    z-index: 1000;
    animation: heartbeat calc(0.8s * var(--effect-speed)) ease-in-out infinite;
}

iframe {
    width: 80vw;
    height: 53.33333333vw;
    margin-top: -0.35vw;
}

#closed-captions {
    position: absolute;
    bottom: 5em;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    text-align: center;
    z-index: 9999;
}

#closed-captions p {
    opacity: 0;
    transition: opacity 0.05s;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    font-family: "Lato-Regular";
    font-size: 1.8em;
    text-shadow: 0 2px 8px #000, 0 0 2px #000;
    white-space: nowrap;
}

#closed-captions .on {
    opacity: 1;
}

#closed-captions .off {
    opacity: 0;
    transition: opacity 0.2s;
}

p {
    color: #ff9aa2;
    font-family: "Lato-Bold" !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0;
}

.voice1 {
    color: var(--voice1-color);
    font-family: "Lato-Italic" !important;
    font-size: 1.5em !important;
    letter-spacing: 0.04em;
    opacity: 0;
}

.voice2 {
    color: var(--voice2-color);
    font-family: "Lato-Regular" !important;
}

.voice3 {
    color: var(--voice3-color);
    font-family: "Lato-Regular" !important;
}

.voice4 {
    color: var(--voice4-color);
    font-family: "Lato-Bold" !important;
}

.voice5 {
    color: var(--voice5-color);
    font-family: "Lato-Bold" !important;
    letter-spacing: 0.06em;
    animation: none;
}

.voice5.on {
    animation: scream 0.3s ease infinite alternate;
}

.sound-crowd {
    color: #a0c4ff;
    font-family: "Lato-Bold" !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sound-tense-music {
    color: #d2a8ff;
    font-family: "Lato-Italic" !important;
    letter-spacing: 0.04em;
}

.sound-tense-music.on {
    animation: tenseText 0.6s ease-in-out infinite alternate;
}

.sound-tense-music.off {
    animation: none;
    opacity: 0;
}

@keyframes scream {
    from { transform: translateX(-50%) scale(1); }
    to   { transform: translateX(-50%) scale(1.04); }
}

@keyframes tenseText {
    from {
        transform: translateX(-50%) scale(1);
        text-shadow: 0 0 8px #d2a8ff, 0 2px 8px #000;
        letter-spacing: 0.04em;
        opacity: 0.8;
    }
    to {
        transform: translateX(-50%) scale(1.04);
        text-shadow: 0 0 24px #d2a8ff, 0 0 50px #9d4edd, 0 2px 8px #000;
        letter-spacing: 0.08em;
        opacity: 1;
    }
}

.p0 span { opacity: 0; }
.p0.on span:nth-of-type(1) { opacity: 1; transition: opacity 0s 0s; }
.p0.on span:nth-of-type(2) { opacity: 1; transition: opacity 0s 0s; }
.p0.on span:nth-of-type(3) { opacity: 1; transition: opacity 0s 0s; }
.p0.on span:nth-of-type(4) { opacity: 1; transition: opacity 0s 0.4s; }
.p0.on span:nth-of-type(5) { opacity: 1; transition: opacity 0s 0.7s; }
.p0.on span:nth-of-type(6) { opacity: 1; transition: opacity 0s 1.1s; }
.p0.on span:nth-of-type(7) { opacity: 1; transition: opacity 0s 1.4s; }
.p0.on span:nth-of-type(8) { opacity: 1; transition: opacity 0s 1.6s; }
.p0.on span:nth-of-type(9) { opacity: 1; transition: opacity 0s 1.8s; }

@keyframes heartbeat {
    0%   { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
    20%  { box-shadow: 10px 20px calc(40px * var(--glow-scale)) 10px rgba(255, 0, 0, calc(0.6 * var(--flash-brightness))); }
    40%  { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
    60%  { box-shadow: 8px 16px calc(30px * var(--glow-scale)) 8px rgba(255, 0, 0, calc(0.3 * var(--flash-brightness))); }
    80%  { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
}

.sound0 #video-mask,
.sound1 #video-mask,
.sound2 #video-mask,
.sound3 #video-mask,
.sound4 #video-mask,
.sound5 #video-mask,
.sound6 #video-mask,
.sound7 #video-mask,
.sound8 #video-mask,
.sound9 #video-mask,
.sound10 #video-mask,
.sound11 #video-mask,
.sound12 #video-mask,
.sound13 #video-mask {
    animation: none;
}

.sound0 #video-mask {
    animation: flash calc(0.3s * var(--effect-speed)) steps(1) infinite;
}

@keyframes flash {
    0%   { box-shadow: 10px 20px calc(30px * var(--glow-scale)) 10px rgba(255, 255, 255, calc(1 * var(--flash-brightness))); }
    25%  { box-shadow: 10px 20px calc(30px * var(--glow-scale)) 10px rgba(255, 224, 102, calc(1 * var(--flash-brightness))); }
    50%  { box-shadow: 10px 20px calc(30px * var(--glow-scale)) 10px rgba(255, 255, 255, calc(1 * var(--flash-brightness))); }
    75%  { box-shadow: 10px 20px calc(30px * var(--glow-scale)) 10px rgba(170, 212, 255, calc(1 * var(--flash-brightness))); }
    100% { box-shadow: 10px 20px calc(30px * var(--glow-scale)) 10px rgba(255, 255, 255, calc(1 * var(--flash-brightness))); }
}

.sound1 #video-mask {
    animation: kiddie calc(0.6s * var(--effect-speed)) ease-in-out infinite alternate;
}

@keyframes kiddie {
    from { box-shadow: 10px 20px calc(30px * var(--glow-scale)) 10px rgba(255, 159, 28, calc(0.9 * var(--flash-brightness))); }
    to   { box-shadow: 10px 20px calc(30px * var(--glow-scale)) 10px rgba(255, 204, 0, calc(0.9 * var(--flash-brightness))); }
}

.sound2 #closed-captions .on {
    animation: cheerText 0.4s ease-in-out infinite alternate;
}

@keyframes cheerText {
    from {
        transform: translateX(-50%) scale(1);
        text-shadow: 0 0 8px #a0c4ff, 0 2px 8px #000;
        letter-spacing: 0.02em;
    }
    to {
        transform: translateX(-50%) scale(1.06);
        text-shadow: 0 0 20px #ffffff, 0 0 40px #a0c4ff, 0 2px 8px #000;
        letter-spacing: 0.08em;
    }
}

.sound-crowd.on {
    animation: crowdBounce 0.3s ease-in-out infinite alternate;
}

@keyframes crowdBounce {
    from { transform: translateX(-50%) translateY(0px) scale(1); }
    to   { transform: translateX(-50%) translateY(-4px) scale(1.05); }
}

.sound3 #video-mask {
    box-shadow: 10px 20px calc(30px * var(--glow-scale)) 10px rgba(0, 180, 216, calc(0.85 * var(--flash-brightness)));
}

.sound4 #video-mask {
    box-shadow: 10px 20px calc(30px * var(--glow-scale)) 10px rgba(0, 119, 182, calc(0.85 * var(--flash-brightness)));
}

body.sound5 {
    background: #0d0015;
    transition: background 1s ease-in;
}

.sound5 #video-mask {
    animation: tenseBuild calc(1.2s * var(--effect-speed)) ease-in-out infinite alternate;
}

@keyframes tenseBuild {
    from { box-shadow: 10px 20px calc(40px * var(--glow-scale)) 10px rgba(26, 0, 48, calc(0.9 * var(--flash-brightness))); }
    to   { box-shadow: 20px 30px calc(60px * var(--glow-scale)) 20px rgba(61, 0, 96, calc(0.9 * var(--flash-brightness))); }
}


body.sound6 {
    background: #0a0010;
    transition: background 0.5s ease-in;
}

.sound6 #video-mask {
    animation: tensePeak calc(0.9s * var(--effect-speed)) ease-in-out infinite alternate;
}

@keyframes tensePeak {
    from { box-shadow: 20px 30px calc(60px * var(--glow-scale)) 20px rgba(42, 0, 80, calc(0.9 * var(--flash-brightness))); }
    to   { box-shadow: 30px 40px calc(80px * var(--glow-scale)) 30px rgba(90, 0, 144, calc(0.9 * var(--flash-brightness))); }
}

body.sound7 {
    background: #000000;
    transition: background 0.1s ease-in;
}

.sound7 #video-mask {
    animation: none;
}

body.sound8,
body.sound9,
body.sound10,
body.sound11,
body.sound12,
body.sound13 {
    background: radial-gradient(
        circle at center,
        #22000a 0%,
        #120007 45%,
        #050003 100%
    );
    transition: background 0.15s ease-in;
}
.sound8 #video-mask,
.sound9 #video-mask,
.sound10 #video-mask,
.sound11 #video-mask,
.sound12 #video-mask,
.sound13 #video-mask {
    box-shadow:
        0 0 calc(2em * var(--glow-scale)) rgba(42, 0, 8, calc(0.8 * var(--flash-brightness))),
        0 0 calc(4em * var(--glow-scale)) rgba(18, 0, 7, calc(0.9 * var(--flash-brightness)));
}

body.flash {
    animation: bgFlash calc(0.08s * var(--effect-speed)) ease-out forwards;
}

@keyframes bgFlash {
    0%   { background: rgba(255, 255, 255, calc(1 * var(--flash-brightness))); }
    100% { background: #1a0000; }
}

.eq {
    position: absolute;
    bottom: -10em;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.35em;
    align-items: end;
    height: 42px;
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.eq.active {
    opacity: 1;
}

.eq span {
    display: block;
    width: 7px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffd6d6, #ff6b6b);
    box-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
    transition: height 0.08s linear, background 0.12s ease;
}

.effects-presets {
    position: absolute;
    bottom: -4em;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5em;
    z-index: 10000;
}

.preset-btn {
    padding: 0.45em 0.9em;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(0,0,0,0.55);
    color: white;
    font-family: "Lato-Bold";
    border-radius: 999px;
    cursor: pointer;
    transition: 0.2s ease;
}

.preset-btn.active {
    background: #ffffff;
    color: #000000;
}