/* CM001 kit — animate.css. Reusable, tasteful entrance + interaction motion for the platform.
 * Token-driven, GPU-friendly (transform/opacity only), and fully disabled under reduced-motion.
 * Opt-in via classes: .cm-fade-in .cm-rise .cm-pop .cm-stagger .cm-lift .cm-underline. */
@layer cm.components {

  @keyframes cm-fade-in   { from { opacity: 0; transform: translateY(8px); }  to { opacity: 1; transform: none; } }
  @keyframes cm-rise      { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @keyframes cm-pop       { 0% { opacity: 0; transform: scale(.94); } 60% { transform: scale(1.02); } 100% { opacity: 1; transform: scale(1); } }
  @keyframes cm-slide-in  { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
  @keyframes cm-spin      { to { transform: rotate(360deg); } }
  @keyframes cm-sheen     { to { background-position: 200% center; } }

  /* fill-mode is `backwards`, NEVER `both`: `both` keeps the final keyframe applied forever, and a
     retained `transform: none` computes to an identity matrix() — which still makes the element a
     containing block for `position: fixed`. That silently re-anchored every kit popup (select, menu,
     tooltip, autocomplete, datepicker) to .content-inner instead of the viewport. `backwards` still
     holds the `from` state through any delay (stagger), and the end state already equals the natural
     one, so this is visually identical with no lingering transform. */
  .cm-fade-in  { animation: cm-fade-in  .42s cubic-bezier(.22,.61,.36,1) backwards; }
  .cm-rise     { animation: cm-rise     .5s  cubic-bezier(.22,.61,.36,1) backwards; }
  .cm-pop      { animation: cm-pop      .38s cubic-bezier(.34,1.56,.64,1) backwards; }
  .cm-slide-in { animation: cm-slide-in .42s cubic-bezier(.22,.61,.36,1) backwards; }

  /* Staggered reveal for a row/grid of children (KPI cards, tiles, list items). */
  .cm-stagger > * { animation: cm-rise .5s cubic-bezier(.22,.61,.36,1) backwards; }
  .cm-stagger > *:nth-child(1) { animation-delay: .02s; }
  .cm-stagger > *:nth-child(2) { animation-delay: .07s; }
  .cm-stagger > *:nth-child(3) { animation-delay: .12s; }
  .cm-stagger > *:nth-child(4) { animation-delay: .17s; }
  .cm-stagger > *:nth-child(5) { animation-delay: .22s; }
  .cm-stagger > *:nth-child(6) { animation-delay: .27s; }
  .cm-stagger > *:nth-child(7) { animation-delay: .32s; }
  .cm-stagger > *:nth-child(8) { animation-delay: .37s; }

  /* Hover lift for cards/tiles — subtle, shadow-aware. */
  .cm-lift { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
  .cm-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

  /* Animated brand underline on hover (links, tab-like affordances). */
  .cm-underline { position: relative; }
  .cm-underline::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
    background: var(--brand); border-radius: 2px; transform: scaleX(0); transform-origin: left;
    transition: transform .22s cubic-bezier(.22,.61,.36,1);
  }
  .cm-underline:hover::after, .cm-underline:focus-visible::after { transform: scaleX(1); }

  /* Icon spin utility (loading / refresh affordances). */
  .cm-spin { animation: cm-spin 1s linear infinite; transform-origin: center; }

  /* Gradient sheen for hero/kpi accents (opt-in). */
  .cm-sheen {
    background-size: 200% auto;
    animation: cm-sheen 3.5s linear infinite;
  }

  /* Global KPI treatment — every .kpis row staggers its cards in, and every .kpi lifts on hover.
   * Applied by class name so pages need no per-card markup; the .cm-stagger/.cm-lift helpers remain
   * for non-KPI use. */
  .kpis > * { animation: cm-rise .5s cubic-bezier(.22,.61,.36,1) backwards; }
  .kpis > *:nth-child(1) { animation-delay: .02s; }
  .kpis > *:nth-child(2) { animation-delay: .07s; }
  .kpis > *:nth-child(3) { animation-delay: .12s; }
  .kpis > *:nth-child(4) { animation-delay: .17s; }
  .kpis > *:nth-child(5) { animation-delay: .22s; }
  .kpi { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
  .kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

  /* Attention badge: a slow breath, not a strobe. Used on the overdue counter in the work-order dashboard. */
  @keyframes cm-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.82); } }
  .cm-pulse { animation: cm-pulse 1.6s ease-in-out infinite; }
}

@media (prefers-reduced-motion: reduce) {
  .cm-fade-in, .cm-rise, .cm-pop, .cm-slide-in, .cm-stagger > *, .cm-spin, .cm-sheen, .cm-pulse, .kpis > * { animation: none !important; }
  .cm-lift, .kpi { transition: none; }
  .cm-lift:hover, .kpi:hover { transform: none; }
  .cm-underline::after { transition: none; }
}