/* Sequence reveals (Skeleton > Fill > Text). Content is hidden only under html.seq-armed,
   which sequence-init.js sets; no-JS and reduced-motion visitors always see the final page.
   Overlays sit in an absolutely positioned layer: no box changes size, so no layout shift. */
html.seq-armed [data-seq~=fill]:not(.seq-done) [data-seq-role~=media],
html.seq-armed [data-seq~=text]:not(.seq-done) :is([data-seq-role~=title],[data-seq-role~=body],[data-seq-role~=meta]){opacity:0}
html.seq-armed [data-seq~=skeleton]:not(.seq-done) [data-seq-frame=rule]{border-color:transparent}

.seq-host{position:relative}
.seq-layer{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden;color:var(--ink)}
.seq-layer>*{position:absolute;left:0;top:0}
.seq-frame{overflow:visible;fill:none;stroke:currentColor;stroke-width:1}
.seq-frame .seq-edge{stroke-opacity:.55}
.seq-frame .seq-x{stroke-opacity:.28}
.seq-frame .seq-corner{stroke:var(--accent);stroke-width:2}
.seq-bar{background:var(--line);border-radius:2px;transform-origin:0 50%}
/* The carriage: a dither band (2px ordered checker) trailing an accent print edge. */
.seq-carriage{width:22px;opacity:0;background:repeating-conic-gradient(var(--ink) 0 25%,transparent 0 50%) 0 0/4px 4px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 70%);mask-image:linear-gradient(90deg,transparent,#000 70%)}
.seq-carriage::after{content:"";position:absolute;top:0;right:0;bottom:0;width:2px;background:var(--accent)}
.seq-caret{width:3px;height:1px;background:var(--accent);opacity:0;transform-origin:0 0}

@media(prefers-reduced-motion:reduce){
  /* Belt and braces: init never arms under reduced motion, and a mid-visit switch disarms. */
  html.seq-armed [data-seq] [data-seq-role]{opacity:1!important}
  .seq-layer{display:none}
}