/* ============================================================
   Værksted (revisionsblad) — supplement til style.css.
   Genbruger brand-tokens: --ink/--paper/--accent/--line/--mono/--serif.
   ============================================================ */

.hero-lead { max-width: 52ch; }

/* aktiv nav-side */
.topbar nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

/* ---------- revisionslog (ledger) ---------- */
.rev-log { list-style: none; margin: 0; padding: 0; }

.rev-rk {
  display: grid;
  grid-template-columns: 3.2rem 8.5rem 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 18px 4px;
  border-top: 1px solid var(--line);
}
.rev-rk:last-child { border-bottom: 1px solid var(--line); }

.rev-id {
  font-family: var(--mono);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--ink-soft);
  line-height: 1;
}
.rev-dato {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  padding-top: 0.35em;
}
.rev-tekst {
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.5;
  max-width: 60ch;
}

/* den der er live nu: rust-accent, sparsomt */
.rev-aktiv .rev-id { color: var(--accent); }
.rev-aktiv .rev-tekst { color: var(--ink); }

.rev-note {
  margin: 26px 0 0;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.rev-note a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--line); }
.rev-note a:hover { border-bottom-color: var(--accent); }

/* ---------- materialeliste (stykliste) ---------- */
.kolofon { margin: 0; }
.kolofon > div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 20px;
  padding: 14px 4px;
  border-top: 1px solid var(--line-faint);
}
.kolofon > div:last-child { border-bottom: 1px solid var(--line-faint); }
.kolofon dt {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 0.2em;
}
.kolofon dd { margin: 0; font-size: 1rem; max-width: 60ch; }

/* ---------- ascii easter-egg-plads (Fig. E · tandhjulet) ---------- */
.section-ascii { border-bottom: none; }
.ascii-plads {
  margin-top: 8px;
  height: 420px;
  border: 1px solid var(--line-faint);
  position: relative;
  overflow: hidden;
}
.egg-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent;
}

@media (max-width: 640px) {
  .ascii-plads { height: 320px; }
}

/* ---------- små skærme ---------- */
@media (max-width: 640px) {
  .rev-rk { grid-template-columns: 2.6rem 1fr; }
  .rev-dato { grid-column: 2; padding-top: 0; }
  .rev-tekst { grid-column: 2; }
  .rev-id { grid-row: span 2; }
  .kolofon > div { grid-template-columns: 1fr; gap: 4px; }
}

/* ============================================================
   Bevaegelse (revisionsbladet skal staa stille, dette er et
   dokument, ikke et show). Samme sprog som forsiden og under-
   siderne: rammen tegner sig ved indlaesning, og posteringerne
   foeres ind én ad gangen. Reveal-motoren er hjemmesider.js
   (defensiv: heroPlot no-op'er uden .pitch-schema).

   ALT er kun forbedring af noget allerede synligt: intet har
   opacity:0 som grundtilstand uden JS, saa siden staar faerdig
   uden JS. .ls-reveal-ready saettes KUN af JS, naar bevaegelse
   er tilladt. style.css nulstiller al animation ved reduceret
   bevaegelse; blokken nederst holder desuden koreografi-lagene
   skjult, saa de ikke efterlader et spor.
   Tokens genbruges fra style.css; her tilfoejes kun z-laget.
   ============================================================ */
:root { --z-frame: 30; }

@keyframes ls-rise     { from { opacity: 0; transform: translateY(12px); } }
@keyframes ls-fade     { from { opacity: 0; } }
@keyframes ls-reveal   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cm-pop      { from { opacity: 0; transform: scale(0.35); } }
@keyframes fp-life     { 0% { opacity: 1; } 84% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fp-draw-x   { from { transform: scaleX(0); } }
@keyframes fp-draw-y   { from { transform: scaleY(0); } }

/* spring-til-indhold (som paa undersiderne; .skip bor i forside.css,
   ikke i style.css, derfor gentaget her) */
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: var(--z-frame);
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 10px 16px;
  font-family: var(--mono);
  font-size: 0.8rem;
  text-decoration: none;
  transition: top 160ms ease;
}
.skip:focus { top: 12px; }

/* 1 · beskaeringsmaerker tikker ind fra deres hjoerne */
.cropmark { animation: cm-pop 360ms cubic-bezier(0.22, 0.7, 0.3, 1) backwards; }
.cm-tl { transform-origin: top left;     animation-delay: 40ms; }
.cm-tr { transform-origin: top right;    animation-delay: 100ms; }
.cm-bl { transform-origin: bottom left;  animation-delay: 160ms; }
.cm-br { transform-origin: bottom right; animation-delay: 220ms; }

/* 2 · arkets ramme traekkes af en rust-pen, der forsvinder og efter-
   lader den permanente 1px-kant. Overlayet er usynligt som grund-
   tilstand (opacity:0) -> intet spor uden animation. */
.frame-plot { position: absolute; inset: 0; pointer-events: none; z-index: var(--z-frame); opacity: 0; animation: fp-life 1200ms ease-out 140ms both; }
.frame-plot i { position: absolute; background: var(--accent); }
.frame-plot .fp-t { top: -1px; left: -1px; right: -1px; height: 1px; transform-origin: left center;   animation: fp-draw-x 240ms cubic-bezier(0.4, 0, 0.2, 1) 140ms backwards; }
.frame-plot .fp-r { top: -1px; right: -1px; bottom: -1px; width: 1px; transform-origin: center top;    animation: fp-draw-y 220ms cubic-bezier(0.4, 0, 0.2, 1) 360ms backwards; }
.frame-plot .fp-b { bottom: -1px; left: -1px; right: -1px; height: 1px; transform-origin: right center; animation: fp-draw-x 240ms cubic-bezier(0.4, 0, 0.2, 1) 560ms backwards; }
.frame-plot .fp-l { top: -1px; left: -1px; bottom: -1px; width: 1px; transform-origin: center bottom;   animation: fp-draw-y 240ms cubic-bezier(0.4, 0, 0.2, 1) 780ms backwards; }

/* 3 · rolig indgang for heroteksten (ren CSS, koerer uden JS) */
.hero .annot { animation: ls-fade 480ms ease 220ms backwards; }
.hero h1     { animation: ls-rise 620ms cubic-bezier(0.22, 0.7, 0.3, 1) 320ms backwards; }
.hero-lead   { animation: ls-rise 620ms cubic-bezier(0.22, 0.7, 0.3, 1) 540ms backwards; }

/* 4 · scroll-reveals: posteringerne foeres ind én ad gangen.
   Grundtilstand = fuldt synlig. JS saetter .ls-reveal-ready paa
   <html> FOER et element ruller i syne, saa forudtilstanden (let
   daempet + 18px) er identisk med keyframens fra-tilstand -> ingen
   hop. rev-raekker og stykliste-raekker forskydes via animationDelay
   sat i hjemmesider.js. */
.ls-reveal-ready .reveal,
.ls-reveal-ready .reveal-row { opacity: 0; transform: translateY(18px); }

.reveal.is-in     { animation: ls-reveal 1000ms cubic-bezier(0.33, 1, 0.68, 1) both; will-change: opacity, transform; }
.reveal-row.is-in { animation: ls-reveal 900ms cubic-bezier(0.33, 1, 0.68, 1) both; will-change: opacity, transform; }

.reveal.is-done,
.reveal-row.is-done { opacity: 1; transform: none; will-change: auto; animation: none; }

/* reduceret bevaegelse: intet loeber. style.css nulstiller allerede
   al animation; her holdes koreografi-lagene skjult/aabne, saa intet
   spor bliver haengende. */
@media (prefers-reduced-motion: reduce) {
  .frame-plot { display: none !important; }
  .ls-reveal-ready .reveal,
  .ls-reveal-ready .reveal-row { opacity: 1; transform: none; }
}