/* ============================================================
   Per-pack cinematic hero scenery
   Full-bleed atmospheric background painted BEHIND the existing
   product top section (box + title/buy). Layout is unchanged —
   this only adds scenery. Theme-aware scrim fades into the page
   base colour so everything below the hero is untouched.
   Loaded on single product pages only (see functions.php).
   ============================================================ */
.wsite-main { overflow-x: clip; }

.wsite-detail.has-packscene { position: relative; }

.duende-packscene {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 600px;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.duende-packscene__img {
  position: absolute; inset: 0;
  background-position: center 32%;
  background-size: cover;
  background-repeat: no-repeat;
  filter: saturate(0.92);
}
/* Theme-aware veil: washes toward the page base colour.
   Light theme -> airy paper wash (dark text stays readable);
   dark theme -> cinematic deepening toward #0E1116.
   Always reaches full --base at the bottom so the player below is clean. */
.duende-packscene__veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 82% at 78% 34%,
      color-mix(in srgb, var(--base) 58%, transparent),
      transparent 62%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--base) 40%, transparent) 0%,
      color-mix(in srgb, var(--base) 36%, transparent) 28%,
      color-mix(in srgb, var(--base) 64%, transparent) 62%,
      var(--base) 100%);
}

/* Optional seamless background loop, layered over the static scene (which stays as the
   poster/fallback). Same framing + saturation as the still so video<->image is invisible. */
.duende-packscene__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 32%;
  filter: saturate(0.92);
  display: block;
}
/* Honour reduced-motion and spare mobile data/battery: drop the video, keep the still. */
@media (prefers-reduced-motion: reduce) { .duende-packscene__video { display: none; } }
@media (max-width: 720px) { .duende-packscene__video { display: none; } }

/* keep all existing content above the scene */
.wsite-detail.has-packscene > *:not(.duende-packscene) { position: relative; z-index: 1; }

@media (max-width: 720px) {
  .duende-packscene { height: 560px; }
}