/* Keep the Figma angles in transform; animate only the decorative frame's offset. */
@media (prefers-reduced-motion: no-preference) {
  .top-outline,
  .company-outline,
  .works-outline,
  .recruit-outline,
  .hero-outline,
  .hero::after,
  .decorated::before,
  .decorated::after {
    animation: ys-frame-float 12s ease-in-out -4s infinite;
  }

  .top-outline-b,
  .top-outline-e,
  .company-outline-b,
  .company-outline-e,
  .works-outline-b,
  .recruit-outline-b,
  .hero-outline-two,
  .decorated::after {
    animation-duration: 16s;
    animation-delay: -11s;
    animation-direction: reverse;
  }

  .top-outline-c,
  .top-outline-f,
  .company-outline-c,
  .company-outline-f,
  .works-outline-c,
  .recruit-outline-c,
  .hero-outline-three {
    animation-duration: 14s;
    animation-delay: -8s;
  }

  .top-outline-d,
  .top-outline-g,
  .company-outline-d,
  .company-outline-g,
  .company-outline-h,
  .works-outline-d,
  .hero::after {
    animation-duration: 18s;
    animation-delay: -15s;
    animation-direction: reverse;
  }

  @keyframes ys-frame-float {
    0%, 100% { translate: -16px -24px; rotate: -4deg; }
    50% { translate: 16px 24px; rotate: 4deg; }
  }
}