/* Site-wide effects (loaded on every page by inc/head.php; behaviour in assets/js/fx.js).
   Scroll reveals · hover tips · the interactive workflow strip · step walk-throughs · page-to-page transitions.
   House rule: animate only transform and opacity. Everything here is switched off for prefers-reduced-motion. */

/* ---- scroll reveal: fx.js tags the blocks, so a page with no JavaScript is never hidden ---- */
.fx-on [data-fx]{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--fx-i,0) * 70ms)}
.fx-on [data-fx].fx-in{opacity:1;transform:none}

/* ---- hover tips: add data-tip="..." (and tabindex="0" if the element is not already focusable) ---- */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;left:0;bottom:calc(100% + 8px);z-index:20;width:max-content;max-width:min(260px,70vw);padding:8px 10px;background:var(--ink);color:var(--paper);font:400 13px/1.4 var(--f-body);letter-spacing:0;text-transform:none;text-align:left;white-space:normal;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;pointer-events:none}
[data-tip].tip-end::after{left:auto;right:0}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;transform:none}
[data-tip]:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* ---- interactive workflow strip (inc/flow.php) ---- */
.wf{position:relative}
.wf-track{display:flex;flex-wrap:wrap;gap:10px 0;margin:0;padding:0;list-style:none}
.wf-step{position:relative;display:flex;align-items:center}
.wf-step:not(:last-child)::after{content:"";flex:0 0 18px;width:18px;height:2px;background:var(--g2)}
.wf-step:not(:last-child)::before{content:"";position:absolute;right:0;top:calc(50% - 1px);width:18px;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease)}
.wf-step.is-done::before{transform:scaleX(1)}
.wf-node{position:relative;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1.5px solid var(--ink);background:var(--bone);color:var(--ink);font-family:var(--f-mono);font-size:12px;line-height:1.2;cursor:pointer;transition:transform .25s var(--ease)}
.wf-node::before,.wf-node::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s}
.wf-node::before{background:var(--signal)}
.wf-node::after{background:var(--teal-pale)}
.wf-n,.wf-t{position:relative;z-index:1}
.wf-n{font-weight:700;color:var(--sig-deep)}
.wf-node:hover,.wf-step.is-on .wf-node{transform:translateY(-3px)}
.wf-step.is-done .wf-node::after{opacity:1}
.wf-step.is-on .wf-node::before,.wf-node:hover::before{opacity:1}
.wf-step.is-on .wf-n,.wf-node:hover .wf-n{color:var(--ink)}
.wf-node:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.wf-tip{display:none}
.wf-cap{margin:14px 0 0;min-height:4.4em;padding:2px 0 2px 12px;border-left:3px solid var(--teal);font-size:14px;line-height:1.45;color:var(--t2);transition:opacity .18s}
.wf-cap.is-swap{opacity:0}
.wf-cap strong{display:block;font-family:var(--f-mono);font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);margin-bottom:2px}
.wf-play{margin-top:6px;padding:6px 0;border:0;background:none;color:var(--ink);font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.wf-play:hover{color:var(--sig-deep)}
.wf-play:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
@media (hover:hover) and (min-width:901px){
  /* the tip opens above its step, so the steps still to come stay visible */
  .wf-tip{display:block;position:absolute;left:50%;bottom:calc(100% + 12px);z-index:15;width:max-content;max-width:240px;padding:10px 12px;background:var(--ink);color:var(--paper);font:400 13px/1.45 var(--f-body);opacity:0;transform:translate(-50%,-6px);transition:opacity .2s,transform .2s;pointer-events:none}
  .wf-tip::before{content:"";position:absolute;left:calc(50% - 5px);bottom:-5px;width:10px;height:10px;background:var(--ink);transform:rotate(45deg)}
  .wf-step:hover .wf-tip,.wf-step:focus-within .wf-tip{opacity:1;transform:translate(-50%,0)}
  .wf-step.tip-l .wf-tip{left:0;transform:translate(0,-6px)}
  .wf-step.tip-l:hover .wf-tip,.wf-step.tip-l:focus-within .wf-tip{transform:none}
  .wf-step.tip-l .wf-tip::before{left:18px}
  .wf-step.tip-r .wf-tip{left:auto;right:18px;transform:translate(0,-6px)}
  .wf-step.tip-r:hover .wf-tip,.wf-step.tip-r:focus-within .wf-tip{transform:none}
  .wf-step.tip-r .wf-tip::before{left:auto;right:18px}
}

/* ---- numbered step lists (Laboratory pages): hover, and a one-time walk-through when they scroll into view ---- */
.flow-steps .step{transition:transform .3s var(--ease)}
.flow-steps .step-no{transition:transform .3s var(--ease)}
.flow-steps .step:hover,.flow-steps .step.is-on{transform:translateX(8px)}
.flow-steps .step:hover .step-no,.flow-steps .step.is-on .step-no{transform:scale(1.08) rotate(-3deg)}

/* ---- "live" marker on a status tag ---- */
.tag-live::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:currentColor;vertical-align:1px;animation:fx-pulse 1.8s ease-in-out infinite}
@keyframes fx-pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ---- page-to-page transition (browsers without it simply navigate as before) ---- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.26s}
}

@media (prefers-reduced-motion:reduce){
  .fx-on [data-fx]{opacity:1;transform:none;transition:none}
  [data-tip]::after,.wf-tip,.wf-node,.wf-node::before,.wf-node::after,.wf-step::before,.wf-cap,.flow-steps .step,.flow-steps .step-no{transition:none}
  .wf-node:hover,.wf-step.is-on .wf-node,.flow-steps .step:hover,.flow-steps .step.is-on,.flow-steps .step:hover .step-no,.flow-steps .step.is-on .step-no{transform:none}
  .tag-live::before{animation:none}
}
@media print{
  [data-fx]{opacity:1!important;transform:none!important}
  .wf-play{display:none}
}