/* components.css - GabeHost */

/* ===== PRELOADER ===== */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #020617;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity 0.6s ease, visibility 0.6s ease;
  overflow: hidden;
}

#preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Hide old preloader HTML elements */
.preloader-rack,
.preloader-footer,
.preloader-scanline {
  display: none !important;
}

/* Matrix Canvas Styling */
#matrixCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.matrix-brand {
  position: relative;
  z-index: 2;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 4px;
  color: #e2e8f0;
  text-transform: uppercase;
  background: rgba(2, 6, 23, 0.7);
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid rgba(99, 102, 241, 0.3);
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
}

.matrix-brand span {
  color: #6366f1;
}

/* ===== MOBILE MENU FIX ===== */
.mobile-menu {
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex !important; /* Always flex but hidden via transform */
}

@media (min-width: 1024px) {
  .mobile-menu {
    display: none !important;
  }
}

/* ===== CARDS & BUTTONS ===== */
.pricing-card {
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-8px);
}

.feature-card {
  position: relative;
  background: rgba(17, 24, 39, 0.6);
  border: 1px solid rgba(55, 65, 81, 0.4);
  border-radius: 1rem;
  padding: 2rem 1.75rem;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(12px);
}

.hero-btn-primary {
  background: var(--primary);
  color: #ffffff;
  font-weight: 700;
  padding: 1rem 2.5rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  display: inline-block;
  text-align: center;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

.hero-btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.6);
}

.hero-btn-secondary {
  border: 1px solid #374151;
  color: #e2e8f0;
  font-weight: 600;
  padding: 1rem 2.5rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  display: inline-block;
  text-align: center;
}

.hero-btn-secondary:hover {
  border-color: var(--primary);
  color: #fff;
}

/* Additional Tailwind Utilities used in HTML */
.bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }
.from-indigo-500\/10 { --tw-gradient-from: rgba(99, 102, 241, 0.1); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(99, 102, 241, 0)); }
.from-indigo-500\/15 { --tw-gradient-from: rgba(99, 102, 241, 0.15); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(99, 102, 241, 0)); }
.via-indigo-500\/5 { --tw-gradient-stops: var(--tw-gradient-from), rgba(99, 102, 241, 0.05), var(--tw-gradient-to, rgba(99, 102, 241, 0)); }
.to-gray-950 { --tw-gradient-to: #020617; }

.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.shadow-indigo-500\/10 { --tw-shadow-color: rgba(99, 102, 241, 0.1); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }

.sticky { position: sticky; }
.top-24 { top: 6rem; }
.z-50 { z-index: 50; }

.w-full { width: 100%; }
.h-full { height: 100%; }

.table { display: table; }
.w-full { width: 100%; }
.text-left { text-align: left; }
.border-b { border-bottom-width: 1px; }
.border-gray-700 { border-color: #374151; }
.border-gray-700\/50 { border-color: rgba(55, 65, 81, 0.5); }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }

/* ===== UTILS ===== */
.counter { font-variant-numeric: tabular-nums; }
.invisible { visibility: hidden; }
.opacity-0 { opacity: 0; }
.translate-x-full { transform: translateX(100%); }
.translate-x-0 { transform: translateX(0); }