/* ==========================================================================
   Polypus Medical v2, motion below the hero (motion.js drives it).
   Same instrument as the hero: orbits draw, a sonar ping travels, nodes light.
   - Every hidden-until-revealed state lives under html.m-on, which only
     motion.js adds (never under reduced motion). No JS = everything visible.
   - One-shot reveals: transform, opacity, clip-path, stroke-dashoffset.
   - One ambient loop (contact sonar), paused off-screen, tab hidden, or when
     the hero pause button is pressed.
   ========================================================================== */

/* ---------- Partners: a static orbit network (also the reduced-motion state) ---------- */

.partners {
  position: relative;
  --nx: 1.35rem;                 /* node centre, from the row's left edge */
  --bw: 0.6rem;                  /* bulge of the arc between two neighbours */
  --bw2: 1.2rem;                 /* bulge of the outer arc, first to last */
  --ny: calc(clamp(1.3rem, 3.4vh, 2.1rem) + 0.575 * clamp(1.3rem, 0.95rem + 1.5vw, 2.25rem));
}
.partners li { position: relative; padding-left: 2.9rem; }
/* the row rules start at the names, the margin belongs to the network */
.partners li + li {
  border-top-color: transparent;
  background: linear-gradient(var(--line), var(--line)) 2.9rem 0 / 100% 1px no-repeat border-box;
}
.partners li::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: calc(var(--nx) - 5.5px);
  top: calc(var(--ny) - 5.5px);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--bone);
  background: var(--abyss);
}
.partners li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--nx) - var(--bw));
  top: var(--ny);
  width: calc(2 * var(--bw));
  height: calc(100% + 1px);      /* this node to the next one: same offset in the next row */
  border: 1px solid var(--orbit);
  border-radius: 50%;
  clip-path: inset(0 50% 0 0);
  pointer-events: none;
}
.partners.m-net::before {
  content: "";
  position: absolute;
  left: calc(var(--nx) - var(--bw2));
  top: var(--ny);
  width: calc(2 * var(--bw2));
  height: var(--m-span, 0px);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  clip-path: inset(0 50% 0 0);
  pointer-events: none;
}
@media (max-width: 700px) {
  .partners li { padding-left: 2.6rem; }
  .partners li + li { background-position: 2.6rem 0; }
}

/* ---------- Shared keyframes ---------- */

@keyframes m-ring {
  from { opacity: 0.85; transform: scale(1); }
  to   { opacity: 0; transform: scale(var(--m-ring-s, 3)); }
}
@keyframes m-sonar {
  0%   { opacity: 0; transform: scale(0.42); }
  10%  { opacity: 0.6; }
  100% { opacity: 0; transform: scale(2.5); }
}
@keyframes m-frame {
  from { opacity: 0.9; transform: scale(0.87, 0.66); }
  to   { opacity: 0; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {

  /* ---------- Rise: text blocks, list items ---------- */
  .m-on [data-m="rise"] {
    transition: opacity 700ms var(--ease-out) var(--m-d, 0ms), transform 900ms var(--ease-out) var(--m-d, 0ms);
  }
  .m-on [data-m="rise"]:not(.m-in) { opacity: 0; transform: translateY(14px); }

  /* ---------- Split: headings rise line by line out of a mask ---------- */
  .m-on [data-m="split"]:not(.m-split):not(.m-done) { opacity: 0; }
  .m-line {
    display: block;
    clip-path: inset(-0.14em -1em -0.2em -1em);
  }
  .m-li {
    display: block;
    transform: translateY(135%);
    transition: transform 1000ms var(--ease-out) var(--m-d, 0ms);
  }
  [data-m="split"].m-in .m-li { transform: none; }

  /* ---------- List markers draw their ring ---------- */
  .m-on .m-marked::before { opacity: 0; }
  .m-mark {
    position: absolute;
    left: 0;
    overflow: visible;
    transform: rotate(-90deg);
    pointer-events: none;
  }
  .m-mark circle {
    fill: none;
    stroke: var(--amber);
    stroke-width: 1.5;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 800ms var(--ease-out) calc(var(--m-d, 0ms) + 160ms);
  }
  .m-in > .m-mark circle { stroke-dashoffset: 0; }

  /* ---------- Projects: a node beside the name lights and pings when the project is active ---------- */
  .m-node { position: absolute; pointer-events: none; border-radius: 50%; transition: opacity 500ms ease; }
  .proj:not(.m-in) .m-node { opacity: 0; }
  .m-node::after {
    content: "";
    position: absolute;
    inset: -1.5px;
    border-radius: 50%;
    border: 1px solid var(--amber);
    opacity: 0;
  }
  .m-node.m-pinged::after { animation: m-ring 1300ms var(--ease-out) both; }
  @media (min-width: 1024px) {
    .m-on .proj-head { position: relative; }
    .m-node {
      left: -2.1rem;
      top: calc(0.44 * clamp(2.5rem, 1.4rem + 3.4vw, 4.7rem) - 6px);
      width: 12px;
      height: 12px;
      border: 1.5px solid var(--steel-dim);
      --m-ring-s: 3.4;
      transition: opacity 500ms ease, border-color 300ms ease, background-color 300ms ease;
    }
    .m-node.is-on { border-color: var(--amber); background: var(--amber); }
  }
  @media (max-width: 1023px) {
    .m-on .proj-head { position: relative; }
    .m-node {
      left: 1.3rem;
      top: 1.3rem;
      width: calc(2.6rem * var(--m-on, 0.5));
      aspect-ratio: 1;
      translate: -50% -50%;
      --m-ring-s: 1.8;
    }
    .proj[data-p="atract"] { --m-on: 0.36; }
    .proj[data-p="step"] { --m-on: 0.54; }
    .proj[data-p="gps"] { --m-on: 0.72; }
    .proj[data-p="docstrive"] { --m-on: 0.9; }
  }

  /* ---------- Holding: the three years show at once, dimmed; the arc draws, one ping rides it and lights each year ---------- */
  .m-on .m-track:not(.m-drawn) .track-arc { clip-path: inset(0 100% 0 0); }
  .m-on .m-track:not(.m-drawn) .track::before { transform: scaleY(0); }
  .m-on .m-track .track::before { transform-origin: 50% 0; }
  .m-on .m-track li::before { transition: opacity 300ms ease, scale 700ms var(--ease-out); }
  .m-on .m-track li:not(.m-lit)::before { opacity: 0.4; scale: 0.7; }
  .m-on .m-track .year,
  .m-on .m-track .what { transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); }
  .m-on .m-track .what { transition-delay: 90ms; }
  .m-on .m-track li:not(.m-lit) .year,
  .m-on .m-track li:not(.m-lit) .what { opacity: 0.34; }
  .m-on .m-track li::after {
    content: "";
    position: absolute;
    left: calc(50% - 5.5px);
    top: calc(var(--lift) * var(--arc-h) - var(--arc-h) - var(--drop) - 5.5px);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1px solid var(--steel);
    opacity: 0;
    pointer-events: none;
  }
  .m-on .m-track li.is-now::after { border-color: var(--amber); }
  .m-on .m-track li.m-lit::after { animation: m-ring 1300ms var(--ease-out) both; }
  @media (max-width: 860px) {
    .m-on .m-track li::after { left: -2.2rem; top: 0.55rem; }
  }
  .m-ping {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: 50%;
    background: var(--amber);
    pointer-events: none;
    opacity: 0;
  }
  .m-ping::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px solid var(--amber);
    opacity: 0.4;
  }

  /* ---------- Partners: nodes light in turn, arcs draw between them ---------- */
  .partners li:nth-child(1) { --m-t: 0ms; }
  .partners li:nth-child(2) { --m-t: 460ms; }
  .partners li:nth-child(3) { --m-t: 920ms; }
  .m-on .partners.m-fx li::before { transition: opacity 300ms ease var(--m-t), scale 700ms var(--ease-out) var(--m-t); }
  .m-on .partners.m-fx li::after { transition: clip-path 420ms var(--ease-in-out) calc(var(--m-t) + 60ms); }
  .m-on .partners.m-fx::before { transition: clip-path 1500ms var(--ease-in-out) 120ms; }
  .m-on .partners.m-fx .p-name,
  .m-on .partners.m-fx .p-role {
    transition: opacity 700ms var(--ease-out) calc(var(--m-t) + 80ms), transform 900ms var(--ease-out) calc(var(--m-t) + 80ms);
  }
  .m-on .partners.m-fx .p-role { transition-delay: calc(var(--m-t) + 150ms); }
  .m-on .partners.m-fx:not(.m-in) li::before { opacity: 0; scale: 0.5; }
  .m-on .partners.m-fx:not(.m-in) li::after,
  .m-on .partners.m-fx:not(.m-in)::before { clip-path: inset(0 50% 100% 0); }
  .m-on .partners.m-fx:not(.m-in) .p-name,
  .m-on .partners.m-fx:not(.m-in) .p-role { opacity: 0; transform: translateY(12px); }
  .m-pip {
    position: absolute;
    z-index: 1;
    left: calc(var(--nx) - 5.5px);
    top: calc(var(--ny) - 5.5px);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1px solid var(--bone);
    opacity: 0;
    pointer-events: none;
    --m-ring-s: 3.2;
  }
  .partners.m-in .m-pip { animation: m-ring 1300ms var(--ease-out) var(--m-t) both; }

  /* ---------- Contact: rings settle, then a slow sonar leaves their centre ---------- */
  .m-on .contact .contact-orbits > circle {
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity 1200ms var(--ease-out), transform 1400ms var(--ease-out);
  }
  .m-on .contact .contact-orbits > circle:nth-of-type(2) { transition-delay: 70ms; }
  .m-on .contact .contact-orbits > circle:nth-of-type(3) { transition-delay: 140ms; }
  .m-on .contact .contact-orbits > circle:nth-of-type(4) { transition-delay: 210ms; }
  .m-on .contact:not(.m-in) .contact-orbits > circle { opacity: 0; transform: scale(0.93); }
  .m-sonar circle {
    fill: none;
    stroke: var(--orbit-bright);
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: m-sonar 13.5s linear infinite;
    animation-play-state: paused;
  }
  .m-sonar circle:nth-child(2) { animation-delay: -4.5s; }
  .m-sonar circle:nth-child(3) { animation-delay: -9s; }
  .contact.m-live .m-sonar circle { animation-play-state: running; }
  .m-sonar { transition: opacity 1600ms ease 600ms; }
  .contact:not(.m-in) .m-sonar { opacity: 0; }

  /* CTA: one ping lands on it when the section arrives; hover shows a lock frame, press tightens it */
  .m-cta { position: relative; }
  .m-cta::before,
  .m-cta::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border: 1px solid var(--amber);
    opacity: 0;
  }
  .m-cta::before { inset: -14px; }
  .contact.m-in .m-cta::before { animation: m-frame 1300ms var(--ease-out) 1000ms both; }
  .m-cta::after {
    inset: -7px;
    transform: scale(0.96, 0.86);
    transition: opacity 180ms ease, transform 260ms var(--ease-out);
  }
  .m-cta:active::after { opacity: 1; transform: scale(0.985, 0.94); transition-duration: 100ms; }
  @media (hover: hover) and (pointer: fine) {
    .m-cta:hover::after { opacity: 1; transform: none; }
    .m-cta:hover:active::after { transform: scale(0.985, 0.94); }
  }
}

/* ---------- Light parallax on one decorative element (scroll-driven, no JS) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes m-drift {
      from { translate: 0 64px; }
      to   { translate: 0 -64px; }
    }
    .m-on .contact-orbits {
      animation: m-drift linear both;
      animation-timeline: view();
      animation-range: cover;
    }
  }
}