@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;
    --github-contribution-empty: #ebedf0;
  }

  .dark,
  [data-poyraz-theme="dark"] {
    --github-contribution-empty: #27272a;
  }
}

html[data-poyraz-theme="light"] {
  --poyraz-background: #ffffff;
  background-color: #ffffff;
}

html[data-poyraz-theme="light"] body {
  background-color: #ffffff;
}

@layer utilities {
  .github-contribution-empty {
    fill: var(--github-contribution-empty);
  }

  @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 sleepy-z {
    0%, 12% {
      opacity: 0;
      transform: translate3d(0, 0.45rem, 0) scale(0.82) rotate(-8deg);
    }
    28%, 68% {
      opacity: 0.95;
    }
    100% {
      opacity: 0;
      transform: translate3d(-0.3rem, -0.85rem, 0) scale(1.12) rotate(4deg);
    }
  }

  .animate-sleepy-z {
    animation: sleepy-z 2.8s ease-in-out infinite;
    opacity: 0;
    will-change: transform, opacity;
  }

  [data-sleepy-z="2"] {
    animation-delay: 0.5s;
  }

  [data-sleepy-z="3"] {
    animation-delay: 1s;
  }

  @media (prefers-reduced-motion: reduce) {
    .animate-sleepy-z {
      animation: none;
      opacity: 0.8;
    }
  }

}