/* Waymark motion layer — v2.264.0 redesign.
 *
 * SEPARATE FILE ON PURPOSE. admin/css/clcm-admin.css and public/css/clcm-public.css are pinned
 * byte-for-byte against v2.239.0 by tests/test-tenant-colours-v2240-css.php, which strips the
 * :root custom properties added since and then demands the resolved text be identical. Custom
 * properties are a case that guard understands; a new @media block is not. Keeping the rules
 * here leaves those two files holding only token DEFINITIONS, which is what they are for.
 *
 * The durations live on :root in both stylesheets so a component can reach them wherever it is
 * rendered; this file is what stands them down.
 */

/* Durations rather than `animation: none`, so a transitionend listener still fires and nothing
   waits for ever for a transition that was cancelled out from under it. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --clcm-dur-press:  .01ms;
    --clcm-dur-hover:  .01ms;
    --clcm-dur-enter:  .01ms;
    --clcm-dur-drawer: .01ms;
    --clcm-dur-sheet:  .01ms;
  }
}

/* ════════════════════════════════════════════════════════════════════════════════════════
   v2.266.0 — the motion the handoff asks for, built rather than only tokenised.
   ════════════════════════════════════════════════════════════════════════════════════════

   The brief names it exactly: "Press 0.97 scale / 140ms; screen enter fade+8px / 320ms; drawers
   slide 300ms; sheets slide-up 340ms; toasts 260ms; row stagger 28–45ms; ease cubic-bezier(.2,.8,
   .2,1). All gated by prefers-reduced-motion." Phase 1 added the durations to :root and stopped
   there, so until now the only thing this layer did was stand down durations nothing used.

   WHY THE WHOLE-SCREEN ENTER IS NOT ON .clcm-wrap. A transform — including the translateY(0) that
   fill-mode holds at the end — makes an element a containing block for position:fixed descendants.
   Animating the page wrapper would therefore re-anchor every modal inside it to the wrapper rather
   than the viewport, which moves dialogs off-centre and, on a short screen, off-screen. The enter
   is applied to the title block and to rows instead: the same arrival, nothing re-parented. */

@keyframes clcm-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes clcm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes clcm-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
/* The tick. The mockup lands it with a short overshoot (its wmTick, Portal App.dc.html:107)
   rather than having it appear — the one place on the dashboard where a client does something
   and the page answers. Its duration is a token, so prefers-reduced-motion stands it down with
   everything else rather than needing its own override. */
@keyframes clcm-tick { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.clcm-rd-acts .clcm-action-check.completed i {
  display: inline-block;
  animation: clcm-tick var(--clcm-dur-enter, 320ms) cubic-bezier(.3, 1.6, .5, 1) both;
}

/* PRESS. The design's one piece of feedback that every control shares. :active only, so it costs
   nothing until a finger or a mouse is actually down. */
.clcm-btn, .clcm-rd-tab, .clcm-portal-tab, .clcm-cp-nav-link, .clcm-cp-gear,
.clcm-portal-nav-link, .clcm-portal-sheet-item, .clcm-cp-next-go {
  transition: transform var(--clcm-dur-press, 140ms) var(--clcm-ease, ease);
}
.clcm-btn:active, .clcm-rd-tab:active, .clcm-portal-tab:active, .clcm-cp-nav-link:active,
.clcm-cp-gear:active, .clcm-portal-nav-link:active, .clcm-portal-sheet-item:active,
.clcm-cp-next-go:active { transform: scale(.97); }

/* SCREEN ENTER — the page's title block arrives, which reads as the screen arriving. */
.clcm-rd-head { animation: clcm-rise var(--clcm-dur-enter, 320ms) var(--clcm-ease, ease) both; }

/* ROW STAGGER, 30ms a row — inside the brief's 28–45ms. Capped at twelve: beyond that the last
   row waits most of a second, which reads as the page being slow rather than alive. Rows after
   the twelfth simply appear, which nobody notices because they are below the fold. */
.clcm-rd-table tbody tr { animation: clcm-fade var(--clcm-dur-enter, 320ms) var(--clcm-ease, ease) both; }
.clcm-rd-table tbody tr:nth-child(1)  { animation-delay: 0ms; }
.clcm-rd-table tbody tr:nth-child(2)  { animation-delay: 30ms; }
.clcm-rd-table tbody tr:nth-child(3)  { animation-delay: 60ms; }
.clcm-rd-table tbody tr:nth-child(4)  { animation-delay: 90ms; }
.clcm-rd-table tbody tr:nth-child(5)  { animation-delay: 120ms; }
.clcm-rd-table tbody tr:nth-child(6)  { animation-delay: 150ms; }
.clcm-rd-table tbody tr:nth-child(7)  { animation-delay: 180ms; }
.clcm-rd-table tbody tr:nth-child(8)  { animation-delay: 210ms; }
.clcm-rd-table tbody tr:nth-child(9)  { animation-delay: 240ms; }
.clcm-rd-table tbody tr:nth-child(10) { animation-delay: 270ms; }
.clcm-rd-table tbody tr:nth-child(11) { animation-delay: 300ms; }
.clcm-rd-table tbody tr:nth-child(n+12) { animation-delay: 330ms; }

/* SHEETS AND THEIR SCRIM — the portal's "More". Both are position:fixed already, so animating
   them re-parents nothing. */
.clcm-portal-sheet { animation: clcm-sheet-up var(--clcm-dur-sheet, 340ms) var(--clcm-ease, ease) both; }
.clcm-portal-scrim { animation: clcm-fade var(--clcm-dur-hover, 190ms) var(--clcm-ease, ease) both; }

/* The reduce block above sets every duration to .01ms, which stands all of this down while still
   firing animationend — so nothing waits for ever on an animation that was cancelled. The one
   thing a duration cannot neutralise is a transform that starts off-screen, so the sheet is also
   told not to travel. */
@media (prefers-reduced-motion: reduce) {
  .clcm-portal-sheet { animation: none; }
  .clcm-rd-head, .clcm-rd-table tbody tr { animation: none; }
  /* The coach admin's pop-ups. clcm-admin.css gives .clcm-modal and the worksheet field dialog
     .clcm-fldlg a LITERAL .2s scale-and-rise with an overshooting curve (clcm-modal-in), so no
     duration token reaches it and a coach who asked for stillness still got the bounce. That sheet
     is byte-pinned, so the stand-down lives here: same specificity, loaded after it on every
     surface that loads it (clcm-motion depends on clcm-redesign, which depends on clcm-admin). */
  .clcm-modal, .clcm-fldlg { animation: none; }
}