/* ocarina overlay */

@font-face {
    font-family: 'FOT-Chiaro Std';
    src: url('../fonts/MplusRounded1c-Regular-latin.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FOT-Chiaro Std';
    src:
        local('FOT-Chiaro Std B'),
        local('FOT-Chiaro Std'),
        local('FOT-ChiaroStd-B'),
        local('Chiaro Std B'),
        local('fot-chiaro-std'),
        url('../fonts/MplusRounded1c-ExtraBold-latin.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent !important;
    background-color: transparent !important;
}

#ocarina-root {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%) scale(var(--overlay-scale, 1));
    transform-origin: bottom center;
    width: min(90vw, 1540px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    pointer-events: none;
}

#ocarina-root.theme-oot {
    bottom: -20px;
}

.backdrop {
    position: absolute;
    left: calc(50% - 50vw);
    width: 100vw;
    top: -42%;
    bottom: -46%;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(
        ellipse 108% 52% at 50% 50%,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.7) 48%,
        rgba(0, 0, 0, 0.22) 74%,
        rgba(0, 0, 0, 0) 100%
    );
    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, #fff 17%, #fff 83%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.22) 18%, #fff 42%, #fff 58%, rgba(255, 255, 255, 0.22) 82%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, transparent 0%, #fff 17%, #fff 83%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.22) 18%, #fff 42%, #fff 58%, rgba(255, 255, 255, 0.22) 82%, transparent 100%);
    mask-composite: intersect;
    transition: opacity 0.28s ease;
}

#ocarina-root.has-backdrop.is-backdrop-on .backdrop {
    opacity: 1;
}

#ocarina-root.is-bg-solid .backdrop {
    left: -15%;
    width: 130%;
    top: calc(-40px / var(--overlay-scale, 1));
    bottom: calc(30px / var(--overlay-scale, 1));
    background: rgba(0, 0, 0, 0.5);
    -webkit-mask-image: none;
    mask-image: none;
    -webkit-mask-composite: unset;
    mask-composite: unset;
}

.song-label,
.staff {
    position: relative;
    z-index: 1;
}

.staff {
    position: relative;
    width: 100%;
    aspect-ratio: 2170 / 725;
    opacity: 0;
    transition: opacity 0.28s ease;
    overflow: visible;
}

.staff.is-visible {
    opacity: 1;
}

.staff-sheet {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url('../images/backgrounds/n64_music_sheet.png') center / 100% 100% no-repeat;
    pointer-events: none;
}

.notes,
.layout-debug {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.link-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.28s ease;
}

.staff.is-visible .link-layer.is-on {
    opacity: 1;
}

.link-layer video {
    position: absolute;
    width: 4px;
    height: 4px;
    opacity: 0;
    pointer-events: none;
}

.link-layer canvas {
    position: absolute;
    left: 50%;
    top: 48%;
    width: 142%;
    height: 142%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.note {
    position: absolute;
    display: block;
    transform: translate(-50%, -50%);
    pointer-events: none;
    overflow: visible;
}

.note img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.65));
    position: relative;
    z-index: 1;
}

.note.is-new {
    animation: note-pop 0.16s ease-out;
}

.note.is-flash img {
    animation: note-flash var(--note-flash-ms, 300ms) ease-in-out var(--note-flash-n, infinite) forwards;
}

.note-wash {
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.note.is-flash .note-wash {
    animation: note-flash-wash var(--note-flash-ms, 300ms) ease-in-out var(--note-flash-n, infinite) forwards;
}

.note.is-fade-out {
    animation: note-fade-out var(--note-fade-out-ms, 400ms) ease-in forwards;
}

@keyframes note-pop {
    from { transform: translate(-50%, -50%) scale(0.35); opacity: 0; }
    to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes note-flash {
    0%, 100% {
        filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.65)) brightness(1) contrast(1) saturate(1);
    }
    50% {
        filter: drop-shadow(0 0 16px #fff) brightness(4.2) contrast(1.3) saturate(0.25);
    }
}

@keyframes note-flash-wash {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.88; }
}

@keyframes note-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

.debug-slot {
    position: absolute;
    transform: translate(-50%, -50%);
    border: 1px dashed rgba(243, 233, 208, 0.55);
    border-radius: 4px;
    box-sizing: border-box;
}

.debug-slot span {
    position: absolute;
    left: 50%;
    top: calc(100% + 2px);
    transform: translateX(-50%);
    font: 10px/1 'Courier New', monospace;
    color: #f3e9d0;
    text-shadow: 0 1px 2px #000;
    white-space: nowrap;
}

.song-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% - 15px - (40px / var(--overlay-scale, 1)));
    margin: 0;
    z-index: 4;
    text-align: center;
    font-family: 'FOT-Chiaro Std', 'M PLUS Rounded 1c', sans-serif;
    font-weight: 400;
    font-synthesis: none;
    font-size: clamp(32px, 4.4vw, 68px);
    letter-spacing: 0.04em;
    color: #ffffff;
    -webkit-text-stroke: 2px #1a1408;
    paint-order: stroke fill;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.song-label.is-visible {
    opacity: 1;
}

.song-label-name,
.song-label-player {
    -webkit-text-stroke: inherit;
    paint-order: inherit;
    text-shadow: inherit;
}

.song-label.is-roboto {
    font-family: Roboto, 'Noto Sans', Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 0.02em;
    -webkit-text-stroke: 0;
    paint-order: normal;
    text-shadow: none;
}

.song-label.is-roboto .song-label-name,
.song-label.is-roboto .song-label-player {
    -webkit-text-stroke: 0;
    text-shadow: none;
}

/* remake notes / title */
.theme-switch2 .note img {
    filter: none;
    box-shadow: none;
}

.theme-switch2 .note.is-new {
    animation: none;
}

.theme-switch2 .note.is-fade-out {
    animation: note-fade-out var(--note-fade-out-ms, 400ms) ease-in forwards;
}

.theme-switch2 .note.is-new img {
    animation: note-fade-in var(--note-fade-ms, 50ms) linear both;
}

.theme-switch2 .note-halo {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    box-sizing: border-box;
    opacity: 1;
    box-shadow: 0 0 0 var(--halo-w0, 2px) rgba(255, 255, 255, 1);
    animation:
        note-halo-grow var(--halo-ms, 200ms) ease-out forwards,
        note-halo-fade var(--halo-ms, 200ms) linear forwards;
}

.theme-switch2 .song-label {
    bottom: auto;
    top: calc(var(--label-top, 12%) + 10px);
    margin: 0;
    font-size: clamp(22px, 2.75vw, 42px);
    letter-spacing: 0.02em;
    color: #372c23;
    -webkit-text-stroke: 0;
    -webkit-text-stroke-width: 0;
    -webkit-text-stroke-color: transparent;
    paint-order: normal;
    text-shadow: none;
    filter: none;
    transition: opacity var(--label-fade-ms, 350ms) ease;
}

.theme-switch2 .song-label-name {
    color: inherit;
    text-shadow: none;
    -webkit-text-stroke: 0;
    -webkit-text-stroke-width: 0;
    -webkit-text-stroke-color: transparent;
    paint-order: normal;
    filter: none;
}

.theme-switch2 .song-label-player {
    text-shadow: none;
    -webkit-text-stroke: 0;
    -webkit-text-stroke-width: 0;
    -webkit-text-stroke-color: transparent;
    paint-order: normal;
    filter: none;
}

@keyframes note-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes note-halo-grow {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 var(--halo-w0, 2px) rgba(255, 255, 255, 1);
        filter: blur(0px);
    }
    100% {
        transform: scale(var(--halo-scale, 1.55));
        box-shadow: 0 0 var(--halo-blur1, 8px) var(--halo-w1, 12px) rgba(255, 255, 255, 0.95);
        filter: blur(var(--halo-blur1, 8px));
    }
}

@keyframes note-halo-fade {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.theme-oot.is-pixelate .note img {
    filter: none;
    image-rendering: pixelated;
}

.theme-oot.is-pixelate .song-label.is-pixel-text {
    -webkit-text-stroke: 0;
    text-shadow: none;
    line-height: 0;
}

.theme-oot.is-pixelate .song-label.is-pixel-text img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}