/* Shared atmospheric "photo" placeholders — until real photography arrives.
   Built from layered gradients + grain so the site has real body. */

.r-photo {
  position: relative;
  overflow: hidden;
  background: #1A0F0A;
  isolation: isolate;
}
.r-photo::before,
.r-photo::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* warm: peach lit from below */
.r-photo--warm {
  background:
    radial-gradient(ellipse 90% 60% at 50% 110%, #F4C9A8 0%, #E8A87C 18%, #C77A3E 36%, #6B2E1E 60%, #221511 82%, #0E0B0A 100%),
    #0E0B0A;
}
.r-photo--warm::before {
  background: radial-gradient(ellipse 45% 30% at 78% 24%, rgba(244,201,168,0.55), transparent 60%);
  mix-blend-mode: screen;
}

/* night: cool onyx with a single warm glow tucked in a corner */
.r-photo--night {
  background:
    linear-gradient(160deg, #0E0B0A 0%, #1A1614 45%, #2A1A12 70%, #4A2418 100%),
    #0E0B0A;
}
.r-photo--night::before {
  background:
    radial-gradient(ellipse 50% 40% at 30% 70%, rgba(199,122,62,0.55), transparent 65%),
    radial-gradient(ellipse 30% 30% at 78% 28%, rgba(244,201,168,0.18), transparent 70%);
  mix-blend-mode: screen;
}

/* garnet: deep wine with rim light */
.r-photo--garnet {
  background:
    linear-gradient(170deg, #1A0F0A 0%, #3A1820 40%, #6B1A2C 78%, #8C2440 100%),
    #0E0B0A;
}
.r-photo--garnet::before {
  background: radial-gradient(ellipse 40% 30% at 85% 30%, rgba(232,168,124,0.45), transparent 65%);
  mix-blend-mode: screen;
}

/* grain layer — same across all variants */
.r-photo::after {
  z-index: 2;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.13;
  mix-blend-mode: overlay;
}

/* vignette wrapper */
.r-photo > .r-photo-vignette {
  position: absolute; inset: 0;
  z-index: 3;
  box-shadow: inset 0 0 200px 50px rgba(0,0,0,0.55);
  pointer-events: none;
}
.r-photo > .r-photo-content {
  position: relative;
  z-index: 4;
  height: 100%;
}