/* The thread: shared by every Signal page. Materials, cross-page transitions, horizon line,
   instrument rail, contextual cursor, next room. Page-specific rules live in per-page CSS. */

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

.site-header { view-transition-name: site-header; }
.hz-rail, .thread-rail { view-transition-name: rail; }
.thread-horizon { view-transition-name: horizon; }

::view-transition-group(site-header), ::view-transition-group(rail) { animation-duration: 0s; }
::view-transition-group(horizon) { animation-duration: 520ms; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: thread-wipe 600ms cubic-bezier(.2, .7, .2, 1) both; }
@keyframes thread-wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }

/* Materials. The header, footer, and rail stay charcoal: they are the instrument. */
body[data-material] { background: var(--bg); color: var(--ink); }
body[data-material="paper"] { --bg: #eeeae2; --ink: #2a2420; --muted: #6b5a4a; --accent: #8a5230; --accent-line: #a0643c; --line: #cfc6b8; color-scheme: light; }
body[data-material="workshop"] { --bg: #17140f; --ink: #eeeae2; --muted: #b5ab9c; --accent: #dda884; --accent-line: #dda884; --line: #3a332a; }
body[data-material="field"] { --bg: #0b100e; --ink: #d9e2d6; --muted: #7f9a86; --accent: #dda884; --accent-line: #dda884; --line: #22302a; }
body[data-material] .site-header, body[data-material] .site-footer, .thread-rail { --bg: #101212; --ink: #eeeae2; --muted: #a7aaa5; --accent: #dda884; --accent-line: #dda884; --line: #343a39; }
body[data-material] .site-header, body[data-material] .site-footer { background: var(--bg); color: var(--ink); color-scheme: dark; }
body[data-material] .site-header, body[data-material] .site-footer { position: relative; z-index: 2; }

.thread-horizon { display: block; height: 2px; margin: 0; border: 0; background: var(--accent-line, var(--accent)); }
/* Homepage: the hairline sits at the foot of the hero, out of flow, so the canvas, H1, and layout are untouched. */
.hz-hero > .thread-horizon { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none; opacity: .7; }

/* Instrument rail */
.thread-rail { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom)); background: var(--bg); color: var(--accent); border-top: 1px solid var(--line); font: 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.thread-rail[hidden] { display: none; }
.thread-rail-eq { flex: 1; min-width: 0; text-align: center; text-transform: none; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-rail-reading { color: var(--muted); text-transform: none; white-space: nowrap; }
.thread-rail-pause { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink); background: none; border: 1px solid var(--line); border-radius: 2px; padding: 4px 10px; cursor: pointer; }
.thread-rail-pause[hidden] { display: none; }
.thread-rail-pause:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.thread-rail-icon { display: inline-block; min-width: 1em; text-align: center; }
body:has(.thread-rail:not([hidden])) { padding-bottom: calc(44px + env(safe-area-inset-bottom)); }
@media (max-width: 860px) { .thread-rail-reading { display: none; } }

/* Contextual cursor (fine pointers only; the native cursor is never hidden) */
.thread-cursor { position: fixed; left: 0; top: 0; z-index: 60; display: grid; place-items: center; width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 1.5px solid var(--accent-line, #dda884); border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .2s, width .25s, height .25s, margin .25s, background-color .25s; }
.thread-cursor.is-on { opacity: 1; }
.thread-cursor.is-on.is-hidden { opacity: 0; }
.thread-cursor.has-label { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: #101212; }
.thread-cursor span { font: 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #dda884; }

/* Next room: the teaser at the end of every page, painted in the next page's material */
.next-room { position: relative; display: grid; gap: 10px; padding: clamp(64px, 10vw, 140px) var(--pad); overflow: hidden; background: var(--nr-bg); color: var(--nr-ink); text-decoration: none; }
.next-room[data-next-material="charcoal"] { --nr-bg: #101212; --nr-ink: #eeeae2; --nr-muted: #a7aaa5; --nr-accent: #dda884; }
.next-room[data-next-material="paper"] { --nr-bg: #eeeae2; --nr-ink: #2a2420; --nr-muted: #6b5a4a; --nr-accent: #8a5230; }
.next-room[data-next-material="workshop"] { --nr-bg: #17140f; --nr-ink: #eeeae2; --nr-muted: #b5ab9c; --nr-accent: #dda884; }
.next-room[data-next-material="field"] { --nr-bg: #0b100e; --nr-ink: #d9e2d6; --nr-muted: #7f9a86; --nr-accent: #dda884; }
.next-room-kicker { font: 11px/1.4 var(--mono); letter-spacing: .08em; color: var(--nr-accent); }
.next-room-title { font: italic 400 clamp(48px, 8vw, 128px)/.95 var(--serif); }
.next-room-dek { max-width: 46ch; color: var(--nr-muted); }
.next-room::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--nr-accent); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.next-room:hover::after, .next-room:focus-visible::after { transform: scaleX(1); }
.next-room:focus-visible { outline: 2px solid var(--nr-accent); outline-offset: -6px; }
@media (prefers-reduced-motion: reduce) { .next-room::after, .thread-cursor { transition: none; } .thread-cursor { display: none; } }
html[data-still] .thread-cursor { display: none; }