/**
 * NetShow Motion Layer
 * Version: 1.0.0 — Created 2026-06-14 (S24 UI/UX foundation pass)
 *
 * Shared, brand-correct motion vocabulary for the whole app. Keyframes are
 * namespaced `nsf-*` (NetShow Foundation) to avoid collision with the ~189
 * page-scoped @keyframes already in public/css/. Easing + duration tokens are
 * keyed to the existing --ns-transition-* vars (design-system.css lines 254-256).
 *
 * Load AFTER css/design-system.css (so the easing tokens layer cleanly). Purely
 * additive: nothing here changes layout, routes, or menu data. Opt-in via the
 * .ns-animate-* / .ns-hover-* / .ns-pressable utility classes.
 *
 * Premium = smooth + intentional + restrained. Honors prefers-reduced-motion.
 */

/* ========================================
 * EASING + DURATION TOKENS
 * (complements --ns-transition-fast/normal/slow)
 * ======================================== */
:root {
  /* Easing curves */
  --ns-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);    /* decisive settle — entrances */
  --ns-ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);   /* symmetric — state changes */
  --ns-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);/* gentle overshoot — pops/CTAs */

  /* Durations (mirror the transition tokens as raw values) */
  --ns-dur-fast:   150ms;
  --ns-dur-normal: 220ms;
  --ns-dur-slow:   320ms;
  --ns-dur-slower: 480ms;

  /* Composed transitions tuned for premium feel */
  --ns-transition-smooth: 220ms var(--ns-ease-out);
  --ns-transition-lift:   260ms var(--ns-ease-out);
}

/* ========================================
 * KEYFRAMES (namespaced nsf-)
 * ======================================== */
@keyframes nsf-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes nsf-slide-up {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes nsf-slide-down {
  from { opacity: 0; transform: translate3d(0, -12px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes nsf-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes nsf-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--ns-accent-glow, rgba(245, 158, 11, 0.0)); }
  50%      { box-shadow: 0 0 22px 2px var(--ns-accent-glow, rgba(245, 158, 11, 0.35)); }
}

@keyframes nsf-shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

@keyframes nsf-press {
  0%   { transform: scale(1); }
  45%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}

@keyframes nsf-spin {
  to { transform: rotate(360deg); }
}

/* ========================================
 * ENTRANCE UTILITIES (opt-in)
 * ======================================== */
.ns-animate-fade-in   { animation: nsf-fade-in   var(--ns-dur-slow)   var(--ns-ease-out) both; }
.ns-animate-slide-up  { animation: nsf-slide-up  var(--ns-dur-slow)   var(--ns-ease-out) both; }
.ns-animate-slide-down{ animation: nsf-slide-down var(--ns-dur-normal) var(--ns-ease-out) both; }
.ns-animate-scale-in  { animation: nsf-scale-in  var(--ns-dur-normal) var(--ns-ease-spring) both; }

/* Stagger entrance for a list/grid of children (cards, nav items, etc.) */
.ns-stagger > *      { animation: nsf-slide-up var(--ns-dur-slow) var(--ns-ease-out) both; }
.ns-stagger > *:nth-child(1) { animation-delay: 40ms; }
.ns-stagger > *:nth-child(2) { animation-delay: 90ms; }
.ns-stagger > *:nth-child(3) { animation-delay: 140ms; }
.ns-stagger > *:nth-child(4) { animation-delay: 190ms; }
.ns-stagger > *:nth-child(5) { animation-delay: 240ms; }
.ns-stagger > *:nth-child(6) { animation-delay: 290ms; }
.ns-stagger > *:nth-child(7) { animation-delay: 340ms; }
.ns-stagger > *:nth-child(8) { animation-delay: 390ms; }

/* ========================================
 * INTERACTION UTILITIES (opt-in)
 * ======================================== */

/* Lift + soften shadow on hover — for cards / tiles */
.ns-hover-lift {
  transition: transform var(--ns-transition-lift),
              box-shadow var(--ns-transition-lift),
              border-color var(--ns-transition-smooth);
  will-change: transform;
}
.ns-hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--ns-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.3));
}

/* Warm gold glow on hover — for primary surfaces / CTAs */
.ns-hover-glow {
  transition: box-shadow var(--ns-transition-smooth),
              border-color var(--ns-transition-smooth);
}
.ns-hover-glow:hover {
  box-shadow: 0 0 0 1px var(--ns-accent, #f59e0b),
              0 0 22px var(--ns-accent-glow, rgba(245, 158, 11, 0.35));
  border-color: var(--ns-accent, #f59e0b);
}

/* Tactile press feedback for buttons / clickable tiles */
.ns-pressable {
  transition: transform var(--ns-transition-fast);
}
.ns-pressable:active {
  transform: scale(0.97);
}

/* Animated gradient underline / accent sweep used by section headers */
.ns-accent-line {
  position: relative;
}
.ns-accent-line::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 0;
  background: var(--ns-theme-gradient, linear-gradient(90deg, #f59e0b, #d97706));
  transition: width var(--ns-transition-lift);
}
.ns-accent-line:hover::after,
.ns-accent-line.is-active::after {
  width: 100%;
}

/* Skeleton shimmer for loading placeholders */
.ns-shimmer {
  background: linear-gradient(
    90deg,
    var(--ns-bg-secondary, #2d2d2d) 25%,
    var(--ns-bg-tertiary, #3d3d3d) 50%,
    var(--ns-bg-secondary, #2d2d2d) 75%
  );
  background-size: 200% 100%;
  animation: nsf-shimmer 1.4s linear infinite;
}

/* ========================================
 * ACCESSIBILITY — honor reduced-motion
 * ======================================== */
@media (prefers-reduced-motion: reduce) {
  .ns-animate-fade-in,
  .ns-animate-slide-up,
  .ns-animate-slide-down,
  .ns-animate-scale-in,
  .ns-stagger > *,
  .ns-shimmer {
    animation: none !important;
  }
  .ns-hover-lift,
  .ns-hover-glow,
  .ns-pressable,
  .ns-accent-line::after {
    transition: none !important;
  }
  .ns-hover-lift:hover { transform: none; }
}