/* The hero swarm (H11 -> H14, now the default hero). Active only when
   world-effects has put `world-hero-swarm-on` on <body>, which it does on every
   load except reduced motion / stills, and undoes if the swarm fails to mount. */

.world-hero-swarm{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:1;          /* above .world-noise--hero (1, earlier sibling), below .world-copy (3) */
  /* H16: the canvas arrives from zero. hero-swarm.js adds `is-lit` one frame
     after its first successful draw, so nothing pops before a painted frame.
     29 September 2026: the settled value is .9, not .45, so the objects keep
     their toon colours; depth fades far ones towards the ground (hero-swarm.js). */
  opacity:0;
  transition:opacity 1.2s ease;
  pointer-events:none;
  border-radius:inherit;
}

.world-hero-swarm.is-lit{opacity:.9}

@media (prefers-reduced-motion: reduce){
  .world-hero-swarm{transition:none}
}

/* Pinned, the hero section covers the full stage with no radius, so the canvas
   follows the ground panel exactly as the hero noise does. */
.world-pinned .world-section--hero .world-hero-swarm{
  inset:var(--frame-inset);
  border-radius:var(--frame-radius);
}

/* In this mode the single hero object's art rectangle is not part of the
   composition. The main world canvas still draws chapter 0 into that rect; that
   is accepted for the comparison. */
body.world-hero-swarm-on .world-section--hero .world-art-track{visibility:hidden}

@media (prefers-reduced-motion: reduce){
  .world-hero-swarm{display:none}
  body.world-hero-swarm-on .world-section--hero .world-art-track{visibility:visible}
}

/* Unit H13 (2026-09-18 owner request), swarm mode only.
   1. The swarm canvas takes pointer events so its objects can be dragged. It
      sits at z-index 1, under .world-copy (3), so the text and prose cards
      still win every hit inside their own boxes.
   2. The single hero object is gone in this mode (the art track is removed
      from the layout and page.js zeroes the chapter-0 canvas), so the left
      column is logo / headline / actions only, centred in the panel.
   Every rule carries the body class, which outranks the H9/H10 rules above. */
body.world-hero-swarm-on .world-hero-swarm{pointer-events:auto}
body.world-hero-swarm-on .world-section--hero .world-art-track{display:none}

@media(min-width:1101px){
 body.world-hero-swarm-on.world-pinned .world-section--hero .world-copy{
  align-items:center;
  grid-template-columns:minmax(0,54%) minmax(0,1fr);
 }
 body.world-hero-swarm-on.world-pinned .world-section--hero .world-hero-lockup{grid-column:1;grid-row:1;margin:0 0 28px}
 body.world-hero-swarm-on.world-pinned .world-section--hero .world-title{
  grid-column:1;grid-row:2;
  font-size:clamp(44px,3.4vw,66px);max-width:16ch;margin:0 0 30px;
 }
 body.world-hero-swarm-on.world-pinned .world-section--hero .world-actions{grid-column:1;grid-row:3}
 body.world-hero-swarm-on.world-pinned .world-section--hero .world-prose{grid-column:2;grid-row:1/span 3;align-self:center}
}

@media (prefers-reduced-motion: reduce){
 body.world-hero-swarm-on .world-hero-swarm{pointer-events:none}
 body.world-hero-swarm-on .world-section--hero .world-art-track{display:block}
}

/* Owner request, 2026-09-18: an object drifting behind the headline could not be
   picked up. The press landed on the text, which sits at z-index 3 above the
   canvas, so the swarm's pointerdown never fired and the browser started a text
   selection instead. In swarm mode the left column is decorative (logo, eyebrow,
   headline), so it stops claiming the pointer and the canvas underneath gets the
   press. The two buttons and the two prose cards keep theirs, and the cards stay
   selectable so their copy can still be copied. */
body.world-hero-swarm-on .world-section--hero .world-copy{
  pointer-events:none;
  -webkit-user-select:none;
  user-select:none;
}
/* The two wrappers stay transparent as well, so the gap between the buttons and
   the gap between the cards are grabbable too; only the controls themselves and
   the cards take the pointer. */
body.world-hero-swarm-on .world-section--hero .world-actions>*,
body.world-hero-swarm-on .world-section--hero .world-prose>p{
  pointer-events:auto;
}
body.world-hero-swarm-on .world-section--hero .world-prose{
  -webkit-user-select:text;
  user-select:text;
}

/* No swarm to grab, so the copy behaves normally. */
@media (prefers-reduced-motion: reduce){
 body.world-hero-swarm-on .world-section--hero .world-copy{
   pointer-events:auto;
   -webkit-user-select:auto;
   user-select:auto;
 }
}

/* Unit W4-hero (2026-09-19).
   1. Pinned laptops: the left column (lockup, headline, actions) sat in the
      implicit rows the taller card column stretched, opening 55-107px gaps. Two
      flexible rows around the three now take the slack, so the group keeps its
      own 28/30px rhythm and centres beside the cards as one block. Guarded to
      <=1800px so the locked 1920-class hero is byte-for-byte unchanged. */
@media (min-width:1101px) and (max-width:1800px){
 body.world-hero-swarm-on.world-pinned .world-section--hero .world-copy{grid-template-rows:minmax(0,1fr) auto auto auto minmax(0,1fr)}
 body.world-hero-swarm-on.world-pinned .world-section--hero .world-hero-lockup{grid-row:2}
 body.world-hero-swarm-on.world-pinned .world-section--hero .world-title{grid-row:3}
 body.world-hero-swarm-on.world-pinned .world-section--hero .world-actions{grid-row:4}
 body.world-hero-swarm-on.world-pinned .world-section--hero .world-prose{grid-row:1/-1}
}
/* 2. Stacked layouts (<=1100): the swarm fills the first screen only (the
      poster: lockup, headline, CTAs); the cards below it are opaque anyway. The
      last 18% fades out rather than cutting at a line. hero-swarm.js sizes its
      drawing buffer from this box. */
@media (max-width:1100px){
 body:not(.world-pinned) .world-section--hero .world-hero-swarm{
  bottom:auto;height:calc(100svh - 2 * var(--frame-inset));
  border-radius:var(--frame-radius) var(--frame-radius) 0 0;
  -webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent);
 }
}
/* 3. Very wide screens (>=2400px, never 1920): the card column stopped
      growing with the viewport at a 780px measure (the 1920 card is 751px), so
      lines no longer run to ~175 characters at 3440. The cards keep the right
      gutter and the left group keeps the left gutter, so both still line up
      with the header's eyebrow and demo button. */
@media (min-width:2400px){
 body.world-hero-swarm-on.world-pinned .world-section--hero .world-copy{grid-template-columns:minmax(0,1fr) minmax(0,780px);width:100%}
}