/* =========================================
   Lojics – Custom Styles
   Tailwind handles most styling; this file
   adds small custom utilities and effects.
========================================= */

/* Smooth transitions for theme + layout changes */
*,
*::before,
*::after {
  scroll-behavior: smooth;
}

html {
  color-scheme: light dark;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", sans-serif;
}

/* Modern Loader Styles */
#loader {
  animation: fadeOutLoader 0.8s ease-in-out 2.4s forwards;
}

@keyframes fadeOutLoader {
  0% {
    opacity: 1;
    backdrop-filter: blur(12px);
    pointer-events: auto;
    visibility: visible;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    backdrop-filter: blur(0px);
    pointer-events: none;
    visibility: hidden;
  }
}

.loader-logo-container {
  animation: logoContainerSlideUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1.6s forwards;
}

@keyframes logoContainerSlideUp {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-30px) scale(0.8);
  }
}

.loader-logo {
  animation: logoFadeUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1.6s forwards;
}

@keyframes logoFadeUp {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-15px);
  }
}

.loader-bar {
  animation: barPulse 1.2s ease-in-out infinite;
}

.loader-bar:nth-child(2) {
  animation-delay: 0.2s;
}

.loader-bar:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes barPulse {
  0%, 100% {
    opacity: 0.3;
    transform: scaleY(1);
  }
  50% {
    opacity: 1;
    transform: scaleY(1.5);
  }
}

/* Mobile Menu Styles */
#mobile-menu {
  animation: slideDown 0.3s ease-out;
}

#mobile-menu.hidden {
  animation: slideUp 0.3s ease-out forwards;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

#mobile-menu-toggle {
  transition: all 0.3s ease;
}

#mobile-menu-toggle.active {
  background: rgba(59, 130, 246, 0.2);
}

#menu-icon {
  transition: transform 0.3s ease;
}

#mobile-menu-toggle.active #menu-icon {
  transform: rotate(90deg);
}

/* Glassmorphism helpers */
.glass-surface {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.glass-light {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.82),
    rgba(248, 250, 252, 0.75)
  );
}

.glass-dark {
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.9),
    rgba(15, 23, 42, 0.7)
  );
}

.glass-panel {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.dark .glass-panel {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Sticky blurred header state */
.header-blur {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: radial-gradient(
      circle at top left,
      rgba(59, 130, 246, 0.16),
      transparent 55%
    ),
    rgba(15, 23, 42, 0.88);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.65);
}

.header-light {
  background: radial-gradient(
      circle at top left,
      rgba(59, 130, 246, 0.14),
      transparent 55%
    ),
    rgba(255, 255, 255, 0.92);
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.18);
}

/* Hero floating orbs / shapes */
.floating-orb {
  filter: blur(32px);
  opacity: 0.8;
}

/* Horizontal storytelling */
.horizontal-section {
  position: relative;
  overflow: hidden;
}

.horizontal-track {
  display: flex;
  height: 100%;
}

/* Remove fixed width so Tailwind classes control sizing */
.horizontal-panel {
  /* min-width: 100vw; */
  /* max-width: 100vw; */
  flex-shrink: 0;
}

/* Partners marquee */
.partners-track {
  display: flex;
  gap: 4rem;
  will-change: transform;
}

.partner-logo img {
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 200ms ease, opacity 200ms ease, transform 200ms ease;
}

.partner-logo:hover img {
  filter: grayscale(0);
  opacity: 1;
  transform: translateY(-2px);
}

/* Contact form floating labels */
.floating-field {
  position: relative;
}

.floating-field input,
.floating-field textarea {
  padding-top: 1.5rem;
}

.floating-label {
  pointer-events: none;
  position: absolute;
  inset-inline-start: 1rem;
  top: 0.95rem;
  font-size: 0.85rem;
  color: rgb(148 163 184);
  transition: transform 160ms ease, opacity 160ms ease;
}

.floating-field input:focus + .floating-label,
.floating-field textarea:focus + .floating-label,
.floating-field input:not(:placeholder-shown) + .floating-label,
.floating-field textarea:not(:placeholder-shown) + .floating-label {
  transform: translateY(-0.5rem);
  opacity: 0.85;
}

/* Utility to hide scrollbars on marquee wrappers where needed */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

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

/* Feature cards stacked - performance optimization */
.feature-card-stacked {
  will-change: transform, opacity;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.feature-card-stacked:hover {
  transform: translateY(-8px);
}

.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, 
    rgba(59, 130, 246, 0) 0%,
    rgba(59, 130, 246, 0.5) 15%,
    rgba(59, 130, 246, 0.5) 85%,
    rgba(59, 130, 246, 0) 100%
  );
  transform: translateX(-50%);
}

.timeline-dot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #3B82F6;
  border: 4px solid white;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
  z-index: 10;
}

.dark .timeline-dot {
  border-color: #0F172A;
}

/* Enhanced shadow animations for buttons and cards on hover */
button, a[class*="rounded-full"],
.service-card, .feature-card-stacked,
.portfolio-item, .industry-card,
[class*="card"], [class*="panel"] {
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

button:hover, a[class*="rounded-full"]:hover,
.service-card:hover, .feature-card-stacked:hover,
.portfolio-item:hover, .industry-card:hover {
  box-shadow: 0 20px 50px -15px rgba(59, 130, 246, 0.5),
              0 10px 30px -10px rgba(0, 0, 0, 0.2);
  transform: translateY(-4px);
}

.dark button:hover, .dark a[class*="rounded-full"]:hover,
.dark .service-card:hover, .dark .feature-card-stacked:hover,
.dark .portfolio-item:hover, .dark .industry-card:hover {
  box-shadow: 0 20px 50px -15px rgba(59, 130, 246, 0.6),
              0 10px 30px -10px rgba(0, 0, 0, 0.4);
}

/* Animated gradient shadow effect */
@keyframes shadowPulse {
  0% {
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);
  }
  50% {
    box-shadow: 0 15px 40px rgba(59, 130, 246, 0.5);
  }
  100% {
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);
  }
}

/* Apply shadow pulse animation on cards */
.service-card, .feature-card-stacked,
.portfolio-item, .industry-card {
  animation: shadowPulse 3s ease-in-out infinite;
}

/* Override animation pause on hover to show solid shadow */
.service-card:hover, .feature-card-stacked:hover,
.portfolio-item:hover, .industry-card:hover {
  animation: none;
}

/* Glowing button and CTA animations */
@keyframes buttonGlow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.4),
                0 4px 12px rgba(59, 130, 246, 0.2),
                inset 0 0 10px rgba(59, 130, 246, 0.1);
  }
  50% {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.6),
                0 8px 20px rgba(59, 130, 246, 0.3),
                inset 0 0 10px rgba(59, 130, 246, 0.2);
  }
}

button[class*="bg-slate-900"],
button[class*="bg-blue"],
a[class*="bg-slate-900"][class*="rounded"],
a[class*="bg-blue"][class*="rounded"] {
  animation: buttonGlow 2s ease-in-out infinite;
}

button:hover,
a[class*="rounded-full"]:hover,
button[class*="bg-slate-900"]:hover,
button[class*="bg-blue"]:hover,
a[class*="bg-slate-900"]:hover,
a[class*="bg-blue"]:hover {
  animation: none !important;
}\n\n/* Enhanced card shadow with multi-layer effect */\n.service-card, .feature-card-stacked,\n.portfolio-item, .industry-card {\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.service-card:hover, .feature-card-stacked:hover,\n.portfolio-item:hover, .industry-card:hover {\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08),\n              0 8px 24px rgba(59, 130, 246, 0.3),\n              0 16px 40px rgba(59, 130, 246, 0.15);\n}\n\n.dark .service-card:hover, .dark .feature-card-stacked:hover,\n.dark .portfolio-item:hover, .dark .industry-card:hover {\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),\n              0 8px 24px rgba(59, 130, 246, 0.4),\n              0 16px 40px rgba(59, 130, 246, 0.2);\n}