/* 07_pitch: experimental pitch build, NOT Questum house style. Questum's web system: 06_production-context/web/ */
/* Ad field (2026-10-01): pitch section 3, "one idea, dozens of versions". Replaces the four-slot gen-scene on the pitch
   page (gen-scene stays for demo.html). Approved in _review/2026-10-01-ad-grid-mocks (proto3.html?layer=cells, round 19).
   A pinned stage: the original ad starts at the episode phone's height and settles as it reaches the centre; then
   one perfect circle grows from its centre and generates the versions around it (Dip's grid-tool layout). Each version
   is empty until the circle reaches it: its pixels are born at the edge, load, take the picture's colours and dissolve
   into the picture. All drawn by ad-field.js from the scroll. */
.af-track { position: relative; height: 320vh; }   /* the original settles before the pin; the pinned part is the circle and the hold */
.af-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.af-stage { position: absolute; inset: 0; contain: strict; }
.af-tiles { position: absolute; inset: 0; }

/* the original: laid out at its starting (large) size and scaled down, so the picture is never upscaled */
.af-main { position: absolute; z-index: 3; margin: 0; overflow: hidden; background: #111; will-change: transform; transform-origin: 50% 50%; }
.af-main img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the note under the settled original: placed on whole pixels by ad-field.js, fades and rises once the original settles */
.af-stage .af-note { position: absolute; z-index: 4; left: 0; right: 0; margin: 0 auto; max-width: min(520px, calc(100% - 48px)); text-align: center; text-wrap: balance;
  opacity: 0; will-change: opacity, transform; }

/* a finished real version: the image itself (ad-field.js), over its canvases */
.af-tile .pic { display: none; object-fit: cover; }
.af-tile.done .pic { display: block; }

/* one version: hidden until the circle reaches it; while the circle crosses it, its pixels and picture are composed by
   ad-field.js into one canvas (.live); once finished it is its plain picture (.sharp) */
.af-tile { position: absolute; overflow: hidden; visibility: hidden; contain: strict; }
.af-tile.on, .af-tile.done { visibility: visible; }
.af-tile > * { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.af-tile .sharp, .af-tile.done .live { display: none; }
.af-tile.done .sharp { display: block; }
.af-tile .hair { box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); border-radius: inherit; opacity: 0; transition: opacity .4s ease; }
.af-tile.done .hair { opacity: 1; }

@media (max-width: 639px) {
  .af-track { height: 200vh; height: 200lvh; }                          /* phones: a shorter run, in lvh: a pinned screen is scrolled with Safari's toolbar collapsed */
  .af-sticky { height: 100vh; height: 100lvh; }
  .af-stage .af-note { display: none; }                                  /* phones: the grid fills the screen; the note is left out (Dip) */
}
@media (prefers-reduced-motion: reduce) {
  .af-track { height: auto; }
  .af-stage .af-note { opacity: 1; }
  .af-sticky { position: relative; height: 100vh; height: 100svh; }
}