/* Base & Custom Styling for JNK Consultoria Landing Page */

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

@layer base {
  html,
  body {
    margin: 0;
    padding: 0;
  }
  
  body {
    overscroll-behavior: none;
  }
  
  main > :first-child {
    margin-top: 0 !important;
  }
  
  main > :last-child {
    margin-bottom: 0 !important;
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  display: none;
}

html,
body {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* Modal Smooth Transitions */
#modal-backdrop {
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#modal-container {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   CYBERNETIC BACKGROUND SYSTEM: Neon Glow & Subtle Grid Texture
   Aspecto de Painel de Controle / Diagnóstico Forense sem poluir a leitura
   ========================================================================== */

/* Base container for background layers */
#cyber-bg-container {
  background-color: #f7f9fd;
  transform: translateZ(0);
}

/* Ambient Neon Glow Orbs */
.cyber-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  will-change: transform, opacity;
}

/* Hero Neon Glow: Soft Cyan & Electric Indigo Aura behind headline */
.cyber-glow-hero {
  top: -120px;
  left: 50%;
  width: 950px;
  height: 540px;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center,
    rgba(14, 165, 233, 0.24) 0%,
    rgba(59, 130, 246, 0.15) 35%,
    rgba(99, 102, 241, 0.08) 60%,
    transparent 80%
  );
  animation: cyberNeonPulse 9s ease-in-out infinite alternate;
}

/* Mid-Right Neon Glow */
.cyber-glow-right {
  top: 32%;
  right: -120px;
  width: 650px;
  height: 650px;
  background: radial-gradient(
    circle at center,
    rgba(6, 182, 212, 0.16) 0%,
    rgba(37, 99, 235, 0.1) 40%,
    transparent 72%
  );
  animation: cyberNeonFloatRight 13s ease-in-out infinite alternate;
}

/* Mid-Left Neon Glow */
.cyber-glow-left {
  top: 62%;
  left: -160px;
  width: 700px;
  height: 700px;
  background: radial-gradient(
    circle at center,
    rgba(99, 102, 241, 0.15) 0%,
    rgba(14, 165, 233, 0.08) 45%,
    transparent 72%
  );
  animation: cyberNeonFloatLeft 15s ease-in-out infinite alternate;
}

/* Bottom Subtle Neon Glow */
.cyber-glow-bottom {
  bottom: -120px;
  left: 45%;
  width: 850px;
  height: 450px;
  background: radial-gradient(
    ellipse at center,
    rgba(14, 165, 233, 0.14) 0%,
    rgba(99, 102, 241, 0.08) 40%,
    transparent 75%
  );
}

/* Dynamic Interactive Mouse Glow */
.cyber-mouse-glow {
  position: absolute;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(55px);
  background: radial-gradient(
    circle at center,
    rgba(14, 165, 233, 0.16) 0%,
    rgba(99, 102, 241, 0.07) 38%,
    transparent 70%
  );
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.5s ease-out;
  will-change: left, top;
}

/* Subtle Grid Texture (Linhas Cruzadas) */
.cyber-grid {
  position: absolute;
  inset: 0;
  background-size: 24px 24px, 24px 24px, 96px 96px, 96px 96px;
  background-position: center top;
  background-image:
    /* Fine Sub-grid lines (0.75px optical weight) */
    linear-gradient(to right, rgba(15, 23, 42, 0.032) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.032) 1px, transparent 1px),
    /* Major Technical Grid Lines */
    linear-gradient(to right, rgba(14, 165, 233, 0.085) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14, 165, 233, 0.085) 1px, transparent 1px);
  pointer-events: none;
}

/* Diagnostic Control Panel Crosshairs (+) Pattern */
.cyber-crosshairs {
  position: absolute;
  inset: 0;
  background-size: 96px 96px;
  background-position: center top;
  background-image: url("data:image/svg+xml,%3Csvg width='96' height='96' viewBox='0 0 96 96' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M48 42V54M42 48H54' stroke='%230284c7' stroke-width='1.2' stroke-opacity='0.28' stroke-linecap='round'/%3E%3Ccircle cx='48' cy='48' r='1' fill='%230284c7' fill-opacity='0.35'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* Soft Vignette Overlay to guarantee high text contrast & legibility */
.cyber-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, transparent 40%, rgba(247, 249, 253, 0.55) 90%);
  pointer-events: none;
}

/* Control Panel Neon Accent Line */
.cyber-neon-line {
  height: 2px;
  width: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(14, 165, 233, 0.1) 15%,
    rgba(14, 165, 233, 0.7) 45%,
    rgba(99, 102, 241, 0.8) 55%,
    rgba(14, 165, 233, 0.7) 65%,
    rgba(14, 165, 233, 0.1) 85%,
    transparent 100%
  );
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.5), 0 0 24px rgba(99, 102, 241, 0.3);
}

/* Card Control Panel Enhancements */
.cyber-card {
  position: relative;
  background-color: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cyber-card:hover {
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 16px 32px -8px rgba(14, 165, 233, 0.15), 0 0 20px -2px rgba(56, 189, 248, 0.12);
  transform: translateY(-2px);
}

/* Animations */
@keyframes cyberNeonPulse {
  0% {
    opacity: 0.75;
    transform: translateX(-50%) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1.05);
  }
}

@keyframes cyberNeonFloatRight {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(-35px, 25px) scale(1.06);
  }
}

@keyframes cyberNeonFloatLeft {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(35px, -25px) scale(1.06);
  }
}