/* =============================================================================
   XoraSoft Enterprise AI - Custom Styles
   Shared across all HTML pages
   ============================================================================= */

/* Base Typography */
body {
  font-family: 'Inter', sans-serif;
  color: #1E293B;
  background-color: #F8FAFC;
  min-height: 100vh;
  margin: 0;
}

h1, h2, h3, h4 {
  font-family: 'Manrope', sans-serif;
  color: #0F172A;
}

/* Glass Morphism Effect */
.glass-module {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(15, 23, 42, 0.05);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-module-hover:hover {
  border-color: rgba(221, 17, 18, 0.2);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.05);
  transform: translateY(-8px);
}

/* Terminal Glow Effect */
.terminal-glow {
  box-shadow: 0 0 15px rgba(221, 17, 18, 0.1);
}

/* Shimmer Animation */
@keyframes shimmer {
  from { background-position: -200% 0; }
  to { background-position: 200% 0; }
}

.animate-shimmer {
  animation: shimmer 2.5s infinite linear;
}

/* Fade Slide Up Animation */
@keyframes fadeSlideUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

.animate-fade-slide-up {
  animation: fadeSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

/* Ray Pulse Animation for God Rays */
@keyframes ray-pulse {
  0%, 100% { opacity: 0.02; transform: scaleX(1); }
  50% { opacity: 0.05; transform: scaleX(1.1); }
}

.animate-ray-pulse {
  animation: ray-pulse 10s ease-in-out infinite;
}

/* Page Transition Animations */
.page-transition-enter {
  opacity: 0;
  transform: translateY(10px);
}

.page-transition-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 500ms, transform 500ms;
}

/* Hover glow for service cards */
.subsidiary-glow-blue:hover {
  box-shadow: 0 0 40px rgba(0, 98, 255, 0.08);
  border-color: rgba(0, 98, 255, 0.2);
}

.subsidiary-glow-purple:hover {
  box-shadow: 0 0 40px rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.2);
}

.subsidiary-glow-teal:hover {
  box-shadow: 0 0 40px rgba(34, 211, 238, 0.08);
  border-color: rgba(34, 211, 238, 0.2);
}

/* Float Animation */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

/* Prestige Logo Scroll Animation */
@keyframes prestige-loop {
  0% { transform: translateX(0); }
  100% { transform: translateX(-33.3333%); }
}

.animate-prestige-scroll {
  animation: prestige-loop 40s linear infinite;
}

.animate-prestige-scroll:hover {
  animation-play-state: paused;
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 10px;
}

.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 transparent;
}

/* Hide Scrollbar */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Magnetic Button Effect */
.magnetic-button {
  position: relative;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.magnetic-button.reset {
  transform: translate3d(0, 0, 0) !important;
}

/* Loading Spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Neural Network Canvas Mask */
.neural-canvas-mask {
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

/* Slow Spin Animations */
@keyframes spin-slow {
  to { transform: rotate(360deg); }
}

.animate-spin-slow {
  animation: spin-slow 12s linear infinite;
}

.animate-spin-15s {
  animation: spin 15s linear infinite;
}

.animate-spin-18s {
  animation: spin 18s linear infinite reverse;
}

.animate-spin-20s {
  animation: spin 20s linear infinite;
}

/* Pulse Fast */
.animate-pulse-fast {
  animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Selection Styles */
::selection {
  background-color: rgba(221, 17, 18, 0.2);
  color: #DD1112;
}