/* ================================================================
   SUNOVA — Shadow Effects + Heading Zoom Pulse
   ================================================================ */

/* ── HEADING ZOOM-IN / ZOOM-OUT PULSE ANIMATION ─────────────────
   Applied to: .section-title, .page-hero h1, .hero h1,
               .art-title, .pd-hero-info h1
   Smoothly breathes: scale(1) → scale(1.04) → scale(1)
   ──────────────────────────────────────────────────────────────── */
@keyframes headingPulse {
  0%   { transform: scale(1);    }
  50%  { transform: scale(1.04); }
  100% { transform: scale(1);    }
}

/* All section headings */
.section-title {
  display: inline-block;
  animation: headingPulse 4s ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
}

/* Page hero headings (about, services, projects etc.) */
.page-hero h1 {
  display: inline-block;
  animation: headingPulse 3.8s ease-in-out infinite;
  transform-origin: left center;
}

/* Main hero (homepage) */
.hero h1 {
  animation: headingPulse 4.2s ease-in-out infinite;
  transform-origin: left center;
}

/* Blog article title */
.art-title {
  display: inline-block;
  animation: headingPulse 4s ease-in-out infinite;
  transform-origin: left center;
}

/* Project details hero title */
.pd-hero-info h1 {
  display: inline-block;
  animation: headingPulse 3.8s ease-in-out infinite;
  transform-origin: left center;
}

/* Stagger so each section's heading pulses at a different phase */
section:nth-of-type(1) .section-title { animation-delay: 0s;    }
section:nth-of-type(2) .section-title { animation-delay: 0.6s;  }
section:nth-of-type(3) .section-title { animation-delay: 1.2s;  }
section:nth-of-type(4) .section-title { animation-delay: 1.8s;  }
section:nth-of-type(5) .section-title { animation-delay: 2.4s;  }
section:nth-of-type(6) .section-title { animation-delay: 3.0s;  }
section:nth-of-type(7) .section-title { animation-delay: 3.6s;  }
section:nth-of-type(8) .section-title { animation-delay: 0.3s;  }


/* ── SECTION TAG GLOW SHADOW ────────────────────────────────── */
.section-tag {
  text-shadow: 0 0 18px rgba(0, 97, 255, 0.35);
  box-shadow:  0 2px 16px rgba(0, 97, 255, 0.14);
}


/* ── CARD SHADOWS ────────────────────────────────────────────── */
/* Service cards */
.service-card {
  box-shadow: 0 4px 24px rgba(0, 97, 255, 0.08),
              0 1px 4px  rgba(0,  0,  0,  0.05);
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease;
}
.service-card:hover {
  box-shadow: 0 20px 60px rgba(0, 97, 255, 0.22),
              0 6px 20px  rgba(0,  0,  0,  0.08);
}

/* Project cards */
.project-card {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10),
              0 1px 4px  rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.project-card:hover {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.20),
              0 8px 24px  rgba(0, 97, 255, 0.15);
}

/* Blog cards */
.blog-card {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07),
              0 1px 4px  rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.blog-card:hover {
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.13),
              0 4px 16px  rgba(0, 97, 255, 0.12);
}

/* Team cards */
.team-card {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07),
              0 1px 4px  rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.team-card:hover {
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.14),
              0 4px 16px  rgba(0, 97, 255, 0.12);
}

/* Career cards */
.career-card {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06),
              0 1px 4px  rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.career-card:hover {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.12),
              0 4px 14px  rgba(0, 97, 255, 0.12);
}

/* Testimonial cards */
.testi-card {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06),
              0 1px 4px  rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.testi-card:hover {
  box-shadow: 0 18px 50px rgba(0, 97, 255, 0.14),
              0 4px 14px  rgba(0,  0,  0,  0.08);
}

/* Pricing cards */
.pricing-card {
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.07),
              0 1px 4px  rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.4s ease, transform 0.5s ease;
}
.pricing-card.featured {
  box-shadow: 0 24px 70px rgba(0, 97, 255, 0.32),
              0 8px 28px  rgba(0, 97, 255, 0.18);
}
.pricing-card:hover:not(.featured) {
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.13),
              0 4px 16px  rgba(0, 97, 255, 0.12);
}
.pricing-card.featured:hover {
  box-shadow: 0 32px 80px rgba(0, 97, 255, 0.40),
              0 12px 36px rgba(0, 97, 255, 0.22);
}

/* Value cards (about page) */
.value-card {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06),
              0 1px 4px  rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.value-card:hover {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.11),
              0 4px 14px  rgba(0, 97, 255, 0.12);
}

/* FAQ items */
.faq-item {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}
.faq-item:hover,
.faq-item.open {
  box-shadow: 0 8px 32px rgba(0, 97, 255, 0.12),
              0 2px 8px   rgba(0, 0,   0,  0.07);
}

/* Service detail cards */
.service-detail-card {
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.06),
              0 1px 4px  rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.4s ease;
}
.service-detail-card:hover {
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.12),
              0 4px 18px  rgba(0, 97, 255, 0.14);
}

/* Contact detail items */
.contact-detail-item {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.contact-detail-item:hover {
  box-shadow: 0 10px 32px rgba(0, 97, 255, 0.13),
              0 2px 8px   rgba(0, 0,   0,  0.06);
  transform: translateY(-4px);
}

/* Contact form wrap */
.contact-form-wrap {
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08),
              0 2px 8px  rgba(0, 0, 0, 0.04);
}

/* Project meta sidebar card */
.pd-meta-card {
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08),
              0 2px 8px  rgba(0, 0, 0, 0.04);
}

/* Blog article sidebar cards */
.sidebar-card {
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.07),
              0 1px 4px  rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.35s ease;
}
.sidebar-card:hover {
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.11),
              0 3px 12px  rgba(0, 97, 255, 0.1);
}


/* ── NAVBAR SHADOW ───────────────────────────────────────────── */
.navbar.scrolled {
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.40),
              0 1px 8px  rgba(0, 0, 0, 0.25) !important;
}


/* ── ABOUT IMAGE SHADOW ──────────────────────────────────────── */
.about-img-main {
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22),
              0 8px 28px  rgba(0, 97, 255, 0.14) !important;
}

/* About badge shadow */
.about-badge {
  box-shadow: 0 16px 50px rgba(0, 97, 255, 0.45),
              0 4px 14px  rgba(0,   0,   0, 0.20) !important;
}


/* ── HERO BUTTON SHADOWS ─────────────────────────────────────── */
.btn-hero-primary {
  box-shadow: 0 10px 36px rgba(0, 97, 255, 0.45),
              0 3px 10px  rgba(0, 97, 255, 0.28) !important;
}
.btn-hero-primary:hover {
  box-shadow: 0 20px 55px rgba(0, 97, 255, 0.58),
              0 6px 18px  rgba(0, 97, 255, 0.36) !important;
}

/* Stat cards */
.stat-card {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
  transition: box-shadow 0.4s ease;
}
.stat-card:hover {
  box-shadow: 0 14px 44px rgba(0, 97, 255, 0.18),
              0 4px 14px  rgba(0,  0,  0,  0.10);
}


/* ── LOGO / NAV CTA SHADOWS ──────────────────────────────────── */
.logo-icon {
  box-shadow: 0 4px 18px rgba(0, 97, 255, 0.40);
}

.nav-cta {
  box-shadow: 0 4px 20px rgba(0, 97, 255, 0.42) !important;
}
.nav-cta:hover {
  box-shadow: 0 10px 32px rgba(0, 97, 255, 0.58) !important;
}


/* ── SECTION HEADER TITLE TEXT SHADOW ───────────────────────── */
.section-title {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.06);
}

.hero h1 {
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.45),
               0 2px 8px  rgba(0, 0, 0, 0.30);
}

.page-hero h1 {
  text-shadow: 0 4px 36px rgba(0, 0, 0, 0.50),
               0 2px 8px  rgba(0, 0, 0, 0.30);
}

.art-title {
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}


/* ── FOOTER SHADOW ───────────────────────────────────────────── */
.footer-bg {
  box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.18);
}


/* ── SCROLL PROGRESS BAR SHADOW ─────────────────────────────── */
#progress-bar {
  box-shadow: 0 0 10px rgba(0, 97, 255, 0.6),
              0 0 4px  rgba(0, 201, 167, 0.5);
}


/* ── MOBILE: Respect reduced motion — keep only shadows ──────── */
@media (prefers-reduced-motion: reduce) {
  .section-title,
  .page-hero h1,
  .hero h1,
  .art-title,
  .pd-hero-info h1 {
    animation: none !important;
  }
}