/* ── Napojení · direction A "Ecosystem" (final) ──
   OWN Build hub in a white socket (18964 centre card), two orbit rings (1411 / 18964), eight category cards in a 22.5° pinwheel on
   two radii, straight hairlines hub ↔ card. Comets are HTML rails driven by the Web Animations API (compositor only, no rAF).
   Fakturace is a swap slot: the app in front is plugged in, the spare waits behind as a dashed outline.
   Card family = product cards (cards.css): white, 1px rgba(0,0,0,.08), radius 10, soft shadow, icon chip, sans meta, green only for ✓.
   Sizes follow the eco (cards in %, type in cqi with px fallbacks), not the viewport. */
/* the head starts at the section top like every other head; the orbit sits on the right content edge (Produkt grid edge) */
#napojeni .nj-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}
#napojeni .nj-copy .kick{margin-bottom:var(--kick-gap)}
#napojeni .nj-copy p{color:var(--muted);margin:20px 0 28px;max-width:44ch;font-size:17px}
/* in-page link = the light secondary pill (.btn-l, as the Nabídka "Chci nabídku"); black stays for decisions */
#napojeni .nj-copy .arr{display:inline-block;transition:transform .25s var(--ease-out)}
#napojeni .nj-copy .btn:hover .arr{transform:translateX(2px)}

/* section locals alias the site tokens (base.css / style.css); green (--nj-g) is only for ✓ */
#napojeni .nj-vis{--nj-k:var(--black);--nj-m:var(--label);--nj-l:rgba(0,0,0,.08);--nj-chip:var(--paper-2);--nj-g:#2F9E5B;display:flex;justify-content:flex-end}
#napojeni .nj-eco{--hub:76px;--halo:8px;position:relative;width:min(100%,540px);aspect-ratio:1;isolation:isolate;container-type:inline-size}
/* soft white field behind the rings (no dot texture: the dot grid belongs to the hero only) */
#napojeni .nj-eco::before{content:"";position:absolute;inset:8%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,#fff 0,rgba(255,255,255,.92) 38%,rgba(255,255,255,0) 100%)}

/* orbit rings + hairlines (desktop and phone pinwheel are separate groups: SVG line ends cannot be set from CSS) */
#napojeni .nj-orb,#napojeni .nj-bm{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;fill:none}
#napojeni .nj-gp{display:none}
#napojeni .nj-orb ellipse{stroke:rgba(0,0,0,.1);stroke-width:1}
#napojeni .nj-orb .nj-o2{stroke:rgba(0,0,0,.13);stroke-dasharray:2 5;stroke-linecap:round}
/* no stroke transition: SVG paint transitions run on the main thread every frame; the comet already marks the change */
#napojeni .nj-bm line{stroke:rgba(0,0,0,.13);stroke-width:1;stroke-linecap:round}
#napojeni .nj-bm line.nj-l{stroke:rgba(11,11,11,.5);stroke-width:1.25}

/* comet rails: one per beam, placed by JS from the measured hub and card edges; the mover slides inside (translateX only) */
#napojeni .nj-rl{position:absolute;inset:0;z-index:1;pointer-events:none}
#napojeni .nj-rail{position:absolute;left:0;top:-5px;height:10px;overflow:hidden;transform-origin:0 50%}
#napojeni .nj-mv{position:absolute;left:0;top:0;height:10px;opacity:0}
#napojeni .nj-mv::before{content:"";position:absolute;left:0;right:0;top:3.75px;height:2.5px;border-radius:2px;background:linear-gradient(90deg,rgba(11,11,11,0),rgba(11,11,11,.38) 62%,#0B0B0B 93%,rgba(11,11,11,0))}
#napojeni .nj-mv::after{content:"";position:absolute;right:-3.25px;top:1.75px;width:6.5px;height:6.5px;border-radius:50%;background:var(--nj-k);box-shadow:0 0 0 1.5px #fff}

/* hub: brand mark "Čtvrtý blok" (yellow tile, black blocks) in a white socket; the yellow ping halo echoes the tile */
#napojeni .nj-hub{position:absolute;left:50%;top:50%;z-index:3;padding:var(--halo);border-radius:calc(var(--hub) * .25 + var(--halo));background:#fff;box-shadow:0 0 0 1px var(--nj-l),0 22px 40px -18px rgba(0,0,0,.5);transform:translate(-50%,-50%)}
#napojeni .nj-mark{position:relative;display:block;width:var(--hub);height:var(--hub);border-radius:25%;background:var(--yellow)}
#napojeni .nj-mark svg{display:block;width:100%;height:100%;overflow:visible}
#napojeni .nj-pg{position:absolute;left:50%;top:50%;z-index:2;width:calc(var(--hub) + 2 * var(--halo));height:calc(var(--hub) + 2 * var(--halo));border-radius:calc(var(--hub) * .25 + var(--halo));background:var(--yellow);opacity:0;transform:translate(-50%,-50%);pointer-events:none}

/* category cards: size from the eco width, not the viewport */
#napojeni .nj-t{position:absolute;left:var(--x);top:var(--y);z-index:2;width:clamp(80px,18.7%,112px);aspect-ratio:112/94;transform:translate(-50%,-50%)}
#napojeni .nj-card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 6px;background:#fff;border:1px solid var(--nj-l);border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 32px -16px rgba(0,0,0,.18);text-align:center}
#napojeni .nj-card::after{content:"";position:absolute;inset:-1px;border:1px solid var(--nj-k);border-radius:inherit;opacity:0;transition:opacity .35s var(--ease-out);pointer-events:none}
#napojeni .nj-on .nj-card::after,#napojeni .nj-hit .nj-card::after{opacity:1}
#napojeni .nj-ic{position:relative;flex:none;display:grid;place-items:center;width:30px;height:30px;margin-bottom:9px;border-radius:8px;background:var(--nj-chip);border:1px solid var(--nj-l)}
#napojeni .nj-ic>svg{width:16px;height:16px;fill:none;stroke:var(--nj-k);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#napojeni .nj-card b{font:500 13px/16px var(--font);letter-spacing:-.005em;color:var(--nj-k);white-space:nowrap}
#napojeni .nj-card small{display:grid;margin-top:2px;font:400 11.5px/14px var(--font);color:var(--nj-m);white-space:nowrap}
#napojeni .nj-card small>span{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:4px;transition:opacity .2s ease}
/* the data word turns ink while its card is part of the flow: "leady → kontakty · čísla" */
#napojeni .nj-on .nj-m,#napojeni .nj-hit .nj-m{color:var(--nj-k)}
#napojeni .nj-s{opacity:0;color:var(--nj-k)}
#napojeni .nj-s svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* label swap is sequential both ways (out, then in), so the two words never overlap */
#napojeni .nj-card small>.nj-m{transition-delay:.15s}
#napojeni .nj-sw .nj-card small>.nj-s{opacity:1;transition-delay:.15s}
#napojeni .nj-sw .nj-card small>.nj-m{opacity:0;transition-delay:0s}
/* ✓ = data arrived (the only green); one CSS mask instead of an inline SVG per card */
#napojeni .nj-ok{position:absolute;right:-6px;bottom:-6px;width:15px;height:15px;border-radius:50%;background:var(--nj-g);border:2px solid #fff;opacity:0;transform:scale(.4);transition:opacity .25s ease,transform .45s var(--ease-out)}
#napojeni .nj-ok::before{content:"";position:absolute;inset:0;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/9px 9px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/9px 9px no-repeat}
#napojeni .nj-hit .nj-ok{opacity:1;transform:none}

/* swap slot. Roles (plain classes, no z-index in keyframes):
   front    = the plugged-in app;
   spare    = dashed outline fanned behind (content hidden, never outlined in ink);
   .nj-out  = the front app slides outward along its radius and fades while the spare docks underneath it;
              its text appears only once the old app is gone, so two labels never overlap.
   JS then toggles .nj-alt: the docked spare becomes the front, the invisible old app becomes the spare and fades in behind. */
#napojeni .nj-deck{--ox:16px;--oy:-7px}
#napojeni .nj-deck .nj-card{z-index:2;transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .25s ease,background-color .3s ease,border-color .3s ease,box-shadow .3s ease}
#napojeni .nj-deck .nj-card>*{transition:opacity .2s ease}
#napojeni .nj-deck:not(.nj-alt) .nj-c2,#napojeni .nj-deck.nj-alt .nj-c1{z-index:1;transform:translate(-9px,-12px) rotate(-6deg) scale(.96);background:rgba(255,255,255,.7);border:1px dashed rgba(0,0,0,.3);box-shadow:none;transition:opacity .3s ease .3s}
#napojeni .nj-deck:not(.nj-alt) .nj-c2>*,#napojeni .nj-deck.nj-alt .nj-c1>*{opacity:0;transition:none}
#napojeni .nj-deck:not(.nj-alt) .nj-c2::after,#napojeni .nj-deck.nj-alt .nj-c1::after{display:none}
#napojeni .nj-deck.nj-out:not(.nj-alt) .nj-c1,#napojeni .nj-deck.nj-out.nj-alt .nj-c2{transform:translate(var(--ox),var(--oy)) scale(.96);opacity:0;transition:transform .32s cubic-bezier(.5,0,.75,0),opacity .3s ease-in}
#napojeni .nj-deck.nj-out:not(.nj-alt) .nj-c2,#napojeni .nj-deck.nj-out.nj-alt .nj-c1{transform:none;background:#fff;border:1px solid var(--nj-l);box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 32px -16px rgba(0,0,0,.18);transition:transform .5s cubic-bezier(.2,.7,.2,1),background-color .25s ease,border-color .25s ease,box-shadow .3s ease}
#napojeni .nj-deck.nj-out:not(.nj-alt) .nj-c2>*,#napojeni .nj-deck.nj-out.nj-alt .nj-c1>*{opacity:1;transition:opacity .2s ease .2s}
/* permanent ⇄ badge: says "this block can be swapped" in any still (same glyph as card 01's "Vyměnit blok") */
#napojeni .nj-swp{position:absolute;z-index:4;top:-9px;right:8px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--nj-k);box-shadow:0 0 0 2px #fff}
#napojeni .nj-swp svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
#napojeni .nj-alt .nj-swp svg{transform:rotate(180deg)}

/* reset without animating back (JS adds it for one frame) */
#napojeni .nj-ns *,#napojeni .nj-ns *::after{transition:none!important}

/* hub and type scale with the eco (container units); browsers without them keep the px values above */
@supports (width:1cqi){
  #napojeni .nj-eco{--hub:clamp(44px,12.67cqi,76px);--halo:clamp(4px,1.33cqi,8px)}
  #napojeni .nj-ic{width:clamp(24px,5cqi,30px);height:clamp(24px,5cqi,30px);margin-bottom:clamp(6px,1.5cqi,9px);border-radius:clamp(6px,1.33cqi,8px)}
  #napojeni .nj-ic>svg{width:clamp(13px,2.67cqi,16px);height:clamp(13px,2.67cqi,16px)}
  #napojeni .nj-card b{font-size:clamp(12px,2.2cqi,13px);line-height:clamp(15px,2.67cqi,16px)}
  #napojeni .nj-card small{font-size:clamp(10.5px,1.92cqi,11.5px);line-height:clamp(13px,2.34cqi,14px)}
}

/* 901–1100: split stays, slightly wider visual column */
@media (max-width:1100px){
  #napojeni .nj-in{gap:40px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
}
/* ≤900: stacked; the visual is capped so the section does not grow past ~1000px */
@media (max-width:900px){
  #napojeni .nj-in{grid-template-columns:1fr;gap:44px}
  #napojeni .nj-vis{justify-content:center}
  #napojeni .nj-eco{width:min(100%,520px)}
}
@media (max-width:600px){
  #napojeni .nj-in{gap:32px}
  #napojeni .nj-copy p{font-size:16px;margin:16px 0 24px}
}
/* phones (eco < 400px): a taller, slightly turned pinwheel with the rings closer together keeps ≥12px between cards,
   every card inside the 20px gutter and every beam ≥40px */
@media (max-width:440px){
  #napojeni .nj-eco{--hub:46px;--halo:4px;aspect-ratio:1/1.16}
  #napojeni .nj-gd{display:none}
  #napojeni .nj-gp{display:inline}
  #napojeni .nj-t{left:var(--xp);top:var(--yp);width:clamp(78px,23%,92px);aspect-ratio:78/64}
  #napojeni .nj-deck{--ox:12px;--oy:-8px}
  #napojeni .nj-card{padding:0 4px;border-radius:9px}
  #napojeni .nj-ic{width:22px;height:22px;margin-bottom:5px;border-radius:6px}
  #napojeni .nj-ic>svg{width:12.5px;height:12.5px}
  #napojeni .nj-card b{font-size:12px;line-height:14px}
  #napojeni .nj-card small{margin-top:1px;font-size:10.5px;line-height:13px}
  #napojeni .nj-card small>span{gap:3px}
  #napojeni .nj-s svg{width:10px;height:10px}
  #napojeni .nj-ok{width:13px;height:13px;right:-5px;bottom:-5px}
  #napojeni .nj-ok::before{-webkit-mask-size:8px 8px;mask-size:8px 8px}
  #napojeni .nj-swp{width:16px;height:16px;top:-8px;right:6px}
  #napojeni .nj-swp svg{width:10px;height:10px}
}
@media (prefers-reduced-motion:reduce){
  #napojeni .nj-eco *,#napojeni .nj-eco *::after{transition:none!important}
  #napojeni .nj-copy .arr{transition:none}
  #napojeni .nj-copy .btn:hover .arr{transform:none}
}