/* One signal loss, then three horizontal fragments reassemble the original text. */
[data-signal] {
  position: relative;
}

[data-signal] > .signal-source {
  display: block;
}

[data-signal] > .signal-echo {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  white-space: inherit;
  text-transform: inherit;
  color: rgba(225, 239, 242, 0.98);
  pointer-events: none;
  user-select: none;
  opacity: 0;
}

[data-signal-active] > .signal-source {
  animation: signal-source-recovery 780ms steps(1, end) both;
}

[data-signal-active] > .signal-echo--1 {
  clip-path: inset(0 0 66.666667%);
  animation: signal-fragment-upper 780ms steps(1, end) both;
}

[data-signal-active] > .signal-echo--2 {
  color: rgba(194, 221, 228, 0.98);
  clip-path: inset(33.333333% 0 33.333333%);
  animation: signal-fragment-middle 780ms steps(1, end) both;
}

[data-signal-active] > .signal-echo--3 {
  clip-path: inset(66.666667% 0 0);
  animation: signal-fragment-lower 780ms steps(1, end) both;
}

/* 14–29% is one 117 ms dropout. Recovered thirds then stay perfectly still. */
@keyframes signal-source-recovery {
  0% { opacity: 1; clip-path: inset(0); }
  8% { opacity: 0.45; clip-path: inset(43% 0 47%); }
  14% { opacity: 0; clip-path: inset(0); }
  29% { opacity: 1; clip-path: inset(0 0 100%); }
  52% { opacity: 1; clip-path: inset(0 0 66.666667%); }
  67% { opacity: 1; clip-path: inset(0 0 33.333333%); }
  85%, 100% { opacity: 1; clip-path: inset(0); }
}

@keyframes signal-fragment-upper {
  0% { opacity: 0; transform: translate(0, 0); }
  8% { opacity: 0.95; transform: translate(18px, 1px); }
  14% { opacity: 0; transform: translate(0, 0); }
  29% { opacity: 1; transform: translate(-16px, -1px); }
  42% { opacity: 0.95; transform: translate(10px, 0); }
  52%, 100% { opacity: 0; transform: translate(0, 0); }
}

@keyframes signal-fragment-middle {
  0% { opacity: 0; transform: translate(0, 0); }
  8% { opacity: 0.9; transform: translate(-22px, -1px); }
  14% { opacity: 0; transform: translate(0, 0); }
  29% { opacity: 0.95; transform: translate(22px, 0); }
  44% { opacity: 1; transform: translate(-12px, 1px); }
  57% { opacity: 1; transform: translate(4px, 0); }
  67%, 100% { opacity: 0; transform: translate(0, 0); }
}

@keyframes signal-fragment-lower {
  0% { opacity: 0; transform: translate(0, 0); }
  8% { opacity: 0.95; transform: translate(13px, 1px); }
  14% { opacity: 0; transform: translate(0, 0); }
  42% { opacity: 1; transform: translate(-20px, 1px); }
  58% { opacity: 0.95; transform: translate(12px, -1px); }
  73% { opacity: 1; transform: translate(-5px, 0); }
  85%, 100% { opacity: 0; transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  [data-signal] > .signal-source {
    animation: none;
    opacity: 1;
    clip-path: none;
  }

  [data-signal] > .signal-echo {
    display: none;
    animation: none;
  }
}