/* ============================================================================
   develop:IT — motion-only styles.
   NOTHING in this file may be required to read the page. If this stylesheet
   never loads, the site must still be complete and legible.
   ========================================================================= */

/* logo lockup — used in nav, footer and the assembly moment */
.lockup{display:inline-flex;align-items:center;gap:10px}
.lockup .mark{height:30px;width:auto;overflow:visible}
.wordmark{
  font-family:var(--display);font-weight:700;font-size:1.0625rem;
  letter-spacing:-.01em;color:var(--cyan);white-space:nowrap;
}
.wm-colon{color:var(--amber)}
.foot__logo .lockup .mark{height:34px}

/* hero scroll hint */
.scrollhint{
  position:absolute;left:50%;bottom:var(--s3);transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-family:var(--display);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-ink-mut);
}
.scrollhint svg{width:16px;height:16px;stroke:var(--cyan);fill:none;stroke-width:2}
@media(max-width:860px){.scrollhint{display:none}}

/* the assembly stage — only ever visible while the pinned sequence runs.
   Without .js-motion it does not exist, and the static 2x2 grid stands alone. */
.assembly{display:none}
html.js-motion .assembly{
  display:grid;place-items:center;position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
}
.assembly__inner{display:flex;flex-direction:column;align-items:center;gap:var(--s2);text-align:center}
.assembly .mark{height:clamp(90px,12vw,140px)}
.assembly .wordmark{font-size:clamp(1.5rem,3vw,2.25rem)}
.rule--chord{height:3px;width:min(240px,50vw);background:var(--chord);transform:scaleX(0);transform-origin:left}
.assembly__line{
  font-family:var(--display);font-weight:600;font-size:var(--fs-h3);
  letter-spacing:-.015em;color:var(--on-ink);
}

/* pinned section needs a stable stacking context while ScrollTrigger holds it */
.pinwrap{position:relative}

/* velocity skew on the work rail — desktop only, set by anim.js */
.rail__track{will-change:transform}

/* WhatsApp float idle pulse. Decorative; removed entirely under reduced motion. */
@media(prefers-reduced-motion:no-preference){
  .wafloat::after{
    content:"";position:absolute;inset:-2px;border-radius:50%;
    border:2px solid var(--wa);animation:wapulse 6s ease-out infinite;
  }
  @keyframes wapulse{
    0%,72%{transform:scale(1);opacity:.7}
    86%{transform:scale(1.45);opacity:0}
    100%{transform:scale(1.45);opacity:0}
  }
}

/* Reduced motion kills every transition/animation defined anywhere. */
@media(prefers-reduced-motion:reduce){
  .rule--chord{transform:none}
  html.js-motion .assembly{display:none}
}