/* ============================================================================
   Sibuor Labs · division pages: the motion layer
   ----------------------------------------------------------------------------
   division.css is the static theme (paper, forest accent, square corners,
   Geist). This file is everything that moves, and it is deliberately NOT the
   landing page's grammar: no translateY-and-fade reveal, no pinned filmstrip,
   no scroll rail under the nav. Those belong to sibuor.com/ and /mira/.

   Shared here: one reveal, an edge wipe. The block is masked from its leading
   edge and unmasks in place, with no travel. It reads as something being
   uncovered rather than something arriving, which suits pages that are mostly
   an argument in text.

   Then one signature per division, used nowhere else on the site:

     Enterprise · RACK    cards close like shutters, one unit at a time, each
                          preceded by a hairline sweeping the slot it lands in.
     Research   · DRAW    an SVG plot draws itself against scroll position,
                          scrubbed both ways, and figures develop from blur.
     Consulting · SPINE   a vertical rule fills with scroll and each step hinges
                          up from its own baseline as the fill reaches its dot.

   Everything degrades to a plain, fully visible page with JS off or reduced
   motion on: the hiding is scoped to `.js` and every animated property is
   released by a media query at the bottom.
   ========================================================================== */

:root{
  --m-ease:cubic-bezier(.22,.68,.16,1);
  --m-ease-out:cubic-bezier(.16,1,.3,1);
  --night:#080b09;
  --paper-on-night:#edefea;
  --accent-on-night:#57c98c;
}

/* ---- shared: the edge wipe --------------------------------------------- */
.js .rv{
  clip-path:inset(0 100% 0 0);
  opacity:.001;
  transition:clip-path 1.05s var(--m-ease-out), opacity .5s linear;
  transition-delay:calc(var(--d,0) * 90ms);
}
.js .rv.in{ clip-path:inset(0 -2% 0 0); opacity:1; }
/* a block that sits on the right half of a split wipes the other way, so the
   pair opens outward from the gutter instead of both running left-to-right */
.js .rv--rtl{ clip-path:inset(0 0 0 100%); }
.js .rv--rtl.in{ clip-path:inset(0 0 0 -2%); }

/* ---- ENTERPRISE · rack -------------------------------------------------- */
/* The slot: a hairline that sweeps the width of the card's footprint, then the
   card itself closes over it from top and bottom, like a unit being seated. */
.js .sig-rack .feature{ position:relative; }
.js .sig-rack .feature::before{
  content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:left; opacity:0;
  transition:transform .5s var(--m-ease-out), opacity .3s linear;
}
.js .sig-rack .feature.slot::before{ transform:scaleX(1); opacity:1; }
.js .sig-rack .feature.seated::before{ opacity:0; transition-delay:.12s; }
.js .sig-rack .feature > *{
  clip-path:inset(50% 0 50% 0); opacity:0;
  transition:clip-path .62s var(--m-ease-out), opacity .34s linear;
}
.js .sig-rack .feature.seated > *{ clip-path:inset(0 0 0 0); opacity:1; }
/* the unit index counts itself in rather than fading */
.js .sig-rack .feature .idx{ font-variant-numeric:tabular-nums; }

/* ---- RESEARCH · draw ---------------------------------------------------- */
.plot{ width:100%; height:auto; display:block; overflow:visible; }
.plot .axis{ stroke:var(--rule); stroke-width:1; }
.plot .grid{ stroke:var(--rule); stroke-width:1; stroke-dasharray:2 6; opacity:.7; }
.plot .curve{ fill:none; stroke:var(--accent); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.plot .curve--ghost{ stroke:var(--muted); stroke-width:1.6; stroke-dasharray:5 5; opacity:.55; }
.plot .dot{ fill:var(--accent); }
.plot .plabel{ font-family:var(--mono); font-size:11px; fill:var(--muted); }
.plot .pvalue{ font-family:var(--mono); font-size:13px; fill:var(--ink); font-variant-numeric:tabular-nums; }
/* scrubbed: JS writes --p (0→1) and the dash offset follows the scroll, so the
   curve draws on the way down and un-draws on the way back up */
.js .plot .curve{ stroke-dasharray:var(--len,1000); stroke-dashoffset:calc(var(--len,1000) * (1 - var(--p,0))); }
.js .plot .dot{ opacity:calc((var(--p,0) - .92) * 12); }

/* figures develop rather than fade */
.js .develop{ filter:blur(14px) contrast(.7); opacity:.25; transform:scale(1.015);
  transition:filter 1.1s var(--m-ease-out), opacity .8s var(--m-ease-out), transform 1.1s var(--m-ease-out); }
.js .develop.in{ filter:none; opacity:1; transform:none; }

/* the section rule under a research heading writes itself left to right */
.js .sig-draw .section-head{ position:relative; padding-bottom:22px; }
.js .sig-draw .section-head::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--ink);
  transform:scaleX(0); transform-origin:left; transition:transform 1.2s var(--m-ease-out); }
.js .sig-draw .section-head.in::after{ transform:scaleX(1); }

/* ---- CONSULTING · spine ------------------------------------------------- */
.spine{ position:relative; padding-left:clamp(28px,4vw,58px); }
.spine::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:var(--rule); }
/* the fill is a second rule scaled by scroll progress */
.spine::after{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:var(--accent);
  transform-origin:top; transform:scaleY(var(--fill,0)); }
.spine .step{ position:relative; }
.spine .step::before{
  content:""; position:absolute; left:calc(clamp(28px,4vw,58px) * -1); top:.55em; width:9px; height:9px;
  margin-left:-4px; background:var(--bg); border:1px solid var(--rule-strong);
  transform:scale(.6); opacity:.5; transition:transform .4s var(--m-ease), background .4s var(--m-ease), opacity .4s var(--m-ease); }
.spine .step.reached::before{ background:var(--accent); border-color:var(--accent); transform:scale(1); opacity:1; }
/* each step hinges up from its own baseline as the fill reaches it */
.js .spine .step{ transform-origin:0 100%; }
.js .sig-spine .spine .step{ opacity:0; transform:perspective(900px) rotateX(-14deg) translateY(10px);
  transition:opacity .6s var(--m-ease-out), transform .75s var(--m-ease-out); }
.js .sig-spine .spine .step.reached{ opacity:1; transform:none; }
/* The hinge paints a step wider than its layout box: perspective foreshortening
   pushes the far edge out by ~13px, and on a 390px phone that was enough to
   give the whole page a sliver of horizontal scroll before a single step had
   been revealed. Clip rather than hidden, `hidden` on an ancestor silently
   demotes the nav's position:sticky to static, and a clip margin so the spine
   dots, which sit 4px outside the padding box, are not shaved off. */
.js .sig-spine .spine{ overflow-x:clip; overflow-clip-margin:10px; }

/* ---- the night band ----------------------------------------------------- */
/* One band of night per page, echoing the landing arc without repeating it:
   here it is a single quiet statement rather than a whole act. */
/* The band carries the landing pages' weight now: their section rhythm and
   their h2 clamp, not a reduced version of both. A night ground that is
   shorter and smaller-set than the paper around it reads as an inset panel;
   at this scale it reads as the page changing ground, which is what it does
   on sibuor.com/ and /mira/. */
.band-night{ background:var(--night); color:var(--paper-on-night); padding:var(--band) 0; }
.band-night .container{ display:grid; gap:clamp(28px,4vw,64px); grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; }
@media (max-width:860px){ .band-night .container{ grid-template-columns:1fr; } }
.band-night .label{ color:var(--accent-on-night); }
.band-night .label::before{ background:var(--accent-on-night); }
.band-night h2{ font-size:clamp(32px,5vw,68px); line-height:.98; letter-spacing:-.038em; font-weight:600; margin:clamp(16px,2vw,22px) 0 0; text-wrap:balance; }
.band-night p{ color:#c3c8c1; font-size:clamp(16px,1.2vw,19px); line-height:1.6; margin:0; max-width:52ch; }
/* On a night ground the primary button goes white with a green arrow, the
   same call the Mira and Sibuor heroes make, so a CTA looks identical
   wherever night is the ground. */
.band-night .btn-primary{ background:var(--cta-night); border-color:var(--cta-night); color:var(--cta-night-ink); }
.band-night .btn-primary:hover{ background:var(--cta-night-hi); border-color:var(--cta-night-hi); color:var(--cta-night-ink); }
.band-night .btn{ color:var(--paper-on-night); border-color:rgba(237,239,234,.34); }
.band-night .btn:hover{ background:var(--paper-on-night); color:var(--night); }
.band-night .figs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:rgba(237,239,234,.14); border:1px solid rgba(237,239,234,.14); }
.band-night .fig{ background:var(--night); padding:clamp(18px,2.2vw,28px); }
.band-night .fig b{ display:block; font-size:clamp(26px,3vw,40px); font-weight:600; letter-spacing:-.03em; line-height:1;
  font-variant-numeric:tabular-nums; }
.band-night .fig span{ display:block; margin-top:9px; font-size:13px; color:#9ba299; }
.band-night .fig--accent b{ color:var(--accent-on-night); }

/* ---- reduced motion / no JS -------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .js .rv, .js .rv.in{ clip-path:none !important; opacity:1 !important; transition:none !important; }
  .js .sig-rack .feature > *{ clip-path:none !important; opacity:1 !important; transition:none !important; }
  .js .sig-rack .feature::before{ display:none; }
  .js .develop{ filter:none !important; opacity:1 !important; transform:none !important; transition:none !important; }
  .js .sig-draw .section-head::after{ transform:scaleX(1) !important; transition:none !important; }
  .js .sig-spine .spine .step{ opacity:1 !important; transform:none !important; transition:none !important; }
  .js .plot .curve{ stroke-dasharray:none !important; stroke-dashoffset:0 !important; }
  .js .plot .dot{ opacity:1 !important; }
  .spine::after{ transform:scaleY(1); }
  .spine .step::before{ background:var(--accent); border-color:var(--accent); transform:scale(1); opacity:1; }
}