/* Custom Global Styles for 84 Company */

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

/* Prevent awkward word wrapping for Korean text */
h1, h2, h3, h4, h5, h6, p, span, button, a {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #0a0a0c;
}
::-webkit-scrollbar-thumb {
  background: #26262b;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #00f0ff;
}

/* CSS Grid Line Pattern Background */
.bg-grid-pattern {
  background-size: 50px 50px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
}

/* Radial Dot Pattern Grid for AI Core */
.bg-radial-grid {
  background-size: 20px 20px;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
}

/* Glassmorphism Cards */
.glass-card {
  background: rgba(18, 18, 20, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}

.glass-card:hover {
  transform: translateY(-2px);
}

/* Header Glassmorphism State when scrolled */
header.scrolled {
  background: rgba(10, 10, 12, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* Custom Text Gradient Styles */
.text-glow-gradient {
  background: linear-gradient(to right, #00f0ff, #3b82f6, #39ff14);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Keyframe Animations */

/* Scroll dot animation for Hero */
@keyframes scroll-dot {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(6px);
    opacity: 0.3;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.animate-scroll-dot {
  animation: scroll-dot 1.8s infinite ease-in-out;
}

/* Slow Spin for outer circle of AI Core */
@keyframes spin-slow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.animate-spin-slow {
  animation: spin-slow 12s infinite linear;
}

/* Reverse Spin for inner dashed circle of AI Core */
@keyframes spin-reverse {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}
.animate-spin-reverse {
  animation: spin-reverse 8s infinite linear;
}

/* Custom Pulse Animation */
@keyframes pulse-gentle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.05); }
}
.animate-pulse-gentle {
  animation: pulse-gentle 3s infinite ease-in-out;
}

/* Scrollbar Utility for hiding scrolling logs */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Connection Paths for Workflow Automation Diagram */
svg#workflow-connections path {
  transition: stroke 0.4s ease, stroke-width 0.4s ease;
}

/* Active Line Pulses when hovered */
.line-pulse {
  stroke: #00f0ff;
  stroke-width: 2.5;
  stroke-dasharray: 8 4;
  animation: line-flow 1.5s infinite linear;
}

.line-pulse-neon {
  stroke: #10b981;
  stroke-width: 2.5;
  stroke-dasharray: 8 4;
  animation: line-flow 1.5s infinite linear;
}

@keyframes line-flow {
  0% {
    stroke-dashoffset: 24;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* Glowing Border Transitions on Form Fields */
input:focus, textarea:focus {
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.15);
}

/* Style for active link indicators */
.nav-active {
  color: #00f0ff !important;
}

/* Mobile responsive menu animation utilities */
#mobile-menu.active {
  display: flex !important;
  opacity: 1;
}

/* CSS-animated dynamic loops inside the Portfolio Simulation Cards */
@keyframes console-text {
  from { width: 0; }
  to { width: 100%; }
}

/* Pulse check animation */
@keyframes check-pulse {
  0% { transform: scale(0.9); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.5; }
}
.animate-check-pulse {
  animation: check-pulse 1s infinite ease-in-out;
}

/* Dashboard Simulation Styles */
.wire-active {
  stroke: #00f0ff;
  stroke-width: 2.5;
  stroke-dasharray: 6 3;
  animation: line-flow 0.8s infinite linear;
}

.wire-active-green {
  stroke: #39ff14;
  stroke-width: 2.5;
  stroke-dasharray: 6 3;
  animation: line-flow 0.8s infinite linear;
}

/* Blinking Console Cursor */
.console-cursor::after {
  content: "█";
  color: #39ff14;
  font-size: 10px;
  animation: blink-cursor 0.8s infinite;
  margin-left: 2px;
}

@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Active node glow classes */
.node-glow-cyan {
  border-color: #00f0ff !important;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
  background: rgba(0, 240, 255, 0.05) !important;
}

.node-glow-cyan i {
  color: #00f0ff !important;
}

.node-glow-green {
  border-color: #39ff14 !important;
  box-shadow: 0 0 15px rgba(57, 255, 20, 0.4);
  background: rgba(57, 255, 20, 0.05) !important;
}

.node-glow-green i {
  color: #39ff14 !important;
}