/* ============================================================
   PlumberPro Aura — extreme elegance layer
   Apple-ish depth · glass · water caustics · spring motion
   Loaded after pp-motion.css. Additive only.
   ============================================================ */

:root {
  --aura-rose: #e11d48;
  --aura-rose-soft: #fb7185;
  --aura-ink: #0b1220;
  --aura-mist: #fff7f8;
  --aura-glass: rgba(255, 255, 255, 0.62);
  --aura-glass-line: rgba(255, 255, 255, 0.72);
  --aura-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --aura-spring-soft: cubic-bezier(0.34, 1.56, 0.64, 1);
  --aura-shadow-1: 0 1px 2px rgba(11, 18, 32, 0.06), 0 2px 6px rgba(11, 18, 32, 0.05);
  --aura-shadow-2: 0 2px 6px rgba(11, 18, 32, 0.06), 0 10px 24px rgba(11, 18, 32, 0.09), 0 30px 60px rgba(225, 29, 72, 0.07);
  --aura-shadow-3: 0 4px 12px rgba(11, 18, 32, 0.08), 0 20px 48px rgba(11, 18, 32, 0.14), 0 48px 90px rgba(225, 29, 72, 0.12);
  --aura-inner: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(255, 255, 255, 0.22);
}

/* Let the ambient field show through opaque page backgrounds */
html.pp-aura-on,
html.pp-aura-on body { background-color: transparent !important; }
html.pp-aura-on .zp-page { background: transparent !important; }

/* ── Ambient water field ───────────────────────────────────── */
.aura-field {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 12% -10%, #ffe4e6 0%, transparent 55%),
    radial-gradient(100% 80% at 100% 0%, #e0e7ff 0%, transparent 50%),
    radial-gradient(90% 70% at 50% 110%, #ffe4f0 0%, transparent 60%),
    linear-gradient(180deg, #fffafb 0%, #fff7f8 40%, #fef2f6 100%);
}
.aura-field__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  mix-blend-mode: multiply;
  will-change: transform;
}
.aura-field__blob--a { width: 46vw; height: 46vw; left: -8vw; top: -6vw; background: radial-gradient(circle at 30% 30%, #fda4af, #e11d48 60%, transparent 72%); animation: auraDriftA 26s var(--aura-spring) infinite alternate; }
.aura-field__blob--b { width: 38vw; height: 38vw; right: -6vw; top: 4vw; background: radial-gradient(circle at 60% 40%, #a5b4fc, #6366f1 60%, transparent 72%); animation: auraDriftB 32s var(--aura-spring) infinite alternate; }
.aura-field__blob--c { width: 52vw; height: 52vw; left: 22vw; bottom: -22vw; background: radial-gradient(circle at 50% 50%, #fbcfe8, #fb7185 55%, transparent 70%); animation: auraDriftC 38s var(--aura-spring) infinite alternate; }
.aura-field__caustics {
  position: absolute;
  inset: -30%;
  opacity: 0.32;
  background-image:
    repeating-radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.9) 0 2px, transparent 2px 26px),
    repeating-radial-gradient(circle at 78% 62%, rgba(255, 255, 255, 0.7) 0 3px, transparent 3px 34px);
  mix-blend-mode: soft-light;
  animation: auraCaustics 22s linear infinite;
  will-change: transform;
}
.aura-grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.55'/></svg>");
}
.aura-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 420px;
  height: 420px;
  margin: -210px 0 0 -210px;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(circle, rgba(225, 29, 72, 0.16) 0%, rgba(99, 102, 241, 0.1) 40%, transparent 68%);
  transition: opacity 400ms ease;
  will-change: transform;
}

@keyframes auraDriftA { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(6vw, 5vw, 0) scale(1.14); } }
@keyframes auraDriftB { from { transform: translate3d(0, 0, 0) scale(1.05); } to { transform: translate3d(-7vw, 6vw, 0) scale(0.92); } }
@keyframes auraDriftC { from { transform: translate3d(0, 0, 0) scale(0.95); } to { transform: translate3d(-5vw, -6vw, 0) scale(1.12); } }
@keyframes auraCaustics {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { transform: translate3d(3%, -4%, 0) rotate(8deg); }
}

/* ── Glass surfaces with specular light ────────────────────── */
.aura-glass,
.zp-search,
.zp-banner,
.zp-quote,
.aura-card {
  position: relative;
  background: var(--aura-glass);
  border: 1px solid var(--aura-glass-line);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow: var(--aura-shadow-2), var(--aura-inner);
}
.aura-glass::after,
.aura-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 38%);
  opacity: 0.9;
}
.aura-depth-1 { box-shadow: var(--aura-shadow-1), var(--aura-inner); }
.aura-depth-2 { box-shadow: var(--aura-shadow-2), var(--aura-inner); }
.aura-depth-3 { box-shadow: var(--aura-shadow-3), var(--aura-inner); }

/* ── Cards breathe on hover (Apple lift) ───────────────────── */
.market-service,
.plumber-card,
.booking-guide article,
.guide-grid article,
.history-card,
.zp-quote,
.aura-card {
  transition: transform 500ms var(--aura-spring), box-shadow 500ms var(--aura-spring), border-color 300ms ease;
  transform-style: preserve-3d;
  will-change: transform;
}
.market-service:hover,
.plumber-card:hover,
.booking-guide article:hover,
.guide-grid article:hover,
.history-card:hover {
  transform: translateY(-6px) scale(1.012);
  box-shadow: var(--aura-shadow-3), var(--aura-inner);
}

/* ── Liquid buttons: pointer sheen + ripple ────────────────── */
.liquid-btn,
.btn-primary,
.btn,
.text-button,
.zp-chip,
.zp-dock a,
.market-service,
.zp-quote,
.zp-banner,
.plumber-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-primary,
.liquid-btn {
  box-shadow: 0 6px 16px rgba(225, 29, 72, 0.28), 0 18px 40px rgba(225, 29, 72, 0.18), var(--aura-inner);
  transition: transform 260ms var(--aura-spring-soft), box-shadow 320ms var(--aura-spring);
}
.btn-primary:hover,
.liquid-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(225, 29, 72, 0.34), 0 30px 60px rgba(225, 29, 72, 0.24), var(--aura-inner);
}
.btn-primary:active,
.liquid-btn:active { transform: translateY(0) scale(0.985); }
.aura-sheen {
  position: absolute;
  inset: -40%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms ease;
  background: radial-gradient(circle at var(--sheen-x, 50%) var(--sheen-y, 50%), rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.18) 26%, transparent 56%);
}
.btn-primary:hover .aura-sheen,
.liquid-btn:hover .aura-sheen,
.zp-chip:hover .aura-sheen { opacity: 1; }
.aura-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.28) 45%, transparent 70%);
  animation: auraRipple 720ms var(--aura-spring) forwards;
}
@keyframes auraRipple {
  0% { transform: scale(0); opacity: 0.85; }
  100% { transform: scale(1); opacity: 0; }
}

/* ── Scroll reveal: blur → crisp, rise → settle ────────────── */
.reveal {
  opacity: 0;
  transform: translateY(26px) scale(0.985);
  filter: blur(10px);
  transition: opacity 800ms var(--aura-spring), transform 900ms var(--aura-spring), filter 800ms var(--aura-spring);
  will-change: opacity, transform, filter;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* ── Floating dock upgraded to floating glass slab ─────────── */
.zp-dock {
  background: rgba(15, 20, 32, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 30px rgba(11, 18, 32, 0.34), 0 40px 80px rgba(225, 29, 72, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  animation: auraDockFloat 6s ease-in-out infinite;
}
@keyframes auraDockFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-5px); }
}
.zp-dock a.active {
  background: linear-gradient(180deg, #fb7185, #e11d48 70%);
  box-shadow: 0 8px 20px rgba(225, 29, 72, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* ── Hero: liquid gradient + light sweep ───────────────────── */
.zp-hero {
  background: linear-gradient(140deg, #be123c 0%, #e11d48 34%, #fb7185 66%, #6366f1 130%);
  background-size: 200% 200%;
  animation: auraHeroFlow 16s ease-in-out infinite;
  box-shadow: 0 30px 70px rgba(190, 18, 60, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
@keyframes auraHeroFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.zp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.22) 46%, transparent 62%);
  transform: translateX(-120%);
  animation: auraSweep 7s var(--aura-spring) infinite;
}
@keyframes auraSweep {
  0% { transform: translateX(-120%); }
  55%, 100% { transform: translateX(120%); }
}
.zp-hero h1 {
  text-shadow: 0 2px 24px rgba(80, 7, 36, 0.35);
}

/* ── ETA map card: floating glass w/ live pulse ───────────── */
.pp-floating-card,
.zp-eta-card {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(26px) saturate(190%);
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  box-shadow: 0 20px 50px rgba(11, 18, 32, 0.28), 0 60px 110px rgba(225, 29, 72, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  animation: auraCardIn 560ms var(--aura-spring) both, auraFloat 5.5s ease-in-out 560ms infinite;
}
@keyframes auraCardIn {
  from { opacity: 0; transform: translateY(28px) scale(0.96); filter: blur(12px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes auraFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.pp-eta-hero b {
  background: linear-gradient(180deg, #fb7185, #be123c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: auraEtaPulse 2.4s ease-in-out infinite;
}
@keyframes auraEtaPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(225, 29, 72, 0)); }
  50% { transform: scale(1.04); filter: drop-shadow(0 6px 18px rgba(225, 29, 72, 0.35)); }
}

/* ── Text & numbers polish ─────────────────────────────────── */
h1, h2, h3, .zp-eta-time, .zp-eta-hero b {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.zp-quote-total strong,
.zp-eta-time {
  text-shadow: 0 1px 18px rgba(225, 29, 72, 0.28);
}

/* ── Skeletons shimmer like liquid ─────────────────────────── */
.service-skeleton,
.booking-skeleton,
.skeleton {
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.1) 20%, rgba(225, 29, 72, 0.12) 40%, rgba(255, 255, 255, 0.1) 60%);
  background-size: 320% 100%;
  animation: auraShimmer 1.8s ease-in-out infinite;
  border-radius: 18px;
}
@keyframes auraShimmer {
  0% { background-position: 160% 0; }
  100% { background-position: -60% 0; }
}

/* ── 3D tilt affordance ────────────────────────────────────── */
[data-tilt] {
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateZ(0);
  transition: transform 320ms var(--aura-spring), box-shadow 320ms var(--aura-spring);
}

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .aura-field__blob,
  .aura-field__caustics,
  .zp-dock,
  .zp-hero,
  .zp-hero::before,
  .pp-floating-card,
  .pp-eta-hero b,
  .service-skeleton,
  .booking-skeleton,
  .skeleton {
    animation: none !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .aura-cursor { display: none; }
}