/*
 * LFF ILM Playbook Integration prototype support.
 * All selectors are scoped to the prototype so this should not alter the rest of the LFF site.
 */

#lff-integration-prototype {
  overflow: visible !important;
}

#lff-integration-prototype .playbook-bar.is-fixed {
  position: fixed !important;
  z-index: 9998 !important;
  margin: 0 !important;
  box-shadow: 0 1px 0 rgba(23,51,46,.10);
}

#lff-integration-prototype .playbook-spacer {
  height: 0;
}

#lff-integration-prototype .playbook-spacer.active {
  height: var(--lff-bar-height, 44px);
}

/* Make the opening animation slow enough to encounter while reading. */
#lff-integration-prototype .network-stage .hero-network .line1 {
  stroke-dasharray: 210;
  stroke-dashoffset: 210;
  animation: lff-one-way-cycle 16s ease 3s infinite !important;
}

#lff-integration-prototype .network-stage .hero-network .line2 {
  stroke-dasharray: 210;
  stroke-dashoffset: 210;
  animation: lff-two-way-cycle 16s ease 3s infinite !important;
}

@keyframes lff-one-way-cycle {
  0%, 8%   { stroke-dashoffset: 210; opacity: .35; }
  24%, 100% { stroke-dashoffset: 0; opacity: .76; }
}

@keyframes lff-two-way-cycle {
  0%, 34%  { stroke-dashoffset: 210; opacity: .18; }
  54%, 100% { stroke-dashoffset: 0; opacity: .72; }
}

#lff-integration-prototype .hero-concept-caption {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 22px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--ink);
  font-family: "Raleway", Arial, sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .01em;
}

#lff-integration-prototype .hero-concept-caption .stage-label {
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,128,105,.16);
}

#lff-integration-prototype .hero-concept-caption .stage-arrow {
  color: var(--green);
  font-weight: 800;
}

#lff-integration-prototype .state-btn:focus-visible,
#lff-integration-prototype .detail-btn:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

@media (max-width:850px) {
  #lff-integration-prototype .hero-concept-caption {
    left: 14px;
    right: 14px;
    bottom: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #lff-integration-prototype .network-stage .hero-network .line1,
  #lff-integration-prototype .network-stage .hero-network .line2 {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }
}