/*
 * Keler — Catalog module (retargeted to the real keler.me markup)
 *
 * The page's own stylesheet (css/styles.css) already defines every visual
 * property of .card / .card__head / .card__body / .card__title /
 * .card__eyebrow / .card__note / .items / .items__item / .timer /
 * .timer__step / .timer__stamp / .timer__line — border, padding, grid
 * layout, type. This module never redeclares any of that. Its only job is
 * the BEHAVIORAL layer on top: scroll reveal (once, staggered) and a
 * restrained hover cue, targeting the real hooks:
 *
 *   [data-card]        the three full-width card shells
 *                       (speed-to-lead / conversion / expansion)
 *   [data-card-item]   the single-line <li> rows inside a catalog card's
 *                       <ol class="items"> (stagger within the card)
 *
 * The timer motif (three ticking timestamps) is pure JS behavior — it
 * only ever rewrites text content, so it needs no CSS of its own beyond
 * the shared [data-card] reveal its shell already gets.
 *
 * Custom properties: this module reads the page's own real tokens
 * (--color-*, --font-*, --settle-duration, --ease-settle,
 * --interaction-duration — defined in css/styles.css) with literal
 * fallbacks, so it still renders correctly if ever loaded standalone.
 */

[data-card] {
  transition:
    opacity var(--settle-duration, .7s) var(--ease-settle, cubic-bezier(.19, 1, .22, 1)),
    translate var(--settle-duration, .7s) var(--ease-settle, cubic-bezier(.19, 1, .22, 1));
}

/* Priming/revealed share one specificity tier (single attribute selector
   each) so they can never fight over which wins if both are present on
   the same element for a moment — source order (revealed declared
   second) settles any tie. Priming is opt-in per element (added by JS
   only for cards below the initial viewport), so a card is never hidden
   by default — no-JS and JS-failure paths show it as shipped. */
[data-card].is-priming {
  opacity: 0;
  translate: 0 14px;
}

[data-card].is-revealed {
  opacity: 1;
  translate: 0 0;
}

[data-card-item] {
  transition:
    opacity var(--settle-duration, .7s) var(--ease-settle, cubic-bezier(.19, 1, .22, 1)),
    translate var(--settle-duration, .7s) var(--ease-settle, cubic-bezier(.19, 1, .22, 1)),
    border-color var(--interaction-duration, .15s) ease;
}

[data-card-item].is-priming {
  opacity: 0;
  translate: 0 10px;
}

[data-card-item].is-revealed {
  opacity: 1;
  translate: 0 0;
}

[data-card-item]::before {
  transition: color var(--interaction-duration, .15s) ease;
}

/* Hover: restrained, media-gated, no transform/scale. Scoped to the
   catalog line items only — a whole-card hover on a full-width,
   non-interactive section reads as heavy-handed; a per-row cue on a
   scannable list (hairline + its leading index number shift to accent)
   is the one place a hover state earns its keep here. */
@media (hover: hover) and (pointer: fine) {
  [data-card-item]:hover,
  [data-card-item]:focus-within {
    border-top-color: var(--color-aegean, #2e5aac);
  }

  [data-card-item]:hover::before,
  [data-card-item]:focus-within::before {
    color: var(--color-aegean, #2e5aac);
  }
}

/* ---------------------------------------------------------------------
   Responsive — matches the page's own .card stacking breakpoint (860px,
   see css/styles.css), not an independent cutoff.
   --------------------------------------------------------------------- */

@media (max-width: 860px) {
  /* Simplified reveal: shorter travel, and (in catalog.js) no stagger
     between items — they fade in together. Overrides the same
     `translate` property the base rule sets, not `transform` — those
     are independent CSS properties, and setting `transform` here would
     stack on top of `translate` instead of replacing it. */
  [data-card].is-priming {
    translate: 0 8px;
  }

  [data-card-item].is-priming {
    translate: 0 6px;
  }
}

/* ---------------------------------------------------------------------
   Reduced motion — everything static. Media queries are live: this also
   catches a mid-animation OS toggle for anything catalog.js already
   primed before the toggle happened. catalog.js itself only checks
   prefers-reduced-motion once, at init (see INTEGRATION.md) — this CSS
   layer is the backstop for that gap.
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  [data-card].is-priming,
  [data-card-item].is-priming {
    opacity: 1;
    translate: none;
  }

  [data-card],
  [data-card-item] {
    transition: none;
  }

  [data-card-item]:hover {
    border-top-color: var(--color-line, #dfdcd2);
  }
}