/*
 * OCFai CSS contract
 * AI_RULE: define only classes matching OCFAI_ALLOWED_PREFIXES in this file.
 * AI_RULE: shared UI patterns must use their canonical component CSS instead of local variants.
 * OCFAI_ROLE: component
 * OCFAI_ALLOWED_PREFIXES: mk-background-1, mk-background-dark, mk-background-electric, mk-background-electric__, mk-background-page, mk-background-public
 */
/* Component: mk_background */
.mk-background-1 {
  background: rgb(var(--mk-bg-public-rgb) / .86);
  backdrop-filter: blur(var(--mk-blur-header));
}

.mk-background-page {
  background: var(--mk-color-bg-public);
  color: var(--mk-color-text);
}

.mk-background-public {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 22%, rgb(var(--mk-accent-rgb) / .08), transparent 34%),
    linear-gradient(180deg, var(--mk-color-bg-public) 0%, var(--mk-color-surface) 72%);
  color: var(--mk-color-text);
}

.mk-background-electric {
  position: relative;
  overflow: hidden;
  background: var(--mk-color-dark-deep);
}

.mk-background-electric::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, rgb(var(--mk-light-rgb) / .10), transparent 0 22%, rgb(var(--mk-dark-deep-rgb) / .12) 46%, rgb(var(--mk-dark-deep-rgb) / .62) 100%),
    linear-gradient(180deg, rgb(var(--mk-dark-deep-rgb) / .06) 0%, rgb(var(--mk-dark-deep-rgb) / .54) 100%);
}

.mk-background-electric__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: var(--mk-color-dark-deep);
}