/* ==========================================================================
   ACID GRAPHICS — exhibition room. Loaded on a/acid-graphics.html.

   TIER 2. A flyer, not a page: black ground, toxic green and magenta at
   full saturation, display type warped per-letter AND extruded as a real
   layered build (stacked shadow steps — the token rule requires both
   treatments together), noise across the room, tracking pulled toward
   collision. The museum's apparatus stays clean.
   ========================================================================== */

@font-face {
  font-family: "ArchivoBlackX";
  src: url("fonts/archivo-black.woff2") format("woff2");
  font-display: swap;
}

.ac-page {
  --ac-green: #39FF14;
  --ac-magenta: #FF1AC6;
  --ac-black: #050505;
  --ac-chrome: #C8D2DC;
  --ac-face: "ArchivoBlackX", "Arial Black", sans-serif;
  background: var(--paper);
}
.ac-page main { background: var(--ac-black); color: #E8E8E8; position: relative; }
.ac-wrap { padding: clamp(1.5rem, 4vw, 3.5rem) 1rem; position: relative; }
.ac { position: relative; max-width: 72rem; margin-inline: auto; container-type: inline-size; font-family: "Helvetica Neue", Arial, sans-serif; font-size: 0.92rem; line-height: 1.65; }

/* the applied grain — over the room, never the apparatus */
.ac-noise { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.13; pointer-events: none; z-index: 2; }

/* THE FRONT OF THE FLYER. One bounded field, full width, the type filling
   most of it (this page's art direction; the record's composition is
   interrupted and multiple, and the single-field rule was withdrawn). Both words warped per letter AND
   extruded as a stacked build (the token rule wants both together), then
   passed through the same breathing liquid warp the foot uses, so the front
   and the back of the flyer rhyme. ACID leads: deepest extrusion, hottest
   colour (the hierarchy rule). */
.ac-flyer {
  position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 1.5rem;
  min-height: clamp(24rem, 78cqw, 60rem); padding: clamp(1rem, 2.5cqw, 2rem) clamp(1rem, 3cqw, 2.5rem);
  border: 3px solid var(--ac-green); overflow: hidden;
}
.ac-kicker { margin: 0; color: var(--ac-magenta); font: 800 clamp(0.75rem, 1.1vw, 0.875rem)/1.2 var(--ac-body); letter-spacing: 0.06em; text-transform: uppercase; }
.ac-h1 { margin: 0; align-self: center; display: flex; flex-direction: column; align-items: center; line-height: 0.78; filter: url(#ac-hero-warp); }
.ac-warp { display: block; white-space: nowrap; letter-spacing: -0.09em; }
.ac-warp b {
  display: inline-block;
  font: 400 clamp(4rem, 31cqw, 22rem)/0.8 var(--ac-face);
  color: var(--ac-green);
  transform: skewY(calc((var(--ac-i) - 1.5) * 3.2deg)) scaleY(calc(1.06 + var(--ac-i) * 0.05)) translateY(calc((var(--ac-i) - 1.5) * -0.03em));
  text-shadow:
    1px 1px 0 #2bd40c, 2px 2px 0 #2bd40c, 3px 3px 0 #20a808, 4px 4px 0 #20a808,
    5px 5px 0 #178006, 6px 6px 0 #178006, 7px 7px 0 #0f5a04, 8px 8px 0 #0f5a04,
    9px 9px 0 var(--ac-magenta), 10px 10px 0 var(--ac-magenta), 11px 11px 0 var(--ac-magenta), 12px 12px 0 #b0128a,
    13px 13px 0 #7a0c60, 14px 14px 0 #45063a, 18px 20px 34px rgba(255, 26, 198, 0.55);
}
.ac-warp--2 { margin-top: -0.02em; margin-left: 0.2em; }
.ac-warp--2 b {
  font-size: clamp(1.875rem, 14.6cqw, 10.5rem);
  color: var(--ac-chrome);
  transform: skewY(calc((3.5 - var(--ac-i)) * 1.6deg)) scaleY(calc(1.18 - var(--ac-i) * 0.02));
  text-shadow:
    1px 1px 0 #6B7680, 2px 2px 0 #59636C, 3px 3px 0 #495159, 4px 4px 0 #3A4147,
    5px 5px 0 var(--ac-green), 6px 6px 0 var(--ac-green), 7px 7px 0 #20a808, 8px 8px 0 #178006,
    9px 9px 0 #0f5a04, 12px 14px 26px rgba(57, 255, 20, 0.4);
}
@media (prefers-reduced-motion: no-preference) {
  .ac-warp b { animation: ac-throb 5s ease-in-out infinite alternate; animation-delay: calc(var(--ac-i) * 0.12s); }
  @keyframes ac-throb { from { filter: saturate(1); } to { filter: saturate(1.6) hue-rotate(14deg); } }
}
.ac-defining { margin: 0; max-width: 24ch; align-self: end; font: 800 clamp(1.125rem, 2.6cqw, 1.75rem)/1.08 var(--ac-body); letter-spacing: -0.03em; color: var(--ac-paper); }
.ac-strap {
  position: absolute; right: clamp(0.5rem, 3vw, 2.5rem); bottom: clamp(1rem, 4vw, 3rem); margin: 0;
  padding: 14px 16px; background: var(--ac-magenta); color: #000; transform: rotate(5deg);
  font: 400 clamp(0.9375rem, 2cqw, 1.375rem)/1 var(--ac-face); letter-spacing: -0.03em; text-transform: uppercase;
  box-shadow: 8px 8px 0 var(--ac-green);
}
.ac-strike { text-decoration: line-through; }
@media (max-width: 40rem) {
  .ac-strap { position: static; align-self: start; justify-self: end; transform: rotate(3deg); }
  .ac-flyer { grid-template-rows: auto 1fr auto auto; }
}
@media (prefers-reduced-motion: reduce) { .ac-h1 { filter: none; } }

/* tracking demo */
.ac-tr { margin: 0; font: 400 clamp(1.8rem, 6vw, 3rem)/1 var(--ac-face); color: var(--ac-green); }
.ac-tr--0 { letter-spacing: 0.06em; color: #9A9A9A; }
.ac-tr--1 { letter-spacing: -0.04em; }
.ac-tr--2 { letter-spacing: -0.13em; color: var(--ac-magenta); position: relative; }
.ac-tr--2::after { content: attr(data-mark); position: absolute; left: 0; bottom: -1.2rem; font: 700 0.76rem/1 "Helvetica Neue", sans-serif; letter-spacing: 0.2em; color: #9A9A9A; }
.ac-tr--2 { margin-block-end: 1.2rem; }

/* surface-vs-place demo */
.ac-demo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: 1.2rem; margin-block-start: 0.9rem; }
.ac-demo__item { margin: 0; }
.ac-demo__mini { min-height: 8rem; border: 2px solid var(--ac-green); display: grid; place-content: center; gap: 0.5rem; text-align: center; padding: 1rem; background: var(--ac-black); }
.ac-demo__mini b { font: 400 2rem/1 var(--ac-face); color: var(--ac-chrome); text-shadow: 2px 2px 0 #59636C, 4px 4px 0 var(--ac-magenta); letter-spacing: -0.06em; transform: skewY(-2deg); }
/* A rendered dystopian sky over a desert, with an op-art ring pattern (kcc:imagery-1, kcc:motif-1): drawn, in the room's colours. */
.ac-demo__mini--desert { position: relative; overflow: hidden; background: linear-gradient(180deg, #050505 0%, #1B3A0E 38%, #2BD40C 62%, #FF1AC6 63%, #3A0B2E 100%); }
.ac-demo__op { position: absolute; left: 50%; top: 14%; width: 9rem; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: repeating-radial-gradient(circle, var(--ac-black) 0 5px, var(--ac-green) 5px 9px); opacity: 0.9; }
.ac-demo__dune { position: absolute; left: -10%; right: -10%; bottom: 0; height: 38%; background: #050505; border-radius: 60% 40% 0 0 / 70% 60% 0 0; box-shadow: 0 -2px 0 var(--ac-magenta); }
.ac-demo__mini--desert b { position: relative; }
.ac-demo__mini--city { background: linear-gradient(180deg, #0A1428 0%, #131E36 100%); border-color: #3A517A; border-style: dashed; }
.ac-demo__mini--city span { font-size: 0.76rem; color: #7A8CB0; letter-spacing: 0.08em; max-width: 26ch; margin-inline: auto; }
.ac-demo figcaption { margin-block-start: 0.45rem; font-size: 0.76rem; letter-spacing: 0.06em; color: #9A9A9A; }
.ac-demo figcaption b { color: #E8E8E8; }

/* ==========================================================================
   THE BACK OF THE FLYER — the record, in the room's register (Acid only,
   founder 2026-09-26). Concept: front and back of one flyer. The ticker is
   the fold; extruded heads, tilted stickers and the hard-offset refusal are
   one gesture (things stuck onto a surface); the outlined ACID at the foot,
   warped by breathing turbulence, closes. Type scale: 13 / 15 / 17 / 22 /
   30 / 44 / 120 (display steps in clamp). Spacing: 6 / 10 / 18 / 24 / 48 /
   96 / 160.
   ========================================================================== */
@font-face {
  font-family: "ArchivoX";
  src: url("fonts/archivo.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-display: swap;
}
.ac-page {
  --ac-paper: #E8E8E8;
  --ac-steel: #6B7680;
  --ac-steel-3: #495159;
  --ac-body: "ArchivoX", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.ac-rec { position: relative; overflow: hidden; background: var(--ac-black); color: var(--ac-paper); font: 400 1.0625rem/1.55 var(--ac-body); letter-spacing: -0.01em; margin-block-start: clamp(2rem, 5vw, 4rem); }
.ac-rec a { color: var(--ac-green); }
.ac-rec a:hover { color: var(--ac-magenta); }
.ac-rec :focus-visible { outline: 3px solid var(--ac-magenta); outline-offset: 3px; }
.ac-rec .ac-noise { z-index: 1; }
.ac-rec__in { position: relative; z-index: 2; max-width: 72rem; margin-inline: auto; padding: 0 clamp(1rem, 4vw, 3.5rem); }
.ac-rec__in > * { position: relative; }

/* the fold */
.ac-tick { position: relative; z-index: 2; border-block: 3px solid var(--ac-magenta); background: var(--ac-green); color: #000; overflow: hidden; white-space: nowrap; }
.ac-tick div { display: inline-block; padding: 10px 0; font: 400 clamp(1.375rem, 4vw, 2.75rem)/1 var(--ac-face); letter-spacing: -0.05em; animation: ac-tick 22s linear infinite; }
@keyframes ac-tick { to { transform: translateX(-50%); } }

/* the meta strip */
.ac-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: 0; margin: clamp(3rem, 7vw, 6rem) 0; border: 2px solid var(--ac-chrome); }
.ac-meta div { padding: 18px; border: 1px solid var(--ac-steel-3); }
.ac-meta dt { font: 800 0.8125rem/1.2 var(--ac-body); text-transform: uppercase; letter-spacing: 0.03em; color: var(--ac-steel); }
.ac-meta dd { margin: 6px 0 0; font: 800 clamp(1.125rem, 2vw, 1.375rem)/1.2 var(--ac-body); letter-spacing: -0.03em; }
.ac-meta .hot dd { color: var(--ac-green); }

/* section heads: extruded, alternating the two chemicals */
.ac-sec { margin: clamp(4.5rem, 11vw, 10rem) 0; }
.ac-rh { margin: 0 0 0.35em; font: 400 clamp(2.875rem, 9vw, 7.5rem)/0.85 var(--ac-face); text-transform: uppercase; letter-spacing: -0.07em; color: var(--ac-paper); }
.ac-rh--m { text-shadow: 2px 2px 0 var(--ac-magenta), 4px 4px 0 var(--ac-magenta), 6px 6px 0 #b0128a, 8px 8px 0 #7a0c60, 10px 10px 0 #45063a; }
.ac-rh--g { text-shadow: 2px 2px 0 var(--ac-green), 4px 4px 0 var(--ac-green), 6px 6px 0 #20a808, 8px 8px 0 #178006, 10px 10px 0 #0f5a04; }
.ac-h3 { margin: 48px 0 8px; font: 800 clamp(1.25rem, 2.2vw, 1.625rem)/1.1 var(--ac-body); letter-spacing: -0.03em; text-transform: uppercase; color: var(--ac-green); }
.ac-lead { max-width: 68ch; margin: 0 0 24px; color: var(--ac-chrome); }
.ac-rec p { margin: 0 0 0.8em; }
.ac-rec p:last-child { margin-block-end: 0; }
.ac-hot { color: var(--ac-green); font-weight: 800; }

/* what carries the look */
.ac-carries { border-top: 3px solid var(--ac-green); }
.ac-row { display: grid; grid-template-columns: minmax(0, 13.75rem) minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--ac-steel-3); align-items: start; }
.ac-row__a { font: 800 1.375rem/1.1 var(--ac-body); letter-spacing: -0.03em; color: var(--ac-paper); text-decoration: none; }
.ac-row__a:hover { color: var(--ac-green); }
.ac-row__a small { display: block; color: var(--ac-magenta); font-weight: 600; font-size: 0.875rem; letter-spacing: 0; }
.ac-none { color: var(--ac-steel); }
.ac-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.ac-tags a { padding: 6px 10px; border: 1px solid var(--ac-chrome); color: var(--ac-chrome); text-decoration: none; font-weight: 600; font-size: 0.9375rem; }
.ac-tags a:hover { border-color: var(--ac-green); color: var(--ac-green); }
.ac-spec { font: 400 clamp(2.25rem, 6vw, 4rem)/0.9 var(--ac-face); letter-spacing: -0.08em; color: var(--ac-paper); }
.ac-built { margin: 8px 0 0 !important; color: var(--ac-chrome); }
.ac-built--on { color: var(--ac-paper); }
.ac-sws { display: grid; grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); gap: 6px; }
.ac-swatch { aspect-ratio: 1; display: flex; align-items: flex-end; padding: 8px; outline: 1px solid var(--ac-steel-3); outline-offset: -1px; }
.ac-swatch b { font: 800 0.75rem/1 var(--ac-body); letter-spacing: 0.02em; }

/* what it argues: the claim, and the refusal stuck on at an angle */
.ac-argue { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.ac-big { grid-column: 1 / -1; max-width: 22ch; margin: 0; font: 800 clamp(1.625rem, 4vw, 3.25rem)/1.02 var(--ac-body); letter-spacing: -0.045em; }
.ac-big::first-letter { color: var(--ac-green); }
.ac-refuse { grid-column: 6 / -1; margin-top: 24px; padding: 22px; background: var(--ac-magenta); color: #000; transform: rotate(-2deg); font: 800 clamp(1.1875rem, 2.2vw, 1.5rem)/1.2 var(--ac-body); letter-spacing: -0.02em; box-shadow: 10px 10px 0 var(--ac-green); }
.ac-argue__flag { grid-column: 1 / span 7; margin: 24px 0 0 !important; font: 600 0.8125rem/1.5 var(--ac-body); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ac-steel); }
.ac-refuse b { display: block; font: 400 clamp(2.125rem, 5vw, 3.5rem)/0.9 var(--ac-face); letter-spacing: -0.07em; text-transform: uppercase; }

/* recognise: prose beside the boxed condition */
.ac-recog { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.ac-recog__text { grid-column: 1 / span 7; max-width: 68ch; }
.ac-diag { grid-column: 8 / -1; align-self: start; border: 3px solid var(--ac-green); padding: 22px; background: #000; }
.ac-diag p { margin: 0; font: 800 clamp(1.375rem, 2.6vw, 1.875rem)/1.05 var(--ac-body); letter-spacing: -0.04em; }

/* rules as stickers */
.ac-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); gap: 22px; }
.ac-rule { position: relative; background: #0c0c0c; border: 2px solid var(--ac-chrome); padding: 22px 20px 20px; }
.ac-rule:nth-child(odd) { transform: rotate(-1.2deg); }
.ac-rule:nth-child(even) { transform: rotate(1deg); }
.ac-rule h3 { margin: 0 0 12px; font: 400 clamp(1.75rem, 3vw, 2.375rem)/0.9 var(--ac-face); letter-spacing: -0.07em; text-transform: uppercase; color: var(--ac-paper); }
.ac-kind { display: inline-block; margin-bottom: 10px; padding: 6px 8px; font: 800 0.75rem/1 var(--ac-body); text-transform: uppercase; letter-spacing: 0.03em; color: #000; }
.ac-kind--ours { background: var(--ac-magenta); }
.ac-kind--period { background: var(--ac-green); }
.ac-rule p { margin: 0; }
.ac-flag { margin: 12px 0 0 !important; font-size: 0.875rem; color: var(--ac-steel); font-weight: 600; }

/* what stands behind it */
.ac-behind { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.ac-behind__text { grid-column: 1 / span 6; max-width: 68ch; }
.ac-warn { font: 800 clamp(1.5rem, 3vw, 2.125rem)/1.05 var(--ac-body); letter-spacing: -0.04em; color: var(--ac-magenta); }
.ac-tbl { grid-column: 7 / -1; overflow-x: auto; }
.ac-tbl table { width: 100%; min-width: 28rem; border-collapse: collapse; font-size: 0.9375rem; }
.ac-tbl th, .ac-tbl td { text-align: left; padding: 10px; border-bottom: 1px solid var(--ac-steel-3); }
.ac-tbl thead th { font: 800 0.75rem/1.2 var(--ac-body); text-transform: uppercase; letter-spacing: 0.03em; color: var(--ac-steel); border-bottom: 2px solid var(--ac-green); }
.ac-tbl tbody th { font-weight: 600; }
.ac-tbl td.yes { color: var(--ac-green); font-weight: 800; }
.ac-tbl td.no { color: var(--ac-steel); font-weight: 800; }
.ac-tbl td.unres { color: var(--ac-magenta); }

/* neighbours as pills; use it as the two chemicals */
.ac-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); gap: 22px; }
.ac-rec a.ac-pill, .ac-pill { display: block; padding: 24px; border: 3px solid var(--ac-paper); color: var(--ac-paper); text-decoration: none; }
a.ac-pill:hover { border-color: var(--ac-green); color: var(--ac-paper); background: #0b1a07; }
.ac-pill strong { display: block; margin-bottom: 10px; font: 400 clamp(2.125rem, 4.5vw, 3.375rem)/0.9 var(--ac-face); letter-spacing: -0.07em; text-transform: uppercase; }
.ac-pill small { display: block; margin-bottom: 6px; color: var(--ac-magenta); font-weight: 800; }
.ac-cta { display: grid; grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); gap: 0; }
.ac-cta a { display: flex; flex-direction: column; gap: 10px; min-height: 13.75rem; padding: 28px; color: #000; text-decoration: none; }
.ac-cta a:nth-child(3n+1) { background: var(--ac-green); }
.ac-cta a:nth-child(3n+2) { background: var(--ac-magenta); }
.ac-cta a:nth-child(3n) { background: var(--ac-chrome); }
.ac-cta a strong { font: 400 clamp(2.125rem, 4.5vw, 3.5rem)/0.88 var(--ac-face); letter-spacing: -0.07em; text-transform: uppercase; }
.ac-cta a span { max-width: 32ch; font-weight: 600; }
.ac-cta a:hover { filter: invert(1); color: #000; }
.ac-machines { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.ac-machines a { padding: 10px 14px; border: 1px solid var(--ac-chrome); color: var(--ac-chrome); text-decoration: none; font: 0.875rem/1 var(--mono); }
.ac-machines a:hover { border-color: var(--ac-green); color: var(--ac-green); }

/* the closer */
.ac-footer { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 16px 28px; justify-content: space-between; align-items: end; padding: 40px clamp(1rem, 4vw, 3.5rem) 60px; border-top: 2px solid var(--ac-magenta); max-width: 72rem; margin-inline: auto; }
.ac-foot-big { display: flex; flex-direction: column; font: 400 clamp(3.5rem, 13vw, 11rem)/0.8 var(--ac-face); letter-spacing: -0.09em; color: transparent; -webkit-text-stroke: 2px var(--ac-green); filter: url(#ac-warp); }
.ac-foot-big span:nth-child(2) { font-size: 0.5em; margin-left: 0.12em; }
.ac-foot-links { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }

@media (max-width: 56rem) {
  .ac-argue, .ac-recog, .ac-behind { grid-template-columns: 1fr; }
  .ac-recog__text, .ac-diag, .ac-behind__text, .ac-tbl, .ac-refuse, .ac-argue__flag { grid-column: 1 / -1; }
  .ac-refuse { transform: rotate(-1deg); }
  .ac-row { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 30rem) {
  .ac-duo, .ac-rules, .ac-cta { grid-template-columns: 1fr; }
  .ac-pill { min-width: 0; overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-tick div { animation: none; }
  .ac-foot-big { filter: none; }
}

/* the two demonstrations, moved into the record (2026-09-26) */
.ac-track { display: grid; gap: 12px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--ac-steel-3); }
.ac-rec .ac-track .ac-tr { margin: 0; font-size: clamp(3rem, 9vw, 7rem); line-height: 0.95; }
.ac-rec .ac-track .ac-tr--2 { padding-bottom: 1.6rem; }
.ac-track .ac-tr--2::after { bottom: 0; font: 800 0.8125rem/1 var(--ac-body); letter-spacing: 0.04em; color: var(--ac-steel); }
.ac-pair { margin-bottom: 48px; }
.ac-pair .ac-demo { margin-top: 12px; gap: 22px; }
.ac-pair .ac-demo__mini { min-height: 11rem; }
.ac-pair .ac-demo__mini b { font-size: 2.75rem; }
.ac-pair .ac-demo figcaption { margin-top: 10px; font: 400 0.9375rem/1.5 var(--ac-body); letter-spacing: -0.01em; color: var(--ac-chrome); }
.ac-pair .ac-demo figcaption b { font-weight: 800; color: var(--ac-paper); }

/* GLITCH, glitching. The neighbour's own signature on its own name: an
   RGB split in the page's two chemicals, slices that jump in short bursts
   and sit still between them. Under reduced motion the split stays, fixed. */
.ac-glitch { position: relative; display: inline-block; }
.ac-glitch::before, .ac-glitch::after { content: attr(data-t); position: absolute; inset: 0; pointer-events: none; }
.ac-glitch::before { color: var(--ac-magenta); transform: translate(-3px, 0); clip-path: inset(0 0 62% 0); }
.ac-glitch::after { color: var(--ac-green); transform: translate(3px, 0); clip-path: inset(58% 0 0 0); }
@media (prefers-reduced-motion: no-preference) {
  .ac-glitch { animation: ac-gl-base 3.4s steps(1, end) infinite; }
  .ac-glitch::before { animation: ac-gl-a 3.4s steps(1, end) infinite; }
  .ac-glitch::after { animation: ac-gl-b 3.4s steps(1, end) infinite; }
  @keyframes ac-gl-base {
    0%, 100% { transform: none; }
    12% { transform: skewX(-8deg) translateX(2px); }
    14% { transform: none; }
    61% { transform: skewX(6deg) translateX(-3px); }
    63% { transform: none; }
  }
  @keyframes ac-gl-a {
    0%, 100% { transform: translate(0, 0); clip-path: inset(0 0 100% 0); }
    10% { transform: translate(-6px, -2px); clip-path: inset(8% 0 70% 0); }
    12% { transform: translate(4px, 1px); clip-path: inset(40% 0 35% 0); }
    14% { transform: translate(-3px, 0); clip-path: inset(0 0 100% 0); }
    60% { transform: translate(5px, 2px); clip-path: inset(20% 0 55% 0); }
    62% { transform: translate(-7px, -1px); clip-path: inset(65% 0 10% 0); }
    64% { transform: translate(0, 0); clip-path: inset(0 0 100% 0); }
  }
  @keyframes ac-gl-b {
    0%, 100% { transform: translate(0, 0); clip-path: inset(100% 0 0 0); }
    10% { transform: translate(5px, 2px); clip-path: inset(55% 0 20% 0); }
    12% { transform: translate(-4px, -1px); clip-path: inset(75% 0 0 0); }
    14% { transform: translate(3px, 0); clip-path: inset(100% 0 0 0); }
    60% { transform: translate(-6px, -2px); clip-path: inset(30% 0 45% 0); }
    62% { transform: translate(6px, 1px); clip-path: inset(5% 0 80% 0); }
    64% { transform: translate(0, 0); clip-path: inset(100% 0 0 0); }
  }
}

/* CYBERPUNK, as itself: the neighbour's own record says neon on a wet urban
   night. Its room's tokens (night, cyan, Space Grotesk), a lit sign with its
   reflection in the wet ground, and a neon flicker. The pill's frame stays
   the page's; only the world inside it changes. */
@font-face { font-family: "SpaceGroteskX"; src: url("fonts/space-grotesk.woff2") format("woff2-variations"); font-weight: 300 700; font-display: swap; }
.ac-rec a.ac-pill--cyber { --cy-night: #05070A; --cy-cyan: #46F3FF; --cy-text: #DCE3EC; --cy-dim: #9AA7B8;
  background: linear-gradient(180deg, var(--cy-night) 0%, #0C1016 55%, #10161E 100%); color: var(--cy-text); }
.ac-rec a.ac-pill--cyber:hover { background: linear-gradient(180deg, #070A10 0%, #101720 55%, #141c26 100%); border-color: var(--cy-cyan); }
.ac-pill--cyber small { color: var(--cy-dim); font: 400 0.8125rem/1.4 "Space Mono X", "Space Mono", ui-monospace, Menlo, monospace; letter-spacing: 0.06em; text-transform: uppercase; }
.ac-pill strong.ac-cyber { position: relative; display: inline-block; margin-bottom: 0.55em; font-family: "SpaceGroteskX", "Space Grotesk", "Helvetica Neue", Arial, sans-serif; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--cy-cyan);
  text-shadow: 0 0 4px rgba(70, 243, 255, 0.9), 0 0 12px rgba(70, 243, 255, 0.7), 0 0 28px rgba(70, 243, 255, 0.45), 0 0 56px rgba(70, 243, 255, 0.25); }
.ac-cyber::after { content: attr(data-t); position: absolute; left: 0; right: 0; top: 100%; transform: scaleY(-0.5) translateY(0.9em); transform-origin: center; opacity: 0.3; filter: blur(2px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 85%); mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 85%); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .ac-cyber { animation: ac-neon 7s steps(1, end) infinite; }
  @keyframes ac-neon {
    0%, 100% { opacity: 1; }
    41% { opacity: 0.55; } 41.6% { opacity: 1; }
    43% { opacity: 0.3; } 43.4% { opacity: 1; }
    78% { opacity: 0.7; } 78.5% { opacity: 1; }
  }
}