/**
 * SKIN: CRYSTAL 2000 — The Clear Mechanism
 * Scoped under [data-skin="crystal-2000"]
 *
 * STRICT GEOMETRY / TRANSPARENT MATERIAL / PRECISE MOVEMENT
 * Experimental material study. Not approved publication artwork.
 * No infinite CSS loops. Highlights driven by state classes only.
 */

[data-skin="crystal-2000"] {
  --lj-black: #0e1114;
  --lj-off-white: #e8eef2;
  --lj-paper: #f4f7f9;
  --lj-ink: #1a2228;
  --lj-muted: #5a6a75;
  --lj-border: #c5d0d8;

  /* Ice / acrylic */
  --crystal-clear: rgba(255, 255, 255, 0.42);
  --crystal-ice: rgba(220, 235, 245, 0.55);
  --crystal-smoke: rgba(90, 110, 125, 0.18);
  --crystal-edge: rgba(30, 50, 65, 0.55);
  --crystal-edge-hot: rgba(120, 200, 220, 0.85);
  --crystal-cyan: #6ec9d9;
  --crystal-charcoal: #2a343c;
  --crystal-highlight: rgba(255, 255, 255, 0.7);

  /* Map accents */
  --lj-lemon: #c4a035;
  --lj-lemon-soft: var(--crystal-ice);
  --lj-lemon-deep: var(--crystal-charcoal);
  --lj-focus-ring: var(--crystal-cyan);
  --lj-active: var(--crystal-charcoal);
}

[data-skin="crystal-2000"] body,
body[data-skin="crystal-2000"] {
  background:
    linear-gradient(165deg, #f0f4f7 0%, #dfe8ee 48%, #e8eef2 100%);
  color: var(--lj-ink);
}

[data-skin="crystal-2000"] .lab-header {
  border-bottom-color: var(--lj-border);
}

[data-skin="crystal-2000"] .lab-header h1 {
  color: var(--lj-ink);
  font-weight: 400;
}

[data-skin="crystal-2000"] .lab-header p,
[data-skin="crystal-2000"] .lab-meta,
[data-skin="crystal-2000"] .pyramid-status,
[data-skin="crystal-2000"] .lab-footer {
  color: var(--lj-muted);
}

/* —— Manufactured object —— */
[data-skin="crystal-2000"] .pyramid-visual {
  filter: drop-shadow(0 12px 28px rgba(40, 60, 80, 0.12));
}

[data-skin="crystal-2000"] .pyramid-svg {
  overflow: visible;
}

/* Base faces: translucent acrylic */
[data-skin="crystal-2000"] .region-face {
  stroke: var(--crystal-edge);
  stroke-width: 1.35;
  fill: var(--crystal-clear);
  transition: fill 0.18s ease, stroke 0.15s ease, stroke-width 0.15s ease;
}

[data-skin="crystal-2000"] .region-face--a {
  fill: rgba(255, 255, 255, 0.38);
}

[data-skin="crystal-2000"] .region-face--b {
  fill: rgba(210, 225, 235, 0.4);
}

[data-skin="crystal-2000"] .region-face--c {
  fill: rgba(180, 200, 215, 0.36);
}

/* Internal crystal geometry (visible only in this skin) */
[data-skin="crystal-2000"] .crystal-facet {
  fill: none;
  stroke: rgba(80, 120, 145, 0.28);
  stroke-width: 0.6;
  pointer-events: none;
}

[data-skin="crystal-2000"] .crystal-inner {
  fill: rgba(255, 255, 255, 0.12);
  stroke: rgba(100, 140, 160, 0.22);
  stroke-width: 0.5;
  pointer-events: none;
}

[data-skin="crystal-2000"] .crystal-edge-hl {
  fill: none;
  stroke: var(--crystal-highlight);
  stroke-width: 1.1;
  stroke-linecap: round;
  opacity: 0.35;
  pointer-events: none;
}

[data-skin="crystal-2000"] .pyramid-outline {
  stroke: var(--crystal-edge);
  stroke-width: 1.4;
  opacity: 0.65;
}

/* Labels: instrument-legible over glass */
[data-skin="crystal-2000"] .region-label {
  fill: var(--crystal-charcoal);
  font-weight: 700;
  paint-order: stroke fill;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 2.5;
}

[data-skin="crystal-2000"] .region-sublabel {
  fill: var(--lj-muted);
  paint-order: stroke fill;
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 2;
}

[data-skin="crystal-2000"] .proxy-label {
  fill: var(--lj-muted);
  letter-spacing: 0.1em;
}

/* FOCUS — optical edge catches light */
[data-skin="crystal-2000"] .pyramid-region.is-focused .region-face {
  stroke: var(--crystal-edge-hot);
  stroke-width: 1.75;
  fill: rgba(255, 255, 255, 0.58);
}

[data-skin="crystal-2000"] .pyramid-region.is-focused .crystal-edge-hl {
  opacity: 0.85;
  stroke: var(--crystal-cyan);
}

/* SELECTED — dominant plane, cooler ice */
[data-skin="crystal-2000"] .pyramid-region.is-active .region-face {
  fill: rgba(180, 230, 240, 0.62);
  stroke: var(--crystal-cyan);
  stroke-width: 1.85;
}

[data-skin="crystal-2000"] .pyramid-region.is-active .crystal-facet {
  stroke: rgba(110, 200, 220, 0.45);
}

[data-skin="crystal-2000"] .pyramid-region.is-active .crystal-edge-hl {
  opacity: 0.9;
  stroke: #fff;
}

/* EXPANDED — mechanical separation cue via opacity of neighbors handled in JS;
   active plane denser ice */
[data-skin="crystal-2000"] .pyramid-region.is-expanded .region-face {
  fill: rgba(160, 220, 235, 0.78);
  stroke: var(--crystal-charcoal);
  stroke-width: 2;
}

[data-skin="crystal-2000"] .pyramid-region.is-expanded .crystal-inner {
  fill: rgba(255, 255, 255, 0.28);
  stroke: rgba(60, 100, 120, 0.4);
}

/* Still / production / reduced-motion: no incidental transitions */
[data-skin="crystal-2000"] .pyramid-stage.is-production .region-face,
[data-skin="crystal-2000"] .pyramid-stage.is-reduced-motion .region-face,
[data-skin="crystal-2000"][data-treatment="still"] .region-face {
  transition: none !important;
}

/* Controls */
[data-skin="crystal-2000"] .control-block {
  background: rgba(255, 255, 255, 0.65);
  border-color: var(--lj-border);
  backdrop-filter: blur(2px);
}

[data-skin="crystal-2000"] .btn {
  border-color: var(--crystal-charcoal);
  color: var(--lj-ink);
  background: rgba(255, 255, 255, 0.5);
}

[data-skin="crystal-2000"] .btn:hover:not(:disabled) {
  background: var(--crystal-charcoal);
  color: #f4f7f9;
  border-color: var(--crystal-charcoal);
}

[data-skin="crystal-2000"] .btn.is-active,
[data-skin="crystal-2000"] .btn[aria-pressed="true"] {
  background: var(--crystal-charcoal);
  color: #f4f7f9;
  border-color: var(--crystal-charcoal);
}

[data-skin="crystal-2000"] .btn--accent {
  border-color: var(--crystal-cyan);
}

[data-skin="crystal-2000"] .btn--accent:hover:not(:disabled),
[data-skin="crystal-2000"] .btn--accent[aria-pressed="true"] {
  background: var(--crystal-cyan);
  border-color: var(--crystal-cyan);
  color: var(--crystal-charcoal);
}

[data-skin="crystal-2000"] .treatment-option input,
[data-skin="crystal-2000"] .skin-option input {
  accent-color: var(--crystal-cyan);
}

/* Hide slime-specific filters when crystal is active (none needed) */