/* ambient.css — монохромні studio-підсвітки (light + dark) */

:root {
  --ambient-spot-a: var(--mono-studio-spot);
  --ambient-spot-b: var(--mono-studio-floor);
  --surface-glow: var(--elevation-soft);
  --surface-glow-hover: var(--elevation-lift);
  --border-glow: color-mix(in srgb, var(--color-text-muted) 42%, var(--color-border));
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-text) 12%, transparent);
}

.page-main {
  position: relative;
  isolation: isolate;
}

.page-main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 78% 58% at 3% 0%, var(--ambient-spot-a), transparent 56%),
    radial-gradient(ellipse 64% 50% at 97% 6%, var(--ambient-spot-b), transparent 52%),
    radial-gradient(ellipse 42% 32% at 50% 88%, var(--mono-studio-center), transparent 58%),
    linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--color-bg-muted) 22%, transparent) 100%);
}

.page-main > .container.section {
  position: relative;
}

.page-main > .container.section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(10rem, 26vw, 20rem);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    ellipse 88% 100% at 50% 0%,
    color-mix(in srgb, var(--color-surface) 70%, transparent),
    transparent 74%
  );
}

.page-main > .container.section > * {
  position: relative;
  z-index: 1;
}

.section--muted {
  position: relative;
  isolation: isolate;
}

.section--muted::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 68% 52% at 100% 0%, var(--ambient-spot-b), transparent 58%),
    radial-gradient(ellipse 58% 46% at 0% 100%, var(--ambient-spot-a), transparent 54%);
  opacity: 0.55;
}

.section--soft {
  position: relative;
  isolation: isolate;
}

.section--soft::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 100% 0%, var(--ambient-spot-b), transparent 60%),
    radial-gradient(ellipse 60% 48% at 0% 100%, var(--ambient-spot-a), transparent 56%);
  opacity: 0.4;
}

.section--soft > .container,
.section--soft > * {
  position: relative;
  z-index: 1;
}

.section--muted > .container,
.section--muted > * {
  position: relative;
  z-index: 1;
}

.surface-panel {
  padding: var(--space-lg);
  border: 1px solid var(--mono-glass-border);
  border-radius: var(--radius-xl);
  background: var(--gradient-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--elevation-soft), var(--elevation-inset);
}

@media (prefers-reduced-motion: reduce) {
  .surface-lift { transition: none; }
}

.surface-lift {
  transition:
    transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

.surface-lift:hover {
  transform: translateY(-3px);
  border-color: var(--border-glow);
  box-shadow: var(--elevation-lift);
}