/* ============================================================
   Respondent — Image Blocks · MOTION
   Looping CSS animations for the animated block set.
   Pairs with image-blocks.css (base styles + tokens).

   Convention: the RESTING (no-animation) state is the finished,
   visible state. Animations live inside a prefers-reduced-motion
   guard so print / reduced-motion shows content, not a blank frame.
   JS-driven counters (.ibx-count) follow the same rule.
   ============================================================ */

@property --ibx-p { syntax:'<percentage>'; initial-value:0%; inherits:false; }

@media (prefers-reduced-motion: no-preference){

  /* people / avatars popping in one by one, looping */
  .ibx-pop{ animation:ibxPop 4.8s cubic-bezier(.34,1.4,.5,1) infinite both; }
  @keyframes ibxPop{
    0%{opacity:0;transform:scale(.55)}
    8%{opacity:1;transform:scale(1.09)}
    13%,84%{opacity:1;transform:scale(1)}
    96%,100%{opacity:0;transform:scale(.55)}
  }

  /* chat / transcript lines appearing in sequence, looping */
  .ibx-rise{ animation:ibxRise 6s ease-in-out infinite both; }
  @keyframes ibxRise{
    0%{opacity:0;transform:translateY(10px)}
    7%{opacity:1;transform:translateY(0)}
    90%{opacity:1;transform:translateY(0)}
    98%,100%{opacity:0;transform:translateY(10px)}
  }

  /* soundwave / equalizer bars — per-bar phase via --d / --dur for an organic ripple */
  .ibx-wave span{ animation:ibxWave 1.1s ease-in-out infinite; animation-delay:var(--d,0s); animation-duration:var(--dur,1.1s); transform-origin:center; }
  @keyframes ibxWave{ 0%,100%{transform:scaleY(.22)} 50%{transform:scaleY(1)} }

  /* bar chart growing up, looping */
  .ibx-bars span{ animation:ibxGrow 3.6s cubic-bezier(.4,0,.2,1) infinite both; transform-origin:bottom; }
  @keyframes ibxGrow{ 0%{transform:scaleY(0)} 18%,82%{transform:scaleY(1)} 100%{transform:scaleY(0)} }

  /* horizontal bar / funnel filling, looping */
  .ibx-grow-x{ animation:ibxGrowX 4.4s cubic-bezier(.4,0,.2,1) infinite both; transform-origin:left; }
  @keyframes ibxGrowX{ 0%{transform:scaleX(0)} 22%,84%{transform:scaleX(1)} 100%{transform:scaleX(0)} }

  /* line chart drawing itself */
  .ibx-draw{ stroke-dasharray:var(--len,600); stroke-dashoffset:var(--len,600); animation:ibxDraw 4s ease-in-out infinite; }
  @keyframes ibxDraw{ 0%{stroke-dashoffset:var(--len,600)} 40%,80%{stroke-dashoffset:0} 100%{stroke-dashoffset:var(--len,600)} }
  .ibx-dot-pulse{ animation:ibxDotPulse 4s ease-in-out infinite; }
  @keyframes ibxDotPulse{ 0%,35%{opacity:0;r:2} 45%{opacity:1;r:5} 80%{opacity:1;r:4} 90%,100%{opacity:0} }

  /* donut filling 0 → target (set --ibx-target) */
  .ibx-donut{ animation:ibxFill 4.5s ease-in-out infinite; }
  @keyframes ibxFill{ 0%{--ibx-p:0%} 40%,82%{--ibx-p:var(--ibx-target,62%)} 100%{--ibx-p:0%} }

  /* counter / number tick handled by JS (.ibx-count) */

  /* toast / card sliding in from the side, looping */
  .ibx-slide-r{ animation:ibxSlideR 5s cubic-bezier(.34,1.2,.5,1) infinite both; }
  @keyframes ibxSlideR{
    0%{opacity:0;transform:translateX(46px) scale(.96)}
    9%{opacity:1;transform:translateX(0) scale(1)}
    88%{opacity:1;transform:translateX(0) scale(1)}
    98%,100%{opacity:0;transform:translateX(46px) scale(.96)}
  }
  .ibx-slide-up{ animation:ibxSlideUp 5s cubic-bezier(.34,1.2,.5,1) infinite both; }
  @keyframes ibxSlideUp{
    0%{opacity:0;transform:translateY(26px) scale(.96)}
    10%{opacity:1;transform:translateY(0) scale(1)}
    88%{opacity:1;transform:translateY(0) scale(1)}
    98%,100%{opacity:0;transform:translateY(26px) scale(.96)}
  }

  /* cross-fade carousel — stack frames, fade through them */
  .ibx-xfade{ position:absolute;inset:0;opacity:0;animation:ibxXfade calc(var(--n,4) * 2.2s) ease-in-out infinite; }
  @keyframes ibxXfade{ 0%,4%{opacity:0;transform:scale(1.04)} 8%,22%{opacity:1;transform:scale(1)} 26%,100%{opacity:0} }

  /* pulsing live / recording dot */
  .ibx-live{ animation:ibxLive 1.6s ease-in-out infinite; }
  @keyframes ibxLive{ 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(240,99,92,.5)} 70%{opacity:.6;box-shadow:0 0 0 7px rgba(240,99,92,0)} }

  /* analyzing spinner ring */
  .ibx-spin{ animation:ibxSpin 1.1s linear infinite; }
  @keyframes ibxSpin{ to{transform:rotate(360deg)} }

  /* sentiment needle sweeping */
  .ibx-sweep{ animation:ibxSweep 4s cubic-bezier(.45,0,.55,1) infinite; }
  @keyframes ibxSweep{ 0%,100%{left:18%} 50%{left:78%} }

  /* highlight wipe behind a phrase */
  .ibx-hl{ background-image:linear-gradient(var(--indigo-tint),var(--indigo-tint)); background-repeat:no-repeat; background-size:0% 100%; background-position:left center; animation:ibxHl 4.5s ease-in-out infinite; padding:0 2px; }
  @keyframes ibxHl{ 0%,8%{background-size:0% 100%} 38%,82%{background-size:100% 100%} 96%,100%{background-size:0% 100%} }

  /* staggered helper: set --i on each child */
  .ibx-stagger > *{ animation-delay:calc(var(--i,0) * .34s); }
  .ibx-stagger-sm > *{ animation-delay:calc(var(--i,0) * .09s); }
}

/* resting state for line-draw under reduced motion = fully drawn */
@media (prefers-reduced-motion: reduce){
  .ibx-draw{ stroke-dashoffset:0; }
  .ibx-donut{ --ibx-p:var(--ibx-target,62%); }
}

/* donut variant driven by --ibx-p (animated property) */
.ibx-donut{
  width:64px;height:64px;border-radius:50%;flex:none;display:grid;place-items:center;position:relative;
  background:conic-gradient(var(--indigo) 0 var(--ibx-p,0%), var(--indigo-tint) 0);
}
.ibx-donut::after{content:"";width:42px;height:42px;border-radius:50%;background:var(--white);}
.ibx-donut .ib-donut-val{position:absolute;}

/* spinner ring shape */
.ibx-ring{ width:40px;height:40px;border-radius:50%;border:3px solid var(--indigo-tint);border-top-color:var(--indigo);flex:none; }