/* Capocci AI lockup + inline name. Rules: BRAND_SYSTEM.md ("The logo", "The name in text").
   One component, reused by every page and product; the descriptor (tagline or product name) changes per product.

   The lockup has three image layers, all drawn by export/build_kit.py from the masters, so nothing is retyped: the mark,
   the static wordmark (CAPOCCI | AI) and the descriptor, stacked in the same box. A rotation swaps only the descriptor.
     <a class="lockup" href="/" data-descriptor="websites-that-work" aria-label="Capocci AI">
       <span class="lockup__mark"><img src="assets/mark-light.png" alt=""></span>
       <span class="lockup__type"><img class="lockup__word" src="assets/type-wordmark-light.svg" alt=""><img class="lockup__desc" src="assets/type-descriptor-websites-that-work-light.svg" alt=""><span class="lockup__pulse"></span></span>
     </a>
   On dark grounds add .lockup--dark and use mark-dark.png + type-wordmark-dark.svg + type-descriptor-<descriptor>-dark.svg.
   On light grounds where the lockup is small, printed or in a document, use type-descriptor-<descriptor>-light-deep.svg
   (deeper descriptor grey; the wordmark layer is the same).
   Size it only through --lockup-h: the mark's height, from the top of CAPOCCI to the bottom of the pulse. */
.lockup {
  --lockup-h: 40px;
  --lockup-accent: #087e96;
  display: inline-flex;
  align-items: flex-start;
  gap: calc(var(--lockup-h) * var(--lockup-gap));
  line-height: 0;
  text-decoration: none;
  vertical-align: middle;
}
.lockup--dark { --lockup-accent: #3cc3d4; }
.lockup__mark,
.lockup__type {
  position: relative;
  flex: none;
  height: var(--lockup-h);
}
.lockup__mark { width: calc(var(--lockup-h) * var(--lockup-mark-w)); }
.lockup__type { width: calc(var(--lockup-h) * var(--lockup-type-w)); }
.lockup__mark img,
.lockup__type img {
  position: absolute;
  max-width: none;
  pointer-events: none;
}
.lockup__mark img {
  left: calc(var(--lockup-h) * var(--lockup-mark-x));
  top: calc(var(--lockup-h) * var(--lockup-mark-y));
  width: calc(var(--lockup-h) * var(--lockup-mark-img));
  height: auto;
}
.lockup__type img {
  left: calc(var(--lockup-h) * var(--lockup-type-x));
  top: calc(var(--lockup-h) * var(--lockup-type-y));
  height: calc(var(--lockup-h) * var(--lockup-type-h));
  width: auto;
}
/* Rotation (lockup.js) fades and swaps only the descriptor layer; the wordmark and the pulse never move. */
.lockup__desc { transition: opacity 0.35s ease, transform 0.35s ease; }
.lockup__desc.is-swapping {
  opacity: 0;
  transform: translateY(4px);
}
/* One centre-out pulse under the descriptor: expands from the middle, fades, repeats; runs only while the lockup is
   visible (.is-live, set by lockup.js). No other animation. Reduced motion hides it. */
.lockup__pulse {
  position: absolute;
  left: var(--lockup-pulse-l);
  width: var(--lockup-pulse-w);
  top: calc(var(--lockup-h) * var(--lockup-pulse-y));
  height: max(1px, calc(var(--lockup-h) * var(--lockup-pulse-h)));
  transform: scaleX(0);
  transform-origin: center;
  background: linear-gradient(90deg, transparent, var(--lockup-accent) 20%, #bff6ff 50%, var(--lockup-accent) 80%, transparent);
  animation: lockup-pulse 3.2s ease-out infinite;
  animation-play-state: paused;
}
.lockup.is-live .lockup__pulse { animation-play-state: running; }
@keyframes lockup-pulse {
  0%, 12% { transform: scaleX(0); opacity: 0; }
  20% { transform: scaleX(0.12); opacity: 1; }
  58% { transform: scaleX(1); opacity: 0.9; }
  76%, 100% { transform: scaleX(1); opacity: 0; }
}
.lockup:focus-visible { outline: 2px solid var(--lockup-accent); outline-offset: 6px; border-radius: 8px; }
@media (max-width: 480px) { .lockup { --lockup-h: 34px; } }
@media (prefers-reduced-motion: reduce) {
  .lockup__pulse { animation: none; opacity: 0; }
  .lockup__desc { transition: none; }
}

/* The name in running text: CAPOCCI (Bodoni Moda) + a muted pipe drawn by CSS + AI (Orbitron, teal) at the same cap
   height. Screen readers, search and copy get "Capocci AI". Needs Bodoni Moda + Orbitron (fonts.css or Google Fonts).
     <span class="brand-name" role="img" aria-label="Capocci AI"><span class="brand-name__word">Capocci</span><span class="brand-name__gap"> </span><span class="brand-name__ai">AI</span></span>
   On dark grounds add .brand-name--dark. Never use it in plain-text email, file names, code or alt text. */
.brand-name {
  --brand-name-ink: #10161a;
  --brand-name-pipe: #10161a55;
  --brand-name-accent: #087e96;
  font-family: "Bodoni Moda", "Didot", "Bodoni 72", serif;
  font-weight: 450;
  font-optical-sizing: auto;
  font-style: normal;
  letter-spacing: var(--brand-name-track);
  white-space: nowrap;
  color: var(--brand-name-ink);
}
.brand-name--dark {
  --brand-name-ink: #f3efe7;
  --brand-name-pipe: #f3efe777;
  --brand-name-accent: #3cc3d4;
}
.brand-name__word {
  text-transform: uppercase;
  margin-right: calc(-1 * var(--brand-name-track));
}
.brand-name__gap { font-size: 0; letter-spacing: 0; }
.brand-name__ai {
  font-family: "Orbitron", "Inter", sans-serif;
  font-weight: 600;
  font-size: var(--brand-name-ai-size);
  letter-spacing: var(--brand-name-ai-track);
  margin-right: calc(-1 * var(--brand-name-ai-track));
  color: var(--brand-name-accent);
}
.brand-name__ai::before {
  content: "";
  display: inline-block;
  width: var(--brand-name-pipe-w);
  height: var(--brand-name-pipe-h);
  margin: 0 var(--brand-name-pipe-after) 0 var(--brand-name-pipe-before);
  vertical-align: var(--brand-name-pipe-drop);
  background: var(--brand-name-pipe);
}

/* BEGIN GENERATED (export/build_kit.py) */
:root {
  /* web lockup: shares of --lockup-h (= the mark's ink height, CAPOCCI top -> pulse bottom) */
  --lockup-gap: 0.27700;
  --lockup-mark-w: 1.00272;
  --lockup-mark-img: 1.33695;
  --lockup-mark-x: -0.16712;
  --lockup-mark-y: -0.16712;
  --lockup-type-w: 4.59504;
  --lockup-type-h: 1.02539;
  --lockup-type-x: -0.01269;
  --lockup-type-y: -0.01269;
  --lockup-pulse-y: 0.97461;
  --lockup-pulse-h: 0.02539;
  /* inline name: em of the surrounding CAPOCCI text; the ::before pipe is in em of the AI */
  --brand-name-track: 0.085em;
  --brand-name-ai-size: 1.04167em;
  --brand-name-ai-track: 0.06em;
  --brand-name-pipe-w: 0.02448em;
  --brand-name-pipe-h: 0.86400em;
  --brand-name-pipe-drop: -0.07200em;
  --brand-name-pipe-before: 0.27648em;
  --brand-name-pipe-after: 0.23000em;
}
.lockup[data-descriptor="websites-that-work"] { --lockup-pulse-l: 0.000%; --lockup-pulse-w: 100.000%; }
.lockup[data-descriptor="ai-voice-agents"] { --lockup-pulse-l: 10.757%; --lockup-pulse-w: 78.487%; }
.lockup[data-descriptor="ai-agent-teams"] { --lockup-pulse-l: 12.422%; --lockup-pulse-w: 75.157%; }
.lockup[data-descriptor="ai-automation"] { --lockup-pulse-l: 14.782%; --lockup-pulse-w: 70.436%; }
.lockup[data-descriptor="mission-control"] { --lockup-pulse-l: 8.940%; --lockup-pulse-w: 82.119%; }
.lockup[data-descriptor="logos-and-brand-kits"] { --lockup-pulse-l: 2.077%; --lockup-pulse-w: 95.845%; }
.lockup[data-descriptor="smartsnap"] { --lockup-pulse-l: 24.159%; --lockup-pulse-w: 51.682%; }
.lockup[data-descriptor="workspace"] { --lockup-pulse-l: 24.209%; --lockup-pulse-w: 51.583%; }
.lockup[data-descriptor="orbit"] { --lockup-pulse-l: 37.638%; --lockup-pulse-w: 24.724%; }
/* END GENERATED */