/* Scene 3 — "AI Search & Match" (rebuilt from Whippy tl-3 Lottie, 440x440 @60fps) */

.wh-scene--3 {
  position: relative;
  width: 440px;
  height: 440px;
  font-family: Inter, system-ui, -apple-system, sans-serif;
}
.wh-scene--3 *,
.wh-scene--3 *::before,
.wh-scene--3 *::after { box-sizing: border-box; margin: 0; padding: 0; }

.wh-scene--3 .s3-stage {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  overflow: hidden;
  /* Lottie gradient: #EA5757 -> #F5ABAB -> #FFF along an oversized 120deg line */
  background: linear-gradient(120deg, #ea5757 -75%, #f5abab 30%, #ffffff 135%);
}

.wh-scene--3 .s3-p1,
.wh-scene--3 .s3-p2,
.wh-scene--3 .s3-tree { position: absolute; inset: 0; }

/* ---- Job order notification card ---- */
.wh-scene--3 .s3-notif {
  position: absolute;
  left: 220.4px;
  top: 53px;
  width: 188px;
  height: 60px;
  background: #fff;
  border: 1px solid #dfe3eb;
  border-radius: 8px;
  overflow: hidden;
  opacity: 0;
}
.wh-scene--3 .s3-bell {
  position: absolute;
  left: 14px;
  top: 21px;
  width: 18px;
  height: 18px;
}
.wh-scene--3 .s3-notif-label {
  position: absolute;
  left: 38px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 600;
  color: #2b2a34;
  white-space: nowrap;
}
.wh-scene--3 .s3-pill {
  position: absolute;
  left: 182px;
  top: 15.5px;
  width: 172px;
  height: 29px;
  border-radius: 30px;
  background: #dfe3eb;
  font-size: 14px;
  font-weight: 600;
  line-height: 29px;
  text-align: center;
  color: #2b2a34;
  white-space: nowrap;
  opacity: 0;
}

/* ---- Connector tree ---- */
.wh-scene--3 .s3-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #2e6b44;
  transform: scale(0);
}
.wh-scene--3 .s3-dot--top { left: 217.5px; top: 110.4px; }
.wh-scene--3 .s3-dot--l   { left: 105px;   top: 173.8px; }
.wh-scene--3 .s3-dot--c   { left: 217.5px; top: 173.8px; }
.wh-scene--3 .s3-dot--r   { left: 330px;   top: 173.8px; }
.wh-scene--3 .s3-dot--b1  { left: 217.3px; top: 292.8px; width: 5.4px; height: 5.4px; }
.wh-scene--3 .s3-dot--b2  { left: 217.3px; top: 326.3px; width: 5.4px; height: 5.4px; }

.wh-scene--3 .s3-vline {
  position: absolute;
  left: 219.5px;
  top: 113.5px;
  width: 1px;
  height: 64px;
  background: #2e6b44;
  transform: scaleY(0);
  transform-origin: 50% 0;
}
.wh-scene--3 .s3-hline {
  position: absolute;
  left: 107.5px;
  top: 144.2px;
  width: 225px;
  height: 1px;
  background: #2e6b44;
  transform: scaleX(0);
  transform-origin: 50% 50%;
}
.wh-scene--3 .s3-sline {
  position: absolute;
  top: 144.5px;
  width: 1px;
  height: 32px;
  background: #2e6b44;
  transform: scaleY(0);
  transform-origin: 50% 0;
}
.wh-scene--3 .s3-sline--l { left: 107px; }
.wh-scene--3 .s3-sline--r { left: 332px; }
.wh-scene--3 .s3-bline {
  position: absolute;
  left: 219.5px;
  top: 295.9px;
  width: 1px;
  height: 34.5px;
  background: #2e6b44;
  transform: scaleY(0);
  transform-origin: 50% 0;
}

/* ---- Candidate cards ---- */
.wh-scene--3 .s3-card {
  position: absolute;
  top: 176.2px;
  width: 105px;
  height: 119px;
  background: #fff;
  border: 1px solid #dfe3eb;
  border-radius: 6px;
  transform: scale(0);
  transform-origin: 50% 0;
}
.wh-scene--3 .s3-card--maria { left: 54.5px; }
.wh-scene--3 .s3-card--david { left: 167.5px; }
.wh-scene--3 .s3-card--kevin { left: 280.5px; }

.wh-scene--3 .s3-cbody { position: absolute; inset: 0; }
.wh-scene--3 .s3-ava {
  position: absolute;
  left: 50%;
  top: 25px;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-radius: 50%;
}
.wh-scene--3 .s3-cname {
  position: absolute;
  left: 0;
  right: 0;
  top: 53px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
  color: #2b2a34;
  white-space: nowrap;
}
.wh-scene--3 .s3-cpct {
  position: absolute;
  left: 0;
  right: 0;
  top: 69px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 14px;
  color: #2e6b44;
}
.wh-scene--3 .s3-badge {
  position: absolute;
  left: 0;
  right: 0;
  top: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  opacity: 0;
}
.wh-scene--3 .s3-badge svg { width: 10px; height: 10px; flex: none; }
.wh-scene--3 .s3-badge span {
  font-size: 8px;
  font-weight: 600;
  color: #16af8a;
  white-space: nowrap;
}

/* ---- SMS notification ---- */
.wh-scene--3 .s3-sms {
  position: absolute;
  left: 220px;
  top: 329.1px;
  width: 192px;
  height: 60px;
  background: #fff;
  border: 1px solid #dfe3eb;
  border-radius: 8px;
  overflow: hidden;
  opacity: 0;
}
.wh-scene--3 .s3-sms-inner { position: absolute; inset: 0; opacity: 0; }
.wh-scene--3 .s3-smsicon {
  position: absolute;
  left: 12.5px;
  top: 20px;
  width: 19px;
  height: 19px;
}
.wh-scene--3 .s3-smsicon svg { position: absolute; inset: 0; width: 19px; height: 19px; }
.wh-scene--3 .s3-tdot {
  position: absolute;
  top: 7.6px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
}
.wh-scene--3 .s3-tdot--l { left: 5.6px; }
.wh-scene--3 .s3-tdot--c { left: 8.5px; }
.wh-scene--3 .s3-tdot--r { left: 11.4px; }
.wh-scene--3 .s3-sms-label {
  position: absolute;
  left: 39px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14.3px;
  font-weight: 600;
  color: #000;
  white-space: nowrap;
}

/* ---- Chat phase ---- */
.wh-scene--3 .s3-wlogo {
  position: absolute;
  left: 389.2px;
  top: 195.5px;
  width: 25.7px;
  height: 25.7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(17, 20, 24, 0.1);
  transform: scale(0);
  transform-origin: 100% 100%;
}
.wh-scene--3 .s3-wlogo svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.wh-scene--3 .s3-bub {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 39.2px;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transform: scale(0);
}
.wh-scene--3 .s3-bub--1 {
  left: 108.2px;
  top: 140px;
  width: 276.4px;
  background: #2e6b44;
  color: #fff;
  border-radius: 14px 14px 5.6px 14px;
  transform-origin: 100% 100%;
}
.wh-scene--3 .s3-bub--2 {
  left: 267.6px;
  top: 182px;
  width: 116.4px;
  background: #2e6b44;
  color: #fff;
  border-radius: 14px 14px 5.6px 14px;
  transform-origin: 100% 100%;
}
.wh-scene--3 .s3-bub--sure {
  left: 57.5px;
  top: 260.8px;
  width: 67.2px;
  background: #d1d8e0;
  color: #2b2a34;
  border-radius: 14px 14px 14px 5.6px;
  transform-origin: 0 100%;
}
.wh-scene--3 .s3-sure-ava {
  position: absolute;
  left: 25px;
  top: 273.1px;
  width: 26.9px;
  height: 26.9px;
  border-radius: 50%;
  transform: scale(0);
  transform-origin: 0 100%;
}