/* Dust & Stardust site v24 (2026-11-14): home section 1 = the garden theatre at night (N2: the same rose-trellis arch on two topiary
   columns, a white pierrot playing the mandolin on a stone bench, a harlequin leaning on a garden urn, three empty stands; the
   background was drawn as a night sky from the start, no cut-out edge; the arch opening is night too, only the stands and floor catch
   the light). Fairy dust floats around it and drifts down into section 2 (js/fairy-dust.js, canvas .fairy-dust below).
   Loaded after css/v21.css on the home page. Art: img/home/v22/web-1.jpg (1882x941) and mob-1.jpg (941x1547);
   layers: img/home/v22/layers.json -> _review/v22-hotspots.cjs -> layers.site.json.
   Earlier: the day garden theatre (v23) is in _archive/sec1-garden-day-2026-11-14, the swan music box in _archive/sec1-musicbox-2026-11-14.

   Edges of the art:
   - Top: the night starts right under the header, a straight edge (no torn-paper strip: the user did not want it), no fade.
   - Bottom: section 1 ends on its own night (about 9% of the art under the steps); section 2 begins in exactly that night colour,
     slides over the last --x12 of it (css/v22-s2.css) and turns into the dawn sky (night -> navy -> indigo -> lavender -> rose).
   --s1-night = mean of the bottom 16 rows of the art: web #070B10 (7,11,16), phone #0B1019 (11,16,25). */
.home-sections { --s1-night: #070B10; position: relative; }
@media (max-width: 768px) { .home-sections { --s1-night: #0B1019; } }
.home-sections .scene[data-sec="1"] { background: var(--s1-night); }
.home-sections .scene[data-sec="1"] picture img, .home-sections .scene[data-sec="1"] .hm { -webkit-mask-image: none; mask-image: none; }

/* the whole scene is one link to the shop (no products on the stands yet): no box on hover, the hand cursor is enough */
.scene[data-sec="1"] .hs-stage:hover:not(:focus-visible) { background: none; box-shadow: none; }

/* fairy dust: one canvas over section 1 and the top of section 2, light only (screen), never in the way of clicks */
.home-sections .fairy-dust { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; mix-blend-mode: screen; }

/* ---------------- the first screen shows the whole theatre (desktop) ----------------
   web-1.jpg is a wide 2:1 version of the art (the generated 1672 px picture in the middle, 105 px of the same night on each side).
   The section is as tall as the screen under the header (--s1-top-offset, measured by js/home-motion.js; 124 px = language line + header),
   kept between 50vw (the art never gets cut at the top or bottom) and 56.28vw (941/1672: the picture itself never gets cut at the sides).
   object-fit: cover then only trims night at the sides. 1440x900: 776 px tall; 1920x1080: 996 px. */
@media (min-width: 769px) {
  .home-sections {
    --s1h: clamp(50vw, calc(100vh - var(--s1-top-offset, 124px)), 56.28vw);
    --s1h: clamp(50vw, calc(100svh - var(--s1-top-offset, 124px)), 56.28vw); }
  .home-sections .scene[data-sec="1"] { --s1a: 2; height: var(--s1h); overflow: hidden; }
  .home-sections .scene[data-sec="1"] picture { display: block; height: 100%; }
  .home-sections .scene[data-sec="1"] picture img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
}