/* magician.css · Relayform · I, The Magician · "Precision instrument"
   Extends arcana.css: overrides its --arc-* tokens on [data-brand="the-magician"], adds the --brand-*
   extras arcana-brand.css reads, then the signature: a drafting-office grid, violet trace wires and a
   title that is plotted onto the page stroke by stroke. Fonts are SIL OFL, self-hosted. */
/* fonts:begin Space Grotesk, IBM Plex Sans, IBM Plex Mono */
@font-face { font-family:"Space Grotesk"; font-style:normal; font-weight:400 700; font-display:swap; src:url("../../fonts/brands/space-grotesk-normal-400-700.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:400 600; font-stretch:100%; font-display:swap; src:url("../../fonts/brands/ibm-plex-sans-normal-400-600.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("../../fonts/brands/ibm-plex-mono-normal-400.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("../../fonts/brands/ibm-plex-mono-normal-500.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* fonts:end */

[data-brand="the-magician"] {
  --arc-paper: #0d0e11;
  --arc-surface: #15171c;
  --arc-wash: #111318;
  --arc-ink: #eceae3;
  --arc-muted: #a7abb5;
  --arc-line: #2c3039;
  --arc-accent: #9b7cff;
  --arc-on-accent: #0d0e11;
  --arc-focus: #c3b1ff;
  --arc-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --arc-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --arc-radius: 4px;
  --brand-mono: "IBM Plex Mono", Consolas, monospace;
  --brand-accent-2: #c9cdd6;
  --brand-display-weight: 600;
  --brand-track: -.045em;
  --brand-button-radius: 4px;
  --brand-enter: mag-plot;
  --brand-ease: cubic-bezier(.65, 0, .35, 1);
  --brand-texture:
    linear-gradient(rgba(155, 124, 255, .06) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(155, 124, 255, .06) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(rgba(236, 234, 227, .035) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(90deg, rgba(236, 234, 227, .035) 1px, transparent 1px) 0 0 / 120px 120px;
  --brand-bezel: #1b1d23;
  --brand-bezel-edge: #3a3f4a;
  --brand-bezel-ink: #9a9ea9;
  --brand-glow: rgba(155, 124, 255, .55);
  --brand-wallpaper: radial-gradient(60% 50% at 50% 110%, rgba(155, 124, 255, .35), transparent 70%), linear-gradient(rgba(155, 124, 255, .08) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(155, 124, 255, .08) 1px, transparent 1px) 0 0 / 32px 32px, #0d0e11;
}

/* Signature: registration marks on the head, a trace wire under the title, a scanning cursor. */
[data-brand="the-magician"] .abr-head { border-block-end: 1px solid var(--arc-line); }
[data-brand="the-magician"] .abr-head::before,
[data-brand="the-magician"] .abr-head::after {
  content: ""; position: absolute; inline-size: 18px; block-size: 18px; inset-block-start: 1.25rem;
  border: 1px solid var(--arc-accent); border-width: 1px 0 0 1px; opacity: .7;
}
[data-brand="the-magician"] .abr-head::before { inset-inline-start: 1.25rem; }
[data-brand="the-magician"] .abr-head::after { inset-inline-end: 1.25rem; transform: scaleX(-1); }
[data-brand="the-magician"] .abr-title__word { position: relative; padding-block-end: .12em; }
[data-brand="the-magician"] .abr-title__word::after {
  content: ""; position: absolute; inset: auto 0 0; block-size: 2px;
  background: linear-gradient(90deg, var(--arc-accent) 0 60%, transparent 60% 64%, var(--arc-accent) 64%);
  transform-origin: left; animation: mag-wire 1.4s .5s var(--brand-ease) both;
}
[data-brand="the-magician"] .abr-tagline::after { content: "_"; margin-inline-start: .08em; color: var(--arc-accent); animation: mag-cursor 1s steps(1) infinite; }
[data-brand="the-magician"] .abr-button { text-transform: uppercase; letter-spacing: .08em; font: 600 .8rem/1 var(--brand-mono); }
[data-brand="the-magician"] .abr-tier { position: relative; }
[data-brand="the-magician"] .abr-tier::before { content: attr(data-kind); position: absolute; inset: .5rem .75rem auto auto; font: .65rem/1 var(--brand-mono); color: var(--arc-line); letter-spacing: .1em; }
[data-brand="the-magician"].abr-tile .abr-tile__word { font-weight: 600; }
[data-brand="the-magician"].abr-tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(155, 124, 255, .16), transparent) no-repeat;
  background-size: 40% 100%; background-position: -60% 0;
}
@media (hover: hover) { [data-brand="the-magician"].abr-tile:hover::after { animation: mag-scan 1.1s var(--brand-ease); } }

@keyframes mag-plot { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes mag-wire { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mag-cursor { 50% { opacity: 0; } }
@keyframes mag-scan { to { background-position: 160% 0; } }