/* ==========================================================================
   animations.css — Keyframes, scroll-reveal & micro-interactions
   ========================================================================== */

/* ---- Scroll reveal (driven by IntersectionObserver in animations.js) ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-36px); }
[data-reveal="right"] { transform: translateX(36px); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Stagger children */
[data-reveal-group] > * { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
[data-reveal-group].is-visible > * { opacity: 1; transform: none; }
[data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0.05s; }
[data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 0.12s; }
[data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 0.19s; }
[data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 0.26s; }
[data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 0.33s; }
[data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 0.40s; }
[data-reveal-group].is-visible > *:nth-child(7) { transition-delay: 0.47s; }
[data-reveal-group].is-visible > *:nth-child(8) { transition-delay: 0.54s; }

/* ---- Keyframes ---- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes leaf-float {
  0%   { transform: translateY(-10vh) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.55; }
  90%  { opacity: 0.4; }
  100% { transform: translateY(110vh) rotate(320deg); opacity: 0; }
}

@keyframes particle-rise {
  0%   { transform: translateY(20px) scale(0.6); opacity: 0; }
  20%  { opacity: 0.9; }
  100% { transform: translateY(-120px) scale(1.1); opacity: 0; }
}

@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.8); opacity: 0; }
}

@keyframes pop-in {
  0%   { transform: scale(0.85); opacity: 0; }
  60%  { transform: scale(1.03); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes spin-grow {
  0%   { transform: rotate(0deg) scale(0.85); opacity: 0.6; }
  50%  { transform: rotate(180deg) scale(1.1); opacity: 1; }
  100% { transform: rotate(360deg) scale(0.85); opacity: 0.6; }
}

@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes check-draw {
  to { stroke-dashoffset: 0; }
}

/* Animated gradient utility */
.animated-gradient {
  background-size: 200% 200%;
  animation: gradient-shift 12s ease infinite;
}

/* Animated border (conic) */
.animated-border {
  position: relative;
  border-radius: var(--radius-md);
  isolation: isolate;
}
.animated-border::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--angle, 0deg), var(--color-primary), var(--color-secondary), var(--color-accent), var(--color-primary));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: border-rotate 5s linear infinite;
  z-index: -1;
}
@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes border-rotate { to { --angle: 360deg; } }

/* Check mark draw for form success */
.check-circle circle { stroke-dasharray: 166; stroke-dashoffset: 166; animation: check-draw 0.6s var(--ease) forwards; }
.check-circle path { stroke-dasharray: 48; stroke-dashoffset: 48; animation: check-draw 0.4s var(--ease) 0.5s forwards; }

/* Hover lift utility */
.hover-lift { transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.hover-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* Counter number reveal is JS driven; underline sweep for links */
.link-underline { position: relative; }
.link-underline::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--gradient-primary); transition: width 0.3s var(--ease); }
.link-underline:hover::after { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .leaf, .particle, .hero-badge, .whatsapp-float::before, .animated-border::before, .animated-gradient, .preloader-leaf { animation: none !important; }
  [data-reveal], [data-reveal-group] > * { opacity: 1 !important; transform: none !important; }
}
</content>