/* =========================================================================
   Scroll fx: jobsite dust, container yard.
   Engines: /assets/js/fx/dust.js, yard.js. Contracts: CONVENTIONS.md
   ========================================================================= */

/* ---------- shared canvas ---------- */
.fx-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.1s ease;
}
.fx-ready > .fx-canvas, .fx-ready .yard__stage .fx-canvas { opacity: 1; }

/* ---------- jobsite dust ---------- */
.panel--dust {
  position: relative; isolation: isolate; overflow: hidden;
  background: #1a1714 url('/assets/img/dust-d1.jpg') center / cover no-repeat;
  color: #F2F1ED;
}
.panel--dust.panel--dust-alt { background-image: url('/assets/img/dust-d2.jpg'); }
.panel--dust > *:not(.fx-canvas) { position: relative; z-index: 1; }
@media (max-width: 620px) {
  .panel--dust, .panel--dust.panel--dust-alt { background-image: url('/assets/img/dust-m1.jpg'); }
}

/* One dust layer behind several stacked sections. The canvas is a viewport-sized
   layer pinned with position: sticky, so it renders at screen size no matter how
   tall the span is, and the sections scroll over it. */
.dust-span { position: relative; isolation: isolate; background: #1a1714; color: #F2F1ED; --dust-h: 100vh; }
@supports (height: 100lvh) { .dust-span { --dust-h: 100lvh; } }
.dust-span > .fx-canvas { position: sticky; inset: auto; top: 0; height: var(--dust-h); margin-bottom: calc(-1 * var(--dust-h)); }
.dust-span > *:not(.fx-canvas) { position: relative; z-index: 1; }
.panel--clear { background: transparent; --c-card: rgba(42, 40, 38, 0.86); }

/* ---------- container yard (cream) ----------
   Desktop: text sits in the site container; the scene renders into a centred frame
   (max --yard-frame wide) so the stack stays near the copy on wide screens. The frame's
   side edges fade out, since the rendered floor is a touch darker than the panel. */
.panel--yard {
  --yard-frame: 1560px;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  min-height: 900px;
  background: #F2F1ED;
  color: #1a1a1a;
}
.panel--yard::before {   /* pre-render still, framed exactly like the live stage */
  content: ''; position: absolute; z-index: 0; top: 0; bottom: 0; left: 50%;
  width: min(100%, var(--yard-frame)); transform: translateX(-50%);
  background: url('/assets/img/yard-cream-d.jpg') center / cover no-repeat;   /* rendered with ?still at the 1560px frame */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  transition: opacity .8s ease;
}
.panel--yard.fx-ready::before { opacity: 0; }
.yard__content {
  position: relative; z-index: 1; width: 100%; max-width: 540px;
  margin-left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
}
.panel--yard > .yard__stage {
  position: absolute; z-index: 0; top: 0; bottom: 0; left: 50%;
  width: min(100%, var(--yard-frame)); transform: translateX(-50%); pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.yard__band { display: none; }

@media (max-width: 1200px) {
  .yard__content { max-width: 470px; }
}
@media (max-width: 1024px) {
  .panel--yard { display: block; min-height: 0; }
  .panel--yard::before { display: none; }
  .yard__content { max-width: calc(680px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
  .yard__band {
    display: block; position: relative;
    height: clamp(420px, 56vw, 540px);
    margin-top: 32px;
    background: #F2F1ED url('/assets/img/yard-cream-m.jpg') center bottom / auto 100% no-repeat;
  }
  .panel--yard.fx-ready .yard__band { background-image: none; }
  .yard__band .yard__stage { position: absolute; inset: 0; }
}
@media (max-width: 620px) {
  .yard__band { height: 420px; }
}

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