/* Focus treatment for the five validation engines. See engines.js.
 *
 * Kept to opacity, one border and a two-pixel lift. The cards are clipped with
 * clip-path, so a glow or drop shadow would be cut off at the corner notch
 * that gives them their shape - the emphasis has to live inside the card.
 */
[data-engines] { --eng-accent: #2E63C8 }
html[data-theme="dark"] [data-engines] { --eng-accent: #5B8CE6 }

[data-engines] > [data-engine] {
  transition: opacity .34s cubic-bezier(.22,.61,.36,1),
              filter .34s cubic-bezier(.22,.61,.36,1),
              transform .34s cubic-bezier(.22,.61,.36,1),
              border-color .28s ease;
  outline: none;
}

/* The four not being asked about. Saturation drops with the opacity so they
 * read as background rather than as the same card turned translucent. */
[data-engines] > .eng-off { opacity: .24; filter: saturate(.5) }

/* The one that is. It does not get brighter - it is already at full opacity -
 * it gets a border and a small lift, which is the difference between emphasis
 * and a highlighter pen. */
[data-engines="matrix"] > .eng-on {
  transform: translateY(-3px);
  border-top-color: var(--eng-accent) !important;
}
[data-engines="diagram"] > .eng-on { border-color: var(--eng-accent) !important }

/* Stagger, fanning out from the card under the cursor. */
[data-engines] > [data-eng-d="1"] { transition-delay: 26ms }
[data-engines] > [data-eng-d="2"] { transition-delay: 52ms }
[data-engines] > [data-eng-d="3"] { transition-delay: 78ms }

/* Keyboard parity: the cards are focusable, so the pairing is reachable
 * without a mouse and shows the same ring. */
[data-engines] > [data-engine]:focus-visible {
  box-shadow: inset 0 0 0 2px var(--eng-accent);
}

/* Touch has no hover, so the dimming would only ever be triggered by a tap
 * that also navigates. Left inert below the tablet breakpoint. */
@media (max-width: 900px) {
  [data-engines] > .eng-off { opacity: 1; filter: none }
  [data-engines="matrix"] > .eng-on { transform: none }
}
@media (prefers-reduced-motion: reduce) {
  [data-engines] > [data-engine] {
    transition-duration: .01ms; transition-delay: 0ms !important;
  }
  [data-engines="matrix"] > .eng-on { transform: none }
}