.flight-warp-effect {
  position: fixed;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 110ms ease-out;
}

.flight-warp-effect.active {
  opacity: 1;
}

.flight-warp-effect::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 244, 178, 0) 18%, rgba(255, 224, 92, 0.3) 68%, rgba(255, 104, 40, 0.42) 100%);
  opacity: 0;
}

.flight-warp-effect.entry::after {
  animation: flightWarpEntryFlash 480ms ease-out both;
}

.flight-warp-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--warp-length);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 239, 136, 0), rgba(255, 245, 188, 0.92) 42%, rgba(255, 92, 32, 0.08));
  box-shadow: 0 0 9px rgba(255, 135, 44, 0.66);
  opacity: 0;
  transform-origin: 0 50%;
  animation: flightWarpLine var(--warp-duration) linear var(--warp-delay) infinite;
  animation-play-state: paused;
  will-change: transform, opacity;
}

.flight-warp-effect.active .flight-warp-line {
  animation-play-state: running;
}

.flight-warp-line:nth-child(3n) {
  height: 1px;
  background: linear-gradient(90deg, rgba(126, 220, 255, 0), rgba(166, 231, 255, 0.82) 48%, rgba(71, 174, 255, 0.04));
  box-shadow: 0 0 5px rgba(74, 183, 255, 0.42);
}

@keyframes flightWarpLine {
  0% {
    opacity: 0;
    transform: rotate(var(--warp-angle)) translateX(var(--warp-start)) scaleX(0.18);
  }
  18% {
    opacity: 0.96;
  }
  72% {
    opacity: 0.64;
  }
  100% {
    opacity: 0;
    transform: rotate(var(--warp-angle)) translateX(var(--warp-end)) scaleX(1.35);
  }
}

@keyframes flightWarpEntryFlash {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .flight-warp-line {
    display: none;
  }
}