/* ============================================================
 * animations.css — Acid Lime Animation System
 * XPlus Technologies Website Redesign
 *
 * Keyframe definitions, reveal utilities, interactive motion
 * classes, and reduced-motion safeguards.
 * ============================================================ */


/* ==========================================================
 * 1. KEYFRAME DEFINITIONS
 * ========================================================== */

/* --- Entrance: fade up --- */
@keyframes acid-fade-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- Entrance: fade in (opacity only) --- */
@keyframes acid-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- Entrance: slide from left --- */
@keyframes acid-slide-right {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- Entrance: scale in --- */
@keyframes acid-scale-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* --- Ambient: pulsing glow --- */
@keyframes acid-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--glow); }
  50%      { box-shadow: 0 0 30px 6px var(--glow); }
}

/* --- Ambient: gentle float --- */
@keyframes acid-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* --- Ambient: organic drift --- */
@keyframes acid-drift {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(30px, -20px); }
  100% { transform: translate(0, 0); }
}

/* --- Ambient: shimmer sweep --- */
@keyframes acid-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* --- Terminal: cursor blink --- */
@keyframes acid-blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* --- Scan line effect --- */
@keyframes acid-scan {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* --- Text: staggered word entrance --- */
@keyframes acid-word-stagger {
  from {
    opacity: 0;
    transform: translateY(40px) rotateX(-30deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- Grid: slow pan --- */
@keyframes acid-grid-pan {
  from { background-position: 0 0; }
  to   { background-position: 56px 56px; }
}

/* --- Background: gradient shift --- */
@keyframes acid-gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* --- Marquee: infinite horizontal scroll --- */
@keyframes acid-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- Badge dot pulse (used by .badge .dot) --- */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.4); }
}


/* ==========================================================
 * 2. SCROLL-REVEAL CLASSES
 * ========================================================== */

/* Base: hidden until triggered by IntersectionObserver */
.reveal {
  opacity: 0;
}

/* Active state — default fade-up */
.reveal.in {
  animation: acid-fade-up 900ms var(--ease-out) forwards;
}

/* Staggered delays (80ms increments) */
.reveal-1.in { animation: acid-fade-up 900ms var(--ease-out) forwards; animation-delay: 80ms; }
.reveal-2.in { animation: acid-fade-up 900ms var(--ease-out) forwards; animation-delay: 160ms; }
.reveal-3.in { animation: acid-fade-up 900ms var(--ease-out) forwards; animation-delay: 240ms; }
.reveal-4.in { animation: acid-fade-up 900ms var(--ease-out) forwards; animation-delay: 320ms; }
.reveal-5.in { animation: acid-fade-up 900ms var(--ease-out) forwards; animation-delay: 400ms; }
.reveal-6.in { animation: acid-fade-up 900ms var(--ease-out) forwards; animation-delay: 480ms; }

/* Variant reveals */
.reveal-fade.in   { animation: acid-fade-in 700ms var(--ease-out) forwards; }
.reveal-slide.in  { animation: acid-slide-right 800ms var(--ease-out) forwards; }
.reveal-scale.in  { animation: acid-scale-in 700ms var(--ease-out) forwards; }


/* ==========================================================
 * 3. BUTTON ANIMATION CLASSES
 * ========================================================== */

/* Pulse ring around CTA buttons */
.btn-pulse {
  animation: acid-pulse 2.5s ease-in-out infinite;
}

/* Shimmer text effect for button labels */
.btn-shimmer {
  background: linear-gradient(
    120deg,
    var(--primary-contrast) 0%,
    #fff 45%,
    var(--primary-contrast) 55%,
    var(--primary-contrast) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: acid-shimmer 3s linear infinite;
}


/* ==========================================================
 * 4. CARD TILT (mouse-follow via JS data attributes)
 * ========================================================== */

.card-tilt {
  transform-style: preserve-3d;
  perspective: 800px;
  transition: transform 350ms var(--ease-out);
}

.card-tilt:hover {
  transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
}

.card-tilt .card-tilt-inner {
  transform: translateZ(30px);
}


/* ==========================================================
 * 5. GRADIENT TEXT
 * ========================================================== */

.gradient-text {
  background: linear-gradient(
    135deg,
    var(--accent) 0%,
    var(--highlight) 50%,
    var(--accent-glow) 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: acid-gradient-shift 6s ease infinite;
}

/* Static gradient (no animation) */
.gradient-text-static {
  background: linear-gradient(135deg, var(--accent), var(--highlight));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* ==========================================================
 * 6. SCAN LINE OVERLAY
 * ========================================================== */

.scan-line {
  position: relative;
  overflow: hidden;
}

.scan-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in oklab, var(--glow) 6%, transparent) 50%,
    transparent 100%
  );
  height: 30%;
  width: 100%;
  pointer-events: none;
  animation: acid-scan 4s linear infinite;
}


/* ==========================================================
 * 7. FLOATING CHIP
 * ========================================================== */

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

.chip-float:nth-child(2) { animation-delay: -0.8s; }
.chip-float:nth-child(3) { animation-delay: -1.6s; }
.chip-float:nth-child(4) { animation-delay: -2.4s; }
.chip-float:nth-child(5) { animation-delay: -3.2s; }


/* ==========================================================
 * 8. CURSOR BLINK
 * ========================================================== */

.cursor-blink {
  display: inline-block;
  width: 2px;
  height: 1em;
  vertical-align: text-bottom;
  background: var(--accent);
  margin-left: 2px;
  animation: acid-blink 1s step-end infinite;
}


/* ==========================================================
 * 9. MARQUEE TRACK
 * ========================================================== */

.marquee-track {
  display: flex;
  width: max-content;
  animation: acid-marquee 30s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}


/* ==========================================================
 * 10. GLOW ORB DRIFT
 * ========================================================== */

.orb-drift {
  animation: acid-drift 20s ease-in-out infinite;
}

.orb-drift:nth-child(2) { animation-delay: -5s; animation-duration: 25s; }
.orb-drift:nth-child(3) { animation-delay: -10s; animation-duration: 30s; }


/* ==========================================================
 * 11. ACCESSIBILITY — REDUCED MOTION
 * ========================================================== */

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

  /* Kill all animations */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Reveal elements immediately */
  .reveal,
  .reveal.in,
  .reveal-1.in,
  .reveal-2.in,
  .reveal-3.in,
  .reveal-4.in,
  .reveal-5.in,
  .reveal-6.in,
  .reveal-fade.in,
  .reveal-slide.in,
  .reveal-scale.in {
    opacity: 1;
    transform: none;
    animation: none;
  }

  /* Remove floating/pulsing ambient effects */
  .chip-float,
  .orb-drift,
  .btn-pulse,
  .btn-shimmer,
  .marquee-track,
  .gradient-text {
    animation: none;
  }

  /* Disable card hover transforms */
  .card-tilt:hover {
    transform: none;
  }

  /* Keep scan-line static */
  .scan-line::after {
    animation: none;
    opacity: 0;
  }
}