/* =============================================================================
   ShiftHawk — hero provider orbit (Section 1)

   Official scheduling-provider logo tiles drifting slowly around the hero
   phone — the "we read them all, whatever your workplace runs" signal.
   Every tile is a link into /how-to-connect#<provider> (that provider's
   step-by-step connect guide).

   Contract:
     • Base layout = a static scattered arrangement (absolute slots around
       the phone). That IS the prefers-reduced-motion / no-JS state.
     • Drift only runs under (prefers-reduced-motion: no-preference) AND
       once hero-provider-orbit.js adds .hpo-drift (in-view via IO). JS also
       jitters each tile's --hpo-dur / --hpo-delay so the drift reads as
       random, unsynchronized slow-mo.
     • < 920px the orbit becomes a wrapped static row above the phone
       (same pattern as the hero float-chips).
   ========================================================================== */

/* --hpo-caption-clear = the protected clear-zone reserved for the caption.
   The orbit's coordinate origin starts BELOW it and the caption reserves it as
   min-height, so no floating tile can ever enter the heading band. Sized for the
   worst case (3-line subhead at the narrowest desktop, ~921px). */
.hero-phone-wrap { position: relative; --hpo-caption-clear: 126px; }

/* --------------------------------------------------------------- caption */
.hpo-caption { text-align: center; margin: 0 0 var(--s-4); position: relative; z-index: 4; min-height: var(--hpo-caption-clear); }
.hpo-caption h2 {
  font-size: 1.15rem; font-weight: 800; color: #fff; margin: 0 0 2px;
  letter-spacing: .01em;
}
.hpo-caption p { font-size: .8rem; color: var(--ink-text-2); margin: 0; }
.hpo-caption p :is(.ph, .ph-bold) { color: var(--primary-bright); vertical-align: -1px; }
/* the "works with anything" compatibility promise — prominent, pairs with the
   headline + the drifting logos */
.hpo-caption .hpo-compat {
  font-size: .95rem; font-weight: 700; line-height: 1.35;
  color: var(--primary-tint); margin: 4px auto 5px; max-width: 34ch;
}
.hpo-caption .hpo-hint { font-size: .78rem; }

/* ----------------------------------------------------------------- orbit */
.hpo {
  position: absolute; z-index: 1;         /* chips (z:3) stay above; phone paints over via DOM order */
  inset: var(--hpo-caption-clear) -34px -10px;  /* origin starts below the caption clear-zone */
  pointer-events: none;                   /* tiles re-enable their own */
}
.hpo-logo {
  --hpo-dur: 10s;
  --hpo-delay: 0s;
  position: absolute;
  width: 46px; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 7px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 13px;
  box-shadow: 0 6px 18px rgba(2, 8, 20, .45);
  pointer-events: auto;
  text-decoration: none;
  transition: box-shadow .18s ease;
}
.hpo-logo img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  border-radius: 4px;
  transition: transform .18s ease;
}
.hpo-logo:hover, .hpo-logo:focus-visible {
  box-shadow: 0 8px 24px rgba(34, 211, 238, .4), 0 0 0 2px var(--primary-bright);
  z-index: 5;
}
.hpo-logo:hover img, .hpo-logo:focus-visible img { transform: scale(1.12); }
.hpo-logo:focus-visible { outline: none; }

/* size variety — breadth without noise */
.hpo-lg { width: 52px; border-radius: 15px; }
.hpo-sm { width: 38px; padding: 6px; border-radius: 11px; }
/* wide wordmark (e.g. MedRez) — keep its aspect, don't squash into a square */
.hpo-wide { width: 74px; aspect-ratio: 74 / 34; border-radius: 11px; padding: 6px 9px; }
.hpo-wide img { border-radius: 2px; }

/* ------------------------------------------------- scattered slot layout
   21 tiles around the phone, industry-interleaved so the breadth reads
   (mirrors Section 2's industries). fc-1/fc-2/fc-3 swap chips (z:3) render
   above tiles; slots leave them air where practical.
   Left flank (6) · left-lower (1) · right flank (6) · right-lower (1) ·
   top arc (2) · bottom arc (5).                                          */
.hpo-p1  { top: 2%;   left: 8%; }
.hpo-p2  { top: 16%;  left: -4%; }
.hpo-p3  { top: 30%;  left: 2%; }
.hpo-p4  { top: 45%;  left: -6%; }
.hpo-p5  { top: 60%;  left: 0%; }
.hpo-p6  { top: 74%;  left: -4%; }
.hpo-p7  { top: 86%;  left: 10%; }
.hpo-p8  { top: 3%;   right: 8%; }
.hpo-p9  { top: 17%;  right: -3%; }
.hpo-p10 { top: 31%;  right: 3%; }
.hpo-p11 { top: 46%;  right: -6%; }
.hpo-p12 { top: 60%;  right: 1%; }
.hpo-p13 { top: 74%;  right: -4%; }
.hpo-p14 { top: 86%;  right: 9%; }
/* top arc — sit at the phone's top edge (inside the clear-zone floor).
   Positive tops keep them below the reserved caption band; the wide left/right
   keeps them clear of the top-corner flank tiles (p1 left:8% / p8 right:8%). */
.hpo-p15 { top: 1%;   left: 28%; }
.hpo-p16 { top: 1%;   right: 28%; }
/* bottom arc */
.hpo-p17 { bottom: -4%; left: 24%; }
.hpo-p18 { bottom: -6%; left: 44%; }
.hpo-p19 { bottom: -4%; right: 24%; }
.hpo-p20 { bottom: 8%;  left: 12%; }
.hpo-p21 { bottom: 8%;  right: 12%; }

/* -------------------------------------------------------------- drifting */
@media (prefers-reduced-motion: no-preference) {
  .hpo.hpo-drift .hpo-logo { animation: var(--hpo-anim, hpo-drift-a) var(--hpo-dur) ease-in-out var(--hpo-delay) infinite alternate; }
  .hpo.hpo-drift .hpo-logo:nth-child(4n+1) { --hpo-anim: hpo-drift-a; }
  .hpo.hpo-drift .hpo-logo:nth-child(4n+2) { --hpo-anim: hpo-drift-b; }
  .hpo.hpo-drift .hpo-logo:nth-child(4n+3) { --hpo-anim: hpo-drift-c; }
  .hpo.hpo-drift .hpo-logo:nth-child(4n)   { --hpo-anim: hpo-drift-d; }
}
@keyframes hpo-drift-a { from { transform: translate(0, 0) rotate(0deg); }   to { transform: translate(9px, -13px) rotate(2.2deg); } }
@keyframes hpo-drift-b { from { transform: translate(0, 0) rotate(0deg); }   to { transform: translate(-11px, 9px) rotate(-2.6deg); } }
@keyframes hpo-drift-c { from { transform: translate(0, 0) rotate(0deg); }   to { transform: translate(7px, 11px) rotate(1.8deg); } }
@keyframes hpo-drift-d { from { transform: translate(0, 0) rotate(0deg); }   to { transform: translate(-9px, -10px) rotate(-2deg); } }

/* ------------------------------------------------------------ disclaimer */
.hpo-disclaimer {
  text-align: center; font-size: .68rem; line-height: 1.5;
  color: var(--ink-text-2); opacity: .75;
  margin: var(--s-4) auto 0; max-width: 46ch;
  position: relative; z-index: 4;
}

/* ------------------------------------------------------- mobile fallback */
@media (max-width: 920px) {
  /* static wrapped row — the desktop caption clear-zone is not needed here */
  .hpo-caption { min-height: 0; }
  .hpo {
    position: static; inset: auto; pointer-events: auto;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    margin: 0 0 var(--s-4);
  }
  .hpo-logo, .hpo-lg, .hpo-sm {
    position: static; width: 40px; padding: 6px; border-radius: 11px;
  }
  .hpo.hpo-drift .hpo-logo { animation: none; }
}