/* ============================================================
   HONOR LORD LANDSCAPING — animations.css
   ============================================================ */

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInLeft{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeInRight{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:translateX(0)}}
@keyframes drawLine{from{width:0}to{width:100%}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes loaderFill{from{width:0}to{width:100%}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}

/* === LOADER ===
   CRITICAL: loader must NEVER block page content.
   It hides itself automatically via CSS animation after 1.2s.
   JS only speeds it up — even if JS fails, the loader disappears. */
.page-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--dark);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 18px;
  /* Failsafe: auto-hide after 1.5s even without JS */
  animation: fadeOut 0.4s 1.5s ease forwards;
  pointer-events: none; /* never blocks clicks */
}
/* JS adds .hidden to speed up the hide */
.page-loader.hidden {
  animation: fadeOut 0.3s ease forwards !important;
}
/* After animation, truly gone */
.page-loader[style*="display: none"],
.page-loader[style*="display:none"] { display: none !important; }

.loader-leaf { font-size: 42px; animation: pulse 1s ease-in-out infinite; }
.loader-bar { width: 140px; height: 3px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.loader-bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--blue-light), var(--beige)); border-radius: 2px; animation: loaderFill 0.8s 0.2s ease forwards; }
.loader-text { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.35); animation: fadeInUp 0.5s 0.5s ease both; }

/* Hero entrance */
.hero-badge    { animation: fadeInUp .65s .1s  ease both; }
.hero-title    { animation: fadeInUp .65s .22s ease both; }
.hero-desc     { animation: fadeInUp .65s .36s ease both; }
.hero-actions  { animation: fadeInUp .65s .48s ease both; }
.hero-stats    { animation: fadeInUp .65s .60s ease both; }
.hero-visual   { animation: fadeInRight .8s .3s ease both; }
.float-card-left  { animation: fadeInLeft .7s .8s ease both, float 4s 1.5s ease-in-out infinite; }
.float-card-right { animation: fadeInRight .7s 1s ease both, float 5s 1.8s ease-in-out infinite reverse; }

/* Scroll reveal */
.reveal       { opacity:0; transform:translateY(24px);  transition:opacity .6s ease,transform .6s ease; }
.reveal-left  { opacity:0; transform:translateX(-24px); transition:opacity .6s ease,transform .6s ease; }
.reveal-right { opacity:0; transform:translateX(24px);  transition:opacity .6s ease,transform .6s ease; }
.reveal-scale { opacity:0; transform:scale(.94);        transition:opacity .55s ease,transform .55s ease; }
.reveal.visible, .reveal-left.visible, .reveal-right.visible, .reveal-scale.visible {
  opacity:1; transform:none;
}

/* Stagger */
.stagger>*:nth-child(1){transition-delay:0s}
.stagger>*:nth-child(2){transition-delay:.08s}
.stagger>*:nth-child(3){transition-delay:.16s}
.stagger>*:nth-child(4){transition-delay:.24s}
.stagger>*:nth-child(5){transition-delay:.32s}
.stagger>*:nth-child(6){transition-delay:.40s}

/* Beige divider draw */
.beige-divider { animation: drawLine .7s ease both; animation-play-state: paused; }
.beige-divider.visible { animation-play-state: running; }

/* Active nav */
.nav-links a.active { color: #fff; }
.nav-links a.active::after { transform: scaleX(1); }