/* DABB 2 — the band: THE TRACKWAY (الأثر). The border at the very top and the very bottom of every page — finer here,
   and drawn in white on the dark: faint where the page has not been read, full white where it has.
   One motif: a fine, gently sinuous tail line with a small rounded print alternating either side of it — what a dabb
   leaves in the sand. Soft on purpose: no points, no teeth (the owner found the old spines "sharp, like a warning").

   .band        the art: a CSS mask (one inline SVG tile) over a background colour, so the colour is always a token
   .band--top   fixed at the top of the viewport; faint, and inked from the start edge as the page is read
   .band--in    the same band at the top of the menu overlay
   .band--foot  the last thing on the page, inside the footer: the same motif about three times larger, fully inked, calm

   The tile is 40 × 12 (one stride: a print above, a print below) and repeats with `round`, so the row always holds a
   whole number of strides — no cut print at either edge. In Arabic the whole band is mirrored: the trackway starts at
   the start edge and walks towards the end edge in both directions.                                                  */

:root {
  --band-total: var(--band-h);                                  /* full height of the top band — the header, the menu and other parts pad themselves by this */
}

.band {
  --band-ink: var(--fg);                                        /* white on the dark page */
  --band-fill: var(--band-ink);                                 /* the part already read */
  --band-s: var(--band-h);                                      /* height of the band */
  --band-pitch: calc(var(--band-s) * 40 / 12);                  /* one stride; 00-band.js reads the resolved width */
  --band-ghost: 0.22;                                           /* the part not read yet */
  --band-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12' preserveAspectRatio='none'%3E%3Cpath d='M-20 6C-13.33 4.8-6.67 4.8 0 6C6.67 7.2 13.33 7.2 20 6C26.67 4.8 33.33 4.8 40 6C46.67 7.2 53.33 7.2 60 6' fill='none' stroke='%23000' stroke-width='1'/%3E%3Cellipse cx='10' cy='2.9' rx='2.7' ry='1.45' transform='rotate(-24 10 2.9)'/%3E%3Cellipse cx='30' cy='9.1' rx='2.7' ry='1.45' transform='rotate(24 30 9.1)'/%3E%3C/svg%3E");
  --band-tile-w: var(--band-step, var(--band-pitch));           /* --band-step = the exact width of one stride (a percentage, set by 00-band.js) */
  position: relative; display: block;
  inline-size: 100%; block-size: var(--band-s);
  pointer-events: none;
}
[dir="rtl"] .band { transform: scaleX(-1); }                    /* the trackway walks from the start edge — and the reading with it */

.band::before, .band::after {
  content: ""; position: absolute; inset: 0;
  -webkit-mask-image: var(--band-tile); mask-image: var(--band-tile);
  -webkit-mask-position: 0 0; mask-position: 0 0;
  -webkit-mask-size: var(--band-tile-w) 100%; mask-size: var(--band-tile-w) 100%;
  -webkit-mask-repeat: round no-repeat; mask-repeat: round no-repeat;
}
/* the whole trackway, faint */
.band::before { background: var(--band-ink); opacity: var(--band-ghost); }
/* the part already read: inked, uncovered from the start edge
   (--band-read is set by 00-band.js: the progress snapped to whole prints; without it the ink follows --page-progress directly) */
.band::after {
  --band-rest: calc(100% - var(--band-read, calc(var(--page-progress, 0) * 100%)));
  background: var(--band-fill);
  clip-path: inset(0 var(--band-rest) 0 0);                     /* physical on purpose: the band itself is mirrored in Arabic */
}

/* ── top of the page ── */
.band--top { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--z-band); }
html[data-bar="sun"] .band--top { --band-ink: var(--sun-ink); }      /* the bar over the sun (00-header.js): the trackway pressed in deep ink, like the bar's type */
/* while a service is on screen the inked part takes its colour — the trackway changes colour with the ground, like the animal */
html[data-accent="games"] .band--top,
html[data-accent="ai"] .band--top,
html[data-accent="apps"] .band--top,
html[data-accent="web"] .band--top,
html[data-accent="ux"] .band--top { --band-fill: var(--accent-mark); }

/* ── inside the menu overlay: same place, same reading; it wears the overlay's own ink (see 00-index.css) ── */
.band--in { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 2; --band-ink: currentColor; --band-fill: currentColor; }

/* ── bottom of the page: larger, fully inked, calm — PRESSED INTO THE SAND like every other print of the site (DABB.Sand.press:
   the hollow in the deep tone of a print, --sand-hole, at .62; and a hair further from the sun — down and away from the top
   left — its lit lip in the sand's highlight at .34). It was a flat grey (--n-600), which faded on the lighter sand. ── */
.band--foot {
  --band-ink: var(--sand-hole);
  --band-lip: 1.2px;                                            /* how far the lit lip lies from the hollow, away from the sun */
  --band-s: clamp(22px, 2vw, 30px);
  --band-step: initial;                                         /* its own stride (40 / 12 of its height), rounded to a whole number by the mask */
  /* the same tile with a finer line: at this size the tail line stays a line, the prints carry the weight */
  --band-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12' preserveAspectRatio='none'%3E%3Cpath d='M-20 6C-13.33 4.9-6.67 4.9 0 6C6.67 7.1 13.33 7.1 20 6C26.67 4.9 33.33 4.9 40 6C46.67 7.1 53.33 7.1 60 6' fill='none' stroke='%23000' stroke-width='.6'/%3E%3Cellipse cx='10' cy='2.7' rx='2.4' ry='1.35' transform='rotate(-24 10 2.7)'/%3E%3Cellipse cx='30' cy='9.3' rx='2.4' ry='1.35' transform='rotate(24 30 9.3)'/%3E%3C/svg%3E");
}
.band--foot::before { background: var(--sand-high); opacity: 0.34; transform: translate(calc(var(--band-lip) * 0.64), calc(var(--band-lip) * 0.77)); }      /* the lit lip */
[dir="rtl"] .band--foot::before { transform: translate(calc(var(--band-lip) * -0.64), calc(var(--band-lip) * 0.77)); }      /* (the band itself is mirrored in Arabic — the sun is not) */
.band--foot::after { clip-path: none; opacity: 0.62; }          /* the hollow */

@media (prefers-reduced-motion: no-preference) {
  html:not(.is-calm) .band::after { transition: clip-path var(--t-2) var(--e-dash), background-color var(--t-3) var(--e-std); }
  html:not(.is-calm) .band--top::before { transition: background-color var(--t-2) var(--e-std); }
}