/* KNBL Animation Tokens */
:root {
  /* Easing curves — matching Framer Motion usage in codebase */
  --ease-smooth:      cubic-bezier(0.22, 1, 0.36, 1);  /* @kind other */
  --ease-spring-body: cubic-bezier(0.33, 1, 0.68, 1);  /* @kind other */
  --ease-reveal:      cubic-bezier(0.23, 1, 0.32, 1);  /* @kind other */
  --ease-standard:    cubic-bezier(0.4, 0, 0.2, 1);    /* @kind other */

  /* Durations */
  --dur-instant:   100ms;    /* @kind other */
  --dur-fast:      200ms;    /* @kind other */
  --dur-base:      300ms;    /* @kind other */
  --dur-moderate:  500ms;    /* @kind other */
  --dur-slow:      700ms;    /* @kind other */
  --dur-slower:    800ms;    /* @kind other */
  --dur-theme:    1500ms;    /* @kind other */
}

/* Shine keyframe — used on hover buttons */
@keyframes knbl-shine {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Subtle float — decorative elements */
@keyframes knbl-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}

/* Spin — loading states */
@keyframes knbl-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Fade up — entrance */
@keyframes knbl-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Text clip reveal — letter-by-letter used in nav */
@keyframes knbl-clip-in {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

.animate-float    { animation: knbl-float  8s ease-in-out infinite; }
.animate-fade-up  { animation: knbl-fade-up var(--dur-moderate) var(--ease-smooth) both; }
.animate-shine    { animation: knbl-shine 0.5s ease-in-out; }