/* Approved direction: collage 2 (defocused light) and the original peony shadow. */
:root {
  --gray-halo: color-mix(in srgb, var(--gray) 84%, var(--pink));
  --gray-depth: color-mix(in srgb, var(--gray) 93%, var(--black));
  --dark-halo: color-mix(in srgb, var(--black) 91%, var(--gray));
  --gray-light:
    radial-gradient(ellipse 66% 65% at 12% 18%, var(--gray-halo), transparent 78%),
    radial-gradient(ellipse 58% 48% at 92% 82%, var(--gray-halo), transparent 80%),
    radial-gradient(ellipse 72% 65% at 48% 52%, var(--gray-depth), transparent 85%);
  --dark-light:
    radial-gradient(ellipse 65% 58% at 12% 16%, var(--dark-halo), transparent 76%),
    radial-gradient(ellipse 54% 54% at 92% 84%, var(--dark-halo), transparent 80%);
}

body,
.hero,
.section:not(.dark):not(.pink),
.ticker-shell,
.project-dialog,
.dialog-close {
  background-color: var(--gray);
  background-image: var(--gray-light);
  background-repeat: no-repeat;
}

.dark,
.art-personal {
  background-color: var(--black);
  background-image: var(--dark-light);
  background-repeat: no-repeat;
}

/* Decorative backgrounds remain behind content and never intercept a click. */
.pink,
.ticker {
  position: relative;
  isolation: isolate;
}
.art-architecture,
.art-ritual,
.mobile-nav,
.pink-button {
  isolation: isolate;
}

.pink::before,
.pink::after,
.ticker::before,
.art-architecture::before,
.art-ritual::before,
.mobile-nav::before,
.pink-button::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background-image: url("assets/peony-shadow.webp");
  background-repeat: no-repeat;
  mix-blend-mode: darken;
  opacity: .85;
}

/* Large bloom near the statement; a softer mirrored crop below the full-width photo. */
.pink::before {
  inset: 0 0 auto;
  height: clamp(530px, 61vw, 850px);
  background-size: clamp(1000px, 112vw, 1700px) auto;
  background-position: right -130px top 25px;
  mask-image: radial-gradient(ellipse at 74% 38%, #000 33%, transparent 83%);
}
.pink::after {
  inset: auto 0 0;
  height: 410px;
  background-size: 1000px auto;
  background-position: right -80px bottom -50px;
  transform: scaleX(-1);
  opacity: .45;
  mask-image: radial-gradient(ellipse at 76% 64%, #000 20%, transparent 78%);
}

.ticker::before {
  inset: 0;
  background-size: 640px auto;
  background-position: left center;
  background-repeat: repeat-x;
  opacity: .55;
}

.art-architecture::before {
  inset: 0;
  background-size: 115% auto;
  background-position: right -35px bottom -10px;
  transform: scaleX(-1);
  opacity: .6;
}
.art-ritual::before {
  inset: 0;
  background-size: 150% auto;
  background-position: right -30px top -30px;
  opacity: .85;
}
.mobile-nav::before {
  inset: 0;
  background-size: 950px auto;
  background-position: right -240px bottom 20px;
  opacity: .8;
}
.pink-button::before {
  inset: 0;
  background-size: 500px auto;
  background-position: right -50px center;
  opacity: .65;
}

@media (max-width: 760px) {
  .pink::before {
    height: 480px;
    background-size: 780px auto;
    background-position: right -125px top 35px;
    opacity: .75;
    mask-image: radial-gradient(ellipse at 82% 38%, #000 25%, transparent 80%);
  }
  .pink::after {
    height: 520px;
    background-size: 820px auto;
    background-position: right -140px bottom 20px;
    opacity: .38;
  }
  .art-architecture::before { background-size: 145% auto; }
  .art-ritual::before { background-position: right -55px top -5px; }
}