/* ==========================================================================
   BizOS v22 — #capabilities « BizOS handles your … / doesn’t ask for permission. »
   Loaded after capabilities-v9.css, capabilities-v13.css and story-v12.css:
   everything here is scoped to #capabilities and only overrides what it must.
   ========================================================================== */

#capabilities.capabilities {
  /* 400 svh total = 100 svh of pin + 300 svh of runway. The old 500 svh spent
     ~100 svh on nothing; the score below fills all 300. */
  height: 400svh;
}

#capabilities .capability-pin {
  height: 100svh;
  display: grid;
  align-items: center;
}

#capabilities .capability-stage { text-align: center; }

#capabilities .capability-headline {
  /* Slightly tighter cap than v13 so the long finale never reaches the gutter
     on wide screens (1031 px max inside a 1180 px column). */
  font-size: clamp(2.6rem, 4.7vw, 4.45rem);
  line-height: 1.18;
  font-weight: 500;
  letter-spacing: -.055em;
  max-width: 100%;
  color: var(--ink);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}

#capabilities .capability-brand,
#capabilities .capability-prefix,
#capabilities .capability-finale { color: var(--ink); }

/* --- the moving word ---------------------------------------------------- */

#capabilities .capability-window {
  /* 4em instead of 3.65em: “website.” is 3.6em wide in italic and was one
     hairline away from being clipped on the right. */
  width: 4em;
  padding-inline: .06em;
  /* The word no longer meets a hard cut: it dissolves into the line box.
     14 % / 86 % sits clear of the ascenders (≈18 %) and the baseline (≈81 %). */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
}

#capabilities .capability-track {
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

#capabilities .capability-track em {
  color: #1775ca;
  font-style: italic;
  -webkit-font-smoothing: antialiased;
}

/* --- micro-icons -------------------------------------------------------- */

/* story-v12.css hides the whole group; v22 drives each icon individually. */
#capabilities .capability-orbit { opacity: 1; visibility: visible; }

#capabilities .orbit-icon {
  width: 28px;
  height: 28px;
  margin: -14px;
  color: #7fa6cc;
  opacity: 0;
  visibility: hidden;
}
#capabilities .orbit-icon svg { width: 28px; height: 28px; display: block; overflow: visible; }
/* the drawn stroke stays exactly 1.5 px whatever the box size */
#capabilities .orbit-icon svg * { vector-effect: non-scaling-stroke; }

/* --- the red moment ----------------------------------------------------- */

#capabilities .capability-finale { white-space: nowrap; }
#capabilities .cap-line { display: inline; }

#capabilities .permission-red {
  position: relative;
  display: inline-block;
  color: #d92d35;
}
/* A rule that draws left to right just after the word catches fire.
   currentColor, so it heats up with it. No shadow, no shake: the colour is enough. */
#capabilities .permission-red::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.13em;   /* clears the descender of the p */
  height: .05em;
  border-radius: .04em;
  background: currentColor;
  transform: scaleX(var(--cap-rule, 0));
  transform-origin: 0 50%;
  pointer-events: none;
}

/* ==========================================================================
   Mobile 390 — three centred lines, same weight as desktop, no side-scroll.
   ========================================================================== */

@media (max-width: 760px) {
  #capabilities .capability-stage { padding-inline: 22px; }
  #capabilities .capability-headline {
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
    font-size: clamp(2.05rem, 10.1vw, 3.1rem);
    letter-spacing: -.042em;   /* optical: -.055em is too tight at 36 px */
    white-space: normal;
  }
  #capabilities .capability-suffix { width: 100%; justify-items: center; }
  #capabilities .capability-main,
  #capabilities .capability-finale { height: 2.36em; }   /* both states reserve two lines */
  #capabilities .capability-main {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
  }
  #capabilities .capability-prefix { display: block; }
  #capabilities .capability-window { text-align: center; width: 4.4em; }
  #capabilities .capability-finale { text-align: center; white-space: normal; }
  #capabilities .cap-line { display: block; }
  #capabilities .orbit-icon { width: 24px; height: 24px; margin: -12px; }
  #capabilities .orbit-icon svg { width: 24px; height: 24px; }
}

/* ==========================================================================
   No JavaScript, or prefers-reduced-motion: the whole sequence is readable at
   once, stacked, with no pin and no movement.
   ========================================================================== */

:is(#capabilities.cap-static, html:not(.js) #capabilities).capabilities {
  height: auto;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding: clamp(88px, 13vh, 150px) 0;
}
:is(#capabilities.cap-static, html:not(.js) #capabilities) .capability-pin {
  position: static;
  height: auto;
  display: block;
}
:is(#capabilities.cap-static, html:not(.js) #capabilities) .capability-stage {
  transform: none !important;
  will-change: auto;
}
:is(#capabilities.cap-static, html:not(.js) #capabilities) .capability-headline {
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  white-space: normal;
}
:is(#capabilities.cap-static, html:not(.js) #capabilities) .capability-suffix {
  display: block;
  width: 100%;
  text-align: center;
}
:is(#capabilities.cap-static, html:not(.js) #capabilities) .capability-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}
:is(#capabilities.cap-static, html:not(.js) #capabilities) .capability-window {
  width: auto;
  height: auto;
  overflow: visible;
  text-align: center;
  padding-inline: 0;
  -webkit-mask-image: none;
  mask-image: none;
}
:is(#capabilities.cap-static, html:not(.js) #capabilities) .capability-track {
  transform: none !important;
  filter: none !important;
  will-change: auto;
}
:is(#capabilities.cap-static, html:not(.js) #capabilities) .capability-track em { display: block; }
:is(#capabilities.cap-static, html:not(.js) #capabilities) .capability-finale {
  position: static;
  display: block;
  height: auto;
  margin-top: .58em;
  text-align: center;
  white-space: normal;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}
/* the finale needs its subject back once it is no longer sharing the brand node */
:is(#capabilities.cap-static, html:not(.js) #capabilities) .capability-finale::before { content: "BizOS "; }
:is(#capabilities.cap-static, html:not(.js) #capabilities) .capability-orbit { display: none; }
:is(#capabilities.cap-static, html:not(.js) #capabilities) .permission-red { color: #d92d35; }
:is(#capabilities.cap-static, html:not(.js) #capabilities) .permission-red::after { transform: scaleX(1); }

/* capabilities-v9.css hides the four words under reduced motion with !important;
   undo that so the sequence stays readable rather than disappearing. */
@media (prefers-reduced-motion: reduce) {
  #capabilities .capability-main {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }
  #capabilities .capability-track { transform: none !important; filter: none !important; }
  #capabilities .capability-stage { transform: none !important; }
}