.communicate-visual-slot {
  position: relative;
  display: grid;
  place-items: center;
  height: 438px;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(ellipse at 64% 77%, rgba(32, 99, 60, .13), transparent 61%), #0b110e;
}
.communicate-visual-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at 64% 79%, rgba(72, 190, 113, .13), transparent 55%);
  transition: opacity 1.2s ease;
}
.communicate-visual-slot.is-steered::after { opacity: 1; }
.audience-photo {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  opacity: .78;
  filter: grayscale(.85) brightness(.88) contrast(1.04);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 86%, transparent 100%);
  pointer-events: none;
}
.audience-person-cutout {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  opacity: 0;
  filter: grayscale(.25) brightness(1.65) drop-shadow(0 0 8px rgba(93, 238, 159, .9)) drop-shadow(0 0 24px rgba(58, 212, 139, .55));
  mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 82%, transparent 100%);
  transition: opacity 1.1s ease;
  pointer-events: none;
}
.communicate-visual-slot.is-steered .audience-person-cutout { opacity: .96; }
.signal-hand {
  position: absolute;
  z-index: 4;
  width: 40%;
  height: auto;
  top: -11%;
  left: 30%;
  opacity: .57;
  filter: saturate(.48) brightness(1.08) contrast(.82);
  mask-image: linear-gradient(to bottom, transparent, #000 36%, #000);
  pointer-events: none;
}
.signal-art {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.metric-grid path {
  fill: none;
  stroke: rgba(164, 217, 182, .095);
  stroke-width: 1;
}
.metric-grid path:last-child { stroke: rgba(164, 217, 182, .055); }
.metric-label {
  fill: #bdd8c5;
  font: 500 12px/1 "Manrope", sans-serif;
  letter-spacing: .15px;
  opacity: .34;
}
.metric-line {
  fill: none;
  stroke: #9fe7b8;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: .68;
  filter: drop-shadow(0 0 4px rgba(134, 229, 166, .32));
}
.metric-ctr .metric-line { stroke: #a1edb9; }
.metric-ctr .metric-label { fill: #a1edb9; }
.metric-cvr .metric-line { stroke: #a6d8df; }
.metric-cvr .metric-label { fill: #a6d8df; }
.metric-aov .metric-line { stroke: #d5d9a9; }
.metric-aov .metric-label { fill: #d5d9a9; }
.metric-end {
  fill: #d5ffe1;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(144, 246, 178, .48));
}
.communicate-visual-slot.is-active .metric-line {
  animation: metric-draw 1.15s cubic-bezier(.22,.72,.2,1) .12s both;
}
.communicate-visual-slot.is-active .metric-ctr .metric-line { animation-delay: .3s; }
.communicate-visual-slot.is-active .metric-cvr .metric-line { animation-delay: .48s; }
.communicate-visual-slot.is-active .metric-end {
  animation: metric-end-appear .4s ease 1.1s both;
}
.communicate-visual-slot.is-active .metric-ctr .metric-end { animation-delay: 1.28s; }
.communicate-visual-slot.is-active .metric-cvr .metric-end { animation-delay: 1.46s; }
.signal-histogram rect {
  fill: url(#bar-glow);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center bottom;
}
.communicate-visual-slot.is-active .signal-histogram rect {
  opacity: .35;
  transform: scaleY(var(--initial-scale));
}
.signal-histogram rect.core-bar {
  filter: drop-shadow(0 0 4px rgba(126, 239, 160, .55));
}
.core-target-label {
  fill: #bdfbd0;
  font: 700 18px/1 "Manrope", sans-serif;
  letter-spacing: .2px;
  opacity: 0;
  filter: drop-shadow(0 0 7px rgba(129, 243, 164, .7));
  stroke: #0b110e;
  stroke-width: 5px;
  stroke-linejoin: round;
  paint-order: stroke fill;
}
.communicate-visual-slot.is-steered .core-target-label {
  animation: core-target-appear .8s ease-out .55s both;
}
@keyframes metric-draw { to { stroke-dashoffset: 0; } }
@keyframes metric-end-appear { to { opacity: 1; } }
@keyframes core-target-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (max-width: 700px) {
  .snap-communicate > .sequence-section { padding-top: 90px; padding-bottom: 36px; }
  .snap-communicate .communicate-visual-slot { height: min(38svh, 300px); min-height: 0; }
  .signal-hand { width: 43%; left: 28.5%; top: -8%; }
  .signal-art { width: 112%; max-width: none; height: 100%; }
  .metric-label { font-size: 13px; }
  .core-target-label { font-size: 17px; }
  .audience-photo,
  .audience-person-cutout { object-fit: contain; object-position: center bottom; }
  .audience-photo {
    opacity: .86;
    filter: grayscale(.78) brightness(.96) contrast(1.03);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 11%, #000 90%, transparent 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .audience-person-cutout { opacity: 1; }
  .metric-line { stroke-dashoffset: 0; }
  .metric-end, .core-target-label { opacity: 1; }
  .signal-histogram rect { opacity: var(--target-opacity); transform: scaleY(var(--target-scale)); }
  .communicate-visual-slot.is-active .metric-line,
  .communicate-visual-slot.is-active .metric-end,
  .communicate-visual-slot.is-steered .core-target-label { animation: none; }
  .communicate-visual-slot.is-active .signal-histogram rect {
    opacity: var(--target-opacity);
    transform: scaleY(var(--target-scale));
  }
}