/* ==========================================================================
   CHAZZO MUSIC BOX (CMB) - MASTER EFFECTS ENGINE
   Bestandsnaam: cmb-effects.css
   Bevat: Alle 82 Cover Effecten + 11 Geanimeerde Frame Effecten
   ========================================================================== */

/* HOLLOW FRAME BORDER LIGHTING (Alleen op de buitenrand, nooit over de slide-achtergrond!) */
        .frame-chaser-layer,
        .frame-rain-curtain,
        .frame-pulse-glow,
        .frame-music-disco,
        .frame-random-spec,
        .frame-snow-dots,
        .frame-golden-sparks,
        .frame-neon-waterfall,
        .frame-laser-radar,
        .frame-breathing-aurora,
        .frame-cyber-matrix {
            position: absolute;
            inset: 0;
            /* Het effect wordt als holle rand gemaskeerd; de middenruimte blijft transparant. */
            border-radius: inherit;
            padding: 3px;
            pointer-events: none !important;
            z-index: 15;
            box-sizing: border-box;
            overflow: hidden;
            -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
            -webkit-mask-origin: border-box, content-box;
            -webkit-mask-clip: border-box, content-box;
            -webkit-mask-composite: xor;
            mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
            mask-origin: border-box, content-box;
            mask-clip: border-box, content-box;
            mask-composite: exclude;
            transform: translateZ(0);
            will-change: transform;
        }

        /* Gedeelde hoekcorrectie: afgeronde, gesloten hoeken zonder polygon/clip-path. */
        .frame-chaser-layer,
        .frame-rain-curtain,
        .frame-pulse-glow,
        .frame-music-disco,
        .frame-random-spec,
        .frame-snow-dots,
        .frame-golden-sparks,
        .frame-neon-waterfall,
        .frame-laser-radar,
        .frame-breathing-aurora,
        .frame-cyber-matrix {
            clip-path: none !important;
            border-radius: inherit !important;
        }

        .chaser-spin-layer::before {
            content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
            pointer-events: none !important;
        }

        .frame-rain-curtain {
            background: repeating-linear-gradient(180deg, var(--cyan) 0px, transparent 15px, var(--magenta) 30px, transparent 45px);
            background-size: 100% 90px;
            animation: rainCurtainFall 1.8s linear infinite;
            filter: drop-shadow(0 0 6px var(--cyan));
        }

        .frame-pulse-glow {
            background: linear-gradient(135deg, var(--cyan), var(--magenta));
            animation: pulseGlowBreathe 2.4s ease-in-out infinite;
        }

        .frame-music-disco {
            background: linear-gradient(135deg, var(--gold), var(--cyan), var(--magenta));
            animation: discoSpectrumCycle 3s linear infinite, pulseGlowBreathe 1.2s infinite;
        }

        .frame-random-spec {
            background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
            animation: discoSpectrumCycle 4s linear infinite;
        }

        @keyframes chaserSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

        




        .cmb-art-stage {
            width: min(186px, 48%); aspect-ratio: 1; position: relative;
            display: flex; align-items: center; justify-content: center;
            margin-top: 64px; margin-bottom: 0;
            z-index: 2;
        }
        .cmb-art-stage::before, .cmb-art-stage::after {
            content: ""; position: absolute; pointer-events: none !important; z-index: 0;
            border-radius: 50%;
        }

/* KEYFRAMES VOOR COVER EFFECTEN */
@keyframes fxRotCW { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes fxRotCCW { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } }
@keyframes fxPulseSoft { 0% { transform: scale(0.95); opacity: 0.6; } 100% { transform: scale(1.12); opacity: 0.95; } }
@keyframes fxMorph71 {
    0% { border-radius: 42% 58% 62% 38% / 55% 35% 65% 45%; transform: rotate(0deg) scale(1); }
    50% { border-radius: 65% 35% 38% 62% / 35% 65% 35% 65%; transform: rotate(180deg) scale(1.12); }
    100% { border-radius: 42% 58% 62% 38% / 55% 35% 65% 45%; transform: rotate(360deg) scale(1); }
}
@keyframes fxFire72 {
    0% { transform: rotate(0deg) scale(1.02); filter: drop-shadow(0 0 12px #ff3d00); }
    50% { transform: rotate(-180deg) scale(1.18); filter: drop-shadow(0 0 22px #ffea00); }
    100% { transform: rotate(-360deg) scale(1.02); filter: drop-shadow(0 0 12px #ff3d00); }
}
@keyframes fxFireRingFlicker {
    0% { transform: rotate(0deg) scale(1.02); filter: drop-shadow(0 0 15px #ff3d00) drop-shadow(0 0 25px #ff9100); }
    50% { transform: rotate(180deg) scale(1.12); filter: drop-shadow(0 0 28px #ffea00) drop-shadow(0 0 35px #ff1744); }
    100% { transform: rotate(360deg) scale(1.02); filter: drop-shadow(0 0 15px #ff3d00) drop-shadow(0 0 25px #ff9100); }
}
@keyframes fxCdShinyShimmer {
    0% { transform: rotate(0deg); filter: brightness(1.1); }
    50% { transform: rotate(180deg); filter: brightness(1.7) contrast(1.3); }
    100% { transform: rotate(360deg); filter: brightness(1.1); }
}
@keyframes fxLightning { 0%, 90%, 96%, 100% { opacity: 0; filter: blur(2px); } 92%, 94% { opacity: 1; filter: drop-shadow(0 0 25px #ffffff) drop-shadow(0 0 35px var(--cyan)); } }
@keyframes fxFanCW { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes fxFanCCW { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } }
@keyframes fxRainDrop { 0% { background-position: 0 0; } 100% { background-position: 0 200px; } }
@keyframes fxHypnoPulse { 0% { transform: scale(0.8) rotate(0deg); opacity: 0.5; } 50% { transform: scale(1.15) rotate(180deg); opacity: 0.95; } 100% { transform: scale(0.8) rotate(360deg); opacity: 0.5; } }
@keyframes fxStreepjesMove { 0% { background-size: 100% 8px; } 50% { background-size: 100% 24px; } 100% { background-size: 100% 8px; } }



/* ==========================================================================
   VOLLEDIGE 82 EFFECTEN SUITE (1 T/M 82)
   ========================================================================== */

/* 1. Disc Classic */
.fx-disc::before, .fx-vinyl-classic::before {
    inset: -22px;
    background: repeating-conic-gradient(from 0deg, #ffffff 0deg 3deg, transparent 3deg 8deg, var(--cyan) 8deg 11deg, transparent 11deg 16deg);
    animation: fxRotCCW 5s linear infinite;
    border-radius: 50%; opacity: 0.9; filter: drop-shadow(0 0 6px var(--cyan));
}
.fx-disc::after, .fx-vinyl-classic::after {
    inset: -10px;
    background: repeating-radial-gradient(circle, rgba(255,255,255,0.2) 0, rgba(255,255,255,0.2) 1px, transparent 2px, transparent 4px);
    border-radius: 50%; opacity: 0.7;
}

/* 2. Neon Glow */
.fx-glow::before { inset: -24px; background: radial-gradient(circle, var(--cyan) 0%, rgba(99,246,255,0.2) 50%, transparent 75%); filter: blur(14px); opacity: 0.9; animation: fxPulseSoft 2.5s ease-in-out infinite alternate; }

/* 3. Aurora Borealis */
.fx-aurora::before { inset: -20px; background: conic-gradient(from 0deg, var(--cyan), var(--violet), var(--magenta), var(--gold), var(--cyan)); filter: blur(14px); opacity: 0.8; animation: fxRotCW 8s linear infinite; }
.fx-aurora::after { inset: -12px; background: radial-gradient(circle, rgba(99,246,255,0.4) 0%, transparent 70%); filter: blur(8px); animation: fxPulseSoft 3s ease-in-out infinite alternate; }

/* 4. Disco Strobe */
.fx-disco::before { inset: -22px; background: conic-gradient(from 45deg, #ff0055, #00e5ff, #ffee00, #ff0055); filter: blur(12px); opacity: 0.85; animation: fxRotCW 2.5s linear infinite; }

/* 5. Liquid Blob */
.fx-blob::before { inset: -20px; background: linear-gradient(45deg, #ff007f, #00f0ff); animation: fxMorph71 6s ease-in-out infinite alternate; filter: blur(10px); opacity: 0.85; }

/* 6. Audio Bars */
@keyframes fxBarsPulse { 0%, 100% { transform: scale(0.96) rotate(0deg); } 50% { transform: scale(1.08) rotate(180deg); } }
.fx-bars::before { inset: -22px; background: repeating-conic-gradient(from 0deg, var(--cyan) 0deg 8deg, transparent 8deg 16deg, var(--magenta) 16deg 24deg, transparent 24deg 32deg); animation: fxBarsPulse 3s linear infinite; filter: blur(6px); opacity: 0.9; }

/* 7. Comet Trail */
.fx-comet::before { inset: -24px; background: conic-gradient(from 0deg, #ff0055 0deg 90deg, transparent 180deg 360deg); animation: fxRotCW 2s linear infinite; filter: blur(8px); opacity: 0.95; }

/* 8. Ripple Wave */
@keyframes fxRippleWave { 0% { transform: scale(0.85); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
.fx-ripple::before { inset: -24px; border: 3px solid var(--cyan); border-radius: 50%; animation: fxRippleWave 2s cubic-bezier(0, 0.2, 0.8, 1) infinite; }
.fx-ripple::after { inset: -16px; border: 2px solid var(--gold); border-radius: 50%; animation: fxRippleWave 2s cubic-bezier(0, 0.2, 0.8, 1) infinite 1s; }

/* 9. Pulse Ring Gold */
.fx-pulse-ring::before { inset: -20px; background: radial-gradient(circle, #ffd166 20%, transparent 70%); animation: fxPulseSoft 2s ease-in-out infinite alternate; filter: blur(10px); opacity: 0.85; }

/* 10. Radar Scan */
.fx-radar::before { inset: -20px; background: conic-gradient(from 0deg, transparent 0deg 300deg, rgba(0, 230, 118, 0.95) 360deg); filter: blur(6px); animation: fxRotCW 3.5s linear infinite; }

/* 11. Neon Hex */
.fx-neon-hex::before { inset: -22px; background: conic-gradient(from 30deg, #00f0ff 0deg 60deg, #ff007f 120deg 180deg, #ffff00 240deg 300deg, #00f0ff 360deg); animation: fxRotCW 6s steps(6) infinite; filter: blur(9px); opacity: 0.85; }

/* 12. Vinyl Gold */
.fx-vinyl-gold::before {
    inset: -24px;
    background: repeating-radial-gradient(circle, #ffd166 0, #ffd166 1px, transparent 2px, transparent 4px),
                conic-gradient(from 45deg, #ffd166, #ff9100, #ffea00, #ffd166);
    animation: fxRotCW 6s linear infinite;
    border-radius: 50%; opacity: 0.9; filter: drop-shadow(0 0 10px #ff9100);
}
.fx-vinyl-gold::after {
    inset: -12px;
    background: radial-gradient(circle, rgba(255,209,102,0.4) 0%, transparent 75%);
    border-radius: 50%; animation: fxPulseSoft 2.5s infinite alternate;
}

/* 13. Rainbow Spin */
.fx-rainbow-spin::before { inset: -22px; background: conic-gradient(red, orange, yellow, green, cyan, blue, magenta, red); animation: fxRotCW 3s linear infinite; filter: blur(10px); opacity: 0.9; }

/* 14. Cyber Glitch */
@keyframes fxGlitch { 0%, 100% { transform: translate(0); } 20% { transform: translate(-3px, 3px); filter: hue-rotate(90deg); } 40% { transform: translate(3px, -3px); filter: hue-rotate(180deg); } 60% { transform: translate(-2px, -2px); filter: hue-rotate(270deg); } }
.fx-glitch::before { inset: -20px; background: conic-gradient(from 0deg, #00ffff, #ff00ff, #00ffff); animation: fxGlitch 0.4s infinite; filter: blur(6px); opacity: 0.85; }

/* 15. Breathe Slow */
.fx-breathe::before { inset: -24px; background: radial-gradient(circle, rgba(99,246,255,0.7) 0%, transparent 70%); animation: fxPulseSoft 4s ease-in-out infinite alternate; filter: blur(12px); }

/* 16. Sonar Ping */
.fx-sonar::before { inset: -24px; border: 2px solid #00e676; border-radius: 50%; animation: fxRippleWave 2.5s linear infinite; filter: drop-shadow(0 0 6px #00e676); }

/* 17. Gold Glow */
.fx-gold-glow::before { inset: -24px; background: radial-gradient(circle, #ffd166 0%, rgba(255,209,102,0.2) 60%, transparent 75%); animation: fxPulseSoft 2.2s infinite alternate; filter: blur(14px); }

/* 18. Multi Pulse */
@keyframes fxMultiPulse { 0% { transform: scale(0.9); opacity: 0.5; } 50% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.5; } }
.fx-multi-pulse::before { inset: -22px; background: conic-gradient(from 0deg, var(--cyan), var(--magenta), var(--cyan)); animation: fxMultiPulse 1.8s ease-in-out infinite, fxRotCW 5s linear infinite; filter: blur(10px); }

/* 19. White Strobe */
@keyframes fxStrobeW { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; filter: drop-shadow(0 0 20px #fff); } }
.fx-strobe::before { inset: -20px; background: radial-gradient(circle, #ffffff 30%, transparent 70%); animation: fxStrobeW 0.8s infinite; filter: blur(10px); }

/* 20. Spin Dashed */
.fx-spin-dashed::before { inset: -22px; background: repeating-conic-gradient(from 0deg, var(--cyan) 0deg 20deg, transparent 20deg 40deg); animation: fxRotCW 4s linear infinite; filter: blur(6px); opacity: 0.85; }

/* 21. Double Echo */
.fx-echo::before { inset: -26px; border: 2px solid var(--magenta); border-radius: 50%; animation: fxRippleWave 2.8s infinite; }
.fx-echo::after { inset: -18px; border: 2px solid var(--cyan); border-radius: 50%; animation: fxRippleWave 2.8s infinite 1.4s; }

/* 22. Fire Ring (Haarscherp) */
.fx-fire-ring::before {
    inset: -8px;
    background: conic-gradient(from 0deg, #ff1744, #ff9100, #ffea00, #ff3d00, #ff1744);
    animation: fxRotCW 3.5s linear infinite;
    border-radius: 50%; opacity: 0.95;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #fff calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #fff calc(100% - 2px));
    filter: drop-shadow(0 0 6px #ff3d00) drop-shadow(0 0 12px #ff9100);
}
.fx-fire-ring::after {
    inset: -14px;
    background: radial-gradient(circle, transparent 70%, rgba(255, 61, 0, 0.4) 85%, transparent 100%);
    animation: fxFireRingFlicker 2s ease-in-out infinite alternate;
    border-radius: 50%; pointer-events: none;
}

/* 23. Cyberpunk */
.fx-cyberpunk::before { inset: -22px; background: conic-gradient(from 180deg, #ff007f, #00f0ff, #7928ca, #ff007f); filter: blur(14px); opacity: 0.85; animation: fxRotCCW 5s linear infinite; }

/* 24. Vinyl Classic */
/* (reeds gekoppeld aan .fx-disc) */

/* 25. Neon Pulse */
.fx-neon-pulse::before { inset: -22px; background: radial-gradient(circle, #00ffff 0%, #ff007f 50%, transparent 75%); animation: fxPulseSoft 1.6s ease-in-out infinite alternate; filter: blur(12px); }

/* 26. Prism Rainbow */
.fx-prism::before { inset: -24px; background: conic-gradient(from 60deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff, #ff0000); animation: fxRotCW 5s linear infinite; filter: blur(8px); opacity: 0.9; }

/* 27. EQ Circle */
.fx-equalizer-circle::before { inset: -22px; background: repeating-conic-gradient(from 0deg, #00e676 0deg 10deg, transparent 10deg 20deg, #ffd166 20deg 30deg, transparent 30deg 40deg); animation: fxRotCW 8s linear infinite; filter: blur(5px); }

/* 28. Vortex Cosmic */
.fx-vortex::before { inset: -24px; background: conic-gradient(from 0deg, #7928ca, #ff0080, #0070f3, #7928ca); animation: fxRotCW 3.5s linear infinite; filter: blur(12px); opacity: 0.9; }

/* 29. Matrix Glow */
.fx-matrix-glow::before { inset: -22px; background: radial-gradient(circle, #00e676 20%, rgba(0,230,118,0.2) 60%, transparent 75%); animation: fxPulseSoft 2s infinite alternate; filter: blur(12px); }

/* 30. Supernova */
.fx-supernova::before { inset: -26px; background: radial-gradient(circle, #ffffff 10%, #ffd166 40%, #ff007f 70%, transparent 85%); animation: fxPulseSoft 1.5s infinite alternate; filter: blur(14px); }

/* 31. Retro Wave */
.fx-retro-wave::before { inset: -22px; background: linear-gradient(180deg, #ff007f, #00f0ff); animation: fxRotCW 6s linear infinite; filter: blur(10px); opacity: 0.85; }

/* 32. Halo Amber */
.fx-halo-amber::before { inset: -22px; background: radial-gradient(circle, #ff9100 20%, rgba(255,145,0,0.2) 60%, transparent 75%); animation: fxPulseSoft 2.4s infinite alternate; filter: blur(12px); }

/* 33. Eclipse Corona */
.fx-eclipse::before { inset: -20px; background: conic-gradient(from 0deg, transparent 0deg 280deg, #ffffff 320deg, #ffd166 360deg); animation: fxRotCW 3s linear infinite; filter: blur(8px); }

/* 34. Cyber Grid */
.fx-cyber-grid::before { inset: -22px; background: repeating-linear-gradient(45deg, var(--cyan) 0px, var(--cyan) 2px, transparent 3px, transparent 10px); animation: fxRotCW 12s linear infinite; filter: blur(4px); opacity: 0.8; }

/* 35. Neon Heartbeat */
@keyframes fxHeartbeat { 0%, 100% { transform: scale(0.96); } 15% { transform: scale(1.15); filter: drop-shadow(0 0 20px #ff0055); } 30% { transform: scale(1.02); } 45% { transform: scale(1.22); filter: drop-shadow(0 0 25px #ff0055); } }
.fx-neon-heartbeat::before { inset: -22px; background: radial-gradient(circle, #ff0055 30%, transparent 70%); animation: fxHeartbeat 1.8s infinite; filter: blur(12px); }

/* 36. Starlight */
.fx-starlight::before { inset: -24px; background: conic-gradient(from 0deg, #fff 0deg, transparent 45deg, #63f6ff 90deg, transparent 135deg, #fff 180deg, transparent 225deg, #ffd166 270deg, transparent 315deg, #fff 360deg); animation: fxRotCW 7s linear infinite; filter: blur(8px); opacity: 0.9; }

/* 37. Liquid Gold */
.fx-liquid-gold::before { inset: -22px; background: conic-gradient(from 0deg, #ffd166, #ff9100, #ffea00, #ffd166); animation: fxMorph71 5s ease-in-out infinite alternate; filter: blur(10px); }

/* 38. Hologram Scanner */
@keyframes fxScanSweep { 0% { transform: translateY(-30px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(30px); opacity: 0; } }
.fx-hologram::before { inset: -20px; background: linear-gradient(180deg, transparent, var(--cyan), transparent); animation: fxScanSweep 2s ease-in-out infinite; filter: blur(6px); }

/* 39. Plasma Orb */
.fx-plasma-orb::before { inset: -24px; background: conic-gradient(from 120deg, #9900ff, #00f0ff, #ff007f, #9900ff); animation: fxRotCCW 3s linear infinite; filter: blur(12px); opacity: 0.9; }

/* 40. Warp Speed */
.fx-warp-speed::before { inset: -24px; background: radial-gradient(circle, #fff 10%, var(--cyan) 40%, transparent 70%); animation: fxMultiPulse 1.2s infinite; filter: blur(10px); }

/* 41. Golden Rays */
.fx-golden-rays::before { inset: -22px; background: repeating-conic-gradient(from 0deg, #ffd166 0deg 15deg, transparent 15deg 30deg); animation: fxRotCW 9s linear infinite; filter: blur(6px); opacity: 0.85; }

/* 42. Diamond Cut */
.fx-diamond-cut::before { inset: -22px; background: conic-gradient(from 45deg, #b9f2ff, #ffffff, #63f6ff, #ffffff, #b9f2ff); animation: fxRotCW 4s linear infinite; filter: blur(8px); opacity: 0.95; }

/* 43. Bass Thump Wave */
@keyframes fxBassThump { 0%, 100% { transform: scale(0.92); opacity: 0.6; } 30% { transform: scale(1.22); opacity: 1; filter: drop-shadow(0 0 25px var(--magenta)); } }
.fx-bass-thump::before { inset: -24px; background: radial-gradient(circle, var(--magenta) 0%, transparent 70%); animation: fxBassThump 1.4s ease-out infinite; filter: blur(12px); }

/* 44. Northern Glow */
.fx-northern-glow::before { inset: -22px; background: conic-gradient(from 0deg, #00e676, #00e5ff, #1de9b6, #00e676); animation: fxRotCW 7s linear infinite; filter: blur(12px); opacity: 0.85; }

/* 45. Glass Shimmer */
.fx-glass-shimmer::before { inset: -20px; background: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, transparent 50%, rgba(255,255,255,0.6) 100%); animation: fxRotCW 5s linear infinite; filter: blur(6px); }

/* 46. Vinyl Grooves */
.fx-vinyl-grooves::before {
    inset: -24px;
    background: repeating-radial-gradient(circle, rgba(255,255,255,0.25) 0, rgba(255,255,255,0.25) 1px, transparent 2px, transparent 5px),
                conic-gradient(from 45deg, rgba(255,255,255,0.15), transparent 25%, rgba(255,255,255,0.15) 50%, transparent 75%, rgba(255,255,255,0.15));
    animation: fxRotCW 7s linear infinite;
    border-radius: 50%; opacity: 0.85; filter: drop-shadow(0 0 10px rgba(0,0,0,0.8));
}

/* 47. Laser Sweep */
.fx-laser-sweep::before { inset: -24px; background: conic-gradient(from 0deg, transparent 0deg 320deg, #00e676 360deg); animation: fxRotCW 2.4s linear infinite; filter: blur(6px); }

/* 48. EQ Overlay */
.fx-eq-overlay::before { inset: -22px; background: repeating-linear-gradient(0deg, var(--gold) 0px, var(--gold) 2px, transparent 3px, transparent 8px); animation: fxStreepjesMove 2s infinite, fxRotCW 10s linear infinite; filter: blur(4px); opacity: 0.8; }

/* 49. Cassette Spools */
.fx-cassette::before { inset: -22px; background: repeating-conic-gradient(from 0deg, #fff 0deg 30deg, transparent 30deg 60deg); animation: fxRotCW 3s linear infinite; filter: blur(6px); opacity: 0.8; }

/* 50. Cyber Crosshair */
.fx-crosshair::before { inset: -20px; border: 2px dashed var(--cyan); border-radius: 50%; animation: fxRotCW 8s linear infinite; filter: drop-shadow(0 0 6px var(--cyan)); }

/* 51. Gold Corners */
.fx-gold-corners::before { inset: -22px; background: conic-gradient(from 45deg, #ffd166 0deg 30deg, transparent 30deg 90deg, #ffd166 90deg 120deg, transparent 120deg 180deg, #ffd166 180deg 210deg, transparent 210deg 270deg, #ffd166 270deg 300deg, transparent 300deg 360deg); animation: fxRotCW 6s linear infinite; filter: blur(6px); }

/* 52. Frost Glass */
.fx-frost::before { inset: -22px; background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(99,246,255,0.3) 60%, transparent 75%); animation: fxPulseSoft 3.5s infinite alternate; filter: blur(14px); }

/* 53. Neon Gridline */
.fx-neon-grid::before { inset: -22px; background: repeating-linear-gradient(90deg, #ff007f 0px, #ff007f 2px, transparent 3px, transparent 12px); animation: fxRotCW 8s linear infinite; filter: blur(5px); opacity: 0.85; }

/* 54. Solar Flare */
.fx-solar::before { inset: -26px; background: radial-gradient(circle, #ffea00 10%, #ff5e00 50%, transparent 75%); animation: fxFireRingFlicker 3s infinite alternate; filter: blur(12px); }

/* 55. Silver Liquid */
.fx-silver-liquid::before { inset: -22px; background: conic-gradient(from 0deg, #e0e0e0, #ffffff, #9e9e9e, #ffffff, #e0e0e0); animation: fxMorph71 5s infinite; filter: blur(8px); }

/* 56. Vinyl Dust */
.fx-vinyl-dust::before { inset: -22px; background: radial-gradient(circle, rgba(255,255,255,0.4) 10%, transparent 20%); background-size: 15px 15px; animation: fxRotCW 10s linear infinite; filter: blur(3px); }

/* 57. Emerald Pulse */
.fx-emerald::before { inset: -24px; background: radial-gradient(circle, #00e676 0%, rgba(0,230,118,0.2) 60%, transparent 75%); animation: fxPulseSoft 2s infinite alternate; filter: blur(12px); }

/* 58. Sunset Halo */
.fx-sunset-halo::before { inset: -24px; background: conic-gradient(from 0deg, #ff1744, #ff9100, #7928ca, #ff1744); animation: fxRotCW 6s linear infinite; filter: blur(12px); opacity: 0.85; }

/* 59. Electric Arc */
.fx-electric::before { inset: -22px; background: radial-gradient(circle, #ffffff 0%, var(--cyan) 50%, transparent 75%); animation: fxLightning 1.8s infinite; filter: blur(4px); }

/* 60. Cosmic Dust */
.fx-cosmic::before { inset: -24px; background: conic-gradient(from 0deg, #7928ca, #00f0ff, #ff007f, #7928ca); animation: fxRotCW 8s linear infinite; filter: blur(12px); opacity: 0.85; }

/* 61. Smoked Glass */
.fx-smoked-glass::before { inset: -22px; background: radial-gradient(circle, rgba(50,50,70,0.8) 0%, transparent 70%); animation: fxPulseSoft 4s infinite alternate; filter: blur(14px); }

/* 62. Vinyl Jacket */
.fx-vinyl-jacket::before { inset: -24px; border: 3px solid rgba(255,255,255,0.4); border-radius: 12px; animation: fxPulseSoft 3s infinite alternate; filter: drop-shadow(0 0 10px rgba(0,0,0,0.8)); }

/* 63. Studio Backglow */
.fx-studio-backglow::before { inset: -26px; background: radial-gradient(circle, var(--gold) 0%, rgba(255,209,102,0.3) 50%, transparent 75%); animation: fxPulseSoft 2.8s infinite alternate; filter: blur(16px); }

/* 64. Gallery Corners */
.fx-gallery-corners::before { inset: -20px; border: 2px solid var(--gold); border-radius: 4px; animation: fxPulseSoft 3s infinite alternate; filter: drop-shadow(0 0 8px var(--gold)); }

/* 65. Audio Wave Ribbon */
.fx-wave-ribbon::before { inset: -24px; background: conic-gradient(from 0deg, var(--cyan), transparent 60deg, var(--magenta) 180deg, transparent 240deg, var(--cyan) 360deg); animation: fxRotCW 4s linear infinite; filter: blur(10px); }

/* 66. Holo Foil */
.fx-holo-foil::before {
    inset: -22px;
    background: conic-gradient(from 0deg, #ff0080, #ff8c00, #40e0d0, #7b68ee, #ff0080);
    animation: fxCdShinyShimmer 4s linear infinite;
    border-radius: 50%; opacity: 0.9; filter: blur(6px) drop-shadow(0 0 12px rgba(255,255,255,0.7));
}
.fx-holo-foil::after {
    inset: -14px;
    background: radial-gradient(circle, rgba(255,255,255,0.5) 0%, transparent 70%);
    animation: fxPulseSoft 2s infinite alternate;
    border-radius: 50%;
}

/* 67. Velvet Vignette */
.fx-velvet-vignette::before { inset: -24px; background: radial-gradient(circle, rgba(121,40,202,0.7) 0%, transparent 75%); animation: fxPulseSoft 3s infinite alternate; filter: blur(14px); }

/* 68. Spindle Center */
.fx-spindle::before {
    inset: -22px;
    background: repeating-conic-gradient(from 0deg, #ffd166 0deg 10deg, #120d27 10deg 20deg, var(--cyan) 20deg 30deg, #120d27 30deg 40deg);
    animation: fxRotCW 5s linear infinite;
    border-radius: 50%; opacity: 0.9; filter: drop-shadow(0 0 8px var(--gold));
}
.fx-spindle::after {
    inset: -10px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    animation: fxRotCCW 3s linear infinite;
}

/* 69. Vinyl Record 360 */
.fx-vinyl-record::before {
    inset: -24px;
    background: repeating-radial-gradient(circle, #222 0, #222 2px, #05060d 3px, #05060d 5px),
                conic-gradient(from 45deg, rgba(255,255,255,0.2), transparent 25%, rgba(255,255,255,0.2) 50%, transparent 75%, rgba(255,255,255,0.2));
    animation: fxRotCW 6s linear infinite;
    border-radius: 50%; opacity: 0.95; filter: drop-shadow(0 0 12px rgba(0,0,0,0.9));
}

/* 70. Compact Disc Reflect */
.fx-compact-disc::before {
    inset: -22px;
    background: conic-gradient(from 0deg, rgba(255,0,0,0.7), rgba(255,255,0,0.7), rgba(0,255,0,0.7), rgba(0,255,255,0.7), rgba(0,0,255,0.7), rgba(255,0,255,0.7), rgba(255,0,0,0.7));
    animation: fxCdShinyShimmer 4s linear infinite;
    border-radius: 50%; opacity: 0.88; filter: blur(6px) drop-shadow(0 0 15px rgba(255,255,255,0.6));
}
.fx-compact-disc::after {
    inset: -12px;
    background: conic-gradient(from 180deg, transparent 0deg 40deg, rgba(255,255,255,0.85) 45deg, transparent 50deg 220deg, rgba(255,255,255,0.85) 225deg, transparent 230deg 360deg);
    animation: fxRotCW 3s linear infinite;
    border-radius: 50%; opacity: 0.75;
}

/* 71. Morphing Plasma */
.fx-morph-fire::before { inset: -22px; background: conic-gradient(from 0deg, #ff0055, #ff5e00, #ffea00, #9900ff, #ff0055); animation: fxMorph71 5s linear infinite; filter: blur(8px); opacity: 0.9; }
.fx-morph-fire::after { inset: -14px; background: radial-gradient(circle, #ff007f 0%, #00f0ff 60%, transparent 80%); animation: fxPulseSoft 2.5s ease-in-out infinite alternate; filter: blur(10px); opacity: 0.75; }

/* 72. Rebel Wild Fire */
.fx-wild-fire::before { inset: -26px; background: conic-gradient(from 45deg, #ff1744 0deg, #ff9100 90deg, #ffea00 180deg, #d50000 270deg, #ff1744 360deg); animation: fxFire72 4s ease-in-out infinite alternate; border-radius: 45% 55% 60% 40% / 50% 45% 55% 50%; opacity: 0.95; }
.fx-wild-fire::after { inset: -16px; background: conic-gradient(from 180deg, #ff3d00, #ffd600, #ff1744, #ff3d00); animation: fxRotCW 2.8s linear infinite; filter: blur(10px); opacity: 0.85; }

/* 73. Streepjes */
.fx-streepjes::before { inset: -20px; background: repeating-linear-gradient(0deg, var(--cyan) 0px, var(--cyan) 3px, transparent 4px, transparent 8px); animation: fxStreepjesMove 1.5s ease-in-out infinite, fxRotCW 12s linear infinite; opacity: 0.8; filter: blur(3px); }

/* 74. Onweer */
.fx-onweer::before { inset: -24px; background: radial-gradient(circle, #ffffff 0%, var(--cyan) 40%, transparent 75%); animation: fxLightning 2.8s infinite; z-index: 1; }

/* 75. Draai Waaier */
.fx-draai-waaier::before { inset: -22px; background: conic-gradient(from 0deg, transparent 0deg, var(--cyan) 60deg, transparent 120deg, var(--magenta) 180deg, transparent 240deg, var(--gold) 300deg, transparent 360deg); animation: fxFanCW 4s linear infinite; filter: blur(8px); }
.fx-draai-waaier::after { inset: -16px; background: repeating-conic-gradient(from 0deg, var(--violet) 0deg 15deg, transparent 15deg 30deg); animation: fxFanCCW 3s linear infinite; filter: blur(5px); opacity: 0.7; }

/* 76. Strobe Laser */
.fx-strobe-laser::before { inset: -26px; background: conic-gradient(from 45deg, #00ffff 0deg, transparent 20deg, #ff007f 90deg, transparent 110deg, #ffff00 180deg, transparent 200deg, #00ffff 360deg); animation: fxRotCW 1.8s linear infinite; filter: blur(10px); opacity: 0.9; }

/* 77. Rain Curtain */
.fx-rain-curtain::before { inset: -20px; background: linear-gradient(180deg, transparent 0%, var(--cyan) 50%, var(--magenta) 100%); animation: fxRainDrop 1.2s linear infinite, fxPulseSoft 3s infinite; filter: blur(7px); opacity: 0.85; }

/* 78. Cyber Spiral */
.fx-cyber-spiral::before { inset: -22px; background: repeating-radial-gradient(circle, var(--cyan) 0, var(--cyan) 4px, transparent 5px, transparent 12px); animation: fxHypnoPulse 4s ease-in-out infinite; filter: blur(4px); }

/* 79. Hypno Rings */
.fx-hypno-rings::before { inset: -24px; background: conic-gradient(from 0deg, red, yellow, lime, cyan, blue, magenta, red); animation: fxRotCW 3.5s linear infinite, fxHypnoPulse 3s infinite alternate; filter: blur(12px); opacity: 0.85; }

/* 80. Super Disco */
.fx-super-disco::before { inset: -25px; background: conic-gradient(from 0deg, #ff0055, #00e5ff, #ffee00, #ff0055); animation: fxRotCW 1.2s linear infinite; filter: blur(14px); opacity: 0.95; }

/* 81. Quantum Dots */
.fx-quantum-dots::before { inset: -20px; background: radial-gradient(circle, var(--cyan) 10%, transparent 20%), radial-gradient(circle, var(--gold) 10%, transparent 20%); background-size: 20px 20px; background-position: 0 0, 10px 10px; animation: fxRotCW 8s linear infinite; filter: blur(5px); opacity: 0.85; }

/* 82. Fan 360 */
.fx-fan-360::before { inset: -22px; background: conic-gradient(from 0deg, transparent 0deg, var(--cyan) 90deg, transparent 180deg, var(--gold) 270deg, transparent 360deg); animation: fxFanCW 2s linear infinite; filter: blur(9px); }


/* FRAME LIGHTING MODES (WATERVAL / RAIN CURTAIN, PULSE GLOW, DISCO) */
@keyframes rainCurtainFall {
    0% { background-position: 0 0; }
    100% { background-position: 0 400px; }
}
@keyframes pulseGlowBreathe {
    0%, 100% { opacity: 0.4; filter: drop-shadow(0 0 5px var(--cyan)); }
    50% { opacity: 1; filter: drop-shadow(0 0 20px var(--cyan)) drop-shadow(0 0 35px var(--magenta)); }
}
@keyframes discoSpectrumCycle {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}



        /* 6 NIEUWE EXTRA FRAME EFFECTEN (Sneeuw, Vonken, Waterval, Laser, Aurora, Matrix) */
        @keyframes fxSnowFall { 0% { background-position: 0 0, 0 0; } 100% { background-position: 50px 300px, -40px 200px; } }
        @keyframes fxGoldenSparks { 0% { filter: drop-shadow(0 0 4px #ffd166) hue-rotate(0deg); opacity: 0.7; } 50% { filter: drop-shadow(0 0 16px #ff9100) hue-rotate(30deg); opacity: 1; } 100% { filter: drop-shadow(0 0 4px #ffd166) hue-rotate(0deg); opacity: 0.7; } }
        @keyframes fxWaterfallRun { 0% { background-position: 0 -200px; } 100% { background-position: 0 400px; } }
        @keyframes fxLaserSweep { 0% { background-position: 0 0; } 50% { background-position: 100% 100%; } 100% { background-position: 0 0; } }
        @keyframes fxAuroraBreathe { 0%, 100% { opacity: 0.5; filter: blur(4px) drop-shadow(0 0 8px var(--cyan)); } 50% { opacity: 0.95; filter: blur(2px) drop-shadow(0 0 18px var(--magenta)); } }
        @keyframes fxMatrixCode { 0% { background-position: 0 0; } 100% { background-position: 0 350px; } }

        .frame-snow-dots {
            background-image: radial-gradient(2px 2px at 20px 30px, #ffffff, transparent),
                              radial-gradient(3px 3px at 40px 70px, var(--cyan), transparent),
                              radial-gradient(1.5px 1.5px at 90px 40px, #ffffff, transparent);
            background-size: 100px 100px, 120px 120px, 80px 80px;
            animation: fxSnowFall 3s linear infinite;
        }
        .frame-golden-sparks {
            background: conic-gradient(from 45deg, #ffd166, #ff9100, #ffea00, #ff5bc8, #ffd166);
            animation: fxGoldenSparks 3s ease-in-out infinite alternate;
        }
        .frame-neon-waterfall {
            background: linear-gradient(180deg, transparent 0%, var(--cyan) 60%, var(--magenta) 100%);
            background-size: 100% 180px;
            animation: fxWaterfallRun 1.5s linear infinite;
        }
        .frame-laser-radar {
            background: linear-gradient(90deg, transparent 0%, #00e676 50%, transparent 100%);
            background-size: 200% 200%;
            animation: fxLaserSweep 2s ease-in-out infinite;
        }
        .frame-breathing-aurora {
            background: conic-gradient(from 180deg, var(--cyan), var(--violet), var(--magenta), var(--cyan));
            animation: fxAuroraBreathe 3s ease-in-out infinite, chaserSpin 10s linear infinite;
        }
        .frame-cyber-matrix {
            background: repeating-linear-gradient(0deg, #00e676 0px, transparent 4px, transparent 12px);
            background-size: 100% 80px;
            animation: fxMatrixCode 2s linear infinite;
        }



/* Compacte frame-effect previews voor de studio (90 × 56 px). */
.cmb-effect-preview-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:10px; align-items:start; }
.cmb-effect-preview { width:90px; height:56px; box-sizing:border-box; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.25); border-radius:8px; background:linear-gradient(135deg,#0b1020,#202441); }
.cmb-effect-preview::before { content:""; position:absolute; inset:3px; border:2px solid var(--preview-color,#63f6ff); border-radius:5px; pointer-events:none; }
.cmb-effect-preview.is-rain::before { border-color:transparent; background:repeating-linear-gradient(180deg,transparent 0 5px,rgba(99,246,255,.85) 6px,transparent 8px); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; padding:3px; }
.cmb-effect-preview.is-neon::before { border-color:#ff5bc8; box-shadow:inset 0 0 7px #ff5bc8,0 0 8px #63f6ff; }
.cmb-effect-preview-label { font-size:10px; line-height:1.25; color:#a8aac8; margin-top:4px; max-width:90px; overflow-wrap:anywhere; }