/* ==========================================================================
   MERIDIAN EXPORTS — ANIMATIONS
   Scroll reveals, entrance sequences, micro-interactions. 60fps: only
   transform + opacity are animated on scroll-triggered elements.
   ========================================================================== */

[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1);
  will-change:transform, opacity;
}
[data-reveal].in-view{ opacity:1; transform:translateY(0); }

[data-reveal="fade"]{ transform:none; }
[data-reveal="left"]{ transform:translateX(-32px); }
[data-reveal="left"].in-view{ transform:translateX(0); }
[data-reveal="right"]{ transform:translateX(32px); }
[data-reveal="right"].in-view{ transform:translateX(0); }
[data-reveal="scale"]{ transform:scale(.94); }
[data-reveal="scale"].in-view{ transform:scale(1); }

[data-reveal-group] > *{ transition-delay:calc(var(--i, 0) * 90ms); }

@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes floatY{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-14px); }
}
@keyframes floatSlow{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  50%{ transform:translate(10px,-16px) rotate(3deg); }
}
@keyframes pulseRing{
  0%{ box-shadow:0 0 0 0 rgba(31,61,52,.38); }
  70%{ box-shadow:0 0 0 14px rgba(31,61,52,0); }
  100%{ box-shadow:0 0 0 0 rgba(31,61,52,0); }
}
@keyframes shimmer{
  0%{ background-position:-200% 0; }
  100%{ background-position:200% 0; }
}
@keyframes spinSlow{ to{ transform:rotate(360deg); } }

.hero-copy [data-reveal]{ transition-delay:.15s; }

/* hero entrance sequence (played once on load) */
.hero-load .eyebrow,
.hero-load .hero-title,
.hero-load .hero-desc,
.hero-load .hero-actions,
.hero-load .hero-stats,
.hero-load .hero-highlights{
  opacity:0;
  transform:translateY(22px);
  animation:heroIn .9s cubic-bezier(.16,.84,.44,1) forwards;
}
.hero-load .eyebrow{ animation-delay:.12s; }
.hero-load .hero-title{ animation-delay:.2s; }
.hero-load .hero-desc{ animation-delay:.5s; }
.hero-load .hero-actions{ animation-delay:.8s; }
.hero-load .hero-stats{ animation-delay:.7s; }
.hero-load .hero-highlights{ animation-delay:.7s; }
.hero-load .hero-card{ opacity:0; animation:heroInRoute 1.1s cubic-bezier(.16,.84,.44,1) forwards; animation-delay:.4s; }
.hero-load .hero-route{ opacity:0; animation:heroInRoute 1.1s cubic-bezier(.16,.84,.44,1) forwards; animation-delay:.4s; }
@keyframes heroIn{ to{ opacity:1; transform:translateY(0);} }
@keyframes heroInRoute{ from{opacity:0; transform:translateX(24px) scale(.97);} to{opacity:1; transform:translateX(0) scale(1);} }

/* floating shapes in hero */
.float-shape{ position:absolute; border-radius:50%; pointer-events:none; opacity:.5; }
.float-shape.a{ width:220px; height:220px; background:radial-gradient(circle, rgba(31,61,52,.25), transparent 70%); top:8%; left:2%; animation:floatSlow 12s ease-in-out infinite; }
.float-shape.b{ width:160px; height:160px; background:radial-gradient(circle, rgba(108,127,82,.18), transparent 70%); bottom:10%; right:8%; animation:floatSlow 15s ease-in-out infinite reverse; }

/* counter number pop */
.num.counted{ animation:fadeIn .4s ease; }

/* button ripple */
.ripple{
  position:absolute; border-radius:50%; background:rgba(255,255,255,.5);
  transform:scale(0); animation:rippleAnim .65s ease-out; pointer-events:none;
}
@keyframes rippleAnim{ to{ transform:scale(3); opacity:0; } }

/* image hover zoom is handled per-component in style.css using transform + overflow:hidden */

/* loading skeleton shimmer (lazy images before load) */
img.lazy:not(.loaded){
  background:linear-gradient(90deg, #ECEBE7 25%, #F5F4F0 37%, #ECEBE7 63%);
  background-size:400% 100%;
  animation:shimmer 1.6s ease infinite;
}

/* certification icon slow spin on hover */
.cert-card:hover .cert-mark{ animation:spinSlow 6s linear infinite; }

/* process dot pulse when active */
.process-step.active .dot{ animation:pulseRing 2s ease-out infinite; }