/* Scene 5 — "Client Report" card (ivy gradient), 440x440.
   Sibling of staffing scene-4 ("AI Workflows"): same pill / rows / connector
   mechanics, but the chat card is replaced by a report document that
   assembles itself and goes to the client.

   Colors: bg gradient #DDF1E4 -> #E8F5EC -> #F1F8F3 (ivy family, accent block
   #2e6b44); ink #2B2A34; muted #6B7280; accent #2e6b44; toggle on #28d07f;
   toggle off #d7dbdf; boxes rgba(255,255,255,.8) + 1px #DFE3EB; document #fff
   with soft shadow.

   Beats (60fps, total 780f = 13.0s, loops):
     f0-90    "Client report" pill fades in, knob slides, track turns green, pill fades out
     f85-105  three dim rows fade in
     f120-140 row 1 "What went well · 3 findings" resolves with a check
     f140-180 connector 1 builds down
     f170-190 row 2 "Needs attention · 2 findings" resolves with a check
     f190-230 connector 2 builds down
     f230     row 3 "Next time · 3 changes" shows the 4-dot orbital spinner (hops every 40f)
     f260-300 connector 3 builds down
     f300-320 stack shifts up and scales to 96%
     f320-345 document card grows in; badge + PDF chip pop (f335-350)
     f345-367 title "Kick-off 2026" and "Report for Northwind" fade in
     f375-480 three numbered lines type in, one every 40f (~0.7s)
     f480-590 hold the finished document (~1.8s)
     f590-620 document slides up and shrinks away
     f605-635 connector 3 retracts upward, stack returns (f615-645)
     f645-665 row 3 flips to "Sent to client" with a check
     f665-755 hold (~1.5s)
     f755-775 whole scene fades out, held to f780, loop */

.wh-scene--5 {
  position: relative;
  width: 440px;
  height: 440px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(120deg, #ddf1e4 -75%, #e8f5ec 30%, #f1f8f3 135%);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #2b2a34;
  -webkit-font-smoothing: antialiased;
}
.wh-scene--5 * { box-sizing: border-box; }

/* wrapper: everything fades out through it at the end of the loop */
.wh-scene--5 .wh5-wrap {
  position: absolute;
  inset: 0;
}

/* ---------- report pill ---------- */
.wh-scene--5 .wh5-pill {
  position: absolute;
  left: 98px;
  top: 199px;
  width: 244px;
  height: 42px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #dfe3eb;
  border-radius: 8px;
  display: flex;
  align-items: center;
  opacity: 0;
}
.wh-scene--5 .wh5-pill__label {
  margin-left: 18px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  color: #2b2a34;
}
.wh-scene--5 .wh5-toggle {
  position: absolute;
  left: 200px;
  top: 11px;
  width: 32px;
  height: 18px;
  border-radius: 9px;
  background: #d7dbdf;
}
.wh-scene--5 .wh5-toggle__knob {
  position: absolute;
  left: 1.5px;
  top: 1.6px;
  width: 15.2px;
  height: 14.7px;
  border-radius: 8px;
  background: #fff;
}

/* ---------- flow group (rows + connectors) ---------- */
.wh-scene--5 .wh5-flow {
  position: absolute;
  inset: 0;
  transform-origin: 220px 146.5px; /* row-1 center: group scales to 96% around it */
}

.wh-scene--5 .wh5-row {
  position: absolute;
  left: 90px;
  width: 260px;
  height: 42px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #dfe3eb;
  border-radius: 8px;
  opacity: 0;
}
.wh-scene--5 .wh5-row--1 { top: 125.5px; }
.wh-scene--5 .wh5-row--2 { top: 199px; }
.wh-scene--5 .wh5-row--3 { top: 272.5px; }

.wh-scene--5 .wh5-row__icon {
  position: absolute;
  left: 10.4px;
  top: 11.8px;
  width: 16px;
  height: 16px;
}
.wh-scene--5 .wh5-check {
  position: absolute;
  inset: 0;
  transform: scale(0);
}
.wh-scene--5 .wh5-row__label {
  position: absolute;
  left: 32.3px;
  top: 0;
  height: 40px; /* inner height */
  display: flex;
  align-items: center;
}
.wh-scene--5 .wh5-label {
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  color: #2b2a34;
  white-space: nowrap;
  opacity: 0.4;
}
.wh-scene--5 .wh5-label--b {
  position: absolute;
  left: 0;
  opacity: 0;
}

/* orbital spinner on row 3 (4 dots hopping around a 4-slot orbit) */
.wh-scene--5 .wh5-spin {
  position: absolute;
  inset: 0;
  transform: scale(0);
}
.wh-scene--5 .wh5-spin i {
  position: absolute;
  width: 4.24px;
  height: 4.24px;
  border-radius: 1px;
  transform: rotate(45deg);
}
/* orbit centers: (8,4.5) (11.5,8) (8,11.5) (4.5,8) */
.wh-scene--5 .wh5-spin i:nth-child(1) { left: 5.88px; top: 2.38px; background: #2e6b44; }
.wh-scene--5 .wh5-spin i:nth-child(2) { left: 9.38px; top: 5.88px; background: #16af8a; }
.wh-scene--5 .wh5-spin i:nth-child(3) { left: 5.88px; top: 9.38px; background: #2e6b44; }
.wh-scene--5 .wh5-spin i:nth-child(4) { left: 2.38px; top: 5.88px; background: #16af8a; }

/* ---------- connectors (dot / line / dot) ---------- */
.wh-scene--5 .wh5-conn { position: absolute; left: 0; top: 0; width: 440px; }
.wh-scene--5 .wh5-conn i { position: absolute; display: block; background: #2e6b44; }
.wh-scene--5 .wh5-conn__d1,
.wh-scene--5 .wh5-conn__d2 {
  left: 217.5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: scale(0);
}
.wh-scene--5 .wh5-conn__line {
  left: 219.5px;
  width: 1px;
  height: 31px;
  transform: scaleY(0);
  transform-origin: top;
}
.wh-scene--5 .wh5-conn--1 .wh5-conn__d1 { top: 165.25px; }
.wh-scene--5 .wh5-conn--1 .wh5-conn__line { top: 167.75px; }
.wh-scene--5 .wh5-conn--1 .wh5-conn__d2 { top: 196.25px; }
.wh-scene--5 .wh5-conn--2 .wh5-conn__d1 { top: 238.75px; }
.wh-scene--5 .wh5-conn--2 .wh5-conn__line { top: 241.25px; }
.wh-scene--5 .wh5-conn--2 .wh5-conn__d2 { top: 269.75px; }
.wh-scene--5 .wh5-conn--3 .wh5-conn__d1 { top: 311.75px; }
.wh-scene--5 .wh5-conn--3 .wh5-conn__line { top: 314.25px; }
.wh-scene--5 .wh5-conn--3 .wh5-conn__d2 { top: 342.75px; }

/* ---------- report document ---------- */
.wh-scene--5 .wh5-doc {
  position: absolute;
  left: 56px;
  top: 265px;
  width: 328px;
  height: 124px;
  background: #fff;
  border: 1px solid #dfe3eb;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(17, 20, 24, 0.08), 0 1px 3px rgba(17, 20, 24, 0.05);
  opacity: 0;
  visibility: hidden;
  transform-origin: 164px -2px; /* stage point (220,263): grows from / shrinks toward the connector */
}
.wh-scene--5 .wh5-doc__logo {
  position: absolute;
  left: 14px;
  top: 13px;
  width: 20px;
  height: 20px;
  transform: scale(0);
}
.wh-scene--5 .wh5-doc__chip {
  position: absolute;
  right: 14px;
  top: 14px;
  padding: 2px 6px;
  font-size: 8.5px;
  line-height: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #2e6b44;
  background: rgba(46, 107, 68, 0.1);
  border-radius: 4px;
  transform: scale(0);
}
.wh-scene--5 .wh5-doc__title {
  position: absolute;
  left: 42px;
  top: 11px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: #2b2a34;
  white-space: nowrap;
  opacity: 0;
}
.wh-scene--5 .wh5-doc__sub {
  position: absolute;
  left: 42px;
  top: 27px;
  font-size: 10.5px;
  line-height: 14px;
  font-weight: 500;
  color: #6b7280;
  white-space: nowrap;
  opacity: 0;
}
.wh-scene--5 .wh5-doc__rule {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 47px;
  height: 1px;
  background: #eef1f4;
  transform: scaleX(0);
  transform-origin: left;
}
.wh-scene--5 .wh5-doc__line {
  position: absolute;
  left: 14px;
  font-size: 10.5px;
  line-height: 16px;
  font-weight: 500;
  color: #2b2a34;
  white-space: nowrap;
  opacity: 0;
  clip-path: inset(0 100% 0 0); /* typed in by revealing from the left */
}
.wh-scene--5 .wh5-doc__line--1 { top: 56px; }
.wh-scene--5 .wh5-doc__line--2 { top: 74px; }
.wh-scene--5 .wh5-doc__line--3 { top: 92px; }
.wh-scene--5 .wh5-doc__meta { color: #6b7280; font-weight: 500; }