/* Real-DPS database-to-database continuity visual */

.dr-visual {
  position: relative;
  min-height: 300px;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  margin: 28px -6px 34px;
  padding: 22px 24px 24px;
  overflow: hidden;
  border-block: 1px solid rgba(104, 199, 242, .16);
  background:
    radial-gradient(circle at 84% 48%, rgba(35, 163, 220, .12), transparent 34%),
    linear-gradient(90deg, rgba(10, 39, 58, .1), rgba(16, 58, 82, .22), rgba(10, 39, 58, .1));
  isolation: isolate;
}

.dr-visual::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgba(93, 182, 224, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(93, 182, 224, .045) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.dr-visual__head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  color: #71ccef;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.dr-visual__head b {
  color: #d9eff8;
  font-family: "IBM Plex Sans", "Noto Sans SC", sans-serif;
  font-size: 12px;
  font-weight: 620;
  letter-spacing: .04em;
  text-transform: none;
}

.dr-topology {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(104px, .7fr) minmax(220px, 2.4fr) minmax(104px, .7fr);
  gap: 18px;
  align-items: center;
  flex: 1;
}

.dr-database {
  position: relative;
  min-width: 0;
  padding: 15px 12px 14px;
  border: 1px solid rgba(94, 190, 231, .22);
  background: rgba(6, 28, 45, .72);
  text-align: center;
}

.dr-database::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(89, 186, 229, .07);
  pointer-events: none;
}

.dr-state {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #8fb9ca;
  font-size: 9px;
  letter-spacing: .08em;
}

.dr-state i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #33d08b;
  box-shadow: 0 0 9px rgba(51, 208, 139, .7);
}

.dr-db-glyph {
  position: relative;
  width: 70px;
  height: 62px;
  margin: 20px auto 12px;
  color: #57c9f4;
}

.dr-db-glyph span {
  position: absolute;
  left: 0;
  width: 70px;
  height: 24px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(50, 170, 221, .16), rgba(9, 41, 61, .92));
  box-shadow: inset 0 0 15px rgba(67, 187, 236, .08);
}

.dr-db-glyph span:nth-child(1) { top: 0; }
.dr-db-glyph span:nth-child(2) { top: 18px; }
.dr-db-glyph span:nth-child(3) { top: 36px; }

.dr-database strong,
.dr-database small {
  position: relative;
  z-index: 1;
  display: block;
}

.dr-database strong {
  color: #edf9fe;
  font-size: 12px;
  font-weight: 640;
}

.dr-database small {
  margin-top: 3px;
  color: #6290a5;
  font-family: "IBM Plex Mono", monospace;
  font-size: 8px;
  letter-spacing: .14em;
}

.dr-link {
  position: relative;
  align-self: stretch;
  min-width: 0;
  min-height: 168px;
}

.dr-rails {
  position: absolute;
  inset: 50% 0 auto;
  display: grid;
  gap: 21px;
  transform: translateY(-50%);
}

.dr-rail {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, rgba(80, 176, 220, .28), rgba(84, 201, 244, .72), rgba(80, 176, 220, .28));
}

.dr-rail::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-top: 1px solid #61cef4;
  border-right: 1px solid #61cef4;
  transform: rotate(45deg);
}

.dr-packet {
  position: absolute;
  left: 0;
  top: -1px;
  width: 42px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #9de9ff 58%, #38b9ed);
  box-shadow: 0 0 10px rgba(67, 202, 250, .8);
  opacity: 0;
  animation: drPacket 4.6s linear infinite;
  animation-play-state: paused;
}

.dr-rail:nth-child(2) .dr-packet { animation-delay: -1.5s; }
.dr-rail:nth-child(3) .dr-packet { animation-delay: -3s; }

.dr-guard {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: min(174px, 78%);
  padding: 14px 16px 13px;
  border: 1px solid rgba(90, 196, 237, .38);
  background: rgba(7, 33, 51, .94);
  box-shadow: 0 14px 34px rgba(0, 13, 24, .3), inset 0 0 20px rgba(54, 173, 221, .06);
  text-align: center;
  transform: translate(-50%, -50%);
}

.dr-guard::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  width: 28%;
  height: 1px;
  background: #62cef4;
  box-shadow: 0 0 9px rgba(76, 202, 249, .72);
}

.dr-guard span,
.dr-guard b,
.dr-guard small {
  display: block;
}

.dr-guard span {
  color: #5ed6a0;
  font-size: 8px;
  letter-spacing: .12em;
}

.dr-guard b {
  margin-top: 5px;
  color: #f2fbff;
  font-family: "IBM Plex Mono", monospace;
  font-size: 15px;
  letter-spacing: .08em;
}

.dr-guard small {
  margin-top: 6px;
  color: #8cb7c9;
  font-size: 8px;
  line-height: 1.55;
}

.dr-switch {
  display: inline-block;
  margin-top: 9px;
  padding: 3px 8px 2px;
  color: #baf4dc;
  border: 1px solid rgba(82, 213, 161, .3);
  background: rgba(38, 157, 112, .09);
  font-size: 8px;
  font-style: normal;
  font-weight: 650;
  letter-spacing: .08em;
  white-space: nowrap;
}

.dr-target .dr-db-glyph {
  color: #67d7b0;
  animation: drReceive 4.6s ease-in-out infinite;
  animation-play-state: paused;
}

.dr-visual.is-running .dr-packet,
.dr-visual.is-running .dr-target .dr-db-glyph {
  animation-play-state: running;
}

@keyframes drPacket {
  0% { left: 0; opacity: 0; transform: translateX(-100%); }
  12%, 82% { opacity: 1; }
  100% { left: 100%; opacity: 0; transform: translateX(0); }
}

@keyframes drReceive {
  0%, 72%, 100% { filter: drop-shadow(0 0 0 rgba(75, 218, 172, 0)); }
  82% { filter: drop-shadow(0 0 10px rgba(75, 218, 172, .52)); }
}

@media (max-width: 760px) {
  .dr-visual {
    min-height: 510px;
    margin: 22px -4px 28px;
    padding: 20px 18px;
  }

  .dr-visual__head {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .dr-topology {
    grid-template-columns: 1fr;
    grid-template-rows: auto 146px auto;
    gap: 8px;
    justify-items: center;
    width: 100%;
  }

  .dr-database {
    width: min(220px, 100%);
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 13px;
    align-items: center;
    padding: 13px 16px;
    text-align: left;
  }

  .dr-state {
    grid-column: 2;
  }

  .dr-db-glyph {
    grid-column: 1;
    grid-row: 1 / 4;
    width: 52px;
    height: 48px;
    margin: 0;
  }

  .dr-db-glyph span {
    width: 52px;
    height: 18px;
  }

  .dr-db-glyph span:nth-child(2) { top: 14px; }
  .dr-db-glyph span:nth-child(3) { top: 28px; }

  .dr-database strong,
  .dr-database small {
    grid-column: 2;
  }

  .dr-link {
    width: 100%;
    min-height: 146px;
  }

  .dr-rails {
    left: 50%;
    right: auto;
    width: 132px;
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .dr-guard {
    width: 168px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dr-packet,
  .dr-target .dr-db-glyph {
    animation: none !important;
  }

  .dr-packet {
    display: none;
  }

  .dr-target .dr-db-glyph {
    filter: drop-shadow(0 0 6px rgba(75, 218, 172, .26));
  }
}