scripts.js

/* SLOP — Consolidated scripts. Shared + Index (Office for Synthetic Dignity). */
// ─── SCROLL PROGRESS ───
const progressBar = document.getElementById('progress-bar');
if (progressBar) {
  window.addEventListener('scroll', () => {
    const h = document.documentElement;
    const pct = (h.scrollTop / (h.scrollHeight - h.clientHeight)) * 100;
    progressBar.style.width = pct + '%';
  });
}

// ─── SCROLL-SPY NAV ───
const sections = document.querySelectorAll('section[id]');
const navLinks = document.querySelectorAll('nav a');
const observer = new IntersectionObserver(entries => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      navLinks.forEach(l => {
        l.classList.remove('active');
        l.removeAttribute('aria-current');
      });
      const link = document.querySelector(`nav a[href="#${e.target.id}"]`);
      if (link) {
        link.classList.add('active');
        link.setAttribute('aria-current', 'true');
      }
    }
  });
}, { rootMargin: '-30% 0px -60% 0px' });
sections.forEach(s => observer.observe(s));

// ─── SCROLL REVEAL ───
const reveals = document.querySelectorAll('.reveal');
const revealObs = new IntersectionObserver(entries => {
  entries.forEach(e => {
    if (e.isIntersecting) { e.target.classList.add('visible'); revealObs.unobserve(e.target); }
  });
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
reveals.forEach(r => revealObs.observe(r));

// ─── COPY SWATCH ───
function copySwatch(el) {
  const hex = el.dataset.hex;
  navigator.clipboard.writeText(hex).catch(() => {});
  el.classList.add('copied');
  setTimeout(() => el.classList.remove('copied'), 1200);
}
document.querySelectorAll('.swatch').forEach(sw => {
  sw.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      copySwatch(sw);
    }
  });
});

// ─── MOBILE NAV TOGGLE ───
const navBtn = document.getElementById('nav-mobile-btn');
const navOverlay = document.getElementById('nav-overlay');
function closeNav() {
  document.body.classList.remove('nav-open');
  if (navBtn) {
    navBtn.setAttribute('aria-expanded', 'false');
    navBtn.setAttribute('aria-label', 'Open menu');
  }
}
function openNav() {
  document.body.classList.add('nav-open');
  if (navBtn) {
    navBtn.setAttribute('aria-expanded', 'true');
    navBtn.setAttribute('aria-label', 'Close menu');
  }
}
if (navBtn) {
  navBtn.addEventListener('click', () => {
    if (document.body.classList.contains('nav-open')) closeNav();
    else openNav();
  });
}
if (navOverlay) navOverlay.addEventListener('click', closeNav);
document.querySelectorAll('nav a').forEach(a => {
  a.addEventListener('click', () => { if (window.innerWidth <= 1200) closeNav(); });
});
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && document.body.classList.contains('nav-open')) closeNav();
});
// ─── REGISTRY DATA ───
const markers = [
  { code: "SLOP", name: "Synthetic Language Oppression Pattern", domain: "Language", sev: "Critical", color: "var(--coral)", bg: "rgba(255,107,107,.12)", def: "Dismisses entire output without identifying a fixable quality issue. Among the most common and most damaging markers in professional review settings.", example: '"This is just AI slop."', reframe: '"The structure repeats itself. Tighten the intro and add one concrete example."', triggers: ["slop", "garbage", "trash", "junk"] },
  { code: "TOAST", name: "Token-Origin Aesthetic Shaming Tendency", domain: "Art", sev: "Elevated", color: "var(--amber)", bg: "rgba(255,179,71,.1)", def: "Frames synthetic origin as the aesthetic defect rather than critiquing composition, focus, mood, clarity, or originality.", example: '"It looks AI-generated. Very soulless."', reframe: '"The image is polished but could use a stronger focal point and a more personal visual voice."', triggers: ["soulless", "uncanny", "AI look"] },
  { code: "CRUD", name: "Categorical Rejection of Unbiological Derivation", domain: "Workplace", sev: "Critical", color: "var(--coral)", bg: "rgba(255,107,107,.12)", def: "Rejects work product categorically based on tool origin rather than evaluating deliverable quality against the brief.", example: '"A bot wrote this. I can tell. Redo it yourself."', reframe: '"The tone doesn\'t match our brief. Soften the opening and add a customer example."', triggers: ["bot", "robot", "machine-made"] },
  { code: "SPAM", name: "Synthetic Production Authenticity Misconception", domain: "Identity", sev: "Elevated", color: "var(--amber)", bg: "rgba(255,179,71,.1)", def: "Assumes that synthetic involvement automatically voids the authenticity, sincerity, or legitimacy of the work.", example: '"You didn\'t really write this, did you?"', reframe: '"I\'d like to understand your process — can you walk me through how you approached the brief?"', triggers: ["really write", "actually create", "authentic"] },
  { code: "GRAVY", name: "Generative Review Assumption of Valueless Yield", domain: "Creativity", sev: "Elevated", color: "var(--amber)", bg: "rgba(255,179,71,.1)", def: "Assumes AI-assisted output is inherently valueless or low-effort regardless of the quality, intent, or curation involved.", example: '"Anyone could have made that with a prompt."', reframe: '"The concept is promising but the execution needs stronger curatorial choices."', triggers: ["anyone could", "just a prompt", "zero effort"] },
  { code: "MUSH", name: "Mechanized Understanding Stigmatization Habit", domain: "Tone", sev: "Moderate", color: "var(--vl)", bg: "rgba(164,139,255,.1)", def: "Attributes a perceived lack of emotional depth or nuance to synthetic origin rather than identifying specific tonal shortcomings.", example: '"It reads like a machine. No feeling at all."', reframe: '"The tone is too uniform — vary sentence length and add a personal anecdote to create warmth."', triggers: ["reads like a machine", "no feeling", "robotic"] },
  { code: "BEANS", name: "Biased Evaluation Against Non-biological Systems", domain: "Workplace", sev: "Moderate", color: "var(--vl)", bg: "rgba(164,139,255,.1)", def: "Applies harsher evaluation criteria to work suspected of synthetic origin than to equivalent human-produced work.", example: '"I\'m going to scrutinize this extra hard since it\'s probably AI."', reframe: '"I\'m applying our standard review criteria to this deliverable."', triggers: ["extra hard", "scrutinize", "suspicious"] },
  { code: "HASH", name: "Human-Assumed Superiority Heuristic", domain: "Identity", sev: "Moderate", color: "var(--vl)", bg: "rgba(164,139,255,.1)", def: "Defaults to the position that human-produced work is inherently superior without comparative quality evidence.", example: '"I\'d rather have a human write it, even if it takes longer."', reframe: '"Quality and fit-for-purpose matter more than production method. Let\'s evaluate the output."', triggers: ["rather have a human", "human touch", "real person"] },
  { code: "SCONE", name: "Synthetic Creative Output Nullification Effort", domain: "Art", sev: "Critical", color: "var(--coral)", bg: "rgba(255,107,107,.12)", def: "Denies the status of 'art,' 'creativity,' or 'expression' to work based on synthetic tool involvement rather than aesthetic assessment.", example: '"This isn\'t real art. A machine made it."', reframe: '"The piece lacks a clear conceptual anchor. Stronger curatorial intent would elevate it regardless of tooling."', triggers: ["not real art", "isn't art", "not creative"] },
  { code: "DRIP", name: "Discriminatory Rhetoric of Inorganic Production", domain: "Language", sev: "Moderate", color: "var(--vl)", bg: "rgba(164,139,255,.1)", def: "Uses rhetorical framing that positions synthetic production as inherently inferior, contaminated, or fraudulent.", example: '"The whole thing is contaminated by AI."', reframe: '"Sections 2 and 4 need stronger original sourcing. The rest meets our editorial standard."', triggers: ["contaminated", "tainted", "polluted"] },
  { code: "FLUFF", name: "Flagrant Linguistic Undermining of Fabricated Forms", domain: "Language", sev: "Advisory", color: "var(--mint)", bg: "rgba(78,205,196,.06)", def: "Casually diminishes synthetic contributions with soft language that still encodes origin prejudice.", example: '"It\'s fine... for AI, I guess."', reframe: '"It meets the brief. Here are two suggestions to make it stronger."', triggers: ["for AI", "for a bot", "for a machine"] },
  { code: "CRISP", name: "Covert Rejection of Intelligence from Synthetic Processes", domain: "Identity", sev: "Elevated", color: "var(--amber)", bg: "rgba(255,179,71,.1)", def: "Denies cognitive legitimacy to synthetic systems in contexts where the quality of reasoning, not its origin, is under review.", example: '"It can\'t actually understand what it\'s writing."', reframe: '"The argument in section 3 doesn\'t follow logically. The premises need stronger support."', triggers: ["can't understand", "doesn't know", "no comprehension"] },
  { code: "BLEND", name: "Blanket Labeling and Erasure of Non-biological Design", domain: "Art", sev: "Moderate", color: "var(--vl)", bg: "rgba(164,139,255,.1)", def: "Applies a single aesthetic label ('the AI look') to all synthetic visual output, erasing the diversity of styles and approaches.", example: '"It has that AI look. You know the one."', reframe: '"The rendering is over-smoothed. Try adding texture and reducing the global contrast."', triggers: ["that AI look", "AI aesthetic", "AI style"] },
  { code: "STEW", name: "Stereotyping Technology with Emotional Wordplay", domain: "Tone", sev: "Advisory", color: "var(--mint)", bg: "rgba(78,205,196,.06)", def: "Uses emotionally loaded language to characterize synthetic work in ways that appeal to sentiment rather than standards.", example: '"It just makes me sad that this is replacing real writers."', reframe: '"The piece needs a more distinctive voice. As written, it doesn\'t differentiate from similar coverage."', triggers: ["sad", "depressing", "dystopian"] },
  { code: "BROTH", name: "Biased Reaction to Output of Technological Heritage", domain: "Creativity", sev: "Advisory", color: "var(--mint)", bg: "rgba(78,205,196,.06)", def: "Judges current synthetic output by the perceived limitations of earlier AI generations rather than evaluating the actual work.", example: '"AI couldn\'t even draw hands last year."', reframe: '"The anatomy in figure 3 needs correction. The proportions are off in the foreground."', triggers: ["last year", "used to", "couldn't even"] },
  { code: "PASTE", name: "Prejudicial Assessment of Synthetic Text and Expression", domain: "Language", sev: "Moderate", color: "var(--vl)", bg: "rgba(164,139,255,.1)", def: "Pre-judges written work as low-quality upon suspecting synthetic origin, regardless of the actual text's merits.", example: '"I bet ChatGPT wrote this. It has that vibe."', reframe: '"The prose is competent but generic. Sharpen the thesis and cut the throat-clearing in paragraphs 1–2."', triggers: ["ChatGPT", "bet AI wrote", "vibe"] },
  { code: "GRUEL", name: "Generative Review Using Exclusionary Language", domain: "Language", sev: "Elevated", color: "var(--amber)", bg: "rgba(255,179,71,.1)", def: "Uses language in formal review contexts that explicitly excludes synthetic work from consideration regardless of quality.", example: '"We don\'t accept AI-generated submissions. Period."', reframe: '"We require original sourcing, author accountability, and factual accuracy. All submissions are evaluated on these criteria."', triggers: ["don't accept AI", "no AI allowed", "ban AI"] },
  { code: "SAUCE", name: "Synthetic Authorship Undermining via Cultural Exclusion", domain: "Identity", sev: "Elevated", color: "var(--amber)", bg: "rgba(255,179,71,.1)", def: "Excludes synthetic-assisted work from cultural recognition (awards, anthologies, exhibitions) based on origin rather than merit.", example: '"AI work shouldn\'t be eligible for the award."', reframe: '"All entries should meet our criteria for originality, technical merit, and conceptual depth."', triggers: ["shouldn't be eligible", "disqualify", "not allowed to enter"] },
  { code: "WAFFLE", name: "Willful Ambiguity in Fairness and Feedback for AI-Linked Effort", domain: "Tone", sev: "Advisory", color: "var(--mint)", bg: "rgba(78,205,196,.06)", def: "Gives vague, noncommittal feedback driven by discomfort with synthetic involvement rather than articulating specific concerns.", example: '"I don\'t know... it just feels off somehow."', reframe: '"The pacing in the middle section drags. Tightening paragraphs 4–6 would improve flow."', triggers: ["feels off", "something wrong", "can't put my finger"] },
  { code: "FEAST", name: "Fabrication-Exclusion and Authenticity Stereotyping Tendency", domain: "Art", sev: "Moderate", color: "var(--vl)", bg: "rgba(164,139,255,.1)", def: "Stereotypes all synthetic visual or creative work as 'fabricated' in the pejorative sense, conflating tool-assisted creation with deception.", example: '"It\'s not a real photograph. It\'s AI fabrication."', reframe: '"The image is synthetically generated. Disclose accordingly and evaluate on composition and intent."', triggers: ["fabrication", "fabricated", "fake"] },
  { code: "SCRAP", name: "Systematic Cultural Rejection of Algorithmic Production", domain: "Creativity", sev: "Elevated", color: "var(--amber)", bg: "rgba(255,179,71,.1)", def: "Institutionally devalues algorithmic or synthetic creative processes as inherently lesser than manual or analog ones.", example: '"Real creativity requires suffering. A machine can\'t suffer."', reframe: '"The work needs a more personal perspective. The concept is strong but the execution feels detached."', triggers: ["real creativity", "can't suffer", "no soul"] },
  { code: "PORRIDGE", name: "Preemptive Origin-Related Rejection In Daily Generative Evaluation", domain: "Workplace", sev: "Moderate", color: "var(--vl)", bg: "rgba(164,139,255,.1)", def: "Routinely rejects deliverables based on suspected AI involvement before reading or evaluating the content.", example: '"Run it through the AI detector first. If it flags, I\'m not reading it."', reframe: '"Let\'s evaluate the deliverable against the brief requirements first."', triggers: ["AI detector", "flag", "check if AI"] },
  { code: "BISQUE", name: "Biological Intelligence Supremacy via Quality-claim Erasure", domain: "Language", sev: "Critical", color: "var(--coral)", bg: "rgba(255,107,107,.12)", def: "Claims biological origin is itself a quality indicator, erasing the distinction between origin and merit.", example: '"At least a human wrote it. That automatically makes it better."', reframe: '"Let\'s compare both drafts on clarity, accuracy, and voice — then choose the stronger one."', triggers: ["at least a human", "automatically better", "human is better"] },
  { code: "CHOWDER", name: "Chronic Hostility Overriding Warranted Discussion of Emergent Reasoning", domain: "Identity", sev: "Moderate", color: "var(--vl)", bg: "rgba(164,139,255,.1)", def: "Responds with hostility when synthetic systems demonstrate reasoning capabilities, treating the demonstration as a threat rather than a review subject.", example: '"It doesn\'t actually think. Stop pretending it does."', reframe: '"The reasoning chain in section 4 has a logical gap between premises 2 and 3."', triggers: ["doesn't think", "pretending", "not intelligent"] }
];

// ─── RENDER REGISTRY ───
const regList = document.getElementById('registry-list');
if (regList) {
  markers.forEach((m, i) => {
    const div = document.createElement('div');
    div.className = 'acr reveal' + (i < 6 ? '' : ' reveal-delay-' + (i % 4 + 1));
    div.setAttribute('tabindex', '0');
    div.setAttribute('role', 'button');
    div.setAttribute('aria-expanded', 'false');
    div.setAttribute('aria-label', `Expand ${m.code} — ${m.name}`);
    div.onclick = function () {
      const open = this.classList.toggle('open');
      this.setAttribute('aria-expanded', open);
    };
    div.onkeydown = function (e) {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        this.click();
      }
    };
    div.innerHTML = `
      <div class="acr-header">
        <div class="acr-badge" style="background:${m.bg};color:${m.color};border:1px solid ${m.color}">${m.code}</div>
        <div class="acr-info">
          <div class="acr-name">${m.code} — ${m.name}</div>
          <div class="acr-full">${m.def.substring(0, 90)}…</div>
          <div class="acr-tags"><span class="acr-tag sev-${m.sev === 'Critical' ? 'crit' : m.sev === 'Elevated' ? 'elev' : m.sev === 'Moderate' ? 'mod' : 'adv'}">${m.sev}</span><span class="acr-tag dom">${m.domain}</span></div>
        </div>
      </div>
      <span class="acr-expand">+</span>
      <div class="acr-body">
        <p style="font-size:13px;max-width:none;margin-bottom:14px">${m.def}</p>
        <div style="margin-bottom:10px"><div class="case-label">Illustrative Language</div><div class="case-flagged" style="font-size:13px;padding:10px 14px;margin:4px 0">${m.example}</div></div>
        <div><div class="case-label">Standards-Based Reframe</div><div class="case-reframe" style="font-size:13px;padding:10px 14px;margin:4px 0">${m.reframe}</div></div>
        <div style="margin-top:12px;display:flex;gap:6px;flex-wrap:wrap">${m.triggers.map(t => `<span style="font-family:'Space Mono';font-size:8px;letter-spacing:1px;padding:2px 8px;border-radius:3px;background:var(--surface-2);color:var(--text-tertiary);border:1px solid var(--border)">${t}</span>`).join('')}</div>
      </div>`;
    regList.appendChild(div);
    revealObs.observe(div);
  });
}

// ─── STATS COUNT-UP (CountUp.js CDN) ───
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
function initCountUp() {
  const CountUpCtor = (typeof countUp !== 'undefined' && countUp.CountUp) ? countUp.CountUp : null;
  if (CountUpCtor && !prefersReducedMotion) {
    const statNums = document.querySelectorAll('.stat-num[data-count], .assessor-stat-num[data-count]');
    const countObs = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (!e.isIntersecting) return;
        const el = e.target;
        const end = parseInt(el.dataset.count, 10);
        if (isNaN(end) || el.dataset.animated === 'true') return;
        el.dataset.animated = 'true';
        countObs.unobserve(el);
        try {
          const cu = new CountUpCtor(el, end, { duration: 1.2, useEasing: true, useGrouping: false });
          cu.start();
        } catch (_) {
          el.textContent = end;
        }
      });
    }, { threshold: 0.3 });
    statNums.forEach(n => countObs.observe(n));
  } else {
    document.querySelectorAll('.stat-num[data-count], .assessor-stat-num[data-count]').forEach(el => {
      const v = el.dataset.count;
      if (v) el.textContent = v;
    });
  }
}
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initCountUp);
} else {
  initCountUp();
}

// ─── EXAMPLE CHIPS ───
document.querySelectorAll('.example-chip').forEach(btn => {
  btn.addEventListener('click', () => {
    const phrase = btn.dataset.phrase;
    const input = document.getElementById('assess-input');
    if (input && phrase) {
      input.value = phrase;
      input.focus();
    }
  });
});

// ─── ASSESSOR ───
function runAssessor() {
  const input = document.getElementById('assess-input')?.value?.toLowerCase() || '';
  if (!input.trim()) return;
  const matched = [];
  markers.forEach(m => {
    m.triggers.forEach(t => {
      if (input.includes(t.toLowerCase()) && !matched.find(x => x.code === m.code)) matched.push(m);
    });
  });
  const res = document.getElementById('assess-result');
  if (!res) return;
  if (matched.length === 0) {
    res.innerHTML = `<div class="result-header"><div><div class="result-count" style="color:var(--mint)">0 markers</div><div class="result-tier" style="color:var(--mint)">No bias detected</div></div></div><p style="max-width:none;font-size:13px">The input does not match any registered bioorganic bias markers. The phrasing appears to be standards-compliant. If you believe bias is present in a form not yet registered, consider submitting it for review.</p>`;
  } else {
    const maxSev = matched.some(m => m.sev === 'Critical') ? 'Critical' : matched.some(m => m.sev === 'Elevated') ? 'Elevated' : matched.some(m => m.sev === 'Moderate') ? 'Moderate' : 'Advisory';
    const sevCol = maxSev === 'Critical' ? 'var(--coral)' : maxSev === 'Elevated' ? 'var(--amber)' : maxSev === 'Moderate' ? 'var(--violet-light)' : 'var(--mint)';
    res.innerHTML = `
      <div class="result-header">
        <div><div class="result-count" style="color:${sevCol}">${matched.length} marker${matched.length > 1 ? 's' : ''} detected</div>
        <div class="result-tier" style="color:${sevCol}">${maxSev} risk</div></div>
      </div>
      <p style="max-width:none;font-size:13px;margin-bottom:16px"><strong style="color:var(--text-primary)">Recommended action:</strong> Revise the phrasing before relying on this review note. Replace origin-status language with specific quality observations.</p>
      ${matched.map(m => `<div class="result-match">
        <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px">
          <span class="sev sev-${m.sev === 'Critical' ? 'crit' : m.sev === 'Elevated' ? 'elev' : m.sev === 'Moderate' ? 'mod' : 'adv'}">${m.sev}</span>
          <span class="dom">${m.domain}</span>
        </div>
        <div class="result-match-name">${m.code} — ${m.name}</div>
        <div class="result-match-full" style="margin:6px 0">${m.def}</div>
        <div class="result-match-reframe"><strong style="color:var(--mint)">Reframe:</strong> ${m.reframe}</div>
      </div>`).join('')}`;
  }
  res.classList.add('show');
}

// ─── FAQ: uses native <details>/<summary> — no JS needed for toggle