/* ==========================================================
   SECTION 01 — HERO MOTION
   ========================================================== */


/* ----------------------------------------------------------
   01. INITIAL ENTRANCE STATES
   ---------------------------------------------------------- */

.section--hero .hero-eyebrow,
.section--hero .hero-title__line,
.section--hero .hero-subtitle,
.section--hero .hero-descriptor,
.section--hero .hero-actions {
  opacity: 0;
  transform: translateY(22px);
}


/* ----------------------------------------------------------
   02. HERO CONTENT ENTRANCE
   ---------------------------------------------------------- */

.section--hero .hero-eyebrow {
  animation: heroReveal 700ms ease-out 120ms forwards;
}

.section--hero .hero-title__line:nth-child(1) {
  animation: heroReveal 850ms cubic-bezier(0.22, 1, 0.36, 1) 220ms forwards;
}

.section--hero .hero-title__line:nth-child(2) {
  animation: heroReveal 850ms cubic-bezier(0.22, 1, 0.36, 1) 310ms forwards;
}

.section--hero .hero-title__line:nth-child(3) {
  animation: heroReveal 850ms cubic-bezier(0.22, 1, 0.36, 1) 400ms forwards;
}

.section--hero .hero-title__line:nth-child(4) {
  animation: heroReveal 850ms cubic-bezier(0.22, 1, 0.36, 1) 490ms forwards;
}

.section--hero .hero-subtitle {
  animation: heroReveal 750ms ease-out 620ms forwards;
}

.section--hero .hero-descriptor {
  animation: heroReveal 750ms ease-out 700ms forwards;
}

.section--hero .hero-actions {
  animation: heroReveal 750ms ease-out 780ms forwards;
}


/* ----------------------------------------------------------
   03. REVEAL KEYFRAME
   ---------------------------------------------------------- */

@keyframes heroReveal {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ----------------------------------------------------------
   04. BACKGROUND PHOTOGRAPH
   Very slow movement — it should be felt, not noticed.
   ---------------------------------------------------------- */

.hero-media__image {
  animation: heroImageDrift 18s ease-out forwards;
}

@keyframes heroImageDrift {
  from {
    transform: scale(1.045);
  }

  to {
    transform: scale(1.02);
  }
}


/* ----------------------------------------------------------
   05. ENGINEERING GRID ENTRANCE
   ---------------------------------------------------------- */

.hero-engineering__grid {
  opacity: 0;

  animation: engineeringGridReveal 1.5s ease-out 650ms forwards;
}

@keyframes engineeringGridReveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


/* ----------------------------------------------------------
   06. ENERGY PATH DRAW
   ---------------------------------------------------------- */

.hero-energy-path--orange {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;

  animation: energyPathDraw 2.4s ease-out 900ms forwards;
}

@keyframes energyPathDraw {
  to {
    stroke-dashoffset: 0;
  }
}


/* ----------------------------------------------------------
   07. GREEN ENERGY PATH
   ---------------------------------------------------------- */

.hero-energy-path--green {
  animation:
    greenPathReveal 1.5s ease-out 1.2s forwards,
    greenEnergyFlow 14s linear 2.7s infinite;

  opacity: 0;
}

@keyframes greenPathReveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.78;
  }
}

@keyframes greenEnergyFlow {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -120;
  }
}


/* ----------------------------------------------------------
   08. ENERGY NODE
   ---------------------------------------------------------- */

.hero-energy-node {
  opacity: 0;

  animation:
    energyNodeReveal 700ms ease-out 2.1s forwards,
    energyNodePulse 4.5s ease-in-out 2.8s infinite;
}

@keyframes energyNodeReveal {
  to {
    opacity: 0.9;
  }
}

@keyframes energyNodePulse {
  0%,
  100% {
    opacity: 0.65;
  }

  50% {
    opacity: 1;
  }
}


/* ----------------------------------------------------------
   09. SCROLL CUE
   ---------------------------------------------------------- */

.hero-scroll-cue {
  opacity: 0;

  animation: scrollCueReveal 800ms ease-out 1.5s forwards;
}

@keyframes scrollCueReveal {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-scroll-cue__line {
  transform-origin: top;

  animation: scrollLinePulse 2.8s ease-in-out 2.2s infinite;
}

@keyframes scrollLinePulse {
  0%,
  100% {
    transform: scaleY(0.55);
    opacity: 0.45;
  }

  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}


/* ----------------------------------------------------------
   10. REDUCED MOTION
   Accessibility fallback
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .section--hero .hero-eyebrow,
  .section--hero .hero-title__line,
  .section--hero .hero-subtitle,
  .section--hero .hero-descriptor,
  .section--hero .hero-actions,
  .hero-engineering__grid,
  .hero-energy-path--orange,
  .hero-energy-path--green,
  .hero-energy-node,
  .hero-scroll-cue,
  .hero-scroll-cue__line,
  .hero-media__image {
    animation: none !important;
    transition: none !important;
  }

  .section--hero .hero-eyebrow,
  .section--hero .hero-title__line,
  .section--hero .hero-subtitle,
  .section--hero .hero-descriptor,
  .section--hero .hero-actions,
  .hero-engineering__grid,
  .hero-energy-path--orange,
  .hero-energy-path--green,
  .hero-energy-node,
  .hero-scroll-cue {
    opacity: 1;
    transform: none;
  }

  .hero-energy-path--orange,
  .hero-energy-path--green {
    stroke-dasharray: initial;
    stroke-dashoffset: 0;
  }

  .hero-media__image {
    transform: scale(1.02);
  }
}

/* ============================================================
   SECTION 06 — PEACE OF MIND
   ============================================================ */

@keyframes support-status-pulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 0 0 4px rgba(95, 143, 99, 0.24),
            0 0 10px rgba(95, 143, 99, 0.12);
    }

    50% {
        transform: scale(1.14);
        box-shadow:
            0 0 0 10px rgba(95, 143, 99, 0.13),
            0 0 16px rgba(95, 143, 99, 0.14);
    }
}

.section--support .support-monitor-dot {
    animation: support-status-pulse 3.6s ease-in-out infinite;
}

@keyframes support-evolution-flow {
    0% {
        opacity: 0;
        transform: translateX(-6px);
    }

    25% {
        opacity: 0.35;
    }

    60% {
        opacity: 0.7;
    }

    100% {
        opacity: 0;
        transform: translateX(6px);
    }
}

.section--support .support-evolution-line::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 28%;
    height: 3px;
background: rgba(63, 122, 70, 0.82);
    animation: support-evolution-flow 4.8s ease-in-out infinite;
}

.section--support .support-evolution-line:nth-child(4)::before {
    animation-delay: 2.4s;
}

@media (prefers-reduced-motion: reduce) {
    .section--support .support-monitor-dot,
    .section--support .support-monitor-bars span,
    .section--support .support-evolution-line::before {
        animation: none !important;
    }
}

@keyframes support-evolution-flow-mobile {
    0% {
        top: 0;
        opacity: 0;
    }

    15% {
        opacity: 0.9;
    }

    85% {
        opacity: 0.9;
    }

    100% {
        top: 72%;
        opacity: 0;
    }
}

@media (max-width: 820px) {
    .section--support .support-evolution-line::before {
        top: 0;
        left: 0;
        width: 1px;
        height: 28%;
        background: rgba(95, 143, 99, 0.78);
        animation-name: support-evolution-flow-mobile;
    }
   }
/* TODAY — SYSTEM OPERATING BARS */

 @keyframes support-monitor-bar {
    0%,
    15% {
        background: rgba(95, 143, 99, 0.18);
        box-shadow: none;
    }

    35%,
    75% {
        background: rgba(63, 122, 70, 0.88);
        box-shadow: 0 0 8px rgba(63, 122, 70, 0.16);
    }

    100% {
        background: rgba(95, 143, 99, 0.18);
        box-shadow: none;
    }
}

.section--support .support-monitor-bars span {
    animation: support-monitor-bar 5s ease-in-out infinite;
}

.section--support .support-monitor-bars span:nth-child(2) {
    animation-delay: 0.4s;
}

.section--support .support-monitor-bars span:nth-child(3) {
    animation-delay: 0.8s;
}

.section--support .support-monitor-bars span:nth-child(4) {
    animation-delay: 1.2s;
}

.section--support .support-monitor-bars span:nth-child(5) {
    animation-delay: 1.6s;
}