/* BlackHyve Custom Styles */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom selection color */
::selection {
  background-color: rgba(71, 85, 105, 0.4);
  color: white;
}

/* Focus styles for accessibility */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #475569;
  outline-offset: 2px;
}

/* Mobile menu animation */
.mobile-menu {
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}

.mobile-menu.open {
  transform: translateX(0);
}

/* Industrial texture overlay */
.texture-overlay {
  position: relative;
}

.texture-overlay::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.08;
  pointer-events: none;
  z-index: 1;
}

.texture-overlay > * {
  position: relative;
  z-index: 2;
}

/* Button hover states - Industrial feel */
.btn-primary {
  transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  position: relative;
}

.btn-primary:hover {
  background-color: #e5e5e5;
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-secondary {
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.btn-secondary:hover {
  background-color: #475569;
  border-color: #475569;
  color: white;
}

.btn-secondary:active {
  transform: scale(0.98);
}

/* Card hover effect - Simplified, industrial */
.card-hover {
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.card-hover:hover {
  border-color: #475569;
}

/* Nav link underline effect */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #475569;
  transition: width 0.2s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* Hero entrance animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-animate {
  animation: fadeInUp 0.6s ease-out forwards;
  opacity: 0;
}

.hero-animate-delay-1 {
  animation-delay: 0.1s;
}

.hero-animate-delay-2 {
  animation-delay: 0.2s;
}

.hero-animate-delay-3 {
  animation-delay: 0.3s;
}

.hero-animate-delay-4 {
  animation-delay: 0.5s;
}

/* Accent color utility */
.text-accent {
  color: #475569;
}

.bg-accent {
  background-color: #475569;
}

.border-accent {
  border-color: #475569;
}

/* Industrial divider */
.divider-industrial {
  height: 2px;
  background: linear-gradient(90deg, transparent, #475569, transparent);
}

/* Blueprint grid pattern */
.grid-pattern {
  position: relative;
}

.grid-pattern::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    /* Major grid lines */
    linear-gradient(to right, rgba(71, 85, 105, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(71, 85, 105, 0.12) 1px, transparent 1px),
    /* Minor grid lines */
    linear-gradient(to right, rgba(71, 85, 105, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(71, 85, 105, 0.05) 1px, transparent 1px);
  background-size:
    80px 80px,
    80px 80px,
    20px 20px,
    20px 20px;
  pointer-events: none;
  z-index: 0;
}

.grid-pattern > * {
  position: relative;
  z-index: 1;
}

/* Grid pattern with fade at edges */
.grid-pattern-fade {
  position: relative;
}

.grid-pattern-fade::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(71, 85, 105, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(71, 85, 105, 0.12) 1px, transparent 1px),
    linear-gradient(to right, rgba(71, 85, 105, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(71, 85, 105, 0.05) 1px, transparent 1px);
  background-size:
    80px 80px,
    80px 80px,
    20px 20px,
    20px 20px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.grid-pattern-fade > * {
  position: relative;
  z-index: 1;
}

/* Logo scroll animation */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.logo-scroll {
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.logo-scroll-track {
  animation: scroll 20s linear infinite;
}

.logo-scroll:hover .logo-scroll-track {
  animation-play-state: paused;
}