/* ============================================================
   Adonai Lawns — animation system
   Keyframes, scroll-reveal base states, stagger delays.
   ============================================================ */

/* ─── Keyframes ─────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-50px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes kenBurns {
  0%   { transform: scale(1); }
  100% { transform: scale(1.12); }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes bounceX {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-12px); }
}
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
@keyframes drawCheck {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}
@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.6); }
  60%  { transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

/* ─── Scroll reveal base states ─────────────────────────── */
/* Elements start hidden; animations.js adds .revealed. */
.reveal-up    { opacity: 0; transform: translateY(50px);  transition: opacity .7s ease, transform .7s ease; }
.reveal-left  { opacity: 0; transform: translateX(-60px); transition: opacity .7s ease, transform .7s ease; }
.reveal-right { opacity: 0; transform: translateX(60px);  transition: opacity .7s ease, transform .7s ease; }
.reveal-scale { opacity: 0; transform: scale(0.9);        transition: opacity .6s ease, transform .6s ease; }

.reveal-up.revealed,
.reveal-left.revealed,
.reveal-right.revealed,
.reveal-scale.revealed { opacity: 1; transform: none; }

/* Stagger delays */
.delay-1 { transition-delay: .10s; }
.delay-2 { transition-delay: .20s; }
.delay-3 { transition-delay: .30s; }
.delay-4 { transition-delay: .40s; }
.delay-5 { transition-delay: .50s; }
.delay-6 { transition-delay: .60s; }

/* ─── Hero entrance (runs on load, not on scroll) ──────── */
.hero__bg      { animation: kenBurns 20s ease-out forwards; }
.cta-banner__bg{ animation: kenBurns 26s ease-out forwards; }

.hero__badge { animation: fadeInUp .8s ease both; animation-delay: .05s; }
.hero h1     { animation: fadeInUp .8s ease both; animation-delay: .20s; }
.hero__sub   { animation: fadeInUp .8s ease both; animation-delay: .40s; }
.hero__desc  { animation: fadeInUp .8s ease both; animation-delay: .60s; }
.hero .btn-row { animation: fadeInUp .8s ease both; animation-delay: .80s; }

.page-hero h1          { animation: fadeInUp .7s ease both; animation-delay: .10s; }
.page-hero p           { animation: fadeInUp .7s ease both; animation-delay: .28s; }
.page-hero .breadcrumb { animation: fadeInUp .7s ease both; animation-delay: .42s; }

/* Bouncing scroll arrow — transform includes the centering translate. */
.scroll-arrow { transform: translateX(-50%); animation: bounceX 1.8s ease-in-out infinite; }

/* Floating call button */
.float-cta { animation: bounce 2.5s ease-in-out infinite; }
.float-cta:hover { animation-play-state: paused; }

/* Thank-you page check mark */
.thanks__icon circle { animation: popIn .5s ease both; }
.thanks__icon path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: drawCheck .7s ease-out .35s forwards;
}

/* Counter placeholder shimmer while it climbs */
.stat__num.counting {
  background: linear-gradient(90deg, #fff 25%, rgba(255,255,255,.65) 50%, #fff 75%);
  background-size: 400px 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shimmer 1.6s linear infinite;
}

/* On narrow screens a horizontal start offset pokes past the viewport before
   the element reveals. Come from below instead. */
@media (max-width: 768px) {
  .reveal-left, .reveal-right { transform: translateY(40px); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-up, .reveal-left, .reveal-right, .reveal-scale { opacity: 1; transform: none; }
  .scroll-arrow { transform: translateX(-50%); }
}