/* ==========================================================================
   MenQor Holdings — animations.css
   Reusable keyframe library only. Structural/base component styles live in
   style.css; this file adds ONLY the motion layer on top of them.

   prefers-reduced-motion: already handled globally by style.css's safety
   net (`*{ animation-duration:0.01ms !important; ... }`), which overrides
   every animation defined below regardless of load order, since it's
   !important. Not re-declared here to avoid duplication.
   ========================================================================== */

:root {
  /* Extends style.css's --dur-fast/--dur-base with slower + looping timings */
  --dur-slow: 600ms;
  --dur-loop: 3000ms;
  --reveal-distance: 32px;
  --reveal-delay: 0ms; /* override inline per-element for staggered reveals */
}

/* ==========================================================================
   Fade
   ========================================================================== */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.anim-fade-in {
  animation: fade-in var(--dur-slow) var(--ease-standard) forwards;
}

/* ==========================================================================
   Slide
   ========================================================================== */
@keyframes slide-up {
  from { opacity: 0; transform: translateY(var(--reveal-distance)); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-slide-up {
  animation: slide-up var(--dur-slow) var(--ease-standard) forwards;
}

/* ==========================================================================
   Scale
   ========================================================================== */
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
.anim-scale-in {
  animation: scale-in var(--dur-base) var(--ease-standard) forwards;
}

/* ==========================================================================
   Glow
   ========================================================================== */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(0, 212, 255, 0); }
  50%      { box-shadow: var(--shadow-glow); }
}
.anim-glow-pulse {
  animation: glow-pulse var(--dur-loop) ease-in-out infinite;
}

/* ==========================================================================
   Floating
   ========================================================================== */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.anim-float {
  animation: float var(--dur-loop) ease-in-out infinite;
}

/* ==========================================================================
   Shimmer
   ========================================================================== */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.anim-shimmer {
  background-image: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: shimmer 2.4s linear infinite;
}

/* ==========================================================================
   Reveal — scroll-triggered. animation.js adds .is-visible via
   IntersectionObserver. Set --reveal-delay inline per element to stagger
   a group (e.g. style="--reveal-delay:120ms" on the 2nd item, 240ms on 3rd).
   ========================================================================== */
@keyframes reveal {
  from { opacity: 0; transform: translateY(var(--reveal-distance)); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
}
.reveal.is-visible {
  animation: reveal var(--dur-slow) var(--ease-standard) forwards;
  animation-delay: var(--reveal-delay);
}

/* ==========================================================================
   Gradient Motion
   ========================================================================== */
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.anim-gradient-shift {
  background: var(--gradient-signal);
  background-size: 200% 200%;
  animation: gradient-shift 8s ease infinite;
}

/* ==========================================================================
   Button Hover — additive shine sweep only. Lift/glow/color are already
   transitioned in style.css; this layer never touches those properties.
   ========================================================================== */
@keyframes button-shine {
  from { transform: translateX(-120%) skewX(-15deg); }
  to   { transform: translateX(220%) skewX(-15deg); }
}
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 30%; height: 100%;
  background: rgba(255, 255, 255, 0.25);
  pointer-events: none;
}
.btn:hover::after, .btn:focus-visible::after {
  animation: button-shine var(--dur-base) var(--ease-standard);
}

/* ==========================================================================
   Card Hover — shimmer sweep only. Lift/shadow/border-color are already
   transitioned in style.css; this is a separate, non-conflicting layer.
   ========================================================================== */
.industry-card, .project-card { position: relative; overflow: hidden; }
.industry-card::after, .project-card::after {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(100deg, transparent 40%, rgba(255,255,255,0.06) 50%, transparent 60%);
  background-size: 200% 100%;
  background-position: -200% 0;
  pointer-events: none;
}
.industry-card:hover::after, .project-card:hover::after,
.industry-card:focus-within::after, .project-card:focus-within::after {
  animation: shimmer 1.2s ease;
}

/* ==========================================================================
   Navbar Transitions — scroll-triggered state only. Structural nav rules
   stay in style.css; navbar.js toggles .nav--scrolled on scroll.
   ========================================================================== */
.nav {
  transition: background var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.nav--scrolled {
  background: rgba(5, 5, 5, 0.92);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   Loading Effects
   ========================================================================== */
@keyframes orbit-spin {
  to { transform: rotate(360deg); }
}
.anim-orbit-spin {
  animation: orbit-spin 2.4s linear infinite;
}
.loading-screen {
  transition: opacity var(--dur-slow) var(--ease-standard),
              visibility var(--dur-slow) var(--ease-standard);
}
.loading-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}