/* ==========================================================================
   HYRAX FASTENERS — ANIMATION LAYER
   GSAP-driven reveals rely on these base/initial states.
   Pure-CSS keyframes cover ambient motion (particles, glows, loaders).
   ========================================================================== */

/* --------------------------------------------------------------------
   Scroll-reveal base states (GSAP toggles .gsap-init -> animated)
   These set the "before" state; GSAP ScrollTrigger animates to visible.
   If JS fails to load, .no-js removes these so content stays visible.
   -------------------------------------------------------------------- */
.reveal-up,
.reveal-fade,
.reveal-left,
.reveal-right,
.reveal-scale{
  opacity: 1;
}

.js .reveal-up{ opacity: 0; transform: translateY(46px); }
.js .reveal-fade{ opacity: 0; }
.js .reveal-left{ opacity: 0; transform: translateX(-50px); }
.js .reveal-right{ opacity: 0; transform: translateX(50px); }
.js .reveal-scale{ opacity: 0; transform: scale(0.92); }

/* Stagger children helper */
.js .reveal-stagger > *{ opacity: 0; transform: translateY(36px); }

/* --------------------------------------------------------------------
   Page load intro
   -------------------------------------------------------------------- */
.preloader{
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--color-bg-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s var(--ease-out), visibility 0.6s;
}
.preloader.is-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader-mark{
  position: relative;
  width: 84px; height: 84px;
}
.preloader-mark svg{ width: 100%; height: 100%; }
.preloader-ring{
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 280;
  stroke-dashoffset: 280;
  animation: preloaderDraw 1.4s var(--ease-soft) infinite;
  transform-origin: center;
}
@keyframes preloaderDraw{
  0%{ stroke-dashoffset: 280; transform: rotate(0deg); }
  50%{ stroke-dashoffset: 60; transform: rotate(180deg); }
  100%{ stroke-dashoffset: 280; transform: rotate(360deg); }
}

/* --------------------------------------------------------------------
   Hero text line reveal (letters/lines animated via GSAP SplitText-like)
   -------------------------------------------------------------------- */
.hero h1 .line-inner{
  display: inline-block;
  transform: translateY(110%);
}

/* --------------------------------------------------------------------
   Floating ambient motion
   -------------------------------------------------------------------- */
@keyframes floatY{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-16px); }
}
@keyframes floatYRev{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(16px); }
}
.float-anim{ animation: floatY 5s var(--ease-soft) infinite; }
.float-anim-rev{ animation: floatYRev 6s var(--ease-soft) infinite; }

@keyframes glowPulse{
  0%, 100%{ opacity: 0.5; transform: scale(1); }
  50%{ opacity: 0.9; transform: scale(1.08); }
}
.glow-pulse{ animation: glowPulse 4s ease-in-out infinite; }

@keyframes rotateSlow{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
.rotate-slow{ animation: rotateSlow 40s linear infinite; }

/* --------------------------------------------------------------------
   Particle canvas
   -------------------------------------------------------------------- */
#particle-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* --------------------------------------------------------------------
   Magnetic button micro state
   -------------------------------------------------------------------- */
.magnetic{
  transition: transform 0.3s var(--ease-out);
}

/* --------------------------------------------------------------------
   Counter digit shimmer (used briefly while counting)
   -------------------------------------------------------------------- */
.stat-number.is-counting{
  text-shadow: 0 0 18px rgba(255,193,7,0.45);
}

/* --------------------------------------------------------------------
   Image reveal mask (product images)
   -------------------------------------------------------------------- */
.img-reveal{
  position: relative;
  overflow: hidden;
}
.img-reveal .img-reveal-panel{
  position: absolute;
  inset: 0;
  background: var(--color-primary);
  transform-origin: left;
  z-index: 2;
}

/* --------------------------------------------------------------------
   Marquee (industries / clients strip)
   -------------------------------------------------------------------- */
.marquee{
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{
  display: flex;
  gap: var(--space-2xl);
  white-space: nowrap;
  animation: marqueeScroll 32s linear infinite;
  width: max-content;
}
.marquee:hover .marquee-track{ animation-play-state: paused; }
@keyframes marqueeScroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.marquee-item{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.marquee-item i{ color: var(--color-primary); }

/* --------------------------------------------------------------------
   Page transition overlay
   -------------------------------------------------------------------- */
.page-transition{
  position: fixed;
  inset: 0;
  background: var(--color-primary);
  z-index: 2500;
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
}
.page-transition.is-active{
  animation: pageTransitionIn 0.6s var(--ease-out) forwards;
}
@keyframes pageTransitionIn{
  0%{ transform: scaleY(0); transform-origin: bottom; }
  50%{ transform: scaleY(1); transform-origin: bottom; }
  50.01%{ transform-origin: top; }
  100%{ transform: scaleY(0); transform-origin: top; }
}

/* --------------------------------------------------------------------
   Spec ticker (rotating capability labels)
   -------------------------------------------------------------------- */
.spec-ticker{
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-primary);
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  min-height: 1.4em;
}
.spec-ticker .word{
  display: inline-block;
}