/* The ZYRN credit in the footer: a maker's plate on the instrument.

   The one place on eides.org that is not eides. The rule in CLAUDE.md (every colour a token) is eides' rule for
   eides' own marks; another firm's mark is not recoloured to fit ours. So this is ZYRN's wordmark under ZYRN's own
   treatment, as it is printed on Lumina and Rivawan: Space Grotesk 500, the word sheared into two halves with a
   Pulse seam through the cut, Vapor letters, and the glitch burst, set on ZYRN's Obsidian as a small riveted plate,
   the way a maker's nameplate sits on a surveying instrument. It sits in the sheet's bottom corner, where a drawing
   carries who drew it.

   Three things that break if touched (as on Rivawan):
   1. The face is self-hosted (the edge CSP allows no font host) and its unicode-range is pinned to the credit's
      letters, B, N, R, Y, Z and the colon, so it can never render eides' own text.
   2. The glitch animates the wrapper and the clones, never the halves: the halves carry the shear latch, and a
      keyframe transform on them would erase it.
   3. Reduced motion stops the glitch; the shear still latches, because it is the mark's resting state. */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/SpaceGrotesk-500.woff2') format('woff2');
  unicode-range: U+003A, U+0042, U+004E, U+0052, U+0059, U+005A;
}

.zc {
  --obsidian: #0E0F12;
  --vapor: #F2F3F5;
  --pulse: #6E56F8;
  --steel: #767E8C;
  --gd: 300ms;
  --shear-size: 15px;
  /* 16px: the seam overhangs the word by 0.55em each side; any tighter puts a violet rule through the colon. */
  display: inline-flex; align-items: center; gap: 16px;
  line-height: 0; vertical-align: middle;
  direction: ltr; unicode-bidi: isolate;
}

/* No plate: the credit sits on the footer's own ground at the end of the link row. ZYRN's two inks follow the
   ground, Obsidian letters by day and Vapor in Workspace, with the Pulse seam the same on both. */
.zc--plate {
  --zc-ink: var(--obsidian);
  --zc-lead: rgba(14, 15, 18, 0.55);
  position: relative;
  margin-inline-start: auto;
  padding: 4px 10px;
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-theme="dark"] .zc--plate { --zc-ink: var(--vapor); --zc-lead: rgba(242, 243, 245, 0.6); }
@media (hover: hover) and (pointer: fine) {
  .zc--plate:hover { transform: translateY(-1px); }
}

/* "BY:" in ZYRN's face, so the credit reads as one lockup; dimmed so the mark leads */
.zc__lead {
  font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 500;
  font-size: calc(var(--shear-size) * 0.62); letter-spacing: 0.08em; line-height: 1;
  color: var(--zc-lead, rgba(242, 243, 245, 0.6));
  white-space: nowrap;
}
.zc__link { display: inline-flex; align-items: center; line-height: 0; padding: 2px 0; color: inherit; text-decoration: none; }
.zc__link::after { content: ''; position: absolute; inset: 0; }   /* the whole credit is the link */
.zc__link:focus-visible { outline: none; }
.zc--plate:has(.zc__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; }

/* The shear: two copies of the word, clipped to its halves, pulled apart, a Pulse rule through the cut. */
.zc .shear {
  position: relative; display: inline-block;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 500; font-size: var(--shear-size);
  letter-spacing: 0.06em; line-height: 1; color: var(--zc-ink, var(--vapor));
}
.zc .shear__half { display: block; }
.zc .shear__half--top { clip-path: inset(0 0 50% 0); }
.zc .shear__half--bot { clip-path: inset(50% 0 0 0); margin-top: -1em; }
.zc .shear__seam {
  position: absolute; left: -0.55em; right: -0.55em; top: 50%; margin-top: -1px;
  display: block; height: 2px; background: var(--pulse);
  transform: scaleX(0); opacity: 0;
}
.zc .shear--auto .shear__half,
.zc .shear--auto .shear__seam { transition: transform 650ms cubic-bezier(0.83, 0, 0.17, 1), opacity 650ms cubic-bezier(0.83, 0, 0.17, 1); }
.zc .shear--auto.is-sheared .shear__half--top { transform: translateX(-0.1em); }
.zc .shear--auto.is-sheared .shear__half--bot { transform: translateX(0.1em); }
.zc .shear--auto.is-sheared .shear__seam { transform: scaleX(1); opacity: 1; }

/* The glitch: the wrapper jolts, the type splits into ZYRN's two emitted colours, two cloned bands are thrown
   sideways, two scan lines cut across against each other. assets/js/zyrn.js fires it at irregular intervals. */
.zc .glitch { position: relative; display: inline-block; }
.zc .glitch.is-glitching--micro { --gd: 130ms; }
.zc .glitch.is-glitching, .zc .glitch.is-glitching--micro { animation: zc-jolt var(--gd) steps(1, end) both; }
@keyframes zc-jolt {
  0% { transform: translate3d(0, 0, 0) skewX(0deg); }
  8% { transform: translate3d(-4px, 1px, 0) skewX(-1.4deg); }
  18% { transform: translate3d(3px, -1px, 0) skewX(1deg) scaleX(1.02); }
  27% { transform: translate3d(-2px, 0, 0) skewX(0deg); }
  38% { transform: translate3d(5px, 1px, 0) skewX(1.6deg); }
  49% { transform: translate3d(-2px, -1px, 0) skewX(-0.8deg) scaleX(0.99); }
  61% { transform: translate3d(2px, 0, 0) skewX(0deg); }
  73% { transform: translate3d(-5px, 1px, 0) skewX(-1.2deg); }
  86% { transform: translate3d(1px, 0, 0) skewX(0.4deg); }
  100% { transform: translate3d(0, 0, 0) skewX(0deg); }
}
.zc .glitch.is-glitching .shear, .zc .glitch.is-glitching--micro .shear { animation: zc-chroma var(--gd) steps(1, end) both; }
@keyframes zc-chroma {
  0%, 100% { text-shadow: none; }
  9% { text-shadow: 2px 0 #6E56F8, -2px 0 #33C9DE; }
  22% { text-shadow: -2px 0 #6E56F8, 2px 0 #33C9DE; }
  35% { text-shadow: none; }
  52% { text-shadow: 3px 0 #6E56F8, -2px 0 #33C9DE; }
  64% { text-shadow: none; }
  79% { text-shadow: -3px 0 #6E56F8, 2px 0 #33C9DE; }
  92% { text-shadow: none; }
}
.zc .glitch__ghost { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; will-change: transform, clip-path; }
.zc .glitch__ghost .shear__seam { opacity: 1; transform: scaleX(1); }
.zc .glitch__ghost--a .shear { color: #6E56F8; }
.zc .glitch__ghost--b .shear { color: #33C9DE; }
.zc .glitch.is-glitching .glitch__ghost--a { animation: zc-slice-a var(--gd) steps(1, end) both; }
.zc .glitch.is-glitching .glitch__ghost--b { animation: zc-slice-b var(--gd) steps(1, end) both; }
@keyframes zc-slice-a {
  0%, 100% { opacity: 0; }
  10% { opacity: 1; clip-path: inset(4% 0 72% 0); transform: translate3d(-9px, -1px, 0); }
  24% { opacity: 1; clip-path: inset(34% 0 48% 0); transform: translate3d(7px, 0, 0); }
  33% { opacity: 0; }
  58% { opacity: 1; clip-path: inset(66% 0 14% 0); transform: translate3d(-6px, 1px, 0); }
  70% { opacity: 0; }
  88% { opacity: 1; clip-path: inset(18% 0 62% 0); transform: translate3d(4px, 0, 0); }
  96% { opacity: 0; }
}
@keyframes zc-slice-b {
  0%, 100% { opacity: 0; }
  14% { opacity: 1; clip-path: inset(52% 0 30% 0); transform: translate3d(7px, 1px, 0); }
  27% { opacity: 0; }
  46% { opacity: 1; clip-path: inset(10% 0 76% 0); transform: translate3d(-7px, 0, 0); }
  56% { opacity: 0; }
  76% { opacity: 1; clip-path: inset(72% 0 8% 0); transform: translate3d(5px, -1px, 0); }
  85% { opacity: 0; }
}
.zc .glitch::after, .zc .glitch::before { content: ''; position: absolute; left: -10px; right: -10px; opacity: 0; pointer-events: none; }
.zc .glitch::after { top: 38%; height: 2px; background: #6E56F8; box-shadow: 0 0 10px rgba(110, 86, 248, 0.95), 0 0 3px rgba(110, 86, 248, 1); }
.zc .glitch::before { top: 56%; height: 1px; background: #33C9DE; box-shadow: 0 0 8px rgba(51, 201, 222, 0.8); }
.zc .glitch.is-glitching::after { animation: zc-scan-a var(--gd) steps(1, end) both; }
.zc .glitch.is-glitching::before { animation: zc-scan-b var(--gd) steps(1, end) both; }
@keyframes zc-scan-a {
  0%, 100% { opacity: 0; top: 38%; }
  18% { opacity: 1; top: 24%; }
  34% { opacity: 0; top: 24%; }
  52% { opacity: 0.85; top: 66%; }
  66% { opacity: 0; top: 66%; }
  84% { opacity: 0.6; top: 44%; }
}
@keyframes zc-scan-b {
  0%, 100% { opacity: 0; top: 56%; }
  14% { opacity: 0.9; top: 72%; }
  28% { opacity: 0; top: 72%; }
  58% { opacity: 0.75; top: 30%; }
  70% { opacity: 0; top: 30%; }
  90% { opacity: 0.55; top: 60%; }
}
.zc .glitch.is-glitching .shear__seam { animation: zc-seam var(--gd) steps(1, end) both; }
@keyframes zc-seam {
  0%, 100% { filter: none; }
  22% { filter: brightness(2.2); }
  40% { filter: none; }
  60% { filter: brightness(0.4); }
  78% { filter: brightness(1.8); }
}

@media (prefers-reduced-motion: reduce) {
  .zc .glitch.is-glitching, .zc .glitch.is-glitching--micro,
  .zc .glitch.is-glitching::after, .zc .glitch.is-glitching::before,
  .zc .glitch.is-glitching .shear, .zc .glitch.is-glitching .shear__seam,
  .zc .glitch__ghost { animation: none !important; opacity: 0; }
  .zc .glitch.is-glitching .shear { opacity: 1; }
  .zc .shear--auto .shear__half, .zc .shear--auto .shear__seam { transition: none; }
}