/* Line system for the public sites (nordformgroup.com, nordform.ai), brand book 2.2.
   A drawing sheet: rails at the gutters, open hairline section rules, hairline Taking form
   fields, drafting-mark particles, big-word tables and a title block. Colours follow currentColor so
   every piece reads on Chalk, Paper and Graphite alike. Markup comes from packages/ui/src/lines.mjs. */
:root {
  --nf-copper: #c77745;
  --nf-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}
.nf-sheet {
  position: relative;
}
.nf-rails {
  position: absolute;
  inset: 0 var(--nf-gutter, max(24px, 6vw));
  border-inline: 1px solid rgba(138, 146, 151, 0.3);
  pointer-events: none;
  z-index: 1;
}

/* A section rule: one open hairline from rail to rail, with nothing on its ends (founder, 15 October). */
.nf-rule {
  --nf-hair: color-mix(in srgb, currentColor 22%, transparent);
  position: relative;
  height: 1px;
}
.nf-rule::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--nf-hair);
  transform-origin: left center;
}
.nf-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 18px;
}
.nf-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: 400 11px/1.6 var(--nf-mono, monospace);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nf-label::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--nf-copper, #c77745);
}
.nf-index {
  flex: none;
  white-space: nowrap;
  font: 400 11px/1.6 var(--nf-mono, monospace);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.72;
}

/* Hero field: full-bleed hairlines, a copper signal, drafting marks. */
.nf-field {
  position: relative;
  height: clamp(140px, 16vw, 220px);
}
.nf-field svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.nf-field path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
.nf-field .nf-signal {
  display: none;
  stroke: var(--nf-copper, #c77745);
  stroke-width: 1.6;
  vector-effect: none;
  stroke-dasharray: 0.05 1.2;
  stroke-dashoffset: 1.05;
}
.nf-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.nf-pt {
  position: absolute;
  font: 400 10px/1 var(--nf-mono, monospace);
  transform: translate(-50%, -50%);
  opacity: var(--o);
}
.nf-pt-copper {
  color: var(--nf-copper, #c77745);
}

/* A card's line study and the grid of hairline cells it sits in. */
.nf-cell-lines {
  display: block;
  width: 100%;
  height: 96px;
}
.nf-cell-lines path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* Big words drawn from a sentence on the page; the sentence carries the meaning. */
.nf-words {
  --nf-hair: color-mix(in srgb, currentColor 18%, transparent);
  display: grid;
  border-top: 1px solid var(--nf-hair);
  border-left: 1px solid var(--nf-hair);
}
.nf-words > * {
  position: relative;
  border-right: 1px solid var(--nf-hair);
  border-bottom: 1px solid var(--nf-hair);
  padding: 22px 20px 12px;
}
.nf-words > .nf-fill {
  padding: 0;
}
.nf-words small {
  position: absolute;
  top: 14px;
  right: 14px;
  font: 400 10px/1 var(--nf-mono, monospace);
  letter-spacing: 0.14em;
  opacity: 0.72;
}
.nf-word {
  display: block;
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

/* Dashed is proposed, solid is accepted: the solid line grows over the dashed one. */
.nf-timeline {
  position: relative;
  border-left: 1px dashed color-mix(in srgb, currentColor 40%, transparent);
}
.nf-timeline::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: color-mix(in srgb, currentColor 45%, transparent);
  transform-origin: top;
}

/* The footer's title block, as on a drawing sheet. */
.nf-titleblock {
  --nf-hair: color-mix(in srgb, currentColor 18%, transparent);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--nf-hair);
  border-left: 1px solid var(--nf-hair);
}
.nf-titleblock > div {
  padding: 14px 16px 16px;
  border-right: 1px solid var(--nf-hair);
  border-bottom: 1px solid var(--nf-hair);
}
.nf-titleblock small {
  display: block;
  font: 400 9px/1.4 var(--nf-mono, monospace);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}
.nf-titleblock span {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.4;
}
@media (max-width: 600px) {
  .nf-pt:nth-child(3n) {
    display: none;
  }
}
@media (max-width: 760px) {
  .nf-titleblock {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .nf-words {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .nf-words > .nf-fill {
    display: none;
  }
}

/* Motion: everything plays once and then holds still, so nothing on the sheet needs a pause control
   (WCAG 2.2.2 covers motion that runs on past five seconds). The copper signal crosses once. */
@media (prefers-reduced-motion: no-preference) {
  .nf-rule::before {
    animation: nf-rule 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .nf-draw path {
    animation: nf-draw 2125ms cubic-bezier(0.25, 0.6, 0.2, 1) both;
    animation-delay: calc(var(--i) * 90ms + 200ms);
  }
  .nf-field .nf-signal {
    display: inline;
    animation: nf-signal 4.2s cubic-bezier(0.4, 0, 0.2, 1) both;
    animation-delay: var(--d);
  }
  .nf-pt {
    animation: nf-pt 2600ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: var(--t);
  }
  .nf-rise {
    animation: nf-rise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .nf-rise-2 {
    display: inline-block;
    animation: nf-rise 700ms 140ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .nf-rise-3 {
    animation: nf-rise 700ms 320ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  @supports (animation-timeline: view()) {
    .nf-rule::before {
      animation: nf-rule linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 14%;
    }
    .nf-cell-lines path {
      animation: nf-draw linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
    .nf-timeline::before {
      animation: nf-grow linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 65%;
    }
    .nf-word {
      animation: nf-word linear both;
      animation-timeline: view();
      animation-range: cover 20% cover 45%;
    }
    .nf-cell {
      animation: nf-cell linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 25%;
    }
  }
}
@keyframes nf-rule {
  from {
    transform: scaleX(0);
  }
}
/* A clip reveal, not a dash: the fields stretch to any width, which a normalised dash cannot follow. */
@keyframes nf-draw {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0);
  }
}
@keyframes nf-signal {
  from {
    stroke-dashoffset: 1.05;
  }
  to {
    stroke-dashoffset: -0.05;
  }
}
@keyframes nf-pt {
  0% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)));
  }
  35% {
    opacity: 0.75;
  }
  100% {
    opacity: var(--o);
    transform: translate(-50%, -50%);
  }
}
@keyframes nf-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
@keyframes nf-grow {
  from {
    transform: scaleY(0);
  }
}
@keyframes nf-word {
  from {
    color: #c3c8cb;
  }
}
@keyframes nf-cell {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}
@media print {
  .nf-particles,
  .nf-signal {
    display: none !important;
  }
}