/* ==========================================================================
   MAC SYSTEMS — SaaS motion layer
   Supplementary effects layered on top of vendors/css/main.css.
   Does not modify existing rules — only adds new behavior on top.
   ========================================================================== */

/* ==========================================================================
   Metallic gold shine system
   Applies an animated light-sweep + richer metallic gradient to every
   gold-filled surface (buttons, icon badges, pricing badge) so the gold
   reads as polished metal rather than flat paint.
   ========================================================================== */

@keyframes gold-sheen-sweep {
  0%   { background-position: -150% 0; }
  100% { background-position: 250% 0; }
}

@keyframes gold-icon-shimmer {
  0%, 100% { filter: brightness(1) saturate(1); }
  50%      { filter: brightness(1.18) saturate(1.15); }
}

/* Shared metallic base: layers a moving diagonal highlight band on top
   of the existing solid/gradient gold background via background-blend. */
.btn.btn-primary,
.header .btn-getstarted,
.about .content .btn-primary,
.pricing-badge {
  background-image:
    linear-gradient(
      100deg,
      transparent 30%,
      rgba(255, 255, 255, 0.55) 48%,
      rgba(255, 255, 255, 0.55) 52%,
      transparent 70%
    ),
    linear-gradient(135deg, var(--accent-color-light), var(--accent-color) 55%, var(--accent-color-dark));
  background-size: 250% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: -150% 0, 0 0;
  animation: gold-sheen-sweep 4.5s ease-in-out infinite;
  background-color: var(--accent-color);
}

/* Icon badges get the sweep AND a gentle brightness pulse together —
   declared as one combined animation so stagger delays below apply
   to both layers correctly. */
.services .service-icon,
.why-us .feature-card .icon-wrapper {
  background-image:
    linear-gradient(
      100deg,
      transparent 30%,
      rgba(255, 255, 255, 0.55) 48%,
      rgba(255, 255, 255, 0.55) 52%,
      transparent 70%
    ),
    linear-gradient(135deg, var(--accent-color-light), var(--accent-color) 55%, var(--accent-color-dark));
  background-size: 250% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: -150% 0, 0 0;
  background-color: var(--accent-color);
  animation: gold-sheen-sweep 4.5s ease-in-out infinite, gold-icon-shimmer 3s ease-in-out infinite;
}

/* Stagger so a whole grid of icons doesn't flash in unison.
   Sets animation-delay only — combines with the shorthand above
   since it's declared afterward and only touches one sub-property. */
.services .col-lg-4:nth-child(2) .service-icon,
.services .col-lg-4:nth-child(5) .service-icon { animation-delay: 0.8s, 0.8s; }
.services .col-lg-4:nth-child(3) .service-icon,
.services .col-lg-4:nth-child(6) .service-icon { animation-delay: 1.6s, 1.6s; }
.services .col-lg-4:nth-child(4) .service-icon { animation-delay: 2.4s, 2.4s; }

.why-us .row > div:nth-child(2) .icon-wrapper { animation-delay: 0.8s, 0.8s; }
.why-us .row > div:nth-child(3) .icon-wrapper { animation-delay: 1.6s, 1.6s; }

/* Outline buttons and portfolio hover-action buttons turn into the same
   metallic fill only on hover, since they're meant to read as secondary
   at rest. */
.btn.btn-outline:hover,
.portfolio .action-btn:hover,
.contact .contact-info-area .method-card:hover .card-icon {
  background-image:
    linear-gradient(
      100deg,
      transparent 30%,
      rgba(255, 255, 255, 0.5) 48%,
      rgba(255, 255, 255, 0.5) 52%,
      transparent 70%
    ),
    linear-gradient(135deg, var(--accent-color-light), var(--accent-color) 55%, var(--accent-color-dark));
  background-size: 250% 100%, 100% 100%;
  background-position: -150% 0, 0 0;
  animation: gold-sheen-sweep 4.5s ease-in-out infinite;
}

/* Pricing badge gets a slightly faster, tighter sweep since it's small */
.pricing-badge {
  background-size: 220% 100%, 100% 100%;
  animation-duration: 3.2s;
}

@media (prefers-reduced-motion: reduce) {
  .btn.btn-primary,
  .header .btn-getstarted,
  .about .content .btn-primary,
  .services .service-icon,
  .pricing-badge,
  .why-us .feature-card .icon-wrapper,
  .btn.btn-outline:hover,
  .portfolio .action-btn:hover,
  .contact .contact-info-area .method-card:hover .card-icon {
    animation: none !important;
    background-position: 0 0 !important;
  }
}



.btn.btn-primary,
.btn.btn-outline,
.header .btn-getstarted {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn.btn-primary::after,
.btn.btn-outline::after,
.header .btn-getstarted::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 1;
}

.btn.btn-primary:hover::after,
.btn.btn-outline:hover::after,
.header .btn-getstarted:hover::after {
  left: 130%;
}

/* ---- Ambient glow pulse behind hero background shapes ---- */
.hero .hero-bg-elements .bg-shape {
  animation-name: rotate, gold-pulse;
  animation-duration: inherit, 5s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
}

@keyframes gold-pulse {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}

/* ---- Nav link underline animation ---- */
#navmenu ul li a {
  position: relative;
}

#navmenu ul li a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1.5px;
  background: var(--accent-color);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#navmenu ul li a:hover::before,
#navmenu ul li a.active::before {
  width: 100%;
}

/* ---- Smoother, slightly stronger card lift with soft gold glow ---- */
.services .service-card,
.testimonials .testimonial-card,
.contact .contact-info-area .method-card,
.portfolio-item {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease;
}

.services .service-card:hover,
.testimonials .testimonial-card:hover,
.contact .contact-info-area .method-card:hover {
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25),
              0 0 0 1px color-mix(in srgb, var(--accent-color), transparent 75%);
}

/* ---- Service icon micro rotation on hover (adds energy without being silly) ---- */
.services .service-card:hover .service-icon {
  transform: scale(1.12) rotate(-4deg);
}

/* ---- Animated counter number style (used by JS-driven count-up) ---- */
.stat-number[data-animate-count],
.stats-item h3[data-animate-count] {
  display: inline-block;
  min-width: 1ch;
}

/* ---- Scroll-reveal fallback for elements without AOS (progressive enhancement) ---- */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Subtle gold text-shadow glow on hero heading for extra polish ---- */
.hero .hero-content h1 {
  text-shadow: 0 0 30px color-mix(in srgb, var(--accent-color), transparent 85%);
}

/* ---- Sticky header gets a slightly stronger shadow once scrolled (JS toggles .scrolled) ---- */
.header.scrolled .header-container {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

/* ---- Pricing section ---- */
.pricing-card {
  background: var(--surface-color);
  border-radius: 20px;
  padding: 40px 32px;
  height: 100%;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease;
  display: flex;
  flex-direction: column;
}

.pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25),
              0 0 0 1px color-mix(in srgb, var(--accent-color), transparent 75%);
}

.pricing-card.pricing-featured {
  border: 2px solid var(--accent-color);
}

.pricing-badge {
  position: absolute;
  top: -13px;
  left: 32px;
  background: var(--accent-color);
  color: #0A0A0F;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 999px;
}

.pricing-tier {
  font-size: 15px;
  font-weight: 600;
  color: var(--default-color);
  margin-bottom: 8px;
}

.pricing-amount {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 4px;
}

.pricing-desc {
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 24px;
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px 0;
  flex-grow: 1;
}

.pricing-features li {
  font-size: 13.5px;
  color: var(--default-color);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
}

.pricing-features li i {
  color: var(--accent-color);
  font-size: 15px;
  margin-top: 1px;
  flex-shrink: 0;
}

.pricing-card .btn {
  align-self: flex-start;
  padding: 11px 26px;
  font-size: 14px;
}


/* ---- Inline field validation errors on the contact form ---- */
.field-error {
  color: #E24B4A;
  font-size: 12.5px;
  margin-top: 4px;
  min-height: 14px;
}

.php-email-form select.form-control {
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--surface-color), white 2%);
}


/* ---- Respect reduced motion preferences ---- */
@media (prefers-reduced-motion: reduce) {
  .btn.btn-primary::after,
  .btn.btn-outline::after,
  .header .btn-getstarted::after,
  .hero .hero-bg-elements .bg-shape,
  .reveal-on-scroll {
    animation: none !important;
    transition: none !important;
  }
}