/* =====================================================================
   CS Promoters & Builders — animations.css
   All keyframes, reveal-on-scroll, foil text, 3D drift, ken-burns,
   pulse rings, spins, marquee, hover lift.  Ported 1:1 from index.css.
   ===================================================================== */

/* --------------------------- Nature foil ---------------------------- */
.nature-foil {
  background: linear-gradient(105deg, #1f4d2a 0%, #6b8f3c 22%, #d4a017 48%, #f0d078 62%, #2f6b3a 88%, #1f4d2a 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: foil 8s ease-in-out infinite;
}
@keyframes foil {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ----------------------------- Marquee ------------------------------ */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.animate-marquee { animation: marquee 40s linear infinite; }

/* ----------------------------- Floaty ------------------------------- */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
.animate-floaty { animation: floaty 6s ease-in-out infinite; }

/* ------------------------------ Spins ------------------------------- */
@keyframes spin-slow { to { transform: rotate(360deg); } }
.animate-spin-slow { animation: spin-slow 48s linear infinite; }
.animate-spin-reverse { animation: spin-slow 60s linear infinite reverse; }

/* --------------------------- Pulse ring ----------------------------- */
@keyframes pulse-ring {
  0% { transform: scale(0.9); opacity: 0.7; }
  70% { transform: scale(1.65); opacity: 0; }
  100% { opacity: 0; }
}
.pulse-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 2px solid var(--color-gold-light);
  animation: pulse-ring 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* ---------------------------- Ken Burns ----------------------------- */
@keyframes kenburns {
  0% { transform: scale(1) translate3d(0, 0, 0); }
  100% { transform: scale(1.14) translate3d(-2%, -1.5%, 0); }
}
.animate-kenburns { animation: kenburns 16s ease-in-out infinite alternate; }

/* --------------------------- 3D perspective ------------------------- */
.stage-3d {
  perspective: 1400px;
  perspective-origin: 50% 40%;
  transform-style: preserve-3d;
}
.layer-3d {
  transform-style: preserve-3d;
  will-change: transform;
}
@keyframes drift3d {
  0% { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) scale(1.05); }
  50% { transform: translate3d(-1.5%, -1%, 40px) rotateX(1.2deg) rotateY(-1.5deg) scale(1.12); }
  100% { transform: translate3d(1%, 1.2%, 20px) rotateX(-0.8deg) rotateY(1deg) scale(1.08); }
}
.animate-drift3d { animation: drift3d 18s ease-in-out infinite alternate; }

/* ------------------------------ Orbit ------------------------------- */
@keyframes orbit {
  0% { transform: rotate(0deg) translateX(18px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(18px) rotate(-360deg); }
}
.animate-orbit { animation: orbit 14s linear infinite; }

/* ---------------------------- Leaf float ---------------------------- */
@keyframes leaf-float {
  0% { transform: translateY(0) rotate(0deg); opacity: 0.35; }
  50% { transform: translateY(-40px) rotate(12deg); opacity: 0.7; }
  100% { transform: translateY(-80px) rotate(-8deg); opacity: 0; }
}
.animate-leaf { animation: leaf-float 9s ease-in infinite; }

/* --------------------------- Scroll reveal -------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.95s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.95s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* ------------------------------- Lift ------------------------------- */
.lift { transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.5s ease; }
.lift:hover { transform: translateY(-10px); box-shadow: 0 32px 64px -28px rgba(12, 26, 18, 0.45); }

/* ----------------------------- Rule gold ---------------------------- */
.rule-gold { height: 1px; background: linear-gradient(90deg, transparent, #d4a017, #6b8f3c, transparent); }

/* ------------------------ Floating particles ------------------------ */
.nature-particles { pointer-events: none; position: absolute; inset: 0; overflow: hidden; }
.nature-particles span {
  position: absolute;
  bottom: -20px;
  width: 10px;
  height: 10px;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  background: linear-gradient(135deg, #6b8f3c, #d4a017);
  opacity: 0.35;
  animation: leaf-float 10s ease-in infinite;
}