/* Citizen Activate · Brunch & Learn street scene · the jukebox (an addition only)
   Ported from the jukebox reference build (scene-jukebox-staff.html): the jukebox,
   its music, the musical ribbon, the bald eagle and the restaurant windows dimming.
   Every rule here targets only the new elements (.jb*, .eg*) or waits behind the
   new .is-music / .jb-dimfx classes, so nothing in the scene changes until the
   jukebox is tapped. The elements themselves are added by js/scene-jukebox.js. */

/* ---- the jukebox, standing just right of "Pause Capitol View" (placed by the script) ---- */
.ca-br .jb-wrap{position:absolute;z-index:2;left:0;bottom:0}
.ca-br .jb{display:block;width:clamp(46px,5vw,68px);aspect-ratio:72/118;margin:0;padding:0;border:0;border-radius:3px;background:none;cursor:pointer;transition:translate .2s}
.ca-br .jb:hover{translate:0 -2px}
.ca-br .jb:focus-visible{outline:3px solid #D1952B;outline-offset:3px}
.ca-br .jb-art{display:block;width:100%;height:100%;overflow:visible}
.ca-br .jb-arc{opacity:.6}
.ca-br.is-music .jb-arc{opacity:1;animation:jb-glow .536s ease-in-out infinite alternate}   /* on the beat at 112 bpm */
.ca-br.is-music .jb-arc.a2{animation-delay:-.268s}
@keyframes jb-glow{to{opacity:.4}}
.ca-br .jb-rec{transform-box:fill-box;transform-origin:50% 50%}
.ca-br.is-music .jb-rec{animation:jb-spin 1.6s linear infinite}
@keyframes jb-spin{to{rotate:360deg}}
.ca-br.is-music .jb{animation:jb-bob .536s ease-in-out infinite alternate}
@keyframes jb-bob{to{translate:0 -2px}}

/* the tip: paper, navy-700 type (14.96:1), a gold keyline */
.ca-br .jb-tip{position:absolute;left:50%;bottom:calc(100% + 24px);translate:-50% 0;padding:.3rem .55rem;border-radius:3px;background:#F8F8F8;color:#02204F;white-space:nowrap;pointer-events:none;
  font-family:var(--font-accent,'Barlow Condensed','Arial Narrow',sans-serif);font-weight:700;font-size:.75rem;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 0 0 2px #D1952B,0 6px 14px -6px rgba(0,0,0,.6);opacity:0;transition:opacity .2s}
.ca-br .jb-tip::after{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;translate:-50% 0;rotate:45deg;background:#F8F8F8;box-shadow:2px 2px 0 0 #D1952B}
/* where the pause button sits at the top (phones), the tip hangs below the jukebox instead */
.ca-br .jb-wrap.is-tip-below .jb-tip{bottom:auto;top:calc(100% + 24px)}
.ca-br .jb-wrap.is-tip-below .jb-tip::after{bottom:auto;top:-6px;box-shadow:-2px -2px 0 0 #D1952B}
.ca-br .jb-tip.is-hint,.ca-br .jb:hover+.jb-tip,.ca-br .jb:focus-visible+.jb-tip{opacity:1}
/* while the music plays, "Tap to stop" stays up, to the right of the jukebox, clear of the ribbon
   (the script falls back to above/below where the frame is too narrow for it) */
.ca-br.is-music .jb-wrap .jb-tip{opacity:1}
.ca-br .jb-wrap.is-tip-side .jb-tip{left:calc(100% + 24px);top:50%;bottom:auto;translate:0 -50%}
.ca-br .jb-wrap.is-tip-side .jb-tip::after{left:-6px;top:50%;bottom:auto;translate:0 -50%;box-shadow:-2px 2px 0 0 #D1952B}
.ca-br .jb-tip.is-hint{animation:jb-hint 2.4s ease-in-out 3}
@keyframes jb-hint{50%{translate:-50% -4px}}
.ca-br .jb-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- the musical ribbon: a five-line staff waving from the jukebox's crown ---- */
.ca-br .jb-fx{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.ca-br .jb-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ca-br .jb-ribbon{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ca-br .jb-ribbon path{fill:none;stroke:#E8C267;stroke-width:1.5;stroke-linecap:round;opacity:.85;stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.ca-br .jb-ribbon path.is-mid{stroke:#F8F8F8}
.ca-br.is-music .jb-ribbon.is-drawn path{stroke-dashoffset:0}
/* the staff unfurls slowly from the jukebox (6s, linear, so the stars light as it reaches them);
   an animation rather than a transition, so the scene's Pause holds it */
.ca-br.is-music .jb-ribbon.is-drawn path{animation:jb-draw 6s linear both}
@keyframes jb-draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
.ca-br .jb-note{position:absolute;left:0;top:0;width:var(--s,26px);height:var(--s,26px);margin:calc(var(--s,26px) / -2) 0 0 calc(var(--s,26px) / -2);will-change:transform,opacity}
.ca-br .jb-note svg{display:block;width:100%;height:100%;overflow:visible;fill:var(--c);stroke:#01132F;stroke-width:1px;paint-order:stroke}
.ca-br .jb-rstar{fill:#E8C267;stroke:#01132F;stroke-width:.9px;paint-order:stroke;filter:drop-shadow(0 0 4px rgba(232,194,103,.8));opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.ca-br .jb-rstar.is-big{fill:#F8F8F8}
/* each star fades in (.8s) as the staff reaches it, then twinkles slowly */
.ca-br.is-music .jb-ribbon.is-drawn .jb-rstar{animation:jb-star-in .8s ease var(--sd) both,jb-twinkle var(--tw) ease-in-out calc(var(--sd) + .8s) infinite alternate}
@keyframes jb-star-in{from{opacity:0}to{opacity:1}}
@keyframes jb-twinkle{0%{opacity:1;transform:scale(.7) rotate(0deg)}40%{opacity:1;transform:scale(1)}100%{opacity:.75;transform:scale(.88) rotate(12deg)}}

/* ---- the Detroit Cowboy's upstairs windows dim while the music plays ---- */
.ca-br.jb-dimfx .br-win.br-win--resto{transition:fill 2.6s ease var(--d,0s),fill-opacity 2.6s ease var(--d,0s)}
.ca-br.is-music .br-win.br-win--resto{fill:#1E3560;fill-opacity:1}

/* ---- the bald eagle: arrives with the music, follows the pointer, lands where you click ---- */
.ca-br .eg{position:absolute;z-index:3;left:0;top:0;width:0;height:0;--egw:clamp(92px,10.5vw,156px);pointer-events:none;opacity:0;transition:opacity .6s;will-change:transform}
.ca-br.is-music .eg.is-on{opacity:1}
.ca-br .eg-art{position:absolute;left:calc(var(--egw) / -2);top:calc(var(--egw) * -.265);width:var(--egw);height:auto;overflow:visible;filter:drop-shadow(0 6px 6px rgba(1,19,47,.35));
  transform:rotate(var(--bank,0deg));transition:transform .25s}
.ca-br .eg.is-left .eg-art{transform:scaleX(-1) rotate(var(--bank,0deg))}
.ca-br .eg-perch{position:absolute;left:calc(var(--egw) * -.2);bottom:0;width:calc(var(--egw) * .4);height:auto;overflow:visible;display:none;filter:drop-shadow(0 4px 4px rgba(1,19,47,.35));transform-origin:50% 100%}
.ca-br .eg.is-left .eg-perch{transform:scaleX(-1)}
.ca-br .eg.is-perched .eg-art{display:none}
.ca-br .eg.is-perched .eg-perch{display:block;animation:eg-land .45s cubic-bezier(.3,1.6,.5,1)}
.ca-br .eg.is-left.is-perched .eg-perch{animation-name:eg-land-l}
@keyframes eg-land{0%{transform:translateY(-6px) scaleY(.85)}100%{transform:none}}
@keyframes eg-land-l{0%{transform:scaleX(-1) translateY(-6px) scaleY(.85)}100%{transform:scaleX(-1)}}
/* the anchor is zero-width on purpose; the site caps svg at max-width:100%, which would shrink the eagle to nothing */
.ca-br .eg-art,.ca-br .eg-perch{max-width:none}
.ca-br .eg-wing{transform-box:view-box;transform-origin:0 0}
.ca-br.is-music .eg-wing{animation:eg-flap var(--flap,.72s) ease-in-out infinite alternate}
.ca-br.is-music .eg-wing-back{animation-delay:-.05s}
@keyframes eg-flap{0%{transform:rotate(-14deg) scaleY(1.04)}100%{transform:rotate(32deg) scaleY(.94)}}
.ca-br .eg.is-glide .eg-wing{animation-play-state:paused}
/* the one-time hint: paper ground, navy-700 type (14.96:1), a gold keyline */
.ca-br .eg-hint{position:absolute;z-index:5;left:50%;top:clamp(.6rem,1.6vw,1.1rem);translate:-50% -6px;padding:.3rem .65rem;border-radius:3px;background:#F8F8F8;color:#02204F;white-space:nowrap;pointer-events:none;
  font-family:var(--font-accent,'Barlow Condensed','Arial Narrow',sans-serif);font-weight:600;font-size:.75rem;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 0 0 1.5px #D1952B,0 6px 14px -6px rgba(0,0,0,.6);opacity:0;transition:opacity .4s,translate .4s}
.ca-br .eg-hint.is-on{opacity:1;translate:-50% 0}

/* ---- phones: the jukebox stands on the sidewalk and pans with the street; its music
   control joins Pause in the row under the scene (the tip gives way to that button) ---- */
.ca-br .jb-ctl{display:none}
@media (max-width:760px){
  .ca-br .jb-wrap.is-street .jb-tip{display:none}
  .ca-br .jb-ctl{position:absolute;z-index:2;top:calc(100% + .75rem);left:1rem;display:inline-flex;align-items:center;gap:.5rem;min-height:44px;margin:0;padding:0 1rem 0 .85rem;
    background:var(--br-navy-900,#01132F);border:2px solid var(--br-gold-500,#D1952B);border-radius:3px;box-shadow:0 0 0 2px var(--br-paper,#F8F8F8),0 6px 16px -6px rgba(0,0,0,.55);
    color:var(--br-paper,#F8F8F8);font-family:var(--br-accent,'Barlow Condensed','Arial Narrow',sans-serif);font-weight:600;font-size:.875rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}   /* paper on navy-900 17.41 */
  .ca-br .jb-ctl:hover{background:var(--br-navy-700,#02204F)}
  .ca-br .jb-ctl:focus-visible{outline:3px solid #D1952B;outline-offset:3px}
  .ca-br .jb-ctl-ico{color:var(--br-gold-300,#E8C267);font-size:1rem;line-height:1}
}
@media (max-width:400px){.ca-br .jb-ctl{padding:0 .75rem 0 .65rem;gap:.4rem;letter-spacing:.04em}}

/* ---- reduced motion: music and the dim still work; no eagle, no bob or spin, a still ribbon ---- */
@media (prefers-reduced-motion:reduce){
  .ca-br .eg{display:none}
  .ca-br .jb,.ca-br .jb-arc,.ca-br .jb-rec,.ca-br .jb-tip{animation:none!important}
  .ca-br .jb:hover{translate:none}
  .ca-br.is-music .jb-ribbon .jb-rstar{opacity:1}
}