@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

.animate-float-slow {
  animation: float 6s ease-in-out infinite;
}

.animate-float-medium {
  animation: float 4s ease-in-out infinite;
}

.animate-float-fast {
  animation: float 3s ease-in-out infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
.animate-dash {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: dash 3s linear infinite;
}

.typewriter-text {
  overflow: hidden;
  white-space: pre-wrap;
  animation: typing 2s steps(40, end);
}

.typewriter-text-delay-1 {
  overflow: hidden;
  white-space: pre-wrap;
  opacity: 0;
  animation: typing 2s steps(40, end) 2s forwards;
}

.typewriter-text-delay-2 {
  overflow: hidden;
  white-space: pre-wrap;
  opacity: 0;
  animation: typing 3s steps(40, end) 4s forwards;
}

.typewriter-text-delay-3 {
  overflow: hidden;
  white-space: pre-wrap;
  opacity: 0;
  animation: typing 2s steps(40, end) 7s forwards;
}

.typewriter-text-delay-4 {
  overflow: hidden;
  white-space: pre-wrap;
  opacity: 0;
  animation: typing 1s steps(40, end) 9s forwards;
}

@keyframes typing {
  from {
    opacity: 0;
    width: 0;
  }
  to {
    opacity: 1;
    width: 100%;
  }
}

.typing-cursor {
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* Add these styles to your CSS */
#mobile-menu-2 ul ul {
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

#mobile-menu-2 ul ul.hidden {
  display: none;
}

#mobile-menu-2 ul ul:not(.hidden) {
  max-height: 1000px; /* Adjust this value based on your content */
  opacity: 1;
}

/* Slide animations */
.animate-slide-out-left {
  animation: slideOutLeft 150ms ease-in-out forwards;
}

.animate-slide-in-right {
  animation: slideInRight 150ms ease-in-out forwards;
}

/* Fade animations */
.animate-fade-out {
  animation: fadeOut 150ms ease-in-out forwards;
}

.animate-fade-in {
  animation: fadeIn 150ms ease-in-out forwards;
}

@keyframes slideOutLeft {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-2rem);
    opacity: 0;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(2rem);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Option 2: Border trace animation */
.animate-border-trace {
  position: relative;
}

.animate-border-trace::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: inherit;
  animation: borderTrace 0.5s ease-in-out;
  pointer-events: none;
}

@keyframes borderTrace {
  0% {
    clip-path: inset(0 100% 100% 0);
    border-color: rgb(139, 92, 246); /* grape-500 */
  }
  25% {
    clip-path: inset(0 0 100% 0);
  }
  50% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
    border-color: transparent;
  }
}


.animate-border-glow {
  position: relative;
}

.animate-border-glow::before {
  content: '';
  position: absolute;
  inset: -2px; /* Slightly larger than the element */
  border-radius: 0.5rem; /* Match your existing border-radius or adjust */
  border: 2px solid rgba(139, 92, 246, 0.5); /* grape-500 with transparency */
  opacity: 0;
  animation: borderPulse 0.75s ease-out;
}

@keyframes borderPulse {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.05);
  }
}

.animate-scale-in {
  animation: scaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes scaleIn {
  0% { 
    opacity: 0;
    transform: scale(0.95);
  }
  100% { 
    opacity: 1;
    transform: scale(1);
  }
}

.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  animation: confetti 3s ease-in-out infinite;
}

@keyframes confetti {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(100vh) rotate(360deg); }
}

.email-item {
  @apply rounded-xl transition-all duration-150
         hover:bg-white/80 hover:backdrop-blur-sm
         hover:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.3)]
         hover:shadow-lg hover:shadow-black/5
         dark:hover:bg-gray-800/80 
         dark:hover:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.05)];
}

.email-item.selected {
  @apply bg-white/90 backdrop-blur-xl
         shadow-[inset_0_0_0_1px_rgba(255,255,255,0.5)]
         shadow-lg shadow-black/10
         dark:bg-gray-800/90 
         dark:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.1)];
}
.pagy {
  @apply flex space-x-1 font-semibold text-sm text-gray-500;

  a:not(.gap) {
    @apply block rounded-lg px-3 py-1 bg-gray-200;

    &:hover {
      @apply bg-gray-300;
    }

    &:not([href]) {
      /* disabled links */
      @apply text-gray-300 bg-gray-100 cursor-default;
    }

    &.current {
      @apply text-white bg-gray-400;
    }
  }

  label {
    @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;

    input {
      @apply bg-gray-100 border-none rounded-md;
    }
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) 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 should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */