@import "tailwindcss";
@import "poyraz-ui/preset.css";

@source "../node_modules/poyraz-ui/dist";

@theme {
  --font-secondary: "Nunito", ui-rounded, "Avenir Next", system-ui, sans-serif;
}

@layer base {
  :root {
    --poyraz-font-secondary: "Nunito", ui-rounded, "Avenir Next", system-ui, sans-serif;
  }
}

@layer utilities {
  @keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
  }

  .animate-marquee {
    animation: marquee 35s linear infinite;
  }

  .pause-on-hover:hover {
    animation-play-state: paused;
  }

  @keyframes hero-wave-primary {
    0%, 49.99% { opacity: 1; }
    50%, 100% { opacity: 0; }
  }

  @keyframes hero-wave-secondary {
    0%, 49.99% { opacity: 0; }
    50%, 100% { opacity: 1; }
  }

  @keyframes hero-wave-sway {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    25% { transform: rotate(-2deg) translateY(-1px); }
    50% { transform: rotate(2.5deg) translateY(0); }
    75% { transform: rotate(-1deg) translateY(-1px); }
  }

  .hero-wave-frame {
    transform-origin: 70% 88%;
    will-change: opacity, transform;
  }

  .hero-wave-frame-secondary {
    opacity: 0;
  }

  .hero-wave:hover .hero-wave-frame-primary {
    animation: hero-wave-primary 520ms steps(1, end) infinite, hero-wave-sway 720ms ease-in-out infinite;
  }

  .hero-wave:hover .hero-wave-frame-secondary {
    animation: hero-wave-secondary 520ms steps(1, end) infinite, hero-wave-sway 720ms ease-in-out infinite;
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-wave:hover .hero-wave-frame-primary {
      animation: none;
      opacity: 0;
    }

    .hero-wave:hover .hero-wave-frame-secondary {
      animation: none;
      opacity: 1;
    }
  }
}