/* Ambient backdrop: seascape, soft glow, gulls crossing the sky. */
.opui-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body:has(.opui-ambient) :is(#content, .footer-back) {
  position: relative;
  z-index: 1;
}

body.opui-ambient-off .opui-ambient,
body.opui-ambient-off .opui-ambient-toggle {
  display: none;
}

.opui-ambient-photo {
  position: absolute;
  inset: -6%;
  background: #07141c url('ambient-bg.jpg') center / cover no-repeat;
  transform: scale(1.08);
  opacity: .72;
  will-change: transform;
}

html[data-ambient="day"] .opui-ambient-photo {
  background-color: #6ea4bc;
  background-image: url('ambient-bg-day.jpg');
  opacity: .88;
}

.opui-ambient-glow {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  left: 50%;
  top: 35%;
  translate: -50% -50%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 40%, #e2c58533 0%, transparent 42%),
    radial-gradient(circle at 70% 60%, #3d8fa855 0%, transparent 48%),
    radial-gradient(circle at 50% 50%, #102532aa 0%, transparent 70%);
  filter: blur(8px);
  opacity: .85;
  will-change: transform;
}

html[data-ambient="day"] .opui-ambient-glow {
  background:
    radial-gradient(circle at 30% 28%, #fff4c855 0%, transparent 36%),
    radial-gradient(circle at 68% 55%, #7ec8e044 0%, transparent 46%),
    radial-gradient(circle at 50% 50%, #f7fbff22 0%, transparent 70%);
}

.opui-ambient-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, #14344455 0%, transparent 55%),
    linear-gradient(180deg, #0b1e2988 0%, transparent 40%, #0b1e2966 100%);
}

html[data-ambient="day"] .opui-ambient-veil {
  background:
    linear-gradient(180deg, #0b1e2944 0%, #f4fbff18 42%, #0b1e2933 100%);
}

/* Временный переключатель дня и ночи. */
.opui-ambient-toggle {
  position: fixed;
  right: 86px;
  bottom: 16px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #d8b46c99;
  border-radius: 999px;
  color: #fff0c9;
  background: #102532e6;
  font: 13px/1.2 Georgia, "Times New Roman", serif;
  cursor: pointer;
  box-shadow: 0 8px 20px #0004;
}

.opui-ambient-toggle:hover { color: #fff; border-color: #fff0c9; }

.opui-ambient-birds {
  position: absolute;
  inset: 0;
}

.opui-ambient-bird {
  position: absolute;
  left: 0;
  top: 0;
  width: 52px;
  height: 24px;
  color: rgba(214, 224, 230, 0.82);
  will-change: transform;
}

.opui-ambient-bird svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.opui-ambient-bird path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html[data-ambient="day"] .opui-ambient-bird {
  color: rgba(36, 48, 58, 0.78);
}

@media (prefers-reduced-motion: reduce) {
  .opui-ambient-glow,
  .opui-ambient-birds { display: none; }
}