/* Scene 1 — "Guest Debrief" card for /event-agencies (440x440 @60fps, GSAP).
   Mirrors the /staffing scene 1 structure: the event closes, the Voice Agent
   rings a guest, a transcript starts.
   Colors:
   - bg gradient stops (lavender -> pink): #D2CFFD #E1D2FE #F0D6FF #F6D1F3 #FDCDE7
   - box stroke #DFE3EB, box fill rgba(255,255,255,.8), pill #DFE3EB
   - accent green (connectors, transcript outline) #2e6b44
   - magenta gradient (phone + spark icons) #A107FF -> #CB11C6 -> #F61B8E
   - ink #2B2A34, bell #F8BE3E
   Beats (frames @60fps, loop 610f = 10.17s):
   - f0-20    "Event closed" box fades in, rising 10px
   - f50-80   box widens; f70-90 "Lena Marsh" pill fades in
   - f90-120  flow shifts up 48px, connector 1 grows (dot / line / dot)
   - f130-160 "Voice Agent calling" box grows; f160-170 contents fade in
   - f180-210 flow shifts to -128px and scales to 0.8; f190-230 connector 2
   - f230-250 transcript panel; f250-260 title; rows at f280 / f330 / f370
   - f570-590 whole scene fades out; hold to f610, then loop */

.wh-scene--1 {
  position: relative;
  width: 440px;
  height: 440px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(113deg, #D2CFFD 0%, #E1D2FE 24.8%, #F0D6FF 49.6%, #F6D1F3 74.8%, #FDCDE7 100%);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: #2B2A34;
  -webkit-font-smoothing: antialiased;
}
.wh-scene--1 * { box-sizing: border-box; margin: 0; padding: 0; }

.wh-scene--1 .wh1-fade { position: absolute; inset: 0; }

/* ---- flow group (notif + connectors + call box) ---- */
.wh-scene--1 .wh1-flow { position: absolute; inset: 0; }

/* white boxes */
.wh-scene--1 .wh1-notif,
.wh-scene--1 .wh1-call {
  position: absolute;
  left: 220px;
  top: 220px;
  height: 60px;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #DFE3EB;
  border-radius: 8px;
  overflow: hidden;
}
.wh-scene--1 .wh1-notif { width: 284px; }
.wh-scene--1 .wh1-call  { width: 188px; top: 311.5px; }

.wh-scene--1 .wh1-notif-main,
.wh-scene--1 .wh1-call-main {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.wh-scene--1 .wh1-notif-main { left: 14px; gap: 4px; }
.wh-scene--1 .wh1-notif-label {
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
}
.wh-scene--1 .wh1-pill {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  height: 29px;
  padding: 0 13px;
  border-radius: 14.5px;
  background: #DFE3EB;
  font-size: 14px;
  font-weight: 600;
  line-height: 29px;
  white-space: nowrap;
}

.wh-scene--1 .wh1-call-main { left: 18px; gap: 9px; }
.wh-scene--1 .wh1-call-label {
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  color: #000;
}

/* connectors: dot / line / dot, laid out on the column at x=218 */
.wh-scene--1 .wh1-conn {
  position: absolute;
  left: 215.5px;
  width: 5px;
}
.wh-scene--1 .wh1-conn1 { top: 247.9px; height: 36px; }  /* dot centers at 250.4 / 281.4 */
.wh-scene--1 .wh1-conn2 { top: 339px;   height: 36px; }  /* dot centers at 341.5 / 372.5 */
.wh-scene--1 .wh1-dot {
  position: absolute;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #2e6b44;
}
.wh-scene--1 .wh1-dot-a { top: 0; }
.wh-scene--1 .wh1-dot-b { bottom: 0; }
.wh-scene--1 .wh1-line {
  position: absolute;
  left: 2px;
  top: 2.5px;
  bottom: 2.5px;
  width: 1px;
  background: #2e6b44;
  transform-origin: 50% 0;
}

/* ---- transcript panel ----
   Slightly taller than the staffing reference (157px -> 168px) because
   row 1 is a two-line sentence; rows 2 and 3 sit a few px lower. */
.wh-scene--1 .wh1-transcript {
  position: absolute;
  left: 56px;
  top: 214px;
  width: 328px;
  height: 168px;
  border: 1px solid rgba(46, 107, 68, 0.5);
  border-radius: 8px;
  background: linear-gradient(117deg,
    rgba(230, 234, 252, 0.8) 0%,
    rgba(242, 236, 249, 0.8) 46%,
    rgba(255, 239, 245, 0.8) 100%);
}
.wh-scene--1 .wh1-t-title {
  position: absolute;
  left: 15px;
  top: 16px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 14px;
}
.wh-scene--1 .wh1-t-row {
  position: absolute;
  left: 19px;
  right: 16px;
  display: flex;
  font-size: 10px;
  line-height: 17.3px;
}
.wh-scene--1 .wh1-t-row1 { top: 44px; }
.wh-scene--1 .wh1-t-row2 { top: 99px; }
.wh-scene--1 .wh1-t-row3 { top: 130px; }
.wh-scene--1 .wh1-t-time { width: 31px; flex: 0 0 31px; }
.wh-scene--1 .wh1-t-row p { flex: 1; }
.wh-scene--1 .wh1-t-row b { font-weight: 700; }