.mixer-showcase{position:relative;min-height:370px;margin:-5px 0 34px;display:grid;grid-template-columns:minmax(250px,.72fr) minmax(560px,1.45fr);align-items:center;overflow:hidden;border-radius:26px;background:linear-gradient(125deg,#171813 0%,#22231d 48%,#12130f 100%);box-shadow:0 24px 70px rgba(24,25,19,.18);isolation:isolate}
.mixer-showcase:before{content:"";position:absolute;width:420px;height:420px;left:-190px;bottom:-300px;border-radius:50%;background:var(--acid);filter:blur(5px);opacity:.18}
.mixer-showcase:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(90deg,#000,transparent 78%);pointer-events:none}
.mixer-copy{position:relative;z-index:5;padding:46px 0 46px 44px;color:white}.mixer-kicker{display:flex;align-items:center;gap:9px;font:700 10px "Manrope";letter-spacing:.18em;color:#cdd0c1}.mixer-kicker i{width:7px;height:7px;border-radius:50%;background:#ff5a36;box-shadow:0 0 0 5px rgba(255,90,54,.12);animation:livePulse 1.5s ease-in-out infinite}.mixer-copy h3{font:800 clamp(29px,3.2vw,43px)/1.02 "Manrope";letter-spacing:-.055em;margin:18px 0 17px}.mixer-copy h3 em{font-style:normal;color:var(--acid)}.mixer-copy p{max-width:315px;margin:0;color:#afb1a7;font-size:14px;line-height:1.55}
.mixer-stage{position:relative;z-index:2;width:100%;aspect-ratio:1672/939;align-self:center}.mixer-artwork{position:absolute;width:100%;height:100%;inset:0;display:block}.mixer-drum{position:absolute;z-index:4;left:41.3%;top:23.6%;width:21.6%;aspect-ratio:1;border-radius:50%;overflow:hidden;transform:rotate(-5deg);filter:drop-shadow(0 0 13px rgba(255,71,25,.52));clip-path:circle(46% at 50% 50%)}.drum-spiral{position:absolute;inset:-13%;border-radius:50%;background:repeating-conic-gradient(from 8deg,#ff3b18 0 13deg,#ff8a27 13deg 24deg,#3b0903 24deg 39deg);animation:drumSpin 2.4s linear infinite}.drum-spiral:after{content:"";position:absolute;inset:15%;border-radius:50%;background:repeating-conic-gradient(from 0deg,#ffcc3f 0 9deg,#e72e0b 9deg 23deg,#170502 23deg 34deg);box-shadow:inset 0 0 34px #090201}.drum-core{position:absolute;z-index:2;inset:39%;border-radius:50%;background:#fff3a1;box-shadow:0 0 16px 8px #ff6029,0 0 38px 14px rgba(255,40,0,.78)}
.mixer-flames{position:absolute;z-index:5;left:53.2%;top:24%;width:18%;height:26%;transform:rotate(74deg);transform-origin:left center;filter:drop-shadow(0 0 8px rgba(255,75,15,.76))}.flame{position:absolute;left:0;bottom:40%;width:72%;height:25%;border-radius:50% 85% 55% 50%;background:linear-gradient(90deg,#fff6a1 0 12%,#ffbd28 28%,#ff4a14 70%,transparent);transform-origin:left center;animation:flameFlicker .32s ease-in-out infinite alternate}.flame-two{width:100%;height:32%;bottom:25%;animation-delay:-.11s}.flame-three{width:82%;height:22%;bottom:8%;animation-delay:-.24s}.flame-four{width:62%;height:18%;bottom:60%;animation-delay:-.17s}.heat-spark{position:absolute;z-index:6;width:5px;height:5px;border-radius:50%;background:#ffd63e;box-shadow:0 0 9px #ff4918;animation:sparkFly 1.35s ease-out infinite}.spark-one{left:66%;top:24%}.spark-two{left:70%;top:31%;animation-delay:-.55s}.spark-three{left:63%;top:17%;animation-delay:-.95s}
@keyframes drumSpin{to{transform:rotate(360deg)}}@keyframes flameFlicker{to{transform:scaleX(.8) scaleY(1.3) rotate(5deg);opacity:.82}}@keyframes sparkFly{0%{transform:translate(0,0) scale(1);opacity:0}20%{opacity:1}100%{transform:translate(52px,-48px) scale(0);opacity:0}}@keyframes livePulse{50%{opacity:.45;transform:scale(.75)}}
@media(max-width:850px){.mixer-showcase{grid-template-columns:1fr}.mixer-copy{padding:36px 34px 0;text-align:center}.mixer-copy p{margin:auto}.mixer-kicker{justify-content:center}.mixer-showcase:after{mask-image:linear-gradient(#000,transparent)}}
@media(max-width:560px){.mixer-showcase{border-radius:20px}.mixer-copy{padding:30px 22px 0}.mixer-stage{width:calc(100% + 80px);margin:0 -40px}.mixer-copy h3{font-size:30px}.mixer-flames{display:none}}
.mixer-barrel{position:absolute;z-index:3;left:34.3%;top:22.2%;width:30.2%;aspect-ratio:1;border-radius:50%;background-image:url('images/mjesalica-bass.png');background-repeat:no-repeat;background-size:331.1% auto;background-position:50.3% 47.8%;clip-path:circle(48.5%);transform-origin:50% 50%;animation:barrelRoll 3.8s linear infinite;filter:drop-shadow(0 5px 8px rgba(63,8,0,.35))}.mixer-drum{z-index:4;clip-path:circle(43.5% at 50% 50%);box-shadow:inset 0 0 22px #1a0200}.drum-spiral{inset:0;background:radial-gradient(circle at 42% 43%,#ffca38 0 5%,#ff5a18 11%,#661005 30%,#210200 60%,#080000 100%);animation:fireBreathe .7s ease-in-out infinite alternate}.drum-spiral:after{inset:17%;background:conic-gradient(from 30deg,transparent,#ff9b20,transparent 22%,#ff4318 38%,transparent 55%,#ffbd2e 78%,transparent);box-shadow:none;animation:emberRoll 1.15s linear infinite}.drum-core{inset:41%;animation:coreBeat .7s ease-in-out infinite alternate}
.bass-cone{position:absolute;z-index:5;top:57.2%;width:10.5%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,92,25,.38);box-shadow:0 0 0 0 rgba(255,73,20,.42),inset 0 0 14px rgba(255,66,10,.26);animation:bassHit .72s cubic-bezier(.2,.7,.2,1) infinite}.bass-cone:before,.bass-cone:after{content:"";position:absolute;inset:-8%;border:2px solid rgba(255,103,35,.42);border-radius:50%;animation:bassWave 1.44s ease-out infinite}.bass-cone:after{animation-delay:-.72s}.bass-cone i{position:absolute;inset:35%;border-radius:50%;background:rgba(255,73,18,.32);box-shadow:0 0 18px #ff4b16;animation:coneBeat .36s ease-out infinite alternate}.bass-left{left:4.6%}.bass-right{right:4.4%;animation-delay:-.36s}.bass-right:before,.bass-right:after,.bass-right i{animation-delay:-.36s}
@keyframes barrelRoll{to{transform:rotate(360deg)}}@keyframes emberRoll{to{transform:rotate(-360deg)}}@keyframes fireBreathe{to{filter:brightness(1.35) saturate(1.2)}}@keyframes coreBeat{to{transform:scale(1.22);box-shadow:0 0 22px 11px #ff6029,0 0 45px 18px rgba(255,40,0,.82)}}@keyframes bassHit{15%{transform:scale(1.075);box-shadow:0 0 0 12px rgba(255,73,20,0),inset 0 0 22px rgba(255,87,16,.48)}100%{transform:scale(1)}}@keyframes bassWave{0%{transform:scale(.7);opacity:.7}100%{transform:scale(1.55);opacity:0}}@keyframes coneBeat{to{transform:scale(1.3);filter:brightness(1.4)}}
.mixer-stage-3d{overflow:hidden;min-height:390px}.sketchfab-wrap{position:absolute;z-index:1;inset:2% 8% 4%;border-radius:24px;overflow:hidden;background:radial-gradient(circle at 50% 60%,#36392d,#11120f 67%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 20px 45px rgba(0,0,0,.28)}.sketchfab-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.stage-person{position:absolute;z-index:3;bottom:-8%;height:91%;width:auto;pointer-events:none;filter:drop-shadow(0 14px 20px rgba(0,0,0,.58))}.stage-selma{left:-5%}.stage-harmonikas{right:-7%;height:94%}.drag-hint{position:absolute;z-index:5;top:14px;left:50%;transform:translateX(-50%);padding:7px 10px;border-radius:99px;background:rgba(18,19,15,.72);backdrop-filter:blur(8px);color:#dfff43;font:700 8px "Manrope";letter-spacing:.14em;pointer-events:none}.model-credit{position:absolute;z-index:8;right:10%;bottom:5%;color:rgba(255,255,255,.62);font-size:7px;text-decoration:none;background:rgba(0,0,0,.48);padding:5px 7px;border-radius:6px}.model-credit:hover{color:white}
.subwoofer{position:absolute;z-index:2;bottom:3%;width:16%;aspect-ratio:.82;border-radius:8px;background:linear-gradient(145deg,#292b28,#080908);border:2px solid #3f423c;box-shadow:0 12px 28px rgba(0,0,0,.6),inset 0 0 0 5px #111;pointer-events:none}.subwoofer:before{content:"";position:absolute;left:12%;right:12%;top:18%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#ff5a20 0 8%,#431109 10%,#101210 30%,#020302 55%,#2d302c 57%,#080908 71%);border:2px solid #454943;box-shadow:0 0 18px rgba(255,66,14,.34);animation:wooferPunch .62s ease-out infinite}.subwoofer:after{content:"";position:absolute;inset:10%;border:2px solid rgba(223,255,67,.24);border-radius:50%;animation:soundWave 1.24s ease-out infinite}.subwoofer i{position:absolute;left:43%;top:41%;width:14%;aspect-ratio:1;border-radius:50%;background:#ff5720;z-index:2;box-shadow:0 0 15px #ff3914;animation:wooferCore .31s ease-in-out infinite alternate}.sub-left{left:1%}.sub-right{right:1%}.sub-right:before,.sub-right:after,.sub-right i{animation-delay:-.31s}
.viewer-fire{position:absolute;z-index:4;left:43%;bottom:3%;width:20%;height:30%;pointer-events:none;filter:drop-shadow(0 0 12px #ff3b0b)}.viewer-fire i{position:absolute;bottom:0;left:28%;width:32%;height:90%;border-radius:70% 30% 64% 36%;background:linear-gradient(0deg,#fff19b,#ffb41f 35%,#ff4512 70%,transparent);transform-origin:50% 100%;animation:viewerFlame .38s ease-in-out infinite alternate}.viewer-fire i:nth-child(2){left:5%;height:65%;animation-delay:-.16s}.viewer-fire i:nth-child(3){left:58%;height:73%;animation-delay:-.27s}.viewer-fire i:nth-child(4){left:40%;height:52%;filter:brightness(1.4);animation-delay:-.09s}
@keyframes wooferPunch{15%{transform:scale(1.1);filter:brightness(1.35)}100%{transform:scale(1)}}@keyframes wooferCore{to{transform:scale(1.4)}}@keyframes soundWave{0%{transform:scale(.5);opacity:.8}100%{transform:scale(1.7);opacity:0}}@keyframes viewerFlame{to{transform:scaleX(.7) scaleY(1.18) rotate(7deg);opacity:.76}}
@media(max-width:850px){.mixer-stage-3d{min-height:480px}.sketchfab-wrap{inset:4% 2% 3%}.stage-selma{left:-2%;height:82%}.stage-harmonikas{right:-4%;height:84%}.model-credit{right:4%}}
@media(max-width:560px){.mixer-stage-3d{width:100%;margin:0;min-height:330px}.sketchfab-wrap{inset:2% 0}.stage-person{height:72%;opacity:.9}.stage-selma{left:-12%}.stage-harmonikas{right:-13%;height:75%}.subwoofer{width:19%}.viewer-fire{left:40%;width:24%}.drag-hint{top:8px;white-space:nowrap}.model-credit{font-size:6px;right:2%;bottom:3%}}
@media(prefers-reduced-motion:reduce){.mixer-barrel,.drum-spiral,.drum-spiral:after,.drum-core,.bass-cone,.bass-cone:before,.bass-cone:after,.bass-cone i,.subwoofer:before,.subwoofer:after,.subwoofer i,.viewer-fire i,.flame,.heat-spark,.mixer-kicker i{animation:none!important}.mixer-flames{opacity:.75}}

/* Precizno poravnat rotirajući obod bubnja; unutrašnja vatra ostaje nezavisna. */
.mixer-barrel{z-index:4;left:40.6%;top:22.3%;width:23%;aspect-ratio:1;background-image:none;background:repeating-conic-gradient(from 4deg,#ffd0a7 0 1.4deg,#8d1b0b 1.4deg 3deg,transparent 3deg 29deg),radial-gradient(circle,transparent 0 61%,#5b0b04 62% 66%,#ff6a39 67% 72%,#7d1008 73% 78%,transparent 79%);border-radius:50%;clip-path:circle(49%);filter:drop-shadow(0 0 9px rgba(255,62,17,.42));animation:barrelRoll 6s linear infinite;pointer-events:none}.mixer-barrel:after{content:"";position:absolute;inset:8%;border-radius:50%;border:2px solid rgba(255,198,159,.5);box-shadow:inset 0 0 10px rgba(52,4,0,.85),0 0 5px rgba(255,91,47,.55)}
.mixer-drum{z-index:5;left:41.3%;top:23.6%;width:21.6%;clip-path:circle(40.5% at 50% 50%);filter:drop-shadow(0 0 8px rgba(255,74,22,.38));box-shadow:inset 0 0 28px #080000}.drum-spiral{animation:fireBreathe .9s ease-in-out infinite alternate}.drum-spiral:after{animation:emberRoll 2.2s linear infinite;opacity:.78}.drum-core{inset:43%;box-shadow:0 0 12px 5px #ff6029,0 0 27px 10px rgba(255,40,0,.66)}