/* ============================================================
   Cognuum — SECTION 2 : ONE CONTINUOUS NARRATIVE
   Chaos → Structure → Understanding → Reality → Expression.
   A tall .frag-track provides scroll distance; .frag-sticky stays
   pinned while the SAME dot-cloud, legend and world organize
   themselves family by family. Nothing is replaced or removed.
   Geometry/motion: assets/js/problem.js
   ============================================================ */

.problem{
  position:relative;
  width:100%;
}

/* tall track = scroll runway for the six states */
.frag-track{
  position:relative;
  height:680vh;
}

/* pinned stage */
.frag-sticky{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  background:var(--surface-frag);
}

/* the one continuous visualization */
#frag-map{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:0;
}

/* scrim: keeps the right-hand copy legible over the cloud */
.frag-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:var(--scrim-frag);
}

/* ---------------- floating orientation nav (left) ---------------- */
.frag-nav{
  position:absolute;
  left:max(48px, 4.2vw);
  top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:24px;
  z-index:6;
  opacity:0;                      /* fades in once organizing begins */
  transition:opacity .8s ease;
}
.frag-nav.is-shown{ opacity:1; }
/* 00 Fragmentation is hidden from view but kept in the DOM so nav logic + active-state tracking stay intact */
.fn-item[data-stage="0"]{ display:none; }
.fn-item{
  display:flex; align-items:baseline; gap:13px;
  text-decoration:none; cursor:pointer;
  color:var(--ink-nav);
  opacity:0.4;
  transition:opacity .4s ease;
  position:relative;
}
.fn-item:hover{ opacity:0.85; }
.fn-item::before{
  content:""; position:absolute; left:-16px; top:50%;
  width:7px; height:1px; background:currentColor;
  transform:translateY(-50%) scaleX(0); transform-origin:left;
  opacity:0; transition:transform .5s ease, opacity .5s ease;
}
.fn-n{ font-size:11px; letter-spacing:0.22em; font-weight:500; opacity:0.7; }
.fn-l{ font-size:13.5px; letter-spacing:0.03em; font-weight:400; }
.fn-item.is-active{ opacity:1; }
.fn-item.is-active::before{ transform:translateY(-50%) scaleX(1); opacity:0.8; }
.fn-item.is-done{ opacity:0.5; }
/* active nav tint follows the family colour */
.fn-item[data-stage="1"].is-active{ color:var(--cyan); }
.fn-item[data-stage="2"].is-active{ color:var(--magenta); }
.fn-item[data-stage="3"].is-active{ color:var(--ink-nav); }
.fn-item[data-stage="4"].is-active{ color:var(--amber); }
.fn-item[data-stage="5"].is-active{ color:var(--ink-nav); }

/* swipe arrows flanking the number nav — mobile only (hidden on desktop) */
.fn-arrow{ display:none; }
/* mobile-only line break helper */
.m-only{ display:none; }

/* ---------------- evolving copy (right) ---------------- */
.frag-copy{
  position:absolute;
  top:0; bottom:0;
  right:max(56px, 6vw);
  width:min(46%, 540px);
  z-index:4;
}
/* very subtle frosted backing — improves legibility, no visible box/border */
.frag-copy::before{
  content:"";
  position:absolute;
  inset:-12% -16%;
  z-index:-1;
  pointer-events:none;
  background:var(--copy-backing-frag);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  -webkit-mask:radial-gradient(115% 78% at 58% 50%, #000 30%, rgba(0,0,0,0) 74%);
  mask:radial-gradient(115% 78% at 58% 50%, #000 30%, rgba(0,0,0,0) 74%);
}
.fc-state{
  position:absolute; top:50%; left:0; right:0;
  transform:translateY(calc(-50% + 18px));
  opacity:0; pointer-events:none;
  transition:opacity .7s ease, transform .7s ease;
}
.fc-state.is-active{ transform:translateY(-50%); opacity:1; }

.fc-eyebrow{
  font-size:26px; font-weight:500;
  letter-spacing:0.2em; text-transform:uppercase;
  margin-bottom:22px;
}
.fc-eyebrow.fam-cyan{ color:var(--cyan); }
.fc-eyebrow.fam-pink{ color:var(--magenta); }
.fc-eyebrow.fam-white{ color:var(--ink-fc-white); }
.fc-eyebrow.fam-amber{ color:var(--amber); }
/* Cognuum brand eyebrow — luminous, neutral; the conclusion, not a colour family */
.fc-eyebrow.fc-brand{
  color:var(--ink-fc-brand);
  letter-spacing:0.26em;
}

/* ---- 05 Cognuum: final conclusion + CTA (revealed once the C has formed) ---- */
.fc-final{
  margin-top:38px;
  padding-top:30px;
  border-top:1px solid var(--ink-fc-final-border);
  opacity:0;
  transform:translateY(14px);
  transition:opacity 1.1s ease .15s, transform 1.1s ease .15s;
  pointer-events:none;
}
.fc-cognuum.is-formed .fc-final{ opacity:1; transform:none; pointer-events:auto; }
.fc-final-line{
  font-size:27px; font-weight:400; letter-spacing:-0.014em; color:var(--ink-emphasis);
}
.fc-final-dot{ color:var(--magenta); }
.fc-final-sub{
  margin-top:12px; font-size:16px; line-height:1.55; color:var(--ink-fc-final-sub); letter-spacing:0.01em;
}
.fc-cta.fc-cta{ margin-top:26px; }
/* 05: secondary diagnostic link beneath Request Access — helpful, not promotional */
.fc-assess{
  display:block; margin-top:24px; cursor:pointer; text-decoration:none;
  font-size:13.5px; letter-spacing:0.03em; color:var(--text-disabled);
  transition:color .25s ease;
}
.fc-assess:hover{ color:var(--text-secondary); }

/* lens CTA (Meet Atlas →) — same system as Request Access; fades in with the stage */
.lens-cta{
  margin-top:30px;
  opacity:0; transform:translateY(8px);
  transition:opacity .9s ease .35s, transform .9s ease .35s, border-color .25s ease, color .25s ease;
}
.fc-state.is-active .lens-cta{ opacity:1; transform:none; pointer-events:auto; }
.lens-cta .lc-arrow{ margin-left:9px; opacity:0.7; transition:transform .25s ease; display:inline-block; }
.lens-cta:hover .lc-arrow{ transform:translateX(3px); opacity:1; }

/* ---------------- LENS EXPANSION — unfolds in place, no container ----------------
   No card. No panel. No modal. No shadow. No floating window. The current
   section expands into the lens: a full-bleed layer where the homepage stays
   faintly visible beneath and the content unfolds upward in place. */
.lens-expand{
  position:fixed; top:var(--lx-top,72px); left:0; right:0; bottom:0; z-index:90; /* below the topbar (z:100) — covers everything BUT the top bar */
  visibility:hidden; pointer-events:none;
}
.lens-expand.open{ visibility:visible; pointer-events:auto; }

/* frost is applied to the RIGHT only (explanation); the LEFT stays clear so the
   live Section-2 map shows through — you're looking THROUGH the lens, not at a panel.
   A feathered mask blends crisp-left → frosted-right with no hard separator. */
/* frost covers columns 2+3 (navigation + proof); column 1 (the lens identity)
   stays clearer so the receded live map shows through — still looking THROUGH
   the lens. Feathered mask = no hard seam between the columns. */
.lx-dim{
  position:absolute; inset:0;
  background:var(--lx-dim);
  -webkit-backdrop-filter:blur(48px) saturate(122%);
  backdrop-filter:blur(48px) saturate(122%);
  -webkit-mask-image:linear-gradient(to right, transparent 0%, transparent 26%, #000 40%, #000 100%);
  mask-image:linear-gradient(to right, transparent 0%, transparent 26%, #000 40%, #000 100%);
  opacity:0; transition:opacity .55s ease;
}
.lens-expand.is-revealed .lx-dim{ opacity:1; }

/* CLOSING — fast, uniform fade-out (decoupled from the slow, staggered open) */
.lens-expand.is-closing .lx-dim,
.lens-expand.is-closing .lx-name,
.lens-expand.is-closing .lx-title,
.lens-expand.is-closing .lx-lead,
.lens-expand.is-closing .lx-meta,
.lens-expand.is-closing #lx-cta,
.lens-expand.is-closing .lx-nav,
.lens-expand.is-closing .lx-proof-in,
.lens-expand.is-closing .lx-link,
.lens-expand.is-closing .lx-switch,
.lens-expand.is-closing .lx-close{
  transition-duration:.26s !important;
  transition-delay:0s !important;
}

.lx-stage{ position:absolute; inset:0; overflow:hidden; }

/* connection line — links Col1 tagline → active nav item → Col3 title.
   Sits behind text, low opacity, accent-coloured, with small node dots. */
.lx-link{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0; overflow:visible;
  opacity:0; transition:opacity .5s ease;
}
.lens-expand.is-revealed .lx-link{ opacity:1; }
.lx-link-path{
  fill:none; stroke:var(--lens-accent,#08ccfd); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  opacity:0.6;
  filter:drop-shadow(0 0 8px var(--lens-accent,#08ccfd));
}
.lx-link-dot{
  fill:var(--lens-accent,#08ccfd);
  filter:drop-shadow(0 0 5px var(--lens-accent,#08ccfd));
  transition:cx .45s cubic-bezier(.22,.61,.18,1), cy .45s cubic-bezier(.22,.61,.18,1);
}
@media (max-width:900px){ .lx-link{ display:none; } }

/* THREE COLUMNS — 35% lens · 15% navigation · 50% proof. No container, no card. */
.lx-grid{
  position:absolute; inset:0;
  display:grid; grid-template-columns:35% 15% 50%;
}

/* ---- COLUMN 1 — THE LENS (persistent meaning) ---- */
.lx-lens{ position:relative; display:flex; align-items:flex-start; min-width:0; }
.lx-lens::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--lx-lens-scrim);
  opacity:0; transition:opacity .7s ease;
}
.lens-expand.is-revealed .lx-lens::before{ opacity:1; }
.lx-lens-in{
  position:relative; z-index:1; width:100%;
  padding:clamp(48px,8vh,96px) clamp(34px,2.6vw,52px) clamp(40px,6vh,90px) clamp(40px,5vw,84px);
}
/* content EMERGES — fades + resolves out of blur; never slides. Name + title
   anchor first; the rest emerges around them. */
.lx-name, .lx-title, .lx-lead, .lx-meta, #lx-cta{
  opacity:0; transform:translateY(7px); filter:blur(7px);
  transition:opacity .6s ease, transform .7s cubic-bezier(.22,.61,.18,1), filter .6s ease;
}
.lens-expand.is-revealed .lx-name{ opacity:1; transform:none; filter:none; transition-delay:.02s; }
.lens-expand.is-revealed .lx-title{ opacity:1; transform:none; filter:none; transition-delay:.06s; }
.lens-expand.is-revealed .lx-lead{ opacity:1; transform:none; filter:none; transition-delay:.2s; }
.lens-expand.is-revealed .lx-meta{ opacity:1; transform:none; filter:none; transition-delay:.28s; }
.lens-expand.is-revealed #lx-cta{ opacity:1; transform:none; filter:none; transition-delay:.36s; }

.lx-name{
  font-size:13px; font-weight:600; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--lens-accent,#cdd2da); margin-bottom:22px;
}
.lx-title{
  font-size:clamp(34px,3.4vw,52px); line-height:1.04; font-weight:400; letter-spacing:-0.024em;
  color:var(--lx-heading); margin-bottom:24px; text-wrap:balance;
}
.lx-lead{
  font-size:clamp(16px,1.3vw,19px); line-height:1.5; color:var(--lx-lead); letter-spacing:-0.003em;
}
.lx-meta{
  margin-top:24px; font-size:15px; line-height:1.6; color:var(--lx-meta); letter-spacing:0.01em;
}
.lx-meta .muted{ color:var(--lx-meta-muted); }
#lx-cta{ margin-top:34px; }

/* ---- COLUMN 2 — LENS NAVIGATION (no chrome) ---- */
.lx-nav{
  position:relative; z-index:1;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:clamp(20px,3vh,34px);
  padding:clamp(40px,6vh,90px) clamp(12px,1.4vw,26px);
  opacity:0; transform:translateY(8px); filter:blur(6px);
  transition:opacity .6s ease .34s, transform .7s cubic-bezier(.22,.61,.18,1) .34s, filter .6s ease .34s;
}
.lens-expand.is-revealed .lx-nav{ opacity:1; transform:none; filter:none; }
.lx-nav-item{
  display:flex; align-items:baseline; gap:11px; cursor:pointer; text-decoration:none;
  opacity:0.4; transition:opacity .35s ease, color .35s ease;
}
.lx-nav-item:hover{ opacity:0.7; }
.lx-nav-k{
  font-size:12px; font-weight:500; letter-spacing:0.14em; color:var(--text-secondary);
  transition:color .35s ease;
}
.lx-nav-l{
  font-size:clamp(15px,1.05vw,17px); font-weight:400; letter-spacing:-0.006em; color:var(--lx-nav-ink);
  line-height:1.2; transition:font-size .35s ease, color .35s ease;
}
.lx-nav-item.is-active{ opacity:1; }
.lx-nav-item.is-active .lx-nav-k{ color:var(--lens-accent,#cdd2da); }
.lx-nav-item.is-active .lx-nav-l{ color:var(--lens-accent,#cdd2da); font-size:clamp(16px,1.2vw,19px); }

/* ---- COLUMN 3 — PROOF (changes with navigation) ---- */
.lx-proof{ position:relative; min-width:0; overflow:hidden; }
.lx-proof-in{
  position:absolute; inset:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:clamp(48px,8vh,96px) clamp(40px,4vw,78px) clamp(48px,8vh,96px) clamp(34px,3vw,56px);
  opacity:0; transform:translateY(10px); filter:blur(6px);
  transition:opacity .6s ease .42s, transform .7s cubic-bezier(.22,.61,.18,1) .42s, filter .6s ease .42s;
}
.lens-expand.is-revealed .lx-proof-in{ opacity:1; transform:none; filter:none; }

.lx-panel{ display:none; }
.lx-panel.is-active{ display:block; animation:lx-panel-in .55s cubic-bezier(.22,.61,.18,1) both; }
@keyframes lx-panel-in{ from{ opacity:0; transform:translateY(12px); filter:blur(5px); } to{ opacity:1; transform:none; filter:none; } }
.lx-panel-k{
  font-size:12px; font-weight:600; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--lens-accent,#cdd2da); margin-bottom:18px;
}
.lx-panel-h{
  font-size:clamp(26px,2.5vw,36px); line-height:1.12; font-weight:400; letter-spacing:-0.018em;
  color:var(--lx-heading); margin-bottom:14px; text-wrap:balance;
}
.lx-accentword{ color:var(--lens-accent,#cdd2da); }
.lx-panel-lead{
  font-size:clamp(15px,1.2vw,18px); line-height:1.5; color:var(--lx-lead); margin-bottom:clamp(30px,4vh,48px);
  max-width:42em;
}

/* Overview — conceptual architecture */
.lx-arch{ display:flex; align-items:center; gap:clamp(14px,2vw,30px); flex-wrap:wrap; }
.lx-arch-col{ display:flex; flex-direction:column; gap:12px; }
.lx-arch-cap{
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--text-disabled); margin-bottom:4px;
}
.lx-chip{
  display:inline-flex; align-items:center; padding:11px 18px;
  border:1px solid var(--lx-chip-border); border-radius:3px;
  font-size:14px; color:var(--lx-chip-ink); background:var(--lx-chip-bg); white-space:nowrap;
}
.lx-chip-out{ border-color:var(--lens-accent,var(--border-accent)); color:var(--lens-accent,#cdd2da); }
.lx-arch-core{
  display:flex; align-items:center; justify-content:center; padding:22px 26px;
  border:1px solid var(--lens-accent,var(--border-accent)); border-radius:4px;
  color:var(--lx-heading); font-size:clamp(16px,1.4vw,20px); letter-spacing:0.02em;
  box-shadow:0 0 38px -10px var(--lens-accent,transparent);
}
.lx-arch-flow{ flex:0 0 auto; width:clamp(20px,3vw,46px); height:1px; background:linear-gradient(90deg, var(--lens-accent,#888), transparent); opacity:0.6; }

/* How It Works — process steps */
.lx-flow{ list-style:none; display:flex; flex-direction:column; gap:0; }
.lx-step{ display:flex; gap:22px; padding:clamp(18px,2.4vh,26px) 0; border-bottom:1px solid var(--lx-step-border); }
.lx-step:last-child{ border-bottom:0; }
.lx-step-n{ flex:0 0 auto; font-size:12px; font-weight:500; letter-spacing:0.14em; color:var(--lens-accent,#cdd2da); padding-top:4px; min-width:28px; }
.lx-step-h{ font-size:clamp(18px,1.6vw,22px); font-weight:400; letter-spacing:-0.01em; color:var(--lx-step-h); margin-bottom:6px; }
.lx-step-p{ font-size:15px; line-height:1.5; color:var(--lx-step-p); }

/* Inside The Lens — product screenshots (user-fillable) */
.lx-shots{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.6vw,22px); }
.lx-shot{ width:100%; aspect-ratio:4/3; border:1px solid var(--lx-shot-border); background:var(--lx-shot-bg); }
.lx-shot-wide{ grid-column:1 / -1; aspect-ratio:16/8; }
.lx-shot-tall{ aspect-ratio:3/4; }

/* Example Workflow — before / after */
.lx-ba{ display:flex; align-items:center; gap:clamp(14px,2vw,30px); }
.lx-ba-col{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:10px; }
.lx-ba-cap{ font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--text-disabled); }
.lx-ba-arrow{ flex:0 0 auto; color:var(--lens-accent,#cdd2da); font-size:22px; opacity:0.8; }

.lx-close{
  position:absolute; top:clamp(18px,2.4vh,30px); right:clamp(20px,2.6vw,40px); z-index:5;
  width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  background:var(--lx-close-bg); border:1px solid var(--lx-close-border); border-radius:50%;
  color:var(--lx-close-ink); cursor:pointer; opacity:0; transform:scale(.85);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:border-color .25s ease, color .25s ease, background .25s ease, opacity .45s ease .35s, transform .45s ease .35s;
}
.lens-expand.is-revealed .lx-close{ opacity:1; transform:none; }
.lx-close:hover{ border-color:var(--lx-close-border-hover); color:var(--lx-close-ink-hover); background:var(--lx-close-bg-hover); }
.lx-close svg{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }

/* ---- perspective switcher (top centre) — editorial, no container ---- */
.lx-switch{
  position:absolute; bottom:clamp(24px,3.4vh,46px); left:50%; transform:translateX(-50%); z-index:5;
  display:flex; align-items:center; gap:clamp(10px,1vw,16px);
  opacity:0; transition:opacity .6s ease .3s;
}
.lens-expand.is-revealed .lx-switch{ opacity:1; }
.lx-switch-item{
  font-size:12px; font-weight:500; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--text-secondary); opacity:0.5; cursor:pointer; text-decoration:none;
  transition:opacity .3s ease, color .3s ease;
}
.lx-switch-item:hover{ opacity:0.85; }
.lx-switch-item.is-active{ opacity:1; color:var(--lens-accent,#cdd2da); }
.lx-switch-sep{ color:var(--text-disabled); font-size:11px; opacity:0.6; }

/* perspective shift — fade the lens copy + active proof out, swap, fade back */
@keyframes lx-fade-out{ to{ opacity:0; } }
@keyframes lx-fade-in{ from{ opacity:0; } to{ opacity:1; } }
.lens-expand.lx-out .lx-lens-in,
.lens-expand.lx-out .lx-panel.is-active{ animation:lx-fade-out .22s ease forwards; }
.lens-expand.lx-in .lx-lens-in,
.lens-expand.lx-in .lx-panel.is-active{ animation:lx-fade-in .32s ease both; }

/* tablet / mobile — stack into one scrolling column */
@media (max-width:900px){
  .lx-grid{ display:block; position:absolute; inset:0; overflow-y:auto; }
  .lx-lens{ display:block; }
  .lx-lens::before{ display:none; }
  .lx-lens-in{ padding:clamp(40px,7vh,80px) clamp(24px,7vw,56px) clamp(24px,4vh,36px); }
  .lx-nav{ flex-direction:row; flex-wrap:wrap; justify-content:flex-start; gap:18px 28px;
    padding:8px clamp(24px,7vw,56px) clamp(20px,3vh,30px); }
  .lx-proof{ overflow:visible; }
  .lx-proof-in{ position:relative; inset:auto; padding:clamp(24px,4vh,40px) clamp(24px,7vw,56px) clamp(48px,8vh,90px); }
  .lx-shots{ grid-template-columns:1fr; }
  /* keep the perspective switcher pinned to the viewport bottom (not the tall scroll) */
  .lx-switch{ position:fixed; bottom:14px; padding:8px 14px; border-radius:30px;
    background:rgba(10,11,14,0.7); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
  body.light .lx-switch{ background:rgba(244,242,238,0.8); }
}

/* while a lens is open: the section's own copy/legend/nav step aside, and the
   living map RECEDES (dimmed, lower-contrast) to ~20% support — still alive, but
   content dominates. Motion continues uninterrupted underneath. */
.frag-sticky.lens-recede #frag-map{ opacity:0.4; filter:saturate(0.82); transition:opacity .7s ease, filter .7s ease; }
.frag-sticky.lens-recede .frag-copy,
.frag-sticky.lens-recede .frag-streams,
.frag-sticky.lens-recede .frag-ticker,
.frag-sticky.lens-recede .frag-nav{ opacity:0; transition:opacity .5s ease; pointer-events:none; }

.fc-main{
  font-size:50px;
  line-height:1.06;
  font-weight:400;
  letter-spacing:-0.022em;
  margin-bottom:24px;
  text-wrap:balance;
}
.fc-main.grad{
  background:var(--gradient-fc-main);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.fc-sub{
  font-size:23px;
  line-height:1.34;
  font-weight:400;
  letter-spacing:-0.004em;
  color:var(--ink-fc-sub);
}
.fc-sub.big{
  font-size:40px; line-height:1.1; letter-spacing:-0.016em; color:var(--ink-fc-sub-big);
}
.fc-sub .em{ color:var(--ink-emphasis); }
.fc-supt{
  margin-top:26px;
  font-size:16px;
  line-height:1.55;
  font-weight:400;
  letter-spacing:0.01em;
  color:var(--ink-fc-supt);
}
.fc-supt .muted{ color:var(--ink-fc-supt-muted); }

/* ---------------- legend (reorganizes, never replaced) ---------------- */
.frag-streams{
  position:absolute;
  left:0; right:0;
  bottom:clamp(22px, 4.2vh, 46px);
  z-index:4;
  pointer-events:none;
  display:flex; flex-wrap:wrap;
  justify-content:center; align-items:center;
  gap:14px 24px;
  max-width:1180px;
  margin:0 auto;
  padding:0 56px;
}
.src{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13.5px; font-weight:400; letter-spacing:0.04em;
  white-space:nowrap;
  color:var(--ink-src);
  /* FLIP-driven reflow uses transform; keep it smooth */
  transition:transform .9s cubic-bezier(.4,0,.1,1), color .6s ease, opacity .6s ease;
  will-change:transform;
}
.src::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--famc); box-shadow:0 0 7px var(--famc);
  flex:0 0 auto; transition:width .5s ease, height .5s ease, opacity .55s ease, box-shadow .55s ease;
}
.src.fam-cyan{  --famc:var(--cyan); }
.src.fam-pink{  --famc:var(--magenta); }
.src.fam-white{ --famc:var(--famc-white); }
.src.fam-amber{ --famc:var(--amber); }
/* active section → fully lit; every other legend dims out (dot + label) */
.src{ transition:color .55s ease, opacity .55s ease; }
.src.is-on{ color:var(--ink-src-on); opacity:1; }
.src.is-on::before{ width:7px; height:7px; opacity:1; }
.src.is-off{ color:var(--ink-src-off); opacity:0.4; }
.src.is-off::before{ opacity:0.28; box-shadow:none; }
/* row-break: forces an organized family onto its own line (active only when resolved) */
.src-break{ flex-basis:100%; width:100%; height:0; margin:0; padding:0; display:none; }
.src-break.on{ display:block; }
/* legend recedes at the Cognuum stage — focus rests on the formed C */
.frag-streams.is-dim{ opacity:0.16; transition:opacity 1s ease; }

/* ---------------- keep-scrolling hint (opening state only) ---------------- */
.frag-hint{
  position:absolute; left:50%; bottom:118px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:7px;
  color:var(--ink-hint);
  z-index:5;
  transition:opacity .6s ease;
}
.frag-hint span{ font-size:11px; letter-spacing:0.32em; text-transform:uppercase; }
.frag-hint svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6;
  animation:hint-bob 2.4s ease-in-out infinite; }
@keyframes hint-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }
.frag-hint.is-hidden{ opacity:0; }
@media (prefers-reduced-motion: reduce){ .frag-hint svg{ animation:none; } }

/* mobile legend ticker — hidden on desktop; marquee keyframes (global) */
.frag-ticker{ display:none; }
@keyframes ftk-left{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes ftk-right{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@media (prefers-reduced-motion: reduce){ .ftk-track{ animation:none !important; } }

/* ===================== TABLET ===================== */
@media (max-width:1199px){
  .frag-nav{ left:32px; gap:20px; }
  .fn-l{ font-size:12.5px; }
  .frag-copy{ right:40px; width:min(50%, 460px); }
  .fc-main{ font-size:40px; }
  .fc-sub.big{ font-size:32px; }
  .fc-sub{ font-size:21px; }
  .frag-streams{ padding:0 40px; gap:12px 20px; }
  .src{ font-size:13px; }
}

/* ===================== MOBILE ===================== */
@media (max-width:767px){
  .frag-track{ height:520vh; }
  /* mobile-only line breaks become active */
  .m-only{ display:inline; }
  /* nav becomes a slim top ribbon of numbers, flanked by swipe arrows */
  .frag-nav{
    left:0; right:0; top:78px; transform:none;
    flex-direction:row; justify-content:center; align-items:center; gap:14px;
  }
  .fn-item::before{ display:none; }
  .fn-l{ display:none; }
  .fn-n{ font-size:12px; letter-spacing:0.18em; }
  .fn-arrow{
    display:flex; align-items:center; justify-content:center;
    width:30px; height:30px; padding:0; background:none; border:0; cursor:pointer;
    color:var(--ink-nav); opacity:0.5; transition:opacity .3s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .fn-arrow:active{ opacity:1; }
  .fn-arrow svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

  .frag-copy{
    right:auto; left:0; width:100%;
    top:120px; bottom:184px;            /* clear the legend ticker + ~50px breathing */
    padding:0 clamp(20px, 6vw, 40px);
  }
  .frag-copy::before{ display:none; }
  /* mobile: the centred globe is the focal element; the scrim overlay keeps copy legible */
  #frag-map{ opacity:0.62; }
  /* TEXT (top) → map fills the reserved gap (JS fits it exactly) → CTA below */
  .fc-state{
    top:0; bottom:0; left:0; right:0;
    display:flex; flex-direction:column; align-items:center;
    justify-content:flex-start; text-align:center;
    padding-top:8px; transform:translateY(18px);
  }
  .fc-state.is-active{ transform:none; }
  .fc-state .lens-cta,
  .fc-state .fc-final{ margin-top:auto; }   /* CTA pinned to the bottom (just above the legend) */
  /* nav ribbon breathes; ATLAS sits tight to the headline */
  .fc-eyebrow{ margin-bottom:8px; font-size:20px; }
  .fc-main{ font-size:30px; margin-bottom:18px; }
  .fc-sub.big{ font-size:26px; }
  .fc-sub{ font-size:18px; }
  .fc-supt{ font-size:14px; margin-top:18px; }
  /* 05 Cognuum: clean screen — hide the legend so nothing overlays the C */
  .frag-streams.is-dim{ display:none; }
  /* 05: legend is gone, so let the conclusion block drop near the bottom —
     keeps the (full-size) C clear above it; sits just above the icon dock */
  .frag-sticky.is-cognuum .frag-copy{ bottom:72px; }
  /* 05: no divider above the final sign-off on mobile */
  .fc-final{ border-top:0; padding-top:0; margin-top:26px; }
  /* mobile: no scroll hint (swipe/scroll is intuitive; keep the screen clean) */
  .frag-hint{ display:none; }

  /* mobile legend = one marquee line per family (replaces the wrapped legend) */
  .frag-streams{ display:none; }
  .frag-ticker{
    display:flex; flex-direction:column; gap:11px; pointer-events:none;
    position:absolute; left:0; right:0; bottom:80px; z-index:4;
    -webkit-mask:linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
    mask:linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
  }
  .frag-ticker.is-hidden{ display:none; }
  .ftk-row{ overflow:hidden; white-space:nowrap; transition:opacity .55s ease; }
  /* MOBILE: once a section is active, show ONLY its family's line — the other
     three rows collapse so they don't waste vertical space. */
  .frag-ticker.has-active .ftk-row:not(.is-active-fam){ display:none; }
  .ftk-track{
    display:inline-flex; gap:30px; padding-left:30px; will-change:transform;
    animation-timing-function:linear; animation-iteration-count:infinite; animation-play-state:paused;
  }
  .ftk-row.is-on .ftk-track{ animation-play-state:running; }
  .ftk-item{
    display:inline-flex; align-items:center; gap:8px; font-size:13.5px; letter-spacing:0.04em;
    white-space:nowrap; color:var(--ink-src-off); transition:color .6s ease;
  }
  .ftk-row.is-on .ftk-item{ color:var(--ink-src-on); }
  .ftk-dot{ width:6px; height:6px; border-radius:50%; background:var(--famc); box-shadow:0 0 7px var(--famc); flex:0 0 auto; }
  .ftk-cyan{ --famc:var(--cyan); }
  .ftk-pink{ --famc:var(--magenta); }
  .ftk-white{ --famc:var(--famc-white); }
  .ftk-amber{ --famc:var(--amber); }

  .frag-scrim{
    background:var(--scrim-frag-mobile);
  }
  .frag-streams{ padding:0 24px; gap:10px 16px; bottom:24px; }
  .src{ font-size:12px; gap:7px; }
  .frag-hint{ bottom:92px; }

  /* ---- lens overlay: dock the perspective switcher in a tight full-width bar
     directly above the bottom icon dock (no gap), and give the scrolling lens
     content room to clear both bars ---- */
  .lx-switch{
    position:fixed; left:0; right:0; bottom:58px; transform:none;
    width:100%; justify-content:center; gap:clamp(12px,4vw,22px);
    padding:13px 16px; border-radius:0;
    background:linear-gradient(180deg, rgba(10,11,14,0) 0%, rgba(10,11,14,0.92) 38%, rgba(10,11,14,0.98) 100%);
    border-top:1px solid rgba(255,255,255,0.07);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  }
  body.light .lx-switch{
    background:linear-gradient(180deg, rgba(244,242,238,0) 0%, rgba(244,242,238,0.92) 38%, rgba(244,242,238,0.98) 100%);
    border-top-color:rgba(0,0,0,0.08);
  }
  /* clear the docked switch (~50px) + icon dock (58px) */
  .lx-proof-in{ padding-bottom:132px; }

  /* ---- 01 Overview diagram → vertical: [3 inputs] ↓ [core] ↓ [output] ---- */
  .lx-arch{ flex-direction:column; align-items:center; gap:0; }
  .lx-arch-col{ flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; width:100%; }
  .lx-arch-cap{ flex-basis:100%; text-align:center; margin-bottom:2px; }
  .lx-arch-core{ width:auto; }
  .lx-arch-flow{
    width:1px; height:26px; margin:10px 0;
    background:linear-gradient(180deg, transparent, var(--lens-accent,#888));
    opacity:0.8; position:relative;
  }
  .lx-arch-flow::after{                       /* downward arrowhead */
    content:''; position:absolute; left:50%; bottom:0; width:6px; height:6px;
    border-right:1px solid var(--lens-accent,#888); border-bottom:1px solid var(--lens-accent,#888);
    transform:translate(-50%,1px) rotate(45deg);
  }

  /* ---- 04 Example Workflow → vertical: Before above, After below ---- */
  .lx-ba{ flex-direction:column; align-items:stretch; gap:0; }
  .lx-ba-col{ width:100%; }
  .lx-ba-arrow{ align-self:center; transform:rotate(90deg); margin:12px 0; }
}