/* General styles */

@layer base {
   body {
      font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-size: 18px;
   }
   
   html {
      scroll-behavior: smooth;
   }

   p {
      font-family: 'Barlow', sans-serif;
      line-height: 1.45;
      font-weight: 400;
      padding-bottom: 1.25em;
   }
   
   h1, h2, h3, h4, h5, h6 {
      font-family: 'Merriweather', Georgia, serif;
   }
}

@layer components {
   .nav-link {
      @apply font-medium text-[0.9375rem] tracking-wide transition-colors duration-200;
   }
   
   .nav-link.active {
      @apply font-semibold;
   }
   
   h1 {
      @apply text-6xl md:text-[3.75rem] leading-tight font-light tracking-tight text-neutral-900 mb-8;
   }
   
   h2 {
      @apply text-4xl md:text-[2.75rem] leading-snug font-light tracking-tight text-neutral-900 mb-6;
   }
   
   h3 {
      @apply text-[1.375rem] leading-snug font-bold text-neutral-900 mb-4 tracking-tight;
   }
   
   h4 {
      @apply text-sm leading-tight font-semibold text-neutral-600 mb-3 uppercase tracking-widest;
      font-family: 'Barlow', sans-serif;
   }
   
   p {
      @apply text-base leading-relaxed text-neutral-700 mb-4;
      font-family: 'Barlow', sans-serif;
   }
   
   blockquote {
      @apply text-[1.375rem] leading-relaxed italic font-normal text-neutral-900 my-12 relative;
   }
   
   /* Scroll reveal animation - disabled on mobile to prevent errors */
   .reveal {
      opacity: 1;
      transform: translateY(0);
   }
   
   .reveal-stagger > * {
      opacity: 1;
      transform: translateY(0);
   }
   
   .reveal-slide-item {
      opacity: 1;
      transform: translateX(0);
   }
   
   .reveal-card {
      opacity: 1;
      transform: scale(1) translateY(0) rotateX(0deg);
   }
   
   /* Enable reveal animations only on larger screens (tablet and up) */
   @media (min-width: 768px) {
      .reveal {
         opacity: 0;
         transform: translateY(40px);
         transition: opacity 0.8s ease-out, transform 0.8s ease-out;
      }
      
      .reveal.active {
         opacity: 1;
         transform: translateY(0);
      }
      
      /* Stagger animation for child elements */
      .reveal-stagger > * {
         opacity: 0;
         transform: translateY(30px);
         transition: opacity 0.6s ease-out, transform 0.6s ease-out;
      }
      
      .reveal-stagger.active > *:nth-child(1) { transition-delay: 0.1s; }
      .reveal-stagger.active > *:nth-child(2) { transition-delay: 0.2s; }
      .reveal-stagger.active > *:nth-child(3) { transition-delay: 0.3s; }
      .reveal-stagger.active > *:nth-child(4) { transition-delay: 0.4s; }
      .reveal-stagger.active > *:nth-child(5) { transition-delay: 0.5s; }
      .reveal-stagger.active > *:nth-child(6) { transition-delay: 0.6s; }
      
      .reveal-stagger.active > * {
         opacity: 1;
         transform: translateY(0);
      }
      
      /* Horizontal fly-in animation for list items */
      .reveal-slide-item {
         opacity: 0;
         transform: translateX(-100px);
         transition: opacity 0.8s ease-out, transform 0.8s ease-out;
      }
      
      .reveal-slide-item.active {
         opacity: 1;
         transform: translateX(0);
      }
      
      /* Fancy card animation - scale and fade with rotation */
      .reveal-card {
         opacity: 0;
         transform: scale(0.85) translateY(30px) rotateX(10deg);
         transform-style: preserve-3d;
         perspective: 1000px;
         transition: opacity 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), 
                  transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
      }
      
      .reveal-card.active {
         opacity: 1;
         transform: scale(1) translateY(0) rotateX(0deg);
      }
      
      /* Stagger delays for cards */
      .reveal-card:nth-child(1) { transition-delay: 0s; }
      .reveal-card:nth-child(2) { transition-delay: 0.1s; }
      .reveal-card:nth-child(3) { transition-delay: 0.2s; }
      .reveal-card:nth-child(4) { transition-delay: 0.3s; }
      .reveal-card:nth-child(5) { transition-delay: 0.4s; }
      .reveal-card:nth-child(6) { transition-delay: 0.5s; }
      .reveal-card:nth-child(7) { transition-delay: 0.6s; }
      .reveal-card:nth-child(8) { transition-delay: 0.7s; }
      .reveal-card:nth-child(9) { transition-delay: 0.8s; }
   }
}

/* Navigation scroll effect */

nav {
   transition: all 0.3s ease;
}

/* Navigation always white */
nav {
   background: rgba(255, 255, 255, 0.98) !important;
   border-bottom-color: #e5e5e5 !important;
}

nav .nav-link,
nav a[href="/"] {
   color: #525252 !important;
}

nav a[href="/"]:hover,
nav .nav-link:hover {
   color: #0a0a0a !important;
}

nav .mobile-menu-btn {
   color: #525252;
}


/* Logo Carousel Animation */

@keyframes scroll {
   0% {
      transform: translateX(0);
   }
   100% {
      transform: translateX(-50%);
   }
}

.logo-carousel {
   animation: scroll 9s linear infinite;
   cursor: grab;
}

.logo-carousel.paused {
   animation-play-state: paused;
}

.logo-carousel.dragging {
   cursor: grabbing;
   user-select: none;
}

.logo-carousel.manual-control {
   animation: none !important;
}

/* Reviews Carousel Animation */
@keyframes scrollReviews {
   0% {
      transform: translateX(0);
   }
   100% {
      transform: translateX(-50%);
   }
}

.reviews-carousel {
   animation: scrollReviews 15s linear infinite;
   cursor: grab;
}

.reviews-carousel.paused {
   animation-play-state: paused;
}

.reviews-carousel.dragging {
   cursor: grabbing;
   user-select: none;
}

.reviews-carousel.manual-control {
   animation: none !important;
}

.service-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 3px;
   background: linear-gradient(90deg, #0ea5e9, #14b8a6, #fbbf24);
   transform: scaleX(0);
   transition: transform 0.35s ease;
}

.service-card:hover::before {
   transform: scaleX(1);
}

/* Services Content List Styling */
.services-content ul,
.services-content ol {
   padding-left: 1em;
   margin-top: 0.75em;
   margin-bottom: 0.75em;
}

.services-content ul {
   list-style-type: disc;
}

.services-content ol {
   list-style-type: decimal;
}

.services-content li {
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   line-height: 1.5;
}

.services-content li::marker {
   color: #0ea5e9;
}

.services-content ul ul,
.services-content ol ol,
.services-content ul ol,
.services-content ol ul {
   margin-top: 0.5em;
   margin-bottom: 0.5em;
}

.hero-animated-bg {
   position: relative;
   overflow: hidden;
   background: 
      linear-gradient(135deg, 
         #0f172a 0%,
         #1e293b 25%,
         #0c4a6e 50%,
         #134e4a 75%,
         #0f172a 100%
      );
}

.hero-animated-bg::before {
   content: '';
   position: absolute;
   top: -50%;
   left: -50%;
   right: -50%;
   bottom: -50%;
   background: 
      radial-gradient(ellipse at 20% 20%, rgba(14, 165, 233, 0.2) 0%, transparent 40%),    /* Sky-500 */
      radial-gradient(ellipse at 80% 30%, rgba(20, 184, 166, 0.18) 0%, transparent 45%),   /* Teal-500 */
      radial-gradient(ellipse at 40% 80%, rgba(251, 191, 36, 0.12) 0%, transparent 50%),   /* Amber-400 */
      radial-gradient(ellipse at 70% 70%, rgba(14, 165, 233, 0.15) 0%, transparent 40%),
      radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.08) 0%, transparent 60%);    /* Indigo-500 */
   animation: backgroundPulse 20s ease-in-out infinite;
}

.hero-animated-bg::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: 
      linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.5) 100%);
   pointer-events: none;
}

@keyframes backgroundPulse {
   0%, 100% {
      opacity: 1;
      transform: scale(1) rotate(0deg);
   }
   33% {
      opacity: 0.9;
      transform: scale(1.1) rotate(5deg);
   }
   66% {
      opacity: 0.85;
      transform: scale(1.05) rotate(-3deg);
   }
}

/* Canvas for particle animation */

#particles-canvas {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
}

.hero-content {
   position: relative;
   z-index: 10;
}

/* Hero button gradients and effects */

.hero-animated-bg .btn-primary {
   background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(20, 184, 166, 0.2));
   border-color: rgba(14, 165, 233, 0.6);
   backdrop-filter: blur(10px);
}

.hero-animated-bg .btn-primary:hover {
   background: linear-gradient(135deg, rgba(14, 165, 233, 0.4), rgba(20, 184, 166, 0.4));
   border-color: rgba(14, 165, 233, 1);
}

.hero-animated-bg .btn-secondary {
   backdrop-filter: blur(10px);
}

/* Prose/WYSIWYG Content Styles */
.prose {
   color: #404040;
   max-width: 65ch;
}

.prose p {
   margin-bottom: 1.25em;
   line-height: 1.75;
}

.prose h2 {
   margin-top: 2em;
   margin-bottom: 1em;
   line-height: 1.3;
}

.prose h3 {
   margin-top: 1.6em;
   margin-bottom: 0.6em;
   line-height: 1.4;
}

.prose strong {
   font-weight: 600;
   color: #171717;
}

.prose em {
   font-style: italic;
}

.prose a {
   color: #0ea5e9;
   text-decoration: underline;
   font-weight: 500;
   transition: color 0.2s;
}

.prose a:hover {
   color: #0284c7;
}

.prose ul,
.prose ol {
   padding-left: 1.625em;
   margin-top: 1.25em;
   margin-bottom: 1.25em;
}

.prose ul {
   list-style-type: disc;
}

.prose ol {
   list-style-type: decimal;
}

.prose li {
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   line-height: 1.75;
}

.prose li p {
   margin-top: 0.75em;
   margin-bottom: 0.75em;
}

.prose u {
   text-decoration: underline;
}

.prose s {
   text-decoration: line-through;
}