/* PharmaSynapse - design system v4
   Page layer - home
   Generated from the standalone build. Edit here, not in the pages. */



/* Everything here belongs to the homepage alone.
   The header logo cut runs on the hero only (L10), and the G1, G2 and
   G4 loops drive graphics that exist on no other page. Left in
   marketing.css, every page would animate its own mark. Each loop is an
   explicit override of the 250ms motion cap, recorded at its own site
   below and in the build order. */


/* The logo cut. The design system ships the animated cut as
   assets/logos/pharmasynapse-mark-animated.svg, which is the static mark plus
   one pip circle at r=4.2, opacity 0, and no animation of its own: the asset
   defines WHAT moves and leaves the motion to the page. That pip is carried
   into both lockups above and driven here.
   The pip travels the connector and stops dead at its end. It never reaches
   the disc. That gap is the brand thesis and the same gap as the product's:
   the machine's signal stops, and a person carries it across.
   Capture-safe by construction: the mark is fully drawn at every instant and
   the pip is purely additive, so no clone, screenshot or print can catch the
   logo half-built. That was the defect in the bespoke draw-and-land
   implementation this replaces. */
.site-header .logo-lockup .cut-pip{animation:cutpip 3.2s var(--ease-io) infinite}
@keyframes cutpip{
  0%{transform:translateX(0);opacity:0}
  16%{opacity:1}
  62%{transform:translateX(24px);opacity:1}
  74%,100%{transform:translateX(24px);opacity:0}
}

/* G1 travelling pips. Values move down the connector and fade out AT the gap,
   never across it: the animation makes the same argument the static graphic
   makes. All three circles sit at cy=184 in the markup and are staggered by
   negative delays; the specced static positions (184 / 208 / 232, the 25 / 50
   / 75 percent marks) are restored under reduced motion below.
   OVERRIDE, recorded: build order section 5 specced G1 as static and capped
   motion at 250ms. This loop is an explicit instruction from the page owner
   and supersedes both, and acceptance criterion 14 changes with it. */
.g1-pip{animation:g1travel 3.6s linear infinite}

.g1-pip-2{animation-delay:-1.2s}

.g1-pip-3{animation-delay:-2.4s}

@keyframes g1travel{
  0%{transform:translateY(-24px);opacity:0}
  14%{opacity:1}
  76%{transform:translateY(56px);opacity:1}
  100%{transform:translateY(68px);opacity:0}
}

/* G2 lifecycle rail. Two motions only, and both make the diagram's own
   argument: stage 02 is ours, the other four are not.
   1. A pip travels the teal segment and is absorbed at node 02. It enters from
      the stage-01 side and stops dead at our node. It NEVER continues into 03,
      04 or 05: movement across all five stages would read as a process flow
      and imply we carry the document through execution, review and release,
      which is the one thing this graphic exists to deny. That is also why the
      prompt bans arrowheads.
   2. Node 02's outer ring breathes. Nothing else on the rail moves.
   OVERRIDE, recorded: supersedes the 250ms cap and section 5's static-graphics
   rule, as G1 does. */
.g2-ring{transform-box:fill-box;transform-origin:center;animation:g2breathe 3.4s var(--ease-io) infinite}

@keyframes g2breathe{
  0%,100%{transform:scale(1);opacity:.35}
  50%{transform:scale(1.16);opacity:.7}
}

.g2-pip{animation:g2travel 3.4s var(--ease-io) infinite}

@keyframes g2travel{
  0%{transform:translateX(0);opacity:0}
  12%{opacity:1}
  62%{transform:translateX(88px);opacity:1}
  76%,100%{transform:translateX(100px);opacity:0}
}

.g2-pip-m{animation:g2travel-m 3.4s var(--ease-io) infinite}

@keyframes g2travel-m{
  0%{transform:translateY(0);opacity:0}
  12%{opacity:1}
  62%{transform:translateY(63px);opacity:1}
  76%,100%{transform:translateY(75px);opacity:0}
}

/* G4 signature gate. A 5.2s sequence with a deliberate HOLD in the middle, and
   the hold is the entire point: the inbound arrow brightens toward the gate,
   then EVERYTHING STOPS while nothing happens on its own, then the gate fires
   and only afterwards does the outbound arrow brighten. A continuous flow
   through the gate would animate the exact claim section 5 exists to deny
   ("Nothing crosses that gate on its own"), so the pause is load-bearing
   motion, not padding. The two cards never move: their sameness is the
   argument. Only the arrows and the gate ring carry the sequence.
   OVERRIDE, recorded: supersedes the 250ms cap and section 5's static-graphics
   rule, as G1 and G2 do. */
.g4-in{animation:g4in 5.2s var(--ease-io) infinite}

.g4-out{animation:g4out 5.2s var(--ease-io) infinite}

.g4-in-m{animation:g4in-m 5.2s var(--ease-io) infinite}

.g4-out-m{animation:g4out-m 5.2s var(--ease-io) infinite}

.g4-pulse{transform-box:fill-box;transform-origin:center;animation:g4pulse 5.2s var(--ease-io) infinite}

@keyframes g4in{
  0%,3%{opacity:.5;transform:translateX(-7px)}
  15%,27%{opacity:1;transform:translateX(0)}
  38%,100%{opacity:.5;transform:translateX(0)}
}

@keyframes g4out{
  0%,52%{opacity:.5;transform:translateX(0)}
  64%,76%{opacity:1;transform:translateX(7px)}
  88%,100%{opacity:.5;transform:translateX(0)}
}

@keyframes g4in-m{
  0%,3%{opacity:.5;transform:translateY(-7px)}
  15%,27%{opacity:1;transform:translateY(0)}
  38%,100%{opacity:.5;transform:translateY(0)}
}

@keyframes g4out-m{
  0%,52%{opacity:.5;transform:translateY(0)}
  64%,76%{opacity:1;transform:translateY(7px)}
  88%,100%{opacity:.5;transform:translateY(0)}
}

/* The gate fires only after the hold. */
@keyframes g4pulse{
  0%,40%{opacity:0;transform:scale(1)}
  46%{opacity:.8;transform:scale(1)}
  62%,100%{opacity:0;transform:scale(1.52)}
}

@media(prefers-reduced-motion:reduce){
  html:has(body.mkt){scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  /* The mark renders at rest: the shipped lockup, with the pip hidden exactly
     as the design system's animated asset ships it. */
  .cut-pip{opacity:0}
  .rv{opacity:1}
  .g1-pip{opacity:1}
  .g1-pip-2{transform:translateY(24px)}
  .g1-pip-3{transform:translateY(48px)}
  /* G2 returns to its specced static state: the ring at rest at 35 percent,
     and the travelling pip hidden. The pip is added motion, not content, so
     removing it loses nothing from the diagram. */
  .g2-ring{opacity:.35;transform:none}
  .g2-pip,.g2-pip-m{opacity:0}
  /* G4 returns to its specced static state: both arrows fully drawn, the
     added pulse ring hidden. Nothing in the diagram is lost. */
  .g4-in,.g4-out,.g4-in-m,.g4-out-m{opacity:1;transform:none}
  .g4-pulse{opacity:0}
}

@media(prefers-reduced-motion:reduce){
  .g1-pip{opacity:1}
  .g1-pip-2{transform:translateY(24px)}
  .g1-pip-3{transform:translateY(48px)}
  .g2-ring{opacity:.35;transform:none}
  .g2-pip,.g2-pip-m{opacity:0}
  .g4-in,.g4-out,.g4-in-m,.g4-out-m{opacity:1;transform:none}
  .g4-pulse{opacity:0}
}