/* IQAI Trace — Evidence Wake
   Selection makes a relationship's route back to its source temporarily explicit. */

.iq-page-trace #interactive-example .iq-trace-wake{
  fill:none;
  stroke:#111;
  stroke-width:1.25;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:100;
  stroke-dashoffset:100;
  opacity:0;
}

.iq-page-trace #interactive-example .iq-trace-wake.is-active{
  opacity:.92;
  animation:iqTraceWake 620ms cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes iqTraceWake{to{stroke-dashoffset:0}}

.iq-page-trace #interactive-example.iq-trace-wake-active svg > *{
  transition:opacity 170ms ease;
  opacity:.16;
}

.iq-page-trace #interactive-example.iq-trace-wake-active svg .iq-trace-wake-active-node,
.iq-page-trace #interactive-example.iq-trace-wake-active svg .iq-trace-wake-active-node *,
.iq-page-trace #interactive-example.iq-trace-wake-active svg .iq-trace-wake{
  opacity:1!important;
}

.iq-page-trace #interactive-example .iq-trace-wake-caption{
  display:flex;
  justify-content:space-between;
  gap:20px;
  min-height:40px;
  padding:10px 0 11px;
  border-top:1px solid #ddd;
  border-bottom:1px solid #ddd;
  font-size:11px;
  line-height:1.45;
  color:#666;
}

.iq-page-trace #interactive-example .iq-trace-wake-caption strong{
  color:#222;
  font-weight:500;
}

@media(max-width:760px){
  .iq-page-trace #interactive-example .iq-trace-wake-caption{display:none}
}

@media(prefers-reduced-motion:reduce){
  .iq-page-trace #interactive-example .iq-trace-wake.is-active{
    animation:none!important;
    stroke-dashoffset:0!important;
  }
  .iq-page-trace #interactive-example.iq-trace-wake-active svg > *{
    transition:none!important;
  }
}
