/* Custom styles for ObX Historian */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
  background: #f97316;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #ea580c;
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #f97316, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glass morphism */
.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(249, 115, 22, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(249, 115, 22, 0.1);
}

/* Glow effects */
.glow-orange {
  box-shadow: 0 0 30px rgba(249, 115, 22, 0.3), 0 0 60px rgba(249, 115, 22, 0.1);
}

.glow-text {
  text-shadow: 0 0 40px rgba(249, 115, 22, 0.5);
}

/* Animated gradient border */
.gradient-border {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 1rem;
  background: linear-gradient(135deg, #f97316, transparent 50%, #f59e0b);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Floating animation */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.animate-float {
  animation: float 6s ease-in-out infinite;
}

/* Pulse ring */
@keyframes pulse-ring {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}
.pulse-ring::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #f97316;
  animation: pulse-ring 2s ease-out infinite;
}

/* Particle background */
.particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(249, 115, 22, 0.4);
  border-radius: 50%;
  animation: rise linear infinite;
}
@keyframes rise {
  0% { transform: translateY(100vh) scale(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}

/* Mobile nav */
.mobile-nav {
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  box-sizing: border-box;
}
.mobile-nav.active {
  transform: translateX(0);
}

/* Mobile nav inner layout */
.mobile-nav > div {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* Mobile nav links scrollable area */
.mobile-nav .flex.flex-col.gap-4 {
  flex: 1 1 auto;
  overflow-y: auto;
}

/* Small screen adjustments */
@media (max-height: 500px) {
  .mobile-nav > div {
    padding: 1rem;
  }
  .mobile-nav .flex.flex-col.gap-4 {
    gap: 0.75rem;
  }
  .mobile-nav .mb-8,
  .mobile-nav .mb-6 {
    margin-bottom: 1rem;
  }
}

/* Landscape mobile */
@media (max-height: 450px) and (orientation: landscape) {
  .mobile-nav .flex.flex-col.gap-4 {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    font-size: 0.9rem;
  }
  .mobile-nav .mt-auto {
    padding-top: 0.5rem;
  }
}

/* Section divider */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.3), transparent);
}

/* FAQ accordion */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-answer.open {
  max-height: 500px;
}
.faq-icon {
  transition: transform 0.3s ease;
}
.faq-item.active .faq-icon {
  transform: rotate(45deg);
}

/* Step connector line */
.step-connector {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, #f97316, transparent);
}

/* Logo grid hover */
.logo-item {
  filter: grayscale(100%) brightness(0.7);
  transition: all 0.4s ease;
}
.logo-item:hover {
  filter: grayscale(0%) brightness(1);
  transform: scale(1.05);
}
.logo-item img {
  max-height: 80px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}

/* CSS Marquee (infinite logo scroll) */
.marquee-container {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}
.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee-scroll 35s linear infinite;
  will-change: transform;
}
.marquee-container:hover .marquee-track {
  animation-play-state: paused;
}
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 6rem;
  padding: 0 2.5rem;
}

/* Hero badge */
.hero-badge {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.15), rgba(245, 158, 11, 0.15));
  border: 1px solid rgba(249, 115, 22, 0.3);
}

/* Nav link underline effect */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #f97316;
  transition: width 0.3s ease;
}
.nav-link:hover::after {
  width: 100%;
}

/* Button shine effect */
.btn-shine {
  position: relative;
  overflow: hidden;
}
.btn-shine::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  transform: rotate(45deg) translateX(-100%);
  transition: transform 0.6s ease;
}
.btn-shine:hover::after {
  transform: rotate(45deg) translateX(100%);
}

/* Swiper custom */
.swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.3) !important;
}
.swiper-pagination-bullet-active {
  background: #f97316 !important;
}

/* Loading screen */
#loader {
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
#loader.hidden {
  opacity: 0;
  visibility: hidden;
}

/* Counter animation */
.counter {
  font-variant-numeric: tabular-nums;
}

/* Grid pattern background */
.grid-pattern {
  background-image: 
    linear-gradient(rgba(249, 115, 22, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(249, 115, 22, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Responsive */
@media (max-width: 768px) {
  .step-connector {
    display: none;
  }
}

/* ===== MOBILE RESPONSIVE IMPROVEMENTS ===== */

/* Prevent images from overflowing their containers */
img {
  max-width: 100%;
}

/* Remove tap highlight on mobile for a native feel */
a, button {
  -webkit-tap-highlight-color: transparent;
}

/* Ensure minimum touch target size for interactive elements */
button, a[href], input, select, textarea, [role="button"] {
  touch-action: manipulation;
}

/* Prevent long text from causing horizontal overflow */
h1, h2, h3, h4, p, li, span {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Prevent the navbar from causing overflow on small screens */
#navbar {
  max-width: 100vw;
  overflow: visible;
  box-sizing: border-box;
}

/* Ensure navbar inner content doesn't overflow */
#navbar .max-w-7xl {
  max-width: 100%;
  box-sizing: border-box;
}

/* On mobile, prevent any element from causing horizontal scroll */
.max-w-7xl, .max-w-5xl, .max-w-4xl, .max-w-3xl, .max-w-2xl {
  width: 100%;
  box-sizing: border-box;
}

/* Prevent horizontal scroll globally on mobile */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Ensure the hero section doesn't overflow horizontally */
.hero-section {
  overflow-x: hidden;
}

/* Better mobile spacing for marquee logos */
@media (max-width: 640px) {
  .marquee-item {
    padding: 0 1.25rem;
  }

  /* Reduce hero stat gaps on tiny screens */
  .hero-stats {
    gap: 0.75rem !important;
  }

  /* Make the integration network diagram adapt better on mobile */
  .glass .relative.h-80 {
    height: 260px;
  }
}

/* Tablet-specific tweaks */
@media (min-width: 641px) and (max-width: 1023px) {
  .hero-stats {
    gap: 1.5rem;
  }
}

/* Ensure the chatbot button doesn't overlap with content on landscape mobile */
@media (max-width: 768px) and (orientation: landscape) {
  .obx-chat-btn {
    bottom: 12px;
    right: 12px;
    width: 48px;
    height: 48px;
  }
}

/* Fix for project content padding on mobile */
@media (max-width: 1023px) {
  .glass-card .lg\:p-12 {
    padding: 1.5rem;
  }
}

/* ===== MOBILE PERFORMANCE OPTIMIZATIONS ===== */
@media (max-width: 768px) {
  /* Promote hero elements to GPU layers for smoother entrance */
  .hero-badge,
  .hero-title,
  .hero-subtitle,
  .hero-cta,
  .hero-stats {
    will-change: transform, opacity;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* Reduce expensive backdrop-filter blur on mobile */
  .glass {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  /* Disable heavy background blur orbs on mobile */
  .hero-section > .absolute[class*="blur-"] {
    display: none;
  }

  /* Simplify particle animation on mobile */
  .particle {
    animation-timing-function: linear;
    will-change: transform;
  }

  /* Disable float animation on mobile to reduce compositing */
  .animate-float {
    animation: none;
  }
}