/* /websites/ stack layer (2026-11-02), with /websites/js/stack.js. The HOWTO is at the top of stack.js.
   Everything waits for html.stk-on, which stack.js sets only with JavaScript and without reduced motion,
   so the plain page is the still version. */

/* 1. stacked sections */
.stk-on .stk-rel { position: relative; }
.stk-on .stk-pin { position: sticky; will-change: transform; min-height: calc(100svh - var(--stack-top, 0px)); }
.stk-on .stk-card {
  border-radius: var(--stk-r, 28px) var(--stk-r, 28px) 0 0;
  box-shadow: 0 -26px 60px -30px rgba(0, 0, 0, .55);
  overflow: clip;
}
html.stk-measure .stk-pin { position: relative !important; top: auto !important; }
.stk-shade { display: none; }
.stk-on .stk-shade {
  display: block; position: absolute; left: 0; right: 0; bottom: 0; height: min(100%, 100lvh);
  background: var(--stk-shade, #0b0b0a);
  opacity: 0; pointer-events: none; z-index: 60; will-change: opacity;
}
@media (max-width: 760px) {
  .stk-on .stk-card { border-radius: var(--stk-r-phone, 18px) var(--stk-r-phone, 18px) 0 0; box-shadow: 0 -14px 34px -20px rgba(0, 0, 0, .5); }
}

/* 2. clip reveals: stack.js writes clip-path while the section comes up */
.stk-on .stk-curtain { will-change: transform; }

/* 3. pinned row */
.stk-on [data-hpin] { position: relative; }
.stk-on [data-hpin-stage] { position: sticky; top: var(--stack-top, 0px); overflow: clip; }
.stk-on [data-hpin-row] { flex-wrap: nowrap; width: max-content; will-change: transform; }

/* 4. depth */
.stk-on [data-depth] { will-change: transform; }

/* 5. scrubbed text: --p (0 to 1) on the element, --i and --n per word or line */
.stk-on [data-scrub] .stk-w { display: inline-block; }
.stk-on [data-scrub]:not([data-scrub="lines"]) .stk-w {
  opacity: calc(.16 + .84 * clamp(0, (var(--p, 0) * (var(--n, 1) + 2.5) - var(--i, 0)) / 2.5, 1));
}
.stk-on [data-scrub="lines"] .stk-w {
  --k: clamp(0, var(--p, 0) * (var(--n, 1) + .8) - var(--i, 0), 1);
  opacity: var(--k); translate: 0 calc((1 - var(--k)) * .55em);
}

/* 6. marquee band */
.stk-mq { overflow: hidden; }
.stk-mq-track { display: flex; width: max-content; will-change: transform; }
.stk-mq-run { display: flex; flex: none; align-items: center; }

/* 7. sticky media with steps */
.stk-on [data-steps-media] { position: sticky; top: calc(var(--stack-top, 0px) + var(--steps-top, 12vh)); display: grid; }
.stk-on [data-step-media] { grid-area: 1 / 1; opacity: 0; transform: scale(1.05); transition: opacity .55s ease, transform .9s cubic-bezier(.22, 1, .36, 1); }
.stk-on [data-step-media].is-on { opacity: 1; transform: none; }
.stk-on [data-steps] [data-step] { opacity: .32; transition: opacity .45s ease; }
.stk-on [data-steps] [data-step].is-on { opacity: 1; }