/* ==========================================================================
   Human in the loop / No hardware to buy
   Figma "Component 458 … - Animate" (713:226092)
   1920 x 1246 at y 2196, on Mono/Dark.

   Default -> Animate:
     CCTV plate   scaleY .0554 -> 1 (origin top) + opacity 0 -> 1
     DETECTED     translateX -160 -> 0
     CAM 04 block translateX +180 -> 0
     REC          translateY  +20 -> 0
     lead copy    translateY  +80 -> 0
     Book a Demo  translateX -190 -> 0
     chips        translateX -110 / -210 / -130 -> 0
     headings +
     panel copy   translateY  +50 -> 0
     third card   height 21 -> 351 + opacity 0 -> 1
   The blue and white panels are already in place in Default; only their
   contents move.
   ========================================================================== */

.human {
  top: calc(2196 * var(--s));
  height: calc(1246 * var(--s));
  background: var(--c-mono-dark);
  overflow: hidden;
  z-index: 5;
}

.human__item { position: absolute; }

/* Groups the plate with its overlay readouts. Invisible on desktop so the
   children keep resolving against .human; becomes the positioning context on
   mobile, where the readouts sit inside the image. */
.human__plate { display: contents; }

/* --- CCTV plate ---------------------------------------------------------- */

.human__shot {
  left: calc(48 * var(--s));
  top: calc(260 * var(--s));
  width: calc(1824 * var(--s));
  height: calc(595 * var(--s));
  overflow: hidden;
}

.human__shot-inner {
  position: absolute;
  inset: 0;
  transform-origin: top center;
  transform: scaleY(0.0554);
  opacity: 0;
  transition:
    transform calc(var(--rv-dur) * 1.25) var(--rv-ease),
    opacity calc(var(--rv-dur) * 0.8) var(--rv-ease);
}
.human.is-in .human__shot-inner { transform: none; opacity: 1; }

.human__shot-img {
  position: absolute;
  left: calc(50% - 72 * var(--s));
  top: calc(-29 * var(--s));
  width: calc(1980 * var(--s));
  height: calc(646.667 * var(--s));
  transform: translateX(-50%);
}
.human__shot-img img { width: 100%; height: 100%; object-fit: cover; }
/* .human__shot-img carries .zoom, so it clips its own scale; the outer
   .human__shot still clips the reveal. */

.human__shot-glow {
  position: absolute;
  left: calc(1281 * var(--s));
  top: calc(-16.67 * var(--s));
  width: calc(701 * var(--s));
  height: calc(89.167 * var(--s));
}
/* Figma exports blurred backdrop layers with negative-inset bleed. Written out
   as left/top/width/height rather than `inset` + width:auto: an <img> is a
   replaced element, so with auto width it keeps its intrinsic aspect and the
   `right`/`bottom` insets are simply dropped — the layer renders undersized. */
.human__shot-glow img {
  position: absolute;
  left: -29.94%;
  top: -235.4%;
  width: 159.88%;
  height: 570.8%;
  /* the reset caps img at 100%; a bleed layer must opt out */
  max-width: none;
}

/* --- CCTV overlay readouts (Arame Bold) ---------------------------------- */

.human__readout { font-family: var(--f-tech); font-weight: 700; font-size: max(11px, calc(16 * var(--s))); line-height: 1.2; color: var(--c-mono-light); }

.human__detected {
  left: calc(80 * var(--s));
  top: calc(292 * var(--s));
  width: calc(157.605 * var(--s));
  height: calc(19 * var(--s));
  text-align: right;
  white-space: nowrap;
}

.human__cam {
  left: calc(1661 * var(--s));
  top: calc(292 * var(--s));
  width: calc(178.686 * var(--s));
  height: calc(38 * var(--s));
  text-align: right;
  white-space: nowrap;
}

.human__rec {
  left: calc(81 * var(--s));
  top: calc(804 * var(--s));
  width: calc(51 * var(--s));
  height: calc(19 * var(--s));
  white-space: nowrap;
}
.human__rec .dot { color: #FF1515; }

/* --- left column --------------------------------------------------------- */

.human__lede {
  left: calc(182 * var(--s));
  top: calc(953 * var(--s));
  width: calc(495 * var(--s));
  height: calc(84 * var(--s));
}
.human__lede p {
  font-size: calc(20 * var(--s));
  line-height: 1.4;
  letter-spacing: calc(-0.6 * var(--s));
  color: var(--c-mono-light);
}

.human__cta {
  left: calc(182 * var(--s));
  top: calc(1094 * var(--s));
  width: calc(184 * var(--s));
  height: calc(48 * var(--s));
}
.human__cta .rv { height: 100%; }
.human__cta .btn { width: 100%; height: 100%; }

/* --- panels -------------------------------------------------------------- */

.human__panel { position: absolute; }

.human__panel--verified {
  left: calc(816 * var(--s));
  top: calc(498 * var(--s));
  width: calc(1056 * var(--s));
  height: calc(357 * var(--s));
  background: var(--c-primary-blue);
}

.human__panel--hardware {
  left: calc(816 * var(--s));
  top: calc(855 * var(--s));
  width: calc(528 * var(--s));
  height: calc(351 * var(--s));
  background: var(--c-mono-light);
}

/* The third card grows downward as it fades in. */
.human__panel--proactive {
  left: calc(1344 * var(--s));
  top: calc(855 * var(--s));
  width: calc(528 * var(--s));
  height: calc(351 * var(--s));
  overflow: hidden;
}
.human__panel--proactive .human__panel-fill {
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(21 * var(--s));
  background: var(--c-light-dark);
  opacity: 0;
  transition:
    height calc(var(--rv-dur) * 1.1) var(--rv-ease),
    opacity calc(var(--rv-dur) * 0.7) var(--rv-ease);
}
.human.is-in .human__panel--proactive .human__panel-fill {
  height: calc(351 * var(--s));
  opacity: 1;
}

/* --- panel contents ------------------------------------------------------ */

/* Figma 1045:136833: these three are 20/1.2 now, and with the box gone they
   sit 10 lower -- where the box's text sat, not where the box did. The widths
   are the mask's, so they only have to be wide enough not to clip. */
.human__chip { height: calc(24 * var(--s)); }
.human__chip .chip { font-size: calc(20 * var(--s)); line-height: 1.2; letter-spacing: calc(-0.6 * var(--s)); }
.human__chip--verified  { left: calc(872 * var(--s));  top: calc(564 * var(--s)); width: calc(130 * var(--s)); color: var(--c-mono-light); }
.human__chip--hardware  { left: calc(872 * var(--s));  top: calc(921 * var(--s)); width: calc(245 * var(--s)); color: var(--c-mono-dark); }
.human__chip--proactive { left: calc(1400 * var(--s)); top: calc(921 * var(--s)); width: calc(150 * var(--s)); color: var(--c-mono-light); }

.human__h {
  height: calc(53 * var(--s));
}
.human__h h2 {
  font-weight: 300;
  font-size: calc(44 * var(--s));
  line-height: 1.2;
  letter-spacing: calc(-1.76 * var(--s));
  white-space: nowrap;
}
.human__p { height: calc(56 * var(--s)); }
.human__p p {
  font-size: calc(20 * var(--s));
  line-height: 1.4;
  letter-spacing: calc(-0.6 * var(--s));
}

.human__h--verified  { left: calc(872 * var(--s));  top: calc(652 * var(--s));  width: calc(832 * var(--s)); color: var(--c-mono-light); }
.human__p--verified  { left: calc(872 * var(--s));  top: calc(721 * var(--s));  width: calc(832 * var(--s)); color: var(--c-mono-light); }
.human__h--hardware  { left: calc(872 * var(--s));  top: calc(1009 * var(--s)); width: calc(397 * var(--s)); color: var(--c-light-dark); }
.human__p--hardware  { left: calc(872 * var(--s));  top: calc(1086 * var(--s)); width: calc(397 * var(--s)); color: var(--c-light-dark); }
.human__h--proactive { left: calc(1400 * var(--s)); top: calc(1009 * var(--s)); width: calc(390 * var(--s)); color: var(--c-mono-light); }
.human__p--proactive { left: calc(1400 * var(--s)); top: calc(1086 * var(--s)); width: calc(390 * var(--s)); color: var(--c-mono-light); }

@media (prefers-reduced-motion: reduce) {
  .human__shot-inner { transform: none; opacity: 1; transition: none; }
  .human__panel--proactive .human__panel-fill { height: calc(351 * var(--s)); opacity: 1; transition: none; }
}

/* ==========================================================================
   Reflow
   ========================================================================== */

@media (max-width: 1400px) {
  .human__h h2 { white-space: normal; }
}

@media (max-width: 1023px), (max-width: 1200px) and (orientation: portrait) {
  .human { height: auto; padding: 48px 20px 64px; }
  .human__plate { display: block; position: relative; }
  .human__item, .human__panel { position: relative; left: auto; top: auto; width: auto; height: auto; }

  .human__shot { width: 100%; height: auto; aspect-ratio: 1824 / 595; }
  .human__shot-img { position: absolute; left: 50%; top: 0; width: 108%; height: 100%; }
  .human__shot-glow { display: none; }

  .human__detected, .human__cam, .human__rec {
    position: absolute;
    z-index: 2;
    font-size: 11px;
    width: auto;
  }
  .human__detected { left: 12px; top: 12px; text-align: left; }
  .human__cam { right: 12px; left: auto; top: 12px; }
  .human__rec { left: 12px; top: auto; bottom: 12px; }

  .human__lede { margin-top: 28px; }
  .human__lede p { font-size: 16px; }
  .human__cta { margin-top: 24px; width: 184px; height: 48px; }

  .human__panel { margin-top: 24px; padding: 28px 20px 32px; }
  .human__panel--proactive { overflow: visible; }
  .human__panel--proactive .human__panel-fill { position: absolute; inset: 0; height: 100%; }
  .human__panel--proactive > *:not(.human__panel-fill) { position: relative; z-index: 1; }

  .human__chip { display: inline-block; height: auto; width: auto !important; }
  .human__h { height: auto; margin-top: 20px; }
  .human__h h2 { font-size: clamp(28px, 7vw, 36px); }
  .human__p { height: auto; margin-top: 12px; }
  .human__p p { font-size: 16px; }
}