/* Shared Phase 7 motion + paper grain. Purposeful, not decorative. */

[hidden] { display: none !important; }

html {
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse 110% 55% at 50% -8%, rgba(18, 24, 31, 0.045), transparent 62%),
    repeating-linear-gradient(
      180deg,
      rgba(18, 24, 31, 0.016) 0,
      rgba(18, 24, 31, 0.016) 1px,
      transparent 1px,
      transparent 5px
    );
}

body {
  background: transparent;
}

.card,
.call {
  position: relative;
  background-color: rgba(250, 250, 250, 0.94);
  background-image: repeating-linear-gradient(
    180deg,
    rgba(18, 24, 31, 0.02) 0,
    rgba(18, 24, 31, 0.02) 1px,
    transparent 1px,
    transparent 6px
  );
}

.card.is-loading::before,
.call.is-loading::before,
.page.is-loading::before,
.terminal.is-loading::before,
.roster.is-loading::before,
.dash.is-loading::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--signal-blue);
  transform-origin: left center;
  animation: loadSweep 1.15s ease-in-out infinite;
  z-index: 2;
}

.page.is-loading {
  position: relative;
}

.page.is-loading::before {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: 100%;
  margin: 0 0 1rem;
}

@keyframes loadSweep {
  0% { transform: scaleX(0.08); opacity: 0.35; }
  50% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(0.08); opacity: 0.35; }
}

.checkpoint {
  transition: color 240ms ease, opacity 240ms ease;
}

.checkpoint.is-fading {
  opacity: 0;
}

.ck-plan,
.ck-approaching,
.ck-confirmed,
.ck-none {
  transition: color 240ms ease;
}

.card-swap {
  transition: opacity 220ms ease, transform 220ms ease;
}

.card-swap.is-out-next {
  opacity: 0;
  transform: translate3d(-12px, 0, 0);
}

.card-swap.is-out-prev {
  opacity: 0;
  transform: translate3d(12px, 0, 0);
}

.num-flash {
  border-radius: 2px;
  animation: numFlashSlate 1s ease-out 1;
}

.level-num.num-flash,
.legend .num.num-flash {
  animation: numFlashBlue 1s ease-out 1;
}

.level-num.entry-wake,
.legend .num.entry-wake {
  animation: entryWake 900ms ease-out 1;
}

@keyframes numFlashSlate {
  0% { background-color: rgba(91, 100, 114, 0.2); }
  100% { background-color: transparent; }
}

@keyframes numFlashBlue {
  0% { background-color: rgba(30, 86, 232, 0.18); }
  100% { background-color: transparent; }
}

@keyframes entryWake {
  0% { text-shadow: 0 0 0 rgba(30, 86, 232, 0); }
  28% { text-shadow: 0 0 14px rgba(30, 86, 232, 0.42); }
  100% { text-shadow: 0 0 0 rgba(30, 86, 232, 0); }
}

.history-list li,
.call {
  animation: riseIn 280ms ease-out 1;
}

.history-list li:nth-child(n+8) {
  animation: none;
}

@keyframes riseIn {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .card.is-loading::before,
  .call.is-loading::before,
  .page.is-loading::before,
  .num-flash,
  .level-num.entry-wake,
  .legend .num.entry-wake,
  .history-list li,
  .call {
    animation: none !important;
  }
  .checkpoint,
  .ck-plan,
  .ck-approaching,
  .ck-confirmed,
  .ck-none,
  .card-swap {
    transition: none !important;
  }
  .checkpoint.is-fading {
    opacity: 1;
  }
  .card-swap.is-out-next,
  .card-swap.is-out-prev {
    opacity: 1;
    transform: none;
  }
  .chart-wrap.is-fading {
    opacity: 1;
    transition: none;
  }
}