/**
 * NeoVTO — Swatch Finish Overlays
 * =================================
 * Blinn-Phong sphere-shading overlays for each CMS rendering finish type,
 * plus palette grid separators and inner shadow.
 *
 * Targets any <button> carrying [data-finish] / [data-colors] — works for
 * both the standalone demo page (.color-swatch) and the Angular VTO app
 * (.swatch-circle) without duplication.
 *
 * Shared light direction: upper-left L = [−0.48, −0.62, 0.62]
 * Viewer direction: V = [0, 0, 1] (orthographic)
 * Half-vector H = normalize(L + V) ≈ [−0.267, −0.344, 0.900]
 * → specular peak in CSS coords: (37%, 33%) from top-left
 *
 * I = ambient·Ka + diffuse·Kd·(N·L) + specular·Ks·(N·H)^shininess
 */

/* ── Shared base ─────────────────────────────────────────────────────── */
button[data-finish]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* ── Palette grid separators ─────────────────────────────────────────── */

/* Inner shadow so swatches read as physical objects */
button[data-colors] {
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.1),
    inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Hairline grid overlay (decorative on 1-color, dividers on 4-color) */
button[data-colors]::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(
      to right,
      transparent calc(50% - 0.5px),
      rgba(255, 255, 255, 0.3) calc(50% - 0.5px),
      rgba(255, 255, 255, 0.3) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)
    ),
    linear-gradient(
      to bottom,
      transparent calc(50% - 0.5px),
      rgba(255, 255, 255, 0.3) calc(50% - 0.5px),
      rgba(255, 255, 255, 0.3) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)
    );
}

/* 2-color: vertical divider only */
button[data-colors='2']::before {
  background: linear-gradient(
    to right,
    transparent calc(50% - 0.5px),
    rgba(255, 255, 255, 0.3) calc(50% - 0.5px),
    rgba(255, 255, 255, 0.3) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
}

/* 3-color: horizontal divider full-width + vertical divider in bottom half only */
button[data-colors='3']::before {
  background:
    linear-gradient(
        to right,
        transparent calc(50% - 0.5px),
        rgba(255, 255, 255, 0.3) calc(50% - 0.5px),
        rgba(255, 255, 255, 0.3) calc(50% + 0.5px),
        transparent calc(50% + 0.5px)
      )
      0 100% / 100% 50% no-repeat,
    linear-gradient(
      to bottom,
      transparent calc(50% - 0.5px),
      rgba(255, 255, 255, 0.3) calc(50% - 0.5px),
      rgba(255, 255, 255, 0.3) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)
    );
}

/* ── Glossy ───────────────────────────────────────────────────────────
   Lipgloss Classic / Plumper / Oil — gel-gloss jelly texture
   ref: rgb(222,138,154) · rounded-rect r=14px

   Layers (back → front):
     1. Edge depth   radial vignette centre→rim   rgba(0,0,0, 0→.22)
     2. Gel tint     +12% white → translucent body quality
     3. Top sheen    linear top→mid  rgba(255,255,255, .20→0)
     4. Specular bloom  scale(2.8, 1.6)  soft glow @ 46% 30%
     5. Specular core   scale(1.55, 1.0) tight oval @ 46% 30%
─────────────────────────────────────────────────────────────────────── */
button[data-finish='glossy']::after {
  background:
    /* Specular core — sharp intense oval (glass-tight falloff) */
    radial-gradient(
      ellipse 14% 9% at 46% 30%,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0.68) 20%,
      transparent 52%
    ),
    /* Specular bloom — wide halo */
    radial-gradient(
        ellipse 42% 26% at 46% 30%,
        rgba(255, 255, 255, 0.36) 0%,
        rgba(255, 255, 255, 0.12) 48%,
        transparent 72%
      ),
    /* Top sheen — strong glass reflection band */
    linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.34) 0%,
        rgba(255, 255, 255, 0.1) 38%,
        transparent 60%
      ),
    /* Bottom secondary — inner light bounce characteristic of glass */
    radial-gradient(
        ellipse 68% 28% at 50% 94%,
        rgba(255, 255, 255, 0.14) 0%,
        transparent 68%
      ),
    /* Gel base tint — +12% white */
    linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12));
}

/* ── Shimmer ──────────────────────────────────────────────────────────
   Lipstick Shimmer / eyeshadow *-Shimmer
   shininess: 18  specular: 0.32  ambient: 0.50  diffuse: 0.42
   Broad soft highlight + cross-hatched micro-pearl layer
─────────────────────────────────────────────────────────────────────── */
button[data-finish='shimmer']::after {
  background:
    repeating-linear-gradient(
      60deg,
      transparent 0px,
      transparent 2px,
      rgba(255, 255, 255, 0.13) 3px,
      transparent 4px
    ),
    repeating-linear-gradient(
      -60deg,
      transparent 0px,
      transparent 2px,
      rgba(255, 255, 255, 0.1) 3px,
      transparent 4px
    ),
    radial-gradient(
      ellipse 48% 42% at 37% 33%,
      rgba(255, 255, 255, 0.32) 0%,
      rgba(255, 255, 255, 0.1) 50%,
      transparent 75%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.12) 0%,
      transparent 40%,
      rgba(0, 0, 0, 0.08) 100%
    );
}

/* ── Glitter ──────────────────────────────────────────────────────────
   Canvas-generated hash-facet texture set via --glitter-url by
   applyGlitterTextures() (neovto-finish-overlays.js / glitter-canvas.util.ts).
   Tiled at 72 CSS px so it never stretches regardless of swatch size.
─────────────────────────────────────────────────────────────────────── */
button[data-finish='glitter']::after {
  background-image: var(--glitter-url);
  background-size: 72px 72px;
  background-repeat: repeat;
}

button[data-colors][data-finish='glitter']::after {
  opacity: 0.65;
  mix-blend-mode: overlay;
}

/* ── Metallic ─────────────────────────────────────────────────────────
   shininess: 250  specular: 0.88  ambient: 0.25  diffuse: 0.50
   Anisotropic mirror-band: extreme bright-to-dark contrast
─────────────────────────────────────────────────────────────────────── */
button[data-finish='metallic']::after {
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.52) 16%,
    rgba(255, 255, 255, 0.06) 34%,
    rgba(0, 0, 0, 0.08) 52%,
    rgba(0, 0, 0, 0.32) 100%
  );
}

/* ── Satin ────────────────────────────────────────────────────────────
   ref: #C48870 · sphere · shininess: 8  specular: 0.22
   ambient: 0.46  diffuse: 0.50
   Half-angle at half-max ≈ 23.6° → slightly tighter spot than shin=7
─────────────────────────────────────────────────────────────────────── */
button[data-finish='satin']::after {
  background:
    radial-gradient(
      ellipse 50% 46% at 37% 33%,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.07) 52%,
      transparent 76%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.14) 0%,
      transparent 36%,
      rgba(0, 0, 0, 0.13) 100%
    );
}

/* ── Matte ────────────────────────────────────────────────────────────
   shininess: 1  specular: 0.03  Near-zero specular, slight shadow only
─────────────────────────────────────────────────────────────────────── */
button[data-finish='matte']::after {
  background: linear-gradient(135deg, transparent 40%, rgba(0, 0, 0, 0.1) 100%);
}

/* ── Luminous ─────────────────────────────────────────────────────────
   Blusher Luminous / Lip & Cheek Glow Tint / Foundation Dewy
   shininess: 28  specular: 0.20  ambient: 0.62  High ambient → centre radiance
─────────────────────────────────────────────────────────────────────── */
button[data-finish='luminous']::after {
  background:
    radial-gradient(
      circle at 48% 44%,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.2) 32%,
      transparent 62%
    ),
    radial-gradient(
      ellipse 72% 58% at 35% 30%,
      rgba(255, 255, 255, 0.18) 0%,
      transparent 60%
    );
}