/* SUNOLICIOUS pop-ups: Artist Bio + AI Ethics. Shared by every page. Markup is generated by build_popups.py */
.pp-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: 1.25rem;
    background: rgba(4, 2, 14, 0.9);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.pp-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; }
.pp-panel {
    position: relative; width: 100%; max-width: 540px; max-height: 88vh;
    display: flex; flex-direction: column;
    background: linear-gradient(161deg, #090329 10%, #3d1a94 35%, #9a3aa6 65%, #3d1a94 85%, #090329 100%);
    border: 1px solid rgba(197, 183, 160, 0.3);
    transform: translateY(16px); transition: transform 0.35s ease;
}
.pp-overlay.active .pp-panel { transform: translateY(0); }
.pp-close {
    position: absolute; top: 10px; right: 12px; z-index: 2;
    background: none; border: none; cursor: pointer;
    color: rgba(255, 255, 255, 0.6); font-size: 28px; line-height: 1;
    padding: 4px 10px; font-family: inherit; transition: all 0.3s ease;
}
.pp-close:hover { color: #C5B7A0; transform: rotate(90deg); }
.pp-scroll {
    overflow-y: auto; padding: 1.4rem 2.25rem 1.9rem; flex: 1 1 auto; min-height: 0;
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}
.pp-scroll::-webkit-scrollbar { width: 6px; }
.pp-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.28); border-radius: 3px; }
.pp-scroll::-webkit-scrollbar-track { background: transparent; }
.pp-head { text-align: center; padding: 2.1rem 2.25rem 1.1rem; margin: 0; flex: 0 0 auto; }
.pp-head::after { content: ''; display: block; height: 1px; margin: 1.1rem -0.0rem 0; background: rgba(255, 255, 255, 0.15); }
.pp-wordmark { font-size: 1.75rem; font-weight: 200; letter-spacing: 4px; line-height: 1.1; color: #fff; margin: 0; }
.pp-wordmark sup { font-size: 0.3em; letter-spacing: 0; }
.pp-tag { font-size: 0.62rem; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); margin: 0.45rem 0 1.15rem; }
.pp-title { font-size: 0.8rem; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; color: #fff; margin: 0; }
.pp-body p { font-size: 0.9rem; line-height: 1.7; color: #fff; margin: 0 0 1.05rem; }
.pp-body p.pp-lead { font-weight: 500; }
.pp-body p.pp-quote {
    font-style: italic; color: #fff; opacity: 0.95;
    border-left: 2px solid rgba(197, 183, 160, 0.7); padding-left: 1rem; margin-left: 0.15rem;
}
.pp-body p.pp-sign { text-align: center; margin: 1.5rem 0 0; font-weight: 400; letter-spacing: 0.5px; }
.pp-body p.pp-byline {
    text-align: center; margin: 1.4rem 0 0; padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.72rem; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.75);
}
@media (max-width: 600px) {
    .pp-overlay { padding: 0.75rem; }
    .pp-head { padding: 1.75rem 1.35rem 1rem; }
    .pp-scroll { padding: 1.2rem 1.35rem 1.5rem; }
    .pp-wordmark { font-size: 1.5rem; }
    .pp-body p { font-size: 0.88rem; }
}

/* Lyrics pop-up (Music page): same family as Bio / Ethics, lyrics centered. Open/close is driven by inline opacity from music.html */
.pp-overlay.pp-lyrics { visibility: visible; }
.pp-lyrics .pp-panel { max-width: 500px; }
.pp-lyrics .pp-title { font-size: 1.15rem; letter-spacing: 4px; font-weight: 300; }
.pp-lyrics .pp-copy {
    margin-top: 1rem; padding: 0.45rem 1.1rem; background: transparent; color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4); font-family: inherit; font-size: 0.65rem;
    letter-spacing: 1.5px; text-transform: uppercase; font-weight: 300; cursor: pointer; transition: all 0.3s ease;
}
.pp-lyrics .pp-copy:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; }
.pp-lyrics #copyConfirm { margin-left: 0.75rem; font-size: 0.65rem; color: #C5B7A0; }
.pp-lyrics-text { white-space: pre-wrap; text-align: center; font-size: 0.95rem; line-height: 1.85; color: rgba(255, 255, 255, 0.92); user-select: text; }
.pp-lyrics .pp-foot { margin: 2rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.15); text-align: center; font-size: 0.65rem; letter-spacing: 1.5px; color: rgba(255, 255, 255, 0.55); }