/* Homepage direction 01: image-led Relay signal treatment. */
.next {
  isolation: isolate;
  background: #080708;
}

.next::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("img/arcadia-live.jpg") center 48% / cover no-repeat;
  filter: saturate(0.86) contrast(1.08);
  transform: scale(1.01);
}

.next::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(8, 7, 8, 0.94) 0%, rgba(8, 7, 8, 0.77) 43%, rgba(8, 7, 8, 0.38) 100%),
    linear-gradient(180deg, rgba(8, 7, 8, 0.44), rgba(8, 7, 8, 0.08) 52%, rgba(8, 7, 8, 0.76));
}

.next-grid {
  position: relative;
  z-index: 1;
}

.next h2,
.next .lede,
.next .eyebrow {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.56);
}

.signal-card {
  min-height: min(36vw, 410px);
  border-color: rgba(236, 232, 221, 0.26);
  background: linear-gradient(135deg, rgba(8, 7, 8, 0.28), rgba(8, 7, 8, 0.12));
  backdrop-filter: blur(2px);
}

.signal-card .mini-globe {
  inset: auto 10% auto 10%;
  top: 53%;
  height: 1px;
  border: 0;
  border-radius: 0;
  background: rgba(236, 232, 221, 0.34);
  box-shadow: none;
  animation: none;
}

.signal-card .mini-globe::before {
  inset: auto;
  left: 23%;
  top: -7px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--red);
  opacity: 1;
  filter: none;
  box-shadow: 0 0 0 0 rgba(176, 45, 52, 0.58);
  animation: relayPulse 2.5s ease-out infinite;
}

.signal-card .mini-globe::after {
  content: "";
  position: absolute;
  right: 0;
  top: -7px;
  width: 15px;
  height: 15px;
  border: 1px solid rgba(236, 232, 221, 0.82);
  border-radius: 50%;
}

.signal-card .label {
  right: 10%;
  bottom: 11%;
  left: 10%;
  max-width: 31ch;
  color: rgba(236, 232, 221, 0.9);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@keyframes relayPulse {
  70% { box-shadow: 0 0 0 22px rgba(176, 45, 52, 0); }
  100% { box-shadow: 0 0 0 0 rgba(176, 45, 52, 0); }
}

@media (max-width: 760px) {
  .next::before { background-position: 57% 50%; }
  .next::after { background: linear-gradient(180deg, rgba(8, 7, 8, 0.86), rgba(8, 7, 8, 0.62) 62%, rgba(8, 7, 8, 0.86)); }
  .signal-card { min-height: 235px; }
}