/**
 * FloatingSurface — лёгкий физический слой над контентом (не glassmorphism).
 * Примитив: `.gc-floating-surface` + `--solid` / `--translucent` + `--elevation-N`.
 * React: GcFloatingSurface · Storybook: Gc/GcFloatingSurface
 */

.gc-floating-surface {
  --gc-fs-radius: var(--radius-12);
  --gc-fs-fill-chroma: var(--surface-primary);
  --gc-fs-fill-opacity: 72%;
  --gc-fs-blur: 10px;
  --gc-fs-edge-opacity: 12%;
  --gc-fs-specular-opacity: 9%;
  --gc-fs-ambient-y: 2px;
  --gc-fs-ambient-blur: 10px;
  --gc-fs-ambient-spread: -3px;
  --gc-fs-ambient-opacity: 6%;
  --gc-fs-specular-chroma: var(--fill-emphasis-inverse);

  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  border-radius: var(--gc-fs-radius);
  background: color-mix(in srgb, var(--gc-fs-fill-chroma) var(--gc-fs-fill-opacity), transparent);
  -webkit-backdrop-filter: blur(var(--gc-fs-blur));
  backdrop-filter: blur(var(--gc-fs-blur));
  border: 1px solid color-mix(in srgb, var(--border-subtle) var(--gc-fs-edge-opacity), transparent);
  border-bottom-color: color-mix(
    in srgb,
    var(--border-default) calc(var(--gc-fs-edge-opacity) * 0.7),
    transparent
  );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--gc-fs-specular-chroma) var(--gc-fs-specular-opacity), transparent),
    inset 1px 0 0 color-mix(
      in srgb,
      var(--gc-fs-specular-chroma) calc(var(--gc-fs-specular-opacity) * 0.28),
      transparent
    ),
    inset -1px 0 0 color-mix(
      in srgb,
      var(--gc-fs-specular-chroma) calc(var(--gc-fs-specular-opacity) * 0.28),
      transparent
    ),
    0 var(--gc-fs-ambient-y) var(--gc-fs-ambient-blur) var(--gc-fs-ambient-spread)
      color-mix(in srgb, var(--fill-emphasis) var(--gc-fs-ambient-opacity), transparent);
}

.gc-floating-surface > * {
  position: relative;
  z-index: 1;
}

/* ─── Variants ───────────────────────────────────────────────────────────── */

.gc-floating-surface--solid {
  --gc-fs-fill-opacity: 92%;
  --gc-fs-blur: 0px;
  --gc-fs-edge-opacity: 16%;
  --gc-fs-specular-opacity: 5%;
  --gc-fs-ambient-opacity: 5%;
}

.gc-floating-surface--translucent {
  --gc-fs-fill-opacity: 72%;
  --gc-fs-blur: 10px;
  --gc-fs-edge-opacity: 11%;
  --gc-fs-specular-opacity: 8%;
}

/* На тёмном scrim / фото — светлая матовая плоскость (читается как «парящий» трек) */
.gc-floating-surface--on-scrim {
  --gc-fs-fill-chroma: var(--fill-emphasis-inverse);
  --gc-fs-fill-opacity: 28%;
  --gc-fs-blur: 14px;
  --gc-fs-edge-opacity: 22%;
  --gc-fs-specular-opacity: 14%;
  --gc-fs-ambient-y: 3px;
  --gc-fs-ambient-blur: 16px;
  --gc-fs-ambient-spread: -4px;
  --gc-fs-ambient-opacity: 16%;
  color: var(--text-on-scrim);
  border-color: color-mix(in srgb, var(--fill-emphasis-inverse) var(--gc-fs-edge-opacity), transparent);
  border-bottom-color: color-mix(
    in srgb,
    var(--fill-emphasis-inverse) calc(var(--gc-fs-edge-opacity) * 0.65),
    transparent
  );
}

.gc-floating-surface--on-scrim.gc-floating-surface--solid {
  --gc-fs-fill-opacity: 36%;
  --gc-fs-blur: 0px;
}

.gc-floating-surface--on-scrim.gc-floating-surface--translucent {
  --gc-fs-fill-opacity: 28%;
}

/* ─── Elevation (ambient shadow only) ───────────────────────────────────── */

.gc-floating-surface--elevation-0 {
  --gc-fs-ambient-y: 1px;
  --gc-fs-ambient-blur: 5px;
  --gc-fs-ambient-spread: -2px;
  --gc-fs-ambient-opacity: 4%;
}

.gc-floating-surface--elevation-1 {
  /* defaults on .gc-floating-surface */
}

.gc-floating-surface--elevation-2 {
  --gc-fs-ambient-y: 3px;
  --gc-fs-ambient-blur: 14px;
  --gc-fs-ambient-spread: -4px;
  --gc-fs-ambient-opacity: 8%;
}

/* ─── Light theme — белый/серый canvas: почти белая плоскость, тень + край ─ */

html[data-theme='light'] .gc-floating-surface {
  --gc-fs-specular-chroma: var(--fill-emphasis-inverse);
}

html[data-theme='light'] .gc-floating-surface--solid {
  --gc-fs-fill-opacity: 96%;
  --gc-fs-specular-opacity: 3%;
  --gc-fs-edge-opacity: 14%;
  --gc-fs-ambient-opacity: 5%;
}

html[data-theme='light'] .gc-floating-surface--translucent {
  --gc-fs-fill-opacity: 78%;
  --gc-fs-specular-opacity: 6%;
}

@media (prefers-color-scheme: light) {
  html:not([data-theme]) .gc-floating-surface {
    --gc-fs-specular-chroma: var(--fill-emphasis-inverse);
  }

  html:not([data-theme]) .gc-floating-surface--solid {
    --gc-fs-fill-opacity: 96%;
    --gc-fs-specular-opacity: 3%;
    --gc-fs-edge-opacity: 14%;
    --gc-fs-ambient-opacity: 5%;
  }

  html:not([data-theme]) .gc-floating-surface--translucent {
    --gc-fs-fill-opacity: 78%;
    --gc-fs-specular-opacity: 6%;
  }
}

/* ─── Dark theme ────────────────────────────────────────────────────────── */

html[data-theme='dark'] .gc-floating-surface {
  --gc-fs-specular-chroma: var(--fill-emphasis-inverse);
  --gc-fs-fill-opacity: 68%;
  --gc-fs-edge-opacity: 10%;
  --gc-fs-ambient-opacity: 10%;
}

html[data-theme='dark'] .gc-floating-surface--solid {
  --gc-fs-fill-opacity: 88%;
  --gc-fs-specular-opacity: 6%;
}

html[data-theme='dark'] .gc-floating-surface--translucent {
  --gc-fs-fill-opacity: 62%;
  --gc-fs-blur: 12px;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .gc-floating-surface {
    --gc-fs-specular-chroma: var(--fill-emphasis-inverse);
    --gc-fs-fill-opacity: 68%;
    --gc-fs-edge-opacity: 10%;
    --gc-fs-ambient-opacity: 10%;
  }

  html:not([data-theme]) .gc-floating-surface--solid {
    --gc-fs-fill-opacity: 88%;
    --gc-fs-specular-opacity: 6%;
  }

  html:not([data-theme]) .gc-floating-surface--translucent {
    --gc-fs-fill-opacity: 62%;
    --gc-fs-blur: 12px;
  }
}

/* ─── Fallback без backdrop-filter ──────────────────────────────────────── */

@supports not (backdrop-filter: blur(1px)) {
  .gc-floating-surface--translucent {
    --gc-fs-blur: 0px;
    --gc-fs-fill-opacity: 94%;
  }

  html[data-theme='dark'] .gc-floating-surface--translucent,
  html:not([data-theme]) .gc-floating-surface--translucent {
    --gc-fs-fill-opacity: 90%;
  }
}