/* ── The class layer ─────────────────────────────────────────────────────────
   Small and deliberate. The site itself is authored with inline styles; these
   classes exist so consumers of the design system get the two things that are
   genuinely shared: the hover cell, and the keyframes.

   THE HOVER CELL is Ontolo's signature interaction and applies to every list
   row, statement row and tile: it rests on the band, takes a white surface on
   hover, and grows a cobalt sideline on its left edge. Square corners, always.
   No lift, no scale, no colour change on the text. */

.ont-cell {
  background:var(--cell-rest);
  border-left:var(--sideline-w) solid transparent;
  border-radius:var(--radius-cell);
  transition:background var(--dur-hover) var(--ease),
             border-color var(--dur-hover) var(--ease),
             box-shadow var(--dur-hover) var(--ease);
}
.ont-cell:hover,
.ont-cell[data-active="true"] {
  background:var(--cell-hover);
  border-left-color:var(--cell-sideline);
}

/* a cell that reads as a tile: sits on a pale band, hairline all round */
.ont-cell--tile {
  background:var(--surface-sunken);
  border:var(--border-w) solid var(--border-hairline);
  border-left:var(--sideline-w) solid transparent;
  padding:var(--tile-pad);
}
.ont-cell--tile:hover,
.ont-cell--tile[data-active="true"] { box-shadow:var(--shadow-3); }

/* a cell that reads as a row in a ruled list */
.ont-cell--row {
  border-bottom:var(--border-w) solid var(--border-rule);
  padding:var(--s-6) var(--s-5);
}

/* labels — one object, three tracking values */
.ont-eyebrow,
.ont-label,
.ont-inline {
  font-family:var(--font-mono);
  text-transform:uppercase;
  color:var(--fg-label);
  margin:0;
}
.ont-eyebrow { font-size:var(--text-micro); letter-spacing:var(--track-eyebrow); }
.ont-label   { font-size:var(--text-nano);  letter-spacing:var(--track-eyebrow); }
.ont-inline  { font-size:var(--text-nano);  letter-spacing:var(--track-label); }

/* mono figures are always tabular */
.ont-figure { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* the one background form a page is allowed */
.ont-backform { position:absolute; line-height:0; pointer-events:none; opacity:.5; }

@keyframes ont-pulse { 0%,100% { opacity:1 } 50% { opacity:.25 } }

@keyframes ont-rise {
  from { transform:translateY(108%); font-variation-settings:"wdth" var(--wdth-rise-from) }
  to   { transform:translateY(0);    font-variation-settings:"wdth" var(--wdth-normal) }
}

/* a bright segment travelling a measured path; --ont-s and --ont-l are set in JS
   from getTotalLength() */
@keyframes ont-travel {
  0%   { opacity:0; stroke-dashoffset:var(--ont-s,0) }
  12%  { opacity:1 }
  88%  { opacity:1 }
  100% { opacity:0; stroke-dashoffset:var(--ont-l,0) }
}

@media (prefers-reduced-motion: reduce) {
  [data-rise] { animation:none !important; transform:none !important; }
}