/* ============================================================
   ANIMATIONS.CSS — TrueTap
   ============================================================ */

@keyframes nfc-pulse {
  0% {
    width: 90px;
    height: 90px;
    opacity: 0.65;
  }
  100% {
    width: 300px;
    height: 300px;
    opacity: 0;
  }
}

@keyframes phone-tap {
  0%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  55% {
    transform: translateY(-8px);
  }
  70% {
    transform: translateY(-16px);
  }
}

@keyframes show-verified {
  0%, 30% {
    opacity: 0;
  }
  50%, 85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes chip-flicker {
  0%, 100% { opacity: 1; }
  45% { opacity: 0.55; }
  50% { opacity: 1; }
  70% { opacity: 0.75; }
  75% { opacity: 1; }
}

@keyframes wave-grow {
  0%, 100% { opacity: 0.35; transform: scaleY(0.72); }
  50% { opacity: 1; transform: scaleY(1); }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes subtle-scale {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

.reveal {
  opacity: 0;
  transition:
    opacity 0.95s var(--ease-out-expo),
    transform 0.95s var(--ease-out-expo);
}

.reveal-up {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 0.95s var(--ease-out-expo),
    transform 0.95s var(--ease-out-expo);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-36px);
  transition:
    opacity 0.95s var(--ease-out-expo),
    transform 0.95s var(--ease-out-expo);
}

.reveal-right {
  opacity: 0;
  transform: translateX(36px);
  transition:
    opacity 0.95s var(--ease-out-expo),
    transform 0.95s var(--ease-out-expo);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity 1s var(--ease-out-expo),
    transform 1s var(--ease-out-expo);
}

.reveal.is-visible,
.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
  opacity: 1;
  transform: none;
}

.stagger > *:nth-child(1)  { transition-delay: 0ms; }
.stagger > *:nth-child(2)  { transition-delay: 110ms; }
.stagger > *:nth-child(3)  { transition-delay: 220ms; }
.stagger > *:nth-child(4)  { transition-delay: 330ms; }
.stagger > *:nth-child(5)  { transition-delay: 440ms; }
.stagger > *:nth-child(6)  { transition-delay: 550ms; }
.stagger > *:nth-child(7)  { transition-delay: 660ms; }
.stagger > *:nth-child(8)  { transition-delay: 770ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-up,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .stagger > * {
    transition-delay: 0ms !important;
  }

  .nfc-phone {
    animation: none;
  }
  .nfc-visual__pulse {
    animation: none;
    opacity: 0.12;
  }
  .nfc-wave {
    animation: none;
    opacity: 0.55;
  }
  .nfc-phone__verified,
  .nfc-phone__checkmark {
    animation: none;
    opacity: 1;
  }
}

.hero-animate .hero__eyebrow {
  animation: slide-up 1s var(--ease-out-expo) both;
  animation-delay: 0.08s;
}

.hero-animate .hero__title {
  animation: slide-up 1.05s var(--ease-out-expo) both;
  animation-delay: 0.18s;
}

.hero-animate .hero__body {
  animation: slide-up 1.05s var(--ease-out-expo) both;
  animation-delay: 0.28s;
}

.hero-animate .hero__cta {
  animation: slide-up 1.05s var(--ease-out-expo) both;
  animation-delay: 0.38s;
}

.hero-animate .hero__visual {
  animation: subtle-scale 1.15s var(--ease-out-expo) both;
  animation-delay: 0.22s;
}

@media (prefers-reduced-motion: reduce) {
  .hero-animate .hero__eyebrow,
  .hero-animate .hero__title,
  .hero-animate .hero__body,
  .hero-animate .hero__cta,
  .hero-animate .hero__visual {
    animation: none;
  }
}