/* ============================================
   Nuvanti — Custom Styles
   Design system: Clean Professional (Light)
   ============================================ */

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; }

/* ============================================
   NAV — Base: light (all pages except index.html)
   Dark glass: applied via .dark-nav class on index.html only
   Pill: applied via .scrolled class on scroll
   ============================================ */
#navbar {
  background: white;
  border-bottom: 1px solid #E5E7EB;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#navbar.scrolled {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  width: min(calc(100% - 3rem), 1100px) !important;
  top: 10px !important;
  border-radius: 9999px !important;
  height: 60px !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
#navbar.scrolled > div {
  height: 60px;
}

/* Dark glass nav — index.html only (add dark-nav class to <nav>) */
#navbar.dark-nav {
  backdrop-filter: blur(12px);
  background: rgba(10, 10, 20, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#navbar.dark-nav.scrolled {
  background: rgba(10, 10, 20, 0.90) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4) !important;
}

/* ============================================
   CARDS — Consistent hover lift
   ============================================ */
.card-hover {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* ============================================
   SERVICE CARD — Left border accent
   ============================================ */
.testimonial-card {
  border-left: 3px solid #2563EB;
}

/* ============================================
   BUTTONS — Focus ring
   ============================================ */
button:focus-visible,
a:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================
   FORM INPUTS — Consistent styling
   ============================================ */
input, select, textarea {
  font-size: 16px; /* Prevents iOS zoom on focus */
}

/* ============================================
   AOS — Ensure hidden elements don't flash
   ============================================ */
[data-aos] {
  pointer-events: none;
}
[data-aos].aos-animate {
  pointer-events: auto;
}

/* ============================================
   SECTION DIVIDER — Optional angled cut
   (Add .section-angle class to sections)
   ============================================ */
.section-angle {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw), 0 100%);
  padding-bottom: calc(5rem + 2vw);
}

/* ============================================
   LOGO — Inverted for dark backgrounds
   ============================================ */
.logo-inverted {
  filter: brightness(0) invert(1);
}

/* ============================================
   UTILITY — Gradient text (use sparingly)
   ============================================ */
.gradient-text {
  background: linear-gradient(135deg, #2563EB, #1D4ED8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================
   FILTER TABS — Active state
   ============================================ */
.filter-tab.active {
  background-color: #2563EB;
  color: #FFFFFF;
}

/* ============================================
   PORTFOLIO CARD — Hover overlay
   ============================================ */
.portfolio-card { position: relative; overflow: hidden; }
.portfolio-card .overlay {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.7);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.portfolio-card:hover .overlay { opacity: 1; }
.portfolio-card .thumbnail {
  transition: transform 0.5s ease;
}
.portfolio-card:hover .thumbnail { transform: scale(1.05); }

/* ============================================
   HERO — Floating illustration animation
   ============================================ */
.hero-illustration {
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-14px); }
}

/* ============================================
   DESIGN ELEVATION — 2026-03-17
   ============================================ */

/* --- Gradient button --- */
.btn-gradient {
  background: linear-gradient(to right, #2563EB, #F59E0B, #2563EB);
  background-size: 200% auto;
  color: #ffffff;
  font-weight: 600;
  transition: background-position 0.4s ease, box-shadow 0.3s ease;
}
.btn-gradient:hover {
  background-position: right center;
  box-shadow: 0 0 28px rgba(37, 99, 235, 0.45);
}

/* --- Glow orb (hero background blobs) --- */
@keyframes glow-pulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.15); opacity: 1; }
}
.glow-orb {
  pointer-events: none;
  animation: glow-pulse 10s ease-in-out infinite;
}

/* --- Butterfly logo glow --- */
@keyframes logo-glow {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(245, 158, 11, 0.3)); }
  50% { filter: drop-shadow(0 0 24px rgba(245, 158, 11, 0.5)); }
}
.glow-pulse {
  animation: logo-glow 3s ease-in-out infinite;
}

/* --- Service cards gradient border on hover --- */
.service-card {
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  isolation: isolate;
}
.service-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, #2563EB, #F59E0B);
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: -1;
}
.service-card:hover::before {
  opacity: 1;
}
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(37, 99, 235, 0.10), 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* --- Learn more link animated arrow --- */
.learn-more-link {
  transition: color 0.2s ease;
}
.learn-more-link:hover {
  color: #2563EB;
}
.learn-more-link .arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}
.learn-more-link:hover .arrow {
  transform: translateX(4px);
}

/* --- Scroll reveal --- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s ease,
              border-color 0.5s ease;
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
  /* Reset to all so Tailwind hover transitions (shadow, border, translate) work normally */
  transition: all 0.3s ease;
}

/* --- Hero entrance animations --- */
.hero-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* --- Accessibility: reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .hero-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .glow-orb,
  .glow-pulse {
    animation: none;
  }
  .btn-gradient {
    transition: none;
  }
}

/* --- Carousel transition (Tailwind CDN lacks duration-400) --- */
.duration-400 {
  transition-duration: 400ms;
}

/* --- Hero badge pill --- */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(37, 99, 235, 0.12);
  border: 1px solid rgba(37, 99, 235, 0.3);
  border-radius: 9999px;
  padding: 6px 16px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.875rem;
  font-weight: 500;
}
.hero-badge .dot {
  width: 6px;
  height: 6px;
  background: #2563EB;
  border-radius: 50%;
  flex-shrink: 0;
}