/* The Jilani interaction and motion system.
 *
 * Shared by the Floor app and by anything built after it. Load it BEFORE
 * the app's own sheet, so an app can still override a token if it has a
 * reason; nothing in here sets a colour or a size, only the physics.
 *
 * WHY THIS FILE EXISTS. Before it, floor.css carried twelve hand typed
 * easing curves and twelve hand typed press scales for the same handful
 * of moments. That is not a style, it is twelve guesses, and the app
 * felt different in each place one of them landed. Five curves cover
 * every motion in the app; three scales cover every press.
 *
 * THE RULES THE TOKENS ENFORCE
 *   - Never ease-in on an entrance. It starts slow at the exact moment
 *     the person is watching. Entering is --e-out, moving between two
 *     known states is --e-inout, leaving is --e-exit.
 *   - Exits are faster than entries. The person has already decided.
 *     --d-exit is shorter than --d-enter and that is not an accident.
 *   - Transitions, not keyframes, for anything a finger can re-trigger.
 *     A keyframe restarts from zero; a transition continues from
 *     wherever the property is right now, so it can be grabbed and
 *     reversed mid flight. That single property is most of what
 *     separates an app that feels Apple-made from one that is merely
 *     animated.
 *   - Transform and opacity only. Animating layout drops frames.
 *   - Never animate from scale(0). Popovers start at .95 and grow from
 *     the element that opened them, via transform-origin.
 */

:root {
  /* THE FIVE CURVES. Each has one job; if a new moment does not fit one
     of them, the moment is probably wrong, not the token. */

  /* Entering, and the house default for almost every transition. */
  --e-out:   cubic-bezier(.2, .8, .2, 1);
  /* A longer, gentler out. Progress widths, heights, reveals: things
     that travel far enough that the sharp curve reads as a snap. */
  --e-soft:  cubic-bezier(.22, .61, .36, 1);
  /* Between two known states, where both ends are on screen. */
  --e-inout: cubic-bezier(.4, .1, .2, 1);
  /* A mark that pops: a reaction landing, a cup filling. Overshoots. */
  --e-pop:   cubic-bezier(.2, .9, .3, 1.4);
  /* Released from a drag, settling back to rest. Slight overshoot, so
     it reads as a physical thing arriving rather than a value being
     set. */
  --e-snap:  cubic-bezier(.22, .9, .32, 1.08);
  /* Leaving, off screen, in the direction it is already going. This is
     the ONE place ease-in is correct: it accelerates away. */
  --e-exit:  cubic-bezier(.4, 0, .9, .6);

  /* DURATIONS. */
  --d-press: 90ms;    /* finger down */
  --d-tap:   160ms;   /* release, toggle, reaction, small state change */
  --d-enter: 260ms;   /* a sheet, a screen, a popover arriving */
  --d-exit:  190ms;   /* the same thing leaving */
  --d-travel: 340ms;  /* something crossing most of the screen */
  --d-slow:  800ms;   /* a number or a bar filling, watched on purpose */

  /* PRESS. Three scales, chosen by how big the thing is, so a row and
     an icon do not shrink by the same amount and read as different
     materials. */
  --press-row: .985;  /* a full width card or row */
  --press-btn: .972;  /* a button, a chip */
  --press-ico: .9;    /* a small icon target */
}

/* One block. Everything above is reduced to nothing, and the individual
   opt-outs scattered through an app become unnecessary. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-press: 0ms; --d-tap: 0ms; --d-enter: 0ms; --d-exit: 0ms;
    --d-travel: 0ms; --d-slow: 0ms;
    --press-row: 1; --press-btn: 1; --press-ico: 1;
  }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------ gestures
   A surface being dragged by a finger. The controller sets this while a
   drag is claimed, so nothing fights the finger: no transition on the
   property being dragged, no text selection, no scroll chaining. */
.jdragging {
  transition: none !important;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

/* ------------------------------------------------------- the keyboard
   --kb is the height the software keyboard is covering, written by the
   island runtime from visualViewport. Zero when no keyboard is up, so
   it is always safe to subtract. */
:root { --kb: 0px; }