.process {
  --process-hover-duration: 300ms;
}

.process-step {
  --process-enter-x: -28px;
  --process-enter-y: 18px;
}

.process-step:nth-child(even),
html[dir="rtl"] .process-step {
  --process-enter-x: 28px;
}

html[dir="rtl"] .process-step:nth-child(even) {
  --process-enter-x: -28px;
}

.process-step.reveal {
  opacity: 1;
  transform: none;
}

.has-reveal .process-step.reveal:not(.visible) {
  opacity: 0;
  transform: translate(var(--process-enter-x), var(--process-enter-y));
  transition: opacity 650ms ease, transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
}

.process-step.reveal.visible {
  opacity: 1;
  transform: none;
}

.process-step.visible .process-icon {
  animation: process-icon-arrive 800ms 120ms backwards;
}

.process-step.visible .process-number {
  animation: process-number-arrive 900ms 100ms backwards;
}

.process-card {
  position: relative;
  overflow: hidden;
  transition: transform var(--process-hover-duration) ease, border-color var(--process-hover-duration) ease;
}

.process-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at 20% 0%, var(--portfolio-glow), transparent 70%);
  transition: opacity 400ms ease;
}

.process-icon svg {
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

.process-number {
  transition: color var(--process-hover-duration) ease;
}

.process-actions .btn {
  transition: transform 250ms ease, box-shadow 250ms ease;
}

.process-actions .btn:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 5px;
}

@media (hover: hover) and (pointer: fine) {
  .process-step:hover .process-card {
    transform: translateY(-5px);
    border-color: var(--toggle-line);
  }

  .process-step:hover .process-card::after {
    opacity: 1;
  }

  .process-step:hover .process-icon svg {
    transform: rotate(-8deg) scale(1.12);
  }

  .process-step:hover .process-number {
    color: var(--muted);
  }

  .process-actions .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px var(--portfolio-glow);
  }
}

@keyframes process-icon-arrive {
  0% {
    opacity: 0;
    transform: scale(0.8) rotate(-12deg);
  }
  65% {
    opacity: 1;
    transform: scale(1.06) rotate(3deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes process-number-arrive {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 700px) {
  .process-step.reveal,
  html[dir="rtl"] .process-step.reveal {
    --process-enter-x: 0px;
    --process-enter-y: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .process *,
  .process *::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .has-reveal .process-step.reveal:not(.visible) {
    opacity: 1;
  }
}