/* ════════════════════════════════════════════════════════════
   AI ACCELERATED APP DEV
   Promoted from the `-caleb` candidate into the canonical slot in
   S125; the page it replaced is in _archive/ (…-replaced-s125).
   The `aac-` prefix is kept — same call as the Legacy Mod
   promotion in S124: renaming is diff noise, and the decision
   should be made once across all the `-caleb` pages.
   Thesis: faster delivery because AI absorbs the mechanical work
   and senior engineers own every decision. (No lower-cost claim.)
   Hero ported from hero-redesign.html ad-1; seven-phase Agentic
   SDLC spine + Atlas band + outcomes restored from the s68
   archive, brought onto the .prose / true-Anton type system.
   Rhythm: dark hero → gray sdlc → dark atlas → gray outcomes →
   dark cta.
   ════════════════════════════════════════════════════════════ */

.aac-wrap {
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: clamp(24px, 6vw, 96px);
}

/* S01 · HERO — shared services formula: markup rendered by
   /js/svc-heroes.js, styles in /css/services/svc-hero.css */

/* ── S02 · THE AGENTIC SDLC (spine + vignettes) ─────────── */
.aac-sdlc {
  background: var(--jg-dark-inlay);
  padding: clamp(80px, 10vh, 140px) 0;
  position: relative;
}
.aac-sdlc__head {
  text-align: center;
  margin-bottom: clamp(56px, 7vh, 96px);
}
.aac-sdlc__head h2 {
  font-family: 'Anton', sans-serif; font-weight: 400;
  font-size: clamp(36px, 4.6vw, 68px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--jg-light);
  margin: 16px 0 12px;
}
.aac-sdlc__head h2 em { font-style: normal; color: var(--jg-primary); }
.aac-sdlc__head p { margin: 0 auto; max-width: 62ch; }

/* The spine: dim rail + scroll-fill + drifting particles */
.aac-spine-zone { position: relative; }
.aac-spine {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(244,244,244,0.08);
}
.aac-spine__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,189,255,0.9), rgba(0,189,255,0.35));
  transform-origin: top;
  transform: scaleY(0); /* driven by JS */
}
.aac-spine__flow {
  position: absolute;
  inset: -4px 0;
  background-image: radial-gradient(circle, rgba(0,189,255,0.9) 1.5px, transparent 2px);
  background-size: 2px 56px;
  background-repeat: repeat-y;
  background-position: 0 0;
  animation: aac-flow-spine 3.2s linear infinite;
  opacity: 0.55;
}
@keyframes aac-flow-spine {
  to { background-position: 0 56px; }
}

/* Phase bands alternate around the spine */
.aac-phase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(56px, 7vw, 110px);
  align-items: center;
  padding: clamp(36px, 5vh, 64px) 0;
  position: relative;
}
.aac-phase__viz  { justify-self: end; }
.aac-phase__copy { justify-self: start; }
.aac-phase--flip .aac-phase__viz  { order: 2; justify-self: start; }
.aac-phase--flip .aac-phase__copy { order: 1; justify-self: end; text-align: right; }

/* Node on the spine per phase */
.aac-phase::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--jg-dark);
  border: 2px solid rgba(244,244,244,0.25);
  z-index: 1;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.aac-phase.lit::before {
  border-color: var(--jg-primary);
  box-shadow: 0 0 14px rgba(0,189,255,0.8);
}

.aac-phase__idx {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--jg-primary);
  display: block;
  margin-bottom: 10px;
}
.aac-phase__h3 {
  font-family: 'Anton', sans-serif; font-weight: 400;
  font-size: clamp(24px, 2.6vw, 38px);
  text-transform: uppercase;
  line-height: 1;
  color: var(--jg-light);
  margin: 0 0 18px;
}
/* layout only — .prose owns family/size/color/leading */
.aac-phase__ai,
.aac-phase__gate { max-width: 46ch; }
.aac-phase--flip .aac-phase__ai,
.aac-phase--flip .aac-phase__gate { margin-left: auto; }
.aac-phase__ai strong,
.aac-phase__gate strong {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.aac-phase__ai strong   { color: var(--jg-primary); }
.aac-phase__gate strong { color: rgba(244,244,244,0.85); }
.aac-phase__ai   { margin: 0 0 18px; }
.aac-phase__gate { margin: 0; }

/* Human gate stamp — the page's repeated promise */
.aac-stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 6px 12px;
  border: 1px solid rgba(0,189,255,0.35);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jg-primary);
  opacity: 0;
  transform: scale(1.25) rotate(-3deg);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.aac-phase.in .aac-stamp {
  opacity: 1;
  transform: none;
  transition-delay: 0.55s;
}
.aac-stamp::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--jg-primary);
}

/* Copy reveal */
.aac-phase__copy > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.aac-phase.in .aac-phase__copy > * { opacity: 1; transform: none; }
.aac-phase.in .aac-phase__copy > :nth-child(2) { transition-delay: 0.08s; }
.aac-phase.in .aac-phase__copy > :nth-child(3) { transition-delay: 0.16s; }
.aac-phase.in .aac-phase__copy > :nth-child(4) { transition-delay: 0.24s; }

/* ── Micro-vignettes (shared chrome) ────────────────────── */
.aac-viz {
  width: clamp(230px, 22vw, 320px);
  background: var(--jg-dark);
  border: 1px solid rgba(244,244,244,0.1);
  padding: 14px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.aac-phase.in .aac-viz { opacity: 1; transform: none; }
.aac-viz svg { display: block; width: 100%; height: auto; }
.aac-viz__cap {
  margin-top: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244,244,244,0.35);
  display: flex;
  justify-content: space-between;
}
.aac-viz__cap .on { color: var(--jg-primary); }

/* shared svg ink */
.aac-ink     { stroke: rgba(244,244,244,0.5); stroke-width: 1.5; fill: none; }
.aac-ink-dim { stroke: rgba(244,244,244,0.22); stroke-width: 1.5; fill: none; }
.aac-cyan    { stroke: #00BDFF; stroke-width: 1.5; fill: none; }
.aac-fill-dim  { fill: rgba(244,244,244,0.16); }
.aac-fill-cyan { fill: #00BDFF; }

/* V1 · Requirements — chat bubbles condense into a spec */
.v-req .bub { opacity: 0; animation: v-req-bub 5.5s infinite; }
.v-req .bub2 { animation-delay: 0.35s; }
.v-req .bub3 { animation-delay: 0.7s; }
@keyframes v-req-bub {
  0%, 4%   { opacity: 0; transform: translateX(-6px); }
  10%, 42% { opacity: 1; transform: none; }
  52%, 100%{ opacity: 0; transform: translateX(4px); }
}
.v-req .doc { opacity: 0; animation: v-req-doc 5.5s infinite; }
@keyframes v-req-doc {
  0%, 46%  { opacity: 0; }
  56%, 92% { opacity: 1; }
  100%     { opacity: 0; }
}
.v-req .dl {
  stroke-dasharray: 64;
  stroke-dashoffset: 64;
  animation: v-req-line 5.5s infinite;
}
.v-req .dl2 { animation-delay: 0.18s; }
.v-req .dl3 { animation-delay: 0.36s; }
@keyframes v-req-line {
  0%, 55%   { stroke-dashoffset: 64; }
  70%, 92%  { stroke-dashoffset: 0; }
  100%      { stroke-dashoffset: 64; }
}

/* V2 · Architecture — the graph draws itself */
.v-arch .edge {
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
  animation: v-arch-edge 6s infinite;
}
.v-arch .e2 { animation-delay: 0.5s; }
.v-arch .e3 { animation-delay: 1s; }
.v-arch .e4 { animation-delay: 1.5s; }
@keyframes v-arch-edge {
  0%, 8%    { stroke-dashoffset: 90; }
  28%, 80%  { stroke-dashoffset: 0; }
  95%, 100% { stroke-dashoffset: 90; }
}
.v-arch .core { animation: v-arch-core 6s infinite; }
@keyframes v-arch-core {
  0%, 30%  { fill: rgba(244,244,244,0.16); }
  45%, 80% { fill: #00BDFF; }
  95%, 100%{ fill: rgba(244,244,244,0.16); }
}

/* V3 · Development — code bars stream into place */
.v-dev .cl {
  transform: translateX(-110%);
  animation: v-dev-line 4.8s infinite;
}
.v-dev .c2 { animation-delay: 0.25s; }
.v-dev .c3 { animation-delay: 0.5s; }
.v-dev .c4 { animation-delay: 0.75s; }
.v-dev .c5 { animation-delay: 1s; }
.v-dev .c6 { animation-delay: 1.25s; }
@keyframes v-dev-line {
  0%       { transform: translateX(-110%); }
  12%, 78% { transform: none; }
  92%, 100%{ transform: translateX(110%); }
}

/* V4 · Code Review — scan line sweeps, verdicts land */
.v-rev .scan { animation: v-rev-scan 5s infinite; }
@keyframes v-rev-scan {
  0%, 8%   { transform: translateY(0); opacity: 0; }
  12%      { opacity: 1; }
  55%      { transform: translateY(92px); opacity: 1; }
  60%, 100%{ transform: translateY(92px); opacity: 0; }
}
.v-rev .tick { opacity: 0; animation: v-rev-tick 5s infinite; }
.v-rev .t2 { animation-delay: 0.55s; }
.v-rev .t3 { animation-delay: 1.1s; }
@keyframes v-rev-tick {
  0%, 24%  { opacity: 0; transform: scale(0.5); transform-origin: center; transform-box: fill-box; }
  32%, 88% { opacity: 1; transform: none; }
  96%,100% { opacity: 0; }
}

/* V5 · Testing — the grid goes green in a wave */
.v-test .cell { animation: v-test-cell 4.6s infinite; }
@keyframes v-test-cell {
  0%, 10%  { fill: rgba(244,244,244,0.12); }
  22%, 82% { fill: rgba(0,189,255,0.85); }
  94%,100% { fill: rgba(244,244,244,0.12); }
}

/* V6 · Documentation — the page writes itself */
.v-doc .wl {
  stroke-dasharray: 110;
  stroke-dashoffset: 110;
  animation: v-doc-line 6s infinite;
}
@keyframes v-doc-line {
  0%   { stroke-dashoffset: 110; }
  22%, 84% { stroke-dashoffset: 0; }
  96%, 100%{ stroke-dashoffset: 110; }
}
.v-doc .cur { animation: v-doc-cur 6s infinite; }
@keyframes v-doc-cur {
  0%, 84%   { opacity: 1; }
  90%, 100% { opacity: 0; }
}

/* V7 · Deployment — ship it, then it pings live */
.v-dep .bar {
  transform: scaleX(0);
  transform-origin: left;
  animation: v-dep-bar 5.2s infinite;
}
@keyframes v-dep-bar {
  0%, 6%   { transform: scaleX(0); }
  42%, 88% { transform: scaleX(1); }
  98%,100% { transform: scaleX(0); }
}
.v-dep .live { opacity: 0; animation: v-dep-live 5.2s infinite; }
@keyframes v-dep-live {
  0%, 44%  { opacity: 0; }
  50%, 88% { opacity: 1; }
  98%,100% { opacity: 0; }
}
.v-dep .ring {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: v-dep-ring 5.2s infinite;
}
.v-dep .r2 { animation-delay: 0.6s; }
@keyframes v-dep-ring {
  0%, 46%  { opacity: 0; transform: scale(0.3); }
  54%      { opacity: 0.8; }
  78%, 100%{ opacity: 0; transform: scale(2.2); }
}

/* ── S04 · ATLAS BAND ───────────────────────────────────── */
.aac-atlas {
  background: var(--jg-dark);
  padding: clamp(56px, 7vh, 88px) 0;
  border-top: 1px solid rgba(244,244,244,0.06);
}
.aac-atlas__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  border: 1px solid rgba(0,189,255,0.3);
  background: rgba(0,189,255,0.04);
  box-shadow: 0 0 40px rgba(0,189,255,0.07);
  padding: clamp(24px, 3.4vw, 44px);
  flex-wrap: wrap;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.aac-atlas__inner:hover {
  border-color: rgba(0,189,255,0.6);
  box-shadow: 0 0 48px rgba(0,189,255,0.13);
}
.aac-atlas__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--jg-primary);
  display: block;
  margin-bottom: 8px;
}
.aac-atlas__h3 {
  font-family: 'Anton', sans-serif; font-weight: 400;
  font-size: clamp(22px, 2.4vw, 34px);
  text-transform: uppercase;
  color: var(--jg-light);
  margin: 0 0 8px;
}
.aac-atlas__b { margin: 0; max-width: 56ch; }
.aac-atlas__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jg-primary);
  text-decoration: none;
  white-space: nowrap;
}
.aac-atlas__link svg {
  width: 18px;
  height: 18px;
  animation: aac-arrow-beat 1.6s ease-in-out infinite;
}
@keyframes aac-arrow-beat {
  0%, 55%, 100% { transform: translateX(0); }
  62%           { transform: translateX(3px); }
  70%           { transform: translateX(0); }
  78%           { transform: translateX(3px); }
}

/* ── S05 · WHAT CHANGES ─────────────────────────────────── */
.aac-outcomes {
  background: var(--jg-dark-inlay);
  padding: clamp(80px, 10vh, 140px) 0;
}
.aac-outcomes__h2 {
  font-family: 'Anton', sans-serif; font-weight: 400;
  font-size: clamp(34px, 4.2vw, 62px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--jg-light);
  margin: 16px 0 clamp(40px, 5vh, 64px);
  max-width: 18ch;
}
.aac-outcomes__h2 em { font-style: normal; color: var(--jg-primary); }
.aac-outcome {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(26px, 3.4vh, 40px) 0;
  border-top: 1px solid rgba(244,244,244,0.1);
  align-items: start;
}
.aac-outcome:last-child { border-bottom: 1px solid rgba(244,244,244,0.1); }
.aac-outcome__n {
  font-family: 'Anton', sans-serif; font-weight: 400;
  font-size: clamp(34px, 3.6vw, 54px);
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0,189,255,0.55);
}
.aac-outcome__h {
  font-family: 'Anton', sans-serif; font-weight: 400;
  font-size: clamp(19px, 1.9vw, 27px);
  text-transform: uppercase;
  color: var(--jg-light);
  margin: 0 0 10px;
}
.aac-outcome__b { margin: 0; max-width: 72ch; }

/* ── S06 · CTA ──────────────────────────────────────────── */
/* Grey, not dark: the case-studies triptych was inserted above it (S06,
   dark by default) off the grey .aac-outcomes, so the CTA takes the next
   turn in the alternation. Same shape as ai-legacy-modernization, where
   the dark triptych also sits between a grey section and a grey CTA. */
.aac-cta {
  background: var(--jg-dark);  /* flipped back — case studies removed, keeps dark/gray rhythm (S143) */
  padding: clamp(90px, 12vh, 160px) 0;
  text-align: center;
}
.aac-cta__h2 {
  font-family: 'Anton', sans-serif; font-weight: 400;
  font-size: clamp(42px, 6vw, 92px);
  line-height: 0.96;
  text-transform: uppercase;
  color: var(--jg-light);
  margin: 0 0 20px;
}
.aac-cta__h2 em { font-style: normal; color: var(--jg-primary); }
.aac-cta__b { max-width: 56ch; margin: 0 auto 34px; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 960px) {
  /* spine moves to the left edge; bands stack */
  .aac-spine { left: 5px; transform: none; }
  .aac-phase,
  .aac-phase--flip { grid-template-columns: 1fr; gap: 22px; padding-left: 34px; }
  .aac-phase::before { left: 5px; transform: translate(-4px, -50%); top: 12px; }
  .aac-phase__viz, .aac-phase--flip .aac-phase__viz { order: 2; justify-self: start; }
  .aac-phase__copy, .aac-phase--flip .aac-phase__copy { order: 1; justify-self: start; text-align: left; }
  .aac-phase--flip .aac-phase__ai,
  .aac-phase--flip .aac-phase__gate { margin-left: 0; }
  .aac-outcome { grid-template-columns: 64px 1fr; }
}
@media (max-width: 640px) {
}

/* ── Reduced motion: freeze on the "done" frame ─────────── */
@media (prefers-reduced-motion: reduce) {
  .aac-spine__flow { animation: none; opacity: 0; }
  .aac-viz svg * { animation: none !important; }
  .v-req .bub, .v-req .doc { opacity: 1; }
  .v-req .dl { stroke-dashoffset: 0; }
  .v-arch .edge { stroke-dashoffset: 0; }
  .v-arch .core { fill: #00BDFF; }
  .v-dev .cl { transform: none; }
  .v-rev .tick { opacity: 1; }
  .v-rev .scan { opacity: 0; }
  .v-test .cell { fill: rgba(0,189,255,0.85); }
  .v-doc .wl { stroke-dashoffset: 0; }
  .v-doc .cur { opacity: 0; }
  .v-dep .bar { transform: none; }
  .v-dep .live { opacity: 1; }
  .v-dep .ring { animation: none; opacity: 0; }
  .aac-phase__copy > *, .aac-viz, .aac-stamp { opacity: 1; transform: none; transition: none; }
  .aac-spine__fill { transform: none; }
  .aac-atlas__link svg { animation: none; }
}