/* Dust & Stardust site v22c-e (2026-11-13): section 1 -> 2 seam and the whole sun in section 2. Loaded after css/v22.css on the home page.
   Section 2 art: img/home/v22/web-2.jpg (1800x1360) and mob-2.jpg (1101x2472): the v21 art with sky added above, the sun's upper
   rays rebuilt from its own intact lower rays (same length, thickness and waves all round), and a warm dawn mist at the top.
   Geometry: img/home/v22/layers.sec2.json -> _review/v22-hotspots.cjs. Art build: tmp/s2fix2/build-s2.js.

   The seam (v22c, after the user saw a muddy beige -> pale -> blue band):
   - section 1 ends on its own table colour, cropped to ~45-60 CSS px under the lace (css/v22.css, --s1-table);
   - the top rows of section 2 are a mist of exactly that colour, full only over the overlap (= the table under the lace); from the
     lace end (t = 0) to the first cloud (t = 1) the sky comes in as smoothstep(t / 1.4): a little at first, half at t = 0.7
     (the line the user drew), all sky at t = 1.4; the colour leans only 25% toward a dawn rose (tmp/s2fix2/build-s2.js, v22e);
   - section 2 slides up over section 1 by --x12 and fades in there, so the only crossfade is tan over the same tan. */
/* v22e: the mist's continuous gradient starts at the lace end (art row 50 on desktop, 140 on a phone), see the note above.
   Desktop keeps its overlap (6vw, a little past the lace end, where the mist still carries under 7% sky), so section 2 and the sun
   stay where they were; on a phone the overlap is exactly the table under the lace (120/941 of the width). */
/* v23 (2026-11-14): section 1 is now the garden theatre on peach paper (css/v22.css). The mist at the top of section 2 was rebuilt in
   that paper colour (web 250,215,188 / phone 248,213,184; tmp/v23/mistParams.json in session 2026-11-08_wWDnmS4GGgVe5sw8, same
   build-s2.js): sky share = smoothstep(t / 1.4), t from the end of the drawing (the bottom of the steps and the pierrots, L0) to the
   first cloud (C1), so the paper under the theatre turns into the sky without a band, half-way about 70% of the way down.
   The overlap is shorter than before so it only covers paper under the drawing: desktop 4.5vw (65 px at 1440, 86 px at 1920),
   phone 9% of the width (35 px at 390; the paper under the pierrots is 12.5% of the width). */
/* v24 (2026-11-14): section 1 is now the garden theatre at night. The top of section 2 is rebuilt as night -> dawn
   (_review/v24/build-s2-night.js): its first rows are exactly section 1's bottom night (web 7,11,16 / phone 11,16,25) over the whole
   --x12 overlap, so the crossfade is night over night; then linear colour stops along a steady brightness ramp (navy, indigo, dusky
   lavender, mauve rose, pale pink) that thin out just above the sun's top rays. Desktop art grew by 140 rows of sky on top
   (1800x1360 -> 1800x1500) so the change from night to morning is long; the phone art keeps its size (1101x2472). */.home-sections { --x12: clamp(48px, 4.5vw, 90px); }
@media (max-width: 768px) {
  /* the margin in % of the width and the mask in % of the picture height (1101x2472: 0.09 * 1101/2472 = 4.0085%) are both exact */
  .home-sections { --x12: 4.0085%; }
}

.home-sections .scene[data-sec="2"] {
  margin-top: calc(-1 * var(--x12));
  background: none;
  /* the overlap strip lies over section 1: let clicks there fall through to section 1's links; section 2's own links stay clickable */
  pointer-events: none;
}
.home-sections .scene[data-sec="2"] a { pointer-events: auto; }
.home-sections .scene[data-sec="2"]::before { display: none; }
/* eased ramp over the overlap (tan over tan), then the v20 bottom fade into the Locket section */
.home-sections .scene[data-sec="2"] picture img, .home-sections .scene[data-sec="2"] .hm {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.08) calc(var(--x12) * .25), rgba(0,0,0,.3) calc(var(--x12) * .5), rgba(0,0,0,.7) calc(var(--x12) * .78), #000 var(--x12), #000 calc(100% - var(--seep2b)), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.08) calc(var(--x12) * .25), rgba(0,0,0,.3) calc(var(--x12) * .5), rgba(0,0,0,.7) calc(var(--x12) * .78), #000 var(--x12), #000 calc(100% - var(--seep2b)), transparent 100%);
}
/* phone: the cards sit low in the tall sky, so the button sits at the very bottom, clear of the second card's label */
@media (max-width: 768px) { .home-sections .scene[data-sec="2"] { margin-top: -9%; } .home-sections .scene[data-sec="2"] .scene-cta { bottom: 0 !important; } }