/* ============================================================
   ERS ENERGY — ANIMATIONS & TRANSITIONS
   animations.css — keyframes, scroll reveals, hover effects
   ============================================================ */

/* ============================================================
   SCROLL-TRIGGERED REVEAL
   ============================================================ */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays for grid children */
.animate-stagger .animate-on-scroll:nth-child(1) { transition-delay: 0ms; }
.animate-stagger .animate-on-scroll:nth-child(2) { transition-delay: 80ms; }
.animate-stagger .animate-on-scroll:nth-child(3) { transition-delay: 160ms; }
.animate-stagger .animate-on-scroll:nth-child(4) { transition-delay: 240ms; }
.animate-stagger .animate-on-scroll:nth-child(5) { transition-delay: 320ms; }
.animate-stagger .animate-on-scroll:nth-child(6) { transition-delay: 400ms; }

/* Fade in only (no transform) */
.animate-fade {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.animate-fade.is-visible {
  opacity: 1;
}

/* Slide from left */
.animate-slide-left {
  opacity: 0;
  transform: translateX(-24px);
  transition:
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-slide-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide from right */
.animate-slide-right {
  opacity: 0;
  transform: translateX(24px);
  transition:
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-slide-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale reveal */
.animate-scale {
  opacity: 0;
  transform: scale(0.95);
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ============================================================
   HERO ANIMATIONS
   ============================================================ */

/* Atmospheric hero pulse */
@keyframes hero-pulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

.hero__bg {
  animation: hero-pulse 8s ease-in-out infinite;
}

/* Hero content entrance */
@keyframes hero-enter {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__content {
  animation: hero-enter 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero__eyebrow {
  animation: hero-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.hero__title {
  animation: hero-enter 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

.hero__subtitle,
.hero__tagline {
  animation: hero-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}

.hero__actions {
  animation: hero-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}

/* Floating decoration */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}


/* ============================================================
   BUTTON INTERACTIONS
   ============================================================ */

/* Glow pulse on hover for primary CTA */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 16px rgba(242,101,34,0.3); }
  50%       { box-shadow: 0 0 28px rgba(242,101,34,0.5), 0 0 0 1px rgba(242,101,34,0.2); }
}

.btn--primary:focus-visible {
  animation: glow-pulse 2s ease infinite;
  outline: none;
}

/* ============================================================
   NAV EFFECTS
   ============================================================ */

/* Smooth blur transition when scrolled */
.nav {
  will-change: background, backdrop-filter;
}

/* Dropdown appear */
@keyframes dropdown-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ============================================================
   COUNTER ANIMATION (number count-up)
   ============================================================ */
.count-up {
  display: inline-block;
}

/* ============================================================
   CARD EFFECTS
   ============================================================ */

/* Shimmer effect on loading state */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.card--loading {
  background: linear-gradient(
    90deg,
    var(--bg-surface) 25%,
    var(--bg-elevated) 50%,
    var(--bg-surface) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ============================================================
   SEGMENT CARD ENERGY AURA (subtle background animation)
   ============================================================ */
@keyframes aura-rotate {
  from { transform: rotate(0deg) translateX(120%) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(120%) rotate(-360deg); }
}

/* ============================================================
   STAT COUNTER ENTRANCE
   ============================================================ */
@keyframes stat-count-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.stat-bar__item.is-visible .stat-bar__value {
  animation: stat-count-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.stat-bar__item.is-visible:nth-child(1) .stat-bar__value { animation-delay: 0ms; }
.stat-bar__item.is-visible:nth-child(2) .stat-bar__value { animation-delay: 80ms; }
.stat-bar__item.is-visible:nth-child(3) .stat-bar__value { animation-delay: 160ms; }
.stat-bar__item.is-visible:nth-child(4) .stat-bar__value { animation-delay: 240ms; }

/* ============================================================
   MOBILE DRAWER OVERLAY
   ============================================================ */
@keyframes fade-in-overlay {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.nav__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: calc(var(--z-sticky) - 2);
  display: none;
  animation: fade-in-overlay 0.2s ease;
}

.nav__overlay.open {
  display: block;
}

/* ============================================================
   PAGE TRANSITION (optional smooth fade between pages)
   ============================================================ */
@keyframes page-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body {
  animation: page-enter 0.3s ease;
}

/* ============================================================
   FOCUS STYLES (accessibility)
   ============================================================ */
*:focus-visible {
  outline: 2px solid var(--accent-orange);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *:not(.fp):not(.globe-section *):not(.industries-marquee__row):not(.star-btn):not(.grad-btn):not(.ea-card__shimmer):not(.ea-border-line),
  *:not(.star-btn)::before, *:not(.grad-btn)::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .animate-on-scroll,
  .animate-fade,
  .animate-slide-left,
  .animate-slide-right,
  .animate-scale {
    opacity: 1;
    transform: none;
  }

}