/* Scroll-driven particle assembly — Powervault homepage */
.assembly{--hdr:68px; position:relative; background:#07090f; color:#fff; height:640vh;}
.assembly-sticky{position:sticky; top:var(--hdr); height:calc(100vh - var(--hdr)); height:calc(100svh - var(--hdr)); overflow:hidden;}
.assembly canvas{position:absolute; inset:0; width:100%; height:100%; display:block;}
/* legibility scrim behind captions */
.assembly-sticky::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(7,9,15,.82) 0%, rgba(7,9,15,.35) 38%, rgba(7,9,15,0) 62%),
             linear-gradient(0deg, rgba(7,9,15,.6) 0%, rgba(7,9,15,0) 28%);}
.assembly-ui{position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:space-between; padding-top:48px; padding-bottom:56px; pointer-events:none;}
.assembly-intro{max-width:30ch; transition:opacity .5s ease, transform .5s ease;}
.assembly-intro .label{color:#d8d6d2;}
.assembly-intro h2{font-size:clamp(26px,3.4vw,42px); letter-spacing:-.5px; color:#fff;}
.assembly .assembly-intro{opacity:calc(1 - var(--p,0) * 14);}
.assembly-steps{position:relative; max-width:440px; min-height:190px;}
.assembly-step{position:absolute; left:0; bottom:0; width:100%; opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .45s ease, transform .45s ease, visibility 0s linear .45s;}
.assembly-step.is-active{opacity:1; visibility:visible; transform:none; transition-delay:0s;}
.assembly-step .n{font-family:'Josefin Sans',sans-serif; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#ff6b6b;}
.assembly-step h3{font-size:clamp(22px,2.4vw,30px); margin:8px 0 10px; color:#fff;}
.assembly-step p{margin:0; color:#cfcdc8; font-size:16px; line-height:1.55;}
.assembly-step .btn{margin-top:20px; pointer-events:auto;}
/* progress rail */
.assembly-rail{position:absolute; right:var(--gutter); top:72px; bottom:56px; width:2px; background:rgba(255,255,255,.14); z-index:2;}
.assembly-rail i{position:absolute; left:0; top:0; width:100%; height:100%; background:var(--red); transform-origin:top; transform:scaleY(var(--p,0));}
.assembly-skip{position:absolute; left:-9999px; top:8px; z-index:60; background:#fff; color:#111; padding:10px 14px; border-radius:4px;}
.assembly-skip:focus{left:var(--gutter);}
.sr-only,.assembly-sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

/* mobile: caption sits low, scrim from below */
@media (max-width:719px){
  .assembly{height:520vh;}
  .assembly-sticky::after{background:linear-gradient(0deg, rgba(7,9,15,.9) 0%, rgba(7,9,15,.45) 38%, rgba(7,9,15,0) 62%);}
  .assembly-ui{padding-top:28px; padding-bottom:28px;}
  .assembly-rail{top:0; bottom:auto; left:0; right:0; width:100%; height:2px;}
  .assembly-rail i{transform-origin:left; transform:scaleX(var(--p,0));}
  .assembly-steps{max-width:none;}
}

/* static mode: reduced motion, no WebGL, or no JS */
.assembly.is-static{height:auto;}
.assembly.is-static .assembly-sticky{position:relative; top:0; height:auto; overflow:visible;}
.assembly.is-static .assembly-sticky::after{display:none;}
.assembly.is-static canvas{display:none;}
.assembly.is-static.has-gl canvas{display:block; position:relative; height:56vh; min-height:320px;}
.assembly.is-static .assembly-ui{height:auto; padding-top:64px; padding-bottom:64px; pointer-events:auto;}
.assembly.is-static .assembly-intro{opacity:1; margin-bottom:40px;}
.assembly.is-static .assembly-steps{max-width:none; min-height:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:32px;}
.assembly.is-static .assembly-step{position:static; opacity:1; visibility:visible; transform:none;}
.assembly.is-static .assembly-rail{display:none;}
@media (prefers-reduced-motion:reduce){ .assembly-step, .assembly-intro{transition:none;} }