/* Motion — Signal Flow (UI Concept §4.4) */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

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

.signal-line {
  transform: scaleX(0);
  transform-origin: left center;
}

.signal-line.is-drawn {
  animation: signal-draw 500ms var(--ease-out) forwards;
}

@keyframes signal-draw {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.process__step {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-process) var(--ease-out),
    transform var(--dur-process) var(--ease-out);
}

.process__connector {
  transform: scaleX(0);
  transition: transform var(--dur-process) var(--ease-out);
}

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

.process.is-in .process__connector {
  transform: scaleX(1);
}

.process.is-in .process__step:nth-child(1) {
  transition-delay: 0ms;
}
.process.is-in .process__step:nth-child(1) .process__connector {
  transition-delay: 60ms;
}
.process.is-in .process__step:nth-child(2) {
  transition-delay: 90ms;
}
.process.is-in .process__step:nth-child(2) .process__connector {
  transition-delay: 150ms;
}
.process.is-in .process__step:nth-child(3) {
  transition-delay: 180ms;
}
.process.is-in .process__step:nth-child(3) .process__connector {
  transition-delay: 240ms;
}
.process.is-in .process__step:nth-child(4) {
  transition-delay: 270ms;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .process__step {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .signal-line,
  .process__connector {
    transform: scaleX(1);
  }

  .signal-line.is-drawn {
    animation: none;
  }

  .work-module:hover .work-module__media img,
  .work-module:hover .work-module__media svg {
    transform: none;
  }
}