/* ============================================================
   Site-wide ambient background glow system.
   Adapted from restaurantzimmerl.at's background recipe:
   a flat dark base on <body>, with individual sections opting
   into a soft blurred radial-gradient "glow" (via a utility
   class) that fades into the base color and bleeds past its
   own section into the neighboring one.
   Colors below are swapped for the Cocina y Cava palette
   (gold/moss) instead of the reference site's teal/olive.
   ============================================================ */

:root {
  --bg-base: var(--bg-deep);                 /* site's own dark base, reused so this stays in sync with style.css */
  --glow-warm: rgb(140, 100, 65);            /* muted gold, echoes --gold */
  --glow-cool: rgb(90, 135, 105);            /* muted moss green, echoes --moss */
}

body {
  background: var(--bg-base);
}

/* Base class: put this on any <section> (or div) that should host a glow.
   It just needs position:relative + display:block so the ::after
   pseudo-element can be absolutely positioned inside it. */
.gradient-circle-right-center,
.gradient-circle-left-center,
.gradient-circle-right-top,
.gradient-circle-right-bottom,
.gradient-circle-left-top {
  display: block;
  position: relative;
}

/* Shared glow properties. The glow is a radial-gradient painted onto a
   layer that's 100% of the section's box, then blurred by 50px and pushed
   behind the content (z-index: -1) so text/images sit on top of it.

   Sections using these classes must NOT have their own opaque
   background-color (it would paint over the glow) and must NOT use
   overflow:hidden (it would clip the bleed into neighboring sections). */

.gradient-circle-right-center::after,
.gradient-circle-left-center::after,
.gradient-circle-right-top::after,
.gradient-circle-right-bottom::after,
.gradient-circle-left-top::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 140%;   /* taller than the section so it bleeds past the edge */
  background-position: center center;
  background-repeat: no-repeat;
  pointer-events: none;
  filter: blur(50px);
}

.gradient-circle-right-center::after {
  right: -45%;
  top: -20%;
  background-image: radial-gradient(circle closest-side, var(--glow-warm) 0%, var(--bg-base) 100%);
}

.gradient-circle-left-center::after {
  left: -45%;
  top: -20%;
  background-image: radial-gradient(circle closest-side, var(--glow-cool) 0%, var(--bg-base) 100%);
}

.gradient-circle-right-top::after {
  right: -45%;
  top: -35%;
  height: 150%;
  background-image: radial-gradient(circle closest-side, var(--glow-warm) 0%, var(--bg-base) 100%);
}

.gradient-circle-right-bottom::after {
  right: -45%;
  bottom: -35%;
  height: 150%;
  background-image: radial-gradient(circle closest-side, var(--glow-cool) 0%, var(--bg-base) 100%);
}

.gradient-circle-left-top::after {
  left: -45%;
  top: -35%;
  height: 150%;
  background-image: radial-gradient(circle closest-side, var(--glow-cool) 0%, var(--bg-base) 100%);
}