/*
   Talkiva - css\base\animations.css
   Reveal animations, keyframes, prefers-reduced-motion
   Extracted verbatim from the original style.css. No rules altered.
*/

/* ---------- 16. Reveal animations & keyframes ---------- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-44px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
}
.reveal-right {
  opacity: 0;
  transform: translateX(44px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
}
.reveal.visible,
.reveal-left.visible,
.reveal-right.visible { opacity: 1; transform: none; }

/* ---------- 16b. Floating hearts (hero particles) ---------- */
.heart-particle {
  position: absolute;
  bottom: -40px;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transform: translateY(0) translateX(0) scale(var(--scale, 1)) rotate(-12deg);
  animation: heartFloat linear forwards;
  will-change: transform, opacity;
  filter: drop-shadow(0 4px 12px rgba(239, 27, 67, 0.35));
}
@keyframes heartFloat {
  0% {
    opacity: 0;
    transform: translateY(0) translateX(0) scale(var(--scale, 1)) rotate(-12deg);
  }
  12% { opacity: 0.85; }
  50% {
    transform: translateY(calc(-38vh)) translateX(calc(var(--sway, 0px) * 0.6)) scale(var(--scale, 1)) rotate(8deg);
    opacity: 0.75;
  }
  85% { opacity: 0.35; }
  100% {
    opacity: 0;
    transform: translateY(calc(-85vh)) translateX(var(--sway, 0px)) scale(var(--scale, 1)) rotate(-14deg);
  }
}

/* ---------- 16c. Mouse parallax (hero depth layers) ---------- */
.hero { --pax: 0; --pay: 0; }
.hero .parallax-deep,   /* text layer — small movement */
.hero-content.parallax-deep {
  transform: translate3d(calc(var(--pax) * 10px), calc(var(--pay) * 8px), 0);
  transition: transform 0.25s ease-out, opacity 0.85s var(--ease-out);
  will-change: transform;
}
.hero .parallax-far,    /* phone layer — larger, opposite direction for depth */
.hero-visual.parallax-far {
  transform: translate3d(calc(var(--pax) * -18px), calc(var(--pay) * -12px), 0);
  transition: transform 0.25s ease-out, opacity 0.85s var(--ease-out);
  will-change: transform;
}

/* ---------- 16d. Micro-interactions polish ---------- */
/* Gentle glowing pulse on the hero's primary download button */
.hero-actions .btn-play {
  animation: btnGlowPulse 3s ease-in-out infinite;
}
@keyframes btnGlowPulse {
  0%, 100% { box-shadow: 0 10px 30px rgba(6, 194, 105, 0.35); }
  50%      { box-shadow: 0 14px 42px rgba(6, 194, 105, 0.55), 0 0 22px rgba(6, 194, 105, 0.3); }
}
/* subtle sheen sweep on glass cards on hover */
.benefit-card, .testimonial-card, .empathy-item, .timeline-card {
  position: relative;
  overflow: hidden;
}
.benefit-card::after, .testimonial-card::after, .empathy-item::after, .timeline-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.08) 45%, transparent 60%);
  transform: translateX(-120%);
  transition: transform 0.9s var(--ease-out);
  pointer-events: none;
}
.benefit-card:hover::after, .testimonial-card:hover::after, .empathy-item:hover::after, .timeline-card:hover::after {
  transform: translateX(120%);
}


@keyframes floatA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-70px, 50px) scale(1.1); }
}
@keyframes floatB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, -50px) scale(1.07); }
}
@keyframes floatC {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-40px, -60px) scale(0.92); }
}
@keyframes phoneFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes chipFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}
@keyframes ringPulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes wave {
  0% { transform: scaleY(0.4); }
  100% { transform: scaleY(1); }
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}
@keyframes scrollDot {
  0% { transform: translate(-50%, 0); opacity: 1; }
  70% { transform: translate(-50%, 14px); opacity: 0; }
  100% { transform: translate(-50%, 0); opacity: 0; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes spinSlow {
  to { transform: rotate(360deg); }
}


/* ---------- 19. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; }
}