/* ==========================================================================
   NEXORA — Animation & Reveal System
   Premium, subtle, purposeful. Paired with js/main.js IntersectionObserver.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Scroll-reveal primitives
   Usage: add [data-reveal] (fade-up default), or [data-reveal="fade"] /
   [data-reveal="scale"] / [data-reveal="slide-left"] / [data-reveal="slide-right"].
   Optional [data-reveal-delay="1".."6"] for staggered groups.
   JS toggles the .is-visible class when the element enters the viewport.
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transition:
    opacity var(--duration-slow) var(--ease-premium),
    transform var(--duration-slow) var(--ease-premium);
  will-change: opacity, transform;
}

[data-reveal="fade-up"],
[data-reveal=""] {
  transform: translateY(24px);
}

[data-reveal="fade"] {
  transform: none;
}

[data-reveal="scale"] {
  transform: scale(0.94);
}

[data-reveal="slide-left"] {
  transform: translateX(-32px);
}

[data-reveal="slide-right"] {
  transform: translateX(32px);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

[data-reveal-delay="1"] { transition-delay: 80ms; }
[data-reveal-delay="2"] { transition-delay: 160ms; }
[data-reveal-delay="3"] { transition-delay: 240ms; }
[data-reveal-delay="4"] { transition-delay: 320ms; }
[data-reveal-delay="5"] { transition-delay: 400ms; }
[data-reveal-delay="6"] { transition-delay: 480ms; }
[data-reveal-delay="7"] { transition-delay: 560ms; }
[data-reveal-delay="8"] { transition-delay: 640ms; }
[data-reveal-delay="9"] { transition-delay: 720ms; }
[data-reveal-delay="10"] { transition-delay: 800ms; }

/* --------------------------------------------------------------------------
   Ambient background drift — slow, GPU-friendly (transform + opacity only)
   -------------------------------------------------------------------------- */
@keyframes drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(24px, -18px, 0) scale(1.05); }
}

@keyframes drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-20px, 16px, 0) scale(1.04); }
}

.bg-ambient::before {
  animation: drift-a 18s ease-in-out infinite;
}

.bg-ambient::after {
  animation: drift-b 22s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Subtle idle float — for dashboard mockups / floating badges (later steps)
   -------------------------------------------------------------------------- */
@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.float-soft {
  animation: float-soft 7s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Status / activity pulse — e.g. "automation active" indicator dots
   -------------------------------------------------------------------------- */
@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.pulse-dot {
  animation: pulse-dot 2.2s ease-out infinite;
}

/* --------------------------------------------------------------------------
   Simple utility keyframes
   -------------------------------------------------------------------------- */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fade-in var(--duration-slow) var(--ease-premium) both;
}

/* --------------------------------------------------------------------------
   Reduced motion — disable/shorten all non-essential motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .bg-ambient::before,
  .bg-ambient::after,
  .float-soft,
  .pulse-dot {
    animation: none !important;
  }
}