/* No Rush · scene.css: the Active Key host (scene/key3d.js, both renderers) and the security-print primitives
   shared by every page: guilloche rosettes (gatekit.js .ro-* and rules.js .g1-.g4), security fibres, vermilion seals,
   microprint rules, crop marks, hash codes, the share-card modal and the shell's small extras. */

/* ---------------------------------------------------------------- the Active Key */
.nrk { position: absolute; inset: 0; overflow: visible; contain: layout; }
.nrk-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nrk-seal {
  position: absolute; left: 50%; top: 50%; z-index: 4; width: min(58%, 300px); aspect-ratio: 1; pointer-events: none;
  color: var(--seal); opacity: 0; transform: translate(-50%, -50%) rotate(-14deg) scale(.6);
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--seal) 60%, transparent));
}
.nrk-seal svg { width: 100%; height: 100%; overflow: visible; }
.nrk-seal.on { animation: nrkSeal 4600ms var(--ease) forwards; }
.nrk-seal-ring { font: 600 10.5px/1 var(--nr-mono, ui-monospace), monospace; letter-spacing: .12em; text-transform: uppercase; }
.nrk-seal-big { font: 900 44px/1 var(--font-serif); letter-spacing: .06em; }
.nrk-seal-small { font: 700 16px/1 var(--nr-mono, ui-monospace), monospace; letter-spacing: .5em; }
:root[data-theme="day"] .nrk-seal { mix-blend-mode: multiply; filter: none; }
@keyframes nrkSeal {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-24deg) scale(2.1); }
  9% { opacity: 1; transform: translate(-50%, -50%) rotate(-11deg) scale(.94); }
  14% { transform: translate(-50%, -50%) rotate(-14deg) scale(1); }
  82% { opacity: 1; transform: translate(-50%, -50%) rotate(-14deg) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(-14deg) scale(1.04); }
}

/* ---------------------------------------------------------------- guilloche rosette (gatekit.js rosetteSVG) */
svg.rosette { display: block; width: 100%; height: auto; overflow: visible; }
.rosette path, .rosette circle { fill: none; vector-effect: non-scaling-stroke; }
.ro-rim { stroke: var(--line-2); stroke-width: 1; }
.ro-rim2 { stroke: var(--line); stroke-dasharray: 1 3; }
.ro-tick { stroke: color-mix(in srgb, var(--ink-2) 70%, transparent); stroke-width: 1; stroke-linecap: round; }
.ro-a { stroke: var(--guilloche); stroke-width: .7; opacity: .75; }
.ro-b { stroke: var(--guilloche-2); stroke-width: .7; opacity: .75; }
.ro-c { stroke: color-mix(in srgb, var(--ink) 80%, transparent); stroke-width: .8; opacity: .7; }
.ro-d { stroke: var(--fibre-c); stroke-width: .8; opacity: .7; }
.ro-ghost { stroke: var(--line-2); stroke-dasharray: 2 4; }
.ro-micro { fill: var(--muted); font-family: var(--nr-mono, ui-monospace), monospace; letter-spacing: .06em; opacity: .85; }
.ro-center { fill: var(--ink); font-family: var(--nr-mono, ui-monospace), monospace; font-weight: 700; letter-spacing: .04em; }
.ro-sub { fill: var(--muted); font-family: var(--nr-mono, ui-monospace), monospace; font-weight: 600; letter-spacing: .24em; }
.ro-empty .ro-sub { fill: var(--muted); letter-spacing: .08em; font-family: var(--font-sans); }
/* draw-in: every line starts hidden and is drawn in order (--i) */
.draw .rosette .ro-a, .draw .rosette .ro-b, .draw .rosette .ro-c, .draw .rosette .ro-d {
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: roDraw 1.8s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 28ms);
}
@keyframes roDraw { to { stroke-dashoffset: 0; } }

/* ---------------------------------------------------------------- guilloche rosette (rules.js rosetteSVG) */
.rosette .g1 { stroke: var(--guilloche); stroke-width: .6; opacity: .6; }
.rosette .g2 { stroke: var(--guilloche-2); stroke-width: .6; opacity: .6; }
.rosette .g3 { stroke: var(--line-2); stroke-width: .8; }
.rosette .g4 { stroke: var(--seal); stroke-width: 1.2; opacity: .8; }

/* ---------------------------------------------------------------- security fibres */
svg.fibres { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.fibres path { fill: none; stroke-width: 1.1; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fibres .fib-0, .fibres .fb0 { stroke: var(--fibre-a); }
.fibres .fib-1, .fibres .fb1 { stroke: var(--fibre-b); }
.fibres .fib-2, .fibres .fb2 { stroke: var(--fibre-c); }
:root:not([data-theme="day"]) .fibres { filter: drop-shadow(0 0 2px rgba(255, 255, 255, .25)); opacity: .75; }
:root[data-theme="day"] .fibres { opacity: .45; }

/* ---------------------------------------------------------------- the vermilion seal (rules.js sealSVG) */
svg.seal { display: block; width: 100%; height: auto; overflow: visible; color: var(--seal); }
.seal .s-o { fill: none; stroke: currentColor; stroke-width: 3; }
.seal .s-i { fill: none; stroke: currentColor; stroke-width: 1; }
.seal .s-ring { fill: currentColor; font: 700 8.4px/1 var(--nr-mono, ui-monospace), monospace; letter-spacing: .1em; }
.seal .s-c { fill: currentColor; font: 900 22px/1 var(--font-serif); letter-spacing: .04em; }
:root:not([data-theme="day"]) svg.seal { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--seal) 55%, transparent)); }

/* ---------------------------------------------------------------- microprint rule, crop marks, hashes */
.mp-rule {
  height: 9px; overflow: hidden; white-space: nowrap; user-select: none; pointer-events: none;
  font: 600 6px/9px var(--nr-mono, ui-monospace), monospace; letter-spacing: .14em; color: var(--muted); opacity: .7;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.mp-rule span { display: inline-block; }
.cm { position: absolute; width: 14px; height: 14px; pointer-events: none; border-color: var(--line-2); border-style: solid; border-width: 0; }
.cm-tl { left: 8px; top: 8px; border-left-width: 1px; border-top-width: 1px; }
.cm-tr { right: 8px; top: 8px; border-right-width: 1px; border-top-width: 1px; }
.cm-bl { left: 8px; bottom: 8px; border-left-width: 1px; border-bottom-width: 1px; }
.cm-br { right: 8px; bottom: 8px; border-right-width: 1px; border-bottom-width: 1px; }
code.hash, .hash {
  font: 500 12px/1.5 var(--nr-mono, ui-monospace), monospace; color: var(--ink-2); word-break: break-all; overflow-wrap: anywhere;
  background: none; padding: 0;
}
code.hash[data-copy] { cursor: copy; border-bottom: 1px dotted var(--line-2); }
code.hash[data-copy]:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------------------------------------------------------------- share card modal */
.modal.modal-share { width: min(760px, 100%); }
.share-preview { display: block; width: 100%; height: auto; border: 1px solid var(--line-2); border-radius: 3px; box-shadow: var(--shadow); }

/* ---------------------------------------------------------------- shell extras */
.ribbon .r-pause, .ribbon .r-bunker { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.ribbon .r-pause::before { content: "II"; font-family: var(--nr-mono, ui-monospace), monospace; font-weight: 800; letter-spacing: -.08em; }
.ribbon .r-bunker::before { content: "◆"; }
.is-stale .flap, .is-stale [data-num] { opacity: .6; transition: opacity var(--t-med); }
:root.local-demo body { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--amber) 55%, transparent); }
:root.local-demo #watermark { z-index: 95; }

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .nrk-seal.on { animation: none; opacity: 1; transform: translate(-50%, -50%) rotate(-14deg); }
  .draw .rosette .ro-a, .draw .rosette .ro-b, .draw .rosette .ro-c, .draw .rosette .ro-d { animation: none; stroke-dashoffset: 0; }
}