/* IVMS — C-level page. Loaded only on /ivms/, on top of site.css. Same tokens
   (--bg, --paper, --muted, --accent, --line), same panel colour (#0a1423), 6px
   radii and uppercase kickers as /sqe-china/ and /ledvision-pro/. Its own
   identity is light as pixels: warm points (--light, the colour of the IVMS
   planet) on a dark field, and rules that measure distance and scale.
   Motion: sections get .is-seen from assets/ivms.js when they scroll into view
   and run one short pass that explains a relationship (the chain lighting from
   place to presence, stages in order, shapes growing on a common ruler, light
   descending the method). The distance slider is a user control. Static with
   reduced motion, without JS, or while the portal's motion toggle is paused
   (html.motion-paused). */
.ivms { --panel: #0a1423; --light: #ffe2b8; --soft: #ffd2a3; }
.ivms .detail-copy { max-width: 1240px; }
.ivms .detail-copy ul, .ivms .detail-copy ol { list-style: none; padding: 0; margin: 0; }
.ivms .detail-copy li + li, .ivms .detail-copy p + p { margin-top: 0; }
.ivms .detail-copy .iv-section + .iv-section { margin-top: clamp(3.6rem, 7vw, 6.5rem); }
.ivms .detail-copy h3 { color: var(--paper); font-size: 1.05rem; line-height: 1.25; }
.iv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.iv-head { max-width: 64ch; }
.ivms .detail-copy .iv-head h2 { margin: .4em 0 0; font-size: clamp(1.6rem, 2.9vw, 2.45rem); line-height: 1.12; letter-spacing: -.035em; color: var(--paper); }
.ivms .detail-copy .iv-lede { margin-top: 1rem; font-size: 1.08rem; line-height: 1.6; }
.ivms .detail-copy .iv-note { max-width: 66ch; margin-top: 1.6rem; padding-left: .9rem; border-left: 2px solid var(--accent); }
.ivms .detail-lede strong { color: var(--paper); }
.ivms .detail-copy .iv-example { margin-top: .7rem; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }

/* B. Place → presence: six stations on one rule; a light crosses it once. */
.iv-bands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 2.2rem; }
.iv-bands span { padding-top: .5rem; border-top: 3px solid var(--line); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.iv-bands span:last-child { border-top-color: var(--accent); color: var(--accent); }
.ivms .detail-copy .iv-chain { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; margin-top: 1.6rem; padding-top: 26px; }
.iv-chain::before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; height: 1px; background: var(--line); }
.iv-chain::after { content: ""; position: absolute; top: 4px; left: 5px; width: 16%; height: 3px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--accent) 60%, #fff4e6); opacity: 0; }
.iv-chain-item { position: relative; }
.iv-chain-dot { position: absolute; top: -26px; left: 0; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--muted); background: var(--bg); }
.iv-chain-item.is-entry .iv-chain-dot, .iv-chain-item:last-child .iv-chain-dot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px #ffa37d26; }
.ivms .detail-copy .iv-chain-item h3 { font-size: clamp(.95rem, 1.5vw, 1.3rem); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ivms .detail-copy .iv-chain-item p { margin-top: .45rem; font-size: .92rem; line-height: 1.5; }

/* C. Eight layers of one system. */
.ivms .detail-copy .iv-layers { display: grid; grid-auto-flow: column; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); gap: 10px 14px; margin-top: 2.2rem; }
.iv-layer { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); column-gap: .6rem; align-content: start; padding: 1rem 1.2rem; border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 6px; background: var(--panel); }
.iv-layer.is-led { border-left-color: var(--accent); }
.iv-layer-n { grid-row: 1 / 3; color: var(--accent); font-size: .85rem; font-weight: 700; letter-spacing: .08em; padding-top: .2em; }
.ivms .detail-copy .iv-layer h3 { font-size: 1.08rem; text-transform: uppercase; letter-spacing: .05em; }
.ivms .detail-copy .iv-layer p { margin-top: .25rem; font-size: .93rem; line-height: 1.5; }

/* D. Lifecycle: five stages, visually dominant. */
.ivms .detail-copy .iv-stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 22px; margin-top: 2.4rem; }
.iv-stage { position: relative; padding-top: 1.1rem; border-top: 2px solid var(--line); }
.iv-stage::before { content: ""; position: absolute; inset: -2px auto auto 0; width: 100%; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.iv-stage-n { display: block; font-size: clamp(2.8rem, 5.4vw, 4.8rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.2px var(--accent); }
.ivms .detail-copy .iv-stage h3 { min-height: 2.4em; margin-top: .8rem; font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.ivms .detail-copy .iv-stage .iv-stage-h { margin-top: .5rem; font-size: 1.1rem; line-height: 1.3; color: var(--paper); letter-spacing: -.01em; }
.ivms .detail-copy .iv-stage p:not(.iv-stage-h) { margin-top: .55rem; font-size: .92rem; line-height: 1.5; }

/* E. Four contexts. */
.ivms .detail-copy .iv-contexts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 2.2rem; }
.iv-context { display: flex; flex-direction: column; padding: 1.2rem 1.25rem 1.3rem; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.iv-glyph { width: 100%; max-width: 150px; height: auto; margin-bottom: 1rem; fill: none; stroke: var(--muted); stroke-width: 1.4; }
.iv-glyph circle { fill: var(--muted); stroke: none; }
.iv-glyph .iv-lit { fill: #ffe2b826; stroke: var(--light); }
.iv-glyph .iv-dash { stroke: var(--accent); stroke-dasharray: 3 3; }
.ivms .detail-copy .iv-context h3 { min-height: 2.5em; }
.ivms .detail-copy .iv-priority { margin-top: .9rem; font-size: 1.4rem; line-height: 1.15; letter-spacing: -.03em; color: var(--paper); }
.iv-priority span { display: block; margin-bottom: .35rem; font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.ivms .detail-copy .iv-context p:not(.iv-priority):not(.iv-example) { margin-top: .7rem; font-size: .93rem; line-height: 1.55; }
.iv-context .iv-example { margin-top: auto !important; padding-top: 1rem; }

/* F. Pitch as a response: the same 24 mm window; distance fuses the points. */
.iv-ctl { display: flex; align-items: center; gap: .9rem; margin-top: 1.8rem; color: var(--muted); font-size: .85rem; }
.iv-ctl[hidden] { display: none; }
.iv-ctl label { color: var(--paper); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .72rem; }
.iv-ctl input { flex: 0 1 320px; accent-color: var(--accent); }
.ivms .detail-copy .iv-wins { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 1.4rem; }
.iv-win { padding: 1rem; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.iv-win-box { aspect-ratio: 1; overflow: hidden; border: 1px solid #73849b88; background: #050a14; }
.iv-win-box svg { display: block; width: 100%; height: 100%; filter: blur(calc(var(--iv-d, 0) * 18px)); }
.iv-win-dots path { stroke: var(--light); fill: none; }
.ivms .detail-copy .iv-win h3 { margin-top: .9rem; font-size: 1.7rem; letter-spacing: -.03em; }
.ivms .detail-copy .iv-win p { margin-top: .35rem; font-size: .9rem; line-height: 1.45; }
.ivms .detail-copy .iv-win .iv-win-ctx { color: var(--paper); font-weight: 700; }
.ivms .detail-copy .iv-dist-note { max-width: 66ch; margin-top: 1.1rem; min-height: 3em; font-size: .95rem; }
.ivms .detail-copy .iv-principle { max-width: 70ch; margin-top: 1.2rem; padding: 1rem 1.2rem; border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; background: var(--panel); }
.ivms .detail-copy .iv-formula { margin: 0 0 .4rem; font-size: clamp(1.2rem, 2vw, 1.6rem); letter-spacing: -.02em; text-transform: uppercase; color: var(--paper); }
.iv-formula span { padding: 0 .15em; color: var(--accent); }
.ivms .detail-copy .iv-principle p:not(.iv-formula) { font-size: .95rem; }

/* G. Scale on one ruler. */
.iv-scale-fig { margin: 2.2rem 0 0; }
.iv-scale-svg { display: block; width: 100%; height: auto; }
.iv-grid path { stroke: var(--line); stroke-width: 1; opacity: .55; }
.iv-grid text, .iv-unit { fill: var(--muted); }
.iv-scale-item rect { fill: #ffe2b80d; stroke: var(--soft); stroke-width: 1.5; }
.iv-scale-item text { fill: var(--paper); font-weight: 800; letter-spacing: -.02em; }
.iv-bar { stroke: var(--accent); stroke-width: 2; fill: none; }
.iv-scale-fig figcaption { margin-top: .6rem; font-size: .85rem; color: var(--muted); }
.ivms .detail-copy .iv-legend { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 18px; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.ivms .detail-copy .iv-legend li { font-size: .9rem; line-height: 1.45; }
.iv-legend strong { display: block; color: var(--paper); }

/* H. Space → system: one vertical rule, a light descends it once. */
.ivms .detail-copy .iv-flow-list { position: relative; margin-top: 2.2rem; }
.iv-flow-list::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: calc(10rem + 5px); width: 1px; background: var(--line); }
.iv-flow-list::after { content: ""; position: absolute; top: 8px; left: calc(10rem + 4px); width: 3px; height: 16%; border-radius: 2px; background: linear-gradient(180deg, transparent, var(--accent) 60%, #fff4e6); opacity: 0; }
.iv-flow-item { position: relative; display: grid; grid-template-columns: 10rem minmax(0, 1fr); column-gap: 2.2rem; padding-bottom: 1.5rem; }
.iv-flow-item:last-child { padding-bottom: 0; }
.iv-flow-tag { grid-column: 1; grid-row: 1 / 3; padding-top: .1em; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.iv-flow-dot { position: absolute; top: 4px; left: calc(10rem); width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--muted); background: var(--bg); }
.iv-flow-item:last-child .iv-flow-dot { border-color: var(--accent); background: var(--accent); }
.ivms .detail-copy .iv-flow-item h3 { grid-column: 2; font-size: 1.2rem; text-transform: uppercase; letter-spacing: .05em; }
.ivms .detail-copy .iv-flow-item p { grid-column: 2; margin-top: .3rem; max-width: 62ch; font-size: .95rem; line-height: 1.5; }

/* I. What IVMS defines, and the generic boundary. */
.ivms .detail-copy .iv-def-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 2.2rem; }
.iv-def { padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 6px; background: var(--panel); }
.ivms .detail-copy .iv-def h3 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.ivms .detail-copy .iv-def ul { margin-top: .7rem; }
.ivms .detail-copy .iv-def li { padding-block: .45rem; border-top: 1px solid var(--line); font-size: .95rem; line-height: 1.4; color: var(--paper); }
.ivms .detail-copy .iv-boundary { max-width: 78ch; margin-top: 1.4rem; padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: 6px; font-size: .95rem; }
.iv-boundary strong { color: var(--paper); }

/* J. Four public cases. */
.ivms .detail-copy .iv-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 2.2rem; }
.iv-case { display: flex; flex-direction: column; padding: 1.3rem 1.4rem; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.iv-case-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.ivms .detail-copy .iv-case h3 { font-size: 1.35rem; letter-spacing: -.03em; }
.iv-chip { padding: .2em .65em; border: 1px solid var(--accent); border-radius: 999px; font-size: .75rem; font-weight: 800; letter-spacing: .08em; color: var(--accent); white-space: nowrap; }
.ivms .detail-copy .iv-case-place { margin-top: .2rem; font-size: .85rem; }
.iv-case dl { margin: 1rem 0 0; }
.iv-case dl > div { display: grid; grid-template-columns: 8.4rem minmax(0, 1fr); gap: .8rem; padding-block: .6rem; border-top: 1px solid var(--line); }
.iv-case dt { padding-top: .15em; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.iv-case dd { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--paper); }
.iv-case-link { margin-top: auto; padding-top: 1rem; font-size: .9rem; color: var(--muted); text-underline-offset: .2em; }
.iv-case-link:hover { color: var(--accent); }

/* K. Presence = space × scale × image × reading × operation. */
.ivms .detail-copy .iv-formula-big { margin-top: 2rem; font-size: clamp(1.6rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1; color: var(--paper); }
.iv-formula-big span { color: var(--accent); }
.ivms .detail-copy .iv-factors { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 10px; margin-top: 1.2rem; }
.iv-factor { position: relative; flex: 1 1 0; min-width: 0; padding: 1.1rem 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.iv-factor::before { content: ""; position: absolute; inset: -1px auto auto -1px; width: calc(100% + 2px); height: 2px; border-radius: 6px 6px 0 0; background: var(--accent); transform-origin: left; }
.ivms .detail-copy .iv-factor h3 { font-size: clamp(1.1rem, 1.8vw, 1.6rem); letter-spacing: -.03em; text-transform: uppercase; }
.ivms .detail-copy .iv-factor p { margin-top: .4rem; font-size: .9rem; line-height: 1.45; }
.iv-times { display: flex; align-items: center; color: var(--accent); font-size: 1.4rem; font-weight: 700; }

/* L. Ecosystem: IVMS leads, the rest is a note. */
.ivms .detail-copy .iv-eco-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 22px; margin-top: 2rem; }
.iv-eco-item { padding-top: .8rem; border-top: 2px solid var(--line); }
.iv-eco-item.is-lead { grid-column: 1 / -1; padding: 1rem 1.2rem; border: 1px solid #ffa37d88; border-radius: 6px; background: var(--panel); }
.ivms .detail-copy .iv-eco-item h3 { font-size: 1.15rem; letter-spacing: -.02em; }
.iv-eco-item.is-lead h3 { font-size: 1.5rem; }
.iv-eco-item a { text-decoration: none; }
.iv-eco-item a:hover h3 { color: var(--accent); }
.ivms .detail-copy .iv-eco-item p { margin-top: .3rem; font-size: .94rem; line-height: 1.5; }
.ivms .detail-copy .iv-next { margin-top: clamp(3.6rem, 7vw, 6.5rem); }

/* ---------- Motion: one pass per section, explanatory only ---------- */
@keyframes iv-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes iv-travel { from { left: 5px; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } to { left: calc(100% - 16% - 5px); opacity: 0; } }
@keyframes iv-descend { from { top: 8px; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } to { top: calc(100% - 16% - 8px); opacity: 0; } }
@keyframes iv-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes iv-grow { from { transform: scaleY(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes iv-dot { from { background: var(--bg); } 50% { background: var(--accent); box-shadow: 0 0 0 5px #ffa37d33; } to { background: var(--bg); } }
.iv-js :is(.iv-chain-item, .iv-layer, .iv-stage, .iv-context, .iv-win, .iv-flow-item, .iv-case, .iv-factor, .iv-legend li) { opacity: 0; animation: iv-rise .6s ease-out calc(var(--i, 0) * .13s) both paused; }
.iv-js .iv-chain::after { animation: iv-travel 2.8s cubic-bezier(.45, 0, .3, 1) both paused; }
.iv-js .iv-flow-list::after { animation: iv-descend 2.8s cubic-bezier(.45, 0, .3, 1) both paused; }
.iv-js .iv-stage::before { animation: iv-bar .55s ease-out calc(.3s + var(--i, 0) * .5s) both paused; }
.iv-js .iv-factor::before { animation: iv-bar .5s ease-out calc(.3s + var(--i, 0) * .4s) both paused; }
.iv-js .iv-scale-item { transform-box: fill-box; transform-origin: bottom; animation: iv-grow .7s ease-out calc(var(--i, 0) * .22s) both paused; }
.iv-js .iv-chain-dot { animation: iv-dot .6s ease-out calc(.25s + var(--i, 0) * .46s) both paused; }
.iv-js .is-seen :is(.iv-chain-item, .iv-layer, .iv-stage, .iv-context, .iv-win, .iv-flow-item, .iv-case, .iv-factor, .iv-legend li, .iv-chain-dot, .iv-scale-item) { animation-play-state: running; }
.iv-js .is-seen .iv-chain::after, .iv-js .is-seen .iv-flow-list::after, .iv-js .is-seen .iv-stage::before, .iv-js .is-seen .iv-factor::before { animation-play-state: running; }
.iv-js .iv-chain-item.is-entry .iv-chain-dot, .iv-js .iv-chain-item:last-child .iv-chain-dot { animation: none; }
.motion-paused :is(.iv-chain-item, .iv-layer, .iv-stage, .iv-context, .iv-win, .iv-flow-item, .iv-case, .iv-factor, .iv-legend li, .iv-scale-item, .iv-chain-dot) { animation: none !important; opacity: 1; transform: none; }
.motion-paused .iv-chain::after, .motion-paused .iv-flow-list::after { display: none; }
.motion-paused .iv-stage::before, .motion-paused .iv-factor::before { animation: none !important; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .iv-js :is(.iv-chain-item, .iv-layer, .iv-stage, .iv-context, .iv-win, .iv-flow-item, .iv-case, .iv-factor, .iv-legend li, .iv-scale-item, .iv-chain-dot) { animation: none !important; opacity: 1; transform: none; }
  .iv-chain::after, .iv-flow-list::after { display: none; }
  .iv-js .iv-stage::before, .iv-js .iv-factor::before { animation: none !important; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1099px) {
  .ivms .detail-copy .iv-wins { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ivms .detail-copy .iv-contexts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ivms .detail-copy .iv-def-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ivms .detail-copy .iv-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ivms .detail-copy .iv-context h3 { min-height: 0; }
}
@media (max-width: 849px) {
  .iv-bands, .iv-chain::before, .iv-chain::after { display: none; }
  .ivms .detail-copy .iv-chain { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 30px; padding-top: 0; margin-top: 2rem; }
  .iv-chain-item { padding-top: 22px; }
  .iv-chain-dot { top: 0; }
  .ivms .detail-copy .iv-layers { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .ivms .detail-copy .iv-stages { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .iv-stage { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); column-gap: 1rem; align-items: start; }
  .iv-stage-n { grid-row: 1 / 4; font-size: 3rem; }
  .ivms .detail-copy .iv-stage h3, .ivms .detail-copy .iv-stage p { grid-column: 2; }
  .ivms .detail-copy .iv-stage h3 { margin-top: 0; min-height: 0; }
  .ivms .detail-copy .iv-cases { grid-template-columns: minmax(0, 1fr); }
  .ivms .detail-copy .iv-factors { flex-direction: column; }
  .iv-times { justify-content: center; line-height: 1; }
  .iv-flow-list::before, .iv-flow-list::after, .iv-flow-dot { display: none; }
  .iv-flow-item { grid-template-columns: minmax(0, 1fr); padding: 0 0 1.2rem 1rem; border-left: 2px solid var(--line); }
  .iv-flow-tag, .ivms .detail-copy .iv-flow-item h3, .ivms .detail-copy .iv-flow-item p { grid-column: 1; grid-row: auto; }
  .iv-flow-tag:empty { display: none; }
  .ivms .detail-copy .iv-eco-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .iv-scale-fig { overflow-x: auto; padding-bottom: .4rem; }
  .iv-scale-svg { min-width: 640px; }
  .iv-scale-fig figcaption { position: sticky; left: 0; }
  .ivms .detail-copy .iv-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ivms .detail-copy .iv-contexts, .ivms .detail-copy .iv-def-grid { grid-template-columns: minmax(0, 1fr); }
  .ivms .detail-copy .iv-wins { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .iv-win { padding: .7rem; }
  .ivms .detail-copy .iv-win h3 { font-size: 1.35rem; }
  .ivms .detail-copy .iv-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iv-case dl > div { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
  .iv-ctl { flex-wrap: wrap; }
  .iv-ctl input { flex-basis: 100%; order: 3; }
}