/* V5 tier 1 object states. Ancestor: .obj-stage[data-state="cold|working|warm"] containing an inlined
   site/media/v5/objects/{trade}.svg.
   REPLAY: page JS removes data-state, forces a reflow (void stage.offsetWidth), then sets data-state again.
   (CSS animations restart because the matching rule drops out and returns.) Setting the same value twice
   does NOT replay. Static final poses are defined first and never depend on animation, so
   prefers-reduced-motion and .obj-stage[data-still] simply snap to the final pose of the state.
   Motion rules: transforms and opacity only, every move <= 300ms, iteration counts finite, fill-mode both.
   The fan is a finite run of 300ms turns (3 slow ones, then 4 at speed), never infinite.
   Everything below the MOTION marker is dropped from the baked stills. */

svg.obj{display:block;width:100%}
/* Default pose (no data-state) = warm, the finished picture. */
.obj .cold-wash{opacity:0}
.obj .warm-wash{opacity:.16}
.obj .frost,.obj .bubble-missed,.obj .bubble-text,.obj .tag-missed,.obj .tag-due,.obj .drip,.obj .moon,
.obj .phone-missed,.obj .papers-grey{opacity:0}
.obj .tag-booked,.obj .tag-oncall,.obj .tag-visit,.obj .steam,.obj .phone-ok,.obj .indicator,.obj .reminder-card,.obj .board-1,.obj .board-2,.obj .board-3,.obj .board-4,.obj .board-5,.obj .board-6{opacity:1}
.obj .board-glow{opacity:.75}
.obj .needle{transform:rotate(48deg)}
.obj .tag-booked,.obj .tag-oncall,.obj .tag-visit,.obj .tag-missed,.obj .tag-due{transform-box:fill-box;transform-origin:50% 0}
.obj .fan,.obj .needle{transform-box:fill-box;transform-origin:center}
.obj .bubble-missed,.obj .bubble-text{transform-box:fill-box;transform-origin:50% 100%}
.obj .breaker-1,.obj .breaker-2,.obj .ute,.obj .reminder-card,.obj .drip,.obj .steam,.obj .wrench,.obj .moon,
.obj [class^="board-"]{transform-box:fill-box;transform-origin:center}

/* COLD */
.obj-stage[data-state="cold"] .obj .cold-wash{opacity:.24}
.obj-stage[data-state="cold"] .obj .warm-wash{opacity:0}
.obj-stage[data-state="cold"] .obj .frost,.obj-stage[data-state="cold"] .obj .bubble-missed,.obj-stage[data-state="cold"] .obj .tag-missed,
.obj-stage[data-state="cold"] .obj .tag-due,.obj-stage[data-state="cold"] .obj .drip,.obj-stage[data-state="cold"] .obj .moon,
.obj-stage[data-state="cold"] .obj .phone-missed,.obj-stage[data-state="cold"] .obj .papers-grey{opacity:1}
.obj-stage[data-state="cold"] .obj .papers-grey{opacity:.55}
.obj-stage[data-state="cold"] .obj .tag-booked,.obj-stage[data-state="cold"] .obj .tag-oncall,.obj-stage[data-state="cold"] .obj .tag-visit,
.obj-stage[data-state="cold"] .obj .steam,.obj-stage[data-state="cold"] .obj .phone-ok,.obj-stage[data-state="cold"] .obj .indicator,
.obj-stage[data-state="cold"] .obj .reminder-card,.obj-stage[data-state="cold"] .obj .board-glow,
.obj-stage[data-state="cold"] .obj [class^="board-"]{opacity:0}
.obj-stage[data-state="cold"] .obj .needle{transform:rotate(-62deg)}
.obj-stage[data-state="cold"] .obj .breaker-1,.obj-stage[data-state="cold"] .obj .breaker-2{transform:translateY(14px)}
.obj-stage[data-state="cold"] .obj .ute{transform:translateY(-56px)}

/* WORKING */
.obj-stage[data-state="working"] .obj .cold-wash{opacity:.12}
.obj-stage[data-state="working"] .obj .warm-wash{opacity:0}
.obj-stage[data-state="working"] .obj .tag-booked,.obj-stage[data-state="working"] .obj .tag-oncall,.obj-stage[data-state="working"] .obj .tag-visit,
.obj-stage[data-state="working"] .obj .steam,.obj-stage[data-state="working"] .obj .board-glow,
.obj-stage[data-state="working"] .obj .tag-due{opacity:0}
.obj-stage[data-state="working"] .obj .bubble-text{opacity:1}
.obj-stage[data-state="working"] .obj .papers-grey{opacity:.3}
.obj-stage[data-state="working"] .obj .needle{transform:rotate(8deg)}
.obj-stage[data-state="working"] .obj .ute{transform:translateY(-56px)}

/* WARM: defaults above; bubble-text is replaced by the result tag */

/* ==== MOTION ==== */
@media (prefers-reduced-motion:no-preference){
  /* shared keyframes: "from" only, the element's static pose is the end */
  @keyframes v5-fade-in{from{opacity:0}}
  @keyframes v5-fade-out{from{opacity:1}}
  @keyframes v5-pop{from{opacity:0;transform:scale(.6)}}
  @keyframes v5-drop{from{opacity:0;transform:translateY(-14px)}}
  @keyframes v5-swing{from{opacity:0;transform:rotate(-18deg)}60%{opacity:1;transform:rotate(7deg)}}
  @keyframes v5-slide-in{from{opacity:0;transform:translate(120px,-30px)}}
  @keyframes v5-slide-out{from{opacity:0;transform:translate(36px,24px)}}
  @keyframes v5-rise{from{opacity:0;transform:translateY(10px)}}
  @keyframes v5-flipdown{from{transform:translateY(0)}}
  @keyframes v5-flipup{from{transform:translateY(14px)}}
  @keyframes v5-lay{from{opacity:0;transform:translateY(-16px)}}
  @keyframes v5-spin{to{transform:rotate(180deg)}}
  @keyframes v5-spin-fast{to{transform:rotate(360deg)}}
  @keyframes v5-needle-fall{from{transform:rotate(48deg)}}
  @keyframes v5-needle-climb{from{transform:rotate(-62deg)}}
  @keyframes v5-needle-top{from{transform:rotate(8deg)}}
  @keyframes v5-lower{from{transform:translateY(-56px)}}
  @keyframes v5-lift{from{transform:translateY(0)}}
  @keyframes v5-flipout{to{opacity:0;transform:scaleY(0)}}
  @keyframes v5-tool{from{transform:translateY(-14px) rotate(-18deg)}}
  @keyframes v5-wash-cold{from{opacity:0}}
  @keyframes v5-wash-mid{from{opacity:.24}}
  @keyframes v5-wash-mid-out{from{opacity:.12}}
  @keyframes v5-wash-warm{from{opacity:0}}
  @keyframes v5-grey-off{from{opacity:.55}}
  @keyframes v5-grey-off2{from{opacity:.3}}

  .obj-stage:not([data-still])[data-state="cold"] .obj .cold-wash{animation:v5-wash-cold 300ms ease-out both}
  .obj-stage:not([data-still])[data-state="cold"] .obj .frost{animation:v5-fade-in 300ms ease-out 100ms both}
  .obj-stage:not([data-still])[data-state="cold"] .obj .bubble-missed{animation:v5-pop 240ms cubic-bezier(.2,.9,.3,1.2) 250ms both}
  .obj-stage:not([data-still])[data-state="cold"] .obj .tag-missed,
  .obj-stage:not([data-still])[data-state="cold"] .obj .tag-due{animation:v5-drop 240ms ease-out 250ms both}
  .obj-stage:not([data-still])[data-state="cold"] .obj .drip{animation:v5-drop 300ms ease-in 300ms both}
  .obj-stage:not([data-still])[data-state="cold"] .obj .moon{animation:v5-fade-in 300ms ease-out 100ms both}
  .obj-stage:not([data-still])[data-state="cold"] .obj .phone-missed{animation:v5-fade-in 200ms ease-out 200ms both}
  .obj-stage:not([data-still])[data-state="cold"] .obj .papers-grey{animation:v5-fade-in 300ms ease-out 100ms both}
  .obj-stage:not([data-still])[data-state="cold"] .obj .needle{animation:v5-needle-fall 300ms ease-in both}
  .obj-stage:not([data-still])[data-state="cold"] .obj .breaker-1{animation:v5-flipdown 200ms ease-in 150ms both}
  .obj-stage:not([data-still])[data-state="cold"] .obj .breaker-2{animation:v5-flipdown 200ms ease-in 350ms both}
  .obj-stage:not([data-still])[data-state="cold"] .obj .ute{animation:v5-lift 300ms ease-out both}

  .obj-stage:not([data-still])[data-state="working"] .obj .cold-wash{animation:v5-wash-mid 300ms ease-out 250ms both}
  .obj-stage:not([data-still])[data-state="working"] .obj .frost{animation:v5-fade-out 300ms ease-out 300ms both}
  .obj-stage:not([data-still])[data-state="working"] .obj .bubble-missed{animation:v5-fade-out 150ms ease-out both}
  .obj-stage:not([data-still])[data-state="working"] .obj .bubble-text{animation:v5-slide-in 280ms cubic-bezier(.2,.8,.3,1) 150ms both}
  .obj-stage:not([data-still])[data-state="working"] .obj .phone-missed{animation:v5-fade-out 200ms ease-out 350ms both}
  .obj-stage:not([data-still])[data-state="working"] .obj .phone-ok{animation:v5-fade-in 200ms ease-out 350ms both}
  .obj-stage:not([data-still])[data-state="working"] .obj .fan{animation:v5-spin 300ms linear 600ms 3 both}
  .obj-stage:not([data-still])[data-state="working"] .obj .breaker-1{animation:v5-flipup 200ms ease-out 200ms both}
  .obj-stage:not([data-still])[data-state="working"] .obj .breaker-2{animation:v5-flipup 200ms ease-out 700ms both}
  .obj-stage:not([data-still])[data-state="working"] .obj .indicator{animation:v5-fade-in 250ms ease-out 900ms both}
  .obj-stage:not([data-still])[data-state="working"] .obj .tag-missed{animation:v5-fade-out 150ms ease-out 200ms both}
  .obj-stage:not([data-still])[data-state="working"] .obj .needle{animation:v5-needle-climb 300ms ease-out 200ms both}
  .obj-stage:not([data-still])[data-state="working"] .obj .drip{animation:v5-fade-out 200ms ease-out both}
  .obj-stage:not([data-still])[data-state="working"] .obj .papers-grey{animation:v5-grey-off 300ms ease-out 300ms both}
  .obj-stage:not([data-still])[data-state="working"] .obj .reminder-card{animation:v5-slide-out 280ms cubic-bezier(.2,.8,.3,1) 150ms both}
  .obj-stage:not([data-still])[data-state="working"] .obj .tag-due{animation:v5-flipout 220ms ease-in 450ms backwards}
  .obj-stage:not([data-still])[data-state="working"] .obj .wrench{animation:v5-tool 260ms ease-out 200ms both}
  .obj-stage:not([data-still])[data-state="working"] .obj .board-1{animation:v5-lay 200ms ease-out 100ms both}
  .obj-stage:not([data-still])[data-state="working"] .obj .board-2{animation:v5-lay 200ms ease-out 300ms both}
  .obj-stage:not([data-still])[data-state="working"] .obj .board-3{animation:v5-lay 200ms ease-out 500ms both}
  .obj-stage:not([data-still])[data-state="working"] .obj .board-4{animation:v5-lay 200ms ease-out 700ms both}
  .obj-stage:not([data-still])[data-state="working"] .obj .board-5{animation:v5-lay 200ms ease-out 900ms both}
  .obj-stage:not([data-still])[data-state="working"] .obj .board-6{animation:v5-lay 200ms ease-out 1100ms both}

  .obj-stage:not([data-still])[data-state="warm"] .obj .cold-wash{animation:v5-wash-mid-out 300ms ease-out both}
  .obj-stage:not([data-still])[data-state="warm"] .obj .warm-wash{animation:v5-wash-warm 300ms ease-out 100ms both}
  .obj-stage:not([data-still])[data-state="warm"] .obj .fan{animation:v5-spin-fast 300ms linear 150ms 4 both}
  .obj-stage:not([data-still])[data-state="warm"] .obj .bubble-text{animation:v5-fade-out 150ms ease-out both}
  .obj-stage:not([data-still])[data-state="warm"] .obj .tag-booked,
  .obj-stage:not([data-still])[data-state="warm"] .obj .tag-oncall,
  .obj-stage:not([data-still])[data-state="warm"] .obj .tag-visit{animation:v5-swing 300ms ease-out 350ms both}
  .obj-stage:not([data-still])[data-state="warm"] .obj .board-glow{animation:v5-fade-in 300ms ease-out 200ms both}
  .obj-stage:not([data-still])[data-state="warm"] .obj .needle{animation:v5-needle-top 300ms ease-out 100ms both}
  .obj-stage:not([data-still])[data-state="warm"] .obj .steam{animation:v5-rise 300ms ease-out 350ms both}
  .obj-stage:not([data-still])[data-state="warm"] .obj .ute{animation:v5-lower 300ms ease-in-out 100ms both}
  .obj-stage:not([data-still])[data-state="warm"] .obj .papers-grey{animation:v5-grey-off2 200ms ease-out both}
}