/* ══════════════════════════════════════════════════
   Hatch — Animation Keyframes & Utilities
   ══════════════════════════════════════════════════ */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slideUp {
  from { transform: translateY(0); }
  to   { transform: translateY(-100%); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes drawLine {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Utility classes — initial hidden states ── */

.anim-fade-up {
  opacity: 0;
  transform: translateY(40px);
  will-change: transform, opacity;
}

.anim-fade-left {
  opacity: 0;
  transform: translateX(-40px);
  will-change: transform, opacity;
}

.anim-fade-right {
  opacity: 0;
  transform: translateX(40px);
  will-change: transform, opacity;
}

.anim-scale-in {
  opacity: 0;
  transform: scale(0);
  will-change: transform, opacity;
}

/* When revealed by JS */
.anim-fade-up.is-visible,
.anim-fade-left.is-visible,
.anim-fade-right.is-visible,
.anim-scale-in.is-visible {
  opacity: 1;
  transform: none;
}

/* Loader spinner */
.loader-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(246, 240, 220, 0.2);
  border-top-color: var(--cream);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 16px auto 0;
}

/* Image loading shimmer */
.img-loading {
  background: linear-gradient(90deg, var(--green-mid-20) 25%, rgba(22, 108, 83, 0.06) 50%, var(--green-mid-20) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* GPU acceleration hints for animated elements */
.hero-visual,
.hero-img-wrap,
.stat-float,
.image-break-inner {
  will-change: transform;
}