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

   Three pieces of the owner's art, extracted unmodified
   (assets/art/PROVENANCE-1024.txt): the laptop raster, the squirrel silhouette on
   its screen and the purple swirls (both vector). Every number is the desktop
   mock's, in 1440 units (the PDF's points times 0.75): the group is the three
   pieces' bounding box, (548.8, 201.6) and 342.2 x 257.8, 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: 548.8;
  --y0: 201.6;
  --gw: 342.2;
  --gh: 257.8;
}
.laptop {
  position: absolute;
  left: calc(548.8 * var(--u));
  top: calc(201.6 * var(--u));
  width: calc(342.2 * var(--u));
  height: calc(257.8 * var(--u));
  margin: 0;
}
.laptop img {
  position: absolute;
  display: block;
  height: auto;
}
.laptop-img {
  left: 0;
  top: calc(21 * var(--u));
  width: calc(325.6 * var(--u));
}
.laptop-sil {
  left: calc(68.4 * var(--u));
  top: calc(68.2 * var(--u));
  width: calc(97 * var(--u));
}
/* THE SWIRLS (lane L36, 2026-10-26): the three purple 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 (227, 0) and 115.2 units wide for its 153.63 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((227 + var(--x) * 115.2 / 153.63) * var(--u));
  top: calc(var(--y) * 115.2 / 153.63 * var(--u));
  width: calc(var(--w) * 115.2 / 153.63 * var(--u));
  transform-origin: 50% 50%;
}
.laptop-swirl-1 { --x: 0; --y: 0; --w: 98.97; }
.laptop-swirl-2 { --x: 78.19; --y: 93.63; --w: 75.44; }
.laptop-swirl-3 { --x: 12.58; --y: 125.11; --w: 45.35; }
/* 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
   342.2 units, so the fill rule's corridors (--gx, --kc, --kl) are read against
   its half width, 171.1, instead of the column's 280. */
@media (min-width: 1000px) and (orientation: landscape), (min-width: 1367px) {
  .hg-top {
    --gx: 171.1;
    --kc: calc(var(--cr) / 171.1);
    --kl: calc(515 / 171.1);
  }
}

/* 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_Knightly_MOBILE(pro) page 1): the group is drawn 243.2 units wide
   (0.7107 of its desktop box), centered on the mock's y 264.4, between the title
   block and the scroll cue. */
@container (max-width: 599.98px) {
  .hg-top { --hs: 0.7107; }
  .pane-top .hero-area { top: calc((150 - 64) * var(--u)); bottom: calc((1047 - 378.8 - 116.08) * var(--u)); }
}