/* THE LAPTOP (lane L21, 2026-10-24): the home's first section (#top), the
   owner's laptop hero from UI_Randomly_ENG page 1 and RK_Randomly_MOBILE(pro)
   page 1, in front of the mission section (#mission, lane L32). Loaded by the home
   page only, after site.css, so the shared stylesheet and every other page that
   links it (the tools pages among them) are unchanged. The section is a pane
   like the others: the kit stages it, the hint counts it and the sections nav
   lists it.

   Two pieces of the owner's art, extracted unmodified
   (assets/art/PROVENANCE-1024.txt): the laptop raster with the bunny on its lid
   and the peach swirls (vector). Every number is the desktop mock's, in 1440
   units (the PDF's points times 0.75): the group is the two pieces' bounding
   box, (527.9, 203.4) and 367.2 x 237.3, centered both ways in the hero area
   like every other hero group. The tablet and phone frames scale the same group
   (--hs). */
.hg-top {
  --x0: 527.9;
  --y0: 203.4;
  --gw: 367.2;
  --gh: 237.3;
}
.laptop {
  position: absolute;
  left: calc(527.9 * var(--u));
  top: calc(203.4 * var(--u));
  width: calc(367.2 * var(--u));
  height: calc(237.3 * var(--u));
  margin: 0;
}
.laptop img {
  position: absolute;
  display: block;
  height: auto;
}
/* The PDF places this raster MIRRORED (its image matrix is [-476.25 0 0 252
   1180.2 335.6] on desktop and [-177.75 0 0 93.75 232.5 159.2] on the phone): the
   file is the owner's unmodified bytes, so the page draws the design's own flip. */
.laptop-img {
  left: 0;
  top: calc(48.3 * var(--u));
  width: calc(357.2 * var(--u));
  transform: scaleX(-1);
}
/* THE SWIRLS (lane L36, 2026-10-26): the three peach spirals, each its own
   file split out of the owner's one swirl drawing (the path commands unmodified,
   assets/art/PROVENANCE-1024.txt). Each piece is placed at its own box inside
   the old drawing's box (259.3, 0) and 107.9 units wide for its 143.89 drawing
   units, so the three together draw exactly what the one file drew. --x, --y
   and --w are the piece's box in drawing units. */
.laptop .laptop-swirl {
  left: calc((259.3 + var(--x) * 107.9 / 143.89) * var(--u));
  top: calc(var(--y) * 107.9 / 143.89 * var(--u));
  width: calc(var(--w) * 107.9 / 143.89 * var(--u));
  transform-origin: 50% 50%;
}
.laptop-swirl-1 { --x: 0; --y: 0; --w: 92.69; }
.laptop-swirl-2 { --x: 73.23; --y: 87.69; --w: 70.66; }
.laptop-swirl-3 { --x: 11.79; --y: 117.17; --w: 42.46; }
/* Each spiral turns slowly about its own center, on one shared period (18 s). They differ in phase and
   direction, so they never fall into step. Transform only, on its own layer: no layout, no repaint
   of the page. Under prefers-reduced-motion: reduce nothing turns. */
@media (prefers-reduced-motion: no-preference) {
  .laptop .laptop-swirl {
    will-change: transform;
    animation: laptop-swirl-turn var(--turn) linear var(--phase) infinite var(--dir);
  }
  .laptop-swirl-1 { --turn: 18s; --phase: -5s; --dir: normal; }
  .laptop-swirl-2 { --turn: 18s; --phase: -16s; --dir: reverse; }
  .laptop-swirl-3 { --turn: 18s; --phase: -9s; --dir: normal; }
}
@keyframes laptop-swirl-turn {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* DESKTOP (the same window list as site.css's desktop groups): the group is
   centered on the stage's axis like the text column, but its box is its own
   367.2 units, so the fill rule's corridors (--gx, --kc, --kl) are read against
   its half width, 183.6, instead of the column's 280. */
@media (min-width: 1000px) and (orientation: landscape), (min-width: 1367px) {
  .hg-top {
    --gx: 183.6;
    --kc: calc(var(--cr) / 183.6);
    --kl: calc(515 / 183.6);
  }
}

/* TABLET and the portrait band (no tablet mock draws the laptop): the room of
   the pages without a drawing (below the title block, above the bubble), filled
   by height. */
@media (max-width: 999.98px), (min-width: 1000px) and (max-width: 1366px) and (orientation: portrait) {
@container (min-width: 600px) {
  .hg-top { --hs: 1.2; }
}
}

/* PHONE (RK_Randomly_MOBILE(pro) page 1): the group is drawn 243.6 units wide
   (0.6634 of its desktop box), centered on the mock's y 258.9, between the title
   block and the scroll cue. */
@container (max-width: 599.98px) {
  .hg-top { --hs: 0.6634; }
  .pane-top .hero-area { top: calc((150 - 64) * var(--u)); bottom: calc((1047 - 367.8 - 116.08) * var(--u)); }
}