/* Efeito de brilho dourado ao passar o mouse */
.gold-glow:hover {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
}

/* Notas musicais flutuantes no fundo */
.music-note {
    pointer-events: none;
    position: absolute;
    animation: floatUp 4s linear infinite;
}

@keyframes floatUp {
    0% {
        transform: translateY(100vh) translateX(0) scale(0.5);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-10vh) translateX(50px) scale(1.2);
        opacity: 0;
    }
}

/* Modal de Cursos
   - visibility: hidden tira o modal fechado da ordem de Tab (antes os botões
     invisíveis ainda recebiam foco, mesmo com aria-hidden="true")
   - o atraso de 0.3s na visibility deixa o fade-out terminar antes de esconder */
#course-modal {
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility 0s linear .3s;
}

#course-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .3s ease, visibility 0s linear 0s;
}

#course-modal.is-open #modal-content {
    transform: scale(1);
}

#course-modal.is-open .modal-backdrop-glow {
    opacity: 1;
}

.modal-backdrop-glow {
    opacity: 0;
    transition: opacity .3s ease;
}

/* Acessibilidade para usuários com redução de movimento ativa */
@media (prefers-reduced-motion: reduce) {
    #course-modal, #modal-content, .modal-backdrop-glow {
        transition: none !important;
    }

    .music-note {
        display: none;
    }

    html.scroll-smooth {
        scroll-behavior: auto !important;
    }
}

/* Círculo das Quintas */
.circle-mode-btn {
    border: 1px solid rgba(255,255,255,.14);
    background: #121212;
    color: #d1d5db;
    border-radius: 999px;
    padding: .65rem 1rem;
    font-size: .8rem;
    font-weight: 700;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.circle-mode-btn:hover, .circle-mode-btn.is-active {
    background: rgba(212,175,55,.14);
    color: #D4AF37;
    border-color: #D4AF37;
}
.circle-of-fifths {
    position: relative;
    width: min(100%, 520px);
    aspect-ratio: 1;
    margin-inline: auto;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212,175,55,.06) 0 27%, transparent 27.5% 42%, rgba(212,175,55,.055) 42.5% 68%, transparent 68.5%), #0A0A0A;
    border: 1px solid rgba(212,175,55,.22);
}
.circle-of-fifths::before, .circle-of-fifths::after {
    content: "";
    position: absolute;
    inset: 16%;
    border: 1px solid rgba(212,175,55,.17);
    border-radius: 50%;
    pointer-events: none;
}
.circle-of-fifths::after { inset: 34%; border-color: rgba(255,255,255,.09); }
.circle-key-btn {
    position: absolute;
    z-index: 1;
    transform: translate(-50%, -50%);
    width: clamp(36px, 8.5%, 48px);
    aspect-ratio: 1;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
    background: #1A1A1A;
    color: #f3f4f6;
    font-weight: 800;
    font-size: clamp(.68rem, 2vw, .88rem);
    cursor: pointer;
    transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.circle-key-btn:hover { transform: translate(-50%, -50%) scale(1.12); border-color: #D4AF37; color: #D4AF37; }
.circle-key-btn.is-selected { background: #D4AF37; color: #0A0A0A; border-color: #F3E5AB; box-shadow: 0 0 0 4px rgba(212,175,55,.12), 0 0 24px rgba(212,175,55,.2); }
.circle-key-btn.is-minor { background: #201d14; color: #F3E5AB; }
.circle-key-btn.is-minor.is-selected { background: #D4AF37; color: #0A0A0A; }
.circle-center-label { position: absolute; inset: 39%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; pointer-events: none; }
.circle-center-label strong { font-family: Montserrat, sans-serif; font-size: clamp(1rem, 3vw, 1.6rem); color: #D4AF37; }
.circle-center-label span { color: #9ca3af; font-size: clamp(.55rem, 1.5vw, .7rem); text-transform: uppercase; letter-spacing: .12em; margin-top: .25rem; }
.circle-note-list, .circle-chord-list { display: flex; flex-wrap: wrap; gap: .45rem; }
.circle-note { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .65rem; border-radius: .6rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); font-weight: 700; font-size: .8rem; color: #f3f4f6; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease; }
.circle-note i, .circle-chord i { font-size: .65rem; opacity: .75; }
.circle-note:hover, .circle-note:focus-visible { background: rgba(212,175,55,.14); border-color: #D4AF37; color: #D4AF37; outline: none; }
.circle-chord { min-width: 54px; text-align: center; padding: .55rem .45rem; border-radius: .65rem; background: rgba(212,175,55,.08); border: 1px solid rgba(212,175,55,.18); cursor: pointer; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.circle-chord:hover, .circle-chord:focus-visible { background: rgba(212,175,55,.18); border-color: #D4AF37; transform: translateY(-2px); outline: none; }
.circle-chord strong { display: block; color: #D4AF37; font-size: .9rem; }
.circle-chord span { display: block; color: #9ca3af; font-size: .65rem; margin-top: .15rem; }
@media (max-width: 420px) {
    .circle-of-fifths { width: 100%; }
    .circle-key-btn { width: 34px; }
    .circle-center-label { inset: 40%; }
}
@media (prefers-reduced-motion: reduce) {
    .circle-key-btn, .circle-mode-btn { transition: none; }
}