/* ============================================================================
   motion.css - shared interaction/motion layer for the MSM marketing site.

   Standards source: Emil Kowalski's design engineering skills
   (~/.claude/skills/emil-design-eng, review-animations/STANDARDS.md).

   MUST be linked AFTER each page's inline <style> block. Several rules here
   deliberately override hover rules defined inline, and they match at equal
   specificity, so source order is what decides.

   Scope is motion only. No color tokens are referenced, because the pages
   disagree on names (index.html uses --text-2/--surface, articles/ uses
   --ink-2/--card). Keeping this file color-free is what makes it portable
   across all 31 pages.
   ========================================================================= */

:root {
  /* Strong custom curves. The CSS built-ins are too weak to read as intentional. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);        /* entering / exiting */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);    /* movement on screen */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);     /* iOS-like drawer */

  /* Press feedback. 100-160ms band. */
  --dur-press: 160ms;
  /* Hover / color. */
  --dur-hover: 150ms;
}

/* ---------------------------------------------------------------------------
   1. PRESS FEEDBACK
   The site had zero :active states across all 31 pages before this file.
   A button that does not move on press reads as unresponsive, and this is
   the highest ratio of perceived quality to effort available here.
   ------------------------------------------------------------------------ */

.btn,
.btn-primary,
.theme-toggle,
button:not(:disabled),
[role="button"] {
  transition: transform var(--dur-press) var(--ease-out),
              background-color var(--dur-hover) ease,
              border-color var(--dur-hover) ease,
              color var(--dur-hover) ease;
}

.btn:active,
.btn-primary:active,
.theme-toggle:active,
button:not(:disabled):active,
[role="button"]:active {
  transform: scale(0.97);
}

/* Disabled controls must not pretend to respond. */
.btn:disabled:active,
.btn-primary:disabled:active,
button:disabled:active {
  transform: none;
}

/* Large pressable surfaces. scale(0.97) is too much travel on a full-width
   card, so these press shallower. Still within the 0.95-0.98 band. */
/* NOTE: `.tool` is deliberately absent. On the homepage it is a non-clickable
   <div> wrapping an inner <a> (cursor: auto), so press feedback there would
   signal an action the card does not perform. */
a.checkup-card:active,
.article-card:active,
.report-card:active,
.kpi.clickable:active,
.score-card.clickable:active {
  transform: scale(0.985);
}

.kpi.clickable,
.score-card.clickable {
  transition: border-color var(--dur-hover) ease,
              transform var(--dur-press) var(--ease-out);
}

/* ---------------------------------------------------------------------------
   2. TOUCH-DEVICE HOVER CORRECTION
   Five hover rules across the site apply a transform (translateY(-2px),
   scale(1.05)) with no pointer gating. On a touch device the browser fires
   :hover on tap and the element stays lifted until you tap elsewhere, which
   reads as a stuck card. This is a defect, not a polish item.

   Gating at the source would mean editing every inline <style>; neutralizing
   the transform here for coarse pointers is the same result in one place.
   ------------------------------------------------------------------------ */

@media (hover: none), (pointer: coarse) {
  a.checkup-card:hover,
  .article-card:hover,
  .report-card:hover,
  .facade:hover .play span {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   3. REDUCED MOTION
   Reduced motion means fewer and gentler, not zero. Color and opacity
   transitions aid comprehension and stay; position and scale changes go.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn-primary,
  .theme-toggle,
  button,
  [role="button"],
  .kpi.clickable,
  .score-card.clickable {
    transition: background-color var(--dur-hover) ease,
                border-color var(--dur-hover) ease,
                color var(--dur-hover) ease;
  }

  .btn:active,
  .btn-primary:active,
  .theme-toggle:active,
  button:active,
  [role="button"]:active,
  a.checkup-card:active,
  .article-card:active,
  .report-card:active,
  .kpi.clickable:active,
  .score-card.clickable:active {
    transform: none;
  }
}