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

@layer base {
  body {
    @apply bg-[#020202] text-white antialiased;
    overflow-x: hidden;
    overscroll-behavior: none;
  }
}

@layer components {
  /* Apple-inspired Liquid Glass Styles */
  .liquid-selection {
    @apply bg-white/10 backdrop-blur-3xl border border-white/20 text-white shadow-lg relative overflow-hidden transition-all duration-500 ease-out;
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.4),
      inset 0 0 0 1px rgba(255, 255, 255, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  
  .liquid-selection::before {
    content: '';
    @apply absolute inset-0 bg-gradient-to-b from-white/10 to-transparent opacity-50 pointer-events-none;
  }

  .liquid-hover {
    @apply transition-all duration-300;
  }
  
  .liquid-hover:hover {
    @apply bg-white/10 backdrop-blur-lg border-white/20 shadow-lg scale-[1.02];
  }

  .liquid-button {
    @apply bg-white/5 border border-white/10 rounded-xl text-white font-bold backdrop-blur-md transition-all duration-300 relative overflow-hidden;
    box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.1);
  }

  .liquid-button:hover {
    @apply bg-white/15 border-white/20 shadow-[0_0_20px_rgba(255,255,255,0.15)] scale-[1.02];
  }
  
  .liquid-button:active {
    @apply scale-[0.98] bg-white/10;
  }

  .liquid-input {
    @apply bg-white/5 border border-white/10 rounded-xl text-white placeholder-gray-500 transition-all duration-300;
  }
  
  .liquid-input:focus {
    @apply outline-none border-white/30 bg-white/10 shadow-[0_0_20px_rgba(255,255,255,0.1)];
  }
  
  /* Generic Glass Card */
  .glass-card {
    @apply bg-white/5 backdrop-blur-xl border border-white/10 shadow-2xl;
  }
}

@layer utilities {
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /* Container de Nav Específico */
  .nav-glass-container {
    @apply bg-white/[0.02] backdrop-blur-3xl border-x border-b border-white/5 shadow-2xl;
    box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.05);
  }

  /* Animação de Expansão de Nav Item - Adaptada */
  .nav-item-expand {
    @apply transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] transform;
  }
  
  .nav-item-expand:hover, .nav-item-expand:focus {
    @apply scale-105 text-white opacity-100;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
  }

  .text-glow {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
  }

  /* Efeito de foco animado (Cards) */
  .focus-animate {
    @apply transition-all duration-500 ease-[cubic-bezier(0.34,1.56,0.64,1)] outline-none;
  }
  
  .focus-animate:focus, .focus-animate:hover {
    @apply scale-[1.05] z-30;
    filter: drop-shadow(0 0 15px rgba(255,255,255,0.15));
  }

  .animate-pulse-star {
    animation: pulse-star 3s infinite ease-in-out;
  }

  .animate-shimmer {
    animation: shimmer 3s infinite linear;
  }

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

  .animate-rocket-launch {
    animation: rocket-launch 2s ease-in-out infinite;
  }

  .comet-progress-bar {
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.8) 50%, #ffffff 100%);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.6), 0 0 5px rgba(255, 255, 255, 0.8);
    border-radius: 9999px;
    position: relative;
    transition: width 0.1s linear;
  }
  
  .comet-progress-bar::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8);
  }
}

/* Animations */
@keyframes star-drift-deep {
  from { transform: translate(0, 0); }
  to { transform: translate(-20px, -10px); }
}

@keyframes star-drift-mid {
  from { transform: translate(0, 0); }
  to { transform: translate(30px, -15px); }
}

@keyframes star-twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.1); }
}

@keyframes pulse-star {
  0%, 100% { opacity: 0.1; transform: scale(0.6); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes rocket-launch {
  0%, 100% { transform: translateY(0) rotate(-45deg); }
  50% { transform: translateY(-10px) rotate(-45deg); }
}

::selection {
  @apply bg-white/20 text-white;
}