/* Entalign Labs - Brand Identity Styles */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* Color variables for branding */
:root {
  --primary: #F17100;
  --secondary: #000000;
  --accent: #F17100;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.font-display {
  font-family: 'Space Grotesk', sans-serif;
}

/* Custom Scrollbar - Lightweight and smooth */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #ffffff;
}
.dark ::-webkit-scrollbar-track {
  background: #000000;
}
::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 9999px;
}
.dark ::-webkit-scrollbar-thumb {
  background: #262626;
}
::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}
.dark ::-webkit-scrollbar-thumb:hover {
  background: #404040;
}

/* Glassmorphism Panel - Fast and crisp */
.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.dark .glass-panel {
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Grid backgrounds */
.grid-pattern-dark {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}
.grid-pattern-light {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(241, 113, 0, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(241, 113, 0, 0.03) 1px, transparent 1px);
}

/* Optimized Background Glowing Orbs (CSS Radial Gradients - zero blur performance hit) */
.glowing-orb {
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(241, 113, 0, 0.12) 0%, rgba(241, 113, 0, 0.04) 45%, transparent 70%);
}
.dark .glowing-orb {
  background: radial-gradient(circle, rgba(241, 113, 0, 0.18) 0%, rgba(241, 113, 0, 0.05) 50%, transparent 70%);
}

/* Animated gradient text hover */
.hover-gradient-text:hover {
  background: linear-gradient(135deg, #000000, #F17100);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dark .hover-gradient-text:hover {
  background: linear-gradient(135deg, #ffffff, #F17100);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Subtle, performant micro-interactions */
.animate-float {
  /* Subtle stationary rendering for instant speed, with smooth hover effect */
  transition: transform 0.3s ease;
}
.animate-float:hover {
  transform: translateY(-4px);
}

.animate-pulse-slow {
  opacity: 0.9;
}

/* Glow button hover */
.btn-glow {
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-glow:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px -2px rgba(241, 113, 0, 0.3);
}

/* Technology card grids */
.tech-grid-card {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  will-change: transform;
}
.tech-grid-card:hover {
  transform: translateY(-3px);
  border-color: rgba(241, 113, 0, 0.45);
  box-shadow: 0 10px 25px -5px rgba(241, 113, 0, 0.1);
}

/* Timeline custom style */
.timeline-dot::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(241, 113, 0, 0.2);
}

/* Clean, crisp background - removed heavy feTurbulence noise */
.noise-bg {
  background-color: transparent;
}

/* Smooth link active status transition */
a::after {
  transition: width 0.2s ease;
}