/* DJ On Board styles (extracted + adapted from style.css). Applied via .dj-style-* on the #now-air widget per Admin > Settings > DJ On Board Style. */

/* ===== DJ Card Styles ===== */
.dj-style-glass .now-air {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.dj-style-glass #djOnAirImg {
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.15);
}

.dj-style-neon .now-air {
    background: linear-gradient(180deg, #0d0221, #170b34);
    border: 1px solid #00e5ff;
}

.dj-style-neon #djOnAirImg {
    border-color: #00e5ff;
    box-shadow: 0 0 30px rgba(0, 229, 255, 0.5);
}

.dj-style-neon #djOnAirName {
    color: #00e5ff !important;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.8);
}

.dj-style-neon #djOnAirShow {
    color: #ff2ef4 !important;
}

.dj-style-retro .now-air {
    background: linear-gradient(180deg, #1a0b2e, #0d0221);
    border-top: 3px solid #ff2e9a;
    border-bottom: 3px solid #01d8ff;
}

.dj-style-retro #djOnAirImg {
    border-color: #ff2e9a;
    box-shadow: 0 0 25px rgba(255, 46, 154, 0.6);
}

.dj-style-retro #djOnAirName {
    color: #01d8ff !important;
    text-shadow: 0 0 10px rgba(1, 216, 255, 0.7);
}

.dj-style-retro #djOnAirShow {
    color: #ff2e9a !important;
}

.dj-style-golden .now-air {
    background: linear-gradient(180deg, #2a2113, #1b150c);
    border: 1px solid rgba(212, 175, 55, 0.4);
}

.dj-style-golden #djOnAirImg {
    border-color: #d4af37;
    box-shadow: 0 0 35px rgba(212, 175, 55, 0.5);
}

.dj-style-golden #djOnAirName {
    color: #d4af37 !important;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.dj-style-golden #djOnAirShow {
    color: #e8c9a0 !important;
}

.dj-style-golden .now-air-badge {
    background: #d4af37;
    color: #1b150c;
}

.dj-style-dark .now-air {
    background: #111;
}

.dj-style-dark #djOnAirImg {
    border-color: #333;
    box-shadow: none;
}

.dj-style-gradient .now-air {
    background: linear-gradient(135deg, rgba(230, 57, 70, 0.3), rgba(255, 143, 0, 0.3));
}

.dj-style-gradient #djOnAirImg {
    border-color: #ffc107;
    box-shadow: 0 0 30px rgba(255, 193, 7, 0.4);
}

.dj-style-vapor .now-air {
    background: linear-gradient(180deg, #2a1a4a, #0f0c29);
}

.dj-style-vapor #djOnAirImg {
    border-color: #ff71ce;
    box-shadow: 0 0 30px rgba(255, 113, 206, 0.5);
}

.dj-style-vapor #djOnAirName {
    color: #ff71ce !important;
    text-shadow: 0 0 10px rgba(255, 113, 206, 0.6);
}

.dj-style-vapor #djOnAirShow {
    color: #01cdfe !important;
}

.dj-style-hologram .now-air {
    background: linear-gradient(135deg, rgba(240, 147, 251, 0.15), rgba(245, 87, 108, 0.15), rgba(79, 172, 254, 0.15), rgba(67, 233, 123, 0.15));
}

.dj-style-hologram #djOnAirImg {
    border: 4px solid transparent;
    background: linear-gradient(#1b1b1b, #1b1b1b) padding-box, linear-gradient(135deg, #f093fb, #f5576c, #4facfe, #43e97b) border-box;
    box-shadow: 0 0 30px rgba(240, 147, 251, 0.4);
}

.dj-style-hologram #djOnAirName {
    background: linear-gradient(90deg, #f093fb, #4facfe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dj-style-ocean .now-air {
    background: linear-gradient(180deg, #0a2a3a, #081c28);
}

.dj-style-ocean #djOnAirImg {
    border-color: #00d2ff;
    box-shadow: 0 0 30px rgba(0, 210, 255, 0.5);
}

.dj-style-ocean #djOnAirName {
    color: #00d2ff !important;
    text-shadow: 0 0 10px rgba(0, 210, 255, 0.6);
}

.dj-style-ocean #djOnAirShow {
    color: #7fffd4 !important;
}

/* ----- Shared effects keyframes ----- */
@keyframes djBgMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes djPulseGlow {
    0%, 100% { box-shadow: 0 0 12px var(--dj-glow, rgba(255, 255, 255, 0.35)); }
    50% { box-shadow: 0 0 45px var(--dj-glow, rgba(255, 255, 255, 0.65)); }
}

@keyframes djShine {
    0% { transform: translateX(-130%) rotate(20deg); }
    100% { transform: translateX(320%) rotate(20deg); }
}

@keyframes djSpinRing {
    to { transform: rotate(360deg); }
}

@keyframes djScan {
    0% { top: -8%; opacity: 0; }
    8% { opacity: 1; }
    92% { opacity: 1; }
    100% { top: 108%; opacity: 0; }
}

@keyframes djTwinkle {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}

/* ----- Sunset ----- */
.dj-style-sunset .now-air {
    background: linear-gradient(135deg, #ff6b35, #ff2e63, #6a0572);
    background-size: 200% 200%;
    animation: djBgMove 8s ease infinite;
}

.dj-style-sunset #djOnAirImg {
    border-color: #ffd166;
    --dj-glow: rgba(255, 209, 102, 0.7);
    animation: djPulseGlow 2.2s ease-in-out infinite;
}

/* ----- Midnight Indigo (twinkling stars) ----- */
.dj-style-midnight .now-air {
    background: radial-gradient(circle at 25% 30%, #1e1b4b, #0f172a);
}

.dj-style-midnight .now-air::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(1.5px 1.5px at 20% 25%, #fff, transparent),
                radial-gradient(1.5px 1.5px at 70% 20%, #fff, transparent),
                radial-gradient(1.5px 1.5px at 85% 60%, #fff, transparent),
                radial-gradient(1.5px 1.5px at 40% 80%, #fff, transparent);
    background-size: 200px 200px;
    background-position: 0 0, 60px 40px, 120px 90px, 30px 130px;
    opacity: 0.35;
    animation: djTwinkle 3s ease-in-out infinite;
    pointer-events: none;
}

.dj-style-midnight #djOnAirImg {
    border-color: #818cf8;
    --dj-glow: rgba(129, 140, 248, 0.7);
    animation: djPulseGlow 2.4s ease-in-out infinite;
}

/* ----- Aurora Borealis ----- */
.dj-style-aurora .now-air {
    background: linear-gradient(135deg, #0f0c29, #2ed573, #0f0c29, #6f42c1, #0f0c29);
    background-size: 300% 300%;
    animation: djBgMove 10s ease infinite;
}

.dj-style-aurora #djOnAirImg {
    border-color: #2ed573;
    --dj-glow: rgba(46, 213, 115, 0.7);
    animation: djPulseGlow 2.3s ease-in-out infinite;
}

.dj-style-aurora #djOnAirName { color: #7fffd4 !important; }
.dj-style-aurora #djOnAirShow { color: #b39ddb !important; }

/* ----- Coffee / Warm ----- */
.dj-style-coffee .now-air {
    background: linear-gradient(180deg, #3e2723, #241813);
}

.dj-style-coffee #djOnAirImg {
    border-color: #e8c9a0;
    --dj-glow: rgba(232, 201, 160, 0.6);
    animation: djPulseGlow 2.6s ease-in-out infinite;
}

.dj-style-coffee #djOnAirName { color: #e8c9a0 !important; }

/* ----- Matrix (scan line) ----- */
.dj-style-matrix .now-air {
    background: linear-gradient(180deg, #010b01, #0a1f0a);
}

.dj-style-matrix .now-air::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #00ff41, transparent);
    animation: djScan 2.4s linear infinite;
    pointer-events: none;
}

.dj-style-matrix #djOnAirImg {
    border: 4px solid #00ff41;
    border-radius: 0;
    --dj-glow: rgba(0, 255, 65, 0.7);
    animation: djPulseGlow 1.8s ease-in-out infinite;
}

.dj-style-matrix #djOnAirName { color: #00ff41 !important; text-shadow: 0 0 8px rgba(0, 255, 65, 0.8); }
.dj-style-matrix #djOnAirShow { color: #7fff00 !important; }

/* ----- Deep Space (orbiting ring) ----- */
.dj-style-space .now-air {
    background: radial-gradient(circle at 50% 30%, #2d1b69, #0b0617);
}

.dj-style-space .dj-imw-x::before {
    content: "";
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg, #a855f7 80deg, transparent 160deg);
    z-index: 0;
    animation: djSpinRing 3.5s linear infinite;
}

.dj-style-space #djOnAirImg {
    border-color: #a855f7;
    --dj-glow: rgba(168, 85, 247, 0.8);
    animation: djPulseGlow 2.4s ease-in-out infinite;
}

.dj-style-space #djOnAirName { color: #d8b4fe !important; }
.dj-style-space #djOnAirShow { color: #a855f7 !important; }

/* ----- Monochrome (grayscale) ----- */
.dj-style-mono .now-air {
    background: linear-gradient(180deg, #2b2b2b, #171717);
    filter: grayscale(1);
}

.dj-style-mono #djOnAirImg {
    border-color: #fff;
    --dj-glow: rgba(255, 255, 255, 0.4);
    animation: djPulseGlow 3s ease-in-out infinite;
}

/* ----- Flat Minimal ----- */
.dj-style-flat .now-air {
    background: #242424;
}

.dj-style-flat #djOnAirImg {
    border: 4px solid var(--primary);
    border-radius: 0;
    box-shadow: none;
    --dj-glow: rgba(255, 193, 7, 0.5);
    animation: djPulseGlow 2.8s ease-in-out infinite;
}

.dj-style-flat #djOnAirName { color: var(--primary) !important; }

/* ----- Light & Clean ----- */
.dj-style-light .now-air {
    background: linear-gradient(180deg, #fafafa, #e8e8e8);
}

.dj-style-light #djOnAirImg {
    border-color: #1b1b1b;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
}

.dj-style-light #djOnAirName { color: #1b1b1b !important; }
.dj-style-light #djOnAirShow { color: #555 !important; }
.dj-style-light .now-air-badge { background: rgba(0, 0, 0, 0.85); }

/* ----- Bubblegum ----- */
.dj-style-bubblegum .now-air {
    background: linear-gradient(135deg, #ff9a9e, #fecfef, #ff9a9e);
    background-size: 300% 300%;
    animation: djBgMove 7s ease infinite;
}

.dj-style-bubblegum #djOnAirImg {
    border-color: #ec407a;
    --dj-glow: rgba(236, 64, 122, 0.7);
    animation: djPulseGlow 2s ease-in-out infinite;
}

.dj-style-bubblegum #djOnAirName { color: #880e4f !important; }
.dj-style-bubblegum #djOnAirShow { color: #ec407a !important; }

/* ----- Fire / Ember ----- */
.dj-style-fire .now-air {
    background: linear-gradient(90deg, #ff3d00, #ff6d00, #b71c1c);
    background-size: 300% 100%;
    animation: djBgMove 5s ease infinite;
}

.dj-style-fire #djOnAirImg {
    border-color: #ff9100;
    --dj-glow: rgba(255, 61, 0, 0.8);
    animation: djPulseGlow 1.6s ease-in-out infinite;
}

.dj-style-fire #djOnAirName { color: #ffcc80 !important; text-shadow: 0 0 10px rgba(255, 145, 0, 0.8); }

/* ----- Ice / Frost ----- */
.dj-style-ice .now-air {
    background: linear-gradient(90deg, #0d47a1, #26c6da, #e0f7fa, #26c6da);
    background-size: 300% 100%;
    animation: djBgMove 7s ease infinite;
}

.dj-style-ice #djOnAirImg {
    border-color: #81d4fa;
    --dj-glow: rgba(38, 198, 218, 0.8);
    animation: djPulseGlow 2.1s ease-in-out infinite;
}

.dj-style-ice #djOnAirName { color: #e0f7fa !important; text-shadow: 0 0 10px rgba(129, 212, 250, 0.8); }
.dj-style-ice #djOnAirShow { color: #81d4fa !important; }

/* ----- Royal Purple (shimmer sweep) ----- */
.dj-style-royal .now-air {
    background: radial-gradient(circle at 50% 20%, #4a148c, #1a0933);
}

.dj-style-royal .dj-imw-x {
    overflow: hidden;
}

.dj-style-royal .dj-imw-x::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.35), transparent);
    animation: djShine 3.2s ease-in-out infinite;
}

.dj-style-royal #djOnAirImg {
    border-color: #ffd700;
    --dj-glow: rgba(255, 215, 0, 0.6);
    animation: djPulseGlow 2.5s ease-in-out infinite;
}

.dj-style-royal #djOnAirName { color: #ffd700 !important; }
.dj-style-royal #djOnAirShow { color: #b388ff !important; }

/* ----- Forest ----- */
.dj-style-forest .now-air {
    background: linear-gradient(90deg, #1b4332, #2d6a4f, #40916c);
    background-size: 300% 100%;
    animation: djBgMove 9s ease infinite;
}

.dj-style-forest #djOnAirImg {
    border-color: #95d5b2;
    --dj-glow: rgba(64, 145, 108, 0.8);
    animation: djPulseGlow 2s ease-in-out infinite;
}

.dj-style-forest #djOnAirName { color: #d8f3dc !important; }
.dj-style-forest #djOnAirShow { color: #95d5b2 !important; }

/* ----- Disco Fever (rotating lights) ----- */
.dj-style-disco .now-air {
    background: linear-gradient(90deg, #f093fb, #f5576c, #4facfe, #43e97b, #f093fb);
    background-size: 300% 100%;
    animation: djBgMove 4s linear infinite;
}

.dj-style-disco .dj-imw-x::before {
    content: "";
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent, #fff 30deg, transparent 90deg, #ffc107 210deg, transparent 270deg);
    z-index: 0;
    animation: djSpinRing 2.5s linear infinite;
}

.dj-style-disco #djOnAirName { color: #fff !important; text-shadow: 0 0 12px rgba(255, 255, 255, 0.8); }

/* ----- Tropical ----- */
.dj-style-tropical .now-air {
    background: linear-gradient(90deg, #00796b, #00c853, #64dd17);
    background-size: 300% 100%;
    animation: djBgMove 8s ease infinite;
}

.dj-style-tropical #djOnAirImg {
    border-color: #aeea00;
    --dj-glow: rgba(0, 200, 83, 0.7);
    animation: djPulseGlow 2.2s ease-in-out infinite;
}

.dj-style-tropical #djOnAirName { color: #b2ff59 !important; }
.dj-style-tropical #djOnAirShow { color: #e0f7fa !important; }

/* ----- Candy Land (rotating pinwheel) ----- */
.dj-style-candy .now-air {
    background: linear-gradient(135deg, #f8bbd0, #b39ddb, #f8bbd0);
    background-size: 300% 300%;
    animation: djBgMove 6s ease infinite;
}

.dj-style-candy .dj-imw-x::before {
    content: "";
    position: absolute;
    top: -7px;
    left: -7px;
    right: -7px;
    bottom: -7px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #ff80ab, #7c4dff, #ff80ab);
    z-index: 0;
    animation: djSpinRing 3.5s linear infinite;
}

.dj-style-candy #djOnAirName { color: #880e4f !important; }
.dj-style-candy #djOnAirShow { color: #7c4dff !important; }

/* ----- Cyber Grid (scan line) ----- */
.dj-style-cyber .now-air {
    background-color: #00101f;
    background-image: linear-gradient(rgba(0, 229, 255, 0.14) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(0, 229, 255, 0.14) 1px, transparent 1px);
    background-size: 24px 24px;
}

.dj-style-cyber .now-air::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #00e5ff, transparent);
    animation: djScan 2s linear infinite;
    pointer-events: none;
}

.dj-style-cyber #djOnAirImg {
    border: 4px solid #00e5ff;
    border-radius: 4px;
    --dj-glow: rgba(0, 229, 255, 0.8);
    animation: djPulseGlow 1.9s ease-in-out infinite;
}

.dj-style-cyber #djOnAirName { color: #00e5ff !important; text-shadow: 0 0 10px rgba(0, 229, 255, 0.8); }
.dj-style-cyber #djOnAirShow { color: #ff2ef4 !important; }

/* ----- Emerald ----- */
.dj-style-emerald .now-air {
    background: linear-gradient(90deg, #004d40, #009688, #004d40);
    background-size: 300% 100%;
    animation: djBgMove 9s ease infinite;
}

.dj-style-emerald #djOnAirImg {
    border-color: #26a69a;
    --dj-glow: rgba(38, 166, 154, 0.8);
    animation: djPulseGlow 2s ease-in-out infinite;
}

.dj-style-emerald #djOnAirName { color: #b2dfdb !important; }
.dj-style-emerald #djOnAirShow { color: #80cbc4 !important; }

/* ----- Crimson ----- */
.dj-style-crimson .now-air {
    background: linear-gradient(180deg, #4a0000, #1a0000);
}

.dj-style-crimson #djOnAirImg {
    border-color: #e63946;
    --dj-glow: rgba(230, 57, 70, 0.85);
    animation: djPulseGlow 1.7s ease-in-out infinite;
}

.dj-style-crimson #djOnAirName { color: #ff5252 !important; text-shadow: 0 0 12px rgba(255, 82, 82, 0.8); }
.dj-style-crimson #djOnAirShow { color: #e57373 !important; }

/* ===== DJ Photo Effects (distinct animation per style) ===== */
@keyframes djPhotoBreathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes djPhotoBreatheFast {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.07); }
}

@keyframes djPhotoBreatheSlow {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

@keyframes djPhotoBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes djPhotoRock {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}

@keyframes djPhotoHue {
    from { filter: hue-rotate(0deg); }
    to { filter: hue-rotate(360deg); }
}

@keyframes djPhotoFlicker {
    0%, 100% { opacity: 1; }
    20% { opacity: 0.82; }
    40% { opacity: 0.95; }
    60% { opacity: 0.78; }
    80% { opacity: 1; }
}

@keyframes djPhotoHeartbeat {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.06); }
    40% { transform: scale(1); }
    60% { transform: scale(1.08); }
    75% { transform: scale(1); }
}

.dj-style-classic #djOnAirImg { animation: djPhotoBreathe 4s ease-in-out infinite; }
.dj-style-glass #djOnAirImg { animation: djPhotoBreathe 5s ease-in-out infinite; }
.dj-style-neon #djOnAirImg { animation: djPhotoHue 6s linear infinite; }
.dj-style-retro #djOnAirImg { animation: djPulseGlow 2.5s ease-in-out infinite, djPhotoRock 3s ease-in-out infinite; }
.dj-style-golden #djOnAirImg { animation: djPulseGlow 2.5s ease-in-out infinite, djPhotoBreathe 4.5s ease-in-out infinite; }
.dj-style-dark #djOnAirImg { animation: djPhotoBob 3.5s ease-in-out infinite; }
.dj-style-gradient #djOnAirImg { animation: djPulseGlow 2s ease-in-out infinite, djPhotoBreathe 3.5s ease-in-out infinite; }
.dj-style-vapor #djOnAirImg { animation: djPulseGlow 2.2s ease-in-out infinite, djPhotoBob 3.5s ease-in-out infinite; }
.dj-style-hologram #djOnAirImg { animation: djPhotoHue 5s linear infinite; }
.dj-style-ocean #djOnAirImg { animation: djPulseGlow 2.2s ease-in-out infinite, djPhotoBob 4s ease-in-out infinite; }
.dj-style-sunset #djOnAirImg { animation: djPulseGlow 2.2s ease-in-out infinite, djPhotoBreathe 4s ease-in-out infinite; }
.dj-style-midnight #djOnAirImg { animation: djPulseGlow 2.4s ease-in-out infinite, djPhotoBreatheSlow 6s ease-in-out infinite; }
.dj-style-aurora #djOnAirImg { animation: djPulseGlow 2.3s ease-in-out infinite, djPhotoHue 8s linear infinite; }
.dj-style-coffee #djOnAirImg { animation: djPulseGlow 2.6s ease-in-out infinite, djPhotoBreatheSlow 6s ease-in-out infinite; }
.dj-style-matrix #djOnAirImg { animation: djPulseGlow 1.8s ease-in-out infinite, djPhotoFlicker 2s linear infinite; }
.dj-style-space #djOnAirImg { animation: djPulseGlow 2.4s ease-in-out infinite, djPhotoBreathe 5s ease-in-out infinite; }
.dj-style-mono #djOnAirImg { animation: djPulseGlow 3s ease-in-out infinite, djPhotoBreatheSlow 7s ease-in-out infinite; }
.dj-style-flat #djOnAirImg { animation: djPulseGlow 2.8s ease-in-out infinite, djPhotoBreathe 5s ease-in-out infinite; }
.dj-style-light #djOnAirImg { animation: djPhotoBob 4s ease-in-out infinite; }
.dj-style-bubblegum #djOnAirImg { animation: djPulseGlow 2s ease-in-out infinite, djPhotoBreatheFast 2.5s ease-in-out infinite; }
.dj-style-fire #djOnAirImg { animation: djPulseGlow 1.6s ease-in-out infinite, djPhotoFlicker 1.5s linear infinite; }
.dj-style-ice #djOnAirImg { animation: djPulseGlow 2.1s ease-in-out infinite, djPhotoBreathe 4s ease-in-out infinite; }
.dj-style-royal #djOnAirImg { animation: djPulseGlow 2.5s ease-in-out infinite, djPhotoBreathe 4.5s ease-in-out infinite; }
.dj-style-forest #djOnAirImg { animation: djPulseGlow 2s ease-in-out infinite, djPhotoBreatheSlow 6s ease-in-out infinite; }
.dj-style-disco #djOnAirImg { animation: djPhotoRock 2.5s ease-in-out infinite; }
.dj-style-tropical #djOnAirImg { animation: djPulseGlow 2.2s ease-in-out infinite, djPhotoBob 4s ease-in-out infinite; }
.dj-style-candy #djOnAirImg { animation: djPhotoBreatheFast 3s ease-in-out infinite; }
.dj-style-cyber #djOnAirImg { animation: djPulseGlow 1.9s ease-in-out infinite, djPhotoFlicker 2.5s linear infinite; }
.dj-style-emerald #djOnAirImg { animation: djPulseGlow 2s ease-in-out infinite, djPhotoBreathe 5s ease-in-out infinite; }
.dj-style-crimson #djOnAirImg { animation: djPulseGlow 1.7s ease-in-out infinite, djPhotoHeartbeat 1.5s ease-in-out infinite; }

/* ===== Extra DJ Card Styles (30 more) ===== */
@keyframes djStripes {
    to { background-position: 80px 0; }
}

@keyframes djPhotoSway {
    0%, 100% { transform: rotate(-2deg) translateY(0); }
    50% { transform: rotate(2deg) translateY(-5px); }
}

/* ----- Rose Gold ----- */
.dj-style-rose .now-air {
    background: linear-gradient(135deg, #e8b4b8, #f4c6c6, #d8a7a0);
    background-size: 200% 200%;
    animation: djBgMove 8s ease infinite;
}
.dj-style-rose #djOnAirImg {
    border: 4px solid #e8b4b8;
    --dj-glow: rgba(216, 167, 160, 0.8);
    animation: djPulseGlow 2.5s ease-in-out infinite, djPhotoBreathe 4.5s ease-in-out infinite;
}
.dj-style-rose #djOnAirName { color: #6d3b3b !important; }
.dj-style-rose #djOnAirShow { color: #a25b5b !important; }

/* ----- Cherry Blossom (falling petals) ----- */
.dj-style-sakura .now-air {
    background: linear-gradient(180deg, #fdeff2, #f9c7d0);
}
.dj-style-sakura .now-air::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(3px 3px at 15% 20%, #f06292, transparent 80%),
                radial-gradient(3px 3px at 50% 45%, #f48fb1, transparent 80%),
                radial-gradient(3px 3px at 80% 25%, #f06292, transparent 80%),
                radial-gradient(3px 3px at 65% 75%, #f8bbd0, transparent 80%),
                radial-gradient(3px 3px at 30% 65%, #f48fb1, transparent 80%);
    background-size: 120px 120px;
    opacity: 0.5;
    animation: djTwinkle 3.5s ease-in-out infinite;
    pointer-events: none;
}
.dj-style-sakura #djOnAirImg {
    border: 4px solid #f06292;
    --dj-glow: rgba(240, 98, 146, 0.7);
    animation: djPulseGlow 2.2s ease-in-out infinite, djPhotoBreathe 4s ease-in-out infinite;
}
.dj-style-sakura #djOnAirName { color: #ad1457 !important; }
.dj-style-sakura #djOnAirShow { color: #c2185b !important; }

/* ----- Lavender ----- */
.dj-style-lavender .now-air {
    background: linear-gradient(135deg, #b39ddb, #9575cd, #7e57c2);
    background-size: 200% 200%;
    animation: djBgMove 9s ease infinite;
}
.dj-style-lavender #djOnAirImg {
    border: 4px solid #d1c4e9;
    --dj-glow: rgba(149, 117, 205, 0.8);
    animation: djPulseGlow 2.3s ease-in-out infinite, djPhotoBreathe 5s ease-in-out infinite;
}
.dj-style-lavender #djOnAirName { color: #311b92 !important; }
.dj-style-lavender #djOnAirShow { color: #4527a0 !important; }

/* ----- Mint ----- */
.dj-style-mint .now-air {
    background: linear-gradient(135deg, #b2dfdb, #80cbc4, #4db6ac);
    background-size: 200% 200%;
    animation: djBgMove 8s ease infinite;
}
.dj-style-mint #djOnAirImg {
    border: 4px solid #e0f2f1;
    --dj-glow: rgba(77, 182, 172, 0.8);
    animation: djPulseGlow 2s ease-in-out infinite, djPhotoBob 4s ease-in-out infinite;
}
.dj-style-mint #djOnAirName { color: #004d40 !important; }
.dj-style-mint #djOnAirShow { color: #00695c !important; }

/* ----- Peach ----- */
.dj-style-peach .now-air {
    background: linear-gradient(135deg, #ffe0b2, #ffcc80, #ffb74d);
    background-size: 200% 200%;
    animation: djBgMove 8s ease infinite;
}
.dj-style-peach #djOnAirImg {
    border: 4px solid #ffe0b2;
    --dj-glow: rgba(255, 183, 77, 0.8);
    animation: djPulseGlow 2.2s ease-in-out infinite, djPhotoBreathe 4s ease-in-out infinite;
}
.dj-style-peach #djOnAirName { color: #e65100 !important; }
.dj-style-peach #djOnAirShow { color: #ef6c00 !important; }

/* ----- Chocolate ----- */
.dj-style-chocolate .now-air {
    background: linear-gradient(180deg, #4e342e, #3e2723);
}
.dj-style-chocolate #djOnAirImg {
    border: 4px solid #8d6e63;
    --dj-glow: rgba(141, 110, 99, 0.7);
    animation: djPulseGlow 2.6s ease-in-out infinite, djPhotoBreatheSlow 6s ease-in-out infinite;
}
.dj-style-chocolate #djOnAirName { color: #d7ccc8 !important; }
.dj-style-chocolate #djOnAirShow { color: #a1887f !important; }

/* ----- Lemon Zest ----- */
.dj-style-lemon .now-air {
    background: linear-gradient(135deg, #fff9c4, #ffee58, #ffd54f);
    background-size: 200% 200%;
    animation: djBgMove 6s ease infinite;
}
.dj-style-lemon #djOnAirImg {
    border: 4px solid #fbc02d;
    --dj-glow: rgba(255, 238, 88, 0.9);
    animation: djPulseGlow 1.8s ease-in-out infinite, djPhotoBob 3.5s ease-in-out infinite;
}
.dj-style-lemon #djOnAirName { color: #f57f17 !important; }
.dj-style-lemon #djOnAirShow { color: #f9a825 !important; }

/* ----- Tangerine ----- */
.dj-style-tangerine .now-air {
    background: linear-gradient(135deg, #ffb300, #ff6f00, #e65100);
    background-size: 200% 200%;
    animation: djBgMove 7s ease infinite;
}
.dj-style-tangerine #djOnAirImg {
    border: 4px solid #ffd180;
    --dj-glow: rgba(255, 111, 0, 0.8);
    animation: djPulseGlow 2s ease-in-out infinite, djPhotoRock 3.5s ease-in-out infinite;
}
.dj-style-tangerine #djOnAirName { color: #fff3e0 !important; }
.dj-style-tangerine #djOnAirShow { color: #ffe0b2 !important; }

/* ----- Grape ----- */
.dj-style-grape .now-air {
    background: radial-gradient(circle at 50% 25%, #4a148c, #12005e);
}
.dj-style-grape #djOnAirImg {
    border: 4px solid #b388ff;
    --dj-glow: rgba(179, 136, 255, 0.8);
    animation: djPulseGlow 2.2s ease-in-out infinite, djPhotoBreathe 4.5s ease-in-out infinite;
}
.dj-style-grape #djOnAirName { color: #d1c4e9 !important; }
.dj-style-grape #djOnAirShow { color: #b388ff !important; }

/* ----- Berry ----- */
.dj-style-berry .now-air {
    background: linear-gradient(135deg, #d81b60, #880e4f);
    background-size: 200% 200%;
    animation: djBgMove 7s ease infinite;
}
.dj-style-berry #djOnAirImg {
    border: 4px solid #f48fb1;
    --dj-glow: rgba(216, 27, 96, 0.85);
    animation: djPulseGlow 1.8s ease-in-out infinite, djPhotoHeartbeat 1.8s ease-in-out infinite;
}
.dj-style-berry #djOnAirName { color: #fce4ec !important; }

/* ----- Seafoam ----- */
.dj-style-seafoam .now-air {
    background: linear-gradient(135deg, #a7ffeb, #64ffda, #1de9b6);
    background-size: 200% 200%;
    animation: djBgMove 8s ease infinite;
}
.dj-style-seafoam #djOnAirImg {
    border: 4px solid #e0f7fa;
    --dj-glow: rgba(29, 233, 182, 0.8);
    animation: djPulseGlow 2s ease-in-out infinite, djPhotoBob 4s ease-in-out infinite;
}
.dj-style-seafoam #djOnAirName { color: #00695c !important; }
.dj-style-seafoam #djOnAirShow { color: #00897b !important; }

/* ----- Lagoon ----- */
.dj-style-lagoon .now-air {
    background: linear-gradient(135deg, #006064, #00838f, #0097a7);
    background-size: 200% 200%;
    animation: djBgMove 9s ease infinite;
}
.dj-style-lagoon #djOnAirImg {
    border: 4px solid #80deea;
    --dj-glow: rgba(0, 151, 167, 0.8);
    animation: djPulseGlow 2.1s ease-in-out infinite, djPhotoBob 4.5s ease-in-out infinite;
}
.dj-style-lagoon #djOnAirName { color: #e0f7fa !important; }
.dj-style-lagoon #djOnAirShow { color: #80deea !important; }

/* ----- Glacier ----- */
.dj-style-glacier .now-air {
    background: linear-gradient(180deg, #e0f7fa, #b3e5fc, #e1f5fe);
}
.dj-style-glacier #djOnAirImg {
    border: 4px solid #81d4fa;
    box-shadow: 0 0 25px rgba(129, 212, 250, 0.5);
    animation: djPhotoBreatheSlow 6s ease-in-out infinite;
}
.dj-style-glacier #djOnAirName { color: #01579b !important; }
.dj-style-glacier #djOnAirShow { color: #0288d1 !important; }

/* ----- Steel / Industrial ----- */
.dj-style-steel .now-air {
    background: linear-gradient(180deg, #616161, #37474f);
    background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 22px), linear-gradient(#616161, #37474f);
    background-size: 22px 100%, cover;
}
.dj-style-steel #djOnAirImg {
    border: 4px solid #9e9e9e;
    --dj-glow: rgba(158, 158, 158, 0.6);
    animation: djPulseGlow 2.8s ease-in-out infinite, djPhotoRock 5s ease-in-out infinite;
}
.dj-style-steel #djOnAirName { color: #eceff1 !important; }
.dj-style-steel #djOnAirShow { color: #b0bec5 !important; }

/* ----- Graphite ----- */
.dj-style-graphite .now-air {
    background: linear-gradient(180deg, #2f2f2f, #1a1a1a);
}
.dj-style-graphite #djOnAirImg {
    border: 4px solid #757575;
    --dj-glow: rgba(117, 117, 117, 0.6);
    animation: djPulseGlow 3s ease-in-out infinite, djPhotoBreathe 5s ease-in-out infinite;
}
.dj-style-graphite #djOnAirName { color: #f5f5f5 !important; }
.dj-style-graphite #djOnAirShow { color: #bdbdbd !important; }

/* ----- Obsidian ----- */
.dj-style-obsidian .now-air {
    background: linear-gradient(180deg, #0a0a0f, #000);
}
.dj-style-obsidian #djOnAirImg {
    border: 4px solid #424242;
    --dj-glow: rgba(66, 66, 66, 0.6);
    animation: djPulseGlow 3.2s ease-in-out infinite, djPhotoBreatheSlow 7s ease-in-out infinite;
}
.dj-style-obsidian #djOnAirName { color: #eee !important; text-shadow: 0 0 8px rgba(255,255,255,0.3); }

/* ----- Bronze ----- */
.dj-style-bronze .now-air {
    background: linear-gradient(180deg, #6d4c41, #4e342e);
}
.dj-style-bronze #djOnAirImg {
    border: 4px solid #cd7f32;
    --dj-glow: rgba(205, 127, 50, 0.8);
    animation: djPulseGlow 2.4s ease-in-out infinite, djPhotoBreathe 4.5s ease-in-out infinite;
}
.dj-style-bronze #djOnAirName { color: #ffcc80 !important; }
.dj-style-bronze #djOnAirShow { color: #d7a86e !important; }

/* ----- Platinum ----- */
.dj-style-platinum .now-air {
    background: linear-gradient(180deg, #eceff1, #cfd8dc);
}
.dj-style-platinum #djOnAirImg {
    border: 4px solid #fafafa;
    box-shadow: 0 0 30px rgba(236, 239, 241, 0.6);
    --dj-glow: rgba(236, 239, 241, 0.8);
    animation: djPulseGlow 2.5s ease-in-out infinite, djPhotoBreathe 5s ease-in-out infinite;
}
.dj-style-platinum #djOnAirName { color: #37474f !important; }
.dj-style-platinum #djOnAirShow { color: #607d8b !important; }

/* ----- Silver ----- */
.dj-style-silver .now-air {
    background: linear-gradient(135deg, #b0bec5, #90a4ae, #cfd8dc);
    background-size: 200% 200%;
    animation: djBgMove 8s ease infinite;
}
.dj-style-silver #djOnAirImg {
    border: 4px solid #eceff1;
    --dj-glow: rgba(144, 164, 174, 0.8);
    animation: djPulseGlow 2.4s ease-in-out infinite, djPhotoBob 4s ease-in-out infinite;
}
.dj-style-silver #djOnAirName { color: #263238 !important; }
.dj-style-silver #djOnAirShow { color: #455a64 !important; }

/* ----- Copper ----- */
.dj-style-copper .now-air {
    background: linear-gradient(180deg, #8d6e63, #5d4037);
}
.dj-style-copper #djOnAirImg {
    border: 4px solid #b87333;
    --dj-glow: rgba(184, 115, 51, 0.8);
    animation: djPulseGlow 2.3s ease-in-out infinite, djPhotoBreathe 4.5s ease-in-out infinite;
}
.dj-style-copper #djOnAirName { color: #ffe0b2 !important; }
.dj-style-copper #djOnAirShow { color: #d7a86e !important; }

/* ----- Bumblebee (stripes) ----- */
.dj-style-bumblebee .now-air {
    background: repeating-linear-gradient(45deg, #3d3d3d 0 20px, #f5c518 20px 40px);
    animation: djStripes 6s linear infinite;
}
.dj-style-bumblebee #djOnAirImg {
    border: 4px solid #f5c518;
    --dj-glow: rgba(245, 197, 24, 0.9);
    animation: djPulseGlow 1.9s ease-in-out infinite, djPhotoRock 3s ease-in-out infinite;
}
.dj-style-bumblebee #djOnAirName { color: #fff !important; text-shadow: 0 0 8px rgba(0,0,0,0.8); }
.dj-style-bumblebee #djOnAirShow { color: #f5c518 !important; }

/* ----- Watermelon ----- */
.dj-style-watermelon .now-air {
    background: linear-gradient(180deg, #c62828, #e53935, #2e7d32);
}
.dj-style-watermelon #djOnAirImg {
    border: 4px solid #66bb6a;
    --dj-glow: rgba(198, 40, 40, 0.8);
    animation: djPulseGlow 2s ease-in-out infinite, djPhotoBob 4s ease-in-out infinite;
}
.dj-style-watermelon #djOnAirName { color: #ffcdd2 !important; }
.dj-style-watermelon #djOnAirShow { color: #a5d6a7 !important; }

/* ----- Kiwi ----- */
.dj-style-kiwi .now-air {
    background: linear-gradient(135deg, #8bc34a, #689f38, #33691e);
    background-size: 200% 200%;
    animation: djBgMove 7s ease infinite;
}
.dj-style-kiwi #djOnAirImg {
    border: 4px solid #dcedc8;
    --dj-glow: rgba(139, 195, 74, 0.8);
    animation: djPulseGlow 1.9s ease-in-out infinite, djPhotoBreatheFast 3s ease-in-out infinite;
}
.dj-style-kiwi #djOnAirName { color: #f1f8e9 !important; }
.dj-style-kiwi #djOnAirShow { color: #dcedc8 !important; }

/* ----- Blueberry ----- */
.dj-style-blueberry .now-air {
    background: linear-gradient(180deg, #283593, #1a237e);
}
.dj-style-blueberry #djOnAirImg {
    border: 4px solid #7986cb;
    --dj-glow: rgba(121, 134, 203, 0.8);
    animation: djPulseGlow 2.2s ease-in-out infinite, djPhotoBreathe 5s ease-in-out infinite;
}
.dj-style-blueberry #djOnAirName { color: #c5cae9 !important; }
.dj-style-blueberry #djOnAirShow { color: #9fa8da !important; }

/* ----- Mojito ----- */
.dj-style-mojito .now-air {
    background: linear-gradient(135deg, #dce775, #aed581, #43a047);
    background-size: 200% 200%;
    animation: djBgMove 8s ease infinite;
}
.dj-style-mojito #djOnAirImg {
    border: 4px solid #dcedc8;
    --dj-glow: rgba(174, 213, 129, 0.9);
    animation: djPulseGlow 2.1s ease-in-out infinite, djPhotoBob 4.5s ease-in-out infinite;
}
.dj-style-mojito #djOnAirName { color: #1b5e20 !important; }
.dj-style-mojito #djOnAirShow { color: #2e7d32 !important; }

/* ----- Soap Bubbles ----- */
.dj-style-bubble .now-air {
    background-color: #1a2a3a;
}
.dj-style-bubble .now-air::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(6px 6px at 20% 25%, rgba(255,255,255,0.5), transparent 70%),
                radial-gradient(4px 4px at 60% 40%, rgba(255,255,255,0.4), transparent 70%),
                radial-gradient(7px 7px at 80% 70%, rgba(255,255,255,0.45), transparent 70%),
                radial-gradient(5px 5px at 35% 80%, rgba(255,255,255,0.35), transparent 70%);
    background-size: 160px 160px;
    opacity: 0.5;
    animation: djTwinkle 3s ease-in-out infinite;
    pointer-events: none;
}
.dj-style-bubble #djOnAirImg {
    border: 4px solid rgba(255, 255, 255, 0.6);
    --dj-glow: rgba(255, 255, 255, 0.5);
    animation: djPulseGlow 2.4s ease-in-out infinite, djPhotoBreathe 4.5s ease-in-out infinite;
}
.dj-style-bubble #djOnAirName { color: #fff !important; }
.dj-style-bubble #djOnAirShow { color: #80deea !important; }

/* ----- Prism ----- */
.dj-style-prism .now-air {
    background: linear-gradient(90deg, #ff1744, #ff9100, #ffea00, #00e676, #2979ff, #d500f9, #ff1744);
    background-size: 300% 100%;
    animation: djBgMove 5s linear infinite;
}
.dj-style-prism #djOnAirImg {
    border: 4px solid transparent;
    background: linear-gradient(#1b1b1b, #1b1b1b) padding-box, linear-gradient(90deg, #ff1744, #ffea00, #00e676, #2979ff, #d500f9) border-box;
    animation: djPhotoHue 6s linear infinite;
}
.dj-style-prism #djOnAirName { color: #fff !important; text-shadow: 0 0 12px rgba(255,255,255,0.8); }

/* ----- Pixel / 8-bit ----- */
.dj-style-pixel .now-air {
    background-color: #101820;
    background-image: linear-gradient(rgba(57, 255, 20, 0.25) 2px, transparent 2px),
                      linear-gradient(90deg, rgba(57, 255, 20, 0.25) 2px, transparent 2px);
    background-size: 12px 12px;
}
.dj-style-pixel #djOnAirImg {
    border: 4px solid #39ff14;
    border-radius: 0;
    image-rendering: pixelated;
    --dj-glow: rgba(57, 255, 20, 0.7);
    animation: djPulseGlow 1.8s ease-in-out infinite, djPhotoFlicker 2.2s linear infinite;
}
.dj-style-pixel #djOnAirName { color: #39ff14 !important; text-shadow: 0 0 8px rgba(57, 255, 20, 0.8); }
.dj-style-pixel #djOnAirShow { color: #76ff03 !important; }

/* ----- Glitch ----- */
.dj-style-glitch .now-air {
    background: linear-gradient(180deg, #0f0f1a, #1a0b2e);
}
.dj-style-glitch .now-air::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, #ff2ef4, #00e5ff, transparent);
    animation: djScan 1.8s linear infinite;
    pointer-events: none;
}
.dj-style-glitch #djOnAirImg {
    border: 4px solid #ff2ef4;
    --dj-glow: rgba(255, 46, 244, 0.8);
    animation: djPulseGlow 1.6s ease-in-out infinite, djPhotoFlicker 1.8s linear infinite, djPhotoRock 4s ease-in-out infinite;
}
.dj-style-glitch #djOnAirName {
    color: #fff !important;
    text-shadow: 2px 0 #ff2ef4, -2px 0 #00e5ff;
}
.dj-style-glitch #djOnAirShow { color: #00e5ff !important; }

/* ----- Comet (orbiting ring) ----- */
.dj-style-comet .now-air {
    background: radial-gradient(circle at 50% 30%, #0b1d3a, #040a18);
}
.dj-style-comet .dj-imw-x::before {
    content: "";
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg, #7ec8ff 50deg, #ffffff 80deg, transparent 130deg);
    animation: djSpinRing 2.8s linear infinite;
}
.dj-style-comet #djOnAirImg {
    border: 4px solid #64b5f6;
    --dj-glow: rgba(100, 181, 246, 0.8);
    animation: djPulseGlow 2.2s ease-in-out infinite, djPhotoBreatheSlow 6s ease-in-out infinite;
}
.dj-style-comet #djOnAirName { color: #bfe3ff !important; }
.dj-style-comet #djOnAirShow { color: #64b5f6 !important; }

/* ===== Unique DJ Photo Effect (one-of-a-kind animation per style) ===== */
@keyframes djImgClassic { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes djImgGlass { 0%,100% { transform: scale(1) rotate(0deg); opacity: 1; } 50% { transform: scale(1.03) rotate(1deg); opacity: 0.9; } }
@keyframes djImgNeon { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
@keyframes djImgRetro { 0%,100% { transform: rotate(-3deg); filter: hue-rotate(0deg); } 50% { transform: rotate(3deg); filter: hue-rotate(90deg); } }
@keyframes djImgGolden { 0%,100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.04); filter: brightness(1.35); } }
@keyframes djImgDark { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes djImgGradient { 0%,100% { transform: scale(1); filter: hue-rotate(0deg); } 50% { transform: scale(1.06); filter: hue-rotate(180deg); } }
@keyframes djImgVapor { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes djImgHologram { 0%,100% { filter: hue-rotate(0deg) brightness(1); } 25% { filter: hue-rotate(120deg) brightness(1.2); } 50% { filter: hue-rotate(240deg) brightness(0.9); } 75% { filter: hue-rotate(300deg) brightness(1.15); } }
@keyframes djImgOcean { 0%,100% { transform: translateY(0); } 25% { transform: translateY(-6px); } 50% { transform: translateY(0); } 75% { transform: translateY(-3px); } }
@keyframes djImgSunset { 0%,100% { transform: scale(1); filter: saturate(1); } 50% { transform: scale(1.05); filter: saturate(1.6); } }
@keyframes djImgMidnight { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.04); opacity: 0.85; } }
@keyframes djImgAurora { 0%,100% { transform: rotate(0deg); filter: hue-rotate(0deg); } 33% { transform: rotate(2deg); filter: hue-rotate(120deg); } 66% { transform: rotate(-2deg); filter: hue-rotate(240deg); } }
@keyframes djImgCoffee { 0%,100% { transform: translateY(0); filter: sepia(0.2); } 50% { transform: translateY(-4px); filter: sepia(0.4); } }
@keyframes djImgMatrix { 0%,100% { opacity: 1; } 30% { opacity: 0.7; } 45% { opacity: 0.95; } 60% { opacity: 0.75; } 80% { opacity: 1; } }
@keyframes djImgSpace { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes djImgMono { 0%,100% { transform: scale(1); filter: contrast(1); } 50% { transform: scale(1.06); filter: contrast(1.2); } }
@keyframes djImgFlat { 0%,100% { transform: scale(0.99); } 50% { transform: scale(1.03); } }
@keyframes djImgLight { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes djImgBubblegum { 0%,100% { transform: translateY(0) scale(1); } 30% { transform: translateY(-8px) scale(1.05); } 60% { transform: translateY(-2px) scale(0.98); } }
@keyframes djImgFire { 0%,100% { opacity: 1; filter: brightness(1); } 25% { opacity: 0.8; filter: brightness(1.4); } 50% { opacity: 1; filter: brightness(1); } 75% { opacity: 0.85; filter: brightness(1.3); } }
@keyframes djImgIce { 0%,100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.04); filter: brightness(1.25) saturate(1.4); } }
@keyframes djImgRoyal { 0%,100% { transform: translateY(0); filter: brightness(1); } 50% { transform: translateY(-5px); filter: brightness(1.25); } }
@keyframes djImgForest { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@keyframes djImgDisco { 0%,100% { transform: rotate(-5deg); filter: hue-rotate(0deg); } 25% { transform: rotate(5deg); filter: hue-rotate(90deg); } 50% { transform: rotate(-5deg); filter: hue-rotate(180deg); } 75% { transform: rotate(5deg); filter: hue-rotate(270deg); } }
@keyframes djImgTropical { 0%,100% { transform: translateY(0) rotate(-2deg); filter: saturate(1); } 50% { transform: translateY(-6px) rotate(2deg); filter: saturate(1.5); } }
@keyframes djImgCandy { 0%,100% { transform: scale(1); filter: hue-rotate(0deg); } 30% { transform: scale(1.07); filter: hue-rotate(120deg); } 60% { transform: scale(0.97); filter: hue-rotate(240deg); } }
@keyframes djImgCyber { 0%,100% { opacity: 1; transform: translateX(0); } 20% { opacity: 0.8; transform: translateX(-2px); } 40% { opacity: 1; transform: translateX(2px); } 60% { opacity: 0.85; transform: translateX(-1px); } }
@keyframes djImgEmerald { 0%,100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.05); filter: brightness(1.2); } }
@keyframes djImgCrimson { 0%,100% { transform: scale(1); } 25% { transform: scale(1.06); } 40% { transform: scale(1); } 60% { transform: scale(1.08); } 75% { transform: scale(1); } }
@keyframes djImgRose { 0%,100% { transform: scale(1); filter: saturate(1); } 50% { transform: scale(1.04); filter: saturate(1.3); } }
@keyframes djImgSakura { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-7px) rotate(3deg); } }
@keyframes djImgLavender { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes djImgMint { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-6px); } 70% { transform: translateY(-2px); } }
@keyframes djImgPeach { 0%,100% { transform: scale(1); filter: sepia(0.1); } 50% { transform: scale(1.05); filter: sepia(0.3); } }
@keyframes djImgChocolate { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes djImgLemon { 0%,100% { transform: translateY(0) scale(1); } 25% { transform: translateY(-9px) scale(1.05); } 50% { transform: translateY(0) scale(1); } 75% { transform: translateY(-4px); } }
@keyframes djImgTangerine { 0%,100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-5px) rotate(-4deg); } 50% { transform: translateY(0) rotate(4deg); } 75% { transform: translateY(-3px) rotate(-2deg); } }
@keyframes djImgGrape { 0%,100% { transform: scale(1); filter: brightness(0.9); } 50% { transform: scale(1.05); filter: brightness(1.1); } }
@keyframes djImgBerry { 0%,100% { transform: scale(1); } 20% { transform: scale(1.07); } 35% { transform: scale(1); } 55% { transform: scale(1.09); } 70% { transform: scale(1); } }
@keyframes djImgSeafoam { 0%,100% { transform: translateY(0); filter: saturate(1); } 50% { transform: translateY(-5px); filter: saturate(1.4); } }
@keyframes djImgLagoon { 0%,100% { transform: translateY(0) rotate(-2deg); } 33% { transform: translateY(-4px) rotate(0deg); } 66% { transform: translateY(2px) rotate(2deg); } }
@keyframes djImgGlacier { 0%,100% { transform: scale(1); filter: brightness(1.1); } 50% { transform: scale(1.03); filter: brightness(1.3); } }
@keyframes djImgSteel { 0%,100% { transform: rotate(0deg) skewX(0deg); } 50% { transform: rotate(3deg) skewX(2deg); } }
@keyframes djImgGraphite { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes djImgObsidian { 0%,100% { transform: scale(1); filter: brightness(0.85); } 50% { transform: scale(1.03); filter: brightness(1.05); } }
@keyframes djImgBronze { 0%,100% { transform: scale(1); filter: sepia(0.15); } 50% { transform: scale(1.05); filter: sepia(0.35); } }
@keyframes djImgPlatinum { 0%,100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.03); filter: brightness(1.35); } }
@keyframes djImgSilver { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@keyframes djImgCopper { 0%,100% { transform: scale(1); filter: sepia(0.2) saturate(1.1); } 50% { transform: scale(1.04); filter: sepia(0.4) saturate(1.3); } }
@keyframes djImgBumblebee { 0%,100% { transform: translate(0, 0); } 25% { transform: translate(2px, -2px); } 50% { transform: translate(-2px, 2px); } 75% { transform: translate(2px, 2px); } }
@keyframes djImgWatermelon { 0%,100% { transform: translateY(0) scale(1); } 30% { transform: translateY(-8px) scale(1.06); } 60% { transform: translateY(-3px) scale(0.98); } }
@keyframes djImgKiwi { 0%,100% { transform: scale(1); filter: saturate(1); } 40% { transform: scale(1.07); filter: saturate(1.6); } 70% { transform: scale(0.97); } }
@keyframes djImgBlueberry { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes djImgMojito { 0%,100% { transform: translateY(0) rotate(-2deg); filter: saturate(1); } 50% { transform: translateY(-4px) rotate(2deg); filter: saturate(1.4); } }
@keyframes djImgBubble { 0%,100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-8px); opacity: 0.8; } }
@keyframes djImgPrism { 0%,100% { transform: scale(1); filter: hue-rotate(0deg); } 50% { transform: scale(1.04); filter: hue-rotate(180deg); } }
@keyframes djImgPixel { 0%,100% { opacity: 1; transform: translateY(0); } 25% { opacity: 0.6; transform: translateY(-2px); } 50% { opacity: 1; transform: translateY(0); } 75% { opacity: 0.7; transform: translateY(2px); } }
@keyframes djImgGlitch { 0%,100% { transform: translate(0, 0); opacity: 1; } 20% { transform: translate(-3px, 2px); opacity: 0.85; } 40% { transform: translate(3px, -2px); opacity: 1; } 60% { transform: translate(-2px, -3px); opacity: 0.9; } 80% { transform: translate(2px, 3px); opacity: 1; } }
@keyframes djImgComet { 0%,100% { transform: scale(1); filter: brightness(1); } 30% { transform: scale(1.08); filter: brightness(1.3); } 60% { transform: scale(0.96); } }

.dj-style-classic #djOnAirImg { animation: djImgClassic 4s ease-in-out infinite; }
.dj-style-glass #djOnAirImg { animation: djImgGlass 4.5s ease-in-out infinite; }
.dj-style-neon #djOnAirImg { animation: djImgNeon 6s linear infinite; }
.dj-style-retro #djOnAirImg { animation: djImgRetro 3s ease-in-out infinite; }
.dj-style-golden #djOnAirImg { animation: djImgGolden 3.5s ease-in-out infinite; }
.dj-style-dark #djOnAirImg { animation: djImgDark 3.5s ease-in-out infinite; }
.dj-style-gradient #djOnAirImg { animation: djImgGradient 5s ease-in-out infinite; }
.dj-style-vapor #djOnAirImg { animation: djImgVapor 3.5s ease-in-out infinite; }
.dj-style-hologram #djOnAirImg { animation: djImgHologram 5s linear infinite; }
.dj-style-ocean #djOnAirImg { animation: djImgOcean 4s ease-in-out infinite; }
.dj-style-sunset #djOnAirImg { animation: djImgSunset 2.2s ease-in-out infinite; }
.dj-style-midnight #djOnAirImg { animation: djImgMidnight 3.5s ease-in-out infinite; }
.dj-style-aurora #djOnAirImg { animation: djImgAurora 8s ease-in-out infinite; }
.dj-style-coffee #djOnAirImg { animation: djImgCoffee 5s ease-in-out infinite; }
.dj-style-matrix #djOnAirImg { animation: djImgMatrix 2s linear infinite; }
.dj-style-space #djOnAirImg { animation: djImgSpace 12s linear infinite; }
.dj-style-mono #djOnAirImg { animation: djImgMono 4.5s ease-in-out infinite; }
.dj-style-flat #djOnAirImg { animation: djImgFlat 5s ease-in-out infinite; }
.dj-style-light #djOnAirImg { animation: djImgLight 4s ease-in-out infinite; }
.dj-style-bubblegum #djOnAirImg { animation: djImgBubblegum 2.5s ease-in-out infinite; }
.dj-style-fire #djOnAirImg { animation: djImgFire 1.6s linear infinite; }
.dj-style-ice #djOnAirImg { animation: djImgIce 2.1s ease-in-out infinite; }
.dj-style-royal #djOnAirImg { animation: djImgRoyal 3.2s ease-in-out infinite; }
.dj-style-forest #djOnAirImg { animation: djImgForest 6s ease-in-out infinite; }
.dj-style-disco #djOnAirImg { animation: djImgDisco 2.5s linear infinite; }
.dj-style-tropical #djOnAirImg { animation: djImgTropical 3s ease-in-out infinite; }
.dj-style-candy #djOnAirImg { animation: djImgCandy 2.8s ease-in-out infinite; }
.dj-style-cyber #djOnAirImg { animation: djImgCyber 1.9s linear infinite; }
.dj-style-emerald #djOnAirImg { animation: djImgEmerald 3.5s ease-in-out infinite; }
.dj-style-crimson #djOnAirImg { animation: djImgCrimson 1.5s ease-in-out infinite; }
.dj-style-rose #djOnAirImg { animation: djImgRose 3.2s ease-in-out infinite; }
.dj-style-sakura #djOnAirImg { animation: djImgSakura 3.5s ease-in-out infinite; }
.dj-style-lavender #djOnAirImg { animation: djImgLavender 4s ease-in-out infinite; }
.dj-style-mint #djOnAirImg { animation: djImgMint 3s ease-in-out infinite; }
.dj-style-peach #djOnAirImg { animation: djImgPeach 3.5s ease-in-out infinite; }
.dj-style-chocolate #djOnAirImg { animation: djImgChocolate 5s ease-in-out infinite; }
.dj-style-lemon #djOnAirImg { animation: djImgLemon 2.5s ease-in-out infinite; }
.dj-style-tangerine #djOnAirImg { animation: djImgTangerine 3s ease-in-out infinite; }
.dj-style-grape #djOnAirImg { animation: djImgGrape 4s ease-in-out infinite; }
.dj-style-berry #djOnAirImg { animation: djImgBerry 1.8s ease-in-out infinite; }
.dj-style-seafoam #djOnAirImg { animation: djImgSeafoam 3.2s ease-in-out infinite; }
.dj-style-lagoon #djOnAirImg { animation: djImgLagoon 4s ease-in-out infinite; }
.dj-style-glacier #djOnAirImg { animation: djImgGlacier 4.5s ease-in-out infinite; }
.dj-style-steel #djOnAirImg { animation: djImgSteel 3.5s ease-in-out infinite; }
.dj-style-graphite #djOnAirImg { animation: djImgGraphite 5s ease-in-out infinite; }
.dj-style-obsidian #djOnAirImg { animation: djImgObsidian 6s ease-in-out infinite; }
.dj-style-bronze #djOnAirImg { animation: djImgBronze 4s ease-in-out infinite; }
.dj-style-platinum #djOnAirImg { animation: djImgPlatinum 3s ease-in-out infinite; }
.dj-style-silver #djOnAirImg { animation: djImgSilver 5s ease-in-out infinite; }
.dj-style-copper #djOnAirImg { animation: djImgCopper 4.5s ease-in-out infinite; }
.dj-style-bumblebee #djOnAirImg { animation: djImgBumblebee 0.9s linear infinite; }
.dj-style-watermelon #djOnAirImg { animation: djImgWatermelon 2.5s ease-in-out infinite; }
.dj-style-kiwi #djOnAirImg { animation: djImgKiwi 2.5s ease-in-out infinite; }
.dj-style-blueberry #djOnAirImg { animation: djImgBlueberry 4s ease-in-out infinite; }
.dj-style-mojito #djOnAirImg { animation: djImgMojito 3.2s ease-in-out infinite; }
.dj-style-bubble #djOnAirImg { animation: djImgBubble 3.5s ease-in-out infinite; }
.dj-style-prism #djOnAirImg { animation: djImgPrism 5s ease-in-out infinite; }
.dj-style-pixel #djOnAirImg { animation: djImgPixel 2.2s steps(2, end) infinite; }
.dj-style-glitch #djOnAirImg { animation: djImgGlitch 1.6s steps(2, end) infinite; }
.dj-style-comet #djOnAirImg { animation: djImgComet 2.8s ease-in-out infinite; }