/* ============================================================
   THETEA — motion.css
   The time-dimension layer. Easings, durations, stagger, shared
   keyframes used across components.

   Link AFTER colors_and_type.css:
     <link rel="stylesheet" href="colors_and_type.css">
     <link rel="stylesheet" href="motion.css">
   ============================================================ */

:root {
  /* ---------- Easings — three voices ---------- */
  --ease-tea:   cubic-bezier(.2,.7,.2,1);   /* default · settling */
  --ease-pour:  cubic-bezier(.4,0,.2,1);    /* liquid · state change */
  --ease-steep: cubic-bezier(.3,0,.8,.4);   /* slow build · timers */
  --ease-leaf:  cubic-bezier(.18,.9,.26,1); /* light · entrances */

  /* ---------- Durations — four steps ---------- */
  --dur-flicker:  80ms;  /* hover, focus ring */
  --dur-quick:   180ms;  /* button press, chip toggle */
  --dur-settle:  320ms;  /* card flip, overlay, drawer */
  --dur-pour:    580ms;  /* page transitions, theme swap */

  /* ---------- Stagger ---------- */
  --stagger-leaf:  40ms;  /* between grid items entering */
  --stagger-line:  16ms;  /* per word / char */

  /* ---------- Legacy aliases (keep older components working) ---------- */
  --d-1: var(--dur-flicker);
  --d-2: var(--dur-quick);
  --d-3: var(--dur-settle);
  --d-4: var(--dur-pour);
}

/* ---------- Shared keyframes ---------- */
@keyframes tt-fade-up    { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }
@keyframes tt-fade-in    { from { opacity: 0; } to { opacity: 1; } }
@keyframes tt-pulse-dot  { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.4); } }
@keyframes tt-steep-rise { 0% { opacity: 0; transform: translateY(4px) scaleY(.8); } 60% { opacity: 1; } 100% { opacity: 0; transform: translateY(-12px) scaleY(1.4); } }
@keyframes tt-halo-out   { 0% { transform: scale(.6); opacity: .55; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes tt-shimmer    { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* ---------- Stagger utility ---------- */
[data-tt-stagger] > * {
  opacity: 0;
  animation: tt-fade-up var(--dur-settle) var(--ease-leaf) forwards;
  animation-delay: calc(var(--i, 0) * var(--stagger-leaf));
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:   .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-tt-stagger] > * { opacity: 1; transform: none; }
}