/* ============================================
   K9 Intelligence - Combined Stylesheet
   ============================================ */

/* --- Material Symbols --- */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* --- Glassmorphism Panel --- */
.glass-panel {
  background: rgba(39, 53, 76, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* --- Glass Card (Product Concept variant) --- */
.glass-card {
  background: rgba(39, 53, 76, 0.6);
  backdrop-filter: blur(20px);
}

/* --- Intelligence Gradient (Primary CTA) --- */
.intelligence-gradient {
  background: linear-gradient(135deg, #4cd6fb 0%, #00b2d6 100%);
}

/* --- Intelligence Glow (Alternative naming) --- */
.intelligence-glow {
  background: linear-gradient(135deg, #4cd6fb 0%, #00b2d6 100%);
}

/* --- Pulse Button --- */
.pulse-button {
  background: linear-gradient(135deg, #4cd6fb 0%, #00b2d6 100%);
}
.pulse-button:hover {
  box-shadow: 0 0 15px rgba(76, 214, 251, 0.3);
}

/* --- Pulse Glow (box-shadow variant) --- */
.pulse-glow {
  box-shadow: 0 0 15px rgba(76, 214, 251, 0.3);
}

/* --- Text Glow --- */
.text-glow {
  text-shadow: 0 0 20px rgba(76, 214, 251, 0.3);
}

/* --- Thai Flag Accent (Horizontal Bar) --- */
.thai-flag-accent {
  background: linear-gradient(to right, #ED1C24 0%, #ED1C24 20%, #FFFFFF 20%, #FFFFFF 40%, #241D4F 40%, #241D4F 60%, #FFFFFF 60%, #FFFFFF 80%, #ED1C24 80%, #ED1C24 100%);
  height: 2px;
  opacity: 0.6;
}

/* --- Thai Flag Accent (4px variant for Product Concept) --- */
.thai-flag-accent-thick {
  height: 4px;
  background: linear-gradient(to right, #ED1C24 0%, #ED1C24 33.33%, #FFFFFF 33.33%, #FFFFFF 45%, #242A56 45%, #242A56 55%, #FFFFFF 55%, #FFFFFF 66.66%, #ED1C24 66.66%, #ED1C24 100%);
}

/* --- Thai Flag Strip (Vertical) --- */
.thai-flag-strip {
  background: linear-gradient(to bottom, #ED1C24 20%, #FFFFFF 20% 40%, #241D4F 40% 60%, #FFFFFF 60% 80%, #ED1C24 80%);
}

/* --- Thai Flag Accent (Solutions TH compact) --- */
.thai-flag-accent-compact {
  height: 2px;
  width: 40px;
  background: linear-gradient(to right, #ed1c24 33%, #ffffff 33%, #ffffff 40%, #242a68 40%, #242a68 60%, #ffffff 60%, #ffffff 67%, #ed1c24 67%);
  border-radius: 99px;
  opacity: 0.8;
}

/* --- Thai Accent (Technology TH) --- */
.thai-accent {
  background: linear-gradient(to right, #ef4444 0% 33%, #ffffff 33% 66%, #2563eb 66% 100%);
}

/* --- Background Canvas --- */
#bg-canvas,
canvas#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

#canvas-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* --- Marquee Animation (Technology page) --- */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-marquee {
  animation: marquee 40s linear infinite;
}

/* --- Slow Spin Animation (Product Concept) --- */
.animate-spin-slow {
  animation: spin 8s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* --- Custom Scrollbar (Dark Theme) --- */
* {
  scrollbar-width: thin;
  scrollbar-color: #27354c #041329;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #041329;
}
::-webkit-scrollbar-thumb {
  background: #27354c;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #4CD6FB40;
}
::-webkit-scrollbar-corner {
  background: #041329;
}