/* punto-catalizador — the mark as the full stop, and the flood into the next section.
   The .dot rules only match marks the script injects, so with no JS the real
   periods stay. The flood layer shows only under html.fx-punto. */

/* ---------- The full stop ---------- */
.dot {
  position: relative;          /* anchors its sr-only period */
  display: inline-block;
  width: 0.3em;
  height: 0.3em;
  margin-left: 0.06em;         /* tight display tracking pulls the stop onto the last glyph */
  vertical-align: baseline;
}

.dot svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: currentColor;
  transform: rotate(-10deg);
}

.dot-scrub,
.dot-turn {
  transform-box: view-box;
  transform-origin: 50% 50%;
}

/* Each flooding mark already wears the colour of the section it opens. */
.dot[data-flood="ink"] svg { fill: var(--ink); }
.dot[data-flood="white"] svg { fill: var(--white); }
.dot[data-flood="blue"] svg { fill: var(--blue); }

.dot-tail { white-space: nowrap; }

@media (forced-colors: active) {
  .dot svg,
  .dot[data-flood] svg { fill: CanvasText; }
}

/* ---------- The flood layer ---------- */
.flood {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  will-change: transform;
}

.lvh-probe {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;              /* same box as .flood, so its width is the flood's real width */
  height: 100vh;
  height: 100lvh;
  visibility: hidden;
  pointer-events: none;
}

html.fx-punto .flood[data-flood] { display: block; }

/* Outgoing section + 5: over the section it leaves, under the one it opens. */
html.fx-punto .flood[data-flood="ink"] { z-index: var(--z-flood-hero); }
html.fx-punto .flood[data-flood="white"] { z-index: var(--z-flood-words); }
html.fx-punto .flood[data-flood="blue"] { z-index: var(--z-flood-silent); }

.flood[data-flood="ink"] use { fill: var(--ink); }
.flood[data-flood="white"] use { fill: var(--white); }
.flood[data-flood="blue"] use { fill: var(--blue); }

/* While its flood runs, the real mark hands over to the flood's mark. */
html.fx-punto [data-dot-off] .dot { visibility: hidden; }

/* ---------- Releases ---------- */
@media (prefers-reduced-motion: reduce) {
  html.fx-punto .flood[data-flood] { display: none; }
  html.fx-punto [data-dot-off] .dot { visibility: visible; }
}

@media print {
  html.fx-punto .flood[data-flood] { display: none; }
  html.fx-punto [data-dot-off] .dot { visibility: visible; }
}