/* Brand, Build, Grow: the pinned scroll section from Mohak's component, made theme aware.
   Light theme keeps his gradients. Dark theme uses the token gradients that end in a deep colour, never near black. */
#ba-pillars-section {
  --stick: 104px;
  --b0: #ccb8d7; --b1: #a477c3; --b2: #8457bb; --b3: #1b0c53;
  --u0: #9bcce1; --u1: #4271dc; --u2: #0d309c; --u3: #030a61;
  --g0: #a8d5b9; --g1: #6fbf8f; --g2: #3e935c; --g3: #0f3d2a;
  --grad-brand: linear-gradient(45deg, var(--b0), var(--b1), var(--b2), var(--b3));
  --grad-build: linear-gradient(45deg, var(--u0), var(--u1), var(--u2), var(--u3));
  --grad-grow: linear-gradient(45deg, var(--g0), var(--g1), var(--g2), var(--g3));
  background: var(--bg);
  color: var(--ink);
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: clip;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
[data-theme="dark"] #ba-pillars-section {
  --b3: #3b2378; --u3: #0b2472; --g3: #1f5a3a;
}
#ba-pillars-section * { box-sizing: border-box; }
#ba-pillars-section .ba-sr { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
#ba-pillars-section .ba-wrap { width: 100%; margin: 0 auto; }
#ba-pillars-section .ba-intro { text-align: start; margin-bottom: 28px; }
#ba-pillars-section .ba-intro h2 { margin: 0 0 20px; font-size: 60px; line-height: 0.95; letter-spacing: -0.06em; font-weight: 500; color: var(--ink); max-width: none; }
#ba-pillars-section .ba-intro p { margin: 20px 0 0; font-size: 17px; line-height: 1.05; color: var(--ink-soft); font-weight: 500; }
#ba-pillars-section .ba-stage { position: relative; height: 300svh; }
#ba-pillars-section .ba-sticky { position: sticky; top: var(--stick); height: calc(100svh - var(--stick)); display: flex; align-items: stretch; }
#ba-pillars-section .ba-left, #ba-pillars-section .ba-right { width: 50%; min-width: 0; }
#ba-pillars-section .ba-left { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#ba-pillars-section .ba-left-inner { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#ba-pillars-section .ba-visual { position: absolute; left: 50%; top: 50%; width: 100%; height: min(800px, 92vw, 100%); transform: translate(-50%, -50%); pointer-events: none; color: var(--ink); }
#ba-pillars-section .ba-right { display: flex; flex-direction: column; justify-content: center; padding-left: clamp(40px, 4vw, 72px); padding-right: clamp(8px, 1vw, 16px); }
#ba-pillars-section .ba-copy-shell { position: relative; width: 100%; max-width: 46rem; display: grid; align-items: center; }
#ba-pillars-section .ba-copy-panel { grid-area: 1 / 1; width: 100%; max-width: 44rem; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0s linear 0.5s; pointer-events: none; }
#ba-pillars-section .ba-copy-panel.is-current { opacity: 1; visibility: visible; transition: opacity 0.5s ease; pointer-events: auto; }
#ba-pillars-section .ba-title { margin: 0 0 32px; font-size: 50px; line-height: 0.9; letter-spacing: -0.065em; font-weight: 500; color: var(--ink); max-width: 11ch; text-wrap: balance; }
#ba-pillars-section .ba-body { margin: 0 0 30px; font-size: 17px; line-height: 1.54; font-weight: 400; color: var(--ink); text-wrap: pretty; }
#ba-pillars-section .ba-cta { color: #0071e3; font-size: 17px; font-weight: 500; text-decoration: none; }
[data-theme="dark"] #ba-pillars-section .ba-cta { color: #4da3ff; }
#ba-pillars-section .ba-cta:hover { text-decoration: underline; }

#ba-pillars-section .ba-word-build, #ba-pillars-section .ba-word-grow { position: relative; display: inline-flex; align-items: baseline; justify-content: center; margin: 0 0.02em; }
#ba-pillars-section .ba-word-grow { width: 112px; }
#ba-pillars-section .ba-word-build > .measure, #ba-pillars-section .ba-word-grow > .measure { visibility: hidden; white-space: nowrap; }
#ba-pillars-section .ba-word-build > .fx, #ba-pillars-section .ba-word-grow > .fx { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; white-space: nowrap; color: transparent; -webkit-background-clip: text; background-clip: text; }
/* Until activated the words are plain ink, so text is never invisible if scripts fail. */
#ba-pillars-section .ba-word-build:not(.is-active) > .fx, #ba-pillars-section .ba-word-grow:not(.is-active) > .fx { color: var(--ink); }
#ba-pillars-section .ba-word-build.is-active > .fx { background-image: var(--grad-build); animation: ba-machine-reveal 0.8s steps(8, end) forwards; clip-path: inset(0 100% 0 0); }
#ba-pillars-section .ba-word-grow.is-active > .fx { background-image: var(--grad-grow); animation: ba-grow-reveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

#ba-pillars-section .ba-define { position: relative; display: inline-block; vertical-align: baseline; line-height: 0.88; }
#ba-pillars-section .ba-define .stage { position: relative; display: inline-grid; align-items: center; justify-items: start; }
#ba-pillars-section .ba-define .measure, #ba-pillars-section .ba-define .stroke, #ba-pillars-section .ba-define .fill { grid-area: 1 / 1; white-space: nowrap; font: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; -webkit-font-smoothing: antialiased; backface-visibility: hidden; }
#ba-pillars-section .ba-define .measure { visibility: hidden; width: 125px; }
#ba-pillars-section .ba-define .stroke { color: transparent; background-image: var(--grad-brand); background-repeat: no-repeat; background-size: 180% 100%; background-position: 0% 0%; -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 1.2px transparent; opacity: 0; clip-path: inset(0 100% 0 0); z-index: 2; }
#ba-pillars-section .ba-define .fill { color: transparent; background-image: var(--grad-brand); background-repeat: no-repeat; background-size: 100% 100%; background-position: 0% 0%; -webkit-background-clip: text; background-clip: text; opacity: 0; clip-path: inset(0 100% 0 0); z-index: 1; }
#ba-pillars-section .ba-define:not(.play):not(.done) .fill { color: var(--ink); background: none; opacity: 1; clip-path: none; }
#ba-pillars-section .ba-define.play .stroke { animation: ba-define-trace 880ms cubic-bezier(0.6, 0.05, 0.22, 1) forwards, ba-define-trace-shift 880ms linear forwards; width: 125px; }
#ba-pillars-section .ba-define.play .fill { animation: ba-define-fill 1800ms cubic-bezier(0.77, 0, 0.175, 1) 360ms forwards; width: 125px; }
#ba-pillars-section .ba-define.done .stroke { opacity: 1; clip-path: inset(0 0 0 0); background-position: 100% 0%; width: 125px; }
#ba-pillars-section .ba-define.done .fill { opacity: 1; clip-path: inset(0 0 0 0); }

@keyframes ba-define-trace { 0% { opacity: 0; clip-path: inset(0 100% 0 0); } 10% { opacity: 1; } 100% { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes ba-define-trace-shift { 0% { background-position: 0% 0%; } 100% { background-position: 100% 0%; } }
@keyframes ba-define-fill { 0% { opacity: 0; clip-path: inset(0 100% 0 0); } 18% { opacity: 0.14; clip-path: inset(0 88% 0 0); } 45% { opacity: 0.34; clip-path: inset(0 64% 0 0); } 72% { opacity: 0.72; clip-path: inset(0 28% 0 0); } 100% { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes ba-machine-reveal { to { clip-path: inset(0 0 0 0); } }
@keyframes ba-grow-reveal { 0% { opacity: 0; transform: scale(0.5); filter: blur(12px); } 70% { opacity: 1; transform: scale(1.05); filter: blur(0); } 100% { opacity: 1; transform: scale(1); filter: blur(0); } }

/* Scroll cue. Solid, with no blur: backdrop blur is reserved for the header. */
#ba-pillars-section .scroll-reminder-box { position: absolute; bottom: 30px; right: 30px; z-index: 5; display: flex; flex-direction: column; align-items: center; pointer-events: none; background: var(--bg-alt); border: 1px solid var(--hair); padding: 10px 15px; border-radius: 20px; transition: opacity 0.4s ease; }
#ba-pillars-section .scroll-mouse-icon { width: 18px; height: 30px; border: 1.5px solid var(--ink); border-radius: 9px; position: relative; }
#ba-pillars-section .scroll-mouse-wheel { width: 3px; height: 6px; background: var(--ink); border-radius: 1.5px; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); animation: scroll-wheel-drop 1.6s infinite ease-in-out; }
#ba-pillars-section .scroll-arrows-group { display: flex; flex-direction: column; align-items: center; margin-top: 4px; }
#ba-pillars-section .scroll-arrow-item { display: block; width: 6px; height: 6px; border-bottom: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink); transform: rotate(45deg); margin: -1px 0; animation: scroll-arrow-fade 1.6s infinite ease-in-out; }
#ba-pillars-section .scroll-arrow-item:nth-child(2) { animation-delay: 0.2s; }
#ba-pillars-section .scroll-reminder-text { margin: 6px 0 0; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ink); }
@keyframes scroll-wheel-drop { 0% { opacity: 0; top: 4px; } 20% { opacity: 1; } 60% { opacity: 1; top: 14px; } 100% { opacity: 0; top: 14px; } }
@keyframes scroll-arrow-fade { 0% { opacity: 0; transform: translateY(-3px) rotate(45deg); } 50% { opacity: 1; } 100% { opacity: 0; transform: translateY(3px) rotate(45deg); } }

@media (max-width: 991px) {
  #ba-pillars-section .ba-stage { height: 240svh; }
  #ba-pillars-section .ba-sticky { flex-direction: column; }
  #ba-pillars-section .ba-left { width: 100%; height: 30%; flex: none; }
  #ba-pillars-section .ba-visual { height: min(100%, 92vw); }
  #ba-pillars-section .ba-right { width: 100%; flex: 1; padding: 8px 24px 24px; justify-content: flex-start; }
  #ba-pillars-section .ba-intro { margin-bottom: 12px; }
  #ba-pillars-section .ba-intro h2 { font-size: 30px; margin-bottom: 8px; }
  #ba-pillars-section .ba-intro p { margin-top: 0; }
  #ba-pillars-section .ba-title { font-size: 28px; line-height: 1.1; margin-bottom: 10px; max-width: none; }
  #ba-pillars-section .ba-body { font-size: 14px; line-height: 1.45; margin-bottom: 12px; }
  #ba-pillars-section .scroll-reminder-box { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #ba-pillars-section *, #ba-pillars-section *::before { animation: none !important; transition: none !important; }
}