/* Surface Textures — SVG filter-based procedural textures for .lit elements */

/* ═══ Surface Texture Overlays ═══ */
/* Applied via data-texture attribute. Each texture uses a CSS background-image
   overlay on the element itself (not ::before, which is used by the light system).
   Textures are subtle — they modulate light interaction, not dominate the visual. */

.lit[data-texture="linen"] {
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65 0.45' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)' opacity='0.35'/%3E%3C/svg%3E"),
    var(--surface-base-bg, none);
  background-size: 200px 200px, auto;
  background-blend-mode: overlay;
}

.lit[data-texture="concrete"] {
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.35' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)' opacity='0.45'/%3E%3C/svg%3E"),
    var(--surface-base-bg, none);
  background-size: 200px 200px, auto;
  background-blend-mode: overlay;
}

.lit[data-texture="brushed"] {
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.6' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)' opacity='0.3'/%3E%3C/svg%3E"),
    var(--surface-base-bg, none);
  background-size: 200px 200px, auto;
  background-blend-mode: overlay;
}

.lit[data-texture="glass"] {
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)' opacity='0.1'/%3E%3C/svg%3E"),
    var(--surface-base-bg, none);
  background-size: 200px 200px, auto;
  background-blend-mode: overlay;
}

.lit[data-texture="paper"] {
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)' opacity='0.25'/%3E%3C/svg%3E"),
    var(--surface-base-bg, none);
  background-size: 200px 200px, auto;
  background-blend-mode: overlay;
}

/* No texture */
.lit[data-texture="none"] {
  background-image: var(--surface-base-bg, none);
}

/* Light theme: use multiply blend for better visibility on light backgrounds */
[data-theme="light"] .lit[data-texture="linen"],
[data-theme="light"] .lit[data-texture="concrete"],
[data-theme="light"] .lit[data-texture="brushed"],
[data-theme="light"] .lit[data-texture="glass"],
[data-theme="light"] .lit[data-texture="paper"] {
  background-blend-mode: multiply;
}

/* Light theme: boost texture contrast since multiply can wash out */
[data-theme="light"] .lit[data-texture="concrete"] {
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.35' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)' opacity='0.6'/%3E%3C/svg%3E"),
    var(--surface-base-bg, none);
}
[data-theme="light"] .lit[data-texture="linen"] {
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65 0.45' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)' opacity='0.5'/%3E%3C/svg%3E"),
    var(--surface-base-bg, none);
}

/* ═══ Roughness & Bump Modulation ═══ */

.lit {
  --surface-roughness: 0.3;
  --surface-bump: 0;
  --bump-shadow: none;
  --depth-shadow: none;
}

/* Bump shadow — adds subtle 3D relief from bump slider */
.lit {
  box-shadow: var(--bump-shadow, none), var(--depth-shadow, none);
}

/* ═══ Normal Profile Visual Hints ═══ */
/* Normal profiles add subtle visual cues beyond what the light engine computes */

/* Convex: subtle inner shadow suggesting a raised surface */
.lit[data-normal="convex"] {
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.04), inset 0 -1px 3px rgba(0, 0, 0, 0.08);
}

/* Concave: inverted inner shadow */
.lit[data-normal="concave"] {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.12), inset 0 -1px 2px rgba(255, 255, 255, 0.03);
}

/* Beveled: edge highlight on all sides */
.lit[data-normal="beveled"] {
  border-image: linear-gradient(
    var(--lit-gradient-angle, 135deg),
    rgba(255, 255, 255, calc(var(--normal-edge-top, 0) * 0.15)) 0%,
    rgba(255, 255, 255, calc(var(--normal-edge-right, 0) * 0.15)) 25%,
    rgba(255, 255, 255, calc(var(--normal-edge-bottom, 0) * 0.15)) 50%,
    rgba(255, 255, 255, calc(var(--normal-edge-left, 0) * 0.15)) 75%,
    rgba(255, 255, 255, calc(var(--normal-edge-top, 0) * 0.15)) 100%
  ) 1;
}

/* Spherical: subtle radial shadow for depth */
.lit[data-normal="spherical"] {
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.06);
  border-radius: 50%;
}

/* Cylindrical: horizontal highlight band */
.lit[data-normal="cylindrical"] {
  box-shadow: inset 0 0 8px 2px rgba(0, 0, 0, 0.04);
}

/* Light theme normal adjustments */
[data-theme="light"] .lit[data-normal="convex"] {
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.3), inset 0 -1px 3px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .lit[data-normal="concave"] {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.06), inset 0 -1px 2px rgba(255, 255, 255, 0.15);
}

/* ═══ SSS Glow ═══ */
/* Subsurface scattering values are computed by the orchestrator and set as
   --sss-glow, --sss-color, --sss-spread, --sss-dim CSS vars.
   Visual rendering is handled via the light engine's existing box-shadow
   pipeline — the SSS vars modulate border-color warmth on translucent elements.
   NOTE: ::before is used by light highlights, ::after by border glow.
   Neither pseudo is available, so SSS manifests as border color shift only. */

.lit[data-sss-active="true"] {
  border-color: var(--sss-color, rgba(255, 200, 100, 0.15));
  transition: border-color 0.3s ease;
}

/* ═══ Environment Reflection ═══ */
/* Applied as a gradient layer on reflective materials */

.lit[data-env-active="true"]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--env-gradient, none);
  opacity: var(--env-opacity, 0);
  mix-blend-mode: var(--env-blend, soft-light);
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.5s ease;
}

/* ═══════════════════════════════════════════════════════════════
   BASE MATERIAL APPEARANCE
   These styles define how each material LOOKS by default,
   independent of the light engine. The light engine enhances
   them further when light is nearby.
   ═══════════════════════════════════════════════════════════════ */

/* --- Matte: flat, no shine, absorbs light --- */
.lit[data-material="matte"] {
  background-color: var(--color-surface);
}

/* --- Glossy: subtle top-to-bottom sheen --- */
.lit[data-material="glossy"] {
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.04) 0%,
    transparent 40%,
    rgba(0, 0, 0, 0.02) 100%
  );
}

/* --- Metallic: stronger gradient, cooler feel --- */
.lit[data-material="metallic"] {
  background-image: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.02) 30%,
    transparent 50%,
    rgba(0, 0, 0, 0.04) 100%
  );
  border-color: rgba(255, 255, 255, 0.1);
}

/* --- Glass: translucent, frosted, the signature material --- */
.lit[data-material="glass"] {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05),
    0 4px 24px rgba(0, 0, 0, 0.08);
}

/* --- Paper: warm, soft, fibrous feel --- */
.lit[data-material="paper"] {
  background-color: var(--color-surface);
  box-shadow:
    inset 0 0 0 1px rgba(200, 180, 140, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.06);
}

/* --- Ceramic: smooth with warm inner glow --- */
.lit[data-material="ceramic"] {
  background-image: linear-gradient(
    170deg,
    rgba(255, 255, 255, 0.06) 0%,
    transparent 35%,
    rgba(200, 160, 100, 0.03) 100%
  );
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.1);
}

/* --- Velvet: deep, rich, dark rim --- */
.lit[data-material="velvet"] {
  background-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.02) 0%,
    transparent 50%,
    rgba(0, 0, 0, 0.04) 100%
  );
  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.08),
    inset 0 0 1px rgba(255, 255, 255, 0.04);
}

/* --- Chrome: mirror gradient, high contrast --- */
.lit[data-material="chrome"] {
  background-image: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.04) 25%,
    rgba(0, 0, 0, 0.03) 50%,
    rgba(255, 255, 255, 0.06) 75%,
    rgba(0, 0, 0, 0.05) 100%
  );
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 2px 12px rgba(0, 0, 0, 0.12);
}

/* ═══ Light Theme: Base Material Overrides ═══ */

[data-theme="light"] .lit[data-material="glass"] {
  background: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03),
    0 4px 24px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .lit[data-material="metallic"] {
  background-image: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.15) 30%,
    transparent 50%,
    rgba(0, 0, 0, 0.02) 100%
  );
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .lit[data-material="chrome"] {
  background-image: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0.2) 25%,
    rgba(200, 200, 200, 0.1) 50%,
    rgba(255, 255, 255, 0.3) 75%,
    rgba(180, 180, 180, 0.1) 100%
  );
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 2px 12px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .lit[data-material="glossy"] {
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.25) 0%,
    transparent 40%,
    rgba(0, 0, 0, 0.01) 100%
  );
}

[data-theme="light"] .lit[data-material="velvet"] {
  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.04),
    inset 0 0 1px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .lit[data-material="ceramic"] {
  background-image: linear-gradient(
    170deg,
    rgba(255, 255, 255, 0.35) 0%,
    transparent 35%,
    rgba(200, 160, 100, 0.04) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ═══ Light-Active Material Modifiers ═══ */
/* These enhance the base appearance when the light engine is active */

/* Paper: soft, fibrous, warm scattering */
.lit[data-material="paper"].light-active::before {
  opacity: calc(var(--lit-highlight-opacity, 0) * 0.2);
  mix-blend-mode: soft-light;
}

/* Ceramic: sharp specular with warm undertone */
.lit[data-material="ceramic"].light-active::before {
  opacity: calc(var(--lit-highlight-opacity, 0) * 1.2);
  mix-blend-mode: screen;
}
.lit[data-material="ceramic"].light-active {
  --lit-specular-spread: 8%;
}

/* Velvet: rim-heavy, almost no specular */
.lit[data-material="velvet"].light-active::before {
  opacity: calc(var(--lit-highlight-opacity, 0) * 0.1);
}
.lit[data-material="velvet"].light-active {
  --lit-specular-spread: 40%;
}

/* Chrome: mirror-like, maximum reflection */
.lit[data-material="chrome"].light-active::before {
  opacity: calc(var(--lit-highlight-opacity, 0) * 2.0);
  mix-blend-mode: screen;
}
.lit[data-material="chrome"].light-active {
  --lit-specular-spread: 2%;
}

/* Light theme: light-active material adjustments */
[data-theme="light"] .lit[data-material="paper"].light-active::before {
  mix-blend-mode: multiply;
}

[data-theme="light"] .lit[data-material="ceramic"].light-active::before {
  mix-blend-mode: color-dodge;
}

[data-theme="light"] .lit[data-material="chrome"].light-active::before {
  mix-blend-mode: color-dodge;
  opacity: calc(var(--lit-highlight-opacity, 0) * 1.5);
}