/* Foxy in beeld, Music: laadt enkel op de Music-pagina (naast galerij.css). */
/* ---------- Music: jukeboxen i.p.v. schilderijen (okt 2026) ----------
   Zelfde HTML en JavaScript als de galerij; de lijst is een jukebox (img/galerij/jukebox.svg, venster
   x45 y138 270x480 op 360x790), het bordje is een titelkaartje zoals in een echte jukebox. */
.galerij--jukebox {
    background-color: #140d22;
    background-image:
        linear-gradient(var(--bg), rgba(13, 13, 26, 0) 70px),
        radial-gradient(ellipse 40% 45% at 12% 45%, rgba(255, 61, 154, 0.12), transparent 70%),
        radial-gradient(ellipse 40% 45% at 88% 45%, rgba(45, 226, 255, 0.09), transparent 70%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 44px),
        linear-gradient(#1b1030, #140d22);
    padding-bottom: 70px;
}
.galerij--jukebox::after { /* dambordvloer van een oud café */
    left: -25%; right: -25%;
    height: 150px;
    border-top: 4px solid #3a2a55;
    background: repeating-conic-gradient(#221a38 0 25%, #120c1e 0 50%) 0 0 / 64px 64px;
    box-shadow: inset 0 40px 50px rgba(20, 13, 34, 0.9);
    transform: perspective(320px) rotateX(38deg);
    transform-origin: 50% 100%;
}
.galerij--jukebox .section-tag { background: rgba(255, 61, 154, 0.14); color: #ff8cc4; border-color: rgba(255, 61, 154, 0.35); }
.galerij--jukebox .schilderij { padding-top: 0; }
.galerij--jukebox .schilderij:nth-child(2) { margin-top: 0; }
.schilderij--jukebox .schilderij__lijst {
    border: 0;
    border-image: none;
    background: none;
    box-shadow: none;
    aspect-ratio: 360 / 790;
    filter: drop-shadow(0 26px 26px rgba(0, 0, 0, 0.55));
}
.schilderij--jukebox .schilderij__lijst::after { /* de jukebox zelf */
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url('/img/galerij/jukebox.svg') center / 100% 100% no-repeat;
    pointer-events: none;
}
.schilderij--jukebox .schilderij__lijst::before { /* neongloed achter de kast */
    content: '';
    position: absolute;
    inset: -8% -16% 0;
    z-index: -1;
    background: radial-gradient(ellipse 50% 45% at 50% 35%, rgba(255, 61, 154, 0.28), rgba(45, 226, 255, 0.12) 50%, transparent 72%);
    opacity: 0.7;
    transition: opacity 0.4s;
    pointer-events: none;
}
.schilderij--jukebox:hover .schilderij__lijst::before,
.schilderij--jukebox.is-film .schilderij__lijst::before { opacity: 1; }
.schilderij--jukebox:hover .schilderij__lijst { translate: 0 -3px; box-shadow: none; }
.schilderij--jukebox .schilderij__doek {
    position: absolute;
    z-index: 1;
    left: 12.5%;
    top: 17.468%;
    width: 75%;
    height: 60.759%;
    aspect-ratio: auto;
    border-radius: 6px;
}
.schilderij--jukebox .schilderij__doek::before { display: none; } /* geen doekstructuur: dit is glas */
.schilderij--jukebox .schilderij__doek::after {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 8px 14px -6px rgba(0, 0, 0, 0.6);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 30%);
}
/* de knop: rood jukeboxknopje onderaan de kast; de hele jukebox is klikbaar */
.schilderij--jukebox .schilderij__speel { z-index: 5; border-radius: 48% 48% 4% 4% / 22% 22% 4% 4%; padding-bottom: 7%; }
.schilderij--jukebox .schilderij__knop {
    width: 58px;
    height: 58px;
    background: radial-gradient(circle at 35% 30%, #ffb3c4, #e3123c 45%, #7d0a22);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6), inset 0 0 0 3px rgba(255, 255, 255, 0.3), 0 0 0 5px #c9ced8, 0 0 0 7px #6e7380;
}
.schilderij--jukebox .schilderij__knop svg { fill: #fff; }
.schilderij--jukebox .schilderij__label { background: rgba(26, 7, 16, 0.92); border: 1px solid rgba(255, 179, 196, 0.35); }

/* titelkaartje zoals in een jukebox: wit met rode banden */
.bordje--strip {
    text-align: center;
    border-radius: 2px;
    background:
        linear-gradient(#d0142f, #d0142f) top / 100% 8px no-repeat,
        linear-gradient(#d0142f, #d0142f) bottom / 100% 8px no-repeat,
        #fbf7ee;
    padding: 18px 16px 19px;
}
.bordje__nr {
    display: inline-block;
    margin-bottom: 5px;
    padding: 1px 8px;
    border-radius: 3px;
    background: #1d1712;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;
}
.bordje--strip .bordje__titel {
    font-family: inherit;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 1.02rem;
}
.bordje--strip .bordje__tekst { text-align: left; }

@media (max-width: 760px) {
    .galerij--jukebox::after { height: 120px; }
    .galerij--jukebox .schilderij { padding-top: 0; }
    .schilderij--jukebox .schilderij__lijst { border-width: 0; }
    .schilderij--jukebox .schilderij__knop { width: 46px; height: 46px; }
    .bordje--strip { margin-top: 0; }
}
@media (max-width: 370px) {
    .bordje--strip { margin-top: 16px; }
}