/* =========================================================
   PGS 3D - Depth system
   Glass cards, multi-layer shadows, tilt prep, lit edges.
   ========================================================= */

.pgs3d-card {
  position: relative;
  background: var(--pgs-glass-bg);
  backdrop-filter: blur(var(--pgs-glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--pgs-glass-blur)) saturate(140%);
  border: 1px solid var(--pgs-glass-border);
  border-radius: var(--pgs-radius-lg);
  padding: var(--pgs-space-xl);
  box-shadow: var(--pgs-shadow-2);
  transition:
    transform 0.5s var(--pgs-ease-out-quart),
    box-shadow 0.5s var(--pgs-ease-out-quart);
  transform-style: preserve-3d;
  will-change: transform;
  isolation: isolate;
}

/* The lit edge - the load-bearing detail that makes glass read */
.pgs3d-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, 0) 65%,
    rgba(13, 148, 136, 0.28) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.pgs3d-card > * { position: relative; z-index: 2; }

.pgs3d-card:hover {
  box-shadow: var(--pgs-shadow-3);
}

/* Variants */
.pgs3d-card--tinted {
  background: var(--pgs-glass-bg-tinted);
}
.pgs3d-card--strong {
  background: var(--pgs-glass-bg-strong);
}
.pgs3d-card--featured {
  background: var(--pgs-glass-bg-strong);
  box-shadow: var(--pgs-shadow-glow);
  transform: translateZ(0);
}
.pgs3d-card--featured:hover {
  box-shadow:
    0 0 0 1px rgba(13, 148, 136, 0.28),
    0 14px 40px rgba(13, 148, 136, 0.25),
    0 32px 70px rgba(13, 148, 136, 0.14);
}
.pgs3d-card--dark {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.92);
}
.pgs3d-card--dark::before {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, 0) 65%,
    rgba(13, 148, 136, 0.35) 100%
  );
}

/* @supports fallback for browsers without backdrop-filter (old Firefox configs) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pgs3d-card { background: var(--pgs-glass-bg-strong); }
  .pgs3d-card--tinted { background: rgba(204, 251, 241, 0.75); }
  .pgs3d-card--dark { background: rgba(15, 23, 42, 0.94); }
}

/* Glass pill (count badges, small tags) */
.pgs3d-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--pgs-radius-pill);
  background: var(--pgs-glass-bg-strong);
  border: 1px solid var(--pgs-glass-border);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--pgs-primary-dark);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Icon chip (for deliverables, etc.) */
.pgs3d-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--pgs-radius-md);
  background:
    linear-gradient(135deg, rgba(204, 251, 241, 0.85) 0%, rgba(20, 184, 166, 0.18) 100%);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 6px 14px rgba(13, 148, 136, 0.18);
  color: var(--pgs-primary-dark);
}
.pgs3d-chip svg { width: 26px; height: 26px; }

/* Decorative parallax blob (svg or div with mesh bg) */
.pgs3d-blob {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.6;
  z-index: 1;
  will-change: transform;
}
.pgs3d-blob--teal {
  background: radial-gradient(circle, rgba(13,148,136,0.35) 0%, rgba(13,148,136,0) 70%);
}
.pgs3d-blob--mint {
  background: radial-gradient(circle, rgba(204,251,241,0.7) 0%, rgba(204,251,241,0) 70%);
}