.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.text-purple { color: var(--c-mark); }
.text-white { color: var(--c-text); }
.text-mute { color: var(--c-muted); }
.text-soft { color: var(--c-text-3); }

.gradient-text {
  background: var(--pm-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bg-black { background: var(--c-field); }
.bg-ink { background: var(--c-surface); }

.no-wrap { white-space: nowrap; }
.italic { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400; }

.serif { font-family: var(--ff-display); }
.sans { font-family: var(--ff-body); }

.text-center { text-align: center; }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }

.full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* Section entrances. Bay apps (no data-site-theme) keep the old values. On site pages (plan 31, Р5, §1.6): content
   is hidden only once the head script has marked the page .js — without script everything is visible; one rise of
   20 px, 600 ms, once; inside a section the parts come in order, 70 ms apart (--i, set by reveal.js). CSS only —
   no GSAP on the main thread next to the WebGL hero. Reduced motion: visible from the start (block below). */
:root:not([data-site-theme]) [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 800ms var(--ease-out-expo), transform 800ms var(--ease-out-expo);
  will-change: opacity, transform;
}
:root:not([data-site-theme]) [data-reveal].is-visible { opacity: 1; transform: none; }

:root:not([data-site-theme]) [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms var(--ease-out-expo), transform 700ms var(--ease-out-expo);
}
:root:not([data-site-theme]) [data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}

[data-site-theme].js [data-reveal],
[data-site-theme].js [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease-out-expo), transform 600ms var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 70ms);
}
[data-site-theme].js [data-reveal].is-visible,
[data-site-theme].js [data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}
[data-split] .split-line {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

[data-split] .split-line > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1100ms var(--ease-out-expo);
  will-change: transform;
}

[data-split].is-visible .split-line > span { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-stagger] > *, [data-split] .split-line > span {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.three-line-rule {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  padding-block: var(--sp-7);
}
.three-line-rule span {
  display: block;
  height: 1px;
  background: var(--c-line);
  transform-origin: left;
}
.three-line-rule span:nth-child(2) { width: 70%; }
.three-line-rule span:nth-child(3) { width: 40%; background: var(--c-mark-2); }
