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

@layer components {
  .animate-expand {
    animation: expand 0.3s ease-out forwards;
  }

  .movie-search-container {
    @apply relative overflow-hidden;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
  }

  .autocomplete-results {
    @apply absolute z-10 w-full mt-2 overflow-hidden bg-white backdrop-blur-sm rounded-lg border border-gray-300;
  }

  .autocomplete-item {
    @apply px-4 py-3 text-gray-900 bg-white hover:bg-gray-200 hover:text-black cursor-pointer transition-colors;
    white-space: normal;
  }

  .autocomplete-item.selected, .autocomplete-item:hover {
    @apply bg-gray-200 text-black;
  }

  .autocomplete-title {
    @apply text-base font-semibold;
  }

  .autocomplete-details {
    @apply text-sm text-gray-600;
    font-size: 80%;
  }

  .fireworks {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: fireworks 1s ease-out forwards;
    pointer-events: none;
  }

  .fireworks-container {
    @apply fixed inset-0 z-50 pointer-events-none;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .fireworks-container.active {
    opacity: 1;
  }

  .firework {
    @apply absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    animation: explode 1s ease-out forwards;
  }

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

  .profile-dropdown-item {
    @apply block px-4 py-2 text-sm text-gray-700 w-full text-left hover:bg-indigo-50 hover:text-indigo-700 transition-colors duration-150;
  }

  .profile-dropdown-container {
    @apply absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none;
  }

  .profile-dropdown-button {
    @apply flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2;
  }

  .btn-primary {
    @apply px-4 py-2 bg-purple-600 text-white rounded-lg 
           hover:bg-purple-700 transition-colors duration-150;
  }
  
  .btn-secondary {
    @apply px-4 py-2 bg-gray-600 text-white rounded-lg 
           hover:bg-gray-700 transition-colors duration-150;
  }

  /* Landing page animations */
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
  }

  .animate-fade-in-delay-1 {
    animation: fadeIn 0.6s ease-out 0.2s forwards;
    opacity: 0;
  }

  .animate-fade-in-delay-2 {
    animation: fadeIn 0.6s ease-out 0.4s forwards;
    opacity: 0;
  }

  .animate-fade-in-delay-3 {
    animation: fadeIn 0.6s ease-out 0.6s forwards;
    opacity: 0;
  }

  /* Auth form styles */
  .auth-error-container {
    @apply mb-6 p-4 bg-red-50 border border-red-400 rounded-md;
  }

  .auth-error-heading {
    @apply text-sm font-medium text-red-800 mb-2;
  }

  .auth-error-list {
    @apply list-disc pl-5 text-sm text-red-700;
  }

  .auth-form {
    @apply space-y-6;
  }

  .auth-form-group {
    @apply space-y-1;
  }

  .auth-form-label {
    @apply block text-sm font-medium text-gray-700;
  }

  .auth-form-input {
    @apply block w-full rounded-md border-gray-300 shadow-sm 
           focus:border-purple-500 focus:ring-purple-500 text-lg;
  }

  .auth-form-help {
    @apply mt-1 text-sm text-gray-500;
  }

  .auth-form-button {
    @apply w-full flex justify-center py-2 px-4 border border-transparent rounded-md
           shadow-sm text-sm font-medium text-white bg-purple-600 hover:bg-purple-700
           focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500;
  }

  /* Menu visibility class */
  .show {
    display: block !important;
  }
}

@keyframes slideOut {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-10px);
  }
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes fireworks {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.2); opacity: 0; }
}
/* 
 * Styles for session pages (login, signup)
 * All styles use Tailwind classes in the template
 * This file is intentionally left mostly empty as a placeholder
 * for any future specific session styling needs
 */
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip-content {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: #1f2937;
  color: white;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  margin-bottom: 4px;
  z-index: 20;
}

.tooltip-content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -4px;
  border-width: 4px;
  border-style: solid;
  border-color: #1f2937 transparent transparent transparent;
}
/*
 * 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.
 *


 */

@keyframes fadeInOut {
  0% { opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

.saved-indicator {
  color: #10B981;
  font-weight: 500;
  animation: fadeInOut 2s ease-in-out forwards;
}

/* Gem logo styling */
.gem-logo {
  font-weight: 700;
  background: linear-gradient(135deg, #5e60ce, #5390d9, #4ea8de, #48bfe3, #56cfe1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

/* Gem and sparkle emoji */
.gem-emoji {
  display: inline-block;
  position: relative;
}

.gem-sparkle {
  display: inline-block;
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 0.7em;
  transition: transform 0.3s ease;
}

/* Sparkle elements */
.gem-emoji::before, .gem-emoji::after {
  content: '';
  position: absolute;
  pointer-events: none;
  opacity: 0;
}

/* Main sparkle */
.gem-emoji::before {
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
  z-index: 1;
}

/* Star sparkle */
.gem-emoji::after {
  top: -8px;
  right: -4px;
  width: 12px;
  height: 12px;
  /* Replace inline SVG with CSS shape */
  background: white;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  z-index: 2;
}

/* Animation keyframes for sparkle only */
@keyframes initialRotate {
  0% { transform: rotate(0deg) scale(0.8); }
  60% { transform: rotate(360deg) scale(1.2); }
  100% { transform: rotate(720deg) scale(1); }
}

@keyframes initialSparkle {
  0% { opacity: 0; }
  30% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* Apply initial animation class to sparkle only */
.gem-sparkle.initial-sparkle {
  animation: initialRotate 1.8s ease-out forwards, 
             initialSparkle 2s ease-in-out forwards;
}

/* Original hover animations - modified to not conflict */
@keyframes sparkle {
  0% { filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0)); }
  50% { filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 4px rgba(94, 96, 206, 0.6)); }
  100% { filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0)); }
}

@keyframes colorShift {
  0% { color: inherit; }
  30% { color: #48bfe3; }
  60% { color: #5e60ce; }
  100% { color: inherit; }
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

@keyframes hoverSparkle {
  0% { opacity: 0; }
  30% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes hoverStarSparkle {
  0% { opacity: 0; transform: scale(0) rotate(0deg); }
  30% { opacity: 1; transform: scale(1.5) rotate(45deg); }
  60% { opacity: 1; transform: scale(1) rotate(90deg); }
  100% { opacity: 0; transform: scale(0.5) rotate(180deg); }
}

/* Apply hover animations */
.gem-logo:hover .gem-emoji {
  animation: 
    sparkle 1.5s ease-in-out infinite,
    colorShift 2s ease-in-out infinite,
    rotate 2s ease-in-out infinite;
}

.gem-logo:hover .gem-emoji::before {
  animation: hoverSparkle 1.5s ease-in-out;
}

.gem-logo:hover .gem-emoji::after {
  animation: hoverStarSparkle 1.5s ease-in-out;
}

/* Apply hover animations to sparkle only */
.gem-logo:hover .gem-sparkle {
  animation: sparkle 1.5s ease-in-out infinite;
}

/* Remove duplicate rule - this was causing conflicting animations */
/* .gem-logo:hover .gem-emoji::before { ... } */

@keyframes shimmer {
  0% { opacity: 0; transform: scale(0.8); }
  50% { opacity: 0.3; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(0.8); }
}

/* Tagline styling */
.tagline {
  letter-spacing: 0.05em;
  font-style: italic;
  opacity: 0.9;
  text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.7);
}

/* Animated Background Styles */
.background-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  perspective: 1000px;
  z-index: -1;
  overflow: hidden;
}

.gem-bg-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(-45deg, #7B1FA2, #004d7a, #6E22B5, #00bcd4);
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

.gem-shape {
  position: absolute;
  width: 180px;
  height: 180px;
  background: linear-gradient(45deg, rgba(77, 208, 225, 0.5) 0%, rgba(123, 31, 162, 0.3) 100%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation: float 15s infinite ease-in-out;
  box-shadow: 0 0 15px rgba(77, 208, 225, 0.6), inset 0 0 8px rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(1px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes float {
  0% { transform: translateY(0) rotate(0); filter: brightness(0.8); }
  50% { transform: translateY(-20px) rotate(5deg); filter: brightness(1.2); }
  100% { transform: translateY(0) rotate(0); filter: brightness(0.8); }
}

/* Content styling for landing page */
.landing-content-box {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(187, 155, 222, 0.5);
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.text-gradient {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(to right, #9d4edd, #00bcd4, #e0aaff);
  /* Add white outline to text */
  text-shadow:
    -1px -1px 0 rgba(255, 255, 255, 0.7),
    1px -1px 0 rgba(255, 255, 255, 0.7),
    -1px 1px 0 rgba(255, 255, 255, 0.7),
    1px 1px 0 rgba(255, 255, 255, 0.7),
    0px 1px 2px rgba(0, 0, 0, 0.2);
  filter: drop-shadow(0px 0px 1px rgba(255, 255, 255, 0.5));
  letter-spacing: 0.02em;
}