/* =============================================================================
   ANIMATIONS.CSS — UE Landworks
   Keyframes, scroll-reveal classes, and motion utilities.
   Requires global.css to be loaded first.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   FADE-UP SCROLL REVEAL
   Elements start hidden and translate up 30px. The IntersectionObserver in
   scroll-reveal.js adds .is-visible when the element enters the viewport.
   Apply .fade-up to any element you want to animate in on scroll.
   Use --reveal-delay on children for staggered entrance.
   ----------------------------------------------------------------------------- */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-slow),
              transform var(--transition-slow);
}

.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger helpers — apply to direct children via JS or inline style,
   or use these utility classes for up to 8 staggered siblings. */
.fade-up:nth-child(1) { transition-delay: 0s; }
.fade-up:nth-child(2) { transition-delay: 0.1s; }
.fade-up:nth-child(3) { transition-delay: 0.2s; }
.fade-up:nth-child(4) { transition-delay: 0.3s; }
.fade-up:nth-child(5) { transition-delay: 0.4s; }
.fade-up:nth-child(6) { transition-delay: 0.5s; }
.fade-up:nth-child(7) { transition-delay: 0.6s; }
.fade-up:nth-child(8) { transition-delay: 0.7s; }

/* Explicit delay modifiers — use when nth-child stagger isn't appropriate */
.fade-up--delay-1 { transition-delay: 0.1s; }
.fade-up--delay-2 { transition-delay: 0.2s; }
.fade-up--delay-3 { transition-delay: 0.3s; }
.fade-up--delay-4 { transition-delay: 0.4s; }
.fade-up--delay-5 { transition-delay: 0.5s; }


/* -----------------------------------------------------------------------------
   HERO LOGO FLOAT
   Gentle vertical float loop applied to the logo display in the hero section.
   Usage: <div class="float-anim">...</div>
   ----------------------------------------------------------------------------- */
@keyframes float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-14px); }
  100% { transform: translateY(0px); }
}

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

/* Subtle glow pulse in sync with float — applied to the logo's filter */
@keyframes glow-pulse {
  0%   { filter: var(--logo-glow) brightness(1); }
  50%  { filter: drop-shadow(0 0 18px rgba(244, 123, 0, 0.75)) brightness(1.05); }
  100% { filter: var(--logo-glow) brightness(1); }
}

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


/* -----------------------------------------------------------------------------
   MARQUEE INFINITE SCROLL
   Applied to .marquee-bar__track in components.css.
   The HTML track content must be duplicated so the loop is seamless.
   Speed: 30s — adjust the duration on the element if more/fewer items exist.
   ----------------------------------------------------------------------------- */
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.marquee-scroll {
  animation: marquee-scroll 30s linear infinite;
}

/* Pause on hover — useful if user wants to read a specific item */
.marquee-bar:hover .marquee-scroll {
  animation-play-state: paused;
}

/* Speed modifiers */
.marquee-scroll--slow   { animation-duration: 50s; }
.marquee-scroll--fast   { animation-duration: 16s; }


/* -----------------------------------------------------------------------------
   FORM VALIDATION SHAKE
   Applied by form.js to .form-input elements that fail validation.
   The .shake class is removed after the animation completes via JS.
   ----------------------------------------------------------------------------- */
@keyframes input-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

/* Note: this keyframe is also referenced in components.css on .form-input.shake.
   Defined here as the canonical source; components.css references it by name. */


/* -----------------------------------------------------------------------------
   MODAL ENTRANCE
   The modal-box transition is handled via CSS transition in components.css.
   The backdrop fade is also a transition. No keyframe needed there.
   This block provides the mobile sheet slide-up variant.
   ----------------------------------------------------------------------------- */
@keyframes sheet-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@media (max-width: 767px) {
  .modal-backdrop.is-open .modal-box {
    animation: sheet-up var(--transition-base) ease forwards;
  }
}


/* -----------------------------------------------------------------------------
   UTILITY ANIMATION CLASSES
   ----------------------------------------------------------------------------- */

/* Spin — used for loading indicators */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spin {
  animation: spin 0.75s linear infinite;
}

/* Fade in only — no translate, for overlays */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fade-in {
  animation: fade-in var(--transition-base) ease forwards;
}

/* Scale in — for badges or pop-in elements */
@keyframes scale-in {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.scale-in {
  animation: scale-in var(--transition-base) ease forwards;
}


/* -----------------------------------------------------------------------------
   PREFERS-REDUCED-MOTION
   Disables all animations and transitions for users who have requested
   reduced motion in their OS accessibility settings.
   This block intentionally overrides every animation in this file.
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* Kill all keyframe animations */
  .fade-up,
  .float-anim,
  .float-anim--glow,
  .marquee-scroll,
  .spin,
  .fade-in,
  .scale-in {
    animation: none !important;
  }

  /* Reveal fade-up elements immediately — don't hide content */
  .fade-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Reset transition delays so nothing waits */
  .fade-up:nth-child(n),
  .fade-up--delay-1,
  .fade-up--delay-2,
  .fade-up--delay-3,
  .fade-up--delay-4,
  .fade-up--delay-5 {
    transition-delay: 0s !important;
  }

  /* Stop the marquee in place — content remains readable */
  .marquee-scroll {
    transform: none !important;
  }

  /* Keep logo visible but static */
  .float-anim,
  .float-anim--glow {
    filter: var(--logo-glow) !important;
    transform: none !important;
  }

  /* Collapse all other transitions sitewide */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}