/* Furever — Motion & interaction layer.
   Slow and unhurried: soft eases, gentle fades, short calm durations. No bounce, no spring.
   Everything here is OPT-IN via classes / [data-reveal], built on the motion tokens in
   spacing.css (--ease-soft, --ease-inout, --dur-fast 160ms, --dur 280ms, --dur-slow 460ms).
   All animation is gated behind `prefers-reduced-motion: no-preference`, so reduced-motion
   users (and print / PDF export) always see the resolved end-state, never a hidden start state. */

:root {
  --fx-distance: 16px;   /* @kind spacing */
  --fx-distance-sm: 8px; /* @kind spacing */
  --fx-stagger: 80ms;    /* @kind other */
}

/* ============================================================
   ENTRANCES (animate on mount). End-state is the base style; we animate FROM hidden,
   so without the animation (reduced-motion) the element is simply visible.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fur-fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes fur-fade-up { from { opacity: 0; transform: translateY(var(--fx-distance)); } to { opacity: 1; transform: none; } }
  @keyframes fur-fade-down { from { opacity: 0; transform: translateY(calc(-1 * var(--fx-distance))); } to { opacity: 1; transform: none; } }
  @keyframes fur-scale-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
  @keyframes fur-rise { from { opacity: 0; transform: translateY(var(--fx-distance-sm)) scale(0.99); } to { opacity: 1; transform: none; } }

  .fx-fade-in { animation: fur-fade-in var(--dur) var(--ease-soft) both; }
  .fx-fade-up { animation: fur-fade-up var(--dur-slow) var(--ease-soft) both; }
  .fx-fade-down { animation: fur-fade-down var(--dur-slow) var(--ease-soft) both; }
  .fx-scale-in { animation: fur-scale-in var(--dur) var(--ease-soft) both; }
  .fx-rise { animation: fur-rise var(--dur-slow) var(--ease-soft) both; }

  /* Manual delays for hand-tuned sequencing */
  .fx-delay-1 { animation-delay: calc(var(--fx-stagger) * 1); }
  .fx-delay-2 { animation-delay: calc(var(--fx-stagger) * 2); }
  .fx-delay-3 { animation-delay: calc(var(--fx-stagger) * 3); }
  .fx-delay-4 { animation-delay: calc(var(--fx-stagger) * 4); }
  .fx-delay-5 { animation-delay: calc(var(--fx-stagger) * 5); }
  .fx-delay-6 { animation-delay: calc(var(--fx-stagger) * 6); }

  /* Stagger container: direct children fade-up in sequence (up to 8) */
  .fx-stagger > * { animation: fur-fade-up var(--dur-slow) var(--ease-soft) both; }
  .fx-stagger > *:nth-child(1) { animation-delay: calc(var(--fx-stagger) * 0); }
  .fx-stagger > *:nth-child(2) { animation-delay: calc(var(--fx-stagger) * 1); }
  .fx-stagger > *:nth-child(3) { animation-delay: calc(var(--fx-stagger) * 2); }
  .fx-stagger > *:nth-child(4) { animation-delay: calc(var(--fx-stagger) * 3); }
  .fx-stagger > *:nth-child(5) { animation-delay: calc(var(--fx-stagger) * 4); }
  .fx-stagger > *:nth-child(6) { animation-delay: calc(var(--fx-stagger) * 5); }
  .fx-stagger > *:nth-child(7) { animation-delay: calc(var(--fx-stagger) * 6); }
  .fx-stagger > *:nth-child(8) { animation-delay: calc(var(--fx-stagger) * 7); }

  /* ============================================================
     SCROLL REVEAL — start hidden; add class `in-view` (IntersectionObserver) to reveal.
     ============================================================ */
  [data-reveal] {
    opacity: 0;
    transform: translateY(var(--fx-distance));
    transition: opacity var(--dur-slow) var(--ease-soft), transform var(--dur-slow) var(--ease-soft);
    will-change: opacity, transform;
  }
  [data-reveal="fade"] { transform: none; }
  [data-reveal="scale"] { transform: scale(0.96); }
  [data-reveal].in-view { opacity: 1; transform: none; }

  /* ============================================================
     INTERACTION — hover lift, press, gentle nudge. Quiet, never springy.
     ============================================================ */
  .fx-lift { transition: transform var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease-soft); }
  .fx-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
  .fx-press { transition: transform var(--dur-fast) var(--ease-soft); }
  .fx-press:active { transform: scale(0.98); }
  .fx-nudge { transition: transform var(--dur) var(--ease-soft); }
  .fx-nudge:hover { transform: translateX(3px); }

  /* ============================================================
     AMBIENT / LIVE — sparing, opt-in only (e.g. a memorial portrait, a "current" node).
     Functional loaders (skeleton, spinner) are defined below and are intentionally allowed.
     ============================================================ */
  @keyframes fur-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
  @keyframes fur-pulse-ring { 0% { box-shadow: 0 0 0 0 var(--node-ring); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
  @keyframes fur-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
  .fx-float { animation: fur-float 6s var(--ease-inout) infinite; }
  .fx-pulse-ring { animation: fur-pulse-ring 2.4s var(--ease-soft) infinite; }
  .fx-breathe { animation: fur-breathe 3.2s var(--ease-inout) infinite; }

  /* Signature brand resolve: isotype → wordmark. Apply to the wordmark element. */
  @keyframes fur-resolve { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
  .fx-resolve { animation: fur-resolve var(--dur-slow) var(--ease-soft) both; animation-delay: var(--dur); }

  /* Skeleton shimmer + spinner sweep (functional loaders) */
  .fx-skeleton { animation: fur-shimmer 1.3s ease infinite; }
  .fx-spin { animation: fur-spin 0.8s linear infinite; }
}

/* ============================================================
   FUNCTIONAL LOADERS — base styles render regardless; the sweep is gated above.
   ============================================================ */
@keyframes fur-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes fur-spin { to { transform: rotate(360deg); } }

.fx-skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  border-radius: var(--radius-sm);
}

/* Smooth scheme cross-fade — put on the root/container that carries the scheme class. */
.fx-scheme-tween { transition: background var(--dur) var(--ease-soft), color var(--dur) var(--ease-soft), border-color var(--dur) var(--ease-soft); }

/* Reduced-motion: guarantee resolved, legible end-states. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}