/* ============================================================================
   _collection.css — token defaults for the COLLECTION-MOTION compound.
   The compound is behaviour-first (_collection.js); its only "style" is the
   --col-* motion token defaults declared ON THE CONTAINER, where _collection.js
   reads them at play time (same contract as --st-* on .timeline, --pag-* on the
   nav). The Inspector / a per-instance inline style override these; the motion
   governor scales the resulting WAA animations via playbackRate. Values mirror
   the `gentle` preset in _collection.config.js. Applied to the table wrap and to
   anything opting in via [data-col-motion] (future card / cover grids). Import
   AFTER colors_and_type.css (layer order). See notes/architecture.md.
   ============================================================================ */

@layer tokens {
  :where(.tbl-wrap, [data-col-motion]) {
    /* reveal — initial load */
    --col-rv-dur: 520ms; /* @kind other */
    --col-rv-stag: 55ms; /* @kind other */
    --col-rv-dist: 14px;
    --col-rv-ease: cubic-bezier(.16, 1, .3, 1); /* @kind other */
    /* refresh — filter/sort out → in restagger */
    --col-rf-dur: 360ms; /* @kind other */
    --col-rf-stag: 28ms; /* @kind other */
    --col-rf-out: 200ms; /* @kind other */
    --col-rf-ease: cubic-bezier(.16, 1, .3, 1); /* @kind other */
    /* paginate — page change (directional) */
    --col-pg-dur: 460ms; /* @kind other */
    --col-pg-stag: 38ms; /* @kind other */
    --col-pg-dist: 30px;
    --col-pg-ease: cubic-bezier(.16, 1, .3, 1); /* @kind other */
  }
}

/* Animated rows get GPU-friendly compositing hints while a run is live. The
   collection controller animates transform + opacity only (cheap, composited);
   this just nudges the browser to promote the rows during the entrance. Scoped
   to the table for now; harmless when no animation is running. */
@layer components {
  .tbl-wrap .tbl tbody tr { will-change: auto; }
  .tbl-wrap.is-animating .tbl tbody tr { will-change: transform, opacity; }

  /* Page-transition scaffolding (slide-through / flip). The wrap already clips
     (overflow:hidden); these add the positioning context the two-set techniques
     need. Removed by the controller (clearTransit) once the transition ends. */
  .tbl-wrap.col-transit { position: relative; }
  .tbl-wrap .col-ghost { position: absolute; top: 0; left: 0; width: 100%; }
  .tbl-wrap.col-flip { perspective: 1400px; }
}