/* javascript/css/fretboard.css`
Contém: Marcadores, Animações, Detalhes do braço e High Specificity Overrides.*/

/* Detalhes do Braço */
.inlay {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #252525;
    border-radius: 50%;
    z-index: 0;
}

.side-dot-container {
    position: absolute;
    top: -14px;
    left: 0;
    width: 100%;
    height: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    pointer-events: none;
}

.side-dot {
    width: 6px;
    height: 6px;
    background: #999;
    border-radius: 50%;
    box-shadow: 0 1px 2px #000;
}

.fret-number {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 0.75rem;
    font-weight: 700;
    border-top: 1px solid #333;
    background: #0e0e0e;
    opacity: 0;
    transition: opacity 0.3s;
}
.fret-number.visible { opacity: 1; }

/* Note Markers Base */
.note-marker {
    width: var(--note-size);
    height: var(--note-size);
    font-size: var(--note-font);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    z-index: 10;
    opacity: 0;
    transform: scale(0.5);
    transition: transform 0.1s ease-out, opacity 0.1s;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    background: #161616;
}

/* Estados de Marcadores */
.note-marker.in-scale {
    opacity: var(--scale-opacity);
    transform: translate(-50%, -50%) scale(0.85);
    background: transparent;
    border: 2px solid var(--color-scale-border);
    color: var(--color-scale-text);
}

.note-marker.in-chord {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    background: var(--color-chord-fill);
    border: 2px solid var(--color-chord-fill);
    color: #111;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.3);
    z-index: 12;
}

.note-marker.in-extension {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    background: var(--color-ext-fill);
    border: 2px solid var(--color-ext-fill);
    color: #111;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.4);
    z-index: 13;
}

.note-marker.in-root {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
    background: var(--color-root-fill);
    border: 2px solid #fff;
    color: #fff;
    z-index: 15;
    box-shadow: 0 0 15px rgba(255, 56, 56, 0.5);
}

/* Animações */
.note-marker.pulse { animation: bassPulse 0.4s ease-out; }

@keyframes bassPulse {
    0% { transform: translate(-50%, -50%) scale(1.15); box-shadow: 0 0 15px rgba(255, 56, 56, 0.5); }
    50% { transform: translate(-50%, -50%) scale(1.5); box-shadow: 0 0 30px rgba(255, 56, 56, 0.9); }
    100% { transform: translate(-50%, -50%) scale(1.15); box-shadow: 0 0 15px rgba(255, 56, 56, 0.5); }
}

/* --- NEXT NOTE MARKER (FIXED GLOW) --- */
.next-note-marker {
    position: absolute;
    top: 50%;
    left: 50%; /* Corrige o deslocamento (estava right: 50%) */
    transform: translate(-50%, -50%) scale(0.8);
    width: var(--note-size);
    height: var(--note-size);
    border-radius: 50%;
    
    /* Remove a borda tracejada antiga e prepara o Glow */
    background: transparent;
    border: none !important; 
    outline: none !important;
    
    z-index: 2; /* Atrás da nota principal */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    
    /* Configuração base do glow (invisível até ativar) */
    box-shadow: 0 0 0 var(--color-next-fill);
}

.next-note-marker.active {
    /* Animação de Glow Gradual */
    animation: gradualGlow var(--anim-duration, 2s) ease-in forwards;
    opacity: 1;
}

/* Mantemos a animação de pulso se quiser, ou apenas o Glow sólido abaixo */
@keyframes gradualGlow {
    0% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(0.9);
        box-shadow:  0 0 5px var(--color-next-fill);
    }

    /* Adicionei um passo intermediário para garantir que ele apareça rápido */
    20% {
        opacity: 0.75;
        box-shadow: 0 0 20px var(--color-next-fill);
    }
    
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.0); /* Levemente maior para o glow vazar */
        box-shadow: 0 0 35px 10px var(--color-next-fill), 0 0 10px var(--color-next-fill);
    }
}

/* --- High Specificity Interval Styles (Overrides) --- */
/* Mantendo os estilos específicos do final do arquivo original */

.note-marker.in-third,
.note-marker.in-third.in-scale {
    background: var(--color-third-fill) !important;
    border: 2px solid var(--color-third-fill) !important;
    color: #111 !important;
    box-shadow: 0 0 10px rgba(255, 159, 67, 0.6);
    z-index: 15;
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

.note-marker.in-fifth,
.note-marker.in-fifth.in-scale {
    background: var(--color-fifth-fill); /* Usando variável azul correta, no original estava third-fill */
    border: 2px solid var(--color-fifth-fill) !important;
    color: #111 !important;
    box-shadow: 0 0 10px rgba(84, 160, 255, 0.4);
    z-index: 15;
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

.note-marker.in-extension,
.note-marker.in-extension.in-scale {
    background: var(--color-ext-fill) !important;
    border: 2px solid var(--color-ext-fill) !important;
    color: #111 !important;
    z-index: 16;
    opacity: 1 !important;
}