/* Frontend-specific styles for the educational platform */

/* Custom Fonts */
.font-inter {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

/* Custom Animations */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

/* Custom Gradients */
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom Backdrop Blur */
.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}

/* Custom Transforms */
.hover\:-translate-y-0\.5:hover {
  transform: translateY(-0.125rem);
}

.hover\:-translate-y-1:hover {
  transform: translateY(-0.25rem);
}

.hover\:-translate-y-2:hover {
  transform: translateY(-0.5rem);
}

/* Frontend-specific overrides to prevent ActiveAdmin conflicts */
.frontend-layout {
  font-family: 'Inter', sans-serif;
}

.frontend-layout * {
  box-sizing: border-box;
}

/* Ensure Tailwind classes work properly in frontend */
.frontend-layout .bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.frontend-layout .bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.frontend-layout .backdrop-blur-sm {
  backdrop-filter: blur(4px);
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file follow the same ordering precedence as the order
 * of the files listed below. It is generally better to create a new file per style scope.
 *


 */