/* ============================================================
   LUMINA ENERGY — Apple-Style Animation System
   animations.css
   ============================================================ */


/* ============================================================
   1. SCROLL PROGRESS BAR
   ============================================================ */

#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #8BC53F;
  transform-origin: left;
  transform: scaleX(0);
  z-index: 9999;
  transition: transform 0.1s linear;
}


/* ============================================================
   2. ENHANCED REVEAL ANIMATIONS
   ============================================================ */

/* Base states — hidden */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Legacy .reveal alias — same as reveal-up */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Visible states — all variants snap to natural position */
.reveal.visible,
.reveal-up.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible {
  opacity: 1;
  transform: none;
}

/* Stagger delay variants (stack with reveal-* classes) */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }


/* ============================================================
   3. HERO TEXT — WORD-BY-WORD REVEAL
   ============================================================ */

.word-reveal .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* JS sets per-word transition-delay; this class triggers them */
.word-reveal.active .word {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   4. 3D CARD TILT
   Applied via JS to .service-card, .why-card, .testimonial-card
   ============================================================ */

.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.1s ease, box-shadow 0.3s ease;
  will-change: transform;
}

.tilt-card:hover {
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}


/* ============================================================
   5. SECTION DIVIDER LINES (animated expansion)
   ============================================================ */

.section-line {
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(139, 197, 63, 0.4),
    transparent
  );
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-line.visible {
  transform: scaleX(1);
}


/* ============================================================
   6. FLOATING ELEMENTS (subtle bob)
   ============================================================ */

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

.float-anim {
  animation: float 4s ease-in-out infinite;
}


/* ============================================================
   7. GREEN GLOW PULSE — CTA Buttons
   ============================================================ */

@keyframes glow-pulse {
  0%,
  100% { box-shadow: 0 0 20px rgba(139, 197, 63, 0.3); }
  50%  { box-shadow: 0 0 40px rgba(139, 197, 63, 0.6), 0 0 80px rgba(139, 197, 63, 0.2); }
}

/* Only animate when not hovered so hover state feels intentional */
.btn-primary:not(:hover) {
  animation: glow-pulse 3s ease-in-out infinite;
}


/* ============================================================
   8. STAT NUMBER GLOW (fires while counter is animating)
   ============================================================ */

@keyframes stat-glow {
  0%   { text-shadow: none; }
  50%  { text-shadow: 0 0 30px rgba(139, 197, 63, 0.8); }
  100% { text-shadow: none; }
}

.stat-count.counting {
  animation: stat-glow 2s ease-out;
}


/* ============================================================
   9. SMOOTH SECTION BACKGROUNDS — gradient shift
   ============================================================ */

@keyframes bg-shift {
  0%,
  100% { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
}

/* Apply to sections that want a living gradient background:
   background-size: 200% 200%;
   animation: bg-shift 12s ease infinite; */
.bg-animated {
  background-size: 200% 200%;
  animation: bg-shift 12s ease infinite;
}


/* ============================================================
   10. NAVBAR BRAND LETTER-SPACING on scroll
   ============================================================ */

.navbar-brand {
  letter-spacing: 0;
  transition: letter-spacing 0.4s ease;
}

.navbar.scrolled .navbar-brand {
  letter-spacing: 0.08em;
}


/* ============================================================
   11. HERO PARALLAX
   ============================================================ */

.hero-parallax {
  will-change: transform;
  /* No CSS transition — JS drives this at rAF speed */
  transition: none;
}

/* Hero background initial zoom-out reveal */
.hero-bg {
  transform: scale(1.06);
  transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-bg.loaded {
  transform: scale(1);
}


/* ============================================================
   12. PAGE TRANSITION — body fade-in on load
   ============================================================ */

@keyframes pageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body {
  animation: pageIn 0.6s ease-out;
}


/* ============================================================
   13. SERVICE CARD — spotlight glow on hover
   Mouse position driven by CSS custom properties set via JS
   ============================================================ */

.service-card {
  position: relative;
  overflow: hidden;
}

.service-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(139, 197, 63, 0.06) 0%,
    transparent 60%
  );
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.service-card:hover::after {
  opacity: 1;
}


/* ============================================================
   14. TYPEWRITER CURSOR (content managed via JS)
   ============================================================ */

@keyframes blink {
  50% { opacity: 0; }
}

.typewriter::after {
  content: '|';
  animation: blink 1s step-end infinite;
  color: #8BC53F;
  font-weight: 300;
  margin-left: 2px;
}


/* ============================================================
   EXTRA — Hero spotlight overlay
   CSS var --spotlight-x / --spotlight-y set by JS on mousemove
   ============================================================ */

.hero {
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 60% at var(--spotlight-x, 50%) var(--spotlight-y, 30%),
    rgba(139, 197, 63, 0.04) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 1;
  transition: background 0.1s ease;
}

/* Ensure hero content sits above the spotlight layer */
.hero > *:not(.hero-bg) {
  position: relative;
  z-index: 2;
}


/* ============================================================
   EXTRA — Why / Feature cards
   ============================================================ */

.why-card,
.testimonial-card {
  position: relative;
  overflow: hidden;
}

.why-card::after,
.testimonial-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(139, 197, 63, 0.05) 0%,
    transparent 65%
  );
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.why-card:hover::after,
.testimonial-card:hover::after {
  opacity: 1;
}


/* ============================================================
   REDUCED MOTION — respect OS preference
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

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

  .word-reveal .word {
    opacity: 1;
    transform: none;
  }
}