/**
 * Area33-KC shared liquid glass polish
 * Brand-adaptive: maps --green / --amber / --accent / --blue / --red / --brand
 * Safe for dark client sites (Bagster, Contraband, Jax's, WH Trucking).
 */

:root {
  --liquid-a: var(--green, var(--amber, var(--accent, var(--blue, var(--red, var(--brand, #3dffa8))))));
  --liquid-b: var(--blue, var(--gold, var(--amber-hover, var(--chrome, var(--brand-hover, #4dcfff)))));
  --liquid-c: var(--purple, var(--red-dark, var(--amber, var(--gold, #c47dff))));
  --liquid-dark: var(--darker, var(--dark, var(--bg, var(--black, #10141c))));
  --liquid-surface: var(--surface, var(--card, var(--dark-mid, #1a1a1a)));
}

/* ── Ambient mesh ── */
body::after {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 45% 40% at 18% 22%, color-mix(in srgb, var(--liquid-a) 16%, transparent) 0%, transparent 55%),
    radial-gradient(ellipse 40% 38% at 82% 18%, color-mix(in srgb, var(--liquid-b) 12%, transparent) 0%, transparent 52%),
    radial-gradient(ellipse 50% 42% at 70% 78%, color-mix(in srgb, var(--liquid-c) 10%, transparent) 0%, transparent 55%),
    radial-gradient(ellipse 35% 30% at 12% 72%, color-mix(in srgb, var(--liquid-a) 7%, transparent) 0%, transparent 50%);
  filter: blur(48px) saturate(1.12);
  opacity: 0.8;
  animation: liquid-ambient 22s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes liquid-ambient {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2%, -1.5%, 0) scale(1.04); }
  100% { transform: translate3d(-1.5%, 2%, 0) scale(1.02); }
}

nav, header, main, section, footer, .hero, .footer,
.section-wrap, .form-section, .faq-section {
  position: relative;
  z-index: 1;
}

/* ── Hero liquid field ── */
.liquid-field {
  position: absolute;
  inset: -8% -4%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero,
.hero-banner,
section.hero {
  position: relative;
  overflow: hidden;
}

.hero > *:not(.liquid-field),
section.hero > *:not(.liquid-field) {
  position: relative;
  z-index: 2;
}

.liquid-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(56px);
  opacity: 0.5;
  mix-blend-mode: screen;
  will-change: transform;
}

.liquid-blob.b1 {
  width: min(58vw, 480px);
  height: min(58vw, 480px);
  left: 50%;
  top: 45%;
  translate: -50% -50%;
  background:
    radial-gradient(circle at 35% 35%,
      color-mix(in srgb, var(--liquid-a) 52%, white) 0%,
      color-mix(in srgb, var(--liquid-a) 22%, transparent) 42%,
      transparent 70%);
  animation: blob-drift-a 14s ease-in-out infinite;
}

.liquid-blob.b2 {
  width: min(46vw, 400px);
  height: min(46vw, 400px);
  left: 18%;
  top: 60%;
  background:
    radial-gradient(circle at 40% 40%,
      color-mix(in srgb, var(--liquid-b) 48%, white) 0%,
      color-mix(in srgb, var(--liquid-b) 20%, transparent) 45%,
      transparent 72%);
  animation: blob-drift-b 18s ease-in-out infinite;
}

.liquid-blob.b3 {
  width: min(40vw, 360px);
  height: min(40vw, 360px);
  right: 10%;
  top: 26%;
  background:
    radial-gradient(circle at 45% 40%,
      color-mix(in srgb, var(--liquid-c) 45%, white) 0%,
      color-mix(in srgb, var(--liquid-c) 18%, transparent) 48%,
      transparent 72%);
  animation: blob-drift-c 16s ease-in-out infinite;
}

@keyframes blob-drift-a {
  0%, 100% { transform: translate(-4%, -2%) scale(1); }
  33%      { transform: translate(6%, 4%) scale(1.08); }
  66%      { transform: translate(-2%, 8%) scale(0.96); }
}
@keyframes blob-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1.05); }
  50%      { transform: translate(12%, -10%) scale(0.92); }
}
@keyframes blob-drift-c {
  0%, 100% { transform: translate(0, 0) scale(0.95); }
  40%      { transform: translate(-14%, 8%) scale(1.1); }
  75%      { transform: translate(6%, -6%) scale(1.02); }
}

/* ── Glass nav / header ── */
nav, header {
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}

/* ── Glass cards ── */
.service-card,
.card,
.proof-chip,
.trust-badge,
.faq-item,
details.faq-item {
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

.service-card {
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--liquid-a) 9%, transparent) 0%,
      color-mix(in srgb, var(--liquid-surface) 70%, transparent) 55%,
      color-mix(in srgb, var(--liquid-c) 5%, transparent) 100%
    ) !important;
  border: 1px solid color-mix(in srgb, var(--liquid-a) 24%, transparent) !important;
  border-radius: 14px !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 12px 32px rgba(0, 0, 0, 0.22);
  transition:
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.service-card:hover {
  border-color: color-mix(in srgb, var(--liquid-a) 48%, transparent) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--liquid-a) 14%, transparent) inset,
    0 18px 48px rgba(0, 0, 0, 0.32),
    0 0 42px color-mix(in srgb, var(--liquid-a) 12%, transparent) !important;
  transform: translateY(-3px);
}

/* ── Liquid buttons ── */
.btn,
.btn-primary,
a.btn-primary,
button.btn-primary {
  position: relative;
  overflow: hidden;
  border-radius: 999px !important;
  transition: transform 0.25s ease, box-shadow 0.3s ease !important;
}

.btn::after,
.btn-primary::after,
a.btn-primary::after,
button.btn-primary::after {
  content: "";
  position: absolute;
  inset: -40% -20%;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.14) 48%,
    transparent 62%
  );
  transform: translateX(-60%) rotate(8deg);
  transition: transform 0.55s ease;
  pointer-events: none;
}

.btn:hover::after,
.btn-primary:hover::after,
a.btn-primary:hover::after,
button.btn-primary:hover::after {
  transform: translateX(40%) rotate(8deg);
}

.btn:hover,
.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover {
  transform: translateY(-1px);
}

.btn-primary,
a.btn-primary,
button.btn-primary {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--liquid-a) 18%, transparent) inset,
    0 8px 26px color-mix(in srgb, var(--liquid-a) 22%, transparent) !important;
}

/* Section headings glow */
.section-heading,
.section-title,
.pillar-title {
  text-shadow: 0 0 24px color-mix(in srgb, var(--liquid-a) 18%, transparent);
}

/* Soft liquid divider where sites use stripes */
.section-stripe {
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--liquid-a) 55%, transparent) 35%,
    color-mix(in srgb, var(--liquid-b) 40%, transparent) 65%,
    transparent 100%
  ) !important;
  opacity: 0.9;
}

/* Form / about panels */
.form-section,
.services-overview,
.about-panel {
  border-radius: 14px;
}

/* Inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
  border-radius: 10px;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  body::after,
  .liquid-blob {
    animation: none !important;
  }
  .service-card:hover {
    transform: none;
  }
  .btn::after,
  .btn-primary::after,
  a.btn-primary::after,
  button.btn-primary::after {
    display: none;
  }
}

@media (max-width: 720px) {
  body::after {
    filter: blur(32px);
    opacity: 0.65;
    animation-duration: 28s;
  }
  .liquid-blob {
    filter: blur(40px);
    opacity: 0.4;
  }
  .service-card,
  nav, header {
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
  }
}

/* Sites that use .hero-text as the hero block */
.hero-text {
  position: relative;
  overflow: hidden;
}
.hero-text > *:not(.liquid-field) {
  position: relative;
  z-index: 1;
}

/* Click-through fix: decorative layers never steal pointer events.
   Hero content must sit above site-specific .hero::after overlays (z-index:1). */
.liquid-field,
.liquid-blob,
body::after {
  pointer-events: none !important;
}

.hero::after,
section.hero::after,
.hero-text::after,
#hero::before {
  pointer-events: none !important;
}

.hero > *:not(.liquid-field),
section.hero > *:not(.liquid-field),
.hero-text > *:not(.liquid-field),
#hero > *:not(.liquid-field):not(#sonar):not(.signal-ring) {
  position: relative;
  z-index: 2 !important;
}

.hero .cta-group,
.hero .cta-group a,
.hero a.btn,
.hero .btn,
.cta-group,
.cta-group a,
.cta-row,
.cta-row a {
  position: relative;
  z-index: 3 !important;
  pointer-events: auto !important;
}