/* Motion system */
.reveal {
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition:
    opacity 620ms ease,
    transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color var(--transition),
    background-color var(--transition);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.card-tilt {
  transition: transform 90ms linear, border-color var(--transition), background-color var(--transition);
}

@keyframes button-shine {
  from {
    left: -120%;
  }
  to {
    left: 140%;
  }
}

@keyframes soft-pulse {
  0%,
  100% {
    opacity: 0.56;
    transform: scale(1);
  }
  50% {
    opacity: 0.86;
    transform: scale(1.04);
  }
}

@keyframes float-panel {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -8px, 0);
  }
}

@keyframes scan-line {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(100%);
  }
}

.scene-orb-blue,
.scene-orb-green,
.scene-orb-yellow {
  animation: soft-pulse 9s ease-in-out infinite;
}

.scene-orb-green {
  animation-delay: -2.5s;
}

.scene-orb-yellow {
  animation-delay: -5s;
}

.hero-meta-card:nth-child(2),
.image-slot-frame,
.builder-preview-panel {
  animation: float-panel 8s ease-in-out infinite;
}

.hero-meta-card:nth-child(3) {
  animation: float-panel 9s ease-in-out infinite reverse;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}