/* Bunklow Reel crossfade, rebuilt from ignite-show.tsx (approved 2026-10-18). LOCKED: do not restyle.
   Matches "Reel crossfade APPROVED 2026-10-18.mp4" (960 by 640). Fredoka everywhere. */
.bk-reel{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;border-radius:28px;background:#101e3c center/cover no-repeat;box-shadow:0 0 0 1px #fc800399,0 0 28px #fc800338;container-type:inline-size;font-family:Fredoka,ui-rounded,system-ui,sans-serif;color:#fff;isolation:isolate;text-align:left}
.bk-reel *{box-sizing:border-box}
.bk-reel .bk-beat,.bk-reel .bk-finale{position:absolute;inset:0;opacity:0;--reveal:0;--push:1;--line:0;--bars:0;--label:0}
.bk-reel:not(.is-play):not(.is-still) .bk-beat[data-i="0"]{opacity:1;--reveal:1;--label:1}
.bk-reel .bk-base,.bk-reel .bk-after{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(var(--push));transform-origin:50% 50%}
.bk-reel .bk-mask{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 calc((1 - var(--reveal)) * 100%) 0 0)}
.bk-reel .bk-line{position:absolute;top:0;bottom:0;left:calc(var(--reveal) * 100%);width:3px;margin-left:-1.5px;background:#fff6e5;box-shadow:0 0 12px #fc8003,0 0 2px #fff;opacity:var(--line);pointer-events:none}
.bk-reel .bk-tiles{position:absolute;left:0;right:0;top:44%;display:grid;grid-template-columns:repeat(4,1fr);pointer-events:none}
.bk-reel .bk-tiles span{display:block;text-align:center}
.bk-reel .bk-tiles b{display:block;font-weight:800;letter-spacing:.02em;color:#fff;text-shadow:0 1px 6px #0009;font-size:clamp(8px,1.7cqw,17px);line-height:1.15}
.bk-reel .bk-tag{position:absolute;bottom:2.2cqw;padding:.28em .8em;border-radius:999px;background:#0a1736d9;color:#fff;font-size:clamp(9px,1.4cqw,14px);font-weight:600}
.bk-reel .bk-tag.is-after{left:2.2cqw;opacity:min(1, calc(var(--reveal) * 3))}
.bk-reel .bk-tag.is-before{right:2.2cqw;opacity:calc(1 - var(--reveal) * .6)}
.bk-reel .bk-label{position:absolute;top:1.8cqw;left:1.8cqw;padding:.4em .95em;border-radius:999px;background:#0a1736;color:#fff;font-size:clamp(11px,1.7cqw,17px);font-weight:700;opacity:var(--label)}
.bk-reel .bk-letterbox::before,.bk-reel .bk-letterbox::after{content:"";position:absolute;left:0;right:0;height:calc(var(--bars) * 3.6%);background:#000}
.bk-reel .bk-letterbox::before{top:0}
.bk-reel .bk-letterbox::after{bottom:0}
.bk-reel .bk-eq{position:absolute;top:0;right:2.2cqw;display:flex;align-items:flex-start;gap:.6cqw;opacity:var(--bars)}
.bk-reel .bk-eq i{display:block;width:1.7cqw;height:5cqw;background:#fff;border-radius:0 0 3px 3px;animation:bkEq 900ms ease-in-out infinite alternate}
.bk-reel .bk-eq i:nth-child(2){animation-duration:700ms;animation-delay:-200ms}
.bk-reel .bk-eq i:nth-child(3){animation-duration:1100ms;animation-delay:-450ms}
.bk-reel .bk-eq i:nth-child(4){animation-duration:800ms;animation-delay:-100ms}
@keyframes bkEq{from{height:1.6cqw}to{height:5.4cqw}}
.bk-reel .bk-finale{display:none;flex-direction:column;justify-content:center;align-items:stretch;gap:1.2cqw;padding:0 1.2cqw;background:#101e3c}
.bk-reel .bk-finale.is-live,.bk-reel.is-still .bk-finale{display:flex}
.bk-reel.is-still .bk-beat{display:none}
.bk-reel.is-still .bk-finale{opacity:1}
.bk-reel .bk-title{margin:0 0 .4cqw;text-align:center;font-weight:600;font-size:clamp(14px,2.2cqw,24px);line-height:1.15}
.bk-reel .bk-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:1cqw}
.bk-reel .bk-chip,.bk-reel .bk-go{display:flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid #2cc9c9;background:linear-gradient(#27a5ab,#1b7e8a);color:#fff;text-decoration:none;font-weight:700;box-shadow:0 0 14px #2cc9c955,inset 0 1px 0 #ffffff40}
.bk-reel .bk-chip{min-height:clamp(28px,3.6cqw,38px);font-size:clamp(11px,1.4cqw,15px)}
.bk-reel .bk-go{min-height:clamp(32px,4cqw,42px);font-size:clamp(13px,1.6cqw,17px)}
.bk-reel .bk-chip:focus-visible,.bk-reel .bk-go:focus-visible{outline:3px solid #fc8003;outline-offset:2px}
.bk-reel .bk-price{margin:.4cqw 0 0;text-align:center;font-weight:600;font-size:clamp(11px,1.5cqw,16px)}
@container (max-width:560px){
  .bk-reel .bk-chips{grid-template-columns:1fr 1fr;gap:6px}
  .bk-reel .bk-chip{min-height:44px;font-size:14px}
  .bk-reel .bk-go{min-height:44px;font-size:16px}
  .bk-reel .bk-title{font-size:17px}
  .bk-reel .bk-price{font-size:13px}
  .bk-reel .bk-finale{gap:8px;padding:0 12px}
  .bk-reel .bk-label{font-size:12px;top:10px;left:10px}
  .bk-reel .bk-tag{font-size:10px;bottom:10px}
  .bk-reel .bk-tag.is-after{left:10px}
  .bk-reel .bk-tag.is-before{right:10px}
  .bk-reel .bk-tiles b{font-size:9px}
}
@media (max-width:560px){.bk-reel{aspect-ratio:1/1;border-radius:24px}}
.bk-reel-wrap{width:100%}
.bk-reel .sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}