/*! WAPI Connect, "Kuwait Time": motion module "day" styles (M09). Plan: .router/MOTION.md §4.1 H0 (clock).
    The Kuwait clock: every [data-kw-time] gets an aria-hidden copy (span.w-rd) laid over it, one clipped window per
    digit, rolled by motion/day.js. The <time> text stays the true time; only its paint is handed to the copy.
    The day (#day) has no track since the clarity rollout (2026-10-31): a static, data-calm index of four moments laid
    out by wapi-layout.css, so nothing here changes its height, position or ink. Without html.w-motion, or with reduced
    motion, nothing here applies. Logical properties, tokens only, no new colour. */

@media (prefers-reduced-motion: no-preference) {
  /* before day.js lays the copy over it, the time is painted by nobody (it rolls up from 00:00 on first view) */
  html.w-motion body.wapi-p-home [data-kw-time] { -webkit-text-fill-color: transparent; }
  [data-kw-time].w-rd-on { position: relative; -webkit-text-fill-color: transparent; }
  .w-rd {
    position: absolute; inset-block-start: 0; inset-inline-start: 0; display: flex; align-items: flex-start;
    direction: ltr; white-space: nowrap; pointer-events: none; user-select: none; -webkit-user-select: none;
    -webkit-text-fill-color: currentColor;
  }
  .w-rd__d, .w-rd__c { position: relative; display: block; }
  .w-rd__d { clip-path: inset(0 -.3em); }                 /* the digit's window: one line high, open at the sides */
  .w-rd__d::after, .w-rd__c::after { content: attr(data-d) / ""; }
  .w-rd__d::after { visibility: hidden; }                  /* only gives the window the digit's own width */
  .w-rd__in { position: absolute; inset-inline: 0; inset-block-start: 0; text-align: center; }
  .w-rd__in::before { content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0" / ""; display: block; white-space: pre; }
}

/* Print: the plain time */
@media print {
  [data-kw-time] { -webkit-text-fill-color: currentColor !important; }
  .w-rd { display: none !important; }
}