/* Decorative layers for /cazare/ — markup inserted by _build/decor/cazare.py.
   Everything is aria-hidden, pointer-events: none, and painted behind content (z-index: -1
   inside isolated sections). Low-contrast sand/gold/moss on cream, moss/gold on forest. */

.rooms { position: relative; isolation: isolate; overflow: hidden; overflow: clip; }
.rooms .section__head, .rooms .rtype, .rooms .rooms__info { position: relative; }
.cta-band { isolation: isolate; }

[class^="dz-cz-"], [class*=" dz-cz-"] { pointer-events: none; }
.dz-cz-bg, .dz-cz-head, .dz-cz-rt, .dz-cz-night, .dz-cz-cta { position: absolute; z-index: -1; pointer-events: none; }
.dz-cz-bg svg, .dz-cz-head svg, .dz-cz-rt svg, .dz-cz-night svg, .dz-cz-cta svg { position: absolute; overflow: hidden; }

/* ---- section background: contour lines top-right, morning-mist landscape along the bottom ---- */
.dz-cz-bg { inset: 0; }
.dz-cz-topo { top: 0; right: 0; width: min(600px, 62vw); height: auto; aspect-ratio: 600 / 420; }
.dz-cz-land { left: 0; bottom: 0; width: 100%; height: clamp(150px, 19vw, 280px); }

/* ---- cabin window beside the (left-aligned) section head, desktop only ---- */
.dz-cz-head { display: none; }
@media (min-width: 1100px) {
  .dz-cz-head { display: block; top: 50%; left: calc(100% + clamp(50px, 8vw, 150px)); width: clamp(200px, 19vw, 280px); aspect-ratio: 360 / 420; transform: translateY(-50%); }
  .dz-cz-window { inset: 0; width: 100%; height: 100%; }
  .dz-cz-topo { opacity: .6; }
}

/* ---- room blocks ---- */
.rooms { --dz-edge: calc((100vw - min(1280px, 100vw)) / 2 + var(--gutter)); }
.dz-cz-rt { inset: 0; }

/* tall vignette from the viewport edge on the photo side (its inner part hides behind the photo) */
.dz-cz-side { display: none; }
@media (min-width: 1180px) {
  .dz-cz-side { display: block; top: 50%; width: min(calc(var(--dz-edge) + 60px), 420px); height: auto; aspect-ratio: 320 / 620; transform: translateY(-50%);
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 30%), linear-gradient(var(--dz-dir), #000 55%, transparent 96%);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(to top, transparent 0, #000 30%), linear-gradient(var(--dz-dir), #000 55%, transparent 96%); mask-composite: intersect; }
  .dz-cz-side--l { --dz-dir: to right; left: calc(-1 * var(--dz-edge)); }
  .dz-cz-side--r { --dz-dir: to left; right: calc(-1 * var(--dz-edge)); }
}

/* fir sprig in the outer margin on the text side, wide screens only */
.dz-cz-sprig { display: none; }
@media (min-width: 1360px) {
  .dz-cz-sprig { display: block; top: 6%; width: min(120px, calc(var(--dz-edge) - 28px)); height: auto; aspect-ratio: 140 / 240; }
  .dz-cz-rt:not(.dz-cz-rt--flip) .dz-cz-sprig { right: calc(-1 * var(--dz-edge) + 14px); }
  .dz-cz-rt--flip .dz-cz-sprig { left: calc(-1 * var(--dz-edge) + 14px); }
}

/* small ridge-and-firs divider centred in the gap below each room */
.dz-cz-sep { left: 50%; top: calc(100% + clamp(60px, 9vw, 120px) / 2); width: clamp(150px, 18vw, 230px); height: auto; aspect-ratio: 4 / 1; transform: translate(-50%, -50%); }
.rtype:last-child .dz-cz-sep { display: none; }

/* ---- pale crescent and stars beside the amenities heading ---- */
.dz-cz-night { top: clamp(18px, 3.5vw, 44px); right: 0; width: clamp(110px, 15vw, 220px); aspect-ratio: 220 / 120; }
.dz-cz-moon { inset: 0; width: 100%; height: 100%; }

/* ---- dark CTA band: stars and tonal ridges ---- */
.dz-cz-cta { inset: 0; overflow: hidden; }
.dz-cz-sky { left: 0; bottom: 0; width: 100%; height: clamp(220px, 30vw, 420px); }

@media (max-width: 640px) {
  .dz-cz-topo { width: 92vw; opacity: .8; }
  .dz-cz-cta .dz-cz-sky { height: 200px; }
}

/* ---- gentle motion ---- */
@media (prefers-reduced-motion: no-preference) {
  .dz-cz-tw { transform-box: fill-box; transform-origin: center; animation: dzCzTwinkle 5s ease-in-out var(--d, 0s) infinite; }
  .dz-cz-drift { animation: dzCzDrift 46s ease-in-out infinite alternate; }
  .dz-cz-drift--b { animation-duration: 62s; animation-direction: alternate-reverse; }
  .dz-cz-side .dz-cz-mist, .dz-cz-window .dz-cz-mist { animation: dzCzMist 30s ease-in-out infinite alternate; }
}
@keyframes dzCzTwinkle { 0%, 100% { opacity: .2; transform: scale(.75); } 50% { opacity: .75; transform: scale(1); } }
@keyframes dzCzDrift { from { transform: translateX(-60px); } to { transform: translateX(90px); } }
@keyframes dzCzMist { from { transform: translateX(-18px); } to { transform: translateX(18px); } }