/* Production safety layer: effects stay behind readable UI. */
.signal {
  isolation: isolate;
}

.signal-sky {
  z-index: 1;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(
    ellipse 62% 57% at 50% 50%,
    #000 0 58%,
    rgba(0, 0, 0, 0.96) 66%,
    rgba(0, 0, 0, 0.76) 76%,
    rgba(0, 0, 0, 0.42) 86%,
    rgba(0, 0, 0, 0.14) 94%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 62% 57% at 50% 50%,
    #000 0 58%,
    rgba(0, 0, 0, 0.96) 66%,
    rgba(0, 0, 0, 0.76) 76%,
    rgba(0, 0, 0, 0.42) 86%,
    rgba(0, 0, 0, 0.14) 94%,
    transparent 100%
  );
}

.signal-ui {
  z-index: 10;
  pointer-events: none;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.signal-close,
.signal-copy {
  position: relative;
  z-index: 20;
  pointer-events: auto;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.signal-copy {
  width: min(72%, 600px);
  margin: 0 0 7% 9%;
  padding: 0;
}

.signal-kicker,
.signal-copy h2,
.signal-copy > p:last-child,
.signal-close {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.96), 0 0 18px rgba(0, 0, 0, 0.58);
}

.signal-copy h2 {
  max-width: 100%;
  text-wrap: balance;
}

.signal-copy > p:last-child {
  color: rgba(255, 255, 255, 0.94);
  max-width: 560px;
}

.signal-mark {
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #050505;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

.signal-glow {
  z-index: 3;
}

.signal-beam,
.signal-origin,
.signal-stars {
  z-index: 2;
}

@media (max-width: 760px) {
  .signal-copy {
    width: 72%;
    margin: 0 0 9% 12%;
  }

  .signal-copy h2 {
    font-size: clamp(34px, 10vw, 52px);
  }

  .signal-copy > p:last-child {
    font-size: 14px;
    line-height: 1.5;
  }

  .signal-close {
    margin-right: 10%;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .signal-sky,
  .signal-ui {
    height: calc(100svh - 20px);
    min-height: 0;
  }

  .signal-copy {
    width: 68%;
    margin-bottom: 5%;
  }

  .signal-copy h2 {
    margin: 8px 0;
    font-size: clamp(30px, 6vw, 46px);
  }

  .signal-copy > p:last-child {
    font-size: 13px;
    line-height: 1.4;
  }
}