/* ═══════════════════════════════════════════════════════════════════════════
   KEELAMBI INSPECT — the farmer's first digital inspection of a machine.
   Shared component. Physical file lives in agri's docroot; keelambi.com loads it
   as /agri/assets/site/inspect.css (Hostinger serves agri from
   public_html/agri/, so it is the SAME file, same-origin — the pattern
   already used by catalog.js, roi.js and lead.js).

   PROVENANCE: the interaction is ported from the #viewer section of
   /rancher-sev-5-1/ (coverflow peek · fractional drag→snap · watermark ·
   image-relative hotspots). That page keeps its own inline copy and is NOT
   rewired here — it is a protected route. See inspect.js for what changed and why.

   MOBILE IS THE PRODUCT. ~99% of visitors arrive on a phone, so this file is
   written phone-first: every base rule is the phone rule, and the ≥744 / ≥1024
   blocks only ADD room. Nothing here is a shrunk desktop layout.

   THEMING: the host sets --kbi-accent (marker colour) and --kbi-pad (the
   section's own horizontal padding, so the stage can bleed to the screen edge
   without the 100vw-vs-scrollbar drift). Both have safe defaults.
   ═══════════════════════════════════════════════════════════════════════════ */

.kbi{
  --kbi-accent:#FF9933;          /* India Saffron — interaction, per the colour system */
  --kbi-accent-ink:#1a1208;
  --kbi-ink:#181818;
  --kbi-ink-2:#6a6a6a;
  --kbi-line:rgba(0,0,0,0.10);
  --kbi-surface:#fff;
  --kbi-pad:0px;                 /* host overrides with its section padding */
  --kbi-ease:cubic-bezier(.22,1,.36,1);
  position:relative;
  margin-top:clamp(24px,4vh,44px);
}
.kbi *{box-sizing:border-box}

/* ── STAGE ──────────────────────────────────────────────────────────────────
   Full-bleed so the machine floats on the canvas with no card around it — the
   product is the hero, not a photo in a box. The bleed escapes the host's own
   padding rather than using 100vw, because 100vw counts the scrollbar gutter
   and would push the machine a few px off-centre. An off-centre hero is the
   one thing you notice on a phone. */
.kbi-stage{
  position:relative;
  margin-inline:calc(-1 * var(--kbi-pad));
  height:clamp(280px,42vh,460px);
  overflow:hidden;
  touch-action:pan-y;            /* we take horizontal, the page keeps vertical */
  user-select:none;-webkit-user-select:none;
  cursor:grab;
  -webkit-tap-highlight-color:transparent;
}
.kbi-stage.is-drag{cursor:grabbing}
/* Neighbour geometry, read by inspect.js so all of it lives in one place:
     --kbi-step        how far the next angle sits from the hero, as a share of stage width
     --kbi-side-scale  how much smaller a neighbour is drawn
   A phone has no room for the desktop values. At 0.40/0.80 on a 375px screen the neighbours land
   ON the machine and the section reads as three overlapping ghosts instead of one machine you can
   turn. Pushed out and drawn smaller, they become what they are: the next angle, waiting. */
.kbi-stage{--kbi-step:.64;--kbi-side-scale:.70}
.kbi-stage:focus-visible{outline:2px solid var(--kbi-accent);outline-offset:-4px;border-radius:12px}

/* giant faint wordmark behind the machine (Monarch reference) */
.kbi-mark{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:'Bebas Neue',var(--f-head,inherit),sans-serif;font-weight:700;
  letter-spacing:-.02em;white-space:nowrap;
  font-size:clamp(96px,24vw,360px);line-height:1;color:#1D1D1F;opacity:.06;
  z-index:0;pointer-events:none;user-select:none;
}

.kbi-track{position:absolute;inset:0;z-index:1}
.kbi-slide{
  position:absolute;top:50%;left:50%;
  /* PHONES ARE WIDTH-BOUND, NOT HEIGHT-BOUND. Every frame is a ~1.06 near-square cutout, so
     sizing by height (as the desktop viewer does) makes the machine exactly as wide as a 375px
     screen — it runs off both edges with no margin at all. Sizing by WIDTH here keeps the whole
     machine on screen with air around it, and the tablet block below restores height-binding
     where the screen is wide enough for it to be the real constraint. */
  width:min(76vw,420px);
  transform:translate(-50%,-50%);transform-origin:center center;
  will-change:transform,opacity;
  transition:transform .38s var(--kbi-ease),opacity .38s var(--kbi-ease);
}
.kbi-track.no-anim .kbi-slide{transition:none}
.kbi-slide img{
  width:100%;height:auto;display:block;
  pointer-events:none;-webkit-user-drag:none;user-drag:none;
}

/* ── HOTSPOTS ───────────────────────────────────────────────────────────────
   The button IS the 44px touch target; the saffron disc is drawn smaller inside
   it by ::before. The product page shrinks the whole button to 30px on phones,
   which is under the minimum and the reason the markers are hard to hit there.
   Here the visual can be small and elegant while the tap area stays honest. */
.kbi-hot{
  position:absolute;left:var(--x);top:var(--y);
  width:44px;height:44px;margin:-22px 0 0 -22px;   /* margin-centred: no transform, so scale() is free */
  padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;z-index:3;
  -webkit-tap-highlight-color:transparent;
  transition:transform .22s var(--kbi-ease),opacity .3s ease;
}
.kbi-hot::before{                                  /* the visible marker */
  content:"+";
  display:grid;place-items:center;
  width:30px;height:30px;border-radius:50%;
  background:var(--kbi-accent);color:var(--kbi-accent-ink);
  font-family:'DM Sans',system-ui,sans-serif;font-weight:700;font-size:19px;line-height:1;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
  transition:background .22s ease,box-shadow .22s ease;
}
.kbi-hot::after{                                   /* the pulse that says "press me" */
  content:"";position:absolute;width:30px;height:30px;border-radius:50%;
  border:2px solid var(--kbi-accent);opacity:.5;
  animation:kbi-pulse 2.2s var(--kbi-ease) infinite;
  pointer-events:none;
}
@media(hover:hover){.kbi-hot:hover{transform:scale(1.12)}}
.kbi-hot:focus-visible{outline:2px solid var(--kbi-accent);outline-offset:2px;border-radius:50%}
.kbi-hot[aria-expanded="true"]::before{background:#fff;box-shadow:0 0 0 3px var(--kbi-accent)}
.kbi-hot[aria-expanded="true"]::after{animation:none;opacity:0}
@keyframes kbi-pulse{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(1.75);opacity:0}}

/* Markers exist only on the rest frame and only once the machine has settled.
   THE BLOOM: they arrive staggered after the orbit finishes, which is what makes
   them discoverable on a phone without a single word of instruction. */
.kbi-hot{opacity:0;pointer-events:none;transform:scale(.6)}
.kbi-stage.show-hots .kbi-hot{opacity:1;pointer-events:auto;transform:scale(1);
  transition:transform .5s var(--kbi-ease),opacity .4s ease}
.kbi-stage.show-hots .kbi-hot:nth-of-type(1){transition-delay:.00s}
.kbi-stage.show-hots .kbi-hot:nth-of-type(2){transition-delay:.07s}
.kbi-stage.show-hots .kbi-hot:nth-of-type(3){transition-delay:.14s}
.kbi-stage.show-hots .kbi-hot:nth-of-type(4){transition-delay:.21s}
@media(hover:hover){.kbi-stage.show-hots .kbi-hot:hover{transition-delay:0s}}

/* ── HINT ── teaches the gesture, then gets out of the way for good ── */
.kbi-hint{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:4;
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(180%) blur(8px);backdrop-filter:saturate(180%) blur(8px);
  border:1px solid var(--kbi-line);border-radius:980px;padding:8px 16px;
  font-size:12.5px;font-weight:600;color:var(--kbi-ink-2);white-space:nowrap;
  pointer-events:none;transition:opacity .4s ease,transform .4s var(--kbi-ease);
}
.kbi-hint.is-out{opacity:0;transform:translateX(-50%) translateY(6px)}

/* first-paint shimmer, only while the frames decode */
.kbi-stage.is-loading::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);
  background-size:220% 100%;animation:kbi-shim 1.2s linear infinite;
}
@keyframes kbi-shim{to{background-position:-220% 0}}

/* ── CONTROLS ───────────────────────────────────────────────────────────────
   ONE row on a phone: play/pause + the four angles. The arrows are desktop-only
   on purpose — a swipe already steps the machine and every angle is one tap away
   on the dots, so on a phone the arrows would be two more things to miss, not
   two more things to do. No functionality is lost. */
.kbi-controls{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:10px;margin-top:clamp(14px,2.2vh,22px);
}
.kbi-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 16px;border-radius:980px;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:600;letter-spacing:.01em;
  border:1px solid var(--kbi-line);background:var(--kbi-surface);color:var(--kbi-ink);
  box-shadow:0 1px 2px rgba(0,0,0,0.04);
  -webkit-tap-highlight-color:transparent;
  transition:transform .28s cubic-bezier(.34,1.45,.64,1),border-color .3s ease,background .3s ease;
}
.kbi-btn:active{transform:scale(.95)}
@media(hover:hover){.kbi-btn:hover{border-color:rgba(0,0,0,0.28)}}
.kbi-btn:focus-visible{outline:2px solid var(--kbi-accent);outline-offset:3px}
.kbi-nav{display:none;width:44px;padding:0;font-size:17px;line-height:1}
.kbi-ico{display:block;width:0;height:0;border-style:solid;
  border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--kbi-ink)}
.kbi-btn[aria-pressed="true"] .kbi-ico{
  width:9px;height:11px;border:0;
  background:linear-gradient(to right,var(--kbi-ink) 0 3px,transparent 3px 6px,var(--kbi-ink) 6px 9px);
}
.kbi-dots{display:flex;align-items:center;gap:8px}
.kbi-dot{
  width:26px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;-webkit-tap-highlight-color:transparent;
}
.kbi-dot::before{
  content:"";display:block;width:7px;height:7px;border-radius:980px;background:rgba(0,0,0,.22);
  transition:width .42s var(--kbi-ease),background .3s ease;
}
.kbi-dot[aria-current="true"]::before{width:22px;background:var(--kbi-accent)}
.kbi-dot:focus-visible{outline:2px solid var(--kbi-accent);outline-offset:0;border-radius:8px}
@media(hover:hover){.kbi-dot:not([aria-current="true"]):hover::before{background:rgba(0,0,0,.42)}}

/* ── INFORMATION REVEAL ─────────────────────────────────────────────────────
   PHONE = bottom sheet. The product page renders this card in normal flow below
   the stage, which on a phone puts the answer off-screen at the exact moment the
   visitor asks the question. Anchoring it to the bottom of the viewport keeps the
   marker they tapped AND its answer on screen together. */
.kbi-card{
  position:fixed;left:0;right:0;bottom:0;z-index:56;
  background:var(--kbi-surface);
  border-top:1px solid var(--kbi-line);
  border-radius:20px 20px 0 0;
  box-shadow:0 -18px 50px -20px rgba(24,18,12,.5);
  padding:8px 20px calc(20px + env(safe-area-inset-bottom,0px));
  max-height:64vh;overflow:auto;overscroll-behavior:contain;
  transform:translateY(101%);
  transition:transform .42s var(--kbi-ease);
}
.kbi-card[hidden]{display:none}
.kbi-card.is-open{transform:none}
.kbi-card::before{                       /* grab handle — says "this is a sheet" */
  content:"";display:block;width:44px;height:4px;margin:0 auto 12px;
  border-radius:4px;background:rgba(0,0,0,.16);
}
.kbi-card-close{
  position:absolute;top:6px;right:8px;
  width:44px;height:44px;border:0;background:none;cursor:pointer;
  font-size:24px;line-height:1;color:var(--kbi-ink-2);
  -webkit-tap-highlight-color:transparent;
}
.kbi-card-close:focus-visible{outline:2px solid var(--kbi-accent);outline-offset:-4px;border-radius:50%}
.kbi-card-eyebrow{
  display:block;font-size:10px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  color:var(--kbi-accent-ink);opacity:.65;
}
.kbi-card-title{margin:8px 0 0;font-size:clamp(17px,4.6vw,21px);font-weight:700;line-height:1.25;color:var(--kbi-ink)}
.kbi-card-body{margin:9px 0 0;font-size:14.5px;font-weight:400;line-height:1.6;color:var(--kbi-ink-2);max-width:56ch}
.kbi-card-stat{display:inline-block;margin-top:12px;font-weight:700;color:var(--kbi-accent-ink)}
.kbi-card-stat:empty{display:none}

/* the sheet is position:fixed but its section may create a stacking context
   (the front door's .sj carries z-index:10), which would trap it behind later
   sections and swallow its taps. The host lifts the section while it is open —
   this is the same trap already documented at #jobs on keelambi.com. */
.kbi-sheet-open{z-index:55}

/* ── TABLET ─────────────────────────────────────────────────────────────── */
@media(min-width:744px){
  .kbi-stage{height:clamp(360px,52vh,600px);--kbi-step:.40;--kbi-side-scale:.80}
  .kbi-slide{height:clamp(260px,46vh,520px);width:auto}
  .kbi-slide img{height:100%;width:auto;max-width:none;object-fit:contain}
  .kbi-nav{display:inline-flex}
  .kbi-controls{gap:12px}
  .kbi-hint{bottom:18px;font-size:13px;padding:8px 18px}
}

/* ── DESKTOP ────────────────────────────────────────────────────────────────
   The card leaves the bottom of the screen and becomes an anchored panel beside
   the machine — there is room for it to sit next to what it describes, which a
   phone does not have. Same content, same interaction, more space. */
@media(min-width:1024px){
  /* clears the host's max-width, not just its padding. The +sb/2 gives back the scrollbar gutter
     that 50vw wrongly counts as page — without it the stage runs half a gutter wide of the visible
     page on every classic-scrollbar desktop. --kbi-sb is measured once by inspect.js. */
  .kbi-stage{margin-inline:calc(50% - 50vw + var(--kbi-sb,0px) / 2)}
  .kbi-card{
    position:absolute;left:auto;right:0;bottom:auto;top:0;
    width:min(360px,34vw);
    border:1px solid var(--kbi-line);border-radius:18px;
    box-shadow:0 1px 2px rgba(0,0,0,.04),0 30px 70px -40px rgba(24,18,12,.45);
    padding:22px 24px 24px;max-height:none;overflow:visible;
    transform:translateY(10px) scale(.98);opacity:0;
    transition:transform .42s var(--kbi-ease),opacity .3s ease;
  }
  .kbi-card::before{display:none}
  .kbi-card.is-open{transform:none;opacity:1}
  .kbi-card-close{top:8px;right:10px}
}

@media(prefers-reduced-motion:reduce){
  .kbi-hot::after{animation:none}
  .kbi-stage.is-loading::after{animation:none}
}