/* ============================================================
   Nova FX · pillfx.css — hero compatibility pill (.ccp-*)
   Dark navy #04091a · accents #2f6bff / #38bdf8
   All selectors namespaced .ccp-*, keyframes ccp-*, prop --ccpb.
   Motion = transform / opacity / mask only.
   prefers-reduced-motion → static end states (the count digits
   land at their final values via the pillfx.js RM branch).
   ============================================================ */

/* ------------------------------------------------------------
   0 · dock anchor
   nova.css already gives the hero column a positioning context
   (.hero .container{position:relative;z-index:2}); repeated
   here so the pack is standalone against the bundled sheet.

   .rv-conflict resolution (the choice, documented):
   .ccp-dock is a ZERO-HEIGHT flex line pinned at top:47% of
   the hero column. align-items:center centers the pill on
   that line, so vertical centering needs no transform on the
   dock at all. The page's [data-rv] reveal adds .rv/.rv.in
   (transform:translateY(24px) → none) to the dock; with a
   transform-free anchor those classes stay the only writer of
   the dock's transform and the entrance is clean. (A
   translateY(-50%) centering on the dock would be overwritten
   by .rv/.rv.in and the pill would jump on reveal; a
   top:calc(47% - 19px) half-height guess would silently break
   if the chip's height ever changes. The 0-height flex line
   self-adapts and never fights .rv.)

   right:0 (per the dock spec) = flush with the container's
   padding-box right edge. Nothing crosses the viewport edge
   at any width ≥861px (861-1139px the container spans the
   viewport; scrollbar-gutter:stable keeps the pill clear of
   the scrollbar), so html's overflow-x:clip never touches it.

   Geometry note, measured for the screenshot pass: the landed
   chip is ~465px wide; the container's content box is capped
   at 1092px and the centered h1 line 2 ("Zero compromises.")
   is ~600px wide → only ~246px free per side. At top:47% the
   chip's left-bottom region can graze line 2's tail glyphs
   (up to ~30px of their lower halves) depending on where the
   column height lands. If a screenshot shows it, the knob is
   a single number: top:47% → 52%.
   ------------------------------------------------------------ */
.hero>.container{position:relative;z-index:2}
/* Dock: right-aligned chip row directly above the h1 (replaces
   the old centered eyebrow). Full-width flex line → zero graze
   with the headline at every viewport; ≤860px centers. */
.ccp-dock{display:flex;align-items:center;justify-content:flex-end;margin:4px 0 0;z-index:3}

/* ------------------------------------------------------------
   1 · .ccp — the chip
   overflow:hidden is what clips the sheen band (§3); the beam
   ring (§4) is therefore an inner-edge ring (inset:0 +
   padding:1px), the same construction the site's .ifx-beam /
   .nconn-shell rings already use — an inset:-1px outer ring
   would be clipped by this same overflow to a 0-1px sliver.
   The transition re-includes the .ifx-magnet transform curve:
   this sheet loads after b-index.css (which embeds
   interact.css), so a later transform-less transition
   property would drop the pre-bound magnet's spring at equal
   specificity. Border/glow timing rides the same declaration.
   ------------------------------------------------------------ */
.ccp{position:relative;display:inline-flex;align-items:center;gap:11px;
  padding:10px 17px 10px 11px;border-radius:999px;overflow:hidden;white-space:nowrap;
  font-size:11.5px;font-weight:700;line-height:1.3;letter-spacing:1.3px;text-transform:uppercase;
  color:#b9d2ff;background:linear-gradient(160deg,rgba(24,46,96,.55),rgba(8,17,38,.72));
  border:1px solid rgba(120,170,255,.32);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 18px 46px rgba(2,8,25,.6),0 0 34px rgba(47,107,255,.10),inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .55s cubic-bezier(.3,1.65,.35,1),border-color .25s,box-shadow .25s}
/* .ifx-live = magnet is tracking the cursor: swap in the fast
   follow curve, exactly like interact.css does for buttons */
.ccp.ifx-live{transition:transform .14s ease-out,border-color .25s,box-shadow .25s}
.ccp:hover{border-color:rgba(140,190,255,.55);
  box-shadow:0 22px 54px rgba(2,8,25,.7),0 0 44px rgba(56,140,255,.22),inset 0 1px 0 rgba(255,255,255,.1)}

/* count digits — gradient text; tabular so the count-up does
   not reflow the label's width on every frame */
.ccp b{font-weight:800;font-variant-numeric:tabular-nums;color:transparent;
  background:linear-gradient(92deg,#a5ccff,#38bdf8);
  -webkit-background-clip:text;background-clip:text}

/* ------------------------------------------------------------
   2 · icon window — .ccp-rail / .ccp-track
   64px window over a max-content row; the 90deg mask fades
   both ends so icons enter and leave dissolved, never popped.
   ------------------------------------------------------------ */
.ccp-rail{display:inline-flex;align-items:center;height:22px;overflow:hidden;flex:none;width:64px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent)}
.ccp-rail img{flex:none;width:18px;height:18px;border-radius:5px;display:block;
  border:1px solid rgba(148,178,255,.30);background:#0b1730;
  box-shadow:0 2px 8px rgba(2,8,25,.5)}
.ccp-track{display:flex;align-items:center;gap:8px;flex:none;width:max-content;will-change:transform}

/* label — nowrap inherited from the chip, restated so the
   rule is self-contained; padding-right keeps the uppercase
   tail clear of the padding edge. min-width:0 lets it shrink
   as a flex item on narrow phones (§5). */
.ccp-t{white-space:nowrap;min-width:0;padding-right:2px}

/* ------------------------------------------------------------
   3 · idle sheen — .ccp::after
   Glass band, 32% wide, overhanging -40%..140% vertically so
   it rides across the icon window and the label as a streak.
   Base state parks it fully outside (translateX(-160%)):
   0%,60% hold at 0, 88%,100% at 460% — one full sweep per
   6.4s cycle, then a long rest. Parking outside also means
   the reduced-motion state (animation:none) hides the band
   instead of leaving a sliver inside the chip.
   ------------------------------------------------------------ */
.ccp::after{content:'';position:absolute;top:-40%;bottom:-40%;left:-30%;width:32%;
  pointer-events:none;z-index:2;
  background:linear-gradient(100deg,transparent,rgba(180,220,255,.14) 42%,rgba(255,255,255,.26) 50%,rgba(180,220,255,.14) 58%,transparent);
  transform:translateX(-160%) skewX(-18deg);
  animation:ccp-sheen 6.4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes ccp-sheen{
  0%,60%{transform:translateX(0) skewX(-18deg)}
  88%,100%{transform:translateX(460%) skewX(-18deg)}
}

/* ------------------------------------------------------------
   4 · conic border beam — .ccp::before + @property --ccpb
   1px ring hugging the inner edge (padding:1px, content-box
   mask, xor/exclude composite) — masked to a ring, transparent
   over the chip face. Two counter-phased arcs (cyan 10%,
   blue 76%). --ccpb is registered as <angle> so the 9s linear
   spin interpolates smoothly instead of stepping.
   ------------------------------------------------------------ */
@property --ccpb{syntax:'<angle>';inherits:false;initial-value:0deg}
.ccp::before{content:'';position:absolute;inset:0;border-radius:999px;padding:1px;
  pointer-events:none;z-index:3;opacity:.8;
  background:conic-gradient(from var(--ccpb),
    transparent 0%,rgba(56,189,248,.6) 10%,transparent 24%,
    transparent 62%,rgba(47,107,255,.45) 76%,transparent 90%);
  -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;
  animation:ccp-beam 9s linear infinite}
@keyframes ccp-beam{to{--ccpb:360deg}}

/* ------------------------------------------------------------
   5 · responsive + reduced motion
   ≤860px: the dock rejoins the flow as a centered static pill
   above the h1 (markup order puts it between the orbit and the
   heading). position:static + height:auto — no transform is
   reset here on purpose: the dock carries none on desktop, so
   .rv's translateY(24px)→none entrance keeps riding it here
   too (a transform:none in this block would out-cascade .rv
   and the mobile reveal would lose its rise).
   The label is the yielding flex item: min-width:0 + ellipsis
   keeps the nowrap pill inside the viewport on narrow phones
   without dropping the counts. ≤500px the icon window gives
   way (the full label with both counts matters more) and the
   type tightens a step so it still fits a 360px screen.
   ------------------------------------------------------------ */
@media (max-width:860px){
  .ccp-dock{position:static;right:auto;top:auto;height:auto;
    display:flex;justify-content:center;align-items:center;margin:2px auto 22px}
  .ccp{max-width:100%}
  .ccp-t{flex:1;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:500px){
  .ccp-rail{display:none}
  .ccp{padding:9px 15px}
  .ccp-t{font-size:10.5px;letter-spacing:1px}
}
@media (prefers-reduced-motion:reduce){
  .ccp::before,.ccp::after{animation:none}
  .ccp-track{transition:none!important}
}