/* monitors.css — the product monitors under the hero (templates/_world.html
   "The product", state in static/js/monitors.js). Loaded after world.css.

   One feature at a time: the words on one side, ONE big monitor on a desk
   on the other. The monitor is a still picture (static/monitors/*.webp,
   rendered offline, tools/monitor-render/), transparent above the desk, so
   it stands on the plain page ground: no mask, no vignette, no fade. The
   desk ends cleanly on the words' side and runs out through the picture's
   other edge, so that edge BLEEDS to the viewport edge (a negative margin
   the size of the gutter): the cut is always off the screen.

     state 0  .hw-mon-slide--right on: words left, chart monitor right
     state 1  .hw-mon-slide--left on:  words right, commodity monitor left
     state 2  .hw-mon-slide--right on: words left, calendar monitor right

   Both slides share one grid cell. A slide that is off waits off to its
   own side (the right one to the right, the left one to the left), so a
   switch reads as one move across: the monitor going out slides away, the
   other slides in from the opposite side, and the words travel across
   with them, a little behind and a shorter way (parallax). Transform and
   opacity only, one eased curve, --hw-mon-dur long. The wrap (3 to 1) stays
   on one side: its incoming slide is .is-late (monitors.js) and starts a
   beat after the old one has cleared, instead of crossing it.

   Fonts come from the page (.hw-h2, .hw-body): never set one here.
   Namespace hw-mon-. */
.hw-mon{
  --hw-mon-dur:820ms;
  --hw-mon-ease:cubic-bezier(0.22, 1, 0.36, 1);
  /* the picture (monitor on its desk, bleed included): ~46 to 68% of the
     viewport width, as tall as fits under the top bar (about 80px) with a
     little air, so the whole monitor is in view at once (1.0705 = the
     picture's w / h). The arrows sit under the words, not under the
     picture, so they take none of its height. Its grid column is that less
     the gutter it bleeds through. */
  --hw-mon-pic-w:clamp(46vw, calc((100svh - 112px) * 1.0705), 68vw);
  --hw-mon-col:calc(min(var(--hw-mon-pic-w), 1760px) - var(--hw-gutter));
  --hw-mon-pic-go:34vw;             /* how far a monitor travels */
  --hw-mon-text-go:20vw;            /* how far the words travel */
  position:relative;
  isolation:isolate;
  padding:calc(5.5 * var(--hw-u)) var(--hw-gutter) calc(2 * var(--hw-u));
  overflow-x:clip;
}

/* The mission line above: centred, a measure wide. */
.hw-mon-intro{
  position:relative; z-index:2;
  max-width:calc(36 * var(--hw-u));
  margin:0 auto calc(1.2 * var(--hw-u));
  text-align:center;
}
.hw-mon-intro .hw-h2{ margin-bottom:calc(0.9 * var(--hw-u)); }
.hw-mon-intro .hw-body{ max-width:34em; margin:0 auto; }
.hw-h2--feat{ font-size:clamp(24px, calc(1.8 * var(--hw-u)), 46px); }

.hw-mon-show{
  position:relative;
  margin:0 auto;
}

/* ── the slides ── */
.hw-mon-slides{ display:grid; }
.hw-mon-slide{
  grid-area:1 / 1;
  display:grid; align-items:center;
  column-gap:calc(2 * var(--hw-u));
  grid-template-columns:minmax(0, 1fr) var(--hw-mon-col);
  grid-template-areas:"text pic";
  visibility:hidden;
  transition:visibility 0s linear var(--hw-mon-dur);
}
.hw-mon-slide--left{
  grid-template-columns:var(--hw-mon-col) minmax(0, 1fr);
  grid-template-areas:"pic text";
}
.hw-mon-slide.is-on{ visibility:visible; transition:visibility 0s; }

.hw-mon-text{
  grid-area:text;
  justify-self:center;
  max-width:19em;
}
.hw-mon-text .hw-h2{ margin-bottom:calc(0.7 * var(--hw-u)); }
.hw-mon-pic{ grid-area:pic; }
/* the desk's cut edge runs off the screen: out through the gutter */
.hw-mon-slide--right .hw-mon-pic{ margin-right:calc(-1 * var(--hw-gutter)); }
.hw-mon-slide--left .hw-mon-pic{ margin-left:calc(-1 * var(--hw-gutter)); }
.hw-mon-img{
  display:block;
  width:100%; height:auto;
}
html[data-theme="light"] .hw-mon-img--dark,
html:not([data-theme="light"]) .hw-mon-img--light{ display:none; }

/* motion: the one on screen at rest; the one off waits to its own side */
.hw-mon-text, .hw-mon-pic{
  transform:translate3d(0, 0, 0);
  opacity:1;
  will-change:transform, opacity;
}
.hw-mon-slide.is-on .hw-mon-pic{
  transition:transform var(--hw-mon-dur) var(--hw-mon-ease),
             opacity calc(var(--hw-mon-dur) * 0.7) var(--hw-mon-ease);
}
.hw-mon-slide.is-on .hw-mon-text{
  /* the words follow the picture a beat behind */
  transition:transform var(--hw-mon-dur) var(--hw-mon-ease) calc(var(--hw-mon-dur) * 0.1),
             opacity calc(var(--hw-mon-dur) * 0.7) var(--hw-mon-ease) calc(var(--hw-mon-dur) * 0.15);
}
/* the same side twice (the wrap): wait for the old one to clear first */
.hw-mon-slide.is-on.is-late .hw-mon-pic{ transition-delay:calc(var(--hw-mon-dur) * 0.4); }
.hw-mon-slide.is-on.is-late .hw-mon-text{ transition-delay:calc(var(--hw-mon-dur) * 0.5); }
.hw-mon-slide:not(.is-on) .hw-mon-pic,
.hw-mon-slide:not(.is-on) .hw-mon-text{
  opacity:0;
  transition:transform var(--hw-mon-dur) var(--hw-mon-ease),
             opacity calc(var(--hw-mon-dur) * 0.45) ease-out;
}
.hw-mon-slide--right:not(.is-on) .hw-mon-pic{ transform:translate3d(var(--hw-mon-pic-go), 0, 0); }
.hw-mon-slide--right:not(.is-on) .hw-mon-text{ transform:translate3d(var(--hw-mon-text-go), 0, 0); }
.hw-mon-slide--left:not(.is-on) .hw-mon-pic{ transform:translate3d(calc(-1 * var(--hw-mon-pic-go)), 0, 0); }
.hw-mon-slide--left:not(.is-on) .hw-mon-text{ transform:translate3d(calc(-1 * var(--hw-mon-text-go)), 0, 0); }

/* what a screen reader hears on a switch: in the tree, off the screen */
.hw-mon-live{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ── the arrows: two quiet circles under the words, a counter between ──
   They live INSIDE each slide's .hw-mon-text, so they are the same moving
   element as the words: the same transform, curve and beat, one block
   (owner, 2026-09-29). Nothing here animates them on its own. */
.hw-mon-nav{
  display:flex; align-items:center;
  gap:calc(0.9 * var(--hw-u));
  margin-top:calc(1.1 * var(--hw-u));
}
.hw-mon-count{
  min-width:4.2em; text-align:center;
  font-family:var(--font-mono);
  font-size:calc(0.72 * var(--hw-u)); letter-spacing:0.2em;
  color:var(--text-muted);
  font-variant-numeric:tabular-nums;
}
.hw-mon-arrow{
  display:inline-grid; place-items:center;
  width:44px; height:44px; padding:0;
  border:0; border-radius:50%;
  background:transparent;
  box-shadow:inset 0 0 0 1px var(--hw-line-2);
  color:var(--text-secondary);
  cursor:pointer;
  transition:background-color var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.hw-mon-arrow svg{
  width:18px; height:18px;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.hw-mon-arrow:hover{
  background:var(--hw-tint);
  color:var(--text-primary);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text-primary) 30%, transparent);
}
.hw-mon-arrow:focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 1px var(--hw-brass), 0 0 0 3px color-mix(in srgb, var(--hw-brass) 35%, transparent);
  color:var(--text-primary);
}
.hw-mon-arrow:active{ transform:scale(0.96); }

/* Phones and narrow tablets: stacked, the words above, the monitor the
   full width; the same move across, shorter. */
@media (max-width:860px) and (min-aspect-ratio:1/1) and (min-height:521px), (max-width:860px) and (max-aspect-ratio:1/1){
  .hw-mon{
    --hw-mon-pic-go:22vw;
    --hw-mon-text-go:12vw;
    padding-top:calc(4 * var(--hw-u));
  }
  .hw-mon-slide, .hw-mon-slide--left{
    grid-template-columns:minmax(0, 1fr);
    column-gap:0;
    grid-template-areas:"text" "pic";
    row-gap:calc(1.2 * var(--hw-u));
  }
  .hw-mon-text{ max-width:26em; text-align:center; }
  .hw-mon-nav{ justify-content:center; margin-top:calc(0.9 * var(--hw-u)); }
}
/* Landscape phones (short and wide): stacked, the monitor started below
   the fold and never came into view with its words. Side by side instead,
   the picture sized to the height under the top bar. */
@media (max-height:520px) and (min-aspect-ratio:1/1){
  .hw-mon{
    --hw-mon-pic-w:calc((100svh - 88px) * 1.0705);
    padding-top:calc(3 * var(--hw-u));
  }
}
/* Reduced motion: nothing travels; the swap is instant. */
@media (prefers-reduced-motion: reduce){
  .hw-mon{ --hw-mon-dur:0ms; --hw-mon-pic-go:0px; --hw-mon-text-go:0px; }
  .hw-mon-slide .hw-mon-pic, .hw-mon-slide .hw-mon-text{ transition:none !important; }
  .hw-mon-arrow:active{ transform:none; }
}