/* ============================================================
   NEON MEDIA  — site-wide cyberpunk <audio> / <video> players.
   neon-media.js auto-upgrades any audio[controls] / video[controls]
   into these custom transports. Mirrors the memories voice-note
   player so every player on the site shares one neon-noir look.
   Opt out per element with class "no-neon" or [data-neon-skip].
   ============================================================ */

.nm { font-family: var(--f-mono, monospace); }

/* ---- shared transport bits -------------------------------- */
.nm-toggle {
    flex: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    color: var(--c-primary);
    background: rgba(var(--c-primary-rgb), 0.1);
    border: 1px solid var(--c-primary);
    box-shadow: 0 0 10px rgba(var(--c-primary-rgb), 0.3);
    transition: all .14s ease;
}
.nm-toggle:hover { background: var(--c-primary); color: var(--c-bg); box-shadow: 0 0 18px rgba(var(--c-primary-rgb), 0.65); }
.nm-toggle.playing { color: var(--c-secondary); border-color: var(--c-secondary); box-shadow: 0 0 10px rgba(var(--c-secondary-rgb), 0.4); }
.nm-toggle.playing:hover { background: var(--c-secondary); color: var(--c-bg); }

.nm-t {
    font-family: var(--f-mono, monospace);
    font-size: 10px;
    color: var(--c-accent);
    min-width: 34px;
    text-align: center;
    opacity: 0.85;
}

.nm-bar {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 7px;
    background: rgba(var(--c-text-rgb), 0.12);
    border: 1px solid rgba(var(--c-primary-rgb), 0.3);
    cursor: pointer;
}
.nm-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0;
    background: linear-gradient(90deg, var(--c-secondary), var(--c-primary));
    box-shadow: 0 0 8px rgba(var(--c-primary-rgb), 0.6);
}
.nm-head {
    position: absolute;
    top: 50%;
    left: 0;
    width: 11px;
    height: 11px;
    transform: translate(-50%, -50%);
    background: var(--c-primary);
    box-shadow: 0 0 8px var(--c-primary);
}
.nm-bar:hover .nm-head { background: var(--c-accent); box-shadow: 0 0 10px var(--c-accent); }

/* little equalizer that dances while playing */
.nm-eq { display: flex; align-items: flex-end; gap: 3px; height: 28px; width: 42px; flex: none; }
.nm-eq span { width: 5px; height: 6px; background: var(--c-secondary); box-shadow: 0 0 6px rgba(var(--c-secondary-rgb), 0.8); }
.nm-eq.playing span { animation: nmEq 0.9s ease-in-out infinite; }
.nm-eq.playing span:nth-child(2) { animation-delay: 0.18s; }
.nm-eq.playing span:nth-child(3) { animation-delay: 0.36s; }
.nm-eq.playing span:nth-child(4) { animation-delay: 0.12s; }
.nm-eq.playing span:nth-child(5) { animation-delay: 0.30s; }
@keyframes nmEq { 0%, 100% { height: 5px; } 50% { height: 26px; } }

/* ---- AUDIO ------------------------------------------------- */
.nm-audio {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.7rem 0.75rem;
    background: rgba(3, 3, 10, 0.6);
    border: 1px solid rgba(var(--c-primary-rgb), 0.3);
    border-left: 2px solid rgba(var(--c-secondary-rgb), 0.6);
}
.nm-audio audio { display: none; }
.nm-a-row { display: flex; align-items: center; gap: 0.7rem; }
.nm-prog { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; }

/* ---- VIDEO ------------------------------------------------- */
.nm-video {
    position: relative;
    display: inline-block;
    max-width: 100%;
    line-height: 0;
    background: #000;
    border: 1px solid rgba(var(--c-primary-rgb), 0.4);
    box-shadow: 0 0 22px rgba(var(--c-primary-rgb), 0.15);
}
.nm-video video {
    display: block;
    max-width: 100%;
    height: auto;
    max-height: 78vh;
}

/* when the wrapper is the fullscreen element, fill the screen and let the
   video scale to fit (otherwise it stays its normal size in a black void) */
.nm-video:fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nm-video:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nm-video:fullscreen video {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
}
.nm-video:-webkit-full-screen video {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
}

/* center "big play" — visible while paused, fades away on play */
.nm-bigplay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--c-primary);
    background: rgba(3, 3, 10, 0.55);
    border: 1px solid var(--c-primary);
    box-shadow: 0 0 22px rgba(var(--c-primary-rgb), 0.5);
    transition: opacity .2s ease, background .14s ease, color .14s ease;
}
.nm-bigplay:hover { background: var(--c-primary); color: var(--c-bg); }
.nm-video.playing .nm-bigplay { opacity: 0; pointer-events: none; }

/* bottom control bar — fades in on hover / always shown while paused */
.nm-vcontrols {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.6rem;
    line-height: 1;
    background: linear-gradient(to top, rgba(2, 2, 8, 0.92), rgba(2, 2, 8, 0));
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .2s ease, transform .2s ease;
}
.nm-video:hover .nm-vcontrols,
.nm-video.paused .nm-vcontrols { opacity: 1; transform: none; }
.nm-vcontrols .nm-toggle { width: 32px; height: 32px; }

.nm-icon-btn {
    flex: none;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    color: var(--c-primary);
    background: transparent;
    border: 1px solid rgba(var(--c-primary-rgb), 0.4);
    transition: all .14s ease;
}
.nm-icon-btn:hover { background: var(--c-primary); color: var(--c-bg); }

/* mini volume fader (video) */
.nm-vol {
    position: relative;
    flex: none;
    width: 62px;
    height: 7px;
    cursor: pointer;
    background: rgba(var(--c-text-rgb), 0.12);
    border: 1px solid rgba(var(--c-primary-rgb), 0.3);
}
.nm-vol-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 100%;
    background: linear-gradient(90deg, var(--c-secondary), var(--c-primary));
    box-shadow: 0 0 6px rgba(var(--c-primary-rgb), 0.5);
}

@media (max-width: 600px) {
    .nm-vol { display: none; }
    .nm-bigplay { width: 54px; height: 54px; font-size: 18px; }
}