/* Controlled, editorial motion derived from Decagon's smooth kinetic pacing. */

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

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.journey-step.reveal:nth-child(2),
.difference-point.reveal:nth-child(2) {
  transition-delay: 90ms;
}

.journey-step.reveal:nth-child(3),
.difference-point.reveal:nth-child(3) {
  transition-delay: 180ms;
}

.experience.reveal:nth-child(2) {
  transition-delay: 110ms;
}

.experience.reveal:nth-child(3) {
  transition-delay: 170ms;
}

.map-route {
  animation: routeFlow 20s linear infinite;
}

.orbit--outer {
  animation: orbitTurn 34s linear infinite;
}

.orbit--inner {
  animation: orbitTurn 24s linear infinite reverse;
}

.orbit-node {
  animation: softFloat 5s ease-in-out infinite;
}

.orbit-node--two {
  animation-delay: -1.7s;
}

.orbit-node--three {
  animation-delay: -3.2s;
}

.conversation {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.conversation:hover {
  z-index: 3;
  box-shadow: 0 30px 80px rgba(31, 27, 21, 0.17);
  transform: translateY(6px) rotate(0);
}

.conversation:nth-child(2):hover {
  transform: translateY(-22px) rotate(0);
}

.modal:not([hidden]) .modal__backdrop {
  animation: modalFade 260ms ease both;
}

.modal:not([hidden]) .modal__panel {
  animation: modalEnter 480ms cubic-bezier(.16, 1, .3, 1) both;
}

.modal.is-closing .modal__backdrop {
  animation: modalFade 190ms ease reverse both;
}

.modal.is-closing .modal__panel {
  animation: modalExit 190ms ease both;
}

@keyframes routeFlow {
  to { stroke-dashoffset: -300; }
}

@keyframes orbitTurn {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes softFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

@keyframes modalFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalEnter {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes modalExit {
  to {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
}

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

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