/* ═══════════════════════════════════════════════════════════════
   CALNCASH — Animations & Keyframes
   ═══════════════════════════════════════════════════════════════ */

/* ── Page loader ──────────────────────────────────────────── */
@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

@keyframes loader-fade-out {
  to { opacity: 0; pointer-events: none; }
}

/* ── Scroll reveal ────────────────────────────────────────── */
.reveal-up {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity  0.75s var(--ease-expo),
    transform 0.75s var(--ease-expo);
  will-change: opacity, transform;
}

.reveal-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays (set via data-delay attribute) */
.reveal-up[data-delay="0"] { transition-delay: 0ms;   }
.reveal-up[data-delay="1"] { transition-delay: 90ms;  }
.reveal-up[data-delay="2"] { transition-delay: 180ms; }
.reveal-up[data-delay="3"] { transition-delay: 270ms; }
.reveal-up[data-delay="4"] { transition-delay: 360ms; }
.reveal-up[data-delay="5"] { transition-delay: 450ms; }
.reveal-up[data-delay="6"] { transition-delay: 540ms; }

/* ── Hero text line reveal ────────────────────────────────── */
.line-reveal {
  display: block;
  overflow: hidden;
}

.line-reveal__inner {
  display: block;
  transform: translateY(110%);
  transition: transform 0.85s var(--ease-expo);
}

.line-reveal__inner.in-view {
  transform: translateY(0);
}

/* ── Blob / organic shape morph ───────────────────────────── */
@keyframes blob-drift-1 {
  0%   { border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%; transform: translate(0,0) scale(1);   }
  33%  { border-radius: 40% 60% 50% 50% / 60% 40% 60% 40%; transform: translate(15px,-20px) scale(1.04); }
  66%  { border-radius: 50% 50% 40% 60% / 40% 60% 50% 60%; transform: translate(-10px,10px) scale(0.97); }
  100% { border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%; transform: translate(0,0) scale(1);   }
}

@keyframes blob-drift-2 {
  0%   { border-radius: 40% 60% 30% 70% / 60% 40% 70% 30%; transform: translate(0,0) scale(1);   }
  33%  { border-radius: 60% 40% 50% 50% / 40% 60% 40% 60%; transform: translate(-12px,18px) scale(1.06); }
  66%  { border-radius: 50% 50% 60% 40% / 60% 40% 55% 45%; transform: translate(8px,-12px) scale(0.96); }
  100% { border-radius: 40% 60% 30% 70% / 60% 40% 70% 30%; transform: translate(0,0) scale(1);   }
}

/* ── Hero scroll indicator ────────────────────────────────── */
@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0);  opacity: 0.5; }
  50%       { transform: translateY(6px); opacity: 1;   }
}

/* ── Button pulse glow ────────────────────────────────────── */
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0   rgba(61,74,53,0.35); }
  70%  { box-shadow: 0 0 0 14px rgba(61,74,53,0);    }
  100% { box-shadow: 0 0 0 0   rgba(61,74,53,0);     }
}

@keyframes pulse-ring-cream {
  0%   { box-shadow: 0 0 0 0   rgba(240,232,212,0.4); }
  70%  { box-shadow: 0 0 0 14px rgba(240,232,212,0);  }
  100% { box-shadow: 0 0 0 0   rgba(240,232,212,0);   }
}

.btn--pulse {
  animation: pulse-ring 2.8s var(--ease-out) infinite;
}

.btn--pulse-cream {
  animation: pulse-ring-cream 2.8s var(--ease-out) infinite;
}

/* ── Marquee ──────────────────────────────────────────────── */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.trust__track {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  width: max-content;
  animation: marquee 24s linear infinite;
}

.trust__track:hover {
  animation-play-state: paused;
}

/* ── SVG circle draw (step numbers) ──────────────────────── */
/* circumference = 2π × 46 ≈ 289 */
.step__circle-fill {
  stroke-dasharray: 289;
  stroke-dashoffset: 289;
  transition: stroke-dashoffset 1.2s var(--ease-expo);
}

.step.in-view .step__circle-fill {
  stroke-dashoffset: 0;
}

/* ── Step connector line draw ────────────────────────────── */
@keyframes line-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ── WhatsApp chat message appear ─────────────────────────── */
@keyframes msg-pop {
  0%   { opacity: 0; transform: translateY(10px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1);        }
}

.wa-msg {
  opacity: 0;
}

.wa-msg.visible {
  animation: msg-pop 0.4s var(--ease-bounce) forwards;
}

/* ── WhatsApp typing indicator ────────────────────────────── */
@keyframes typing-pulse {
  0%, 80%, 100% { transform: scale(0.55); opacity: 0.35; }
  40%            { transform: scale(1);    opacity: 1;    }
}

.wa-typing span {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--forest-pale);
  animation: typing-pulse 1.3s ease-in-out infinite;
}

.wa-typing span:nth-child(2) { animation-delay: 180ms; }
.wa-typing span:nth-child(3) { animation-delay: 360ms; }

/* ── Check mark draw ──────────────────────────────────────── */
.check-path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  transition: stroke-dashoffset 0.5s var(--ease-expo) 0.1s;
}

.feature-item.in-view .check-path {
  stroke-dashoffset: 0;
}

/* ── Benefit card hover lift ─────────────────────────────── */
.benefit {
  transition:
    transform 0.35s var(--ease-expo),
    box-shadow 0.35s var(--ease-expo);
}

.benefit:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* ── Who card tilt ────────────────────────────────────────── */
.who-card {
  transition:
    transform 0.3s var(--ease-expo),
    box-shadow 0.3s var(--ease-expo),
    background 0.3s var(--ease);
}

.who-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-md);
  background: var(--forest);
  color: var(--cream);
}

/* ── Nav link underline hover ─────────────────────────────── */
.nav__link {
  position: relative;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--cream);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-expo);
}

.nav__link:hover::after {
  transform: scaleX(1);
}

/* ── Link card copy feedback ─────────────────────────────── */
@keyframes copy-flash {
  0%   { opacity: 0; transform: translateY(4px); }
  20%  { opacity: 1; transform: translateY(0);   }
  80%  { opacity: 1; transform: translateY(0);   }
  100% { opacity: 0; transform: translateY(-4px); }
}

.copy-toast {
  animation: copy-flash 1.8s var(--ease-expo) forwards;
}

/* ── Stats counter ────────────────────────────────────────── */
@keyframes count-shimmer {
  0%   { opacity: 0.4; }
  100% { opacity: 1;   }
}

/* ── Back to top ──────────────────────────────────────────── */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);     }
}

/* ── Floating geometric deco (hero bg) ────────────────────── */
@keyframes geo-rotate {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

@keyframes geo-rotate-reverse {
  from { transform: rotate(0deg);    }
  to   { transform: rotate(-360deg); }
}

/* ── Reduce motion support ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal-up {
    opacity: 1;
    transform: none;
  }
}