/* CodieKid shared presentation styles.
   Tailwind utility classes remain in the HTML so the landing page stays simple
   and can be deployed as a static site without a build step. */

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.premium-shadow {
  box-shadow: 0 4px 12px rgba(70, 72, 212, 0.05);
}

.premium-shadow-hover {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.premium-shadow-hover:hover {
  box-shadow: 0 8px 20px rgba(70, 72, 212, 0.08);
  transform: translateY(-2px);
}

.chunky-button {
  box-shadow: 0 4px 0 #2f2ebe;
  transition: box-shadow 0.1s ease, transform 0.1s ease;
}

.chunky-button:active {
  box-shadow: 0 0 0 #2f2ebe;
  transform: translateY(4px);
}

.glass-card {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
}

.no-scrollbar {
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

@keyframes infinite-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.animate-infinite-scroll {
  animation: infinite-scroll 40s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .animate-infinite-scroll {
    animation: none;
  }

  .premium-shadow-hover,
  .chunky-button {
    transition: none;
  }
}