/* Products — "Monoliths" (animation style 03). Scene: assembly.js was the DOM prototype; the scene is now monolith.js (WebGL).
   Originally: "Assembly".
   Twelve module windows scattered in 3D depth line up into a carousel, one module at a time,
   then dock into a single Ragenaizer screen; the screen tilts flat and one record travels across
   the modules. Real DOM in CSS 3D (no WebGL): crisp text, and every colour is a site token, so
   palettes and light/dark apply with no extra code. Layout and motion live in assembly.js. */

#assembly { position: relative; height: 1020vh; margin-top: -130px; }
#assembly .as-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  perspective: 1800px; perspective-origin: 50% 46%;
  background:
    radial-gradient(70% 60% at 62% 46%, rgb(var(--sindoor-57-rgb) / 0.07), transparent 70%),
    radial-gradient(50% 50% at 18% 80%, rgb(var(--brass-68-rgb) / 0.06), transparent 70%),
    var(--bg);
  transition: background-color .9s ease;
}
#assembly canvas.as-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#assembly .as-tag { position: absolute; left: 0; top: 0; z-index: 5; padding: 6px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none;
  font: 600 11px/1 "JetBrains Mono", ui-monospace, monospace; color: #fff; background: var(--violet); box-shadow: 0 10px 24px -10px rgb(var(--sindoor-57-rgb) / 0.8); opacity: 0; transition: opacity .3s ease; }
#assembly.gl .as-grid { display: none; }
#assembly .as-grid {
  position: absolute; inset: -10%;
  background-image:
    linear-gradient(rgba(var(--scrim), 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--scrim), 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 60% 50%, #000 25%, transparent 72%);
          mask-image: radial-gradient(ellipse at 60% 50%, #000 25%, transparent 72%);
}
#assembly .as-world { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
#assembly .as-rig { position: absolute; left: 0; top: 0; transform-style: preserve-3d; will-change: transform; }

/* ---------- copy ---------- */
#assembly .as-scrim { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
html:not(.light) #assembly .as-scrim, html.light #assembly .as-scrim {
  background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 82%, transparent) 30%, transparent 52%);
}
#assembly .as-copy {
  position: absolute; z-index: 5; left: clamp(16px, 6vw, 96px); top: 50%; width: min(31rem, 40vw);
  transform: translateY(-46%); opacity: 0; pointer-events: none;
}
#assembly .as-copy.on { pointer-events: auto; }
#assembly .as-eyebrow { display: flex; align-items: center; gap: 12px; font: 500 10.5px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-violet); }
#assembly .as-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
#assembly .as-copy h1, #assembly .as-copy h2 { font-family: "Fraunces", ui-serif, Georgia, serif; font-weight: 300; letter-spacing: -0.03em; line-height: 1.04; color: var(--text); margin: 18px 0 16px; }
#assembly .as-copy h1 { font-size: clamp(2.6rem, 5.2vw, 4.9rem); }
#assembly .as-copy h2 { font-size: clamp(2rem, 3.6vw, 3.4rem); }
#assembly .as-copy h1 em, #assembly .as-copy h2 em { font-style: italic; color: var(--ink-violet); }
#assembly .as-copy p { font-size: 1.02rem; line-height: 1.6; color: var(--text-2); max-width: 28rem; }
#assembly .as-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
#assembly .as-ghost { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.3rem; border-radius: 12px; border: 1px solid var(--line-2); color: var(--text); font-weight: 500; }
#assembly .as-ghost:hover { background: rgba(var(--scrim), 0.05); }
#assembly .as-meta { display: flex; gap: 22px; margin-top: 22px; font: 500 10px/1.4 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
#assembly .as-meta b { color: var(--text); font-weight: 600; }
#assembly .as-count { font: 500 11px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .2em; color: var(--muted); margin-top: 22px; }
#assembly .as-count b { color: var(--text); }
#assembly .as-more { display: inline-flex; margin-top: 18px; font: 600 11px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-violet); }
#assembly .as-steps { list-style: none; padding: 0; margin: 20px 0 0; counter-reset: s; }
#assembly .as-steps li { counter-increment: s; display: flex; gap: 12px; align-items: baseline; padding: 7px 0; color: var(--muted); border-top: 1px solid var(--line); transition: color .35s ease; }
#assembly .as-steps li::before { content: counter(s, decimal-leading-zero); font: 500 10px/1 "JetBrains Mono", ui-monospace, monospace; color: var(--dim); }
#assembly .as-steps li.on { color: var(--text); }
#assembly .as-steps li.on::before { color: var(--ink-violet); }
#assembly .as-hint { position: absolute; z-index: 5; left: 50%; bottom: 26px; transform: translateX(-50%); font: 500 9.5px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 10px; }
#assembly .as-hint i { width: 1px; height: 34px; background: linear-gradient(var(--text-2), transparent); animation: as-drip 2.2s ease-in-out infinite; }
@keyframes as-drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
#assembly .as-rail { position: absolute; z-index: 6; right: clamp(14px, 2.6vw, 40px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 14px; }
#assembly .as-rail a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; font: 500 10px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .14em; color: var(--muted); }
#assembly .as-rail a i { width: 16px; height: 1px; background: var(--line-2); transition: width .4s ease, background-color .4s; }
#assembly .as-rail a.on { color: var(--text); }
#assembly .as-rail a.on i { width: 32px; background: var(--violet); }

@media (max-width: 760px) {
  #assembly { margin-top: -110px; }
  #assembly .as-copy { left: 16px; right: 16px; width: auto; top: auto; bottom: 22px; transform: none; }
  #assembly .as-copy h1 { font-size: 2.3rem; margin: 12px 0 10px; }
  #assembly .as-copy h2 { font-size: 1.8rem; margin: 12px 0 10px; }
  #assembly .as-copy p { font-size: .92rem; }
  #assembly .as-ctas { margin-top: 16px; }
  #assembly .as-ghost { padding: .7rem 1rem; font-size: .9rem; }
  #assembly .as-meta, #assembly .as-rail, #assembly .as-hint { display: none; }
  html:not(.light) #assembly .as-scrim, html.light #assembly .as-scrim {
    background: linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 88%, transparent) 34%, transparent 58%);
  }
  #assembly .as-steps li { padding: 4px 0; font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) { #assembly .as-hint i { animation: none; } }