/* loader.css, the intro overlay (js/loader.js): the specimen being set up, in the sheet's own marks.
   Registration marks land where the site's own crop marks sit, so the exit is a match cut, not a wipe.
   Also holds .nf, the in-app not-found strip js/app.js raises for an unknown /work/<slug> (404.html is the
   standalone page). Tokens and house curves only. */

.ld {
  position: fixed; inset: 0; z-index: 110;      /* over the header and the night canvas, under the cursor layer (120) */
  background: var(--ground); color: var(--ink);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--margin) clamp(48px, 11vh, 110px);
  contain: layout paint style;
  opacity: 1; transition: opacity var(--ld-exit, 360ms) var(--ease-out-soft);
}
.ld.is-out { opacity: 0; }

/* registration marks: the corners of the sheet land first, staggered */
.ld-crops i { position: absolute; width: 18px; height: 18px; opacity: 0; transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); transition-delay: calc(var(--i) * 70ms); }
.ld-crops i::before, .ld-crops i::after { content: ''; position: absolute; background: var(--ink); }
.ld-crops i::before { width: 1px; height: 12px; } .ld-crops i::after { width: 12px; height: 1px; }
.ld-crops i:nth-child(1) { --i: 0; left: 10px; top: calc(var(--header-h) + 8px); transform: translate(-6px, -6px); }
.ld-crops i:nth-child(1)::before { left: 6px; top: -4px; } .ld-crops i:nth-child(1)::after { left: -4px; top: 6px; }
.ld-crops i:nth-child(2) { --i: 1; right: 10px; top: calc(var(--header-h) + 8px); transform: translate(6px, -6px); }
.ld-crops i:nth-child(2)::before { right: 6px; top: -4px; } .ld-crops i:nth-child(2)::after { right: -4px; top: 6px; }
.ld-crops i:nth-child(3) { --i: 3; left: 10px; bottom: 10px; transform: translate(-6px, 6px); }
.ld-crops i:nth-child(3)::before { left: 6px; bottom: -4px; } .ld-crops i:nth-child(3)::after { left: -4px; bottom: 6px; }
.ld-crops i:nth-child(4) { --i: 2; right: 10px; bottom: 10px; transform: translate(6px, 6px); }
.ld-crops i:nth-child(4)::before { right: 6px; bottom: -4px; } .ld-crops i:nth-child(4)::after { right: -4px; bottom: 6px; }
.ld.is-in .ld-crops i { opacity: .55; transform: none; }
.ld.is-out .ld-crops i { opacity: 0; transition-delay: 0s; }
html[data-nav="glass"] .ld-crops i:nth-child(1), html[data-nav="glass"] .ld-crops i:nth-child(2) { top: 10px; }

/* the caption block: head, the name under its bracket, the measure, the count */
.ld-stage { position: relative; }
.ld-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ld-row b { font-weight: 400; color: var(--ink); }
.ld-dim { color: var(--ink-3); opacity: .62; }
.ld-s { color: var(--red); }

.ld-name {
  position: relative; display: inline-block; margin-top: 14px;   /* inline-block: the bracket measures the name, not the column */
  font-family: var(--font-sans); font-weight: 200; font-size: clamp(30px, 5vw, 68px); letter-spacing: var(--track-display); line-height: 1; color: var(--ink);
  opacity: 0; transform: translateY(6px); transition: opacity 420ms var(--ease-out) 80ms, transform 420ms var(--ease-out) 80ms;
}
.ld.is-in .ld-name { opacity: 1; transform: none; }
/* the bracket, drawn left to right under the name */
.ld-br { position: absolute; left: -.04em; right: -.04em; top: calc(100% + 9px); height: 7px; border: 1px solid var(--red); border-top: 0; transform: scaleX(0); transform-origin: 0 50%; transition: transform 520ms var(--ease-out) 200ms; }
.ld.is-in .ld-br { transform: none; }

.ld-measure { position: relative; height: 12px; margin: clamp(30px, 5.5vh, 58px) 0 10px; }
.ld-rule { position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: var(--rule); }
.ld-fill { position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; }
.ld-t { position: absolute; top: 2px; left: calc(var(--x) * 100%); width: 1px; height: 5px; background: var(--ink); opacity: .28; }
.ld-t.is-end { margin-left: -1px; }
.ld-play { position: absolute; left: 0; top: 0; width: 1px; height: 12px; background: var(--red); }

@media (max-width: 720px) { .ld-crops { display: none; } }   /* the site hides its own crop marks here, so the sheet does too */
@media (max-width: 560px) { .ld-dim { display: none; } }
@media (prefers-reduced-motion: reduce) { .ld, .ld * { transition: none !important; } }

/* ---- not found: the strip js/app.js raises when /work/<slug> has no plate filed ---- */
.nf {
  position: fixed; left: var(--margin); right: var(--margin); bottom: 16px; z-index: 70;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 14px; background: var(--ground); border: 1px solid var(--ink); box-shadow: 2px 2px 0 0 var(--ink);
  animation: nf-in 260ms var(--ease-out);
}
.nf-k { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--red); white-space: nowrap; }
.nf-p { flex: 1 1 320px; font-family: var(--font-serif); font-size: var(--fs-small); line-height: 1.45; color: var(--ink-2); }
.nf-s { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-small); color: var(--ink); }   /* the slug is lowercase by construction, so it stays out of the mono caps */
@keyframes nf-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nf { animation: none; } }