/* Scene 3 — "Structured Notes" (teal). Stage 440x440, mirrors the /staffing scene-2 mechanics.
   Story: one guest conversation (Lena Marsh, 3:04 call) becomes four fields, then coded
   transcript, tagged themes and a line in the client report.

   Colors: bg gradient #379392 -> #9bc9c8 -> #fff (same as reference scene-2); ink #2B2A34;
   muted #6B7280; card rgba(255,255,255,.8) with #DFE3EB border; feed line #e534cf, pulse #f96fbd;
   accent green #2e6b44 (pips, Keynote tag/chip); amber #F2A63B (Bar queue tag/chip);
   check green #28d07f.

   Beats (60 fps, loop 630 f = 10.5 s):
     0-20    profile card fades in; dotted line drifts down for the whole loop
     50/105/160/215   pulse k starts travelling down the line (80 f each)
     115/170/225/280  light sweep behind the card (0 -> .6 -> 0 over 40 f)
     120/175/230/285  field k fills: Overall 4/5, Highlight Keynote, Needs attention Bar queue, Would come again Yes
     380-400 profile fades out
     400-420 status rows fade in
     430/455/480      checks pop and row text brightens: Transcript coded, Themes tagged, Added to client report
     470     theme chips (Keynote green, Bar queue amber) slide in beside "Themes tagged"
     600-620 whole scene fades out via .wh3-wrap, held empty until 630 */
.wh-scene--3 {
  position: relative;
  width: 440px;
  height: 440px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(120deg, #379392 -75%, #9bc9c8 30%, #ffffff 135%);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #2b2a34;
  -webkit-font-smoothing: antialiased;
}
.wh-scene--3 * { box-sizing: border-box; margin: 0; padding: 0; }

.wh-scene--3 .wh3-wrap {
  position: absolute;
  inset: 0;
}

/* ---- Phase 1: profile group ---- */
.wh-scene--3 .wh3-profile {
  position: absolute;
  inset: 0;
  opacity: 0;
}

/* dotted feed line (scrolls downward) */
.wh-scene--3 .wh3-dash {
  position: absolute;
  z-index: 1;
  left: 219px;
  top: 34px;
  width: 2px;
  height: 150px;
  background-image: repeating-linear-gradient(
    to bottom,
    #e534cf 0,
    #e534cf 2px,
    transparent 2px,
    transparent 5px
  );
  background-position: 0 1px;
}

/* travelling data pulse */
.wh-scene--3 .wh3-dot {
  position: absolute;
  z-index: 3;
  left: 216px;
  top: 60.5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f96fbd;
  opacity: 0;
  transform: scale(0.2);
}

.wh-scene--3 .wh3-logo {
  position: absolute;
  z-index: 5;
  left: 193px;
  top: 33px;
  width: 54px;
  height: 54px;
}

/* light sweep behind the card (peeks around its edges, glows through the .8 white) */
.wh-scene--3 .wh3-light {
  position: absolute;
  z-index: 2;
  left: -82px;
  top: 119px;
  width: 604px;
  height: 180px;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.55) 40%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* conversation card */
.wh-scene--3 .wh3-card {
  position: absolute;
  z-index: 4;
  left: 46px;
  top: 184px;
  width: 348px;
  height: 220px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #dfe3eb;
  border-radius: 8px;
}
.wh-scene--3 .wh3-avatar {
  position: absolute;
  left: 19px;
  top: 15px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.wh-scene--3 .wh3-name {
  position: absolute;
  left: 60px;
  top: 12px;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: #2b2a34;
  white-space: nowrap;
}
.wh-scene--3 .wh3-meta {
  position: absolute;
  left: 60px;
  top: 33px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  color: #6b7280;
  white-space: nowrap;
}
.wh-scene--3 .wh3-sep {
  position: absolute;
  left: 20px;
  width: 308px;
  height: 1px;
  background: #bdbdc0;
  opacity: 0.35;
}
.wh-scene--3 .wh3-label {
  position: absolute;
  left: 20px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  color: #2b2a34;
  white-space: nowrap;
}
.wh-scene--3 .wh3-value {
  position: absolute;
  right: 20px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  opacity: 0;
  white-space: nowrap;
}
.wh-scene--3 .wh3-text {
  font-size: 15px;
  line-height: 22px;
  font-weight: 800;
  color: #2b2a34;
}
.wh-scene--3 .wh3-score {
  font-size: 13px;
  line-height: 22px;
  font-weight: 800;
  color: #2b2a34;
}
.wh-scene--3 .wh3-pips {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.wh-scene--3 .wh3-pip {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid #2e6b44;
  background: transparent;
}
.wh-scene--3 .wh3-pip--on { background: #2e6b44; }
.wh-scene--3 .wh3-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 63px;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}
.wh-scene--3 .wh3-tag--green {
  background: rgba(46, 107, 68, 0.12);
  color: #2e6b44;
}
.wh-scene--3 .wh3-tag--amber {
  background: rgba(242, 166, 59, 0.2);
  color: #9a5f0b;
}

/* ---- Phase 2: status rows ---- */
.wh-scene--3 .wh3-status {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.wh-scene--3 .wh3-row {
  position: absolute;
  left: 84px;
  width: 272px;
  height: 42px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #dfe3eb;
  border-radius: 8px;
}
.wh-scene--3 .wh3-check {
  position: absolute;
  left: 12px;
  top: 12px;
  transform: scale(0);
}
.wh-scene--3 .wh3-rowtext {
  position: absolute;
  left: 33px;
  top: 11px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  color: #2b2a34;
  white-space: nowrap;
  opacity: 0.4;
}
.wh-scene--3 .wh3-chips {
  position: absolute;
  right: 10px;
  top: 10px;
  display: flex;
  gap: 4px;
}
.wh-scene--3 .wh3-chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 63px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
}
.wh-scene--3 .wh3-chip--green {
  background: rgba(46, 107, 68, 0.12);
  color: #2e6b44;
}
.wh-scene--3 .wh3-chip--amber {
  background: rgba(242, 166, 59, 0.2);
  color: #9a5f0b;
}