/* SamaStack motion v3, shared by every page (decision 2026-09-25, MOTION-V3.md).
   Loaded by every generator and by index.html with a ?v= query from MOTION_V in
   tools/shell.mjs. The easing tokens stay inline on each page (MOTION_CSS), so
   nothing here waits for them. House rules: a scroll-linked moment moves only
   while the page moves, nothing loops, and reduced motion gets the finished
   page before the first frame. The .rv fallback stays inline on every page, so
   if this file never arrives the page is still complete. */

/* Cross-document view transitions: the header and the scroll compass stay put,
   the content slides. Same-origin only, no library. */
@view-transition{navigation:auto}
.nav{view-transition-name:ss-nav}
.sring{view-transition-name:ss-ring}
::view-transition-old(root){animation:v3vt-out .1s var(--ease-exit) both}
::view-transition-new(root){animation:v3vt-in .16s var(--ease-land) both}
@keyframes v3vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes v3vt-in{from{opacity:.4;transform:translateY(4px)}}

/* Press feedback: every button answers the finger. */
.btn:active,.dtabs button:active,.ccy-b:active,.ind-chips a:active,.faq summary:active{transform:scale(.97);transition-duration:.08s}

/* FAQ answers open and close instead of snapping, where the browser can. */
@supports selector(::details-content){
  .faq details{interpolate-size:allow-keywords}
  .faq details::details-content{height:0;overflow:clip;transition:height .38s var(--ease-out),content-visibility .38s allow-discrete}
  .faq details[open]::details-content{height:auto}
}

/* Pin: the block a scroll-linked scene holds still while the visitor scrolls
   through it. SS.pin (ss-motion.js) adds the class and sets --pin-top on the
   section, just under the nav; it never pins under reduced motion. */
.ss-pin{position:sticky;top:var(--pin-top,76px);z-index:1}

/* Homepage #familiar (decision 4): the six notes start as a tilted pile and
   sort themselves into the list as the visitor scrolls; each square turns
   accent as its note lands, then the closing line underlines itself. The
   script writes each note's transform and --q (0 piled, 1 landed); the pile
   shadow reads --q, so six paints and no layout. */
#familiar.v3 .rec li{position:relative;box-shadow:0 14px 28px -18px rgba(26,20,16,calc(.45 * (1 - var(--q,1))))}
#familiar.v3:not(.v3-done) .rec li{will-change:transform}
#familiar.v3 .rec li:before{transition:background-color .35s ease,transform .35s var(--ease-land)}
#familiar.v3 .rec li:not(.v3-lit):before{background:var(--line)}
#familiar.v3 .rec li.v3-lit:before{background:var(--accent)}
/* the closing line is readable from the start; only its underline waits for the scene to finish */
#familiar.v3 .rec-close b{background:linear-gradient(var(--accent),var(--accent)) 0 100%/0 2px no-repeat;padding-bottom:3px;transition:background-size .45s var(--ease-land)}
#familiar.v3-done .rec-close b{background-size:100% 2px}

/* The journey (.proc): the line fills with the scroll and each step lights
   when the fill reaches it. The fill is a second background layer on the
   existing base line (:before), sized by --pp (0..1), so nothing new is
   painted above the steps and the icons keep hiding the line with their paper
   background. Steps ahead of the fill are dimmed piece by piece (number, word,
   text, and a paper veil over the icon drawing), never with opacity on the
   whole step: that would make the icon's background translucent and let the
   line show through it. Additive to the time-based entrance (.proc.in). */
.proc.v3:before{background:linear-gradient(var(--accent),var(--accent)) 0 0/calc(var(--pp,0) * 100%) 100% no-repeat var(--line)}
@media (max-width:880px){.proc.v3:before{background-size:100% calc(var(--pp,0) * 100%)}}
.proc.v3 .p-mark:after{content:"";position:absolute;inset:0;background:var(--paper);opacity:0;transition:opacity .45s var(--ease-out);pointer-events:none}
.proc.v3 .p-n{transition:color .3s ease,opacity .45s var(--ease-out)}
.proc.v3 li h3,.proc.v3 li p{transition:opacity .45s var(--ease-out)}
.proc.v3.in li:not(.v3-on) :is(.p-n,h3,p,.p-fri){opacity:.72}
.proc.v3.in li:not(.v3-on) .p-mark:after{opacity:.3}
.proc.v3.in li.v3-on .p-fri{transition-delay:0s}
.proc.v3 li.v3-on .p-n{color:var(--accent)}

/* The "How it runs" ladder (service, Hyderabad and industry pages) has no
   line, so the fill happens in its own material: each word inks in from mute
   to ink as the scroll reaches it and its number turns accent-ink. --q per
   step comes from the journey caller (1 when unset, so the finished look is
   the default). The entrance (.ladder.in) and hover are untouched. */
.ladder.v3 li h3,.ladder.v3 li:first-child h3,.ladder.v3 li:last-child h3{color:color-mix(in srgb,var(--ink) calc(var(--q,1) * 100%),var(--mute))}
.ladder.v3 li:hover h3{color:var(--ink)}
.ladder.v3 .n{color:color-mix(in srgb,var(--accent-ink) calc(var(--q,1) * 100%),var(--mute))}
.ladder.v3 li:hover .n{color:var(--accent)}

@media (prefers-reduced-motion:no-preference){
  /* Section headings are never masked (owner, 2026-10-11: text that appeared
     late felt stuck); they arrive with their block's quick .rv reveal. */
}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .proc.v3.in li:not(.v3-on) :is(.p-n,h3,p,.p-fri){opacity:1}
  .proc.v3.in li:not(.v3-on) .p-mark:after{opacity:0}
}