/* Balance: the footage replaces the hero figure in place; the other two labels leave at once. */
/* The standing frames differ slightly from the hero's, so the two dissolve into each other over --bal-fade instead of cutting. */
.spin-portrait{--bal-fade:450ms}
.spin-portrait .bal-canvas{opacity:0;visibility:hidden!important;transition:opacity var(--bal-fade) ease,visibility 0s linear var(--bal-fade)}
.spin-portrait.bal-open .bal-canvas{opacity:1;visibility:visible!important;transition:opacity var(--bal-fade) ease,visibility 0s}
.spin-portrait.bal-open .spin-canvas:not(.bal-canvas){visibility:hidden!important;transition:visibility 0s linear var(--bal-fade)}
/* the shadow layer appears only when the hero (and its identical shadow) hides, and leaves at once when it returns */
.spin-portrait .bal-shadow{opacity:0;visibility:hidden!important;transition:none}
.spin-portrait.bal-open .bal-shadow{opacity:1;visibility:visible!important;transition:opacity 0s linear var(--bal-fade),visibility 0s linear var(--bal-fade)}
@media(prefers-reduced-motion:reduce){.spin-portrait{--bal-fade:0ms}}
.spin-portrait.bal-open .ability-note{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:none!important}
.spin-portrait[data-balance=loading] .ability-note-body{animation:bal-wait 900ms ease-in-out infinite alternate}
@keyframes bal-wait{from{opacity:1}to{opacity:.45}}
@media(prefers-reduced-motion:reduce){.spin-portrait[data-balance=loading] .ability-note-body{animation:none}}
/* Phones: the stage sits left of centre to leave room for the notes. With Balance open the notes are hidden and the arms
   are out wide, so centre him and scale him up a little. Knobs: --bal-phone-scale, --bal-phone-move.
   One transform, eased the same way out and back (Jesse, 2026-11-07): the centring used to animate left/right, which the
   Perception sheet's later transition rule overrode, so he jumped sideways and only the scale eased. The doubled class
   outranks that rule. */
@media(max-width:760px){
  .spin-portrait{--bal-phone-scale:1.08;--bal-phone-move:600ms}
  .spin-portrait.spin-portrait .spin-stage{transform-origin:50% 90%;transition:transform var(--bal-phone-move) cubic-bezier(.65,0,.35,1),opacity 200ms ease-out}
  .spin-portrait.spin-portrait.bal-open .spin-stage{transform:translateX(12%) scale(var(--bal-phone-scale))}
}