/**
 * Loading state — top-view wireframe aircraft, slow rotation (home hero video + plane-3d).
 * See: https://www.figma.com/design/QM2RQ8ZAKLbaoQlmm7zd9X/Speedfest-Orange-Team?node-id=372-379
 */

.tf-loading-plane {
  position: absolute;
  inset: 0;
  z-index: 2;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 24px;
  background: rgb(0 0 0 / 0.72);
  transition:
    opacity 0.4s ease,
    visibility 0.4s ease;
}

.tf-loading-plane.tf-loading-plane--done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.tf-loading-plane__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 100%;
}

.tf-loading-plane__label {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-body);
  font-size: 10pt;
  line-height: 1.2;
  color: var(--color-text-default);
  text-align: center;
}

.tf-loading-plane__spin {
  width: min(72%, 280px);
  max-width: 280px;
  animation: tf-loading-plane-rotate 28s linear infinite;
  transform-origin: 50% 50%;
}

.tf-loading-plane__spin img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgb(255 115 0 / 0.15));
}

@keyframes tf-loading-plane-rotate {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tf-loading-plane__spin {
    animation-duration: 120s;
  }
}

/* Home hero: CTAs stay above the overlay */
.tf-home__hero-v2-col--wire .tf-home__hero-actions {
  z-index: 3;
}

/* 3D viewport: match model area (reserve bottom UI band) */
.tf-plane3d__viewport .tf-loading-plane {
  bottom: var(--plane3d-ui-reserve);
  z-index: 3;
}