/* HÆLTH x6 — the interaction layer (After Standard, Oct 27 2026). Loaded after every page's own CSS.
   1 · page change: the page you leave sinks back into the dark, the next one rises over it as a panel
   2 · cards answer the pointer: a light runs along the border under the cursor (phones: one pass as the card arrives)
   3 · films open like the home hero (a frame that widens to the edges) and drift a little against the scroll
   4 · a reading hairline at the top of every page
   5 · touch: every card and button gives under the finger */

/* ---------- 1 · page change ----------
   (Oct 27 v2) the page change is pages.css's own (fade + the vial / care-path photo that flies into the next page).
   The full-page sink with a brightness filter was dropped: filtering a whole-page snapshot dropped frames on phones and
   fought the flying image. */

/* ---------- 2 · light along the card border ---------- */
@property --lx{syntax:'<length-percentage>';inherits:true;initial-value:50%}
@property --ly{syntax:'<length-percentage>';inherits:true;initial-value:50%}
.x6-lit,.x6-wash{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .45s var(--ease,ease)}
.x6-lit{padding:1px;
  background:radial-gradient(260px circle at var(--lx) var(--ly),rgba(170,196,255,.9),rgba(61,123,255,.32) 38%,rgba(61,123,255,0) 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.x6-wash{z-index:0;background:radial-gradient(420px circle at var(--lx) var(--ly),rgba(61,123,255,.075),rgba(61,123,255,0) 62%)}
.x6-on>.x6-lit,.x6-on>.x6-wash{opacity:1}
.x6-card{position:relative}
.srcbox.x6-card>*:not(.x6-lit):not(.x6-wash){position:relative;z-index:1}
.pcard__vial>.x6-wash{z-index:1}
@keyframes x6-sweep{0%{--lx:-25%;--ly:0%;opacity:0}18%{opacity:1}82%{opacity:1}100%{--lx:125%;--ly:100%;opacity:0}}
.x6-sweep>.x6-lit{animation:x6-sweep 1.5s cubic-bezier(.45,0,.2,1) both}

/* ---------- 3 · films open and drift ---------- */
.x6-film{clip-path:inset(7% 5% 8% 5% round 8px);transition:clip-path 1.3s cubic-bezier(.7,0,.18,1)}
.x6-film.x6-open{clip-path:inset(0 0 0 0 round 0)}
.x6-film>img,.x6-film>video{transform:translate3d(0,var(--x6py,0px),0) scale(1.08);will-change:transform}
@media (prefers-reduced-motion:reduce){.x6-film{clip-path:none!important;transition:none}.x6-film>img,.x6-film>video{transform:none}}

/* ---------- 4 · reading hairline ---------- */
.x6-prog{position:fixed;left:0;right:0;top:0;z-index:95;height:2px;pointer-events:none;transform-origin:0 50%;transform:scaleX(var(--x6p,0));
  background:linear-gradient(90deg,rgba(61,123,255,0),var(--signal,#3d7bff) 30%,#c9d8ff);opacity:.85;transition:opacity .4s}
.x6-prog.is-idle{opacity:0}
@media (prefers-reduced-motion:reduce){.x6-prog{display:none}}

/* ---------- 5 · touch: things give under the finger ----------
   an animation on `scale` (its own property) so no element loses its own transitions (card entrances, button fills) */
@keyframes x6-press{to{scale:var(--x6s,.985)}}
@media (hover:none){
  .pcard:active,.srcbox:active,.mcard:active,.path:active,.btn:active,.dock__btn:active{animation:x6-press .18s cubic-bezier(.2,.7,.1,1) forwards}
  .btn:active,.dock__btn:active{--x6s:.96}
}
@media (prefers-reduced-motion:reduce){.pcard:active,.srcbox:active,.mcard:active,.path:active,.btn:active,.dock__btn:active{animation:none}}