/* ==========================================================================
   Two-Camp Engine Model — a responsive HTML/CSS diagram (no SVG) showing how
   a buyer's AI query splits into the two retrieval camps: Google's walled
   garden (Google AI Overviews + Gemini) vs. the open web (ChatGPT,
   Perplexity, Claude). Shared across the two-camp research page, the LO
   "learn" page, and the agent worked sample. Wording is verbatim from the
   engines table at /research/two-camp-engine-model/ — do not add claims here.

   MARKUP CONTRACT — paste exactly this shape. `data-stage` is the hook
   app.js uses to add `.is-staged` once ~25% visible (or immediately under
   reduced motion / no-JS). Omit the `<a class="two-camp__footnote-link">`
   ONLY on the two-camp research page itself (it would link to itself) —
   every other page keeps it.

   <figure class="two-camp" data-stage aria-label="The two-camp engine model: how AI answers split by retrieval backend">
     <div class="two-camp__query">
       <p class="two-camp__chip">A buyer asks AI who to trust</p>
     </div>
     <div class="two-camp__connector" aria-hidden="true">
       <span class="two-camp__stem"></span>
       <span class="two-camp__split-label">splits into</span>
       <span class="two-camp__arm two-camp__arm--left"></span>
       <span class="two-camp__arm two-camp__arm--right"></span>
     </div>
     <div class="two-camp__cards">
       <article class="two-camp__card two-camp__card--google">
         <h3 class="two-camp__card-title">Google camp</h3>
         <ul class="two-camp__engines">
           <li>Google AI Overviews</li>
           <li>Gemini</li>
         </ul>
         <p class="two-camp__reads"><span class="two-camp__reads-label">Reads:</span> Google&rsquo;s index, entity graph, Business Profiles, YouTube</p>
         <p class="two-camp__verdict">
           <span class="two-camp__verdict-q">
             <svg class="two-camp__review-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.5l1.98 4.13 4.52.63-3.27 3.24.78 4.5L8 11.9l-4.01 2.1.78-4.5L1.5 6.26l4.52-.63L8 1.5z" fill="currentColor"/></svg>
             Sees your Google reviews?
           </span>
           <span class="two-camp__verdict-a two-camp__verdict-a--yes">
             <svg class="two-camp__icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5 6.5 12 13 4.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
             Yes
           </span>
         </p>
       </article>
       <article class="two-camp__card two-camp__card--openweb">
         <h3 class="two-camp__card-title">Open web</h3>
         <ul class="two-camp__engines two-camp__engines--openweb">
           <li><strong>ChatGPT</strong> &mdash; Bing&rsquo;s index plus its own crawler</li>
           <li><strong>Perplexity</strong> &mdash; its own index, with a heavy lean on Reddit and directories</li>
           <li><strong>Claude</strong> &mdash; Brave Search</li>
         </ul>
         <p class="two-camp__verdict">
           <span class="two-camp__verdict-q">
             <svg class="two-camp__review-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.5l1.98 4.13 4.52.63-3.27 3.24.78 4.5L8 11.9l-4.01 2.1.78-4.5L1.5 6.26l4.52-.63L8 1.5z" fill="currentColor"/></svg>
             Sees your Google reviews?
           </span>
           <span class="two-camp__verdict-a two-camp__verdict-a--no">
             <svg class="two-camp__icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 4 12 12M12 4 4 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
             No
           </span>
         </p>
       </article>
     </div>
     <figcaption class="two-camp__footnote">
       Retrieval backends as of June 2026. They change; we re-verify each audit cycle.
       <a class="two-camp__footnote-link" href="/research/two-camp-engine-model/">The Two-Camp Engine Model &rarr;</a>
     </figcaption>
   </figure>

   Behaviour:
   - Final frame (everything visible, "Yes"/"No" in their resolved colors) is
     the default — the no-JS / reduced-motion floor. `html.js [data-stage]:not(.is-staged)`
     hides each piece back to its pre-animation state; app.js adds `.is-staged`
     once ~25% visible (or immediately under reduced motion), and the CSS
     keyframes below sequence the one-shot reveal (~1.9s total, under the 2.2s
     budget): chip drops in, connector draws down then splits, left card
     lights then its engine rows stagger in, right card lights then its rows
     stagger in, then the two review-verdicts resolve (green check / muted
     cross) with the open-web review icon greying out.
   - >=760px: cards sit side by side under the split connector (arms shown,
     "splits into" label hidden). <760px: cards stack, the split arms hide,
     and a single vertical stem plus the "splits into" label carries the idea.
   - SVG colours here all come from `currentColor` inheriting `color`, never
     from a CSS var in a presentation attribute (Safari-safe).
   ========================================================================== */

.two-camp {
  --tc-google-rgb: 127, 156, 196;
  margin: var(--space-6) 0;
  padding: 0;
}

/* -------------------- query chip -------------------- */
.two-camp__query {
  display: flex;
  justify-content: center;
  opacity: 1;
  transform: translateY(0);
}
.two-camp__chip {
  display: inline-block;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
  border-radius: 999px;
  background: var(--color-surface-elevated, rgba(255, 255, 255, 0.04));
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-text, #f3f5f7);
  text-align: center;
}

/* -------------------- connector -------------------- */
.two-camp__connector {
  position: relative;
  height: 44px;
  margin: 0 auto;
  max-width: 420px;
}
.two-camp__stem {
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--color-border-strong, rgba(255, 255, 255, 0.18));
  transform: translateX(-50%) scaleY(1);
  transform-origin: top center;
}
.two-camp__split-label {
  display: none;
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted, #8b929c);
  background: var(--color-bg, #0a0d12);
  padding: 0 var(--space-2);
  white-space: nowrap;
}
.two-camp__arm {
  position: absolute;
  bottom: 0;
  top: auto;
  height: 2px;
  width: calc(50% - 1px);
  background: var(--color-border-strong, rgba(255, 255, 255, 0.18));
  transform: scaleX(1);
}
.two-camp__arm--left {
  left: 0;
  transform-origin: right center;
}
.two-camp__arm--right {
  right: 0;
  transform-origin: left center;
}

/* -------------------- cards -------------------- */
.two-camp__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-4);
}
@media (min-width: 760px) {
  .two-camp__cards { grid-template-columns: 1fr 1fr; }
  .two-camp__arm { display: block; }
  .two-camp__split-label { display: none; }
}
@media (max-width: 759.98px) {
  .two-camp__arm { display: none; }
  .two-camp__split-label { display: block; }
}

.two-camp__card {
  padding: var(--space-6);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-card, 14px);
  background: var(--color-surface-elevated, rgba(255, 255, 255, 0.04));
  opacity: 1;
  transform: translateY(0);
}
.two-camp__card--google { border-color: rgba(var(--tc-google-rgb), 0.35); }
.two-camp__card--openweb { border-color: rgba(var(--accent-rgb, 204, 128, 102), 0.35); }

.two-camp__card-title {
  font-family: var(--font-mono);
  font-size: var(--label-md, 0.75rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
}
.two-camp__card--google .two-camp__card-title { color: rgb(var(--tc-google-rgb)); }
.two-camp__card--openweb .two-camp__card-title { color: var(--color-primary, #cc8066); }

.two-camp__engines {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.two-camp__card--google .two-camp__engines {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.two-camp__card--google .two-camp__engines li {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: var(--space-1) var(--space-3);
  border: 1px solid rgba(var(--tc-google-rgb), 0.3);
  border-radius: 999px;
  color: var(--color-text, #f3f5f7);
  opacity: 1;
  transform: translateX(0);
}
.two-camp__engines--openweb li {
  font-size: 0.875rem;
  color: var(--color-text-secondary, #b7bec8);
  padding-left: 1.1em;
  position: relative;
  opacity: 1;
  transform: translateX(0);
}
.two-camp__engines--openweb li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  color: var(--color-primary, #cc8066);
}
.two-camp__engines--openweb li strong {
  color: var(--color-text, #f3f5f7);
  font-weight: 600;
}

.two-camp__reads {
  margin: 0 0 var(--space-4);
  font-size: 0.875rem;
  color: var(--color-text-secondary, #b7bec8);
  max-width: 42ch;
}
.two-camp__reads-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted, #8b929c);
  margin-right: 0.4em;
}

.two-camp__verdict {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  font-size: 0.875rem;
}
.two-camp__verdict-q {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-secondary, #b7bec8);
}
.two-camp__review-icon {
  width: 14px;
  height: 14px;
  flex: none;
  color: rgb(var(--tc-google-rgb));
}
.two-camp__card--openweb .two-camp__review-icon {
  color: var(--color-text-muted, #8b929c);
}
.two-camp__verdict-a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-weight: 600;
  white-space: nowrap;
}
.two-camp__icon { width: 16px; height: 16px; flex: none; }
.two-camp__verdict-a--yes { color: #8fe3ba; }
.two-camp__verdict-a--no { color: #f3aaa3; }

.two-camp__footnote {
  margin-top: var(--space-4);
  font-size: 0.8125rem;
  color: var(--color-text-muted, #8b929c);
  max-width: 68ch;
}
.two-camp__footnote-link {
  display: inline-block;
  margin-left: var(--space-2);
  color: var(--color-primary, #cc8066);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* ==========================================================================
   Motion — one-shot on `.is-staged`. Pre-stage hidden state only applies
   once app.js has added html.js and the figure hasn't been staged yet
   (mirrors assets/components/hero-diagram.css's convention exactly).
   ========================================================================== */
html.js [data-stage].two-camp:not(.is-staged) .two-camp__query {
  opacity: 0;
  transform: translateY(-10px);
}
html.js [data-stage].two-camp:not(.is-staged) .two-camp__stem {
  transform: translateX(-50%) scaleY(0);
}
html.js [data-stage].two-camp:not(.is-staged) .two-camp__arm {
  transform: scaleX(0);
}
html.js [data-stage].two-camp:not(.is-staged) .two-camp__card {
  opacity: 0;
  transform: translateY(10px);
}
html.js [data-stage].two-camp:not(.is-staged) .two-camp__card li {
  opacity: 0;
  transform: translateX(-8px);
}
html.js [data-stage].two-camp:not(.is-staged) .two-camp__verdict-a--yes,
html.js [data-stage].two-camp:not(.is-staged) .two-camp__verdict-a--no {
  opacity: 0;
  transform: scale(0.6);
}
html.js [data-stage].two-camp:not(.is-staged) .two-camp__card--openweb .two-camp__review-icon {
  color: rgb(var(--tc-google-rgb));
}

.two-camp.is-staged .two-camp__query {
  animation: tcFadeDown 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.two-camp.is-staged .two-camp__stem {
  animation: tcStem 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s both;
}
.two-camp.is-staged .two-camp__arm {
  animation: tcArm 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) 0.48s both;
}
.two-camp.is-staged .two-camp__card--google {
  animation: tcCardIn 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) 0.68s both;
}
.two-camp.is-staged .two-camp__card--openweb {
  animation: tcCardIn 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) 0.98s both;
}
.two-camp.is-staged .two-camp__card--google li {
  animation: tcRow 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.two-camp.is-staged .two-camp__card--google li:nth-child(1) { animation-delay: 0.76s; }
.two-camp.is-staged .two-camp__card--google li:nth-child(2) { animation-delay: 0.85s; }
.two-camp.is-staged .two-camp__card--openweb li {
  animation: tcRow 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.two-camp.is-staged .two-camp__card--openweb li:nth-child(1) { animation-delay: 1.06s; }
.two-camp.is-staged .two-camp__card--openweb li:nth-child(2) { animation-delay: 1.15s; }
.two-camp.is-staged .two-camp__card--openweb li:nth-child(3) { animation-delay: 1.24s; }
.two-camp.is-staged .two-camp__verdict-a--yes {
  animation: tcPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 1.55s both;
}
.two-camp.is-staged .two-camp__verdict-a--no {
  animation: tcPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 1.7s both;
}
.two-camp.is-staged .two-camp__card--openweb .two-camp__review-icon {
  animation: tcGrey 0.3s ease 1.7s both;
}

@keyframes tcFadeDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes tcStem {
  from { transform: translateX(-50%) scaleY(0); }
  to { transform: translateX(-50%) scaleY(1); }
}
@keyframes tcArm {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes tcCardIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes tcRow {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes tcPop {
  0% { opacity: 0; transform: scale(0.6); }
  70% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes tcGrey {
  from { color: rgb(var(--tc-google-rgb)); }
  to { color: var(--color-text-muted, #8b929c); }
}

@media (prefers-reduced-motion: reduce) {
  .two-camp * {
    animation: none !important;
    transition: none !important;
  }
}