/* Tab & Kit — Motion tokens
   Serene, premium. Gentle ease-outs; nothing springy or bouncy.
   Entrances fade + rise; interactions are quick and soft. */

:root {
  /* Durations */
  --dur-fast: 140ms;       /* @kind other */
  --dur-base: 240ms;       /* @kind other */
  --dur-slow: 420ms;       /* @kind other */
  --dur-entrance: 720ms;   /* @kind other */ /* reveals on scroll */
  --dur-ambient: 9s;       /* @kind other */ /* slow ambient drift on hero product */

  /* Easing */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);     /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);     /* @kind other */
  --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --ease-glass: cubic-bezier(0.4, 0.14, 0.18, 1);    /* @kind other */

  /* Common transitions */
  --transition-base: all var(--dur-base) var(--ease-out);  /* @kind other */
  --transition-colors: background-color var(--dur-fast) var(--ease-out),
                       color var(--dur-fast) var(--ease-out),
                       border-color var(--dur-fast) var(--ease-out); /* @kind other */
  --transition-transform: transform var(--dur-base) var(--ease-emphasized); /* @kind other */

  /* Hover lift / press */
  --lift-hover: translateY(-3px);   /* @kind other */
  --press-scale: scale(0.97);       /* @kind other */
}

/* Reusable entrance keyframes (gate on a [data-reveal] / .is-in pattern) */
@keyframes tk-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tk-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes tk-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes tk-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}