/* TUUYA · luxury background world (behind content, z-0).
   Editorial Arborist: ink+watercolour scene plates fade in per homepage zone
   (driven by body[data-slide] from home.js — no extra JS), brass horizon line,
   faint paper grain. Rich but restrained: ~50-70% quiet paper, text stays crisp.
   Per consilium (research/bg-consilium.md). No slop: no gradient blobs, no glass,
   no shadow, no radius. */

/* fixed world behind everything; content is lifted to z-1 below */
.site-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

/* lift ONLY in-flow content above the world. Fixed chrome already sits above z-0
   (header z50, rail/totem z30, intro z100, builder z1000) — do NOT touch its position,
   or it falls into the flow (rail dropped in = pushed the hero down). */
#main, .site-footer { position: relative; z-index: 1; }

/* faint cold-press paper tooth over the whole viewport */
.bg-grain {
  position: absolute; inset: 0; opacity: 0.5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* a single fine brass survey/horizon line running through the page */
.bg-horizon { position: absolute; left: 0; right: 0; top: 60%; height: 1px; background: var(--brass); opacity: 0.2; }

/* watercolour scene plates: low, wide, masked to fade out near the top (text zone) */
.bg-scene {
  position: absolute; left: 0; right: 0; bottom: 0; height: 68vh;
  background-repeat: no-repeat; background-position: center bottom; background-size: cover;
  opacity: 0; mix-blend-mode: multiply; will-change: opacity;
  transition: opacity 1.5s ease;
  /* warmer, livelier watercolour so scenes read rich not dull; still no acid green (owner 26.06) */
  filter: saturate(1.65) brightness(1.06) contrast(1.03) sepia(0.05);
  -webkit-mask-image: linear-gradient(to top, #000 32%, rgba(0,0,0,0.55) 60%, transparent 92%);
  mask-image: linear-gradient(to top, #000 32%, rgba(0,0,0,0.55) 60%, transparent 92%);
}

/* which scene shows on which zone (crossfade as the active section changes).
   Step 2 (owner 26.06 "больше природу выделить"): scenes lifted noticeably. */
body[data-slide="estate"]  .bg-scene--valley,
body[data-slide="timber"]  .bg-scene--valley   { opacity: 0.74; }
body[data-slide="catalog"] .bg-scene--village   { opacity: 0.66; }
body[data-slide="configure"].bg-scene--village  { opacity: 0.74; }
/* blocks 6 (a-frame) and 7 (projects): stronger forest scene so they are not flat paper */
body[data-slide="aframe"]  .bg-scene--village,
body[data-slide="projects"].bg-scene--village   { opacity: 0.88; }
body[data-slide="process"] .bg-scene--building  { opacity: 0.62; }
body[data-slide="why"]     .bg-scene--lake,
body[data-slide="journal"] .bg-scene--lake,
body[data-slide="enquiry"] .bg-scene--lake      { opacity: 0.82; }
/* before home.js sets a slide, show the valley softly so it is never bare */
body:not([data-slide]) .bg-scene--valley { opacity: 0.52; }

/* inner pages (no home.js / no data-slide): ONE calm static scene, faded, no crossfade,
   so /configurator/ and silo pages are never bare paper. "Not too busy" per owner. */
body:not(.home) .bg-scene--valley { opacity: 0.4; }
body:not(.home) .bg-scene--village,
body:not(.home) .bg-scene--building,
body:not(.home) .bg-scene--lake { display: none; }

/* on the dark hero the bark slide covers the world; nothing to do there */

@media (max-width: 1023px) {
  /* lighter on phones: keep grain + horizon + one calm valley, drop the crossfade weight */
  .bg-scene--village, .bg-scene--building, .bg-scene--lake { display: none; }
  .bg-scene--valley { opacity: 0.4 !important; height: 52vh; }
}

@media (prefers-reduced-motion: reduce) {
  .bg-scene { transition: none; }
}