/* -------------------------------------------------------------
   SCROLL DRIVEN ANIMATIONS (NATIVE SUPPORT)
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
    /* 1. Scroll Progress Bar */
    @keyframes grow-progress {
      from {
        transform: scaleX(0);
      }
      to {
        transform: scaleX(1);
      }
    }

    #scroll-progress {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 3px;
      background-color: var(--accent-orange);
      box-shadow: 0 0 8px var(--accent-orange);
      z-index: 10001; /* Above header */
      transform-origin: 0 50%;
      animation: grow-progress auto linear;
      animation-timeline: scroll();
    }
  }
}

/* -------------------------------------------------------------
   STANDARD KEYFRAMES
   ------------------------------------------------------------- */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

@keyframes gridGlow {
  0% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.1;
  }
}

/* -------------------------------------------------------------
   ANIMATION CLASSES
   ------------------------------------------------------------- */
.fade-in {
  animation: fadeIn var(--transition-normal) forwards;
}

.fade-in-up {
  animation: fadeInUp var(--transition-normal) forwards;
}

.fade-in-right {
  animation: fadeInRight var(--transition-normal) forwards;
}

/* Scroll Reveal States (Used by scroll.js/IntersectionObserver/GSAP) */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity var(--transition-normal),
    transform var(--transition-normal);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Welder flash pulse effect */
.weld-flash {
  animation: flash 0.1s infinite alternate;
}

@keyframes flash {
  0% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}

/* -------------------------------------------------------------
   ACCESSIBILITY & REDUCED MOTION
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-delay: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  #scroll-progress {
    animation: none !important;
    transform: none !important;
    width: 100% !important;
    opacity: 0.5;
  }
}