/* ============================================================
   motion.css — Nexxt Site Manager motion foundation
   ------------------------------------------------------------
   A single, controlled source of subtle motion. ONE file, used
   everywhere, so motion stays consistent and never becomes CSS
   chaos.

   SAFETY CONTRACT — this file is designed to be harmless:
   - Purely additive. Linking it changes NOTHING until an `nx-`
     class is applied to an element. No element is targeted by
     default.
   - GPU-friendly. Core utilities animate only `transform` and
     `opacity` (compositor-only — no layout, no reflow).
   - Layout-safe. Nothing here changes an element's size, spacing,
     or final resting position. Entrance effects settle to
     `transform: none`; hover effects revert on mouse-out.
   - Accessible. Under `prefers-reduced-motion: reduce` ALL motion
     is neutralised globally (see block below).
   - Lightweight. A small, fixed set of tokens + utilities.

   USAGE: add an `nx-` class to an element. Examples:
     <div class="card nx-rise-in">              entrance
     <button class="nx-press nx-hover-lift">     micro-interaction
     <span class="status-dot nx-pulse">          "alive" state
   Stack entrance + a `nx-delay-*` class to stagger groups.
   ============================================================ */

/* ---- Motion tokens — the single source of timing & easing ---- */
:root {
  --nx-fast:    140ms;
  --nx-base:    240ms;
  --nx-slow:    480ms;
  --nx-ambient: 16s;       /* slow ambient loops */

  --nx-ease:        cubic-bezier(.4, 0, .2, 1);    /* standard */
  --nx-ease-out:    cubic-bezier(.16, 1, .3, 1);   /* soft settle */
  --nx-ease-inout:  cubic-bezier(.45, 0, .2, 1);   /* ambient */
}

/* ---- Accessibility: respect the OS "reduce motion" setting ----
   This neutralises every animation/transition on the whole page,
   including the utilities below. Non-negotiable. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   1. ENTRANCE — fade / rise on load. GPU-only (opacity+transform).
   ============================================================ */
@keyframes nx-fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes nx-rise-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0) }
  to   { opacity: 1; transform: translate3d(0, 0, 0) }
}

.nx-fade-in { animation: nx-fade-in var(--nx-base) var(--nx-ease) both; }
.nx-rise-in { animation: nx-rise-in var(--nx-slow) var(--nx-ease-out) both; }

/* Stagger helpers — put on grouped items for a calm cascade. */
.nx-delay-1 { animation-delay: 60ms;  }
.nx-delay-2 { animation-delay: 120ms; }
.nx-delay-3 { animation-delay: 180ms; }
.nx-delay-4 { animation-delay: 240ms; }

/* ============================================================
   2. MICRO-INTERACTIONS — hover / press. GPU-only (transform).
   ============================================================ */
.nx-hover-lift {
  transition: transform var(--nx-fast) var(--nx-ease),
              box-shadow var(--nx-fast) var(--nx-ease);
  will-change: transform;
}
.nx-hover-lift:hover { transform: translate3d(0, -2px, 0); }

.nx-press { transition: transform var(--nx-fast) var(--nx-ease); }
.nx-press:active { transform: scale(.985); }

/* ============================================================
   3. STATE — subtle "alive" pulse. GPU-only (opacity+transform).
   For status dots / live indicators — use sparingly.
   ============================================================ */
@keyframes nx-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%      { opacity: .55; transform: scale(.9);   }
}
.nx-pulse { animation: nx-pulse 2.4s var(--nx-ease) infinite; }

/* ============================================================
   4. SMOOTH STATE TRANSITIONS — for show/hide & content swaps.
   Apply to elements whose opacity/transform changes via JS.
   ============================================================ */
.nx-transition {
  transition: opacity var(--nx-base) var(--nx-ease),
              transform var(--nx-base) var(--nx-ease);
}

/* ============================================================
   5. AMBIENT — slow gradient drift for background/hero accents.
   Animates `background-position` only (cheap, no reflow).
   The element must already define a gradient background; this
   only sets it in motion. Use on at most a few accent surfaces.
   ============================================================ */
@keyframes nx-gradient-drift {
  0%   { background-position: 0% 50%;   }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%;   }
}
.nx-ambient {
  background-size: 200% 200%;
  animation: nx-gradient-drift var(--nx-ambient) var(--nx-ease-inout) infinite;
}

/* ============================================================
   6. LOADING — intelligent shimmer for loading/skeleton states.
   Animates `background-position` only.
   ============================================================ */
@keyframes nx-shimmer {
  0%   { background-position: -150% 0; }
  100% { background-position:  250% 0; }
}
.nx-shimmer {
  background-image: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,.07) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: nx-shimmer 1.6s linear infinite;
}

/* ============================================================
   ACCENT UTILITIES — use sparingly (a handful of elements).
   The glow animates `box-shadow`, which is slightly heavier than
   transform/opacity. Fine on a few accent elements at a slow
   loop; do NOT apply broadly.
   ============================================================ */
@keyframes nx-glow {
  0%, 100% { box-shadow: 0 0 0 0     rgba(201, 149, 42, 0);    }
  50%      { box-shadow: 0 0 18px 1px rgba(201, 149, 42, .22); }
}
.nx-glow { animation: nx-glow var(--nx-ambient) var(--nx-ease-inout) infinite; }

/* End of motion.css — keep all motion definitions in THIS file. */