/* =========================================================
   shared/animations.css — keyframes and animation utilities
   ========================================================= */

@keyframes orbFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(60px,-40px) scale(1.1)}
  66%{transform:translate(-40px,60px) scale(0.9)}
}

@keyframes fadeSlideDown{
  from{opacity:0;transform:translateY(-20px)}
  to  {opacity:1;transform:translateY(0)}
}
@keyframes fadeSlideUp{
  from{opacity:0;transform:translateY(30px)}
  to  {opacity:1;transform:translateY(0)}
}
@keyframes popIn{
  from{opacity:0;transform:scale(0.7)}
  to  {opacity:1;transform:scale(1)}
}
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%    {opacity:0.6;transform:scale(1.1)}
}
@keyframes bounce{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-8px)}
}
@keyframes blink{
  50%{opacity:0}
}
@keyframes typing{
  from{width:0}
  to  {width:100%}
}
@keyframes correctPop{
  0%  {transform:scale(1)}
  50% {transform:scale(1.10)}
  100%{transform:scale(1)}
}
@keyframes wrongShake{
  0%,100%{transform:translateX(0)}
  20%,60%{transform:translateX(-6px)}
  40%,80%{transform:translateX(6px)}
}
@keyframes bugZillaShake{
  0%,100%{transform:rotate(0)}
  10%,30%,50%,70%,90%{transform:rotate(-8deg)}
  20%,40%,60%,80%   {transform:rotate(8deg)}
}
@keyframes glowFlow{
  0%,100%{box-shadow:0 0 0 rgba(108,99,255,0)}
  50%    {box-shadow:0 0 24px rgba(108,99,255,0.45)}
}
@keyframes loopBounce{
  0%,100%{transform:translateY(0);background:var(--surface2)}
  30%    {transform:translateY(-14px);background:rgba(247,183,49,0.10)}
  60%    {transform:translateY(0);background:var(--surface2)}
}
@keyframes counterTick{
  from{transform:translateY(0);opacity:1}
  to  {transform:translateY(-12px);opacity:0}
}
@keyframes confetti{
  0%  {transform:translate(0,0) rotate(0deg);opacity:1}
  100%{transform:translate(var(--cx,80px),var(--cy,200px)) rotate(720deg);opacity:0}
}
@keyframes slideRight{
  from{transform:translateX(-20px);opacity:0}
  to  {transform:translateX(0);opacity:1}
}
@keyframes pathProgress{
  from{stroke-dashoffset:1000}
  to  {stroke-dashoffset:0}
}
@keyframes shimmerSweep{
  0%       {left:-120%}
  60%,100% {left:140%}
}
@keyframes logoFloat{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-6px)}
}
@keyframes logoMarquee{
  from{transform:translateX(0)}
  to  {transform:translateX(-50%)}
}
@keyframes logoCardFadeIn{
  from{opacity:0;transform:translateY(20px) scale(0.92)}
  to  {opacity:1;transform:translateY(0) scale(1)}
}
@keyframes haloPulse{
  0%,100%{opacity:0.35;transform:scale(1)}
  50%    {opacity:0.7; transform:scale(1.08)}
}

/* Auto-flow: cycles a "active" state through the boxes when the
   .flow-container.autoplay scopes its children */
.flow-container.autoplay .flow-box{
  animation:none;
}
.flow-container.autoplay.run .flow-box{
  animation:flowPulse 4s ease-in-out infinite;
}
.flow-container.autoplay.run .flow-box:nth-child(1){animation-delay:0s}
.flow-container.autoplay.run .flow-box:nth-child(3){animation-delay:1s}
.flow-container.autoplay.run .flow-box:nth-child(5){animation-delay:2s}
.flow-container.autoplay.run .flow-box:nth-child(7){animation-delay:3s}
.flow-container.autoplay.run .flow-box:nth-child(9){animation-delay:4s}

@keyframes flowPulse{
  0%,80%,100%{
    box-shadow:0 0 0 rgba(108,99,255,0);
    transform:scale(1);
  }
  10%,18%{
    box-shadow:0 0 30px rgba(108,99,255,0.4);
    transform:scale(1.04);
  }
}

/* Step-by-step reveal of children inside a visible step-section */
.step-section.visible .reveal-stagger > *{
  animation:fadeSlideUp 0.6s ease both;
}
.step-section.visible .reveal-stagger > *:nth-child(1){animation-delay:0.05s}
.step-section.visible .reveal-stagger > *:nth-child(2){animation-delay:0.15s}
.step-section.visible .reveal-stagger > *:nth-child(3){animation-delay:0.25s}
.step-section.visible .reveal-stagger > *:nth-child(4){animation-delay:0.35s}
.step-section.visible .reveal-stagger > *:nth-child(5){animation-delay:0.45s}
.step-section.visible .reveal-stagger > *:nth-child(6){animation-delay:0.55s}

/* Confetti container (invisible until JS triggers) */
.confetti-burst{
  position:fixed;pointer-events:none;
  width:0;height:0;
  z-index:300;
}
.confetti-burst .piece{
  position:absolute;width:10px;height:14px;
  border-radius:2px;
  animation:confetti 1.4s ease-out forwards;
}

/* Reduced-motion safety */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.001ms!important;
    scroll-behavior:auto!important;
  }
  .step-section{opacity:1!important;transform:none!important}
}