/* ============================================
    Tecnovix - Custom Styles
    Design Moderno e Premium
    ============================================ */

/* Scrollbar Customizada */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #00030F;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #12BDF7, #0B81E6, #0643B0);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #12BDF7;
}

/* Selection Color */
::selection {
  background: rgba(18, 189, 247, 0.3);
  color: white;
}

/* ============================================
   Animações e Efeitos
   ============================================ */

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

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

/* Slide In Left */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-50px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Slide In Right */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(50px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Scale In */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* Bounce In */
@keyframes bounceIn {
  0% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1.05); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* Pulse */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Shimmer Effect */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.shimmer {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* ============================================
   Componentes UI
   ============================================ */

/* Buttons */
.btn {
  @apply inline-flex items-center justify-center gap-2 font-semibold px-6 py-3 rounded-xl transition-all duration-300;
}

.btn-primary {
  @apply bg-gradient-to-r from-emerald-500 to-emerald-600 text-white shadow-lg hover:shadow-emerald-500/25 hover:from-emerald-600 hover:to-emerald-700;
}

.btn-secondary {
  @apply bg-white/10 text-white border border-white/20 hover:bg-white/20;
}

.btn-ghost {
  @apply text-gray-300 hover:text-white hover:bg-white/10;
}

/* Cards */
.card {
  @apply bg-slate-800/50 border border-slate-700/50 rounded-2xl p-6 transition-all duration-300;
}

.card-hover {
  @apply hover:transform hover:-translate-y-2 hover:shadow-2xl hover:shadow-emerald-500/10;
}

/* Glass Effect */
.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-dark {
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Gradients */
.text-gradient {
  background: linear-gradient(135deg, #12BDF7 0%, #0B81E6 50%, #0643B0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-gradient {
  background: linear-gradient(135deg, #00030F 0%, #0643B0 50%, #00030F 100%);
}

/* Glow Effects */
.glow-tech {
  box-shadow: 0 0 40px rgba(18, 189, 247, 0.3);
}

.glow-blue {
  box-shadow: 0 0 40px rgba(11, 129, 230, 0.3);
}

/* ============================================
   Utilitários
   ============================================ */

/* Truncate Text */
.truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Aspect Ratios */
.aspect-video {
  aspect-ratio: 16 / 9;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

/* Focus States */
.focus-ring {
  @apply focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-slate-900;
}

/* Selection */
.selection-emerald {
  @apply selection:bg-emerald-500/30 selection:text-white;
}

/* Hide Scrollbar */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ============================================
   Layout Sections
   ============================================ */

/* Section Padding */
.section-py {
  @apply py-20;
}

.section-px {
  @apply px-4 sm:px-6 lg:px-8;
}

/* Container */
.container-custom {
  @apply max-w-7xl mx-auto section-px;
}

/* ============================================
   Responsive Typography
   ============================================ */

@media (max-width: 640px) {
  html {
    font-size: 14px;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  html {
    font-size: 15px;
  }
}

@media (min-width: 1025px) {
  html {
    font-size: 16px;
  }
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
  body {
    background: white;
    color: black;
  }
  
  nav, footer, .no-print {
    display: none !important;
  }
}

/* ============================================
   Mobile Menu Fixes
   ============================================ */

#mobile-menu-btn {
  z-index: 1001;
  position: relative;
  line-height: 1;
}

#mobile-menu {
  z-index: 1000;
  position: relative;
}

#mobile-menu.hidden {
  display: none !important;
}

#mobile-menu:not(.hidden) {
  display: block !important;
  animation: slideDown 0.25s ease-out;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}