.flight-result {
  --result-accent: var(--green);
  --result-rgb: 158, 234, 117;
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 70px 24px 46px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: radial-gradient(circle at 50% 48%, rgba(var(--result-rgb), .09), transparent 42%);
  transition: opacity .18s ease, visibility .18s ease;
}

.flight-result[hidden] { display: none; }
.flight-result.visible { opacity: 1; visibility: visible; }
.flight-result.loss { --result-accent: var(--orange); --result-rgb: 255, 84, 46; }

.flight-result::before,
.flight-result::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(var(--result-rgb), .34);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.25);
  opacity: 0;
}

.flight-result::before { width: min(62vw, 570px); aspect-ratio: 1; }
.flight-result::after { width: min(42vw, 390px); aspect-ratio: 1; border-style: dashed; }
.flight-result.visible::before { animation: result-radar 1.05s cubic-bezier(.16, 1, .3, 1) both; }
.flight-result.visible::after { animation: result-radar .85s .08s cubic-bezier(.16, 1, .3, 1) both; }

.flight-result-card {
  position: relative;
  width: min(560px, 88%);
  padding: 20px clamp(22px, 4vw, 48px) 22px;
  color: var(--cream);
  background: linear-gradient(90deg, rgba(12, 13, 10, .96), rgba(24, 26, 20, .92) 72%, rgba(var(--result-rgb), .13));
  border-top: 1px solid rgba(var(--result-rgb), .72);
  border-bottom: 1px solid rgba(var(--result-rgb), .42);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .42), inset 4px 0 0 var(--result-accent);
  clip-path: polygon(0 0, 96% 0, 100% 18%, 100% 100%, 4% 100%, 0 82%);
  transform: translateY(18px) scale(.96);
  opacity: 0;
}

.flight-result.visible .flight-result-card { animation: result-card-in .48s cubic-bezier(.16, 1, .3, 1) both; }
.flight-result.loss .flight-result-card { animation-name: result-card-loss; }

.flight-result-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0 42%, rgba(var(--result-rgb), .13) 50%, transparent 58%);
  transform: translateX(-120%);
}

.flight-result.visible .flight-result-card::before { animation: result-scan .72s .08s ease-out both; }

.flight-result-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--result-accent);
  font: 600 9px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.flight-result-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--result-accent);
  box-shadow: 0 0 0 5px rgba(var(--result-rgb), .12), 0 0 18px rgba(var(--result-rgb), .68);
}

.flight-result-total {
  display: flex;
  align-items: baseline;
  margin: 8px 0 5px;
  font-family: var(--display);
  font-weight: 700;
  line-height: .82;
  letter-spacing: -.045em;
  white-space: nowrap;
}

.flight-result-total > span {
  margin-right: 4px;
  color: var(--result-accent);
  font-size: clamp(48px, 7vw, 90px);
}

.flight-result-total strong { font: inherit; font-size: clamp(64px, 10vw, 124px); }
.flight-result-total small {
  margin-left: 12px;
  color: var(--result-accent);
  font: 600 clamp(10px, 1.4vw, 15px)/1 var(--mono);
  letter-spacing: .08em;
}

.flight-result-meta {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #92938a;
  font: 500 8px/1.2 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.flight-result-meta b { color: var(--cream); font-weight: 600; }
.flight-result-meta i { width: 28px; height: 1px; background: rgba(var(--result-rgb), .7); }
.flight-result.loss .flight-result-total strong { color: #fff4ee; }

@keyframes result-card-in {
  0% { opacity: 0; transform: translateY(18px) scale(.96); }
  55% { opacity: 1; transform: translateY(-3px) scale(1.015); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes result-card-loss {
  0% { opacity: 0; transform: translateX(-13px) scale(.98); }
  35% { opacity: 1; transform: translateX(8px) scale(1); }
  55% { transform: translateX(-5px); }
  75% { transform: translateX(2px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes result-radar {
  0% { opacity: .7; transform: translate(-50%, -50%) scale(.25); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); }
}

@keyframes result-scan { to { transform: translateX(120%); } }

@media (max-width: 760px) {
  .flight-result { padding: 56px 10px 34px; }
  .flight-result-card { width: 94%; padding: 18px 22px 20px; }
  .flight-result-total { flex-wrap: wrap; }
  .flight-result-total strong { font-size: clamp(62px, 22vw, 96px); }
  .flight-result-total > span { font-size: clamp(44px, 15vw, 72px); }
  .flight-result-total small { width: 100%; margin: 10px 0 0 4px; }
  .flight-result-meta { align-items: flex-start; flex-wrap: wrap; }
  .flight-result-meta i { width: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .flight-result.visible::before,
  .flight-result.visible::after,
  .flight-result.visible .flight-result-card,
  .flight-result.visible .flight-result-card::before { animation: none; }
  .flight-result.visible .flight-result-card { opacity: 1; transform: none; }
}