/* ==========================================================================
 * Fast Woo Checkout — UX Engine 2.0 / Iteration 1
 * Animation engine · Progressive rendering · Loading states
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * Keyframes
 * -------------------------------------------------------------------------- */

@keyframes fwc-ux-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fwc-ux-slide-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
 * Animation classes
 * -------------------------------------------------------------------------- */

.fwc-ux-fade-in {
  animation: fwc-ux-fade-in 220ms ease-out both;
}

.fwc-ux-slide-up {
  animation: fwc-ux-slide-up 200ms ease-out both;
}

/* --------------------------------------------------------------------------
 * State: ready
 * Container has finished loading; progressive children are settled.
 * -------------------------------------------------------------------------- */

.fwc-ux-ready {
  /* intentionally empty — used as a marker and CSS hook */
}

/* --------------------------------------------------------------------------
 * State: loading
 * Applied by JS when a sub-action is in flight (not the initial skeleton).
 * -------------------------------------------------------------------------- */

.fwc-ux-loading {
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 180ms ease;
}

/* --------------------------------------------------------------------------
 * Progressive rendering block
 * Marker class added per-child by applyProgressiveClasses().
 * Fade animation is applied separately via .fwc-ux-fade-in.
 * -------------------------------------------------------------------------- */

.fwc-ux-progressive-block {
  /* marker only */
}

/* --------------------------------------------------------------------------
 * Iteration 2A — State marker classes
 * Applied by JS; no visual change unless theme overrides them.
 * -------------------------------------------------------------------------- */

/* Container is currently loading / aria-busy="true" */
.fwc-ux-busy {
  /* marker only — intentionally no style; prevents queue flush while busy */
}

/* Container finished loading and is interactive */
.fwc-ux-idle {
  /* marker only */
}

/* Intent threshold reached — checkout button interaction detected */
.fwc-ux-intent-detected {
  /* marker only */
}

/* --------------------------------------------------------------------------
 * Iteration 2B — Runtime state marker classes
 * Applied by JS; no visual change unless theme overrides them.
 * -------------------------------------------------------------------------- */

/* Network request in progress for this element (e.g. checkout button warm-up) */
.fwc-ux-prefetching {
  /* marker only */
}

/* Element's destination has been prefetched and warmed */
.fwc-ux-prefetched {
  /* marker only */
}

/* Last data for this element was served from UX cache */
.fwc-ux-cache-hit {
  /* marker only */
}

/* Last data for this element required a network request */
.fwc-ux-cache-miss {
  /* marker only */
}

/* Network Manager is idle — no active network tasks */
.fwc-ux-network-idle {
  /* marker only */
}

/* --------------------------------------------------------------------------
 * Reduced-motion safety
 * -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .fwc-ux-fade-in,
  .fwc-ux-slide-up,
  .fwc-ux-progressive-block {
    animation: none !important;
    transition: none !important;
  }
}