--ease-* tokens in tokens.css (E6: single source of truth). * 2 AI-OS visual utilities (mesh grid,chapter numerals) + the signature * island containers (.x-mesh/.x-graph/.x-comm/.x-aicore/.x-showcase). * * Reveal is GATED on `html.has-motion`,a class set by a tiny inline * guard in the layout . Consequences: * - No JS / crawlers → class never added → content fully visible (SEO-safe). * - prefers-reduced-motion → class never added → content fully visible,no motion. * - Total JS-module failure → inline failsafe adds `html.motion-failsafe` → reveals all. */ html.has-motion [data-animate],html.has-motion [data-reveal],html.has-motion .scroll-reveal{opacity:0;transform:translateY(var(--motion-rise, 24px));transition:opacity .55s var(--ease-out, cubic-bezier(.16, 1, .3, 1)),transform .55s var(--ease-out, cubic-bezier(.16, 1, .3, 1));will-change:opacity,transform}html.has-motion [data-animate].is-revealed,html.has-motion [data-reveal].is-revealed,html.has-motion .scroll-reveal.is-revealed,html.motion-failsafe [data-animate],html.motion-failsafe [data-reveal],html.motion-failsafe .scroll-reveal{opacity:1;transform:none}html.has-motion [data-reveal-delay="1"]{transition-delay:calc(var(--motion-stagger-step) * 1)}html.has-motion [data-reveal-delay="2"]{transition-delay:calc(var(--motion-stagger-step) * 2)}html.has-motion [data-reveal-delay="3"]{transition-delay:calc(var(--motion-stagger-step) * 3)}html.has-motion [data-reveal-delay="4"]{transition-delay:calc(var(--motion-stagger-step) * 4)}html.has-motion [data-reveal-delay="5"]{transition-delay:calc(var(--motion-stagger-step) * 5)}html.has-motion [data-reveal-delay="6"]{transition-delay:calc(var(--motion-stagger-step) * 6)}@media(prefers-reduced-motion:reduce){html [data-animate],html [data-reveal],html .scroll-reveal{opacity:1!important;transform:none!important;transition:none!important}}.x-mesh-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:64px 64px;z-index:var(--depth-0, 0)}.x-chapter-num{font-weight:900;line-height:1;letter-spacing:-.05em;font-size:clamp(5rem,10vw,10rem);opacity:.05;-webkit-user-select:none;user-select:none;pointer-events:none}.x-mesh{position:relative;width:100%;max-width:560px;margin-inline:auto;aspect-ratio:520 / 460}.x-mesh-poster{position:absolute;inset:0;width:100%;height:100%;opacity:1;transition:opacity .6s var(--ease-out, cubic-bezier(.16, 1, .3, 1))}.x-mesh-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s var(--ease-out, cubic-bezier(.16, 1, .3, 1));pointer-events:none}.x-mesh--live .x-mesh-poster{opacity:0}.x-mesh--live .x-mesh-canvas{opacity:1}@media(prefers-reduced-motion:reduce){.x-mesh--live .x-mesh-poster{opacity:1}.x-mesh--live .x-mesh-canvas{opacity:0}}.x-thread{position:fixed;top:18vh;right:clamp(12px,1.6vw,28px);width:2px;height:64vh;z-index:var(--depth-2, 20);background:#ffffff12;border-radius:2px;opacity:0;transition:opacity .4s var(--ease-out, ease);pointer-events:none}.x-thread-fill{position:absolute;inset:0;transform-origin:top center;transform:scaleY(0);background:linear-gradient(to bottom,var(--color-brand-400, #26f598),var(--color-brand-600, #029c38));box-shadow:var(--glow-sm);border-radius:2px}.x-thread-node{position:absolute;top:0;left:50%;width:10px;height:10px;margin-left:-5px;margin-top:-5px;border-radius:9999px;background:var(--color-brand-400, #26f598);box-shadow:0 0 12px 2px #02c44699;will-change:transform}@media(max-width:1023px){.x-thread{display:none}}@media(prefers-reduced-motion:reduce){.x-thread{display:none}}.x-graph{position:relative;width:100%;max-width:940px;margin-inline:auto;aspect-ratio:800 / 460}.x-graph-poster,.x-graph-canvas{position:absolute;inset:0;width:100%;height:100%;transition:opacity .6s var(--ease-out, cubic-bezier(.16, 1, .3, 1))}.x-graph-poster{opacity:1}.x-graph-canvas{opacity:0;pointer-events:none}.x-graph--live .x-graph-poster{opacity:0}.x-graph--live .x-graph-canvas{opacity:1}@media(prefers-reduced-motion:reduce){.x-graph--live .x-graph-poster{opacity:1}.x-graph--live .x-graph-canvas{opacity:0}}.x-aicore{position:relative;width:100%;max-width:880px;margin-inline:auto;aspect-ratio:800 / 460}.x-aicore-poster,.x-aicore-canvas{position:absolute;inset:0;width:100%;height:100%;transition:opacity .6s var(--ease-out, cubic-bezier(.16, 1, .3, 1))}.x-aicore-poster{opacity:1}.x-aicore-canvas{opacity:0;pointer-events:none}.x-aicore--live .x-aicore-poster{opacity:0}.x-aicore--live .x-aicore-canvas{opacity:1}@media(prefers-reduced-motion:reduce){.x-aicore--live .x-aicore-poster{opacity:1}.x-aicore--live .x-aicore-canvas{opacity:0}}.x-showcase{position:relative;width:100%;max-width:1040px;margin-inline:auto}.x-showcase-frame{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#0d0d10;box-shadow:0 30px 80px -24px #000000a6,0 8px 24px #0000004d}.x-showcase-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 13px;background:linear-gradient(180deg,#ffffff0f,#ffffff05);border-bottom:1px solid rgba(255,255,255,.06)}.x-showcase-dot{width:10px;height:10px;border-radius:9999px}.x-showcase-media{display:block;width:100%;height:auto;aspect-ratio:1440 / 900;object-fit:cover;object-position:top center}.x-showcase-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center;border:0;cursor:pointer;background:linear-gradient(180deg,#0305044d,#0305048c);opacity:0;transition:opacity .3s var(--ease-out, ease);padding:1rem}.x-showcase-frame:hover .x-showcase-overlay,.x-showcase-overlay:focus-visible{opacity:1}@media(hover:none){.x-showcase-overlay{opacity:1;background:linear-gradient(180deg,#03050433,#03050473)}}.x-showcase-play{width:64px;height:64px;border-radius:9999px;display:flex;align-items:center;justify-content:center;background:var(--color-brand-400);box-shadow:0 0 0 10px #02c4462e,0 0 40px #02c44699;animation:tour-pulse 2.4s ease-in-out infinite}@keyframes tour-pulse{0%,to{box-shadow:0 0 0 10px #02c4462e,0 0 40px #02c44680}50%{box-shadow:0 0 0 16px #02c4461a,0 0 60px #02c446bf}}.x-showcase-overlay-text{display:flex;flex-direction:column;gap:.25rem}.x-showcase-overlay-text strong{color:#fff;font-size:1.25rem;font-weight:700}.x-showcase-overlay-text span{color:#fffc;font-size:.9rem}.x-showcase-tour-btn{pointer-events:none}@media(prefers-reduced-motion:reduce){.x-showcase-play{animation:none}}.x-comm{position:relative;width:100%;max-width:520px;margin-inline:auto;aspect-ratio:520 / 420}.x-datahub{position:relative;width:100%;max-width:880px;margin-inline:auto;aspect-ratio:800 / 440}.x-comm-poster,.x-comm-canvas,.x-datahub-poster,.x-datahub-canvas{position:absolute;inset:0;width:100%;height:100%;transition:opacity .6s var(--ease-out, cubic-bezier(.16, 1, .3, 1))}.x-comm-poster,.x-datahub-poster{opacity:1}.x-comm-canvas,.x-datahub-canvas{opacity:0;pointer-events:none}.x-comm--live .x-comm-poster,.x-datahub--live .x-datahub-poster{opacity:0}.x-comm--live .x-comm-canvas,.x-datahub--live .x-datahub-canvas{opacity:1}@media(prefers-reduced-motion:reduce){.x-comm--live .x-comm-poster,.x-datahub--live .x-datahub-poster{opacity:1}.x-comm--live .x-comm-canvas,.x-datahub--live .x-datahub-canvas{opacity:0}}