/* Progressive enhancement: the original composition remains without JavaScript,
   with reduced motion, or if its source image cannot be decoded. */
.model-rail { position: relative; isolation: isolate; --rail-x: 50%; --rail-y: 0px; }
.model-rail::before { content: ""; position: absolute; z-index: 2; top: -2px; left: var(--rail-x); width: clamp(100px, 22%, 350px); height: 3px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, #a77cff 30%, #7432ff 50%, #a77cff 70%, transparent); box-shadow: 0 0 22px rgba(116,50,255,.35); pointer-events: none; }
.model-rail > div::after { content: ""; position: absolute; z-index: -1; inset: 0; opacity: var(--rail-glow, 0); background: radial-gradient(ellipse at 50% 0%, rgba(116,50,255,.105), rgba(116,50,255,.025) 55%, transparent 85%); pointer-events: none; }
.asset-assembly { --scene-height: min(820px, calc(100svh - 78px)); position: relative; }
.asset-assembly .asset-visual { height: var(--scene-height); min-height: 0; max-height: none; background: radial-gradient(ellipse at 55% 76%, #211b30, #141120 65%); }
.asset-assembly .assembly-fallback { position: absolute; inset: 0; min-height: 0; width: 100%; height: 100%; object-fit: contain; }
.asset-assembly .asset-visual::after { background: linear-gradient(0deg, #17131f, transparent 24%); }
.assembly-scene { display: none; width: 100%; height: 100%; overflow: hidden; }
.assembly-frame { opacity: .42; }
.assembly-product { opacity: 0; }
.assembly-connections { opacity: 0; }
.assembly-connections path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js-motion .asset-assembly.assembly-ready { height: calc(var(--scene-height) + 105svh); }
.js-motion .assembly-ready .asset-visual { position: sticky; top: 78px; }
.js-motion .assembly-ready .assembly-fallback { opacity: 0; }
.js-motion .assembly-ready .assembly-scene { display: block; }
.asset-assembly figcaption { z-index: 3; font-size: 12px; }
.asset-assembly figcaption span:nth-child(2) { position: relative; overflow: hidden; background: rgba(255,255,255,.18); }
.asset-assembly figcaption span:nth-child(2)::after { content: ""; position: absolute; inset: 0; background: #bc94ff; transform: scaleX(var(--assembly-progress, 0)); transform-origin: left; }
.reduce-motion .model-rail::before { left: 50%; }
.reduce-motion .model-rail > div::after { opacity: 0; }
@media (max-width: 780px) {
  .model-rail { border-left: 1px solid var(--line); }
  .model-rail > div, .model-rail > div:not(:first-child) { padding-left: 20px; }
  .model-rail::before { left: -2px; top: var(--rail-y); width: 3px; height: 62px; transform: translateY(-50%); background: linear-gradient(180deg, transparent, #7432ff, transparent); }
  .model-rail > div::after { background: radial-gradient(ellipse at 0% 50%, rgba(116,50,255,.105), transparent 80%); }
  .asset-assembly { --scene-height: min(620px, calc(100svh - 78px)); }
  .js-motion .asset-assembly.assembly-ready { height: calc(var(--scene-height) + 80svh); }
  .asset-assembly .asset-visual { min-height: 0; }
  .asset-assembly .assembly-fallback { object-fit: cover; }
  .asset-assembly figcaption { font-size: 11px; gap: 8px; }
  .reduce-motion .model-rail::before { left: -2px; top: 50%; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.js-motion) .model-rail > div::after { opacity: 0; }
}