/* ===== Hero background: GIF replaces the Three.js canvas =====
   Add to assets/css/home.css, and delete any old #hero-canvas rules. */
.sq-hero { position: relative; overflow: hidden; isolation: isolate; }
.sq-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: block; }
.sq-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 100%;
  /* the GIF's dark background drops out against the hero colour; only land + gold remain */
  mix-blend-mode: screen;
  /* fade the left (headline side), the top and the bottom edge into the hero */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 32%, #000 68%),
                      linear-gradient(to bottom, transparent 0%, #000 28%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 32%, #000 68%),
                      linear-gradient(to bottom, transparent 0%, #000 28%, #000 82%, transparent 100%);
          mask-composite: intersect;
}
.sq-hero-inner { position: relative; z-index: 2; }

@media (max-width: 767.98px) {
  /* vertical GIF: keep the parcel low so the headline stays readable */
  .sq-hero-bg img {
    object-position: 50% 100%; opacity: .85;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.25) 30%, #000 62%, #000 90%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.25) 30%, #000 62%, #000 90%, transparent 100%);
    -webkit-mask-composite: source-over;
            mask-composite: add;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sq-hero-bg { display: none; } /* GIFs can't be paused; hide for users who opt out of motion */
}