{"version":3,"file":"VideoGrid.eBwLmMNo.mjs","names":["useRef"],"sources":["https:/framerusercontent.com/modules/V28YxHiOc4OQPm59UNyk/kI2yR9wskDrSvipylwj0/VideoGrid.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useRef}from\"react\";const duration={/** No delay. */\"0\":0,/** Snap. Resets a transform while the element is already invisible. */\"1\":1,/** Press; label cross-fade inside a morphing control. */\"120\":120,/** Hand-off. The next layer starts this long after the layer that carries it. */\"180\":180,/** Quick exit fade for small parts. */\"200\":200,/** Standard interface transition. */\"240\":240,/** Default exit; the heartwood appearing. */\"300\":300,/** Disc landing, stroke un-write, film scene cross, Born width. */\"400\":400,/** One ring being born; caption word reveal; verify chip; Born height. */\"500\":500,/** Chart bars draw, rises, opacity leg of a grow, foreground fade. */\"600\":600,/** Point-to-point travel and hold; film exit. */\"700\":700,/** Headline word reveal, stroke draw-on, whole-board fade. */\"800\":800,/** Grow. The brand's signature duration: a ring arriving. */\"900\":900,/** Orbits growing out from behind the mark; film growth. */\"1000\":1e3,/** Film headline word reveal. */\"1100\":1100,/** Long hairline, heartwood swing, mark draw-on ring, 'Planting…' hold. */\"1200\":1200,/** Count-up for a card-sized number. */\"1400\":1400,/** Slow settles: the mark turning into place, the dot field opening. */\"2100\":2100,/** Breathe period; count-up for a headline-sized number. */\"2400\":2400,/** Interval between generative swings. */\"4000\":4e3,/** A looping board holds resolved this long before it leaves. */\"4400\":4400,/** Hold for boards whose exit cascade is longer. */\"4800\":4800,/** Standard board loop. */\"6000\":6e3,/** Long hold, for content that must be read before it leaves. */\"8000\":8e3,/** One orbit of a label around the mark. */\"26000\":26e3,/** One idle turn of the ring. */\"40000\":4e4};const stagger={/** Tight: characters, caption words, reverse exits. */\"30\":30,/** Icon set drawing on in reading order. */\"40\":40,/** The brand stagger: chart bars, rings, words, reverse part exits. */\"60\":60,/** Headline words; odometer digits. */\"90\":90,/** Columns of a stats strip. */\"120\":120,/** Parts of one component, in reading order. */\"170\":170,/** Whole objects in a row: cards, posts, sections. */\"200\":200};const easing={/** The UI curve. Long ease-out: fast departure, long deceleration into rest. Every arrival. */grow:[.2,.8,.2,1],/** Grow mirrored in time. For exits that must travel (retracting bars, un-writing strokes). Grow reused backwards throws 68% of the travel into the first fifth and reads as a flicker. */leave:[.8,0,.8,.2],/** The film curve. Symmetric easy-ease: soft start, quick middle, soft settle. Word reveals and any move from one resting point to another. */film:[.7,0,.3,1],/** Ambient pulse. Gentle both ends, no hold. */breathe:[.4,0,.2,1],/** Opacity cross-fades and continuous rotation only. Never position or scale. */linear:[0,0,1,1]};const distance={/** Small label rise. */\"4\":4,/** Footer / caption rise; hover lift. */\"6\":6,/** First part of a component rising; later parts rise less (8 / 6 / 4). */\"8\":8,/** Container rise: cards, panels, Born content. */\"10\":10,/** Film exit drift (upward, while fading). */\"em-0_3\":\"0.3em\",/** Film block rise (body, labels, counter pill). */\"em-0_5\":\"0.5em\",/** Word reveal: fully below its clip mask. */\"em-1_1\":\"1.1em\"};const scale={/** Drawn from nothing: bars (scaleY), rules (scaleX), orbits, heartwood radius. */\"0\":0,/** Grow start: a ring begins at a fifth of its size. */\"0_2\":.2,/** Heartwood start when the mark draws itself on. */\"0_4\":.4,/** Disc landing about the heartwood. */\"0_6\":.6,/** Secondary objects arriving: chips, supporting marks. */\"0_7\":.7,/** Ring radius settle: each ring grows out from 92% so it never crosses the ring inside it. */\"0_92\":.92,/** Press. */\"0_97\":.97,/** Rest. */\"1\":1,/** Breathe peak. */\"1_025\":1.025,/** Attention halo, expanding away from its control. */\"1_5\":1.5};const opacity={\"0\":0,/** Halo start. */\"0_35\":.35,\"1\":1};const rotate={/** A mark turns 14° into its resting angle as it lands. */settle:-14,/** One full revolution. */turn:360};const motion={enter:{default:{transition:{duration:240,delay:0,easing:[.2,.8,.2,1],css:\"240ms cubic-bezier(0.2,0.8,0.2,1) 0ms\"},distance:10},part:{transition:{duration:240,delay:0,easing:[.2,.8,.2,1],css:\"240ms cubic-bezier(0.2,0.8,0.2,1) 0ms\"},stagger:170,/** First part. Each following part rises 2px less. */distance:8},rise:{transition:{duration:600,delay:0,easing:[.2,.8,.2,1],css:\"600ms cubic-bezier(0.2,0.8,0.2,1) 0ms\"},distance:6},grow:{transition:{duration:900,delay:0,easing:[.2,.8,.2,1],css:\"900ms cubic-bezier(0.2,0.8,0.2,1) 0ms\"},/** Opacity finishes before scale, so the object is solid while it is still growing. */opacity:{duration:600,delay:0,easing:[0,0,1,1],css:\"600ms cubic-bezier(0,0,1,1) 0ms\"},scaleFrom:.2},land:{transition:{duration:400,delay:0,easing:[.2,.8,.2,1],css:\"400ms cubic-bezier(0.2,0.8,0.2,1) 0ms\"},scaleFrom:.6},ringBorn:{transition:{duration:500,delay:0,easing:[.2,.8,.2,1],css:\"500ms cubic-bezier(0.2,0.8,0.2,1) 0ms\"},stagger:60,radiusFrom:.92,/** The heartwood appears before the first ring. */heartwood:{duration:300,delay:0,easing:[.2,.8,.2,1],css:\"300ms cubic-bezier(0.2,0.8,0.2,1) 0ms\"}},born:{width:{duration:400,delay:0,easing:[.2,.8,.2,1],css:\"400ms cubic-bezier(0.2,0.8,0.2,1) 0ms\"},height:{duration:500,delay:180,easing:[.2,.8,.2,1],css:\"500ms cubic-bezier(0.2,0.8,0.2,1) 180ms\"}},draw:{transition:{duration:600,delay:0,easing:[.2,.8,.2,1],css:\"600ms cubic-bezier(0.2,0.8,0.2,1) 0ms\"},stagger:60,scaleFrom:0},stroke:{transition:{duration:800,delay:0,easing:[.2,.8,.2,1],css:\"800ms cubic-bezier(0.2,0.8,0.2,1) 0ms\"},stagger:40},rule:{transition:{duration:600,delay:0,easing:[.2,.8,.2,1],css:\"600ms cubic-bezier(0.2,0.8,0.2,1) 0ms\"},/** A rule that spans a timeline or a whole section. */long:{duration:1200,delay:0,easing:[.2,.8,.2,1],css:\"1200ms cubic-bezier(0.2,0.8,0.2,1) 0ms\"}},orbit:{transition:{duration:1e3,delay:0,easing:[.2,.8,.2,1],css:\"1000ms cubic-bezier(0.2,0.8,0.2,1) 0ms\"},stagger:200,scaleFrom:0},settle:{transition:{duration:2100,delay:0,easing:[.2,.8,.2,1],css:\"2100ms cubic-bezier(0.2,0.8,0.2,1) 0ms\"},rotateFrom:-14},field:{transition:{duration:2100,delay:0,easing:[.2,.8,.2,1],css:\"2100ms cubic-bezier(0.2,0.8,0.2,1) 0ms\"}},sequence:{stagger:200},handoff:{delay:180}},text:{caption:{transition:{duration:500,delay:0,easing:[.7,0,.3,1],css:\"500ms cubic-bezier(0.7,0,0.3,1) 0ms\"},stagger:30,distance:\"1.1em\"},headline:{transition:{duration:800,delay:0,easing:[.7,0,.3,1],css:\"800ms cubic-bezier(0.7,0,0.3,1) 0ms\"},stagger:90,distance:\"1.1em\"},film:{transition:{duration:1100,delay:0,easing:[.7,0,.3,1],css:\"1100ms cubic-bezier(0.7,0,0.3,1) 0ms\"},stagger:60,distance:\"1.1em\"}},exit:{quick:{transition:{duration:200,delay:0,easing:[0,0,1,1],css:\"200ms cubic-bezier(0,0,1,1) 0ms\"},stagger:60},default:{transition:{duration:300,delay:0,easing:[0,0,1,1],css:\"300ms cubic-bezier(0,0,1,1) 0ms\"}},container:{transition:{duration:240,delay:240,easing:[0,0,1,1],css:\"240ms cubic-bezier(0,0,1,1) 240ms\"}},retract:{transition:{duration:300,delay:0,easing:[.8,0,.8,.2],css:\"300ms cubic-bezier(0.8,0,0.8,0.2) 0ms\"},stagger:30},unwrite:{transition:{duration:400,delay:0,easing:[.8,0,.8,.2],css:\"400ms cubic-bezier(0.8,0,0.8,0.2) 0ms\"},stagger:30},scene:{transition:{duration:600,delay:0,easing:[0,0,1,1],css:\"600ms cubic-bezier(0,0,1,1) 0ms\"}},board:{transition:{duration:800,delay:0,easing:[0,0,1,1],css:\"800ms cubic-bezier(0,0,1,1) 0ms\"}},film:{transition:{duration:700,delay:0,easing:[.7,0,.3,1],css:\"700ms cubic-bezier(0.7,0,0.3,1) 0ms\"},distance:\"0.3em\"},snap:{transition:{duration:1,delay:0,easing:[0,0,1,1],css:\"1ms cubic-bezier(0,0,1,1) 0ms\"}}},interact:{hover:{transition:{duration:240,delay:0,easing:[.2,.8,.2,1],css:\"240ms cubic-bezier(0.2,0.8,0.2,1) 0ms\"},/** Upward. */distance:6},press:{transition:{duration:120,delay:0,easing:[.2,.8,.2,1],css:\"120ms cubic-bezier(0.2,0.8,0.2,1) 0ms\"},scale:.97},morph:{fill:{duration:240,delay:0,easing:[.2,.8,.2,1],css:\"240ms cubic-bezier(0.2,0.8,0.2,1) 0ms\"},label:{duration:120,delay:0,easing:[0,0,1,1],css:\"120ms cubic-bezier(0,0,1,1) 0ms\"},/** Minimum time the in-progress state is shown. */pendingHold:1200},select:{transition:{duration:240,delay:0,easing:[.2,.8,.2,1],css:\"240ms cubic-bezier(0.2,0.8,0.2,1) 0ms\"}}},emphasis:{count:{transition:{duration:1400,delay:0,easing:[.2,.8,.2,1],css:\"1400ms cubic-bezier(0.2,0.8,0.2,1) 0ms\"},/** Headline-sized figures (millions). */long:{duration:2400,delay:0,easing:[.2,.8,.2,1],css:\"2400ms cubic-bezier(0.2,0.8,0.2,1) 0ms\"}},odometer:{transition:{duration:1200,delay:0,easing:[.7,0,.3,1],css:\"1200ms cubic-bezier(0.7,0,0.3,1) 0ms\"},stagger:90},verify:{transition:{duration:500,delay:0,easing:[.2,.8,.2,1],css:\"500ms cubic-bezier(0.2,0.8,0.2,1) 0ms\"},scaleFrom:.7},markDraw:{ring:{duration:1200,delay:0,easing:[.7,0,.3,1],css:\"1200ms cubic-bezier(0.7,0,0.3,1) 0ms\"},heartwood:{duration:900,delay:0,easing:[.7,0,.3,1],css:\"900ms cubic-bezier(0.7,0,0.3,1) 0ms\"},heartwoodFrom:.4},travel:{transition:{duration:700,delay:0,easing:[.7,0,.3,1],css:\"700ms cubic-bezier(0.7,0,0.3,1) 0ms\"},hold:700,/** The full range in one move home, never a cut back. */return:{duration:900,delay:0,easing:[.7,0,.3,1],css:\"900ms cubic-bezier(0.7,0,0.3,1) 0ms\"}}},ambient:{turn:{transition:{duration:4e4,delay:0,easing:[0,0,1,1],css:\"40000ms cubic-bezier(0,0,1,1) 0ms\"},rotate:360},orbit:{transition:{duration:26e3,delay:0,easing:[0,0,1,1],css:\"26000ms cubic-bezier(0,0,1,1) 0ms\"}},breathe:{transition:{duration:2400,delay:0,easing:[.4,0,.2,1],css:\"2400ms cubic-bezier(0.4,0,0.2,1) 0ms\"},scale:1.025},cue:{transition:{duration:2400,delay:0,easing:[.4,0,.2,1],css:\"2400ms cubic-bezier(0.4,0,0.2,1) 0ms\"},scale:1.5,opacityFrom:.35},swing:{transition:{duration:1200,delay:0,easing:[.7,0,.3,1],css:\"1200ms cubic-bezier(0.7,0,0.3,1) 0ms\"},interval:4e3}},loop:{board:{cycle:6e3,hold:4400,/** When the exit cascade is longer than ~500ms. */holdLong:4800},read:{hold:8e3},scene:{transition:{duration:400,delay:0,easing:[.7,0,.3,1],css:\"400ms cubic-bezier(0.7,0,0.3,1) 0ms\"}}}};/** A bezier tuple as a CSS timing function. */const css=e=>\"cubic-bezier(\"+e.join(\",\")+\")\";/** One CSS transition entry for a property, optionally with an extra delay (e.g. a stagger). */const tr=(t,prop,delay=t.delay)=>prop+\" \"+t.duration+\"ms \"+css(t.easing)+\" \"+delay+\"ms\";/** Milliseconds to frames (film is authored at 30fps). */const frames=(msValue,fps=30)=>Math.round(msValue*fps/1e3);/** Evaluate a bezier at progress p (0–1), for JS-driven motion: counters, variable axes, rAF loops. */const ease=e=>p=>{const[x1,y1,x2,y2]=e;if(p<=0)return 0;if(p>=1)return 1;let lo=0,hi=1,u=p;for(let i=0;i<22;i++){u=(lo+hi)/2;const x=3*(1-u)*(1-u)*u*x1+3*(1-u)*u*u*x2+u*u*u;if(xtypeof window!==\"undefined\"&&!!window.matchMedia&&window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;// \n// Annuli boards read their motion from the tokens above; short names for the board code\nconst M=motion,EZ=easing,SC=scale,bz=css,easeOf=ease;// Warm the connection to Vimeo before a player asks for it. DNS and TLS to\n// player.vimeo.com were sitting on the first film's critical path.\nlet vimeoPrimed=false;const primeVimeo=()=>{if(vimeoPrimed||typeof document===\"undefined\")return;vimeoPrimed=true;for(const href of[\"https://player.vimeo.com\",\"https://i.vimeocdn.com\",\"https://f.vimeocdn.com\"]){const link=document.createElement(\"link\");link.rel=\"preconnect\";link.href=href;link.crossOrigin=\"\";document.head.appendChild(link);}};const VIMEO_QUEUE_KEY=\"__nsmVimeoQueue\";// Three players may start together, 150ms apart. Enough to stop a page of\n// twenty tiles hitting Vimeo as one burst, without the long serial wait a\n// single-file queue produced.\nconst VIMEO_GAP_MS=150;const VIMEO_CONCURRENCY=3;const enqueueVimeo=job=>{const w=window;const q=w[VIMEO_QUEUE_KEY]??={items:[],active:0};q.items.push(job);const pump=()=>{while(q.active{q.active--;pump();},VIMEO_GAP_MS);}};pump();};const isFilmRow=x=>typeof x===\"object\"&&x!==null&&\"row\"in x;const CHAPTER_LABELS={\"bbc-nl-rebrand\":{chapter07:\"Channel OSP\"},\"doctor-who\":{chapter07:\"Cinemagraph Iconics\"},\"fifa-26-opening-titles-pitch\":{chapter07:\"Motion Theory\"}};// Chapters whose leftover CMS media should not render under the film grid\nconst CHAPTER07_HIDE_STILLS=new Set([\"doctor-who\",\"walking-with-dinosaurs\"]);// Projects where 08 Results is a chapter of its own: the heading renames and\n// the chapter carries its approach copy above the film.\nconst RESULTS_CHAPTER={// Annuli closes on an Outcome statement, Koto-style — no stats, no film yet\n\"annuli\":{label:\"Outcome\",copy:\"One ring carries the whole system. The mark holds at 24px and as a cast object, and the same ring sets the design system, the eight-screen app, the institutional dashboard and the motion grammar. Named for the annual rings a trunk lays down, Annuli counts them — a year is a ring, and a ring has to be earned. The film is next: the ring turning, the rim light finding it.\"},\"doctor-who\":{label:\"Dalek Product Promo\",copy:\"The Dalek gets the treatment a marque gives a car — studio light on metal, macro passes over rivet and grille, the silhouette speaking for itself. Playing it straight is the joke, and the craft.\"},\"death-valley\":{label:\"Title Sequence\"},\"green-planet-ar\":{label:\"Activation\"},\"whoniverse\":{label:\"Nebulas\"},\"fifa-26-opening-titles-pitch\":{label:\"Results\",copy:\"Pitch stage. FIFA presented as boards, style frames and an animated sequence. Both Telemundo routes developed through a client feedback round.\"},\"product-motion\":{label:\"SAAS\"}};// Projects that suppress 08 Results entirely — heading, stats and film.\n// CMS stat rows stay in place, so lifting a slug out of this set restores them.\nconst RESULTS_HIDE=new Set([\"walking-with-dinosaurs\",\"crystallum\",\"runrate\",\"runrate-old\",\"quadrant\"]);const CHAPTER07_LOOPS={// 60th-anniversary key art brought to life: stills that hold like print\n// and move like film. All four masters are true 1:1 (verified).\n\"doctor-who\":[{labelGroup:{title:\"\",films:[{row:[{id:\"1222082271\",label:\"Special 01\",ar:\"1 / 1\",sourceAr:1},{id:\"1222082193\",label:\"Special 02\",ar:\"1 / 1\",sourceAr:1},{id:\"1222082277\",label:\"Special 03\",ar:\"1 / 1\",sourceAr:1}]},{id:\"1222082285\",label:\"They're Back\",full:true,ar:\"1 / 1\",sourceAr:1}]}}],\"planet-earth-iii\":[{labelGroup:{title:\"\",films:[{id:\"1219361160\",label:\"Room — top view\",full:true,ar:\"2 / 1\",sourceAr:2},{row:[{id:\"1219360520\",label:\"Iconic 9:16 logo\",ar:\"9 / 16\",sourceAr:9/16},{id:\"1219360536\",label:\"Making of — elephants\",span:2,ar:\"16 / 9\",fill:true}]}]}}],// Square studio masters, so sourceAr is 1 — without it the cover maths\n// assumes 16:9 and crops the car apart.\n\"bugatti-tourbillon\":[{labelGroup:{title:\"Studio\",films:[{id:\"1215629619\",label:\"Studio 02\",full:true,ar:\"1 / 1\",sourceAr:1},{row:[{id:\"1215629617\",label:\"Studio 03\",ar:\"1 / 1\",sourceAr:1,fill:true},{id:\"1215629616\",label:\"Studio 01\",span:2,ar:\"16 / 9\",sourceAr:1}]}]}}],\"dreamworks-channel-idents\":[{labelGroup:{title:\"Idents\",// Three box ratios across four scales. Every master is 16:9, so\n// sourceAr stays at the default and the player covers the box —\n// the square and 4:3 boxes crop the sides of a centred frame.\n// Scale follows the film: the strongest get the largest or most\n// unusual boxes, the weakest get modest ones — but always bounded\n// by a neighbour, never floating small on open black. Po appears\n// here as well as in the band above; the band is a 2:1 crop, this\n// is a different framing of the same ident.\n// Ratios inside each row are chosen so the boxes finish level —\n// the shorter film crops taller rather than leaving black beneath\n// it. Po takes the tall slot; it is the strongest ident and earns\n// the most severe crop.\n// Natural ratios kept. Where a row would leave black beneath the\n// shorter box, that box fills instead and the player crops further\n// into the film — the frame gives way, not the layout.\nfilms:[{id:\"1204506883\",label:\"Puss in Boots\",full:true,ar:\"16 / 9\"},{row:[{id:\"1204508461\",label:\"Mr. Peabody & Sherman\",span:2,ar:\"16 / 9\",fill:true},{id:\"1204506885\",label:\"Kung Fu Panda\",ar:\"4 / 5\"}]},{id:\"1204506882\",label:\"Home\",ar:\"4 / 3\"},{id:\"1204506884\",label:\"Penguins of Madagascar\",ar:\"4 / 3\"},{row:[{id:\"1204508752\",label:\"The Boss Baby\",ar:\"1 / 1\",fill:true},{id:\"1204508195\",label:\"Voltron\",span:2,ar:\"16 / 9\"}]},{id:\"1204508229\",label:\"Trollhunters\",full:true,ar:\"16 / 9\"}]}}],\"bbc-nl-rebrand\":[{labelGroup:{title:\"Bumpers\",layout:\"staggered\",films:[{id:\"1216105691\",label:\"Channel OSP 01\",ar:\"16 / 9\"},{id:\"1216105690\",label:\"Channel OSP 02\",ar:\"16 / 9\"}]}},{labelGroup:{title:\"Openers\",// Colour 2 drops to the next row, leaving the space beside\n// Colour 1 empty; anything after the pair follows normally.\nfilms:[{id:\"1216255157\",label:\"Colour 1\",ar:\"16 / 9\"},{id:\"1216246748\",label:\"Colour 2\",ar:\"16 / 9\"},{id:\"1216254422\",label:\"Opener ATV\",ar:\"16 / 9\"}]}},{labelGroup:{title:\"Closers\",films:[{id:\"1216254420\",label:\"5s Colour 1\",ar:\"16 / 9\"},{id:\"1216246837\",label:\"5s Colour 2\",ar:\"16 / 9\"}]}},{labelGroup:{title:\"End Boards\",films:[{id:\"1216234996\",label:\"End Board 01\",ar:\"16 / 9\"},{id:\"1216234997\",label:\"End Board 02\",ar:\"16 / 9\"}]}},{labelGroup:{title:\"Promo Opener\",films:[{id:\"1216246185\",label:\"Opener ATV\",ar:\"16 / 9\"},{id:\"1216254419\",label:\"Closer\",ar:\"16 / 9\"}]}},{labelGroup:{title:\"Pointers\",films:[{id:\"1216254676\",label:\"Next\",ar:\"16 / 9\"},{id:\"1216254421\",label:\"Strap\",ar:\"16 / 9\"}]}},{labelGroup:{title:\"ECS\",films:[{id:\"1216254472\",label:\"Promo / Image\",full:true,ar:\"16 / 9\"}]}}],// FIFA 26 Motion Theory — 20 type studies, every master a true 1280x1280\n// square (verified). Band opener and closer crop the square to 2:1.\n\"fifa-26-opening-titles-pitch\":[{labelGroup:{title:\"\",films:[{id:\"1222670811\",label:\"Type study 01\",full:true,ar:\"2 / 1\",sourceAr:1},{row:[{id:\"1222670184\",label:\"Type study 02\",ar:\"1 / 1\",sourceAr:1},{id:\"1222670186\",label:\"Type study 03\",ar:\"1 / 1\",sourceAr:1},{id:\"1222670187\",label:\"Type study 04\",ar:\"1 / 1\",sourceAr:1}]},{row:[{id:\"1222670185\",label:\"Type study 05\",ar:\"1 / 1\",sourceAr:1},{id:\"1222670253\",label:\"Type study 06\",ar:\"1 / 1\",sourceAr:1},{id:\"1222670268\",label:\"Type study 07\",ar:\"1 / 1\",sourceAr:1}]},{row:[{id:\"1222670317\",label:\"Type study 08\",ar:\"1 / 1\",sourceAr:1},{id:\"1222670343\",label:\"Type study 09\",ar:\"1 / 1\",sourceAr:1},{id:\"1222670396\",label:\"Type study 10\",ar:\"1 / 1\",sourceAr:1}]},{row:[{id:\"1222670425\",label:\"Type study 11\",ar:\"1 / 1\",sourceAr:1},{id:\"1222670468\",label:\"Type study 12\",ar:\"1 / 1\",sourceAr:1},{id:\"1222670509\",label:\"Type study 13\",ar:\"1 / 1\",sourceAr:1}]},{row:[{id:\"1222670534\",label:\"Type study 14\",ar:\"1 / 1\",sourceAr:1},{id:\"1222670557\",label:\"Type study 15\",ar:\"1 / 1\",sourceAr:1},{id:\"1222670656\",label:\"Type study 16\",ar:\"1 / 1\",sourceAr:1}]},{row:[{id:\"1222670677\",label:\"Type study 17\",ar:\"1 / 1\",sourceAr:1},{id:\"1222670694\",label:\"Type study 18\",ar:\"1 / 1\",sourceAr:1},{id:\"1222670731\",label:\"Type study 19\",ar:\"1 / 1\",sourceAr:1}]},{id:\"1222670807\",label:\"Type study 20\",full:true,ar:\"2 / 1\",sourceAr:1}]}},{labelGroup:{title:\"Breakbumpers\",films:[{id:\"1222669781\",label:\"Scissor kick\",full:true,ar:\"16 / 9\"},{row:[{id:\"1222669667\",label:\"Football kick\",ar:\"16 / 9\"},{id:\"1222669664\",label:\"Football player\",ar:\"16 / 9\"}]},{id:\"1222669665\",label:\"Football close-up — closer\",full:true,ar:\"16 / 9\"}]}}],// Creature R&D loops. The two turntable masters are true 1:1 (verified\n// 1280/1920 square); the rest are 16:9. The films replace the CMS still,\n// which CHAPTER07_HIDE_STILLS keeps out from under the grid.\n\"walking-with-dinosaurs\":[{labelGroup:{title:\"\",films:[{id:\"1215295735\",label:\"T-Rex — sequence\",full:true,ar:\"16 / 9\"},{row:[{id:\"1217056864\",label:\"T-Rex — wireframe\",ar:\"1 / 1\",sourceAr:1},{id:\"1217055522\",label:\"T-Rex — turntable\",ar:\"1 / 1\",sourceAr:1}]},{row:[{id:\"1215295737\",label:\"Veluum — sequence\",ar:\"16 / 9\"},{id:\"1215295736\",label:\"WWD — R&D\",ar:\"16 / 9\"}]}]}}]};// full: true runs edge to edge; the rest pair up two across. Alternating the\n// two stops eight 16:9 films reading as a contact sheet.\n// ar: the film's own aspect ratio, when it is not 16:9. Getting this wrong is\n// what letterboxes the player inside its box and leaves grey bars.\n// loop: play the chapter like the full-bleed band — silent, looping, no player\n// chrome and no caption — rather than as click-to-play films that carry sound.\nconst MOTION={// Studio and DeepScreen loops lead (all true 2:1); in-situ closes small\n\"green-planet-ar\":{loop:true,films:[{id:\"1222176649\",label:\"Lifeline\",full:true,ar:\"2 / 1\"},{id:\"1222176650\",label:\"DeepScreen Pulse\",full:true,ar:\"2 / 1\"},{id:\"1222176648\",label:\"DeepScreen\",full:true,ar:\"2 / 1\"},{id:\"1215608749\",label:\"In Situ\",ar:\"16 / 9\"}]}};/** slug → a single silent loop that closes 08 Results */const RESULTS={\"bugatti-tourbillon\":{id:\"1215629618\",label:\"Studio 04\",full:true,ar:\"1 / 1\"},\"bbc-nl-rebrand\":{id:\"1216090446\",label:\"BBC NL Montage\",full:true},\"planet-earth-iii\":{id:\"1215607530\",label:\"PEIII Event — Making Of\",full:true},\"death-valley\":{id:\"1216085898\",label:\"Death Valley — Title Sequence\",full:true},\"green-planet-ar\":{id:\"1215608437\",label:\"TGP — Activation\",full:true},// 2.39:1 scope master, with sound — verified 1920x804\n\"doctor-who\":{id:\"1222045477\",label:\"Dalek — Product Commercial\",full:true,ar:\"1920 / 804\"},// 1.4:1 master — verified 1792x1280, box at true ratio so it shows whole\n\"whoniverse\":{id:\"1222518949\",label:\"Nebulas\",full:true,ar:\"1792 / 1280\"}};// Projects whose 08 section carries a wall of films rather than one. Each\n// entry is a full-width film or a { row } of side-by-side films; every box\n// ar is the film's true ratio (all verified), so nothing crops.\nconst RESULTS_ROWS={// FIFA 26 CG hero films — all verified 1920x1080\n\"fifa-26-opening-titles-pitch\":[{id:\"1222671119\",label:\"FIFA 26 — edit\",full:true,ar:\"16 / 9\"}],\"product-motion\":[// SaaS demos + Digital Carousel — all verified 16:9\n{row:[{id:\"1226955120\",label:\"SaaS Demo 03\",ar:\"16 / 9\"},{id:\"1226955122\",label:\"SaaS Demo 02\",ar:\"16 / 9\"}]},{row:[{id:\"1226955119\",label:\"SaaS Demo 01\",ar:\"16 / 9\"},{id:\"1226955118\",label:\"Digital Carousel\",ar:\"16 / 9\"}]},{row:[{id:\"1222527532\",label:\"Glassmorph 02\",ar:\"1 / 1\"},{id:\"1222527505\",label:\"Glassmorph 01\",ar:\"1 / 1\"},{id:\"1222527544\",label:\"Glassmorph 03\",ar:\"1 / 1\"}]},{row:[{id:\"1222527507\",label:\"Brands in motion\",ar:\"16 / 9\"},{id:\"1222527504\",label:\"Find facts\",ar:\"16 / 9\"}]},// Phyto A brightening treatment — verified 1920x1080, own gold title\n{id:\"1229906171\",label:\"SkinCeuticals\",ar:\"16 / 9\",sound:true,titled:true}],// A Perfect Planet key art — all verified 2160x2160. sound: press to\n// play with the composed score (Vimeo's own button; one at a time).\n\"a-perfect-planet\":[{id:\"1225229716\",label:\"Iconic\",full:true,ar:\"1 / 1\",sound:true},{row:[{id:\"1225230244\",label:\"Whale Oceans\",ar:\"1 / 1\",sound:true},{id:\"1225229715\",label:\"Flamingo\",ar:\"1 / 1\",sound:true}]},{id:\"1225229717\",label:\"Human\",full:true,ar:\"1 / 1\",sound:true},{row:[{id:\"1225230321\",label:\"Wolf Light\",ar:\"1 / 1\",sound:true},{id:\"1225229718\",label:\"Eagle\",ar:\"1 / 1\",sound:true}]}]};/** slug → the single film that replaces the full-bleed still, with its ratio */const FULL_BLEED={// B4 form assembly drift — 1920x1080 verified from the player config,\n// 6s, silent, so it runs as a loop behind the project head\n\"annuli\":{id:\"1224652218\",ar:16/9},\"dreamworks-channel-idents\":{id:\"1204506885\",ar:16/9},// Triptych master is 2:1, not 16:9 — see the note on `fit` below.\n\"bugatti-tourbillon\":{id:\"1215576479\",ar:426/214},\"bbc-nl-rebrand\":{id:\"1216105473\",ar:16/9},// Regen logo loop — 2560x1280, a true 2:1 like the Dalek loop it replaced\n\"doctor-who\":{id:\"1222064020\",ar:2},\"planet-earth-iii\":{id:\"1215607292\",ar:2},// WATCH EDIT 2_colour — 2.37:1, matching the studio's wide master format\n\"rolex-oyster-perpetual-cosmograph\":{id:\"1216796334\",ar:2.37},// WWD TEASER FULL_1x1 — square master shown whole: the band takes the\n// film's own ratio instead of cropping it\n\"walking-with-dinosaurs\":{id:\"1217057830\",ar:1,uncropped:true},// Product Motion SaaS montage — 3840x2160 16:9, carries audio: click to\n// FIFA 26 closer — verified 1920x1080, shown whole after Approach\n\"fifa-26-opening-titles-pitch\":{id:\"1222669666\",ar:16/9,uncropped:true},// WHONIVERSE end-resolve — true 2560x1080 (verified), shown whole\n\"whoniverse\":{id:\"1222517338\",ar:2560/1080,uncropped:true},// Crystallum master carries the Lux Aeterna audio, so it does not autoplay:\n// the band shows Vimeo's own play button and plays with sound on click.\n// NOTE: 16:9 is the embed's claim, unverified — the film returned 401\n// (privacy) at config time; re-verify once its embed allowlist is fixed.\n\"crystallum\":{id:\"1179278793\",ar:16/9,uncropped:true,sound:true},// TGP heartbeat — square master, same hard crop in the band\n\"green-planet-ar\":{id:\"1215608136\",ar:1}};const slugNow=()=>window.location.pathname.split(\"/\").filter(Boolean).pop()||\"\";// Silent, looping, no player chrome — Vimeo's own title, byline, avatar and\n// controls are all suppressed, so the film reads as footage rather than a post.\nconst LOOPING=\"background=1&autoplay=1&loop=1&muted=1&autopause=0\";// Click to play, one at a time: these carry sound, so starting one stops the last.\nconst INTERACTIVE=\"autopause=1\";// Vimeo is the only third party that sets cookies here. Until the visitor\n// accepts in the consent banner, every player runs in do-not-track mode.\nconst CONSENT_KEY=\"nsm-cookie-consent\";const trackingAllowed=()=>{try{return localStorage.getItem(CONSENT_KEY)===\"granted\";}catch{return false;}};const DNT=()=>trackingAllowed()?\"dnt=0\":\"dnt=1\";const player=(id,opts,title)=>{const iframe=document.createElement(\"iframe\");iframe.title=title;iframe.setAttribute(\"frameborder\",\"0\");iframe.setAttribute(\"referrerpolicy\",\"strict-origin-when-cross-origin\");iframe.setAttribute(\"allow\",\"autoplay; fullscreen; picture-in-picture\");Object.assign(iframe.style,{position:\"absolute\",top:\"0\",left:\"0\",width:\"100%\",height:\"100%\",border:\"0\"});// Do-not-track stays on until the visitor accepts cookies in the banner\niframe.dataset.src=`https://player.vimeo.com/video/${id}?title=0&byline=0&portrait=0&badge=0&${DNT()}&${opts}`;return iframe;};/**\n * Loads an iframe only once it is nearly in view, then stops watching it.\n * Pacing is handled centrally by enqueueVimeo, shared across every override.\n */const lazily=frames=>{const io=new IntersectionObserver(entries=>{for(const e of entries){if(!e.isIntersecting)continue;const f=e.target;io.unobserve(f);const url=f.dataset.src;if(url){delete f.dataset.src;enqueueVimeo(()=>{f.src=url;});}}},{rootMargin:\"300px\"});for(const f of frames)io.observe(f);return io;};const GUTTER=8;/** the box a film sits in: fixes its ratio and gives it an opaque backdrop */const stage=film=>{const box=document.createElement(\"div\");Object.assign(box.style,{position:\"relative\",width:\"100%\",aspectRatio:film.ar??\"16 / 9\",background:\"#1A1916\",overflow:\"hidden\"});return box;};const emptyCellFor=bucket=>{const blank=document.createElement(\"div\");blank.setAttribute(\"aria-hidden\",\"true\");bucket.push(blank);return blank;};const isChapter07Group=item=>\"labelGroup\"in item;/**\n * Cancels a section's own padding so films sit near the viewport edge, leaving\n * only the gutter — headings above keep their inset.\n */const bleedInto=(host,grid,onBleed)=>()=>{const pad=parseFloat(getComputedStyle(host).paddingLeft)||0;const out=Math.max(0,pad-GUTTER);grid.style.marginLeft=-out+\"px\";grid.style.marginRight=-out+\"px\";grid.style.width=`calc(100% + ${out*2}px)`;if(onBleed)onBleed(out);// one across on narrow screens, where a pair would be unreadable\n grid.style.gridTemplateColumns=host.clientWidth<720?\"1fr\":\"repeat(2, 1fr)\";};/** 07 Motion — replaces the chapter's still grid with the project's films */export function withVideoGrid(Component){return props=>{const ref=useRef(null);useEffect(()=>{const host=ref.current?.firstElementChild;if(!host)return;const slug=slugNow();const chapter07=CHAPTER_LABELS[slug]?.chapter07;// Headings carry no number now, so the section is found by name. The\n// set includes every per-project rename, otherwise a renamed heading\n// stops matching on the next mount and the films silently vanish.\nconst HEADINGS=[\"Motion\",...Object.values(CHAPTER_LABELS).map(v=>v.chapter07).filter(Boolean)];const isHeading=t=>{const s=t.trim().toLowerCase();return HEADINGS.some(n=>String(n).toLowerCase()===s);};let picked=null;for(const el of host.querySelectorAll(\"*\")){const text=el.textContent||\"\";if(!isHeading(text))continue;let depth=0;for(let p=el;p&&p!==host;p=p.parentElement)depth++;const size=text.trim().length;if(!picked||depth>picked.depth||depth===picked.depth&&size{if(host.querySelector(\"img, iframe, video\"))return true;for(const el of host.querySelectorAll(\"*\")){const bg=getComputedStyle(el).backgroundImage;if(bg&&bg!==\"none\"&&bg.includes(\"url(\"))return true;}return false;};const settle=()=>{host.style.display=hasMedia()?\"\":\"none\";};const loops=CHAPTER07_LOOPS[slug];if(picked&&loops?.length){host.style.display=\"\";const grid=document.createElement(\"div\");Object.assign(grid.style,{display:\"grid\",gap:GUTTER+\"px\",marginTop:\"8px\"});const frames=[];const coverFits=[];const hiddenEmpty=[];const blankCells=[];const groupLabels=[];const textCell=document.createElement(\"div\");Object.assign(textCell.style,{alignSelf:\"center\",justifySelf:\"start\",width:\"100%\"});const note=Array.from(host.querySelectorAll(\"p\")).find(el=>{if(!el.textContent?.trim())return false;if(isHeading(el.textContent||\"\"))return false;if(grid.contains(el))return false;return true;});let noteParent=null;let noteNext=null;let noteWrapper=null;let noteWrapperDisplay=\"\";let noteDisplay=\"\";const noteClones=[];if(note){noteParent=note.parentElement;noteNext=note.nextSibling;textCell.appendChild(note);noteDisplay=note.style.display;note.style.display=\"none\";const paragraphs=(note.textContent||\"\").split(/\\n\\s*\\n+/).map(text=>text.trim()).filter(Boolean);const lineHeight=getComputedStyle(note).lineHeight;const rhythm=!lineHeight||lineHeight===\"normal\"?\"1em\":lineHeight;for(let i=0;i0?rhythm:\"0px\";textCell.appendChild(clone);noteClones.push(clone);}if(noteParent&&!noteParent.textContent?.trim()&&!noteParent.querySelector(\"img, iframe, video\")){noteWrapper=noteParent;noteWrapperDisplay=noteWrapper.style.display;noteWrapper.style.display=\"none\";}}const addLoopCell=film=>{const cell=document.createElement(\"div\");if(film.span&&film.span>1)cell.style.gridColumn=`span ${film.span}`;else if(film.full||film.width)cell.style.gridColumn=\"1 / -1\";const box=stage(film);if(film.fill){box.style.aspectRatio=\"auto\";box.style.height=\"100%\";}if(film.width){box.style.width=film.width;box.style.marginLeft=film.align===\"right\"?\"auto\":film.align===\"center\"?\"auto\":\"0\";box.style.marginRight=film.align===\"left\"?\"auto\":film.align===\"center\"?\"auto\":\"0\";}const f=player(film.id,LOOPING,film.label);f.style.pointerEvents=\"none\";const sourceAr=film.sourceAr??16/9;const fit=()=>{const w=box.clientWidth;const h=box.clientHeight;if(!w||!h)return;const over=w/h>sourceAr;Object.assign(f.style,{top:\"50%\",left:\"50%\",transform:\"translate(-50%, -50%)\",width:(over?w:Math.ceil(h*sourceAr))+2+\"px\",height:(over?Math.ceil(w/sourceAr):h)+2+\"px\"});};coverFits.push({host:box,fit});box.appendChild(f);cell.appendChild(box);frames.push(f);return cell;};const addGroupTitle=title=>{// a blank title renders no heading at all — no empty label,\n// no leftover top margin\nif(!title||!title.trim())return;const label=document.createElement(\"p\");label.textContent=title;Object.assign(label.style,{gridColumn:\"1 / -1\",margin:\"24px 0 0 0\",font:\"500 11px/1.2 'Geist', 'Geist Placeholder', sans-serif\",letterSpacing:\"0.18em\",textTransform:\"uppercase\",color:\"rgba(242, 237, 228, 0.6)\"});grid.appendChild(label);groupLabels.push(label);};// Chapter copy sits directly beneath the 07 heading, ahead of the\n// groups, rather than inside the first row.\ntextCell.style.gridColumn=\"1 / -1\";textCell.style.marginBottom=\"8px\";grid.appendChild(textCell);// A row spans the grid and lays its films out side by side at their\n// own ratios, so heights vary across the row instead of every tile\n// matching its neighbour.\nconst rowGrids=[];const appendItem=item=>{if(!isFilmRow(item)){grid.appendChild(addLoopCell(item));return;}const row=document.createElement(\"div\");Object.assign(row.style,{gridColumn:\"1 / -1\",display:\"grid\",gap:GUTTER+\"px\",alignItems:item.row.some(x=>x.fill)?\"stretch\":\"start\",gridTemplateColumns:`repeat(${item.row.length}, 1fr)`});const cols=item.row.reduce((n,x)=>n+(x.span??1),0);row.style.gridTemplateColumns=`repeat(${cols}, 1fr)`;rowGrids.push({el:row,count:cols});for(const film of item.row)row.appendChild(addLoopCell(film));grid.appendChild(row);};for(const item of loops){if(!isChapter07Group(item))continue;const group=item.labelGroup;addGroupTitle(group.title);if(group.layout===\"bumpersWithCopyRight\"){const lead=group.films[0];const tail=group.films[1];if(lead)appendItem(lead);grid.appendChild(emptyCellFor(blankCells));if(tail){const blank=document.createElement(\"div\");blank.setAttribute(\"aria-hidden\",\"true\");blankCells.push(blank);grid.appendChild(blank);appendItem(tail);}}else if(group.layout===\"staggered\"){// Same geometry as the bumpers stagger, but the cell\n// beside the lead film is left empty rather than\n// carrying copy.\nconst emptyCell=()=>{const blank=document.createElement(\"div\");blank.setAttribute(\"aria-hidden\",\"true\");blankCells.push(blank);return blank;};const lead=group.films[0];const tail=group.films[1];if(lead)appendItem(lead);grid.appendChild(emptyCell());if(tail){grid.appendChild(emptyCell());appendItem(tail);}// anything past the staggered pair pairs up as usual\nfor(const extra of group.films.slice(2))appendItem(extra);}else{for(const film of group.films)appendItem(film);}}primeVimeo();host.appendChild(grid);const hasRenderedMedia=root=>{if(root.querySelector(\"img, iframe, video\"))return true;for(const el of[root,...Array.from(root.querySelectorAll(\"*\"))]){const bg=getComputedStyle(el).backgroundImage;if(bg&&bg!==\"none\"&&bg.includes(\"url(\"))return true;}return false;};// Leftover CMS media from an earlier layout of this section —\n// hide only the media lists. The section heading and copy can\n// share a wrapper with them, so recurse into any block holding\n// the label rather than hiding it whole.\nif(CHAPTER07_HIDE_STILLS.has(slug)){const hideIn=root=>{for(const child of Array.from(root.children)){// the grid and the label are kept whole — never\n// descend into them, their media is the content\nif(child===grid||labelEl&&child===labelEl)continue;if(child.contains(grid)||labelEl&&child.contains(labelEl)){hideIn(child);continue;}if(!hasRenderedMedia(child))continue;hiddenEmpty.push({el:child,display:child.style.display});child.style.display=\"none\";}};hideIn(host);}// Collection list shells can stay behind as empty boxes when a\n// project's list has no items. Hide truly empty media containers.\nfor(const el of host.querySelectorAll(\"*\")){if(el===grid||el.contains(grid))continue;if(el===textCell||textCell.contains(el))continue;if(!el.childElementCount)continue;if(hasRenderedMedia(el))continue;if(el.textContent?.trim())continue;hiddenEmpty.push({el,display:el.style.display});el.style.display=\"none\";}const bleed=bleedInto(host,grid,out=>{textCell.style.paddingLeft=out+\"px\";textCell.style.paddingRight=out+\"px\";for(const label of groupLabels){label.style.paddingLeft=out+\"px\";label.style.paddingRight=out+\"px\";}for(const blank of blankCells)blank.style.display=host.clientWidth<720?\"none\":\"\";for(const r of rowGrids){r.el.style.gridTemplateColumns=host.clientWidth<720?\"1fr\":host.clientWidth<1e3&&r.count>2?\"repeat(2, 1fr)\":`repeat(${r.count}, 1fr)`;}});bleed();const ro=new ResizeObserver(bleed);ro.observe(host);const coverRo=new ResizeObserver(()=>{for(const item of coverFits)item.fit();});for(const item of coverFits){coverRo.observe(item.host);item.fit();}const io=lazily(frames);return()=>{io.disconnect();ro.disconnect();coverRo.disconnect();grid.remove();if(note&¬eParent){note.style.display=noteDisplay;if(noteNext&¬eNext.parentNode===noteParent)noteParent.insertBefore(note,noteNext);else noteParent.appendChild(note);}for(const clone of noteClones)clone.remove();if(noteWrapper)noteWrapper.style.display=noteWrapperDisplay;for(const item of hiddenEmpty)item.el.style.display=item.display;if(labelEl)labelEl.textContent=labelText;};}const chapter=MOTION[slug];const list=chapter?.films;if(!list||!list.length){// no films for this project — fall back to whatever stills it has\nsettle();const mo=new MutationObserver(settle);mo.observe(host,{childList:true,subtree:true,attributes:true,attributeFilter:[\"style\",\"src\"]});const t=setTimeout(()=>{settle();mo.disconnect();},2500);return()=>{clearTimeout(t);mo.disconnect();host.style.display=\"\";if(labelEl)labelEl.textContent=labelText;};}host.style.display=\"\";if(host.querySelector(\"[data-nsm-results-grid]\"))return;const grid=document.createElement(\"div\");grid.setAttribute(\"data-nsm-results-grid\",\"1\");Object.assign(grid.style,{display:\"grid\",gap:GUTTER+\"px\",marginTop:\"8px\"});const frames=[];for(const v of list){const cell=document.createElement(\"div\");Object.assign(cell.style,{display:\"flex\",flexDirection:\"column\",gap:\"12px\"});if(v.full)cell.style.gridColumn=\"1 / -1\";const box=stage(v);const f=player(v.id,chapter.loop?LOOPING:INTERACTIVE,v.label);if(chapter.loop)f.style.pointerEvents=\"none\";box.appendChild(f);cell.appendChild(box);// A looping chapter is a wall of footage; captions would label\n// frames nobody can pause or read a title on anyway.\nif(!chapter.loop&&chapter.captions!==false){const cap=document.createElement(\"p\");cap.textContent=v.label;Object.assign(cap.style,{margin:\"0\",font:\"500 11px/1.2 'Geist', 'Geist Placeholder', sans-serif\",letterSpacing:\"0.18em\",textTransform:\"uppercase\",color:\"rgba(242, 237, 228, 0.6)\"});cell.appendChild(cap);}grid.appendChild(cell);frames.push(f);}host.appendChild(grid);const bleed=bleedInto(host,grid);bleed();const ro=new ResizeObserver(bleed);ro.observe(host);const io=lazily(frames);return()=>{io.disconnect();ro.disconnect();grid.remove();if(labelEl)labelEl.textContent=labelText;};},[]);return /*#__PURE__*/_jsx(\"div\",{ref:ref,style:{display:\"contents\"},children:/*#__PURE__*/_jsx(Component,{...props})});};}/** 08 Results — closes the chapter with one full-width silent loop */// Projects whose 02 Approach section is hidden for now (copy pending).\nconst APPROACH_HIDE=new Set([\"product-motion\"]);// Koto / Pony arrangement for selected projects: the full-bleed opens the page\n// above the Challenge statement, the Approach copy is split into labelled\n// interludes (one per paragraph, the bold lead-in becomes the label) and\n// chapter headings are renamed by role.\nconst MEDIA_FIRST=new Set([\"annuli\",\"runrate\",\"quadrant\"]);// slugs whose Full Bleed still section is hidden outright\nconst FULL_BLEED_HIDE=new Set([\"product-motion\",\"runrate\",\"runrate-old\",\"the-universe\",\"quadrant\"]);const SPLIT_APPROACH=new Set([\"annuli\",\"runrate\",\"quadrant\"]);const HEADING_RENAMES={};// Template chapters replaced by the discipline interludes below (label leaf text, lower-case)\nconst HIDE_CHAPTERS={\"annuli\":[\"sequence stills\",\"identity system\",\"cg work\",\"objects\",\"motion\",\"application\"],// Runrate case (draft): same Koto/Pony arrangement as Annuli; media lives in the interludes below\n\"runrate\":[\"sequence stills\",\"identity system\",\"cg work\",\"objects\",\"motion\",\"application\"],// Quadrant case (draft): same Koto/Pony arrangement; media lives in the interludes below\n\"quadrant\":[\"sequence stills\",\"identity system\",\"cg work\",\"objects\",\"motion\",\"application\"]};// Interactive cells: self-contained documents shown in a sandboxed iframe (scripts only, no same-origin).\n// Runrate \"Try it\": tap a question, the answer panel animates with the product's own figures.\nconst EMBEDS={\"runrate-tryit\":'\\n\\n\\n
\\n \\n

Try it

\\n

Ask a question.

\\n

Every number
has a receipt.

\\n

Tap a question. Runrate opens the screen that answers it, and the figures that prove it.

\\n
\\n

Sample data \\xb7 scripted demo

\\n
\\n
\\n \\n
\\n

MRR \\xb7 September

\\n

\\xa31,240,318

\\n

↑ 5.1% vs Aug

\\n

Reconciled to billing and bank 4 minutes ago

\\n \\n \\n \\n \\n \\n \\n \\n
\\n

Customers staying

98.1%

\\n

Runway

22 mo

\\n

At risk

\\xa321.8k

\\n
\\n
\\n \\n
\\n
\\n ⚠

3 accounts likely to leave

\\xa321.8k MRR \\xb7 by 15 October

\\n

\\xa321.8k

\\n
\\n
CustomerMRRChangeHealthRenews
\\n
\\n
Orbit FreightScale \\xb7 annual
\\xa37,340−18.2%At risk \\xb7 41%15 Oct
\\n
Dunmore LogisticsScale \\xb7 monthly
\\xa33,860−6.4%Watch \\xb7 68%30 Nov
\\n
Corvid MediaGrowth \\xb7 annual
\\xa34,120−2.1%Watch \\xb7 72%9 Dec
\\n
\\n
\\n \\n
\\n OF\\n

Orbit Freight At risk \\xb7 41%

\\n

Likely to leave by 15 October. Here is why.

\\n

Usage \\xb7 30 days

-40%

Active seats down from 38 to 21 since 1 September.

\\n

Invoices

2 overdue

\\xa314,680 outstanding \\xb7 34 and 12 days late. Matched to no bank line.

\\n

Renewal

41 days

Contract ends 15 October. No renewal meeting in HubSpot.

\\n

Payment card

Expired

Card on file expired 31 August; the last two payments failed.

\\n

Every number has a receipt

46 invoices \\xb7 44 payments \\xb7 44 bank lines matched

\\n
\\n
\\n
\\n
\\n\\n
\\n'};const INTERLUDE_MEDIA={// Quadrant (draft) — Pony shape: Challenge / Strategy / Identity / Application, every cell a loop where one exists\n\"quadrant\":{\"challenge\":[[{\"url\":\"https://framerusercontent.com/assets/j316lThWzkhukvLTLLDqz8wvxr4.mp4\",\"ar\":\"2160 / 1030\",\"video\":true}],[{\"url\":\"https://framerusercontent.com/assets/uGNLKEEbRIL23NM3ymvCpH4ZMQ.mp4\",\"ar\":\"1920 / 1074\",\"video\":true}]],\"strategy\":[[{\"url\":\"https://framerusercontent.com/assets/GqycxFs8XZTnyqrtdIPtkvdqw.mp4\",\"ar\":\"16 / 9\",\"video\":true}],[{\"url\":\"https://framerusercontent.com/assets/Y4rTEobTW5zlXaqaJHxyTYbAmoc.mp4\",\"ar\":\"1920 / 1074\",\"video\":true}],[{\"url\":\"https://framerusercontent.com/assets/myvBD9kdYGoHlEwP1585RqsMlc.mp4\",\"ar\":\"1920 / 1074\",\"video\":true}]],\"identity\":[[{\"url\":\"https://framerusercontent.com/assets/GnVZqBuKoGjVlXfv7joiOFUMDg.mp4\",\"ar\":\"16 / 9\",\"video\":true}],[{\"url\":\"https://framerusercontent.com/assets/8IhVnikK2sxugaryNdUIwZ3JG1I.mp4\",\"ar\":\"1080 / 1240\",\"video\":true},{\"url\":\"https://framerusercontent.com/assets/rkQ1yEULxag2bsUF8nvx0WY78.mp4\",\"ar\":\"1080 / 1240\",\"video\":true}],[{\"url\":\"https://framerusercontent.com/assets/vvR53HlDpncor1kvdtgFmE5Jd8.mp4\",\"ar\":\"16 / 9\",\"video\":true}],[{\"url\":\"https://framerusercontent.com/assets/VpItqngTQFlxgy54B8msVkYcu0.mp4\",\"ar\":\"1080 / 1240\",\"video\":true},{\"url\":\"https://framerusercontent.com/assets/UUFZFEqQe5adKqGilj1IYPPerJA.mp4\",\"ar\":\"1080 / 1240\",\"video\":true}],[{\"url\":\"https://framerusercontent.com/assets/Namt3k0DW5oS8gHSFU6GSrhgAQ.mp4\",\"ar\":\"1920 / 1036\",\"video\":true}],[{\"url\":\"https://framerusercontent.com/assets/NNhgNaVGS7EfOTzcIQacNbw9tw.mp4\",\"ar\":\"1040 / 712\",\"video\":true},{\"url\":\"https://framerusercontent.com/assets/fhgdPWq15SEedGo4Xwx06dWkXE.mp4\",\"ar\":\"1040 / 712\",\"video\":true}],[{\"url\":\"https://framerusercontent.com/assets/GkC0RnYJRpxhvvRiRcSmsFwqk.mp4\",\"ar\":\"1040 / 712\",\"video\":true},{\"url\":\"https://framerusercontent.com/assets/iic82D8yhAVKqKfqbJzsPdZi24.mp4\",\"ar\":\"1040 / 712\",\"video\":true}],[{\"url\":\"https://framerusercontent.com/assets/cXyo10VzgJ2nezwhLUjOBtulqA.mp4\",\"ar\":\"1040 / 712\",\"video\":true},{\"url\":\"https://framerusercontent.com/assets/XS6ly6DW1D43G7nxEbfr2jIDDro.mp4\",\"ar\":\"1040 / 712\",\"video\":true}],[{\"url\":\"https://framerusercontent.com/assets/Ca3Jn6pMlNXVd3fWnJle4yRS8.mp4\",\"ar\":\"16 / 9\",\"video\":true}],[{\"url\":\"https://framerusercontent.com/assets/WAAPNG04GFgnSTwGNkXyy8yDE.mp4\",\"ar\":\"16 / 9\",\"video\":true}]],\"application\":[[{\"url\":\"https://framerusercontent.com/assets/TzXo72nLdGZjuaLyyUaHVvxMzg8.mp4\",\"ar\":\"16 / 10\",\"video\":true}],[{\"url\":\"https://framerusercontent.com/assets/FXpu7H4MxCY1vT4qf8om5hzcAyY.mp4\",\"ar\":\"1920 / 1074\",\"video\":true}],[{\"url\":\"https://framerusercontent.com/assets/Hn79NmWoGlwzYuKfOezWKsjwsk.mp4\",\"ar\":\"1920 / 1074\",\"video\":true}],[{\"url\":\"https://framerusercontent.com/assets/TVdJ0BxZ3D5gOidTLRpt3jjn6KM.mp4\",\"ar\":\"1920 / 1074\",\"video\":true}],[{\"url\":\"https://framerusercontent.com/images/gUdACrgiXksBEisyPaEnwUgFqM.jpg\",\"ar\":\"1920 / 1074\"},{\"url\":\"https://framerusercontent.com/images/TCjY4euFDVu9wZPB1RwWUEfFU.jpg\",\"ar\":\"1920 / 1074\"}],[{\"url\":\"https://framerusercontent.com/images/wrm8XYIeXyRhBnb6PghBnCE7qHc.jpg\",\"ar\":\"1920 / 1074\"}],[{\"url\":\"https://framerusercontent.com/images/nEM7e5vlm8j5CYl2TAAN82LMrrc.jpg\",\"ar\":\"4 / 5\"},{\"url\":\"https://framerusercontent.com/images/zOEONygZmSSEWh7SDXqV7Y7r3xM.jpg\",\"ar\":\"4 / 5\"},{\"url\":\"https://framerusercontent.com/images/qZ7274TPw1WeUc6idWmcS5UGw.jpg\",\"ar\":\"4 / 5\"}],[{\"url\":\"https://framerusercontent.com/images/PTJ93OSm6LpzGE7PHaYhuzZv7a0.jpg\",\"ar\":\"1920 / 1074\"}]]},\"annuli\":{\"challenge\":[[{\"url\":\"https://framerusercontent.com/images/MWzgwyNMRJ9qTKTwE6b8gfa0xXU.jpg\",\"ar\":\"16 / 9\"}]],\"strategy\":[[{\"url\":\"https://framerusercontent.com/images/ny85kM04OWnw3BbSYlKh8B5EszU.jpg\",\"ar\":\"1 / 1\"},{\"url\":\"https://framerusercontent.com/images/NVGBYQyEaNgYPPYgV9riZEOqa4w.jpg\",\"ar\":\"1 / 1\"}],[{\"url\":\"https://framerusercontent.com/images/3VKvhe6AHTstSFoQspUruyrokU.jpg\",\"ar\":\"16 / 9\"}]],\"identity\":[[{\"url\":\"https://framerusercontent.com/images/dtfkR7QxxRITEJy1547Vk06Y2M.jpg\",\"ar\":\"16 / 9\"},{\"url\":\"https://framerusercontent.com/images/cWYOJbzhTXYEsx8hnmNIu7GJKsI.jpg\",\"ar\":\"16 / 9\"}],[{\"url\":\"https://framerusercontent.com/images/Y7umS6C3yIq1p3R6nyCUh4bgLUM.jpg\",\"ar\":\"1 / 1\"},{\"url\":\"https://framerusercontent.com/images/EFLqkFaATh7Efsl7rDkvAfzIaA.jpg\",\"ar\":\"1 / 1\"},{\"url\":\"https://framerusercontent.com/images/tw1TRYAwO7ivUyWT0gtlmmhAeT4.jpg\",\"ar\":\"1 / 1\"}],[{\"lab\":true}],[{\"url\":\"https://framerusercontent.com/images/43wlAkydz7YwgmFcDGryPthw.jpg\",\"ar\":\"3 / 4\"},{\"url\":\"https://framerusercontent.com/images/sC7Y7M0whpTHuENotT5fdcr3U.jpg\",\"ar\":\"3 / 4\"}],[{\"url\":\"https://framerusercontent.com/images/55pMFFj6KRINgb9nd8LWZliKd1I.jpg\",\"ar\":\"16 / 9\"}],[{\"icons\":true,\"ar\":\"16 / 9\"},{\"dataviz\":true,\"ar\":\"16 / 9\"}],[{\"url\":\"https://framerusercontent.com/images/6LEEPxLTlxDtWL11042CCQTjXgQ.jpg\",\"ar\":\"16 / 9\"}],[{\"url\":\"https://framerusercontent.com/images/348HOAmR7xQX0jE9QjHWRIiU.jpg\",\"ar\":\"16 / 9\"},{\"url\":\"https://framerusercontent.com/images/WjD73A5lt25d3RWOpmzL94oM0.jpg\",\"ar\":\"16 / 9\"}],[{\"url\":\"https://framerusercontent.com/images/SM4oZdgHGaxNa9erVgMtTfqnuo.jpg\",\"ar\":\"1920 / 677\",\"vimeo\":\"1224652806\"}],[{\"forms\":true,\"ar\":\"16 / 9\"},{\"url\":\"https://framerusercontent.com/images/EMV9xEBJDjFJyBaW6TEUNI67ho.jpg\",\"ar\":\"16 / 9\"}],[{\"typo\":true,\"ar\":\"16 / 9\"}],[{\"url\":\"https://framerusercontent.com/images/vlE6J7PQxwEWf1eyHmATgs72jE.jpg\",\"ar\":\"16 / 9\"}]],\"application\":[[{\"url\":\"https://framerusercontent.com/images/pqKek8bo1GfQF1Itz7vte3Cq0I.jpg\",\"ar\":\"1920 / 526\",\"vimeo\":\"1224652946\"}],[{\"url\":\"https://framerusercontent.com/images/MTrv9KJ6GUdETxFN1HKKO8tmIg.jpg\",\"ar\":\"8 / 5\",\"vimeo\":\"1224653193\"}],[{\"evidence\":true,\"ar\":\"16 / 9\"},{\"card\":true,\"ar\":\"16 / 9\"}],[{\"url\":\"https://framerusercontent.com/images/1FdIlRdK37RARODqJLneX9rb8o.jpg\",\"ar\":\"16 / 9\"},{\"micro\":true,\"ar\":\"16 / 9\"}],[{\"social\":true,\"ar\":\"8 / 3\"}],[{\"url\":\"https://framerusercontent.com/images/Km0G9KHx0abNZZZXttDzmr0yfgM.jpg\",\"ar\":\"2880 / 4926\"}],[{\"url\":\"https://framerusercontent.com/images/ISGw39cCFmghdH0iHk6VyyTo.jpg\",\"ar\":\"16 / 9\"}],[{\"url\":\"https://framerusercontent.com/images/Tps7NhYfwCm3KUiDF9J1oQoTxo.jpg\",\"ar\":\"3 / 4\"},{\"url\":\"https://framerusercontent.com/images/jHbx3TI1LBUulIDypk70dg5Xw4.jpg\",\"ar\":\"3 / 4\"}],[{\"url\":\"https://framerusercontent.com/images/VPZBTCAg1Wx9P3f3HQrhXUnYPMY.jpg\",\"ar\":\"16 / 9\"}],[{\"url\":\"https://framerusercontent.com/images/GYwbjkPhZb4pTLn1hcjdHKmkrE.jpg\",\"ar\":\"3 / 4\"},{\"url\":\"https://framerusercontent.com/images/4GlirLX2wHVO0bE7n45sK6zYps.jpg\",\"ar\":\"3 / 4\"}],[{\"url\":\"https://framerusercontent.com/images/CIuWpwprqJW6MYcrb2VrZ2jygo.jpg\",\"ar\":\"16 / 9\"}],[{\"url\":\"https://framerusercontent.com/images/jongQYxTrW5YvfrgH5c8OKszoww.jpg\",\"ar\":\"2 / 3\"},{\"url\":\"https://framerusercontent.com/images/AR9X17il3TaaDk76v8pu9Czm0s.jpg\",\"ar\":\"2 / 3\"}]]},\"runrate\":{\"challenge\":[[{\"url\":\"https://framerusercontent.com/assets/bgAYWjYem1z3oOgR5AMCN28zjU.mp4\",\"ar\":\"16 / 9\",\"video\":true}]],\"strategy\":[[{\"url\":\"https://framerusercontent.com/assets/RPu1lgyDkzUc4ZtFC0WVb6kwZg.mp4\",\"ar\":\"16 / 9\",\"video\":true}],[{\"url\":\"https://framerusercontent.com/assets/Hi690VY4OoQnnwAEBvdrgyCjafI.mp4\",\"ar\":\"16 / 9\",\"video\":true}]],\"identity\":[[{\"url\":\"https://framerusercontent.com/assets/jZqrsHxbigdzGl1WOPWSgCP2AU.mp4\",\"ar\":\"16 / 9\",\"video\":true}],[{\"url\":\"https://framerusercontent.com/assets/1SFXPvbTPtbgH2jiLzoG6W2T3c.mp4\",\"ar\":\"1 / 1\",\"video\":true},{\"url\":\"https://framerusercontent.com/assets/YkWPuSTD0yV1atr9RbDCNUeRC7Y.mp4\",\"ar\":\"1 / 1\",\"video\":true}],[{\"url\":\"https://framerusercontent.com/assets/VHEAJN7FIJfoIENbpjjhaqSZE.mp4\",\"ar\":\"1 / 1\",\"video\":true},{\"url\":\"https://framerusercontent.com/assets/tdHNxR5A92crcxueaQAoxcK2m3k.mp4\",\"ar\":\"1 / 1\",\"video\":true}],[{\"url\":\"https://framerusercontent.com/assets/Nq0pjGur3LAq2FnHizk9VyMFas.mp4\",\"ar\":\"16 / 9\",\"video\":true}],[{\"url\":\"https://framerusercontent.com/assets/Ez5ieiQVq1IPrAMlJEbykXhGIQ.mp4\",\"ar\":\"2 / 1\",\"video\":true}]],\"motion\":[[{\"url\":\"https://framerusercontent.com/assets/wBreSbfXPMom1DtwWBr8RR2wc.mp4\",\"ar\":\"16 / 9\",\"click\":true,\"poster\":\"https://framerusercontent.com/images/fdJsgkjrY3HNqmesTzLqh2Xz8.jpg\"}]],\"product\":[[{\"url\":\"https://framerusercontent.com/assets/gFNUJFLSWOEmwDe536Rj1VRXk6I.mp4\",\"ar\":\"16 / 10\",\"video\":true}],[{\"html\":\"runrate-tryit\",\"ar\":\"1440 / 880\",\"arNarrow\":\"420 / 772\"}],[{\"url\":\"https://framerusercontent.com/assets/FnOy98La6Omuul3qPEHurElUJHg.mp4\",\"ar\":\"16 / 9\",\"video\":true}],[{\"url\":\"https://framerusercontent.com/assets/WPQfsrgqjbt3foqMHrybNk5zd6w.mp4\",\"ar\":\"16 / 9\",\"video\":true}],[{\"url\":\"https://framerusercontent.com/assets/kpfZBCgIyFbTHKEF4J4YAv0qaw4.mp4\",\"ar\":\"16 / 9\",\"video\":true}],[{\"url\":\"https://framerusercontent.com/images/bLk0Gh16YtynRD4tjll3dUHsC4.jpg\",\"ar\":\"4 / 5\"},{\"url\":\"https://framerusercontent.com/images/YqSJZd4hlmK931DPkNl2z57onU.jpg\",\"ar\":\"4 / 5\"}]],\"campaign\":[[{\"url\":\"https://framerusercontent.com/images/31vF1Hkqs6iP50iovApxjb4YHDo.jpg\",\"ar\":\"16 / 9\"}],[{\"url\":\"https://framerusercontent.com/images/IJkwlSAbqkUUL5b0wU8lgv9hqHI.jpg\",\"ar\":\"16 / 9\"},{\"url\":\"https://framerusercontent.com/images/FRYIesHuRRsrKYbsdZAxUU4o.jpg\",\"ar\":\"16 / 9\"}],[{\"url\":\"https://framerusercontent.com/images/ByqUk1qDcIBesRoU1eFAyyrvUk.jpg\",\"ar\":\"16 / 9\"}],[{\"url\":\"https://framerusercontent.com/images/zpSBFBitsndj89oEgpdSfp8Ngg4.jpg\",\"ar\":\"16 / 9\"}],[{\"url\":\"https://framerusercontent.com/images/tIN75Uz4FjE2GiMo300hxnhA1k.jpg\",\"ar\":\"3 / 4\"},{\"url\":\"https://framerusercontent.com/images/NXq6GeTgq5thzTEorOLX0XpdJu4.jpg\",\"ar\":\"3 / 4\"}],[{\"url\":\"https://framerusercontent.com/images/aSHIirIlheon3x9j7XwpIYEUcf4.jpg\",\"ar\":\"16 / 9\"},{\"url\":\"https://framerusercontent.com/images/d52frplH1vDHZPpnPrS97SX4Y8c.jpg\",\"ar\":\"16 / 9\"}],[{\"url\":\"https://framerusercontent.com/images/OhbkVXYNyVsZxhdFaZQXhwRB7c.jpg\",\"ar\":\"16 / 9\"}],[{\"url\":\"https://framerusercontent.com/images/E84E0Rf2bUAe8uArhpo5UppSHwc.jpg\",\"ar\":\"16 / 9\"},{\"url\":\"https://framerusercontent.com/images/6x8ey4fSSLVFN1fI4RzxwRbIUsI.jpg\",\"ar\":\"16 / 9\"}],[{\"url\":\"https://framerusercontent.com/images/ZMgNBFARGSt53YPzgZCKYnGEg.jpg\",\"ar\":\"16 / 9\"}]],\"stationery\":[[{\"url\":\"https://framerusercontent.com/images/mCn2B4SoiczvrtHsnNXH4vbwXS8.jpg\",\"ar\":\"16 / 9\"}],[{\"url\":\"https://framerusercontent.com/images/nlE11ZUa5boNpxRyihd0IkqNrv4.jpg\",\"ar\":\"16 / 9\"}],[{\"url\":\"https://framerusercontent.com/images/cDReMcw94R0x0SXVq7iOKHUgPE.jpg\",\"ar\":\"4 / 3\"},{\"url\":\"https://framerusercontent.com/images/Bx63GiVPcCAmsPGn3XwsQCCa7EQ.jpg\",\"ar\":\"4 / 3\"}],[{\"url\":\"https://framerusercontent.com/assets/9MbJbwNymYJrEQMDDRZG9LpRg.mp4\",\"ar\":\"16 / 9\",\"video\":true}]]}};// Sticky chapter nav, bottom right (Pony-style), listing the interludes in page order\n// Koto shape: five sections (Challenge / Strategy / Identity / Application / Outcome).\n// The Body still carries seven bold-led paragraphs; these map each one to the section\n// it belongs in, so the sub-leads survive as bold runs inside a merged section.\nconst SECTION_GROUPS={\"annuli\":{Strategy:\"Strategy\",Voice:\"Strategy\",Logo:\"Identity\",System:\"Identity\",Typography:\"Identity\",Digital:\"Application\",Campaign:\"Application\",Motion:\"Application\"},\"quadrant\":{Strategy:\"Strategy\",Identity:\"Identity\",Light:\"Identity\",Motion:\"Identity\",Product:\"Application\",Campaign:\"Application\"}};const SECTION_ORDER={\"annuli\":[\"Strategy\",\"Identity\",\"Application\"],\"quadrant\":[\"Strategy\",\"Identity\",\"Application\"]};const CHAPTER_NAV=new Set([\"quadrant\"]);// Pony's kinetic statement: one line in the title face, alone between two chapters (after = chapter label)\nconst STATEMENT={\"quadrant\":{after:\"Strategy\",text:\"Markets are made of relationships. Quadrant makes them legible.\"}};const leafWith=(root,text)=>Array.from(root.querySelectorAll(\"*\")).find(el=>el.children.length===0&&(el.textContent||\"\").trim().toLowerCase()===text)||null;// Ring generator — the System chapter's interactive moment. A grove's ring is drawn\n// live from its data: years verified (ring count), survival (line weight), the\n// direction of prevailing light (heartwood offset + sheen) and material state.\nconst RING_MATERIALS={pending:{c:[\"#6E5230\",\"#B89B7A\",\"#7A5A38\"],sheen:false,label:\"Pending \\xb7 raw cast\"},verified:{c:[\"#C99A6B\",\"#E8D3B8\",\"#9E7549\"],sheen:true,label:\"Verified \\xb7 bronze\"},matured:{c:[\"#7DBE95\",\"#DDE7DC\",\"#3E7D5A\"],sheen:true,label:\"Matured \\xb7 patina\"},retired:{c:[\"#1c1e1c\",\"#3a3c38\",\"#0C0D0C\"],sheen:false,label:\"Retired \\xb7 blackened\"}};const ringLab=()=>{const el=(tag,style,parent)=>{const n=document.createElement(tag);Object.assign(n.style,style);if(parent)parent.appendChild(n);return n;};const panel=el(\"div\",{display:\"grid\",gridTemplateColumns:\"260px 1fr\",gap:\"32px\",background:\"#F3F2EE\",color:\"#141614\",padding:\"28px 32px\",minHeight:\"520px\",fontFamily:\"Manrope, system-ui, sans-serif\",position:\"relative\"});panel.setAttribute(\"data-nsm-ringlab\",\"1\");const ctl=el(\"div\",{display:\"flex\",flexDirection:\"column\",gap:\"18px\",fontSize:\"12px\"},panel);const title=el(\"div\",{fontSize:\"11px\",letterSpacing:\".06em\",textTransform:\"uppercase\",color:\"#6B6E69\"},ctl);title.textContent=\"Ring generator \\xb7 interactive\";const state={years:7,survival:94,light:45,material:\"verified\",name:\"Rift Valley Grove\"};const slider=(label,key,min,max,unit)=>{const wrap=el(\"label\",{display:\"grid\",gap:\"6px\"},ctl);const row=el(\"div\",{display:\"flex\",justifyContent:\"space-between\"},wrap);const l=el(\"span\",{},row);l.textContent=label;const v=el(\"span\",{fontVariantNumeric:\"tabular-nums\",color:\"#6B6E69\"},row);const input=el(\"input\",{width:\"100%\",accentColor:\"#141614\"},wrap);input.type=\"range\";input.min=String(min);input.max=String(max);input.value=String(state[key]);const show=()=>{v.textContent=state[key]+unit;};input.addEventListener(\"input\",()=>{state[key]=Number(input.value);show();draw();});show();return input;};slider(\"Years verified\",\"years\",1,14,\"\");slider(\"Survival\",\"survival\",50,100,\"%\");slider(\"Aspect\",\"light\",0,359,\"\\xb0\");const matWrap=el(\"div\",{display:\"grid\",gap:\"6px\"},ctl);const matLabel=el(\"span\",{},matWrap);matLabel.textContent=\"State\";const mats=el(\"div\",{display:\"flex\",gap:\"6px\",flexWrap:\"wrap\"},matWrap);const matBtns={};for(const k of Object.keys(RING_MATERIALS)){const b=el(\"button\",{border:\"1px solid #D9D7D0\",background:\"transparent\",color:\"#141614\",borderRadius:\"999px\",padding:\"6px 12px\",fontSize:\"11px\",fontWeight:\"600\",cursor:\"pointer\",fontFamily:\"inherit\"},mats);b.type=\"button\";b.textContent=k[0].toUpperCase()+k.slice(1);b.addEventListener(\"click\",()=>{state.material=k;draw();});matBtns[k]=b;}const rnd=el(\"button\",{marginTop:\"6px\",border:\"0\",background:\"#141614\",color:\"#F3F2EE\",borderRadius:\"999px\",padding:\"10px 16px\",fontSize:\"12px\",fontWeight:\"600\",cursor:\"pointer\",fontFamily:\"inherit\",alignSelf:\"start\"},ctl);rnd.type=\"button\";rnd.textContent=\"New grove\";const NAMES=[\"Rift Valley Grove\",\"Sumatra Peatland\",\"Cerrado Corridor\",\"Atlas Foothills\",\"Mekong Mangroves\",\"Carpathian Ridge\",\"Miombo Reach\",\"Tasman Headland\"];rnd.addEventListener(\"click\",()=>{state.years=1+Math.floor(Math.random()*12);state.survival=70+Math.floor(Math.random()*30);state.light=Math.floor(Math.random()*360);state.material=state.years===1?\"pending\":state.years>=7?\"matured\":\"verified\";state.name=NAMES[Math.floor(Math.random()*NAMES.length)];for(const inp of Array.from(ctl.querySelectorAll(\"input\"))){const k=inp.parentElement?.querySelector(\"span\")?.textContent||\"\";inp.value=String(k.startsWith(\"Years\")?state.years:k.startsWith(\"Survival\")?state.survival:state.light);inp.dispatchEvent(new Event(\"input\"));}draw();});const stage=el(\"div\",{display:\"grid\",placeItems:\"center\",position:\"relative\",minHeight:\"460px\"},panel);const ring=el(\"div\",{width:\"min(380px, 70vw)\",aspectRatio:\"1\",borderRadius:\"50%\",position:\"relative\",transition:tr(M.interact.morph.fill,\"background\")+\", \"+tr(M.interact.morph.fill,\"box-shadow\")},stage);const boss=el(\"div\",{position:\"absolute\",width:\"7%\",height:\"7%\",borderRadius:\"50%\",transform:\"translate(-50%, -50%)\",boxShadow:\"0 4px 10px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.35)\"},ring);const readout=el(\"div\",{position:\"absolute\",left:\"0\",right:\"0\",bottom:\"0\",display:\"flex\",justifyContent:\"space-between\",fontSize:\"11px\",color:\"#6B6E69\",fontVariantNumeric:\"tabular-nums\",gap:\"12px\",flexWrap:\"wrap\"},stage);const name=el(\"span\",{color:\"#141614\",fontWeight:\"600\"},readout);const passport=el(\"span\",{},readout);const draw=()=>{const m=RING_MATERIALS[state.material];const R=190// px at the 380px design size; scales with the box\n;const spacing=Math.max(6,R*.9/state.years);const t=1+(state.survival-50)/50*2.5// line weight follows survival\n;const rad=state.light*Math.PI/180;const cx=50+Math.sin(rad)*20,cy=50-Math.cos(rad)*20// heartwood 0.4r toward the light\n;const rings=\"repeating-radial-gradient(circle at \"+cx.toFixed(1)+\"% \"+cy.toFixed(1)+\"%, \"+m.c[0]+\" 0 \"+t.toFixed(1)+\"px, \"+m.c[1]+\" \"+t.toFixed(1)+\"px \"+spacing.toFixed(1)+\"px, \"+m.c[2]+\" \"+spacing.toFixed(1)+\"px \"+(spacing+t).toFixed(1)+\"px)\";const sheen=\"conic-gradient(from \"+(state.light+165)%360+\"deg, rgba(255,255,255,.55), rgba(0,0,0,.35), rgba(255,255,255,.35), rgba(0,0,0,.4), rgba(255,255,255,.55)), \";ring.style.background=(m.sheen?sheen:\"\")+rings;ring.style.backgroundBlendMode=m.sheen?\"soft-light\":\"normal\";ring.style.boxShadow=m.sheen?\"0 30px 60px rgba(20,22,20,.28), inset 0 0 0 1.5px rgba(255,255,255,.25)\":\"0 30px 60px rgba(20,22,20,.28)\";boss.style.left=cx+\"%\";boss.style.top=cy+\"%\";boss.style.background=m.c[2];for(const[k,b]of Object.entries(matBtns)){const on=k===state.material;b.style.background=on?\"#141614\":\"transparent\";b.style.color=on?\"#F3F2EE\":\"#141614\";b.style.borderColor=on?\"#141614\":\"#D9D7D0\";}name.textContent=state.name;const dir=[\"N\",\"NE\",\"E\",\"SE\",\"S\",\"SW\",\"W\",\"NW\"][Math.round(state.light/45)%8];passport.textContent=state.years+(state.years===1?\" year\":\" years\")+\" verified \\xb7 survival \"+state.survival+\"% \\xb7 light \"+state.light+\"\\xb0 \"+dir+\" \\xb7 \"+m.label;};draw();// one column on narrow screens\n// The generator only makes its point if you see it move. Until someone takes\n// hold of it, drive the controls the way a person would: one at a time, with a\n// pause to read the result. Any real interaction ends it for good.\nconst demo=()=>{const still=reducedMotion();if(still)return;const inputs=Array.from(panel.querySelectorAll('input[type=\"range\"]'));if(inputs.length<3)return;const[yearsIn,survivalIn,lightIn]=inputs;let driving=false,dead=false,timer=null;const ease=easeOf(EZ.grow);// move a control the way a hand does — never a jump cut\nconst glide=(input,to,ms)=>new Promise(done=>{const from=Number(input.value),t0=performance.now();const step=now=>{if(dead)return done();const p=Math.min(1,(now-t0)/ms);driving=true;input.value=String(Math.round(from+(to-from)*ease(p)));input.dispatchEvent(new Event(\"input\",{bubbles:true}));driving=false;if(p<1)requestAnimationFrame(step);else done();};requestAnimationFrame(step);});const wait=ms=>new Promise(r=>{timer=setTimeout(r,ms);});const pick=(a,b)=>Math.round(a+Math.random()*(b-a));const STATES=Object.keys(RING_MATERIALS);const beats=[()=>glide(lightIn,pick(0,359),1600),()=>glide(yearsIn,pick(2,14),1100),()=>glide(survivalIn,pick(58,100),900),async()=>{const next=STATES[pick(0,STATES.length-1)];// driving must cover synthetic clicks too, or the demo's own\n// button press reads as a user taking over and it stops itself\ndriving=true;if(matBtns[next])matBtns[next].click();driving=false;},async()=>{driving=true;rnd.click();driving=false;}];let i=0;const loop=async()=>{while(!dead){await beats[i%beats.length]();if(dead)return;i++;await wait(1500)// long enough to read what changed\n;}};// the moment it is really being used, get out of the way and stay out\nconst surrender=()=>{if(driving||dead)return;dead=true;if(timer)clearTimeout(timer);};for(const ev of[\"pointerdown\",\"keydown\",\"wheel\",\"touchstart\"]){panel.addEventListener(ev,surrender,{passive:true});}panel.addEventListener(\"input\",surrender);panel.addEventListener(\"click\",surrender);// and only while it is on screen\nlet running=false;const io2=new IntersectionObserver(es=>{for(const e of es){if(dead){io2.disconnect();return;}if(e.isIntersecting&&!running){running=true;loop();}else if(!e.isIntersecting){}}},{rootMargin:\"80px\"});io2.observe(panel);};demo();// the name was stranded in the gap between the controls and the ring; it is a\n// caption for the object, so it sits with it\nObject.assign(readout.style,{flexDirection:\"column\",alignItems:\"center\",justifyContent:\"center\",gap:\"4px\",textAlign:\"center\"});// A slow ring breathing out of the one obvious target, so the panel reads as\n// something you can take hold of. Brand timing: 2.4s, ease-in-out, no overshoot.\nif(!document.getElementById(\"nsm-breathe\")){const st=document.createElement(\"style\");st.id=\"nsm-breathe\";st.textContent=\"@keyframes nsmBreathe{0%{transform:scale(1);opacity:\"+M.ambient.cue.opacityFrom+\"}70%,100%{transform:scale(\"+M.ambient.cue.scale+\");opacity:0}}\";document.head.appendChild(st);}const cue=document.createElement(\"span\");Object.assign(cue.style,{position:\"relative\",display:\"inline-flex\",alignSelf:\"start\",marginTop:\"6px\"});rnd.style.marginTop=\"0\";rnd.parentElement?.insertBefore(cue,rnd);const halo=el(\"span\",{position:\"absolute\",inset:\"0\",borderRadius:\"999px\",border:\"1.5px solid #141614\",pointerEvents:\"none\",animation:\"nsmBreathe \"+M.ambient.cue.transition.duration+\"ms \"+bz(M.ambient.cue.transition.easing)+\" infinite\"},cue);cue.appendChild(rnd);const hideCue=()=>{halo.style.display=\"none\";};if(reducedMotion())hideCue();// once it has actually been used the hint has done its job\nfor(const ev of[\"pointerdown\",\"keydown\",\"touchstart\"]){panel.addEventListener(ev,hideCue,{passive:true});}// The object breathes — the \"Breathe · pending\" state from the motion board,\n// pulled back to a scale the hero can carry. The board's own spec dips opacity\n// to .35, which is written for a flat gradient; on a 380px object on paper it\n// just washes out, so this is scale only and stays well inside \"no overshoot\".\nif(!document.getElementById(\"nsm-ring-breathe\")){const st=document.createElement(\"style\");st.id=\"nsm-ring-breathe\";st.textContent=\"@keyframes nsmRingBreathe{0%,100%{transform:scale(1)}50%{transform:scale(\"+M.ambient.breathe.scale+\")}}\";document.head.appendChild(st);}const breatheOK=!reducedMotion();if(breatheOK){ring.style.animation=\"nsmRingBreathe \"+M.ambient.breathe.transition.duration+\"ms \"+bz(M.ambient.breathe.transition.easing)+\" infinite\";ring.style.animationPlayState=\"paused\";// only while it is on screen\nconst bio=new IntersectionObserver(es=>{for(const e of es)ring.style.animationPlayState=e.isIntersecting?\"running\":\"paused\";},{rootMargin:\"80px\"});bio.observe(ring);}const ro=new ResizeObserver(()=>{panel.style.gridTemplateColumns=panel.clientWidth<720?\"1fr\":\"260px 1fr\";});ro.observe(panel);return panel;};/**\n * Iconography, drawn live rather than shipped as a film. The icons are vectors,\n * so animating them in the DOM stays crisp at any size, costs a few KB instead of\n * a video, and needs no upload. Geometry is the Figma set, 24px grid, 1.5 stroke.\n *//**\n * The brand's growth curve is an ease-out: it decelerates into a resting state,\n * which is exactly right for something arriving. Reused for a departure it runs\n * backwards — 68% of the travel happens in the first fifth of the duration, so\n * the object snaps away and reads as a flicker. Exits take its mirror instead.\n */const EASE_GROW=bz(EZ.grow);const EASE_LEAVE=bz(EZ.leave);/** opacity on the linear curve, at a transition's duration — the fade half of every entry and exit */const FADE=(t,delay=0)=>\"opacity \"+t.duration+\"ms \"+bz(EZ.linear)+\" \"+delay+\"ms\";const ICON_SET=['','','','','','','','','','','','','','','','','','','','','','','','','','','','','',''];const iconBoard=()=>{const cell=document.createElement(\"div\");Object.assign(cell.style,{aspectRatio:\"16 / 9\",background:\"#F3F2EE\",overflow:\"hidden\",position:\"relative\"});// the board is drawn at its native 960x540 and scaled to whatever width the\n// row gives it, so the type and the icons keep the deck's proportions\nconst board=document.createElement(\"div\");Object.assign(board.style,{position:\"absolute\",top:\"0\",left:\"0\",width:\"960px\",height:\"540px\",transformOrigin:\"0 0\",fontFamily:BOARD_SANS,color:\"#141614\",boxSizing:\"border-box\",padding:\"28px 32px\"});board.innerHTML='
'+\"
Iconography
\"+'
Icons share the mark\\'s stroke logic, round caps and circular construction. Built on a 24px grid with 2px optical padding.
'+\"
\"+'
'+ICON_SET.map(d=>''+d+\"\").join(\"\")+\"
\";cell.appendChild(board);const fit=()=>{const w=cell.clientWidth;if(w)board.style.transform=\"scale(\"+w/960+\")\";};fit();new ResizeObserver(fit).observe(cell);const strokes=Array.from(board.querySelectorAll(\"svg > *\"));// getTotalLength() throws on an element that is not yet rendered, so the\n// dash lengths can only be taken once the board is in the document\nconst measure=()=>{for(const s of strokes){let len=100;try{if(s.getTotalLength)len=Math.ceil(s.getTotalLength());}catch{}s.dataset.len=String(len);s.style.strokeDasharray=String(len);s.style.strokeDashoffset=String(len);}};const still=reducedMotion();if(still){}else{// draw them on once, in reading order, at the growth easing the brand states\nconst svgs=Array.from(board.querySelectorAll(\"svg\"));const N=svgs.length;const drawOn=()=>svgs.forEach((sv,i)=>{for(const s of Array.from(sv.children)){s.style.transition=tr(M.enter.stroke.transition,\"stroke-dashoffset\",i*M.enter.stroke.stagger);s.style.strokeDashoffset=\"0\";}});// wind back in reverse, quicker than it drew — the set unwrites itself\nconst drawOff=()=>svgs.forEach((sv,i)=>{const j=N-1-i;for(const s of Array.from(sv.children)){s.style.transition=tr(M.exit.unwrite.transition,\"stroke-dashoffset\",j*M.exit.unwrite.stagger);s.style.strokeDashoffset=s.dataset.len||\"100\";}});// it holds resolved for most of the cycle; the draw is the punctuation\nlet timer=null;let back=null;const cycle=()=>{drawOn();back=setTimeout(drawOff,M.loop.board.hold);};const start=()=>{if(timer)return;measure();requestAnimationFrame(()=>{cycle();timer=setInterval(cycle,M.loop.board.cycle);});};const stop=()=>{if(timer){clearInterval(timer);timer=null;}if(back){clearTimeout(back);back=null;}};// only run while it is on screen — no point animating what nobody sees\nconst io=new IntersectionObserver(es=>{for(const e of es)e.isIntersecting?start():stop();},{rootMargin:\"120px\"});io.observe(cell);}return cell;};/**\n * Data visualisation, drawn live for the same reason as the icons: it is a UI\n * card, so the DOM renders it sharper than any still and the numbers can count.\n * Motion follows the boards' own rules — the chart draws bottom-up on a 60ms\n * stagger, growth eases long, and the count is the brand's core act.\n */const DATAVIZ_MARK=\"https://framerusercontent.com/images/yihupSctlPn6nhtikCYVXFPoqvI.png\";const BAR_HEIGHTS=[20,28,30,42,48,52,60,66,72,80,86,100];const dataViz=()=>{const cell=document.createElement(\"div\");Object.assign(cell.style,{aspectRatio:\"16 / 9\",background:\"#F3F2EE\",overflow:\"hidden\",position:\"relative\"});const board=document.createElement(\"div\");Object.assign(board.style,{position:\"absolute\",top:\"0\",left:\"0\",width:\"960px\",height:\"540px\",transformOrigin:\"0 0\",fontFamily:BOARD_SANS,color:\"#141614\",boxSizing:\"border-box\",padding:\"28px 32px\"});board.innerHTML='
'+\"
Data visualisation
\"+'
Growth is shown as rings, not lines. Bars are 2px, bark on paper. Moss marks the current period only.
'+\"
\"+'
'+'
'+'
'+'\"\"'+'
Rift Valley Grove
'+'
Kenya · 2,140 ha
'+'
Year 3
'+\"
\"+'
'+'0 trees
'+'
'+BAR_HEIGHTS.map((h,i)=>'
').join(\"\")+\"
\"+'
'+\"Oct 25Sep 26
\"+\"
\"+\"
\";cell.appendChild(board);const fit=()=>{const w=cell.clientWidth;if(w)board.style.transform=\"scale(\"+w/960+\")\";};fit();new ResizeObserver(fit).observe(cell);const mark=board.querySelector(\"[data-mark]\");const count=board.querySelector(\"[data-count]\");const bars=Array.from(board.querySelectorAll(\"[data-bar]\"));const TOTAL=412880;const settle=()=>{if(mark){mark.style.transform=\"scale(1)\";mark.style.opacity=\"1\";}if(count)count.textContent=TOTAL.toLocaleString(\"en-GB\");for(const b of bars)b.style.transform=\"scaleY(1)\";};const still=reducedMotion();if(still){settle();return cell;}let token=0;const run=()=>{const me=++token;// the object grows from the heartwood, the way every ring does\nif(mark){mark.style.transition=tr(M.enter.grow.transition,\"transform\")+\", \"+tr(M.enter.grow.opacity,\"opacity\");mark.style.transform=\"scale(1)\";mark.style.opacity=\"1\";}// the chart draws bottom-up, 60ms stagger — the rule the motion board states\nbars.forEach((b,i)=>{b.style.transition=tr(M.enter.draw.transition,\"transform\",i*M.enter.draw.stagger);b.style.transform=\"scaleY(1)\";});// counting is the brand's whole argument, so the number is counted, not set\nif(count){const DUR=M.emphasis.count.transition.duration,t0=performance.now();const countEase=easeOf(M.emphasis.count.transition.easing);const tick=now=>{if(me!==token)return;// a newer cycle owns the number now\nconst p=Math.min(1,(now-t0)/DUR);const e=countEase(p);count.textContent=Math.round(TOTAL*e).toLocaleString(\"en-GB\");if(p<1)requestAnimationFrame(tick);};requestAnimationFrame(tick);}};// wind back to nothing so the card can count itself up again\nconst reset=()=>{token++;if(mark){// a pure cross-fade: the scale is snapped back under an opacity of\n// zero, so the next cycle still has somewhere to grow from\nmark.style.transition=tr(M.exit.default.transition,\"opacity\")+\", \"+tr(M.exit.snap.transition,\"transform\",M.exit.default.transition.duration+20);mark.style.opacity=\"0\";mark.style.transform=\"scale(\"+M.enter.grow.scaleFrom+\")\";}bars.forEach((b,i)=>{b.style.transition=tr(M.exit.retract.transition,\"transform\",(bars.length-1-i)*M.exit.retract.stagger);b.style.transform=\"scaleY(0)\";});if(count)count.textContent=\"0\";};let timer=null;let back=null;const cycle=()=>{run();back=setTimeout(reset,M.loop.board.hold);};const start=()=>{if(timer)return;cycle();timer=setInterval(cycle,M.loop.board.cycle);};const stop=()=>{if(timer){clearInterval(timer);timer=null;}if(back){clearTimeout(back);back=null;}};// only run while it is on screen\nconst io=new IntersectionObserver(es=>{for(const e of es)e.isIntersecting?start():stop();},{rootMargin:\"120px\"});io.observe(cell);return cell;};const genForms=()=>{const cell=document.createElement(\"div\");Object.assign(cell.style,{aspectRatio:\"16 / 9\",background:\"#F3F2EE\",overflow:\"hidden\",position:\"relative\"});const board=document.createElement(\"div\");Object.assign(board.style,{position:\"absolute\",top:\"0\",left:\"0\",width:\"960px\",height:\"540px\",transformOrigin:\"0 0\",fontFamily:BOARD_SANS,color:\"#141614\",boxSizing:\"border-box\",padding:\"28px 32px\"});const CAPTIONS=[[\"Year 3 · 94% survival\",\"Rift Valley Grove\"],[\"Year 7 · 91% survival\",\"Sumatra Peatland\"],[\"Year 1 · pending audit\",\"Cerrado Corridor\"]];board.innerHTML='
'+\"
Generative forms
\"+'
A grove’s ring pattern is generated from its data: ring count from years verified, spacing from survival rate, offset from the direction the ground faces. No two groves share a ring.
'+\"
\"+'
'+CAPTIONS.map(c=>'
'+'
'+'
'+c[0]+\"
\"+c[1]+\"
\"+\"
\").join(\"\")+\"
\";cell.appendChild(board);const fit=()=>{const w=cell.clientWidth;if(w)board.style.transform=\"scale(\"+w/960+\")\";};fit();new ResizeObserver(fit).observe(cell);const els=Array.from(board.querySelectorAll(\"[data-form]\"));// spacing is the grove's own survival rate; the third is a single ring, pending\nconst forms=[{bearing:40,target:40,spacing:40.2,el:els[0]},{bearing:300,target:300,spacing:18,el:els[1]},{bearing:120,target:120,spacing:null,el:els[2]}];const paint=f=>{const r=f.bearing*Math.PI/180;const x=(50+Math.sin(r)*20).toFixed(1);const y=(50-Math.cos(r)*20).toFixed(1);const boss=\"radial-gradient(circle at \"+x+\"% \"+y+\"%, #141614 0 8px, transparent 8px)\";const rings=f.spacing==null?\"radial-gradient(circle at \"+x+\"% \"+y+\"%, transparent 0 40px, #141614 40px 41.5px, transparent 41.5px)\":\"repeating-radial-gradient(circle at \"+x+\"% \"+y+\"%, transparent 0 \"+f.spacing+\"px, #141614 \"+f.spacing+\"px \"+(f.spacing+1.5)+\"px)\";f.el.style.background=boss+\", \"+rings;};forms.forEach(paint);const still=reducedMotion();if(still)return cell;const ease=easeOf(M.ambient.swing.transition.easing);let raf=0,timer=null;const MOVE=M.ambient.swing.transition.duration;const swing=()=>{const t0=performance.now();const from=forms.map(f=>f.bearing);// each grove takes its own new bearing, never the same arc\nforms.forEach((f,i)=>{f.target=from[i]+70+Math.random()*140;});cancelAnimationFrame(raf);const step=now=>{const p=Math.min(1,(now-t0)/MOVE);const e=ease(p);forms.forEach((f,i)=>{f.bearing=from[i]+(f.target-from[i])*e;paint(f);});if(p<1)raf=requestAnimationFrame(step);};raf=requestAnimationFrame(step);};const start=()=>{if(timer)return;swing();timer=setInterval(swing,M.ambient.swing.interval);};const stop=()=>{if(timer){clearInterval(timer);timer=null;}cancelAnimationFrame(raf);};const io=new IntersectionObserver(es=>{for(const e of es)e.isIntersecting?start():stop();},{rootMargin:\"120px\"});io.observe(cell);return cell;};/**\n * Interface components, drawn live. The board's own copy states the card's\n * order — ring above, name and yield below, one action — so the card assembles\n * itself in exactly that order: the hierarchy is demonstrated, not asserted.\n * The ring grows on the brand's growth curve, the interface parts arrive at the\n * interface speed. Nothing overshoots.\n */const CARD_MARK=\"https://framerusercontent.com/images/39krc5igYf5ohutYHR0QI06Fc.png\";const cardBoard=()=>{const cell=document.createElement(\"div\");Object.assign(cell.style,{aspectRatio:\"16 / 9\",background:\"#F3F2EE\",overflow:\"hidden\",position:\"relative\"});const board=document.createElement(\"div\");Object.assign(board.style,{position:\"absolute\",top:\"0\",left:\"0\",width:\"960px\",height:\"540px\",transformOrigin:\"0 0\",fontFamily:BOARD_SANS,color:\"#141614\",boxSizing:\"border-box\",padding:\"28px 32px\"});board.innerHTML='
'+\"
Interface components
\"+'
The grove card is the atomic unit of the product. '+\"Ring above, name and yield below, one action. Everything else in the interface is a list or a \"+\"detail of this card.
\"+\"
\"+'
'+'
'+// will-change keeps this on one composited layer for the whole growth.\n// Without it the compositor rasterises the image at the scale it starts\n// from, stretches that bitmap up, then re-rasterises when the transition\n// ends — the image is soft all the way up and snaps sharp on the last\n// frame. Measured: 36% jump in rendered detail in a single frame.\n'\"\"'+'
'+'
Rift Valley Grove
'+'
6.1% yield · Year 3
'+\"
\"+// a div, not a button: this board is a picture of an interface, and a\n// real control here would be a tab stop that does nothing\n'
Plant
'+'
Verified by Annuli
'+\"
\"+\"
\";cell.appendChild(board);const fit=()=>{const w=cell.clientWidth;if(w)board.style.transform=\"scale(\"+w/960+\")\";};fit();new ResizeObserver(fit).observe(cell);const frame=board.querySelector(\"[data-frame]\");const ring=board.querySelector(\"[data-ring]\");const parts=Array.from(board.querySelectorAll(\"[data-part]\"));const still=reducedMotion();if(still)return cell;// nothing waits on stage: the card arrives, then fills. Leaving the frame\n// sitting there empty while the ring grew inside it read as a broken card.\nconst clear=()=>{if(frame){frame.style.transform=\"translateY(\"+M.enter.default.distance+\"px)\";frame.style.opacity=\"0\";}if(ring){ring.style.transform=\"scale(\"+M.enter.grow.scaleFrom+\")\";ring.style.opacity=\"0\";}parts.forEach((p,i)=>{p.style.transform=\"translateY(\"+(M.enter.part.distance-i*2)+\"px)\";p.style.opacity=\"0\";});};const run=()=>{// the card lands first — it is the container, so it cannot arrive late\nif(frame){frame.style.transition=tr(M.enter.default.transition,\"transform\")+\", \"+FADE(M.enter.default.transition);frame.style.transform=\"translateY(0)\";frame.style.opacity=\"1\";}if(ring){ring.style.transition=tr(M.enter.grow.transition,\"transform\",M.enter.handoff.delay)+\", \"+tr(M.enter.grow.opacity,\"opacity\",M.enter.handoff.delay);ring.style.transform=\"scale(1)\";ring.style.opacity=\"1\";}// ring first, then the name, then the one action — the reading order\nparts.forEach((p,i)=>{const at=700+i*M.enter.part.stagger;p.style.transition=tr(M.enter.part.transition,\"transform\",at)+\", \"+FADE(M.enter.part.transition,at);p.style.transform=\"translateY(0)\";p.style.opacity=\"1\";});};// The card grows in; it does not shrink out. Every exit here is a pure\n// cross-fade, with the transform snapped back once the element is already\n// transparent — so nothing is ever seen travelling backwards.\nconst reset=()=>{parts.forEach((p,i)=>{const j=parts.length-1-i;const at=j*M.exit.quick.stagger;p.style.transition=tr(M.exit.quick.transition,\"opacity\",at)+\", \"+tr(M.exit.snap.transition,\"transform\",at+M.exit.quick.transition.duration+20);p.style.opacity=\"0\";p.style.transform=\"translateY(\"+(M.enter.part.distance-i*2)+\"px)\";});if(ring){ring.style.transition=tr(M.exit.default.transition,\"opacity\",60)+\", \"+tr(M.exit.snap.transition,\"transform\",60+M.exit.default.transition.duration+20);ring.style.opacity=\"0\";ring.style.transform=\"scale(\"+M.enter.grow.scaleFrom+\")\";}// the container goes last, so the card is never seen standing empty\nif(frame){frame.style.transition=tr(M.exit.container.transition,\"opacity\")+\", \"+tr(M.exit.snap.transition,\"transform\",M.exit.container.transition.delay+M.exit.container.transition.duration+20);frame.style.opacity=\"0\";frame.style.transform=\"translateY(\"+M.enter.default.distance+\"px)\";}};clear();let timer=null;let back=null;const cycle=()=>{run();back=setTimeout(reset,M.loop.board.holdLong);};const start=()=>{if(timer)return;cycle();timer=setInterval(cycle,M.loop.board.cycle);};const stop=()=>{if(timer){clearInterval(timer);timer=null;}if(back){clearTimeout(back);back=null;}};const io=new IntersectionObserver(es=>{for(const e of es)e.isIntersecting?start():stop();},{rootMargin:\"120px\"});io.observe(cell);return cell;};/**\n * Micro-interactions, drawn live. This is the one board that cannot be a still\n * without contradicting itself: it claims three behaviours by name, so it\n * performs all three in turn — the card lifts, the button morphs through its\n * states with no spinner, the chart draws bottom-up on the stated 60ms stagger.\n * Timings are the board's own: 240ms for interface, the growth curve for growth.\n */const MICRO_BARS=[22,30,35,44,50,58,64,70,78,84,90,100];const MICRO_STATES=[{bg:\"#F3F2EE\",label:\"Plant $2,500\"},{bg:\"#B7B5AD\",label:\"Planting…\"},{bg:\"#7DBE95\",label:\"388 trees planted\"}];const microBoard=()=>{const cell=document.createElement(\"div\");Object.assign(cell.style,{aspectRatio:\"16 / 9\",background:\"#141614\",overflow:\"hidden\",position:\"relative\"});const board=document.createElement(\"div\");Object.assign(board.style,{position:\"absolute\",top:\"0\",left:\"0\",width:\"960px\",height:\"540px\",transformOrigin:\"0 0\",fontFamily:BOARD_SANS,background:\"#141614\",color:\"#F3F2EE\",boxSizing:\"border-box\",padding:\"28px 32px\"});board.innerHTML='
'+\"
Micro-interactions
\"+'
Live: hover the card, press the '+\"button, watch the chart draw. All transitions 240ms unless growth is implied.
\"+\"
\"+'
'+'
'+'\"\"'+'
Rift Valley Grove
'+'
Hover to lift · 240ms
'+\"
\"+'
'+'
Plant $2,500
'+'
Press · state morphs, no spinner
'+\"
\"+'
'+'
'+MICRO_BARS.map((h,i)=>'
').join(\"\")+\"
\"+'
Chart draws bottom-up, '+\"60ms stagger
\"+\"
\"+\"
\"+'
Motion 02
';cell.appendChild(board);const fit=()=>{const w=cell.clientWidth;if(w)board.style.transform=\"scale(\"+w/960+\")\";};fit();new ResizeObserver(fit).observe(cell);const card=board.querySelector(\"[data-card]\");const btn=board.querySelector(\"[data-btn]\");const label=board.querySelector(\"[data-label]\");const bars=Array.from(board.querySelectorAll(\"[data-bar]\"));const still=reducedMotion();if(still){for(const b of bars)b.style.transform=\"scaleY(1)\";return cell;}if(card)card.style.transition=tr(M.interact.hover.transition,\"transform\")+\", \"+tr(M.interact.hover.transition,\"background\");if(btn)btn.style.transition=tr(M.interact.press.transition,\"transform\")+\", \"+tr(M.interact.morph.fill,\"background\");if(label)label.style.transition=tr(M.interact.morph.label,\"opacity\");// the label crossfades under its own width change, so the button reads as\n// morphing rather than snapping — the board's \"no spinner\" claim, kept\nlet state=0;const setState=n=>{if(n===state)return;state=n;const s=MICRO_STATES[n];if(btn)btn.style.background=s.bg;if(!label)return;label.style.opacity=\"0\";window.setTimeout(()=>{label.textContent=s.label;label.style.opacity=\"1\";},M.interact.morph.label.duration);};let ids=[];const at=(ms,fn)=>{ids.push(setTimeout(fn,ms));};const cycle=()=>{// a board that scrolled away mid-press froze where it stood, so put the\n// button back to rest before performing the sequence again\nsetState(0);if(btn)btn.style.transform=\"scale(1)\";// 1 — the chart draws itself, bottom-up, on the stagger the board states\nbars.forEach((b,i)=>{b.style.transition=tr(M.enter.draw.transition,\"transform\",i*M.enter.draw.stagger);b.style.transform=\"scaleY(1)\";});// 2 — the card takes its hover\nat(1200,()=>{if(card){card.style.transform=\"translateY(-\"+M.interact.hover.distance+\"px)\";card.style.background=\"#333733\";}});at(2e3,()=>{if(card){card.style.transform=\"translateY(0)\";card.style.background=\"#2A2D2A\";}});// 3 — the press, then the state morph the copy promises\nconst PRESS=2400,RELEASE=PRESS+M.interact.press.transition.duration;at(PRESS,()=>{if(btn)btn.style.transform=\"scale(\"+M.interact.press.scale+\")\";});at(RELEASE,()=>{if(btn)btn.style.transform=\"scale(1)\";setState(1);});at(RELEASE+M.interact.morph.pendingHold,()=>setState(2));// wind back so the board can perform it again\nat(M.loop.board.holdLong,()=>{setState(0);bars.forEach((b,i)=>{b.style.transition=tr(M.exit.retract.transition,\"transform\",(bars.length-1-i)*M.exit.retract.stagger);b.style.transform=\"scaleY(0)\";});});};let timer=null;const start=()=>{if(timer)return;cycle();timer=setInterval(cycle,M.loop.board.cycle);};const stop=()=>{if(timer){clearInterval(timer);timer=null;}for(const i of ids)clearTimeout(i);ids=[];};const io=new IntersectionObserver(es=>{for(const e of es)e.isIntersecting?start():stop();},{rootMargin:\"120px\"});io.observe(cell);return cell;};/**\n * Evidence · grove passport, ported from the Remotion composition that produced\n * Loop-Evidence_v3 (motion/remotion/src/scenes/Evidence.tsx). Same board, same\n * beats, same 14s; drawn live so the ten passport rows stay type rather than\n * video pixels, and so the rings are the vector construction the film uses —\n * which is the only version that can be born ring by ring from the heartwood.\n *\n * Timings below are the film's own frame numbers at 30fps, converted to ms.\n */const F=frames=>Math.round(frames*1e3/30);const GROW=EASE_GROW// the UI curve: Born, rings, rises\n;const FILM=bz(EZ.film)// the film curve: word reveals\n;const MAT_RAW={bands:[{w:1.5,c:\"#6E5230\"},{w:4.5,c:\"#B89B7A\"},{w:1.5,c:\"#7A5A38\"}],ink:\"#6E5230\",paper:\"#B89B7A\"};const MAT_BRONZE={bands:[{w:1.5,c:\"#C99A6B\"},{w:4.5,c:\"#E8D3B8\"},{w:1.5,c:\"#9E7549\"}],ink:\"#C99A6B\",paper:\"#E8D3B8\",sheen:true};const MAT_MOSS={bands:[{w:1.5,c:\"#7DBE95\"},{w:4.5,c:\"#DDE7DC\"},{w:1.5,c:\"#3E7D5A\"}],ink:\"#7DBE95\",paper:\"#DDE7DC\",sheen:true};const MAT_BLACK={bands:[{w:1.5,c:\"#1c1e1c\"},{w:4.5,c:\"#3a3c38\"},{w:1.5,c:\"#0C0D0C\"}],ink:\"#1c1e1c\",paper:\"#3a3c38\"};const EV_MUTE=\"#6B6E69\",EV_LINE=\"#E4E3DE\",EV_BARK=\"#141614\",EV_STONE=\"#D9D7D0\";const kebab=s=>s.replace(/[A-Z]/g,m=>\"-\"+m.toLowerCase());const evidenceBoard=()=>{const cell=document.createElement(\"div\");Object.assign(cell.style,{aspectRatio:\"16 / 9\",background:\"#F3F2EE\",overflow:\"hidden\",position:\"relative\"});const board=document.createElement(\"div\");Object.assign(board.style,{position:\"absolute\",top:\"0\",left:\"0\",width:\"960px\",height:\"540px\",transformOrigin:\"0 0\",fontFamily:BOARD_SANS,color:EV_BARK,boxSizing:\"border-box\",padding:\"28px 32px\",background:\"#F3F2EE\"});cell.appendChild(board);const fit=()=>{const w=cell.clientWidth;if(w)board.style.transform=\"scale(\"+w/960+\")\";};fit();new ResizeObserver(fit).observe(cell);const beats=[];const beat=(el,off,on,dur,delay,ez=GROW)=>{const tr=Object.keys(on).map(k=>kebab(k)+\" \"+dur+\"ms \"+ez+\" \"+delay+\"ms\").join(\", \");beats.push({el,off,on,tr});};const el=(tag,style,html)=>{const e=document.createElement(tag);e.setAttribute(\"style\",style);if(html!=null)e.innerHTML=html;return e;};/** Words rise through their own clip mask, one after another — the film's Reveal. */const reveal=(host,text,from,stagger,dur)=>{const words=text.split(/(\\s+)/).filter(w=>w.length);let n=0;for(const w of words){if(/^\\s+$/.test(w)){host.appendChild(document.createTextNode(\" \"));continue;}const clip=el(\"span\",\"display:inline-block;overflow:hidden;vertical-align:bottom;\"+\"padding:.12em .02em .16em;margin:-.12em -.02em -.16em\");const inner=el(\"span\",\"display:inline-block\");inner.textContent=w;clip.appendChild(inner);host.appendChild(clip);beat(inner,{transform:\"translateY(\"+M.text.caption.distance+\")\",opacity:\"0\"},{transform:\"translateY(0)\",opacity:\"1\"},dur,from+n*stagger,FILM);n++;}};/** A thing that simply rises into place. */const rise=(e,px,delay,dur=M.enter.rise.transition.duration)=>beat(e,{transform:\"translateY(\"+px+\"px)\",opacity:\"0\"},{transform:\"translateY(0)\",opacity:\"1\"},dur,delay);const SVGNS=\"http://www.w3.org/2000/svg\";/**\n * A growth ring born properly: the disc lands, the heartwood appears, then every\n * ring grows outward from the heartwood in the material's own bands, one after\n * another — so the finished state IS the material. No wipe, no swap.\n */const ringBorn=(size,hx,hy,mat,bandScale,start,opts={})=>{const wrap=el(\"div\",\"position:relative;width:\"+size+\"px;height:\"+size+\"px;\"+\"transform-origin:\"+hx+\"% \"+hy+\"%\");const cx=hx/100*size,cy=hy/100*size;const period=mat.bands.reduce((a,b)=>a+b.w,0)*bandScale;const reach=Math.hypot(Math.max(cx,size-cx),Math.max(cy,size-cy))+period;const n=Math.ceil(reach/period);const gapF=Math.max(1,Math.round(Math.min(4,36/n)));const bossR=size*.06;const overlay=!!opts.overlay;if(!overlay){const disc=el(\"div\",\"position:absolute;inset:0;border-radius:50%;background:\"+mat.paper+(opts.shadow?\";box-shadow:\"+opts.shadow:\"\"));wrap.appendChild(disc);// the disc lands: 0.6 -> 1 about the heartwood, exactly as the film does it\nbeat(wrap,{transform:\"scale(\"+M.enter.land.scaleFrom+\")\",opacity:\"0\"},{transform:\"scale(1)\",opacity:\"1\"},M.enter.land.transition.duration,start);}const svg=document.createElementNS(SVGNS,\"svg\");svg.setAttribute(\"viewBox\",\"0 0 \"+size+\" \"+size);svg.setAttribute(\"width\",String(size));svg.setAttribute(\"height\",String(size));svg.setAttribute(\"style\",\"position:absolute;inset:0;overflow:hidden;border-radius:50%\");const from=start+(overlay?0:F(16));for(let k=0;kAnnuli');rise(logo,6,T.head);const eyebrow=el(\"div\",\"\");reveal(eyebrow,\"Evidence \\xb7 Grove passport\",T.head+F(4),M.text.caption.stagger,M.text.caption.transition.duration);const intro=el(\"div\",\"max-width:220px\");reveal(intro,\"Every ring carries its passport. Verification is a method, a date and a name, not a claim. \"+\"A grove moves from raw cast to bronze only when the field audit and the satellite pass agree.\",T.head+F(8),M.text.caption.stagger,M.text.caption.transition.duration);head.appendChild(logo);head.appendChild(eyebrow);head.appendChild(intro);board.appendChild(head);// ---------------- passport card ----------------\nconst cardBox=el(\"div\",\"position:absolute;left:32px;top:100px;width:430px;height:360px\");// Born: the surface is a real growing box — point, hairline, then the full card\nconst surface=el(\"div\",\"position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);\"+\"width:430px;height:360px;border-radius:16px;background:#fff;border:1px solid \"+EV_LINE+\";\"+\"box-sizing:border-box;box-shadow:0 20px 50px rgba(20,22,20,.12)\");beat(surface,{width:\"2px\",opacity:\"0\"},{width:\"430px\",opacity:\"1\"},M.enter.born.width.duration,T.card);beat(surface,{height:\"2px\"},{height:\"360px\"},M.enter.born.height.duration,T.card+M.enter.born.height.delay);const cardIn=el(\"div\",\"position:relative;height:100%;padding:18px 20px;box-sizing:border-box;\"+\"font-size:10px;line-height:1.4\");rise(cardIn,10,T.card+F(18),F(21));const idRow=el(\"div\",\"display:flex;align-items:center;gap:14px;margin-bottom:10px\");const ringSlot=el(\"div\",\"position:relative;width:56px;height:56px;flex:0 0 auto\");ringSlot.appendChild(ringBorn(56,67.3,40,MAT_RAW,.8,T.rows));// at the verification beat the same rings are re-laid in bronze, over the raw cast\nconst bronzeSlot=el(\"div\",\"position:absolute;inset:0\");bronzeSlot.appendChild(ringBorn(56,67.3,40,MAT_BRONZE,.8,T.verify,{overlay:true}));ringSlot.appendChild(bronzeSlot);const idText=el(\"div\",\"\");const name=el(\"div\",\"font-size:15px;font-weight:600;letter-spacing:-.02em\");reveal(name,\"Rift Valley Grove\",T.rows+F(4),F(2),F(18));const sub=el(\"div\",\"color:\"+EV_MUTE+\";display:flex;align-items:center;gap:4px\");const subTxt=el(\"span\",\"\");subTxt.textContent=\"Passport RVG-0214 \\xb7\";rise(subTxt,4,T.rows+F(10),F(15));const chip=el(\"span\",\"display:inline-block;padding:2px 8px;border-radius:999px;background:\"+EV_LINE+\";color:\"+EV_BARK+\";font-weight:600;font-size:9px\");chip.textContent=\"Pending\";beat(chip,{transform:\"scale(\"+M.emphasis.verify.scaleFrom+\")\",opacity:\"0\"},{transform:\"scale(\"+M.emphasis.verify.scaleFrom+\")\",opacity:\"1\"},F(15),T.rows+F(14));sub.appendChild(subTxt);sub.appendChild(chip);idText.appendChild(name);idText.appendChild(sub);idRow.appendChild(ringSlot);idRow.appendChild(idText);cardIn.appendChild(idRow);const rows=[[\"Grove\",\"Rift Valley Grove \\xb7 RVG-0214\"],[\"Location\",\"Kenya \\xb7 0.42\\xb0S 36.10\\xb0E\"],[\"Planted\",\"Mar 2023 \\xb7 2,140 ha\"],[\"Trees verified\",\"412,880 \\xb7 survival 94%\"],[\"tCO₂ verified\",\"61,200 \\xb7 vintage 2024–26\"],[\"Methodology\",\"Verra VCS \\xb7 VM0047 ARR \\xb7 ICVCM CCP-labelled\"],[\"Verifier\",\"Independent accredited VVB\"],[\"Field audit\",\"14 Aug 2026 \\xb7 12 plots \\xb7 3,600 stems counted\"],[\"Satellite pass\",\"02 Sep 2026 \\xb7 Sentinel-2 \\xb7 canopy NDVI 0.71\"],[\"Next audit\",\"14 Oct 2026\"]];rows.forEach(([k,v],i)=>{const start=T.rows+F(16)+F(i*10);const row=el(\"div\",\"display:grid;grid-template-columns:96px 1fr;gap:12px;padding:7px 0;position:relative\");const rule=el(\"div\",\"position:absolute;left:0;bottom:0;height:1px;width:100%;background:\"+EV_LINE+\";transform-origin:left\");beat(rule,{transform:\"scaleX(0)\"},{transform:\"scaleX(1)\"},M.enter.rule.transition.duration,start);const lab=el(\"span\",\"color:\"+EV_MUTE);lab.textContent=k;rise(lab,4,start,F(18));const val=el(\"span\",\"font-variant-numeric:tabular-nums\");reveal(val,v,start+F(4),M.text.caption.stagger,M.text.caption.transition.duration);row.appendChild(rule);row.appendChild(lab);row.appendChild(val);cardIn.appendChild(row);});cardBox.appendChild(surface);cardBox.appendChild(cardIn);board.appendChild(cardBox);// ---------------- material states ----------------\nconst right=el(\"div\",\"position:absolute;left:500px;right:32px;top:100px\");const stLab=el(\"div\",\"font-size:9px;color:\"+EV_MUTE+\";margin-bottom:14px\");reveal(stLab,\"Material follows the state\",T.states,M.text.caption.stagger,M.text.caption.transition.duration);right.appendChild(stLab);const stGrid=el(\"div\",\"display:grid;grid-template-columns:repeat(4,1fr);gap:12px\");const states=[{n:\"Pending\",s:\"Planted, not yet audited\",m:MAT_RAW,hx:40,hy:32.7},{n:\"Verified\",s:\"First field audit passed\",m:MAT_BRONZE,hx:56.8,hy:68.8},{n:\"Matured\",s:\"Year 7, income-bearing\",m:MAT_MOSS,hx:31.2,hy:56.8},{n:\"Retired\",s:\"Credits retired or survival < 70%\",m:MAT_BLACK,hx:56.8,hy:31.2}];states.forEach((s,i)=>{const start=T.states+F(10)+F(i*14);const col=el(\"div\",\"display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center\");col.appendChild(ringBorn(64,s.hx,s.hy,s.m,.8,start,{shadow:\"0 14px 30px rgba(20,22,20,.18)\"}));const cap=el(\"div\",\"\");cap.innerHTML='
'+s.n+\"
\"+'
'+s.s+\"
\";rise(cap,6,start+F(22));col.appendChild(cap);stGrid.appendChild(col);});right.appendChild(stGrid);// ---------------- audit history ----------------\nconst hLab=el(\"div\",\"font-size:9px;color:\"+EV_MUTE+\";margin:34px 0 12px\");reveal(hLab,\"Rift Valley Grove \\xb7 audit history\",T.history,M.text.caption.stagger,M.text.caption.transition.duration);right.appendChild(hLab);const hRow=el(\"div\",\"position:relative;display:flex;gap:8px\");const hLine=el(\"div\",\"position:absolute;left:7%;right:7%;top:7px;height:1px;background:\"+EV_STONE+\";transform-origin:left\");beat(hLine,{transform:\"scaleX(0)\"},{transform:\"scaleX(1)\"},M.enter.rule.long.duration,T.history+F(10));hRow.appendChild(hLine);const audits=[{l:\"Planted\",d:\"Mar 2023\",m:MAT_RAW,hx:43.2,hy:68.8},{l:\"Audit 1 ✓\",d:\"Sep 2024\",m:MAT_BRONZE,hx:69.7,hy:53.5},{l:\"Audit 2 ✓\",d:\"Sep 2025\",m:MAT_BRONZE,hx:30.3,hy:46.5},{l:\"Audit 3 ✓\",d:\"Aug 2026\",m:MAT_BRONZE,hx:62.9,hy:34.7}];audits.forEach((a,i)=>{const start=T.history+F(14)+F(i*12);const col=el(\"div\",\"display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;position:relative\");col.appendChild(ringBorn(14,a.hx,a.hy,a.m,.4,start));const l=el(\"div\",\"font-size:9px;font-weight:600\");l.textContent=a.l;rise(l,4,start+F(14),F(15));const d=el(\"div\",\"font-size:9px;color:\"+EV_MUTE);d.textContent=a.d;rise(d,4,start+F(18),F(15));col.appendChild(l);col.appendChild(d);hRow.appendChild(col);});right.appendChild(hRow);board.appendChild(right);// ---------------- footer ----------------\nconst foot=el(\"div\",\"position:absolute;left:32px;right:32px;bottom:22px;display:flex;\"+\"justify-content:space-between;font-size:9px\",\"Evidence\\xa92026 Annuli — Brand Guidelines\");beat(foot,{opacity:\"0\"},{opacity:\"1\"},F(18),T.head+F(20));board.appendChild(foot);// ---------------- playback ----------------\nconst still=reducedMotion();const settle=()=>{for(const b of beats){b.el.style.transition=\"none\";Object.assign(b.el.style,b.on);}chip.textContent=\"Verified\";chip.style.background=\"#7DBE95\";chip.style.transform=\"scale(1)\";};if(still){settle();return cell;}let ids=[];const at=(ms,fn)=>{ids.push(setTimeout(fn,ms));};const rest=()=>{for(const b of beats){b.el.style.transition=\"none\";Object.assign(b.el.style,b.off);}chip.textContent=\"Pending\";chip.style.background=EV_LINE;board.style.transition=\"none\";board.style.opacity=\"1\";};const cycle=()=>{rest();void board.offsetWidth// commit the rest state before the run\n;for(const b of beats)b.el.style.transition=b.tr;for(const b of beats)Object.assign(b.el.style,b.on);// the verification beat: the chip fills and takes its name as the bronze lands\nat(F(192),()=>{chip.style.transition=tr(M.emphasis.verify.transition,\"background\")+\", \"+tr(M.emphasis.verify.transition,\"transform\");chip.style.background=\"#7DBE95\";chip.style.transform=\"scale(1)\";});at(F(207),()=>{chip.textContent=\"Verified\";});// fade the whole board out so the loop closes on paper, as the film does\nat(F(396),()=>{board.style.transition=tr(M.exit.board.transition,\"opacity\");board.style.opacity=\"0\";});};let timer=null;const start=()=>{if(timer)return;cycle();timer=setInterval(cycle,F(420));};const stop=()=>{if(timer){clearInterval(timer);timer=null;}for(const i of ids)clearTimeout(i);ids=[];};const io=new IntersectionObserver(es=>{for(const e of es)e.isIntersecting?start():stop();},{rootMargin:\"120px\"});io.observe(cell);return cell;};/**\n * The boards are set in Manrope with a Newsreader Italic counterpoint, but the\n * site itself carries neither face — so every live board was quietly falling back\n * to Helvetica while the rendered stills beside them showed the real thing. Both\n * are loaded here as variable fonts: one 24KB file covers all four Manrope\n * weights, which is also the axis the typography board animates.\n */const BOARD_SANS=\"'AnnuliManrope', Manrope, system-ui, sans-serif\";const BOARD_SERIF=\"'AnnuliNewsreader', Newsreader, Georgia, serif\";const boardFonts=()=>{if(typeof document===\"undefined\"||document.getElementById(\"nsm-board-fonts\"))return;const st=document.createElement(\"style\");st.id=\"nsm-board-fonts\";st.textContent='@font-face{font-family:\"AnnuliManrope\";'+'src:url(https://framerusercontent.com/assets/yOr6GOlMYXra2M9DBWFjPFP0.woff2) format(\"woff2\");'+\"font-weight:200 800;font-style:normal;font-display:swap}\"+// the italic is only ever set at 300 here, so it ships as a single static\n// instance: 25KB instead of the 147KB variable cut, for nothing lost\n'@font-face{font-family:\"AnnuliNewsreader\";'+'src:url(https://framerusercontent.com/assets/6JoJVw6coYrPI4wzzCGl4OHZyI.woff2) format(\"woff2\");'+\"font-weight:300;font-style:italic;font-display:swap}\";document.head.appendChild(st);// ask for both faces outright — a face used only by off-screen text can sit\n// unloaded until it scrolls into view, which shows as a flash of the fallback\nif(document.fonts&&document.fonts.load){document.fonts.load('400 100px \"AnnuliManrope\"').catch(()=>{});document.fonts.load('italic 300 100px \"AnnuliNewsreader\"').catch(()=>{});}};/** The film curve: symmetric, quick through the middle, soft settle, no overshoot. */const filmEase=easeOf(M.emphasis.travel.transition.easing);const TYPE_STOPS=[{w:300,name:\"Manrope Light\"},{w:400,name:\"Manrope Regular\"},{w:600,name:\"Manrope SemiBold\"},{w:800,name:\"Manrope ExtraBold\"}];const AXIS_LO=300,AXIS_HI=800;const ABC=\"abcdefghijklmnopqrstuvwxyz\";const ABC_UP=\"ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789\";/**\n * Typography, drawn live. One specimen instead of five: Manrope is a variable\n * font, so the Aa travels the weight axis and rests on each of the four the\n * system uses, with a marker naming where it has stopped, then sweeps the full\n * range home. Only Manrope is shown as a specimen — the italic is a different\n * family, not a point on this axis, so it stays a line in the list.\n * The right column starts at x=400 — the same line the \"in use\" board sets its\n * copy on, so the two boards read as one spread.\n */const typeBoard=()=>{boardFonts();const cell=document.createElement(\"div\");Object.assign(cell.style,{aspectRatio:\"16 / 9\",background:\"#F3F2EE\",overflow:\"hidden\",position:\"relative\"});const board=document.createElement(\"div\");Object.assign(board.style,{position:\"absolute\",top:\"0\",left:\"0\",width:\"960px\",height:\"540px\",transformOrigin:\"0 0\",color:\"#141614\",boxSizing:\"border-box\",padding:\"28px 32px\",fontFamily:BOARD_SANS,background:\"#F3F2EE\"});const rowsHtml=TYPE_STOPS.map(s=>'
'+''+s.name+\"
\"+''+ABC+\"
\"+ABC_UP+\"\"+\"
\").join(\"\");board.innerHTML='
'+\"
Typography
\"+'
Manrope in four weights for all interface and '+\"editorial use. Newsreader Italic appears only as a counterpoint in headlines, never below 24px.
\"+\"
\"+// the specimen: one Aa on the axis, with the axis drawn beneath it\n'
'+'
Aa
'+\"
\"+'
'+'
'+'
'+TYPE_STOPS.map(s=>'
').join(\"\")+'
'+\"
\"+'
'+\"wght \"+AXIS_LO+'300'+AXIS_HI+\"
\"+\"
\"+// the specimen list, on the same left edge the \"in use\" board uses\n'
'+rowsHtml+'
'+'Newsreader Italic
'+''+ABC+\"
\"+ABC_UP+\"\"+\"
\"+\"
\"+'
';cell.appendChild(board);const fit=()=>{const w=cell.clientWidth;if(w)board.style.transform=\"scale(\"+w/960+\")\";};fit();new ResizeObserver(fit).observe(cell);const aa=board.querySelector(\"[data-aa]\");const dot=board.querySelector(\"[data-dot]\");const read=board.querySelector(\"[data-read]\");const mark=board.querySelector(\"[data-mark]\");const rows=Array.from(board.querySelectorAll(\"[data-row]\"));const names=Array.from(board.querySelectorAll(\"[data-name]\"));const setWeight=w=>{if(aa){aa.style.fontWeight=String(Math.round(w));aa.style.fontVariationSettings='\"wght\" '+w.toFixed(1);}if(dot)dot.style.left=((w-AXIS_LO)/(AXIS_HI-AXIS_LO)*100).toFixed(2)+\"%\";if(read)read.textContent=String(Math.round(w));};/** the marker sits against whichever row the specimen is currently showing */const setRow=i=>{const r=rows[i];if(r&&mark){mark.style.top=r.offsetTop+106+\"px\";mark.style.height=r.offsetHeight+\"px\";}names.forEach((n,k)=>{n.style.color=k===i?\"#141614\":\"#3a3c38\";});};setWeight(AXIS_LO);const still=reducedMotion();if(still){// no travel: rest on Regular, the weight the body copy is set in\nsetWeight(400);requestAnimationFrame(()=>setRow(1));return cell;}// hold on each named weight, travel between them, then sweep home\nconst HOLD=M.emphasis.travel.hold,MOVE=M.emphasis.travel.transition.duration,HOME=M.emphasis.travel.return.duration;const legs=[];let t=0;TYPE_STOPS.forEach((s,i)=>{legs.push({t0:t,t1:t+HOLD,from:s.w,to:s.w,row:i});t+=HOLD;if(i{if(!t0)t0=now;const ms=(now-t0)%CYCLE;let row=lastRow;for(const l of legs){if(ms>=l.t0&&ms{if(raf)return;t0=0;raf=requestAnimationFrame(frame);};const stop=()=>{if(raf){cancelAnimationFrame(raf);raf=0;}};const io=new IntersectionObserver(es=>{for(const e of es)e.isIntersecting?start():stop();},{rootMargin:\"120px\"});io.observe(cell);return cell;};/**\n * Social, drawn live. The three cards are 400×400 in the deck's own units and\n * sit in one 2400×900 frame, so each is written at 400 and scaled 1.8 once.\n *\n * Card one builds itself in the order the board reads: the dot field arrives\n * outward from the centre, the headline types, the mark is laid ring by ring\n * from its heartwood through an annulus mask — so the cast object itself\n * appears in rings rather than fading in — the two dashed orbits grow out from\n * behind it, and the two labels ride the inner orbit, staying upright as they go.\n * Cards two and three take the same headline treatment, and card three counts\n * its trees rather than stating them: the counting is the brand's whole claim.\n * The three start 200ms apart, left to right, so the row arrives as one gesture.\n */const SOCIAL_MARK_A=\"https://framerusercontent.com/images/r3cUni1wZNSQ7nmnsfMeuNbYg.png\";const SOCIAL_MARK_B=\"https://framerusercontent.com/images/AxkYTMNBCfiR7dxPjzElOoFfX98.png\";const SVGNS_S=\"http://www.w3.org/2000/svg\";const SOCIAL_TREES=4182306;let socialUid=0;const socialBoard=()=>{boardFonts();const cell=document.createElement(\"div\");Object.assign(cell.style,{aspectRatio:\"8 / 3\",background:\"#F3F2EE\",overflow:\"hidden\",position:\"relative\"});const frame=document.createElement(\"div\");Object.assign(frame.style,{position:\"absolute\",top:\"0\",left:\"0\",width:\"2400px\",height:\"900px\",transformOrigin:\"0 0\",fontFamily:BOARD_SANS,color:\"#141614\"});cell.appendChild(frame);const fit=()=>{const w=cell.clientWidth;if(w)frame.style.transform=\"scale(\"+w/2400+\")\";};fit();new ResizeObserver(fit).observe(cell);if(!document.getElementById(\"nsm-orbit-keys\")){const st=document.createElement(\"style\");st.id=\"nsm-orbit-keys\";// the pair counter-rotates so a label rides the circle without ever tipping\nst.textContent=\"@keyframes nsmOrbit{to{transform:rotate(360deg)}}\"+\"@keyframes nsmOrbitBack{to{transform:rotate(-360deg)}}\";document.head.appendChild(st);}/** a 400×400 card placed in the 2400×900 frame at the deck's 1.8 scale */const card=(x,css)=>{const c=document.createElement(\"div\");c.setAttribute(\"style\",\"position:absolute;left:\"+x+\"px;top:90px;width:400px;height:400px;\"+\"transform:scale(1.8);transform-origin:0 0;box-sizing:border-box;padding:28px;overflow:hidden;\"+css);frame.appendChild(c);return c;};const el=(tag,style,html)=>{const e=document.createElement(tag);e.setAttribute(\"style\",style);if(html!=null)e.innerHTML=html;return e;};const logo=col=>'';const HEAD=\"font-size:34px;font-weight:500;letter-spacing:-.045em;line-height:1\";const FOOT=\"position:absolute;left:28px;right:28px;bottom:22px;display:flex;\"+\"justify-content:space-between;align-items:flex-end;font-size:9px;line-height:1.4\";const beats=[];const kebabS=s=>s.replace(/[A-Z]/g,m=>\"-\"+m.toLowerCase());const beat=(e,off,on,dur,delay,ez=EASE_GROW)=>{beats.push({el:e,off,on,tr:Object.keys(on).map(k=>kebabS(k)+\" \"+dur+\"ms \"+ez+\" \"+delay+\"ms\").join(\", \")});};/** words rise through their own clip mask, one after another — the film's Reveal */const revealToks=(host,toks,from,stagger,dur)=>{let n=0;for(const tk of toks){if(tk.br){host.appendChild(document.createElement(\"br\"));continue;}const clip=el(\"span\",\"display:inline-block;overflow:hidden;vertical-align:bottom;\"+\"padding:.14em .04em .2em;margin:-.14em -.04em -.2em\");const inner=el(\"span\",\"display:inline-block\");if(tk.el)inner.appendChild(tk.el);else if(tk.h)inner.innerHTML=tk.h;else inner.textContent=tk.t||\"\";clip.appendChild(inner);host.appendChild(clip);host.appendChild(document.createTextNode(\" \"));beat(inner,{transform:\"translateY(\"+M.text.caption.distance+\")\",opacity:\"0\"},{transform:\"translateY(0)\",opacity:\"1\"},dur,from+n*stagger,bz(M.text.headline.transition.easing));n++;}};const words=s=>s.split(/\\s+/).filter(x=>x.length).map(t=>({t}));// ---------------- card 1 · New grove open ----------------\nconst T1=0;const c1=card(60,\"background:#F3F2EE\");// the dot field, revealed outward from the centre through a soft-edged mask\nconst dots=el(\"div\",\"position:absolute;inset:0;\"+\"background-image:radial-gradient(#1416142e .8px, transparent .8px);background-size:14px 14px;\"+\"-webkit-mask-image:radial-gradient(circle,#000 52%,transparent 78%);\"+\"mask-image:radial-gradient(circle,#000 52%,transparent 78%);\"+\"-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;\"+\"-webkit-mask-position:center;mask-position:center\");beat(dots,{webkitMaskSize:\"0% 0%\",maskSize:\"0% 0%\"},{webkitMaskSize:\"300% 300%\",maskSize:\"300% 300%\"},M.enter.field.transition.duration,T1);c1.appendChild(dots);const h1=el(\"div\",HEAD+\";position:relative\");revealToks(h1,words(\"New grove open.\"),T1+400,M.text.headline.stagger,M.text.headline.transition.duration);c1.appendChild(h1);const stage=el(\"div\",\"position:absolute;inset:0;display:grid;place-items:center\");const ring300=el(\"div\",\"position:absolute;width:300px;height:300px;border-radius:50%;\"+\"border:1px dashed #1416144d\");const ring200=el(\"div\",\"position:absolute;width:200px;height:200px;border-radius:50%;\"+\"border:1px dashed #1416144d\");// out from behind the mark, inner first\nconst ORBITS_AT=T1+2300,orbitFrom=\"scale(\"+M.enter.orbit.scaleFrom+\")\";beat(ring200,{transform:orbitFrom,opacity:\"0\"},{transform:\"scale(1)\",opacity:\"1\"},M.enter.orbit.transition.duration,ORBITS_AT);beat(ring300,{transform:orbitFrom,opacity:\"0\"},{transform:\"scale(1)\",opacity:\"1\"},M.enter.orbit.transition.duration,ORBITS_AT+M.enter.orbit.stagger);// the mark: the photograph appears ring by ring through an annulus mask, and\n// turns as it lands — the object is built, not faded in\nconst MK=110,hx=62,hy=32;const cx=hx/100*MK,cy=hy/100*MK;const period=5,bossR=MK*.075;const reach=Math.hypot(Math.max(cx,MK-cx),Math.max(cy,MK-cy))+period;const nR=Math.ceil(reach/period);const uid=\"sm\"+ ++socialUid;const markWrap=el(\"div\",\"position:relative;width:\"+MK+\"px;height:\"+MK+\"px;\"+\"filter:drop-shadow(0 15px 27px #14161459)\");const svg=document.createElementNS(SVGNS_S,\"svg\");svg.setAttribute(\"viewBox\",\"0 0 \"+MK+\" \"+MK);svg.setAttribute(\"width\",String(MK));svg.setAttribute(\"height\",String(MK));const defs=document.createElementNS(SVGNS_S,\"defs\");const mask=document.createElementNS(SVGNS_S,\"mask\");mask.setAttribute(\"id\",uid);mask.setAttribute(\"maskUnits\",\"userSpaceOnUse\");mask.setAttribute(\"x\",\"0\");mask.setAttribute(\"y\",\"0\");mask.setAttribute(\"width\",String(MK));mask.setAttribute(\"height\",String(MK));const boss=document.createElementNS(SVGNS_S,\"circle\");boss.setAttribute(\"cx\",String(cx));boss.setAttribute(\"cy\",String(cy));boss.setAttribute(\"r\",bossR.toFixed(2));boss.setAttribute(\"fill\",\"#fff\");mask.appendChild(boss);beat(boss,{opacity:\"0\"},{opacity:\"1\"},M.enter.ringBorn.heartwood.duration,T1+1e3);for(let k=0;k{const arm=el(\"div\",\"position:absolute;left:50%;top:50%;width:0;height:0;\"+\"animation:nsmOrbit \"+SPIN+\"s linear infinite;animation-delay:\"+-phase*SPIN+\"s\");const lab=el(\"div\",\"position:absolute;left:\"+ORBIT+\"px;top:0;white-space:nowrap;font-size:16px;\"+\"animation:nsmOrbitBack \"+SPIN+\"s linear infinite;animation-delay:\"+-phase*SPIN+\"s\");const inner=el(\"span\",\"display:block;transform:translate(-50%,-50%)\");inner.textContent=text;lab.appendChild(inner);arm.appendChild(lab);beat(inner,{opacity:\"0\"},{opacity:\"1\"},700,T1+2900);return arm;};stage.appendChild(orbitLabel(\"Annuli\",.5));stage.appendChild(orbitLabel(\"Kenya\",0));c1.appendChild(stage);const f1=el(\"div\",FOOT+\";color:#3a3c38\",\"
Yield p.a.
Hectares
Manager
6.1%
2,140
Annuli
\"+logo(\"#141614\"));beat(f1,{transform:\"translateY(6px)\",opacity:\"0\"},{transform:\"translateY(0)\",opacity:\"1\"},800,T1+3200);c1.appendChild(f1);// ---------------- card 2 · Grown for income ----------------\nconst T2=M.enter.sequence.stagger;const c2=card(840,\"background:#141614;color:#F3F2EE\");const h2=el(\"div\",HEAD);revealToks(h2,[...words(\"Grown for income,\"),{br:true},...words(\"not yield\"),// The italic is set 1.23em to match x-heights, but at that size it also\n// grows the line box — which lifted the word off its own baseline and\n// pushed this whole line below the matching line on card three. Scaling\n// its line-height is not enough: Newsreader's ascent and descent differ\n// from Manrope's, so its inline box still outgrows the strut. line-height\n// 0 takes it out of the line-box measurement altogether; the glyph keeps\n// its size and its baseline, and the surrounding padding absorbs it.\n{h:'chasing.'}],T2+400,M.text.headline.stagger,M.text.headline.transition.duration);c2.appendChild(h2);// the mark keeps the brand's own rule: rings scale from the centre, long ease-out\nconst m2=el(\"img\",\"position:absolute;left:50%;top:210px;width:120px;height:120px;object-fit:contain;\"+\"filter:drop-shadow(0 17px 30px #14161459)\");m2.src=SOCIAL_MARK_B;beat(m2,{transform:\"translateX(-50%) scale(\"+SC[\"0_7\"]+\")\",opacity:\"0\"},{transform:\"translateX(-50%) scale(1)\",opacity:\"1\"},M.enter.grow.transition.duration,T2+1100);c2.appendChild(m2);const f2=el(\"div\",FOOT+\";color:#B7B5AD\",\"
Announcing
Mekong Mangroves
powered by
annuli.earth
\"+logo(\"#F3F2EE\"));beat(f2,{transform:\"translateY(6px)\",opacity:\"0\"},{transform:\"translateY(0)\",opacity:\"1\"},800,T2+2200);c2.appendChild(f2);// ---------------- card 3 · the count ----------------\nconst T3=2*M.enter.sequence.stagger;const c3=card(1620,\"background:#7DBE95;color:#141614\");const h3=el(\"div\",HEAD);// counted, not stated: the number is the claim, so it is arrived at\nconst countEl=el(\"span\",\"display:inline-block;text-align:left;font-variant-numeric:tabular-nums\");countEl.textContent=SOCIAL_TREES.toLocaleString(\"en-GB\");revealToks(h3,[{el:countEl},{t:\"trees,\"},{br:true},...words(\"counted one by one.\")],T3+400,M.text.headline.stagger,M.text.headline.transition.duration);c3.appendChild(h3);const f3=el(\"div\",FOOT,\"
Q3 2026
Verification report
\"+logo(\"#141614\"));beat(f3,{transform:\"translateY(6px)\",opacity:\"0\"},{transform:\"translateY(0)\",opacity:\"1\"},800,T3+2200);c3.appendChild(f3);// hold the final width so the words after it never shift while it counts\nrequestAnimationFrame(()=>{const w=countEl.offsetWidth;if(w)countEl.style.minWidth=w+\"px\";countEl.textContent=\"0\";});const COUNT_FROM=T3+500,COUNT_DUR=M.emphasis.count.long.duration;const countEase=easeOf(M.emphasis.count.long.easing);let countRaf=0;const runCount=()=>{const t0=performance.now();const step=now=>{const p=Math.max(0,Math.min(1,(now-t0-COUNT_FROM)/COUNT_DUR));const e=countEase(p);countEl.textContent=Math.round(SOCIAL_TREES*e).toLocaleString(\"en-GB\");if(p<1)countRaf=requestAnimationFrame(step);};cancelAnimationFrame(countRaf);countRaf=requestAnimationFrame(step);};// ---------------- playback ----------------\nconst still=reducedMotion();if(still){for(const b of beats){b.el.style.transition=\"none\";Object.assign(b.el.style,b.on);}countEl.textContent=SOCIAL_TREES.toLocaleString(\"en-GB\");for(const a of Array.from(frame.querySelectorAll('[style*=\"nsmOrbit\"]')))a.style.animation=\"none\";return cell;}// The paper, the black and the green are the posts themselves: they are always\n// there. Only what is set on them arrives and leaves, so the row never blinks.\nconst fg=[dots,h1,stage,f1,h2,m2,f2,h3,f3];// it holds resolved for a full eight seconds before it leaves\nconst WIND=M.loop.read.hold,OUT=M.exit.scene.transition.duration,CYCLE=WIND+2*OUT;let ids=[];const rest=()=>{for(const e of fg){e.style.transition=\"none\";e.style.opacity=\"1\";}for(const b of beats){b.el.style.transition=\"none\";Object.assign(b.el.style,b.off);}};rest()// never let the resolved state show before the first cycle runs\n;const cycle=()=>{rest();void frame.offsetWidth;for(const b of beats)b.el.style.transition=b.tr;for(const b of beats)Object.assign(b.el.style,b.on);runCount();// it leaves as a cross-fade: nothing is ever seen running backwards\nids.push(setTimeout(()=>{for(const e of fg){e.style.transition=tr(M.exit.scene.transition,\"opacity\");e.style.opacity=\"0\";}},WIND));};let timer=null;const start=()=>{if(timer)return;cycle();timer=setInterval(cycle,CYCLE);};const stop=()=>{if(timer){clearInterval(timer);timer=null;}for(const i of ids)clearTimeout(i);ids=[];cancelAnimationFrame(countRaf);};const io=new IntersectionObserver(es=>{for(const e of es)e.isIntersecting?start():stop();},{rootMargin:\"120px\"});io.observe(cell);return cell;};const mediaGrid=(host,rows)=>{boardFonts();const grid=document.createElement(\"div\");Object.assign(grid.style,{display:\"grid\",gap:GUTTER+\"px\",marginTop:\"40px\"});const rowEls=[];// Vimeo cells collected here, then handed to the shared lazy queue in one go\nconst frames=[];const stillOnly=reducedMotion();for(const row of rows){const rowEl=document.createElement(\"div\");Object.assign(rowEl.style,{gridColumn:\"1 / -1\",display:\"grid\",gap:GUTTER+\"px\",gridTemplateColumns:\"repeat(\"+row.length+\", 1fr)\"});rowEls.push({el:rowEl,count:row.length});for(const s of row){if(s.lab){rowEl.appendChild(ringLab());continue;}if(s.forms){try{rowEl.appendChild(genForms());}catch{}continue;}if(s.dataviz){try{rowEl.appendChild(dataViz());}catch{}continue;}if(s.icons){try{rowEl.appendChild(iconBoard());}catch{}continue;}if(s.card){try{rowEl.appendChild(cardBoard());}catch{}continue;}if(s.micro){try{rowEl.appendChild(microBoard());}catch{}continue;}if(s.evidence){try{rowEl.appendChild(evidenceBoard());}catch{}continue;}if(s.typo){try{rowEl.appendChild(typeBoard());}catch{}continue;}if(s.social){try{rowEl.appendChild(socialBoard());}catch{}continue;}const cell=document.createElement(\"div\");Object.assign(cell.style,{aspectRatio:s.ar||\"16 / 9\",background:\"#1A1916\",overflow:\"hidden\"});if(s.click&&s.url){// a film you choose to watch: poster + play, plays from the start with sound\ncell.style.position=\"relative\";cell.appendChild(clickFilm(s.url,s.poster,\"Runrate\"));rowEl.appendChild(cell);continue;}if(s.html&&EMBEDS[s.html]){const fr=document.createElement(\"iframe\");fr.srcdoc=EMBEDS[s.html];fr.setAttribute(\"sandbox\",\"allow-scripts\");fr.setAttribute(\"loading\",\"lazy\");fr.title=\"Interactive demo\";Object.assign(fr.style,{width:\"100%\",height:\"100%\",border:\"0\",display:\"block\",background:\"#070d1f\"});// phones get the embed's own stacked layout, so the cell takes that ratio\nif(s.arNarrow){const wide=s.ar||\"16 / 9\",narrow=s.arNarrow;const fit=()=>{cell.style.aspectRatio=cell.clientWidth<700?narrow:wide;};new ResizeObserver(fit).observe(cell);}cell.appendChild(fr);rowEl.appendChild(cell);continue;}if(s.vimeo&&!stillOnly){// A board that animates: the loop replaces its own still, at the\n// film's exact ratio so the player never letterboxes inside the\n// cell. Under reduced motion this falls through to the still.\ncell.style.position=\"relative\";const frame=player(s.vimeo,LOOPING,\"\");frame.style.pointerEvents=\"none\";frame.setAttribute(\"aria-hidden\",\"true\");frame.setAttribute(\"tabindex\",\"-1\");if(s.url){// Hold the still until the loop is actually playing: the background\n// player is a black box for several seconds while it buffers.\nconst im=document.createElement(\"img\");im.src=s.url;im.alt=\"\";im.decoding=\"async\";Object.assign(im.style,{position:\"absolute\",inset:\"0\",width:\"100%\",height:\"100%\",objectFit:\"cover\",display:\"block\"});cell.appendChild(im);frame.style.opacity=\"0\";frame.style.transition=\"opacity .6s ease\";const onMsg=e=>{if(e.source!==frame.contentWindow)return;let d;try{d=typeof e.data===\"string\"?JSON.parse(e.data):e.data;}catch{return;}if(d?.event===\"ready\")frame.contentWindow?.postMessage(JSON.stringify({method:\"addEventListener\",value:\"playProgress\"}),\"*\");if(d?.event===\"playProgress\"||d?.event===\"play\"){frame.style.opacity=\"1\";window.removeEventListener(\"message\",onMsg);}};window.addEventListener(\"message\",onMsg);}cell.appendChild(frame);frames.push(frame);// same Sound chip as the top films: restarts the loop with audio, one film at a time\nif(s.sound)attachSoundChip(frame,cell,\"Runrate\");rowEl.appendChild(cell);continue;}if(s.video){// Loops are hosted as Framer file assets, not Vimeo: same CDN as the\n// stills, range requests supported, no per-video embed allowlist.\nconst v=document.createElement(\"video\");v.src=s.url||\"\";v.muted=true;v.loop=true;v.playsInline=true;v.preload=\"metadata\";v.setAttribute(\"muted\",\"\");v.setAttribute(\"playsinline\",\"\");const still=window.matchMedia&&window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;if(!still){v.autoplay=true;v.play().catch(()=>{});}Object.assign(v.style,{width:\"100%\",height:\"100%\",objectFit:\"cover\",display:\"block\"});cell.appendChild(v);rowEl.appendChild(cell);continue;}const img=document.createElement(\"img\");img.src=s.url||\"\";img.alt=\"\";img.loading=\"lazy\";img.decoding=\"async\";Object.assign(img.style,{width:\"100%\",height:\"100%\",objectFit:\"cover\",display:\"block\"});cell.appendChild(img);rowEl.appendChild(cell);}grid.appendChild(rowEl);}host.appendChild(grid);if(frames.length){primeVimeo();lazily(frames);}const bleed=bleedInto(host,grid,()=>{for(const r of rowEls)r.el.style.gridTemplateColumns=host.clientWidth<720?\"1fr\":\"repeat(\"+r.count+\", 1fr)\";});bleed();new ResizeObserver(bleed).observe(host);return grid;};// One sound-enabled film at a time across the whole page (top films and\n// results tiles share the tracker): starting one mutes the last.\nlet nsmSoundOpen=null;const attachSoundChip=(fr,box,label)=>{const post=(method,value)=>fr.contentWindow?.postMessage(JSON.stringify({method,value}),\"*\");const btn=document.createElement(\"button\");btn.type=\"button\";btn.setAttribute(\"aria-label\",\"Play \"+label+\" with sound\");btn.textContent=\"Sound\";Object.assign(btn.style,{position:\"absolute\",left:\"14px\",bottom:\"14px\",zIndex:\"3\",font:\"500 10px/1 'Geist', 'Geist Placeholder', sans-serif\",letterSpacing:\"0.14em\",textTransform:\"uppercase\",padding:\"9px 14px\",borderRadius:\"999px\",cursor:\"pointer\",background:\"rgba(15, 14, 12, 0.72)\",color:\"#F2EDE4\",border:\"1px solid rgba(242, 237, 228, 0.28)\"});let on=false;const off=()=>{on=false;post(\"setMuted\",true);btn.textContent=\"Sound\";btn.style.background=\"rgba(15, 14, 12, 0.72)\";btn.style.color=\"#F2EDE4\";};btn.addEventListener(\"click\",()=>{if(on){off();nsmSoundOpen=null;return;}if(nsmSoundOpen)nsmSoundOpen.off();nsmSoundOpen={off};on=true;post(\"setCurrentTime\",0);post(\"setVolume\",1);post(\"setMuted\",false);post(\"play\");btn.textContent=\"Mute\";btn.style.background=\"#C9A84C\";btn.style.color=\"#0F0E0C\";});box.style.position=\"relative\";box.appendChild(btn);};// A film you choose to watch: poster and a play button; click plays it from the start with sound,\n// click again pauses. Starting it silences any other film playing with sound.\nconst clickFilm=(src,poster,label)=>{const wrap=document.createElement(\"div\");Object.assign(wrap.style,{position:\"absolute\",inset:\"0\",cursor:\"pointer\"});const v=document.createElement(\"video\");v.src=src;if(poster)v.poster=poster;v.playsInline=true;v.preload=\"metadata\";v.setAttribute(\"playsinline\",\"\");Object.assign(v.style,{position:\"absolute\",inset:\"0\",width:\"100%\",height:\"100%\",objectFit:\"cover\",display:\"block\"});const btn=document.createElement(\"button\");btn.type=\"button\";btn.setAttribute(\"aria-label\",\"Play \"+label+\" with sound\");btn.innerHTML='Play with sound';Object.assign(btn.style,{// bottom left, where the Sound chips sit across the site, so it never covers the poster\nposition:\"absolute\",left:\"14px\",bottom:\"14px\",zIndex:\"3\",display:\"flex\",alignItems:\"center\",gap:\"8px\",font:\"500 10px/1 'Geist', 'Geist Placeholder', sans-serif\",letterSpacing:\"0.14em\",textTransform:\"uppercase\",padding:\"8px 14px 8px 10px\",borderRadius:\"999px\",cursor:\"pointer\",background:\"rgba(15, 14, 12, 0.72)\",color:\"#F2EDE4\",border:\"1px solid rgba(242, 237, 228, 0.28)\",transition:\"opacity .25s ease\"});const show=on=>{btn.style.opacity=on?\"1\":\"0\";btn.style.pointerEvents=on?\"auto\":\"none\";};const off=()=>{v.pause();};const play=()=>{if(nsmSoundOpen)nsmSoundOpen.off();nsmSoundOpen={off};if(v.ended)v.currentTime=0;v.muted=false;v.volume=1;v.play().catch(()=>show(true));};v.addEventListener(\"play\",()=>show(false));v.addEventListener(\"pause\",()=>show(true));v.addEventListener(\"ended\",()=>{v.currentTime=0;show(true);});wrap.addEventListener(\"click\",()=>{if(v.paused)play();else v.pause();});wrap.appendChild(v);wrap.appendChild(btn);return wrap;};// Same chip for a Framer-hosted