/* Motion derived from pulsarops.ai: restrained fades and color shifts.
   The reference does not float, parallax, or bounce. */

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

.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--transition-reveal), transform var(--transition-reveal);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

.reveal-d1 { transition-delay: 70ms; }
.reveal-d2 { transition-delay: 140ms; }
.reveal-d3 { transition-delay: 210ms; }

.modal {
  opacity: 0;
  transition: opacity 200ms ease;
}

.modal.is-open {
  opacity: 1;
}

.modal__panel {
  transform: translateY(10px);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.modal.is-open .modal__panel {
  transform: none;
}

.capability-detail,
.stage-panel {
  animation: panel-in 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

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

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