/* ═══════════════════════════════════════════════════════════════════
   FIZZEEK — Motion library
   Centralized keyframes + easing tokens for the flat-minimal premium
   design system. Every page uses the same cadence so transitions feel
   like one app instead of N pages glued together.
   Depends on css/fizzeek-tokens.css being loaded first.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ── Easing tokens (premium feel: most things ease-out, accents use spring) ── */
  --fz-ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --fz-ease-out-expo:  cubic-bezier(0.16, 1, 0.30, 1);
  --fz-ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --fz-ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);

  /* ── Standard durations ── */
  --fz-dur-fast:    160ms;
  --fz-dur-base:    280ms;
  --fz-dur-slow:    520ms;
  --fz-dur-stagger:  60ms;
}

/* ── Reduced-motion: collapse all motion to instant ── */
@media (prefers-reduced-motion: reduce){
  :root{
    --fz-dur-fast: 0ms;
    --fz-dur-base: 0ms;
    --fz-dur-slow: 0ms;
    --fz-dur-stagger: 0ms;
  }
}

/* ═══ KEYFRAMES — single source of truth ═══ */

/* Entrance: subtle fade + lift. Used everywhere a section first appears. */
@keyframes fzFadeUp{
  from{ opacity:0; transform: translateY(14px); }
  to  { opacity:1; transform: translateY(0); }
}

/* Entrance: fade only, no movement. For elements where motion would be wrong (e.g. fixed dock backdrop). */
@keyframes fzFadeIn{
  from{ opacity:0; }
  to  { opacity:1; }
}

/* Bottom dock reveal — slightly higher initial offset than fzFadeUp so it feels grounded. */
@keyframes fzDockReveal{
  from{ opacity:0; transform: translateY(24px); }
  to  { opacity:1; transform: translateY(0); }
}

/* Tap pulse — used when a card or button gets pressed and we want a confirmation flash. */
@keyframes fzTapPulse{
  0%  { transform: scale(1); }
  40% { transform: scale(0.97); }
  100%{ transform: scale(1); }
}

/* Glow breathe — a gentle infinite pulse for the active/primary action on a screen. */
@keyframes fzBreathe{
  0%,100%{ opacity: 0.85; transform: scale(1); }
  50%    { opacity: 1;    transform: scale(1.02); }
}

/* Icon float — used by "Coming Soon" pages so the watermark feels alive without being distracting. */
@keyframes fzFloat{
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(-6px); }
}

/* Stagger helper — apply via inline style="animation-delay: calc(var(--fz-dur-stagger) * N)" */

/* ═══ UTILITY CLASSES — pair animation with proper opacity-0 starting state ═══ */
.fz-anim-fade-up{ opacity: 0; animation: fzFadeUp var(--fz-dur-base) var(--fz-ease-out-expo) forwards; }
.fz-anim-fade-in{ opacity: 0; animation: fzFadeIn var(--fz-dur-base) var(--fz-ease-out-expo) forwards; }
.fz-anim-dock   { opacity: 0; animation: fzDockReveal var(--fz-dur-slow) var(--fz-ease-out-expo) 200ms forwards; }
.fz-anim-breathe{ animation: fzBreathe 2.6s var(--fz-ease-in-out) infinite; }
.fz-anim-float  { animation: fzFloat 4s var(--fz-ease-in-out) infinite; }

/* Stagger groups — apply to a parent; each child gets a 60ms-incremented delay. */
.fz-stagger > *:nth-child(1){ animation-delay:  60ms; }
.fz-stagger > *:nth-child(2){ animation-delay: 120ms; }
.fz-stagger > *:nth-child(3){ animation-delay: 180ms; }
.fz-stagger > *:nth-child(4){ animation-delay: 240ms; }
.fz-stagger > *:nth-child(5){ animation-delay: 300ms; }
.fz-stagger > *:nth-child(6){ animation-delay: 360ms; }
.fz-stagger > *:nth-child(7){ animation-delay: 420ms; }
.fz-stagger > *:nth-child(8){ animation-delay: 480ms; }