/* ═══════════════════════════════════════════════════════════
   VOLTAGE — animations
   - Entrance: staggered fade/slide for buttons
   - Hover lift for buttons, icons, footer
   ═══════════════════════════════════════════════════════════ */


/* Entrance animations
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.fadein {
  animation-name: voltage-fadein;
  animation-duration: 0.7s;
  animation-fill-mode: both;
}
@keyframes voltage-fadein {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Buttons rise in one after another (uses --delay set per button) */
.button-entrance {
  animation-name: voltage-rise;
  animation-duration: 0.55s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-delay: calc(var(--delay) / 12);
}
@keyframes voltage-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* Button hover animations (also apply to icon)
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button-hover, .credit-hover {
  display: block;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  transition-duration: 0.2s;
  transition-property: transform;
}
.button-hover:active,
.button-hover:focus,
.button-hover:hover {
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}
.credit-hover:active,
.credit-hover:focus,
.credit-hover:hover {
  -webkit-transform: scale(1.04);
  transform: scale(1.04);
}


/* Footer hover animations
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.footer-hover {
  display: inline-block;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  transition-duration: 0.3s;
  transition-property: transform;
  transition-timing-function: ease-out;
}
.footer-hover:active,
.footer-hover:focus,
.footer-hover:hover {
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
}