/* ════════════════════════════════════════════════════════════════
   PULSAR-RH · Surface treatments
   ════════════════════════════════════════════════════════════════
   Minimalist textures and innovations applied OVER flat surfaces.
   Each utility is non-invasive: subtle by default, opt-in by class.
   Combine freely — most are designed to layer.
   ══════════════════════════════════════════════════════════════ */

/* ── 1. GRAIN · film noise overlay
   Subtle 1% noise to remove "perfectly flat" feel.
   Apply to card surfaces. */
.surf-grain {
  position: relative;
}
.surf-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: .35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ── 2. DOT GRID · background pattern
   Subtle dot lattice as page or panel bg. */
.surf-dots {
  background-image: radial-gradient(circle, rgba(122, 155, 196, 0.08) 1px, transparent 1px);
  background-size: 16px 16px;
}
.surf-dots-violet {
  background-image: radial-gradient(circle, rgba(112, 72, 232, 0.12) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* ── 3. CORNER GLOW · radial gradient in one corner
   Use top-right by default; signature treatment on KPI cards. */
.surf-glow-tr {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.surf-glow-tr::before {
  content: '';
  position: absolute;
  top: -70px; right: -70px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(112, 72, 232, 0.09) 0%, transparent 70%);
  pointer-events: none;
  border-radius: 50%;
  z-index: 0;
  filter: blur(20px);
}
.surf-glow-tr.accent::before  { background: radial-gradient(circle, rgba(8, 193, 106, 0.08)   0%, transparent 70%); }
.surf-glow-tr.warn::before    { background: radial-gradient(circle, rgba(255, 188, 125, 0.08)  0%, transparent 70%); }
.surf-glow-tr.danger::before  { background: radial-gradient(circle, rgba(255, 92, 92, 0.08)   0%, transparent 70%); }
.surf-glow-tr > * { position: relative; z-index: 1; }

/* ── 4. INNER HIGHLIGHT · subtle 1px top gloss
   Adds depth illusion without box-shadow. */
.surf-glossy {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
              inset 0 0 0 1px var(--border);
}
.surf-glossy-strong {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
              inset 0 -1px 0 rgba(0, 0, 0, 0.2),
              inset 0 0 0 1px var(--border);
}

/* ── 5. WATERMARK NUMBER · huge faded number as texture */
.surf-watermark {
  position: relative;
  overflow: hidden;
}
.surf-watermark > [data-wm] {
  position: absolute;
  bottom: -28px; right: -10px;
  font-size: 140px;
  font-weight: 900;
  line-height: 1;
  color: var(--fg);
  opacity: 0.025;
  letter-spacing: -8px;
  pointer-events: none;
  user-select: none;
  font-variant-numeric: tabular-nums;
}

/* ── 6. SPOTLIGHT HOVER · mouse-following radial gradient
   Requires JS to set --mx / --my from mousemove. Drop on .surf-spotlight. */
.surf-spotlight {
  position: relative;
  isolation: isolate;
}
.surf-spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(112, 72, 232, 0.08),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 350ms var(--ease-ambient, ease);
  pointer-events: none;
  z-index: 0;
}
.surf-spotlight:hover::before { opacity: 1; }
.surf-spotlight > * { position: relative; z-index: 1; }

/* ── 7. GRADIENT MESH · multi-stop organic blobs as bg
   Use on hero / login / empty states. */
.surf-mesh {
  background-color: var(--bg);
  background-image:
    radial-gradient(at 18% 22%, rgba(112, 72, 232, 0.12) 0px, transparent 50%),
    radial-gradient(at 82% 18%, rgba(165, 94, 255, 0.08) 0px, transparent 50%),
    radial-gradient(at 22% 78%, rgba(112, 72, 232, 0.06) 0px, transparent 50%);
}
.surf-mesh-light {
  background-color: var(--bg);
  background-image:
    radial-gradient(at 20% 25%, rgba(112, 72, 232, 0.12) 0px, transparent 50%),
    radial-gradient(at 80% 80%, rgba(165, 94, 255, 0.10) 0px, transparent 50%);
}

/* ── 8. CORNER MARKS · L-bracket decorations (4 corners)
   Tiny line accents to frame focal cards. */
.surf-corners {
  position: relative;
}
.surf-corners > [data-corners]::before,
.surf-corners > [data-corners]::after,
.surf-corners::before,
.surf-corners::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid var(--pulsar-primary);
  pointer-events: none;
  opacity: .55;
}
.surf-corners::before {
  top: 8px; left: 8px;
  border-right: none; border-bottom: none;
  border-top-left-radius: 4px;
}
.surf-corners::after {
  bottom: 8px; right: 8px;
  border-left: none; border-top: none;
  border-bottom-right-radius: 4px;
}

/* ── 9. GRADIENT BORDER · faux border via padding + bg
   Use sparingly — for hero CTAs or featured cards. */
.surf-grad-border {
  position: relative;
  background: var(--surface);
  border-radius: 12px;
}
.surf-grad-border::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(112,72,232,.55), rgba(165,94,255,.05) 60%, transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* ── 10. RAIL ACCENT · thin vertical line at the start
   For list rows, kanban cards, indicator items. */
.surf-rail {
  position: relative;
  padding-left: 14px;
}
.surf-rail::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--pulsar-primary);
  border-radius: 2px;
}
.surf-rail.accent::before  { background: var(--pulsar-accent); }
.surf-rail.warn::before    { background: var(--state-warn); }
.surf-rail.danger::before  { background: var(--state-danger); }
.surf-rail.muted::before   { background: var(--fg-muted); opacity: .4; }

/* ── 11. SECTION DIVIDER · with mark in the middle */
.surf-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.surf-divider::before,
.surf-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}