/* decorative layers for /galerie/ — generated markup from _build/decor/galerie.py */

#galerie { isolation: isolate; }
#galerie > .container { position: relative; z-index: 1; }

.dz-gal { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.dz-gal svg, .dz-gal div { position: absolute; pointer-events: none; }
.dz-gal svg { display: block; }

/* night sky behind the section head */
.dz-gal-sky { top: 0; left: 0; width: 100%; height: auto; }

/* layered range + firs in the bottom padding, flowing into the CTA band */
.dz-gal-range { left: 0; bottom: -1px; width: 100%; height: calc((var(--sec) + var(--ridge)) * .9); }
/* the range replaces the dark-on-dark zig-zag seam between the gallery and the CTA band */
#galerie::after { content: none; }
#galerie + .cta-band::before { content: none; }

/* contour lines + fir sprigs down the side margins (only where there is a real margin) */
.dz-gal-edge {
  display: none; top: 620px; bottom: 300px;
  width: calc((100% - 1280px) / 2 + var(--gutter) - 14px);
  background: url("/img/decor/galerie/edge.svg") right 0 / 160px auto repeat-y;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 260px, #000 calc(100% - 260px), transparent);
          mask-image: linear-gradient(180deg, transparent, #000 260px, #000 calc(100% - 260px), transparent);
}
.dz-gal-edge--l { left: 0; }
.dz-gal-edge--r { right: 0; transform: scaleX(-1); background-position: right 700px; }
@media (min-width: 1200px) { .dz-gal-edge { display: block; } }

/* small ridge-and-fir horizon resting on the rule between categories */
#galerie .gcat { position: relative; }
#galerie .gcat + .gcat::before {
  content: ""; position: absolute; left: 0; right: 0; pointer-events: none;
  height: clamp(30px, 5vw, 60px); top: calc(-1px - clamp(30px, 5vw, 60px));
  background: url("/img/decor/galerie/strip.svg") center bottom / auto 100% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
#galerie .gcat + .gcat { border-top-color: rgba(201, 154, 91, .22); }

/* fine gold frame corners around each category header */
#galerie .gcat__head { position: relative; }
#galerie .gcat__head::before,
#galerie .gcat__head::after {
  content: ""; position: absolute; width: clamp(34px, 3.4vw, 50px); aspect-ratio: 1; pointer-events: none;
  background: url("/img/decor/galerie/corner.svg") 0 0 / 100% 100% no-repeat;
}
#galerie .gcat__head::before { left: calc(-1 * min(var(--gutter) - 4px, 22px)); top: -16px; }
#galerie .gcat__head::after { right: calc(-1 * min(var(--gutter) - 4px, 22px)); bottom: -14px; transform: rotate(180deg); }

@media (prefers-reduced-motion: no-preference) {
  .dz-gal-tw { animation: dzGalTwinkle 6s ease-in-out infinite alternate; }
  .dz-gal-tw1 { animation-duration: 8s; animation-delay: -3s; }
  .dz-gal-tw2 { animation-duration: 5s; animation-delay: -1.5s; }
  .dz-gal-mist { animation: dzGalDrift 46s ease-in-out infinite alternate; }
  .dz-gal-mist2 { animation: dzGalDrift 60s ease-in-out infinite alternate-reverse; }
  @keyframes dzGalTwinkle { 0% { opacity: .18; } 100% { opacity: .6; } }
  @keyframes dzGalDrift { 0% { transform: translateX(-50px); } 100% { transform: translateX(50px); } }
}