/* ============================================================
   ANIMATION.CSS — keyframes, scroll-reveal, micro-interactions
   ============================================================ */

@keyframes fadeUp{
  from{opacity:0;transform:translateY(18px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes fadeIn{
  from{opacity:0;}
  to{opacity:1;}
}
@keyframes scaleIn{
  from{opacity:0;transform:scale(.96);}
  to{opacity:1;transform:scale(1);}
}
@keyframes pulseSeal{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.05);}
}
@keyframes spin{
  to{transform:rotate(360deg);}
}
@keyframes shimmer{
  0%{background-position:-200% 0;}
  100%{background-position:200% 0;}
}

/* Scroll reveal base state */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}
.reveal-delay-1{transition-delay:.08s;}
.reveal-delay-2{transition-delay:.16s;}
.reveal-delay-3{transition-delay:.24s;}
.reveal-delay-4{transition-delay:.32s;}

/* Hero entrance */
.hero-copy > *{animation:fadeUp .7s cubic-bezier(.2,.7,.2,1) both;}
.hero-copy > *:nth-child(1){animation-delay:.05s;}
.hero-copy > *:nth-child(2){animation-delay:.15s;}
.hero-copy > *:nth-child(3){animation-delay:.25s;}
.hero-copy > *:nth-child(4){animation-delay:.35s;}
.calc-card{animation:scaleIn .6s cubic-bezier(.2,.7,.2,1) .2s both;}

/* Seal mark subtle life */
.brand .seal, .result-seal{animation:pulseSeal 4.5s ease-in-out infinite;}

/* Loading spinner for calculate button */
.spinner{
  width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  animation:spin .6s linear infinite;display:inline-block;
}

/* Skeleton shimmer (used while band ladder renders) */
.skeleton{
  background:linear-gradient(90deg,var(--line) 25%,var(--line-strong) 37%,var(--line) 63%);
  background-size:400% 100%;
  animation:shimmer 1.4s ease infinite;
  border-radius:6px;
}

/* Result reveal */
.calc-results.visible{animation:fadeUp .5s ease both;}

/* Band ladder fill grow */
.band-ladder-bar span{
  animation:growBar .8s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes growBar{
  from{transform:scaleX(0);}
  to{transform:scaleX(1);}
}
.band-ladder-bar span{transform-origin:left;}

/* Counter number pop */
.card--stat .num{transition:color .2s ease;}

/* Accordion smoothness handled inline via max-height in JS, but ease it */
.faq-a{transition:max-height .35s cubic-bezier(.2,.7,.2,1);}

/* Buttons ripple-ish hover */
.btn-primary,.btn-outline,.btn-secondary{will-change:transform;}

/* Toast animation */
.toast{transition:opacity .3s ease, transform .3s ease;}