/* Animations & transitions (CSS layer). GSAP handles scroll/entrance effects in js/animations.js */
@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(10px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes dialogIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(.97)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes floatY {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-10px)
  }
}

@keyframes pulseRing {
  0% {
    box-shadow: 0 0 0 0 rgba(31, 168, 85, .5)
  }

  100% {
    box-shadow: 0 0 0 18px rgba(31, 168, 85, 0)
  }
}

@keyframes shine {
  from {
    background-position: -200% 0
  }

  to {
    background-position: 200% 0
  }
}

body {
  animation: pageIn .6s var(--ease) both;
  animation-fill-mode: none;
}

body.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .25s ease, transform .25s ease
}

.float-chip.c1 {
  animation: floatY 5s ease-in-out infinite
}

.float-chip.c2 {
  animation: floatY 6s ease-in-out -2s infinite
}

.float-chip.c3 {
  animation: floatY 5.5s ease-in-out -1s infinite
}

.wa-float {
  animation: pulseRing 2.4s ease-out infinite
}

.btn-primary {
  background-size: 200% 100%
}

.card[data-tilt] {
  transition: transform .25s ease-out, box-shadow .45s var(--ease), border-color .3s
}

.card[data-tilt].is-tilting {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-8px)
}

@media (prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important
  }

  .wa-float {
    animation: none
  }
}