/* ============================================================
   Client Portal · 3D Scroll 2 "Camera Fly-Through"  (tmack's pick)
   Needs apps-skit.css. Three phones sit at different depths along a
   3D path; scrolling dollies the camera forward. The current phone
   comes into focus front and centre, the previous one flies past the
   camera and out, far ones are softened by depth of field. Light
   specks mark the path; chapter text and a progress rail follow.
   No coloured outlines around the phones: only their own bezels,
   a dark contact shadow and depth.
   Header-aware: apps-s2.js measures the fixed site header (.site-nav)
   into --hdr, and on stacked layouts fits the phone between the rail
   (--wt) and the chapter text (--wb).
   ============================================================ */
.apS2 .apS__pin{padding-top:var(--hdr,72px)}
.apS2.is-run .apS__pin{will-change:auto}
.apS2__world{position:absolute;left:0;right:0;top:var(--hdr,72px);bottom:0;perspective:1000px;perspective-origin:62% 50%;pointer-events:none}
.apS2__node{position:absolute;left:62%;top:50%;width:0;height:0;transform-style:preserve-3d;opacity:0}
.apS2__node[data-node="0"]{opacity:1}
.apS2__ph{--s:.66;position:absolute;left:calc(-209px * var(--s));top:calc(-436px * var(--s))}
.apS2 .ap-ph__body{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16),inset 0 2px 1px rgba(255,255,255,.28),inset 0 -2px 2px rgba(0,0,0,.6),0 60px 120px -40px rgba(0,0,0,.95)}
/* soft dark contact shadow under each phone (no outline, no colour) */
.apS2__shadow{position:absolute;left:calc(-418px * var(--gs,.66) * .46);top:calc(436px * var(--gs,.66) - 30px);width:calc(418px * var(--gs,.66) * .92);height:70px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.7),rgba(0,0,0,.32) 55%,rgba(0,0,0,0));pointer-events:none}
/* light specks along the path */
.apS2__dust{position:absolute;left:62%;top:50%;transform-style:preserve-3d}
.apS2__dust i{position:absolute;left:-2.5px;top:-2.5px;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 10px 2px rgba(255,255,255,.35);opacity:0}

/* chapter copy + rail */
.apS2__ui{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;height:100%;pointer-events:none}
.apS2__copy{display:flex;flex-direction:column;gap:24px;width:min(600px,46%);pointer-events:auto}
.apS2 .apS__title{font-size:clamp(1.75rem,1.1rem + 1.75vw,2.75rem)}
.apS2__scenes{position:relative;height:clamp(250px,32vh,300px)}
.apS2 .apS__scene{position:absolute;left:0;right:0;top:0}
.apS2 .apS__scene:not([data-scene="0"]){opacity:0}
.apS2.is-run .apS__scene{will-change:transform,opacity}
.apS2__rail{flex-wrap:wrap;gap:6px;pointer-events:auto}
.apS2__after{display:none}

/* stacked (phones + tablets): rail under the header, phone in the middle, chapter text at the bottom,
   Get Portal Access right after the sequence */
@media (max-width:1023px){
  .apS2__world{top:var(--wt,140px);bottom:var(--wb,250px);perspective-origin:50% 50%}
  .apS2__node,.apS2__dust{left:50%}
  .apS2__ui{flex-direction:column;align-items:stretch;justify-content:flex-end;padding-bottom:20px}
  .apS2__copy{width:auto;gap:0}
  .apS2__copy .apS__cta-row{display:none}
  .apS2__scenes{height:clamp(150px,22svh,210px)}
  .apS2 .apS__title{font-size:clamp(1.5rem,1.1rem + 2.2vw,2.1rem);margin-top:8px}
  .apS2 .apS__note{margin-top:8px;font-size:.95rem}
  .apS2__rail{position:absolute;left:20px;right:20px;top:10px;flex-direction:row;justify-content:center;gap:6px}
  .apS2__rail button{min-width:0;min-height:38px;padding:0 13px 0 10px;font-size:.74rem}
  .apS2.is-armed .apS2__after{display:flex;justify-content:center;padding-top:32px;padding-bottom:clamp(64px,10vw,96px)}
}
@media (min-width:768px) and (max-width:1023px){
  .apS2__scenes{height:clamp(170px,20svh,220px)}
  .apS2 .apS__scene{max-width:620px}
}
@media (max-width:1023px) and (max-height:780px){ .apS2 .apS__note{display:none} .apS2__scenes{height:clamp(100px,15svh,130px)} }
/* iPhone/Safari stability (s2_fix.py) */
.apS2--lite .apS2__dust{display:none}
@media (max-width:1023px){ .apS2 .apS__pin{min-height:0} }
/* older iOS (< 15.4) has no svh: fall back to vh so the track and stage never collapse */
@supports not (height:1svh){
  .apS.is-armed .apS__track{height:420vh}
  .apS__pin{height:100vh}
}
/* iPhone memory (s2_mem.py): one flat layer per phone in the lite path */
.apS2--lite .ap-ph,.apS2--lite .ap-ph__body{transform-style:flat}
.apS2--lite .ap-ph__z{display:none}
.apS2.apS2--lite .ap-ph__body{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16),inset 0 2px 1px rgba(255,255,255,.28),inset 0 -2px 2px rgba(0,0,0,.6),0 40px 80px -36px rgba(0,0,0,.9)}