/* Before / After: one cassette player (dark panel in both themes). Side A = before, side B = after; 4 examples = 8 tracks, no titles */
#before-after.ba-section{padding-top:clamp(40px,6vh,80px);margin:0 auto}
.bap{--c1:#5ec8ff;--c2:#1d5fd1;--glow:rgba(94,200,255,.55);--p:0;position:relative;max-width:800px;margin:0 auto;padding:clamp(20px,3vw,34px);border-radius:30px;display:flex;flex-direction:column;gap:clamp(18px,2.6vw,28px);overflow:hidden;color:#eaf1ff;
  background:radial-gradient(120% 90% at 50% -10%,rgba(40,90,200,.34),transparent 60%),linear-gradient(165deg,#0e1a38 0%,#080f24 55%,#0b1431 100%);
  border:1px solid rgba(120,170,255,.22);box-shadow:0 30px 70px -20px rgba(5,12,40,.65),0 0 0 1px rgba(255,255,255,.03) inset,0 1px 0 rgba(255,255,255,.12) inset;transition:box-shadow .5s}
.bap[data-state="before"]{--c1:#c9c9d6;--c2:#7b7b8c;--glow:rgba(200,200,215,.32)}
.bap::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/100% 28px,linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/28px 100%;-webkit-mask:radial-gradient(70% 60% at 50% 45%,#000,transparent);mask:radial-gradient(70% 60% at 50% 45%,#000,transparent);opacity:.7}
.bap.is-playing{box-shadow:0 30px 80px -20px rgba(5,12,40,.7),0 0 60px -10px var(--glow),0 1px 0 rgba(255,255,255,.12) inset}
.bap>*{position:relative}
.bap-top{display:flex;align-items:center;justify-content:center;gap:14px}
.bap-led{width:10px;height:10px;border-radius:50%;background:var(--ks-blue);box-shadow:0 0 12px 2px rgba(255,179,71,.8);transition:background .3s,box-shadow .3s}
.bap[data-state="after"] .bap-led{background:#5ec8ff;box-shadow:0 0 14px 3px rgba(94,200,255,.9)}
.bap-switch{position:relative;display:grid;grid-template-columns:1fr 1fr;width:min(340px,100%);padding:5px;border-radius:999px;background:rgba(2,6,20,.7);border:1px solid rgba(120,170,255,.2);box-shadow:inset 0 2px 8px rgba(0,0,0,.5)}
.bap-sw{position:relative;z-index:1;border:0;background:none;cursor:pointer;padding:12px 10px;border-radius:999px;font:800 13px/1 Lato,Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(220,232,255,.55);transition:color .3s}
.bap-sw.on{color:#fff}
.bap-thumb{position:absolute;z-index:0;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:linear-gradient(135deg,#7a7a8c,#4d4d5c);box-shadow:0 6px 20px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .42s cubic-bezier(.3,1.35,.5,1),background .35s,box-shadow .35s}
.bap[data-state="after"] .bap-thumb{transform:translateX(100%);background:linear-gradient(135deg,#3f8bff,#1d5fd1);box-shadow:0 6px 24px rgba(29,95,209,.6),inset 0 1px 0 rgba(255,255,255,.35)}
.bap-wave{position:relative;display:flex;align-items:center;gap:3px;height:clamp(120px,19vw,170px);cursor:pointer;touch-action:none;user-select:none;outline-offset:8px}
.bap-wave i.b{flex:1;min-width:2px;height:var(--h,30%);border-radius:99px;background:rgba(190,210,255,.18);transition:height .5s cubic-bezier(.3,1.25,.5,1),background .25s,box-shadow .25s,transform .2s;-webkit-box-reflect:below 3px linear-gradient(transparent 55%,rgba(255,255,255,.16))}
.bap-wave i.b.on{background:linear-gradient(180deg,var(--c1),var(--c2));box-shadow:0 0 12px -1px var(--glow)}
.bap.is-playing .bap-wave i.b.on{animation:bapBeat .85s ease-in-out infinite}
.bap.is-playing .bap-wave i.b.on:nth-child(3n){animation-delay:.14s}.bap.is-playing .bap-wave i.b.on:nth-child(3n+1){animation-delay:.28s}
@keyframes bapBeat{50%{transform:scaleY(.8)}}
.bap-ph{position:absolute;top:-6px;bottom:-6px;left:calc(var(--p)*100%);width:2px;margin-left:-1px;border-radius:2px;background:#fff;box-shadow:0 0 14px 3px var(--glow);pointer-events:none;opacity:.9}
.bap-ph::before{content:"";position:absolute;top:-5px;left:-4px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 10px 2px var(--glow)}
.bap-ctrl{display:flex;align-items:center;gap:clamp(14px,2.4vw,24px);flex-wrap:wrap;margin-top:6px}
.bap-play{position:relative;flex:none;width:76px;height:76px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;color:#fff;background:radial-gradient(circle at 30% 25%,var(--c1),var(--c2));box-shadow:0 12px 30px -6px var(--glow),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .2s}
.bap[data-state="before"] .bap-play{color:#14141c}
.bap-play:hover{transform:scale(1.06)}.bap-play:active{transform:scale(.95)}
.bap-play svg.ic{width:26px;height:26px;position:relative;z-index:1}.bap-play .ic-pause{display:none}.bap.is-playing .ic-play{display:none}.bap.is-playing .ic-pause{display:block}
.bap-ring{position:absolute;inset:-7px;width:calc(100% + 14px);height:calc(100% + 14px);transform:rotate(-90deg);pointer-events:none}
.bap-ring circle{fill:none;stroke-width:3;stroke-linecap:round}
.bap-ring .tr{stroke:rgba(190,210,255,.16)}.bap-ring .pr{stroke:var(--c1);stroke-dasharray:calc(var(--p)*100) 100;filter:drop-shadow(0 0 4px var(--glow))}
.bap.is-playing .bap-play::after{content:"";position:absolute;inset:-2px;border-radius:50%;box-shadow:0 0 0 0 var(--glow);animation:bapPulse 1.8s ease-out infinite}
@keyframes bapPulse{to{box-shadow:0 0 0 22px rgba(0,0,0,0)}}
.bap-time{font:800 18px/1 Lato,Arial,sans-serif;color:rgba(220,232,255,.55);min-width:104px;font-variant-numeric:tabular-nums;letter-spacing:.04em}.bap-time b{color:#fff;font-size:24px}
.bap-tracks{display:flex;flex-direction:column;gap:8px;padding:8px;border-radius:24px;background:rgba(2,6,20,.6);border:1px solid rgba(120,170,255,.16)}
.bap-tr{width:44px;height:44px;border-radius:50%;cursor:pointer;border:0;background:transparent;color:rgba(220,232,255,.6);font:800 16px/1 Lato,Arial,sans-serif;transition:transform .2s,background .3s,color .3s,box-shadow .3s}
.bap-tr:hover{transform:translateY(-2px);color:#fff}
.bap-tr.on{color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 0 18px -2px var(--glow)}
.bap[data-state="before"] .bap-tr.on{color:#14141c}
.bap.soon .bap-time{opacity:.75}
@media(max-width:560px){.bap{border-radius:24px}.bap-play{width:66px;height:66px}.bap-wave{gap:2px}.bap-time b{font-size:21px}.bap-tr{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){.bap *{animation:none!important;transition:none!important}}

.bap-stage{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(12px,2.2vw,26px);align-items:center}
.bap-deck{perspective:1100px;min-width:0}
.bap-cas{display:block;width:100%;max-width:540px;margin:0 auto;filter:drop-shadow(0 22px 28px rgba(0,0,0,.6));transform-style:preserve-3d}
.bap-deck.flip .bap-cas{animation:bapFlip .75s cubic-bezier(.4,.1,.2,1)}
@keyframes bapFlip{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}
.bap-cas .band{fill:#8d8d9c;transition:fill .4s}.bap[data-state="after"] .bap-cas .band{fill:url(#bapGrad)}
.bap-cas .spokes{transform-box:fill-box;transform-origin:50% 50%;animation:bapSpin 2.4s linear infinite;animation-play-state:paused}
.bap.is-playing .bap-cas .spokes{animation-play-state:running}
@keyframes bapSpin{to{transform:rotate(360deg)}}
.bap-cas .pk{transform-box:fill-box;transform-origin:50% 50%;transition:transform .3s linear}
.bap-cas .pk-l{transform:scale(calc(1 - .58*var(--p)))}.bap-cas .pk-r{transform:scale(calc(.42 + .58*var(--p)))}
.bap-cas .tapeline{stroke:#3a2a22;stroke-width:3;fill:none}
.bap-cas .glint{fill:rgba(255,255,255,.1)}
@media(max-width:560px){.bap-stage{grid-template-columns:minmax(0,1fr) auto;gap:10px}}

/* compact version: shorter panel */
.bap{padding:clamp(14px,2vw,22px);gap:clamp(10px,1.4vw,16px)}
.bap-cas{max-width:290px}
.bap-wave{height:clamp(56px,8vw,76px);gap:2px}
.bap-wave i.b{-webkit-box-reflect:unset}
.bap-ph{top:-3px;bottom:-3px}
.bap-ctrl{margin-top:0;gap:clamp(12px,2vw,18px)}
.bap-play{width:56px;height:56px}.bap-play svg.ic{width:20px;height:20px}
.bap-ring{inset:-5px;width:calc(100% + 10px);height:calc(100% + 10px)}
.bap-time b{font-size:20px}.bap-time{font-size:15px}
.bap-sw{padding:10px 10px}.bap-switch{width:min(300px,100%)}
.bap-tracks{gap:6px;padding:7px}.bap-tr{width:38px;height:38px;font-size:15px}
.bap-stage{grid-template-columns:minmax(0,1fr) auto;justify-content:center}
@media(min-width:700px){.bap-stage{grid-template-columns:auto auto;gap:28px}}
@media(max-width:560px){.bap-play{width:52px;height:52px}.bap-tr{width:34px;height:34px;font-size:14px}.bap-cas{max-width:240px}}