/* ============================================================
   ROLODEX — Glass + ambient FX
   These are the signature surface treatments. Pair with
   colors_and_type.css.
   ============================================================ */

/* ---------- Glass panel — the soul of the design ---------- */
.glass {
  background: var(--glass-fill);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-2xl);
  position: relative;
  isolation: isolate;
}

/* Top-edge "meniscus" highlight — 1px masked gradient ring. */
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg,
              rgba(255, 255, 255, 0.18),
              rgba(255, 255, 255, 0.02) 30%,
              transparent 60%);
  -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;
}

.glass-hover {
  transition: transform var(--dur-slow) var(--ease-out-soft),
              box-shadow var(--dur-slow) var(--ease-out-soft),
              border-color var(--dur-slow) var(--ease-out-soft),
              background-color var(--dur-slow) var(--ease-out-soft);
}

.glass-hover:hover {
  background: var(--glass-fill-hover);
  border-color: var(--glass-border-hover);
  box-shadow: var(--shadow-halo-accent);
  transform: translateY(-2px);
}

/* Edge glint — cyan light bar revealed on top edge on hover. */
.edge-glint { position: relative; }
.edge-glint::after {
  content: '';
  position: absolute;
  top: 0; left: 14%; right: 14%;
  height: 1px;
  background: linear-gradient(90deg,
              transparent,
              rgba(110, 231, 255, 0.5),
              transparent);
  opacity: 0;
  transition: opacity 600ms ease;
}
.edge-glint:hover::after { opacity: 1; }

/* ---------- Film grain overlay ---------- */
.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Ambient bloom background ---------- */
.bg-fx {
  position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
}
.bg-fx::before {
  /* base vignetted gradient */
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at top, var(--bg-elevated) 0%, var(--bg-base) 60%);
}
.bg-fx::after {
  /* outer vignette */
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.55) 100%);
}
.bloom {
  position: absolute;
  border-radius: 9999px;
  filter: blur(40px);
}
.bloom--violet {
  top: -30%; right: -20%;
  width: 900px; height: 900px;
  background: radial-gradient(circle, var(--bloom-violet) 0%, transparent 60%);
  opacity: 0.6;
  animation: drift1 28s ease-in-out infinite;
}
.bloom--cyan {
  bottom: -30%; left: -20%;
  width: 1000px; height: 1000px;
  background: radial-gradient(circle, var(--bloom-cyan) 0%, transparent 60%);
  filter: blur(50px);
  opacity: 0.5;
  animation: drift2 32s ease-in-out infinite;
}
.bloom--indigo {
  top: 30%; left: 40%;
  width: 700px; height: 700px;
  background: radial-gradient(circle, var(--bloom-indigo) 0%, transparent 60%);
  filter: blur(60px);
  opacity: 0.4;
  animation: drift3 26s ease-in-out infinite;
}

/* ---------- Drift / pulse keyframes ---------- */
@keyframes drift1 {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50%     { transform: translate3d(40px,-30px,0) scale(1.08); }
}
@keyframes drift2 {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50%     { transform: translate3d(-30px,40px,0) scale(1.05); }
}
@keyframes drift3 {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50%     { transform: translate3d(20px,30px,0) scale(1.1); }
}
@keyframes pulseSoft {
  0%,100% { opacity: 0.5; }
  50%     { opacity: 1; }
}
.animate-pulse-soft { animation: pulseSoft 2.4s ease-in-out infinite; }

/* ---------- Scrollbar (dark) ---------- */
.rolodex-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.rolodex-scroll::-webkit-scrollbar-track { background: transparent; }
.rolodex-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.rolodex-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.12);
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* ---------- Util: tnum ---------- */
.tnum { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* ---------- Status pill base ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  border: 1px solid var(--glass-border);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
}
.pill .pill-dot {
  width: 6px; height: 6px; border-radius: 9999px;
}
.pill--prospect    { background: var(--status-prospect-bg);    color: var(--status-prospect-fg); }
.pill--prospect    .pill-dot { background: var(--status-prospect-dot); }
.pill--qualified   { background: var(--status-qualified-bg);   color: var(--status-qualified-fg); }
.pill--qualified   .pill-dot { background: var(--status-qualified-dot); }
.pill--proposal    { background: var(--status-proposal-bg);    color: var(--status-proposal-fg); }
.pill--proposal    .pill-dot { background: var(--status-proposal-dot); }
.pill--negotiation { background: var(--status-negotiation-bg); color: var(--status-negotiation-fg); }
.pill--negotiation .pill-dot { background: var(--status-negotiation-dot); }
.pill--won         { background: var(--status-won-bg);         color: var(--status-won-fg); }
.pill--won         .pill-dot { background: var(--status-won-dot); }
.pill--lost        { background: var(--status-lost-bg);        color: var(--status-lost-fg); }
.pill--lost        .pill-dot { background: var(--status-lost-dot); }

/* ---------- Hero gradient text ---------- */
.text-gradient {
  background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.65) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}