/* A drawing board lands with a little character; the render itself stays intact. */
:root { --image-ring: #3457ad; }

@media (prefers-reduced-motion: no-preference) {
  .rat-motion-ready .hero-copy.is-visible {
    animation: rat-copy-arrive 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .rat-motion-ready .hero-art.is-visible .artboard {
    transform-origin: 50% 85%;
    animation: rat-board-settle 1300ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .rat-motion-ready .process-step.is-visible .process-image {
    transform-origin: 50% 90%;
    animation: rat-study-settle 800ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .rat-motion-ready .process-step:nth-child(even).is-visible .process-image {
    animation-name: rat-study-settle-reverse;
  }

  .hero-link span {
    transition: transform 200ms ease;
  }

  .hero-link:hover span {
    transform: translateY(4px);
  }
}

@keyframes rat-copy-arrive {
  from { opacity: 0.65; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes rat-board-settle {
  0% { opacity: 0.6; transform: translateY(36px) rotate(-5deg) scale(0.92); }
  55% { opacity: 1; transform: translateY(-8px) rotate(2.5deg) scale(1); }
  78% { transform: translateY(3px) rotate(-1deg); }
  100% { opacity: 1; transform: none; }
}

@keyframes rat-study-settle {
  from { opacity: 0.7; transform: translateY(22px) rotate(-1.8deg) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@keyframes rat-study-settle-reverse {
  from { opacity: 0.7; transform: translateY(22px) rotate(1.8deg) scale(0.97); }
  to { opacity: 1; transform: none; }
}

/* The home control responds consistently on every project page. */
@media (prefers-reduced-motion: no-preference) {
  .home-button {
    transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
  }

  .home-button span[aria-hidden] {
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .image-link {
    transition: box-shadow 180ms ease;
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .home-button:hover {
    transform: translateY(-2px);
  }

  .home-button:hover span[aria-hidden] {
    transform: translateX(-4px);
  }

  .image-link:hover {
    box-shadow: 0 0 0 3px var(--image-ring);
  }
}