diff --git a/docs/catalog/components/motion-blur.mdx b/docs/catalog/components/motion-blur.mdx
index d510e853130..265debc0017 100644
--- a/docs/catalog/components/motion-blur.mdx
+++ b/docs/catalog/components/motion-blur.mdx
@@ -26,8 +26,9 @@ That writes one file: `compositions/components/motion-blur.html`.
 <!--
   Motion Blur — After Effects-style shutter-based motion blur.
 
-  Usage: paste this snippet into your composition, then call
-  attachMotionBlur() with any element animated by your GSAP timeline.
+  Usage: paste this snippet into your composition, then put
+  data-hf-motion-blur on any element your GSAP timeline animates.
+  Nothing else to call, and no order to get wrong.
 
   How it works — the same model After Effects uses for the layer Motion Blur
   switch (temporal supersampling), synthesised inside the page because the
@@ -100,12 +101,27 @@ That writes one file: `compositions/components/motion-blur.html`.
   - The host must render the timeline for the blur to update — HyperFrames
     seeks every frame. A fresh paused timeline that is never seeked shows no
     blur on its first frame.
-  - Call attachMotionBlur() AFTER defining all tweens (the timeline's final
-    duration must be known), before window.__timelines registration.
+  - A declarative target is attached as soon as its composition's timeline is
+    registered, and the registry is also polled for about eight seconds after
+    load, so a composition that mounts asynchronously is picked up too. A
+    target added to the document after that window needs attachMotionBlur().
   - GSAP must be loaded before this snippet executes.
 
   API:
-    attachMotionBlur(selector, timeline, options?)
+    data-hf-motion-blur on the element that moves. Empty for defaults, else a
+      JSON OBJECT of the options below (double quotes on the keys). The
+      element's timeline is the one registered under the data-composition-id of
+      its nearest ancestor carrying that attribute, so a sub-composition's
+      targets follow that sub-composition.
+      Three things warn rather than rendering sharp in silence: a target no
+      composition ever registers a timeline for, a value that is not JSON, and
+      a value that parses but is not an object (null, a number, a string).
+      A second timeline registered under the same key also warns: the copies
+      keep following the first one.
+    attachMotionBlur(selector, timeline, options?) — the imperative form, for a
+      target built after the polling window. Call it AFTER defining all tweens,
+      so the timeline's final duration is known.
+      Either form blurs a given element once, whichever names it first.
 
   Options:
     shutterAngle     — degrees of the frame interval the shutter is open
@@ -116,23 +132,61 @@ That writes one file: `compositions/components/motion-blur.html`.
                        back, like the AE reference)
     samplesPerFrame  — sub-intervals of the shutter window, so N+1 duplicates
                        each at 1/N opacity (default 16, max 64)
-    fps              — composition frame rate (default: the root's data-fps,
-                       else 30). Pass it explicitly when rendering with an
-                       fps override (`hyperframes render --fps`).
+    fps              — composition frame rate (default: the data-fps of the
+                       target's own composition root, else 30). Pass it
+                       explicitly when rendering with an fps override
+                       (`hyperframes render --fps`).
+
+  A key that is none of the four, or a value that is not a finite number, is
+  refused by name rather than read as defaults. Both halves matter: a
+  non-numeric angle hides the smear, and a non-numeric phase seeks every copy
+  to NaN, which parks them at the timeline's start.
 -->
 
 <script>
   (function () {
+    /* SHUTTER_SNIPPET_START */
     if (!window._hfMbUid) window._hfMbUid = 0;
     if (!window._hfMbAttached) window._hfMbAttached = new WeakSet();
+    if (!window._hfMbSkipped) window._hfMbSkipped = new WeakSet();
+    if (!window._hfMbProxies) window._hfMbProxies = new WeakSet();
+    if (!window._hfMbTimeline) window._hfMbTimeline = new WeakMap();
+    if (!window._hfMbWarned) window._hfMbWarned = new WeakSet();
+
+    // The declarative form. A copy of a target must not carry it, or the copy is swept
+    // as a target of its own; the group's own marker is `data-hf-motion-blur-group`.
+    var SWEEP_ATTR = "data-hf-motion-blur";
+    // About eight seconds. Long enough for an asynchronously mounted sub-composition, short
+    // enough that a page with a genuine mistake in it reports before anyone stops watching.
+    var POLL_MS = 32;
+    var POLL_TICKS = 250;
+    var SWEEP_SELECTOR = "[" + SWEEP_ATTR + "]";
+    var OPTION_KEYS = ["shutterAngle", "shutterPhase", "samplesPerFrame", "fps"];
+
+    // A copy is a deep clone, so the attribute rides along on the root AND on every marked
+    // descendant. Any one left behind is swept as a target of its own, which clones again.
+    var COPY_STRIP = [SWEEP_ATTR, "data-composition-id", "data-fps"];
+
+    function stripAttrs(el) {
+      for (var a = 0; a < COPY_STRIP.length; a++) el.removeAttribute(COPY_STRIP[a]);
+    }
+
+    function stripCopyAttrs(root) {
+      stripAttrs(root);
+      var inner = root.querySelectorAll("[" + COPY_STRIP.join("],[") + "]");
+      for (var i = 0; i < inner.length; i++) stripAttrs(inner[i]);
+    }
 
-    // Shutter length is measured in frames, so the snippet must know the
-    // composition frame rate: explicit option, else the root's data-fps, else 30.
-    function resolveFps(optionFps) {
+    // Shutter length is measured in frames, so the snippet must know the composition
+    // frame rate: explicit option, else the target's OWN root, else the first root in
+    // the document, else 30. The target's root is what makes two compositions on one
+    // page read their own data-fps instead of sharing the first one written.
+    function resolveFps(optionFps, target) {
       var explicit = Number(optionFps);
       if (explicit > 0) return explicit;
 
-      var root = document.querySelector("[data-composition-id][data-fps]");
+      var scoped = target ? target.closest("[data-composition-id][data-fps]") : null;
+      var root = scoped || document.querySelector("[data-composition-id][data-fps]");
       var rootFps = root ? Number(root.getAttribute("data-fps")) : 0;
       if (rootFps > 0) return rootFps;
 
@@ -202,8 +256,6 @@ That writes one file: `compositions/components/motion-blur.html`.
       var samples = Number.isFinite(requestedSamples)
         ? Math.max(2, Math.min(64, Math.round(requestedSamples)))
         : 16;
-      var fps = resolveFps(opts.fps);
-
       var items = Array.isArray(selector) ? selector : [selector];
       var targets = items.reduce(function (acc, s) {
         if (typeof s === "string") {
@@ -258,52 +310,91 @@ That writes one file: `compositions/components/motion-blur.html`.
         return value && value !== "none" ? "perspective(" + value + ") " : "";
       }
 
-      var state = targets
-        .filter(function (el) {
-          // One group per element. A second call on the same element would stack a
-          // second set of copies over the first and double the ink, so the first
-          // call owns it.
-          if (window._hfMbAttached.has(el)) return false;
-          window._hfMbAttached.add(el);
-          return true;
-        })
-        .map(function (el) {
-          var group = document.createElement("div");
-          group.setAttribute("data-hf-motion-blur", "hf-mb-" + window._hfMbUid++);
-          group.style.cssText =
-            "position:absolute;left:0;top:0;width:0;height:0;isolation:isolate;pointer-events:none;display:none;";
-
-          var clones = [];
-          for (var k = 0; k < copies; k++) {
-            var clone = el.cloneNode(true);
-            clone.removeAttribute("id");
-            clones.push(clone);
-            group.appendChild(clone);
-          }
-          el.parentNode.insertBefore(group, el);
-
-          var s = { el: el, group: group, clones: clones, samples: [], perspective: "" };
-
-          // Resolved styles and the parent's perspective are px once read, so a
-          // container-relative element needs them again when its box changes. Per frame
-          // that would walk the whole subtree once per copy; on resize it costs nothing
-          // on a fixed-size render and keeps a live preview honest.
-          function snapshot() {
-            var styles = resolvedStyles(el, []);
-            s.perspective = parentPerspective(el);
-            for (var c = 0; c < clones.length; c++) {
-              paintResolvedStyles(clones[c], styles, { i: 0 });
-              clones[c].style.position = "absolute";
-              clones[c].style.margin = "0";
-              clones[c].style.opacity = alpha;
-              clones[c].style.mixBlendMode = "plus-lighter";
-            }
+      function attachOne(el) {
+        var group = document.createElement("div");
+        group.setAttribute("data-hf-motion-blur-group", "hf-mb-" + window._hfMbUid++);
+        group.style.cssText =
+          "position:absolute;left:0;top:0;width:0;height:0;isolation:isolate;pointer-events:none;display:none;";
+
+        var clones = [];
+        for (var k = 0; k < copies; k++) {
+          var clone = el.cloneNode(true);
+          clone.removeAttribute("id");
+          stripCopyAttrs(clone);
+          clones.push(clone);
+          group.appendChild(clone);
+        }
+        var s = {
+          el: el,
+          group: group,
+          clones: clones,
+          samples: [],
+          perspective: "",
+          watch: null,
+        };
+
+        // Resolved styles and the parent's perspective are px once read, so a
+        // container-relative element needs them again when its box changes. Per frame
+        // that would walk the whole subtree once per copy; on resize it costs nothing
+        // on a fixed-size render and keeps a live preview honest.
+        function snapshot() {
+          var styles = resolvedStyles(el, []);
+          s.perspective = parentPerspective(el);
+          for (var c = 0; c < clones.length; c++) {
+            paintResolvedStyles(clones[c], styles, { i: 0 });
+            clones[c].style.position = "absolute";
+            clones[c].style.margin = "0";
+            clones[c].style.opacity = alpha;
+            clones[c].style.mixBlendMode = "plus-lighter";
           }
+        }
 
-          snapshot();
-          if (typeof ResizeObserver === "function") new ResizeObserver(snapshot).observe(el);
-          return s;
-        });
+        // Snapshot BEFORE the group enters the page, so a throw in the style walk leaves
+        // nothing behind: the record the rollback needs does not exist until it returns.
+        snapshot();
+        el.parentNode.insertBefore(group, el);
+        if (typeof ResizeObserver === "function") {
+          s.watch = new ResizeObserver(snapshot);
+          s.watch.observe(el);
+        }
+        return s;
+      }
+
+      var state = [];
+      // Every element this call marked. A throw inside `attachOne` never returns its
+      // record, so `state` alone cannot give the marks back.
+      var claimed = [];
+      try {
+        for (var q = 0; q < targets.length; q++) {
+          var candidate = targets[q];
+          // One group per element, whether a second call names it or one call names it
+          // twice: a second set of copies over the first would double the ink. Marked
+          // BEFORE the copies go in: inserting them runs custom-element reactions
+          // synchronously, and one that registers a timeline re-enters the write trap.
+          if (window._hfMbAttached.has(candidate)) continue;
+          window._hfMbAttached.add(candidate);
+          window._hfMbTimeline.set(candidate, tl);
+          claimed.push(candidate);
+          state.push(attachOne(candidate));
+        }
+      } catch (e) {
+        unmark(claimed);
+        discard(state);
+        throw e;
+      }
+      // Nothing to blur means nothing to seek: a tracker here would run the whole sample
+      // loop every frame over an empty set.
+      if (state.length === 0) return;
+
+      // One seek loop drives the whole call, so the window is ONE length, and it belongs
+      // to the composition of an element this call actually attached.
+      var fps = resolveFps(opts.fps, state[0].el);
+      for (var d = 1; d < state.length; d++) {
+        if (resolveFps(opts.fps, state[d].el) === fps) continue;
+        var line = "one call cannot blur compositions at different frame rates; using ";
+        console.warn("[motion-blur] " + line + fps, state[d].el);
+        break;
+      }
 
       function readTransform(el) {
         var cs = getComputedStyle(el);
@@ -390,30 +481,256 @@ That writes one file: `compositions/components/motion-blur.html`.
       // seeking GSAP from inside its own render reads stale tween state, while the microtask
       // runs after the seek returns and before the frame is captured or painted.
       var _proxy = { t: 0 };
-      tl.to(
-        _proxy,
-        {
-          t: 1,
-          duration: Math.max(tl.duration(), 0.1),
-          ease: "none",
-          onUpdate: function () {
-            if (scheduled) return;
-            scheduled = true;
-            Promise.resolve().then(function () {
-              scheduled = false;
-              applyShutter();
-            });
+      try {
+        tl.to(
+          _proxy,
+          {
+            t: 1,
+            duration: Math.max(tl.duration(), 0.1),
+            ease: "none",
+            onUpdate: function () {
+              if (scheduled) return;
+              scheduled = true;
+              Promise.resolve().then(function () {
+                scheduled = false;
+                applyShutter();
+              });
+            },
           },
+          0,
+        );
+      } catch (e) {
+        unmark(claimed);
+        discard(state);
+        throw e;
+      }
+    };
+
+    // An empty attribute means defaults; anything else is a JSON options object. A value that
+    // is not an options object is skipped loudly rather than read as defaults, because a typo
+    // in it would otherwise render as a silently unblurred element.
+    function sweepOptions(el) {
+      var text = (el.getAttribute(SWEEP_ATTR) || "").trim();
+      if (text === "") return {};
+      var parsed = null;
+      try {
+        parsed = JSON.parse(text);
+      } catch (e) {
+        return refuse(el, "is not JSON: " + text);
+      }
+      // `null`, a number and a string all parse. None of them is a set of options.
+      if (parsed === null || typeof parsed !== "object" || Array.isArray(parsed)) {
+        return refuse(el, "is not a JSON object: " + text);
+      }
+      var bad = unknownKey(parsed);
+      if (bad !== null) return refuse(el, "names no such option: " + bad);
+      var wrong = nonNumber(parsed);
+      if (wrong !== null) return refuse(el, "needs a number for " + wrong);
+      return parsed;
+    }
+
+    // A misspelled key is the likeliest typo in a JSON object, and reading it as
+    // defaults is the silent no-op this attribute exists to remove.
+    function unknownKey(parsed) {
+      for (var key in parsed) {
+        if (OPTION_KEYS.indexOf(key) < 0) return key;
+      }
+      return null;
+    }
+
+    // A key with a value the shutter cannot use is the same silent no-op as a key it does
+    // not know: a non-numeric angle hides the smear, a non-numeric phase parks every copy
+    // at the timeline's start. JSON gives real numbers, so anything else is a typo.
+    function nonNumber(parsed) {
+      for (var i = 0; i < OPTION_KEYS.length; i++) {
+        var held = parsed[OPTION_KEYS[i]];
+        if (held === undefined) continue;
+        if (typeof held !== "number" || !Number.isFinite(held)) return OPTION_KEYS[i];
+      }
+      return null;
+    }
+
+    // A throw partway through an attach leaves an element blurred by nothing, so the copies
+    // go too, along with the observer that would otherwise keep walking a detached subtree
+    // on every resize of an element nothing blurs.
+    // The mark is what a second trigger reads, so it is the first thing to give back.
+    function unmark(els) {
+      for (var i = 0; i < els.length; i++) {
+        window._hfMbAttached.delete(els[i]);
+        window._hfMbTimeline.delete(els[i]);
+      }
+    }
+
+    function discard(state) {
+      for (var i = 0; i < state.length; i++) {
+        var s = state[i];
+        if (s.watch !== null) s.watch.disconnect();
+        if (s.group.parentNode !== null) s.group.parentNode.removeChild(s.group);
+      }
+    }
+
+    function refuse(el, why) {
+      window._hfMbSkipped.add(el);
+      console.warn("[motion-blur] " + SWEEP_ATTR + " " + why, el);
+      return null;
+    }
+
+    // An element belongs to the nearest composition above it, so a sub-composition's
+    // targets follow that sub-composition's own timeline.
+    function compositionOf(el) {
+      var host = el.closest("[data-composition-id]");
+      return host ? host.getAttribute("data-composition-id") : null;
+    }
+
+    // Anything else registered on the container is somebody else's bookkeeping: a
+    // timeline is the thing this snippet can seek and extend.
+    function isTimeline(value) {
+      return !!value && typeof value.time === "function" && typeof value.to === "function";
+    }
+
+    // Attached, or skipped as unparseable. Both are terminal, so a later trigger must not
+    // report or attach the element twice.
+    function handled(el) {
+      return window._hfMbAttached.has(el) || window._hfMbSkipped.has(el);
+    }
+
+    // The timeline registered for an element's own composition, or null. Read from the
+    // registry rather than taken from whoever wrote it, so every trigger agrees.
+    function timelineFor(el) {
+      var id = compositionOf(el);
+      if (id === null) return null;
+      var registry = window.__timelines;
+      var found = registry ? registry[id] : null;
+      return isTimeline(found) ? found : null;
+    }
+
+    // A marked element whose parent is not an Element has no target above it: the parent
+    // of a root is the Document, which has no `closest`.
+    function nestedInTarget(el) {
+      var parent = el.parentNode;
+      if (parent === null || typeof parent.closest !== "function") return false;
+      return parent.closest(SWEEP_SELECTOR) !== null;
+    }
+
+    // One owner of attaching one element. Answers whether the element still needs a trigger.
+    function claim(el) {
+      var tl = timelineFor(el);
+      if (handled(el)) {
+        var owner = window._hfMbTimeline.get(el);
+        // Re-registering a key with a DIFFERENT timeline leaves the copies driven by the one
+        // nobody seeks, which renders sharp and says nothing. Report it rather than guess.
+        var changed = tl !== null && owner !== undefined && owner !== tl;
+        if (changed && !window._hfMbWarned.has(el)) {
+          window._hfMbWarned.add(el);
+          console.warn(
+            "[motion-blur] a second timeline registered for this element; the copies still follow the first",
+            el,
+          );
+        }
+        return true;
+      }
+      // Its group would be inserted into the live outer element, so the outer target's
+      // style replay would walk a subtree its cursor no longer matches.
+      if (nestedInTarget(el)) {
+        refuse(el, "cannot blur a target inside another target; blur one of them");
+        return true;
+      }
+      var opts = sweepOptions(el);
+      if (opts === null) return true;
+      if (tl === null) return false;
+      window.attachMotionBlur(el, tl, opts);
+      return true;
+    }
+
+    // Returns the elements still waiting for their composition to register a timeline.
+    // The trap below runs this INSIDE the author's registration statement, so one bad
+    // target must not abort the rest of their composition script.
+    function sweep() {
+      var pending = [];
+      document.querySelectorAll(SWEEP_SELECTOR).forEach(function (el) {
+        try {
+          if (!claim(el)) pending.push(el);
+        } catch (e) {
+          window._hfMbSkipped.add(el);
+          console.warn("[motion-blur] could not blur this element: " + e, el);
+        }
+      });
+      return pending;
+    }
+
+    // Registering a timeline is the moment the author has finished building it, so trapping
+    // the write attaches before the renderer captures a frame. A microtask would be too
+    // early: it runs before the next `<script>` tag.
+    function registrationProxy(container) {
+      var proxy = new Proxy(container, {
+        set: function (target, key, value) {
+          target[key] = value;
+          if (typeof key === "string") sweep();
+          return true;
         },
-        0,
+      });
+      window._hfMbProxies.add(proxy);
+      return proxy;
+    }
+
+    function hookRegistration() {
+      var held = window.__timelines;
+      Object.defineProperty(window, "__timelines", {
+        configurable: true,
+        enumerable: true,
+        get: function () {
+          return held;
+        },
+        set: function (value) {
+          var container = !!value && typeof value === "object";
+          var fresh = container && !window._hfMbProxies.has(value);
+          held = fresh ? registrationProxy(value) : value;
+          if (fresh) sweep();
+        },
+      });
+      // A container assigned before this snippet ran is replayed through the setter, so a
+      // timeline already registered on it is swept too.
+      if (held !== undefined) window.__timelines = held;
+    }
+
+    // The trap above cannot see every registration: the runtime owns the registry object,
+    // wraps it per sub-composition, and mounts nested compositions asynchronously. So the
+    // registry is also POLLED, which needs no cooperation from whoever writes it.
+    function poll(ticks) {
+      var pending = sweep();
+      // The WHOLE budget, every time. Stopping the first tick nothing is pending kills the
+      // poll one tick into an ordinary page, which is before a late composition arrives.
+      if (ticks > 0) {
+        setTimeout(function () {
+          poll(ticks - 1);
+        }, POLL_MS);
+        return;
+      }
+      if (pending.length === 0) return;
+      var count = pending.length + " element(s) carry " + SWEEP_ATTR;
+      console.warn(
+        "[motion-blur] " + count + ", and no composition registered a timeline for them",
+        pending,
       );
-    };
+    }
+
+    if (!window._hfMbHooked) {
+      window._hfMbHooked = true;
+      hookRegistration();
+      poll(POLL_TICKS);
+    }
+    /* SHUTTER_SNIPPET_END */
   })();
 </script>
 
 <!--
   Timeline integration example:
 
+  <div id="root" data-composition-id="my-composition" data-duration="6" data-fps="30">
+    <div id="my-box" data-hf-motion-blur></div>
+    <div id="my-title" data-hf-motion-blur='{"shutterAngle": 360}'></div>
+  </div>
+
   const tl = gsap.timeline({ paused: true });
 
   tl.fromTo("#my-box", { x: -100 }, { x: 1700, duration: 1.2, ease: "power3.inOut" }, 0.5);
@@ -421,13 +738,12 @@ That writes one file: `compositions/components/motion-blur.html`.
   // Extend to data-duration so seeks past the last tween reach the blur callback.
   tl.set(document.body, {}, DATA_DURATION);
 
-  // Call AFTER tweens, BEFORE window.__timelines registration.
-  // attachMotionBlur adds a tracking tween with onUpdate — must be called after
-  // tl.set()/tl.to() have established the final timeline duration.
-  attachMotionBlur("#my-box", tl, { shutterAngle: 720, samplesPerFrame: 16 });
-
+  // The registration below is what attaches both targets, in that order.
   window.__timelines = window.__timelines || {};
   window.__timelines["my-composition"] = tl;
+
+  // Only for an element created later than the polling window above:
+  attachMotionBlur("#late-box", tl, { shutterAngle: 720, samplesPerFrame: 16 });
 -->
 ```
 
@@ -435,19 +751,31 @@ That writes one file: `compositions/components/motion-blur.html`.
 
 ## Usage
 
-Paste the snippet into your composition, then call `attachMotionBlur()` after your GSAP tweens and before registering `window.__timelines`.
+Paste the snippet into your composition, then put `data-hf-motion-blur` on any element your timeline animates. Nothing else to call, and no order to get wrong.
+
+```html
+<div id="root" data-composition-id="my-composition" data-duration="4" data-fps="30">
+  <!-- Defaults: a two-frame shutter at 16 sub-intervals. -->
+  <div id="my-box" data-hf-motion-blur></div>
+
+  <!-- Or a JSON object of options. An unknown name, or a value that is not a
+       number, is refused by name rather than read as defaults. -->
+  <div id="my-title" data-hf-motion-blur='{"shutterAngle": 360, "samplesPerFrame": 8}'></div>
+</div>
+```
+
+The element finds its own timeline: its nearest `[data-composition-id]` ancestor names the key, and the snippet reads `window.__timelines[key]`. An element whose composition never registers a timeline says so in the console instead of rendering sharp in silence.
+
+`attachMotionBlur()` stays available for a target built after the page has settled. It has an ordering contract the attribute does not: call it after every tween is defined, so the timeline's final duration is known.
 
 ```html
 <!-- Extend the timeline to data-duration before calling attachMotionBlur -->
 tl.set(document.body, {}, DATA_DURATION);
 
-attachMotionBlur("#my-box", tl, {
+attachMotionBlur("#late-box", tl, {
   shutterAngle: 720,   // degrees of the frame interval the shutter is open
   samplesPerFrame: 16, // sub-intervals of the window; 17 duplicates at 1/16 each
 });
-
-window.__timelines = window.__timelines || {};
-window.__timelines["my-composition"] = tl;
 ```
 
 ## How it works
diff --git a/docs/catalog/components/shutter-slam.mdx b/docs/catalog/components/shutter-slam.mdx
index d32bb6ddcc6..aeed58fd7af 100644
--- a/docs/catalog/components/shutter-slam.mdx
+++ b/docs/catalog/components/shutter-slam.mdx
@@ -154,16 +154,48 @@ you paste it into.
         <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
         <script>
           (function () {
+            /* SHUTTER_SNIPPET_START */
             if (!window._hfMbUid) window._hfMbUid = 0;
             if (!window._hfMbAttached) window._hfMbAttached = new WeakSet();
+            if (!window._hfMbSkipped) window._hfMbSkipped = new WeakSet();
+            if (!window._hfMbProxies) window._hfMbProxies = new WeakSet();
+            if (!window._hfMbTimeline) window._hfMbTimeline = new WeakMap();
+            if (!window._hfMbWarned) window._hfMbWarned = new WeakSet();
+
+            // The declarative form. A copy of a target must not carry it, or the copy is swept
+            // as a target of its own; the group's own marker is `data-hf-motion-blur-group`.
+            var SWEEP_ATTR = "data-hf-motion-blur";
+            // About eight seconds. Long enough for an asynchronously mounted sub-composition, short
+            // enough that a page with a genuine mistake in it reports before anyone stops watching.
+            var POLL_MS = 32;
+            var POLL_TICKS = 250;
+            var SWEEP_SELECTOR = "[" + SWEEP_ATTR + "]";
+            var OPTION_KEYS = ["shutterAngle", "shutterPhase", "samplesPerFrame", "fps"];
+
+            // A copy is a deep clone, so the attribute rides along on the root AND on every marked
+            // descendant. Any one left behind is swept as a target of its own, which clones again.
+            var COPY_STRIP = [SWEEP_ATTR, "data-composition-id", "data-fps"];
+
+            function stripAttrs(el) {
+              for (var a = 0; a < COPY_STRIP.length; a++) el.removeAttribute(COPY_STRIP[a]);
+            }
+
+            function stripCopyAttrs(root) {
+              stripAttrs(root);
+              var inner = root.querySelectorAll("[" + COPY_STRIP.join("],[") + "]");
+              for (var i = 0; i < inner.length; i++) stripAttrs(inner[i]);
+            }
 
-            // Shutter length is measured in frames, so the snippet must know the
-            // composition frame rate: explicit option, else the root's data-fps, else 30.
-            function resolveFps(optionFps) {
+            // Shutter length is measured in frames, so the snippet must know the composition
+            // frame rate: explicit option, else the target's OWN root, else the first root in
+            // the document, else 30. The target's root is what makes two compositions on one
+            // page read their own data-fps instead of sharing the first one written.
+            function resolveFps(optionFps, target) {
               var explicit = Number(optionFps);
               if (explicit > 0) return explicit;
 
-              var root = document.querySelector("[data-composition-id][data-fps]");
+              var scoped = target ? target.closest("[data-composition-id][data-fps]") : null;
+              var root = scoped || document.querySelector("[data-composition-id][data-fps]");
               var rootFps = root ? Number(root.getAttribute("data-fps")) : 0;
               if (rootFps > 0) return rootFps;
 
@@ -233,8 +265,6 @@ you paste it into.
               var samples = Number.isFinite(requestedSamples)
                 ? Math.max(2, Math.min(64, Math.round(requestedSamples)))
                 : 16;
-              var fps = resolveFps(opts.fps);
-
               var items = Array.isArray(selector) ? selector : [selector];
               var targets = items.reduce(function (acc, s) {
                 if (typeof s === "string") {
@@ -289,53 +319,91 @@ you paste it into.
                 return value && value !== "none" ? "perspective(" + value + ") " : "";
               }
 
-              var state = targets
-                .filter(function (el) {
-                  // One group per element. A second call on the same element would stack a
-                  // second set of copies over the first and double the ink, so the first
-                  // call owns it.
-                  if (window._hfMbAttached.has(el)) return false;
-                  window._hfMbAttached.add(el);
-                  return true;
-                })
-                .map(function (el) {
-                  var group = document.createElement("div");
-                  group.setAttribute("data-hf-motion-blur", "hf-mb-" + window._hfMbUid++);
-                  group.style.cssText =
-                    "position:absolute;left:0;top:0;width:0;height:0;isolation:isolate;pointer-events:none;display:none;";
-
-                  var clones = [];
-                  for (var k = 0; k < copies; k++) {
-                    var clone = el.cloneNode(true);
-                    clone.removeAttribute("id");
-                    clones.push(clone);
-                    group.appendChild(clone);
-                  }
-                  el.parentNode.insertBefore(group, el);
-
-                  var s = { el: el, group: group, clones: clones, samples: [], perspective: "" };
-
-                  // Resolved styles and the parent's perspective are px once read, so a
-                  // container-relative element needs them again when its box changes. Per frame
-                  // that would walk the whole subtree once per copy; on resize it costs nothing
-                  // on a fixed-size render and keeps a live preview honest.
-                  function snapshot() {
-                    var styles = resolvedStyles(el, []);
-                    s.perspective = parentPerspective(el);
-                    for (var c = 0; c < clones.length; c++) {
-                      paintResolvedStyles(clones[c], styles, { i: 0 });
-                      clones[c].style.position = "absolute";
-                      clones[c].style.margin = "0";
-                      clones[c].style.opacity = alpha;
-                      clones[c].style.mixBlendMode = "plus-lighter";
-                    }
+              function attachOne(el) {
+                var group = document.createElement("div");
+                group.setAttribute("data-hf-motion-blur-group", "hf-mb-" + window._hfMbUid++);
+                group.style.cssText =
+                  "position:absolute;left:0;top:0;width:0;height:0;isolation:isolate;pointer-events:none;display:none;";
+
+                var clones = [];
+                for (var k = 0; k < copies; k++) {
+                  var clone = el.cloneNode(true);
+                  clone.removeAttribute("id");
+                  stripCopyAttrs(clone);
+                  clones.push(clone);
+                  group.appendChild(clone);
+                }
+                var s = {
+                  el: el,
+                  group: group,
+                  clones: clones,
+                  samples: [],
+                  perspective: "",
+                  watch: null,
+                };
+
+                // Resolved styles and the parent's perspective are px once read, so a
+                // container-relative element needs them again when its box changes. Per frame
+                // that would walk the whole subtree once per copy; on resize it costs nothing
+                // on a fixed-size render and keeps a live preview honest.
+                function snapshot() {
+                  var styles = resolvedStyles(el, []);
+                  s.perspective = parentPerspective(el);
+                  for (var c = 0; c < clones.length; c++) {
+                    paintResolvedStyles(clones[c], styles, { i: 0 });
+                    clones[c].style.position = "absolute";
+                    clones[c].style.margin = "0";
+                    clones[c].style.opacity = alpha;
+                    clones[c].style.mixBlendMode = "plus-lighter";
                   }
+                }
 
-                  snapshot();
-                  if (typeof ResizeObserver === "function")
-                    new ResizeObserver(snapshot).observe(el);
-                  return s;
-                });
+                // Snapshot BEFORE the group enters the page, so a throw in the style walk leaves
+                // nothing behind: the record the rollback needs does not exist until it returns.
+                snapshot();
+                el.parentNode.insertBefore(group, el);
+                if (typeof ResizeObserver === "function") {
+                  s.watch = new ResizeObserver(snapshot);
+                  s.watch.observe(el);
+                }
+                return s;
+              }
+
+              var state = [];
+              // Every element this call marked. A throw inside `attachOne` never returns its
+              // record, so `state` alone cannot give the marks back.
+              var claimed = [];
+              try {
+                for (var q = 0; q < targets.length; q++) {
+                  var candidate = targets[q];
+                  // One group per element, whether a second call names it or one call names it
+                  // twice: a second set of copies over the first would double the ink. Marked
+                  // BEFORE the copies go in: inserting them runs custom-element reactions
+                  // synchronously, and one that registers a timeline re-enters the write trap.
+                  if (window._hfMbAttached.has(candidate)) continue;
+                  window._hfMbAttached.add(candidate);
+                  window._hfMbTimeline.set(candidate, tl);
+                  claimed.push(candidate);
+                  state.push(attachOne(candidate));
+                }
+              } catch (e) {
+                unmark(claimed);
+                discard(state);
+                throw e;
+              }
+              // Nothing to blur means nothing to seek: a tracker here would run the whole sample
+              // loop every frame over an empty set.
+              if (state.length === 0) return;
+
+              // One seek loop drives the whole call, so the window is ONE length, and it belongs
+              // to the composition of an element this call actually attached.
+              var fps = resolveFps(opts.fps, state[0].el);
+              for (var d = 1; d < state.length; d++) {
+                if (resolveFps(opts.fps, state[d].el) === fps) continue;
+                var line = "one call cannot blur compositions at different frame rates; using ";
+                console.warn("[motion-blur] " + line + fps, state[d].el);
+                break;
+              }
 
               function readTransform(el) {
                 var cs = getComputedStyle(el);
@@ -422,24 +490,245 @@ you paste it into.
               // seeking GSAP from inside its own render reads stale tween state, while the microtask
               // runs after the seek returns and before the frame is captured or painted.
               var _proxy = { t: 0 };
-              tl.to(
-                _proxy,
-                {
-                  t: 1,
-                  duration: Math.max(tl.duration(), 0.1),
-                  ease: "none",
-                  onUpdate: function () {
-                    if (scheduled) return;
-                    scheduled = true;
-                    Promise.resolve().then(function () {
-                      scheduled = false;
-                      applyShutter();
-                    });
+              try {
+                tl.to(
+                  _proxy,
+                  {
+                    t: 1,
+                    duration: Math.max(tl.duration(), 0.1),
+                    ease: "none",
+                    onUpdate: function () {
+                      if (scheduled) return;
+                      scheduled = true;
+                      Promise.resolve().then(function () {
+                        scheduled = false;
+                        applyShutter();
+                      });
+                    },
                   },
+                  0,
+                );
+              } catch (e) {
+                unmark(claimed);
+                discard(state);
+                throw e;
+              }
+            };
+
+            // An empty attribute means defaults; anything else is a JSON options object. A value that
+            // is not an options object is skipped loudly rather than read as defaults, because a typo
+            // in it would otherwise render as a silently unblurred element.
+            function sweepOptions(el) {
+              var text = (el.getAttribute(SWEEP_ATTR) || "").trim();
+              if (text === "") return {};
+              var parsed = null;
+              try {
+                parsed = JSON.parse(text);
+              } catch (e) {
+                return refuse(el, "is not JSON: " + text);
+              }
+              // `null`, a number and a string all parse. None of them is a set of options.
+              if (parsed === null || typeof parsed !== "object" || Array.isArray(parsed)) {
+                return refuse(el, "is not a JSON object: " + text);
+              }
+              var bad = unknownKey(parsed);
+              if (bad !== null) return refuse(el, "names no such option: " + bad);
+              var wrong = nonNumber(parsed);
+              if (wrong !== null) return refuse(el, "needs a number for " + wrong);
+              return parsed;
+            }
+
+            // A misspelled key is the likeliest typo in a JSON object, and reading it as
+            // defaults is the silent no-op this attribute exists to remove.
+            function unknownKey(parsed) {
+              for (var key in parsed) {
+                if (OPTION_KEYS.indexOf(key) < 0) return key;
+              }
+              return null;
+            }
+
+            // A key with a value the shutter cannot use is the same silent no-op as a key it does
+            // not know: a non-numeric angle hides the smear, a non-numeric phase parks every copy
+            // at the timeline's start. JSON gives real numbers, so anything else is a typo.
+            function nonNumber(parsed) {
+              for (var i = 0; i < OPTION_KEYS.length; i++) {
+                var held = parsed[OPTION_KEYS[i]];
+                if (held === undefined) continue;
+                if (typeof held !== "number" || !Number.isFinite(held)) return OPTION_KEYS[i];
+              }
+              return null;
+            }
+
+            // A throw partway through an attach leaves an element blurred by nothing, so the copies
+            // go too, along with the observer that would otherwise keep walking a detached subtree
+            // on every resize of an element nothing blurs.
+            // The mark is what a second trigger reads, so it is the first thing to give back.
+            function unmark(els) {
+              for (var i = 0; i < els.length; i++) {
+                window._hfMbAttached.delete(els[i]);
+                window._hfMbTimeline.delete(els[i]);
+              }
+            }
+
+            function discard(state) {
+              for (var i = 0; i < state.length; i++) {
+                var s = state[i];
+                if (s.watch !== null) s.watch.disconnect();
+                if (s.group.parentNode !== null) s.group.parentNode.removeChild(s.group);
+              }
+            }
+
+            function refuse(el, why) {
+              window._hfMbSkipped.add(el);
+              console.warn("[motion-blur] " + SWEEP_ATTR + " " + why, el);
+              return null;
+            }
+
+            // An element belongs to the nearest composition above it, so a sub-composition's
+            // targets follow that sub-composition's own timeline.
+            function compositionOf(el) {
+              var host = el.closest("[data-composition-id]");
+              return host ? host.getAttribute("data-composition-id") : null;
+            }
+
+            // Anything else registered on the container is somebody else's bookkeeping: a
+            // timeline is the thing this snippet can seek and extend.
+            function isTimeline(value) {
+              return !!value && typeof value.time === "function" && typeof value.to === "function";
+            }
+
+            // Attached, or skipped as unparseable. Both are terminal, so a later trigger must not
+            // report or attach the element twice.
+            function handled(el) {
+              return window._hfMbAttached.has(el) || window._hfMbSkipped.has(el);
+            }
+
+            // The timeline registered for an element's own composition, or null. Read from the
+            // registry rather than taken from whoever wrote it, so every trigger agrees.
+            function timelineFor(el) {
+              var id = compositionOf(el);
+              if (id === null) return null;
+              var registry = window.__timelines;
+              var found = registry ? registry[id] : null;
+              return isTimeline(found) ? found : null;
+            }
+
+            // A marked element whose parent is not an Element has no target above it: the parent
+            // of a root is the Document, which has no `closest`.
+            function nestedInTarget(el) {
+              var parent = el.parentNode;
+              if (parent === null || typeof parent.closest !== "function") return false;
+              return parent.closest(SWEEP_SELECTOR) !== null;
+            }
+
+            // One owner of attaching one element. Answers whether the element still needs a trigger.
+            function claim(el) {
+              var tl = timelineFor(el);
+              if (handled(el)) {
+                var owner = window._hfMbTimeline.get(el);
+                // Re-registering a key with a DIFFERENT timeline leaves the copies driven by the one
+                // nobody seeks, which renders sharp and says nothing. Report it rather than guess.
+                var changed = tl !== null && owner !== undefined && owner !== tl;
+                if (changed && !window._hfMbWarned.has(el)) {
+                  window._hfMbWarned.add(el);
+                  console.warn(
+                    "[motion-blur] a second timeline registered for this element; the copies still follow the first",
+                    el,
+                  );
+                }
+                return true;
+              }
+              // Its group would be inserted into the live outer element, so the outer target's
+              // style replay would walk a subtree its cursor no longer matches.
+              if (nestedInTarget(el)) {
+                refuse(el, "cannot blur a target inside another target; blur one of them");
+                return true;
+              }
+              var opts = sweepOptions(el);
+              if (opts === null) return true;
+              if (tl === null) return false;
+              window.attachMotionBlur(el, tl, opts);
+              return true;
+            }
+
+            // Returns the elements still waiting for their composition to register a timeline.
+            // The trap below runs this INSIDE the author's registration statement, so one bad
+            // target must not abort the rest of their composition script.
+            function sweep() {
+              var pending = [];
+              document.querySelectorAll(SWEEP_SELECTOR).forEach(function (el) {
+                try {
+                  if (!claim(el)) pending.push(el);
+                } catch (e) {
+                  window._hfMbSkipped.add(el);
+                  console.warn("[motion-blur] could not blur this element: " + e, el);
+                }
+              });
+              return pending;
+            }
+
+            // Registering a timeline is the moment the author has finished building it, so trapping
+            // the write attaches before the renderer captures a frame. A microtask would be too
+            // early: it runs before the next `<script>` tag.
+            function registrationProxy(container) {
+              var proxy = new Proxy(container, {
+                set: function (target, key, value) {
+                  target[key] = value;
+                  if (typeof key === "string") sweep();
+                  return true;
+                },
+              });
+              window._hfMbProxies.add(proxy);
+              return proxy;
+            }
+
+            function hookRegistration() {
+              var held = window.__timelines;
+              Object.defineProperty(window, "__timelines", {
+                configurable: true,
+                enumerable: true,
+                get: function () {
+                  return held;
                 },
-                0,
+                set: function (value) {
+                  var container = !!value && typeof value === "object";
+                  var fresh = container && !window._hfMbProxies.has(value);
+                  held = fresh ? registrationProxy(value) : value;
+                  if (fresh) sweep();
+                },
+              });
+              // A container assigned before this snippet ran is replayed through the setter, so a
+              // timeline already registered on it is swept too.
+              if (held !== undefined) window.__timelines = held;
+            }
+
+            // The trap above cannot see every registration: the runtime owns the registry object,
+            // wraps it per sub-composition, and mounts nested compositions asynchronously. So the
+            // registry is also POLLED, which needs no cooperation from whoever writes it.
+            function poll(ticks) {
+              var pending = sweep();
+              // The WHOLE budget, every time. Stopping the first tick nothing is pending kills the
+              // poll one tick into an ordinary page, which is before a late composition arrives.
+              if (ticks > 0) {
+                setTimeout(function () {
+                  poll(ticks - 1);
+                }, POLL_MS);
+                return;
+              }
+              if (pending.length === 0) return;
+              var count = pending.length + " element(s) carry " + SWEEP_ATTR;
+              console.warn(
+                "[motion-blur] " + count + ", and no composition registered a timeline for them",
+                pending,
               );
-            };
+            }
+
+            if (!window._hfMbHooked) {
+              window._hfMbHooked = true;
+              hookRegistration();
+              poll(POLL_TICKS);
+            }
+            /* SHUTTER_SNIPPET_END */
           })();
         </script>
         <script>
diff --git a/docs/public/catalog/components/motion-blur.json b/docs/public/catalog/components/motion-blur.json
index 6f28b057886..c0f8f167eac 100644
--- a/docs/public/catalog/components/motion-blur.json
+++ b/docs/public/catalog/components/motion-blur.json
@@ -1 +1 @@
-{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Motion Blur — Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #06060a;\n      }\n\n      #demo {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        font-family: \"SF Mono\", ui-monospace, monospace;\n        background: #06060a;\n      }\n\n      .header {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        height: 80px;\n        display: flex;\n        align-items: flex-end;\n        padding: 0 72px 20px;\n        border-bottom: 1px solid #0f0f18;\n      }\n      .header-title {\n        font-size: 11px;\n        letter-spacing: 0.4em;\n        text-transform: uppercase;\n        color: #1e1e2a;\n      }\n      .header-sub {\n        margin-left: auto;\n        font-size: 11px;\n        letter-spacing: 0.25em;\n        text-transform: uppercase;\n        color: #14141c;\n      }\n\n      .group {\n        position: absolute;\n        left: 0;\n        right: 0;\n        height: 184px;\n      }\n\n      .group::after {\n        content: \"\";\n        position: absolute;\n        bottom: 0;\n        left: 72px;\n        right: 72px;\n        height: 1px;\n        background: #0d0d15;\n      }\n\n      .dur {\n        position: absolute;\n        left: 72px;\n        top: 0;\n        width: 90px;\n        height: 160px;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n      }\n      .dur-num {\n        font-size: 28px;\n        font-weight: 700;\n        letter-spacing: -0.04em;\n        color: #fff;\n        line-height: 1;\n      }\n      .dur-unit {\n        font-size: 9px;\n        letter-spacing: 0.25em;\n        text-transform: uppercase;\n        color: #252532;\n        margin-top: 5px;\n      }\n\n      .row-hint {\n        position: absolute;\n        left: 176px;\n        width: 44px;\n        height: 72px;\n        display: flex;\n        align-items: center;\n        font-size: 8px;\n        letter-spacing: 0.2em;\n        text-transform: uppercase;\n        color: #161620;\n      }\n\n      .spd {\n        position: absolute;\n        right: 72px;\n        top: 0;\n        width: 100px;\n        height: 160px;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: flex-end;\n      }\n      .spd-label {\n        font-size: 10px;\n        letter-spacing: 0.3em;\n        text-transform: uppercase;\n        color: #181822;\n      }\n\n      .pill {\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 200px;\n        height: 72px;\n        border-radius: 36px;\n        /* Flat L1 ink: every row is the same object, so only the blur differs. */\n        background: rgba(244, 244, 245, 0.72);\n        will-change: transform, filter;\n      }\n\n      .word {\n        position: absolute;\n        left: 0;\n        top: 88px;\n        height: 72px;\n        line-height: 72px;\n        white-space: nowrap;\n        font-size: 56px;\n        font-weight: 800;\n        letter-spacing: -0.03em;\n        color: #f4f4f5;\n        will-change: transform, filter;\n      }\n\n      .inner-div {\n        position: absolute;\n        left: 220px;\n        right: 200px;\n        top: 80px;\n        height: 1px;\n        background: #0a0a12;\n      }\n\n      .track-a,\n      .track-b {\n        position: absolute;\n        left: 220px;\n        right: 200px;\n        height: 1px;\n        background: #0c0c14;\n      }\n      .track-a {\n        top: 35px;\n      }\n      .track-b {\n        top: 123px;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"motion-blur-demo\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"4\"\n    >\n      <div class=\"header\">\n        <span class=\"header-title\">Motion Blur — Velocity Showcase</span>\n        <span class=\"header-sub\"\n          >17 duplicates at 1/16 · 720° shutter · smear = speed × shutter time</span\n        >\n      </div>\n\n      <div class=\"group\" style=\"top: 80px\">\n        <div class=\"dur\"><span class=\"dur-num\">3.0</span><span class=\"dur-unit\">seconds</span></div>\n        <div class=\"row-hint\" style=\"top: 0\">shape</div>\n        <div class=\"row-hint\" style=\"top: 88px\">text</div>\n        <div class=\"track-a\"></div>\n        <div class=\"inner-div\"></div>\n        <div class=\"track-b\"></div>\n        <div class=\"pill\" id=\"s1\"></div>\n        <div class=\"word\" id=\"t1\">DRIFT</div>\n        <div class=\"spd\"><span class=\"spd-label\">slow</span></div>\n      </div>\n\n      <div class=\"group\" style=\"top: 264px\">\n        <div class=\"dur\"><span class=\"dur-num\">1.5</span><span class=\"dur-unit\">seconds</span></div>\n        <div class=\"row-hint\" style=\"top: 0\">shape</div>\n        <div class=\"row-hint\" style=\"top: 88px\">text</div>\n        <div class=\"track-a\"></div>\n        <div class=\"inner-div\"></div>\n        <div class=\"track-b\"></div>\n        <div class=\"pill\" id=\"s2\"></div>\n        <div class=\"word\" id=\"t2\">GLIDE</div>\n        <div class=\"spd\"><span class=\"spd-label\">medium</span></div>\n      </div>\n\n      <div class=\"group\" style=\"top: 448px\">\n        <div class=\"dur\"><span class=\"dur-num\">0.7</span><span class=\"dur-unit\">seconds</span></div>\n        <div class=\"row-hint\" style=\"top: 0\">shape</div>\n        <div class=\"row-hint\" style=\"top: 88px\">text</div>\n        <div class=\"track-a\"></div>\n        <div class=\"inner-div\"></div>\n        <div class=\"track-b\"></div>\n        <div class=\"pill\" id=\"s3\"></div>\n        <div class=\"word\" id=\"t3\">RUSH</div>\n        <div class=\"spd\"><span class=\"spd-label\">fast</span></div>\n      </div>\n\n      <div class=\"group\" style=\"top: 632px\">\n        <div class=\"dur\">\n          <span class=\"dur-num\">0.35</span><span class=\"dur-unit\">seconds</span>\n        </div>\n        <div class=\"row-hint\" style=\"top: 0\">shape</div>\n        <div class=\"row-hint\" style=\"top: 88px\">text</div>\n        <div class=\"track-a\"></div>\n        <div class=\"inner-div\"></div>\n        <div class=\"track-b\"></div>\n        <div class=\"pill\" id=\"s4\"></div>\n        <div class=\"word\" id=\"t4\">BLAST</div>\n        <div class=\"spd\"><span class=\"spd-label\">faster</span></div>\n      </div>\n\n      <div class=\"group\" style=\"top: 816px\">\n        <div class=\"dur\"><span class=\"dur-num\">0.2</span><span class=\"dur-unit\">seconds</span></div>\n        <div class=\"row-hint\" style=\"top: 0\">shape</div>\n        <div class=\"row-hint\" style=\"top: 88px\">text</div>\n        <div class=\"track-a\"></div>\n        <div class=\"inner-div\"></div>\n        <div class=\"track-b\"></div>\n        <div class=\"pill\" id=\"s5\"></div>\n        <div class=\"word\" id=\"t5\">WARP</div>\n        <div class=\"spd\"><span class=\"spd-label\">extreme</span></div>\n      </div>\n\n      <script>\n        (function () {\n          if (!window._hfMbUid) window._hfMbUid = 0;\n          if (!window._hfMbAttached) window._hfMbAttached = new WeakSet();\n\n          // Shutter length is measured in frames, so the snippet must know the\n          // composition frame rate: explicit option, else the root's data-fps, else 30.\n          function resolveFps(optionFps) {\n            var explicit = Number(optionFps);\n            if (explicit > 0) return explicit;\n\n            var root = document.querySelector(\"[data-composition-id][data-fps]\");\n            var rootFps = root ? Number(root.getAttribute(\"data-fps\")) : 0;\n            if (rootFps > 0) return rootFps;\n\n            return 30;\n          }\n\n          function numOption(value, fallback) {\n            return value !== undefined ? Number(value) : fallback;\n          }\n\n          // A resolved `transform` is either \"none\", a 2D matrix(a,b,c,d,e,f) or a 3D\n          // matrix3d of 16. Splitting the numbers into the linear part and the\n          // translation is what lets the deadband below use a pixel tolerance on the\n          // one and an angle/ratio tolerance on the other.\n          function parseTransform(value) {\n            if (!value || value === \"none\") return { linear: [1, 0, 0, 1], translate: [0, 0, 0] };\n            var nums = value\n              .slice(value.indexOf(\"(\") + 1, -1)\n              .split(\",\")\n              .map(parseFloat);\n            if (nums.length === 16) {\n              return {\n                linear: [\n                  nums[0],\n                  nums[1],\n                  nums[2],\n                  nums[4],\n                  nums[5],\n                  nums[6],\n                  nums[8],\n                  nums[9],\n                  nums[10],\n                  nums[3],\n                  nums[7],\n                  nums[11],\n                  nums[15],\n                ],\n                translate: [nums[12], nums[13], nums[14]],\n              };\n            }\n            return {\n              linear: [nums[0], nums[1], nums[2], nums[3]],\n              translate: [nums[4], nums[5], 0],\n            };\n          }\n\n          // Deadband: half a pixel of travel, a thousandth of a unit of linear change,\n          // about 0.06 degrees or 0.1% of scale. Below it the average is the source.\n          // The 2D and 3D forms have different arities, so a change of form counts as\n          // movement rather than being compared component by component.\n          function differs(a, b) {\n            if (a.linear.length !== b.linear.length) return true;\n            for (var i = 0; i < a.linear.length; i++) {\n              if (Math.abs(a.linear[i] - b.linear[i]) > 0.001) return true;\n            }\n            for (var j = 0; j < 3; j++) {\n              if (Math.abs(a.translate[j] - b.translate[j]) > 0.5) return true;\n            }\n            return false;\n          }\n\n          window.attachMotionBlur = function (selector, tl, opts) {\n            opts = opts || {};\n            var shutterAngle = numOption(opts.shutterAngle, 720);\n            var shutterPhase = numOption(opts.shutterPhase, -360);\n            var requestedSamples = numOption(opts.samplesPerFrame, 16);\n            var samples = Number.isFinite(requestedSamples)\n              ? Math.max(2, Math.min(64, Math.round(requestedSamples)))\n              : 16;\n            var fps = resolveFps(opts.fps);\n\n            var items = Array.isArray(selector) ? selector : [selector];\n            var targets = items.reduce(function (acc, s) {\n              if (typeof s === \"string\") {\n                document.querySelectorAll(s).forEach(function (el) {\n                  acc.push(el);\n                });\n              } else if (s instanceof Element) {\n                acc.push(s);\n              }\n              return acc;\n            }, []);\n\n            // `samples` counts sub-intervals of the shutter window, so there is one copy at\n            // every interval boundary — both ends of the window included — and each carries\n            // 1/samples of the source. That is what the reference export shows: the outermost\n            // copy sits exactly one frame away from the frame time, not half a step short.\n            var copies = samples + 1;\n            var alpha = String(1 / samples);\n\n            // A copy is styled by nothing that selected the original: dropping the id also\n            // drops every `#id` rule that gave it size, colour and font. So each copy carries\n            // its own resolved style inline. Chrome returns \"\" for a computed style's cssText,\n            // so the declarations are enumerated rather than taken wholesale.\n            function resolvedStyles(source, out) {\n              var cs = getComputedStyle(source);\n              var text = \"\";\n              for (var i = 0; i < cs.length; i++) {\n                text += cs[i] + \":\" + cs.getPropertyValue(cs[i]) + \";\";\n              }\n              // A copy is a still of one instant. Left live, an inherited transition or\n              // keyframe animation would carry it somewhere the timeline never sampled.\n              out.push(text + \"transition:none;animation:none;\");\n              for (var c = 0; c < source.children.length; c++) {\n                resolvedStyles(source.children[c], out);\n              }\n              return out;\n            }\n\n            function paintResolvedStyles(copy, styles, cursor) {\n              copy.style.cssText = styles[cursor.i++];\n              for (var c = 0; c < copy.children.length; c++) {\n                paintResolvedStyles(copy.children[c], styles, cursor);\n              }\n            }\n\n            // Perspective applies to a parent's children only, and a copy is a grandchild.\n            // Sharing the parent's 3D context would need preserve-3d on the group, which\n            // mix-blend-mode flattens, so each copy carries the perspective itself. See the\n            // header for what that does to the vanishing point.\n            function parentPerspective(el) {\n              var value = el.parentNode ? getComputedStyle(el.parentNode).perspective : \"none\";\n              return value && value !== \"none\" ? \"perspective(\" + value + \") \" : \"\";\n            }\n\n            var state = targets\n              .filter(function (el) {\n                // One group per element. A second call on the same element would stack a\n                // second set of copies over the first and double the ink, so the first\n                // call owns it.\n                if (window._hfMbAttached.has(el)) return false;\n                window._hfMbAttached.add(el);\n                return true;\n              })\n              .map(function (el) {\n                var group = document.createElement(\"div\");\n                group.setAttribute(\"data-hf-motion-blur\", \"hf-mb-\" + window._hfMbUid++);\n                group.style.cssText =\n                  \"position:absolute;left:0;top:0;width:0;height:0;isolation:isolate;pointer-events:none;display:none;\";\n\n                var clones = [];\n                for (var k = 0; k < copies; k++) {\n                  var clone = el.cloneNode(true);\n                  clone.removeAttribute(\"id\");\n                  clones.push(clone);\n                  group.appendChild(clone);\n                }\n                el.parentNode.insertBefore(group, el);\n\n                var s = { el: el, group: group, clones: clones, samples: [], perspective: \"\" };\n\n                // Resolved styles and the parent's perspective are px once read, so a\n                // container-relative element needs them again when its box changes. Per frame\n                // that would walk the whole subtree once per copy; on resize it costs nothing\n                // on a fixed-size render and keeps a live preview honest.\n                function snapshot() {\n                  var styles = resolvedStyles(el, []);\n                  s.perspective = parentPerspective(el);\n                  for (var c = 0; c < clones.length; c++) {\n                    paintResolvedStyles(clones[c], styles, { i: 0 });\n                    clones[c].style.position = \"absolute\";\n                    clones[c].style.margin = \"0\";\n                    clones[c].style.opacity = alpha;\n                    clones[c].style.mixBlendMode = \"plus-lighter\";\n                  }\n                }\n\n                snapshot();\n                if (typeof ResizeObserver === \"function\") new ResizeObserver(snapshot).observe(el);\n                return s;\n              });\n\n            function readTransform(el) {\n              var cs = getComputedStyle(el);\n              return {\n                css: cs.transform,\n                origin: cs.transformOrigin,\n                opacity: cs.opacity,\n                parsed: parseTransform(cs.transform),\n              };\n            }\n\n            var scheduled = false;\n\n            function applyShutter() {\n              var shutterTime = shutterAngle / 360 / fps;\n              if (!(shutterTime > 0)) {\n                state.forEach(function (s) {\n                  s.group.style.display = \"none\";\n                });\n                return;\n              }\n\n              var t0 = tl.time();\n              var duration = tl.duration();\n              var windowStart = t0 + shutterPhase / 360 / fps;\n\n              // Sample the real trajectory: seek to each sub-frame time with events\n              // suppressed (so no tween callbacks, including this tracker's, fire),\n              // read the resolved transform, then restore the frame time.\n              try {\n                for (var k = 0; k < copies; k++) {\n                  var tk = windowStart + (k / samples) * shutterTime;\n                  tl.time(Math.min(duration, Math.max(0, tk)), true);\n                  state.forEach(function (s) {\n                    s.samples[k] = readTransform(s.el);\n                  });\n                }\n              } finally {\n                tl.time(t0, true);\n              }\n\n              state.forEach(function (s) {\n                var current = readTransform(s.el);\n                var moved = false;\n                for (var i = 0; i < copies; i++) {\n                  if (differs(s.samples[i].parsed, current.parsed)) {\n                    moved = true;\n                    break;\n                  }\n                }\n                if (!moved) {\n                  s.group.style.display = \"none\";\n                  return;\n                }\n\n                // The copies are absolutely positioned inside the group, and the group sits at\n                // the origin of the element's own containing block, so the element's offset box\n                // places them. Re-read every frame: a beat is free to move the box itself.\n                var left = s.el.offsetLeft + \"px\";\n                var top = s.el.offsetTop + \"px\";\n                var width = s.el.offsetWidth + \"px\";\n                var height = s.el.offsetHeight + \"px\";\n                for (var j = 0; j < copies; j++) {\n                  var clone = s.clones[j];\n                  clone.style.left = left;\n                  clone.style.top = top;\n                  clone.style.width = width;\n                  clone.style.height = height;\n                  clone.style.transformOrigin = s.samples[j].origin;\n                  clone.style.transform =\n                    s.perspective + (s.samples[j].css === \"none\" ? \"\" : s.samples[j].css);\n                }\n                // The copies are the element's own ink, so they have to carry its opacity too:\n                // a beat that moves and fades at once would otherwise leave a full-strength\n                // smear behind a vanishing element. It rides the group, not the copies, whose\n                // own opacity is the 1/N shutter weight.\n                s.group.style.opacity = current.opacity;\n                s.group.style.display = \"\";\n              });\n            }\n\n            // tl.eventCallback(\"onUpdate\") is unavailable under the HyperFrames runtime proxy, so a\n            // tracker tween's onUpdate fires on every seek. Sampling is deferred to a microtask:\n            // seeking GSAP from inside its own render reads stale tween state, while the microtask\n            // runs after the seek returns and before the frame is captured or painted.\n            var _proxy = { t: 0 };\n            tl.to(\n              _proxy,\n              {\n                t: 1,\n                duration: Math.max(tl.duration(), 0.1),\n                ease: \"none\",\n                onUpdate: function () {\n                  if (scheduled) return;\n                  scheduled = true;\n                  Promise.resolve().then(function () {\n                    scheduled = false;\n                    applyShutter();\n                  });\n                },\n              },\n              0,\n            );\n          };\n\n          var tl = gsap.timeline({ paused: true });\n\n          gsap.set([\"#s1\", \"#s2\", \"#s3\", \"#s4\", \"#s5\", \"#t1\", \"#t2\", \"#t3\", \"#t4\", \"#t5\"], {\n            x: -400,\n          });\n\n          tl.to([\"#s1\", \"#t1\"], { x: 1640, duration: 3.0, ease: \"power3.inOut\" }, 0);\n          tl.to([\"#s2\", \"#t2\"], { x: 1640, duration: 1.5, ease: \"power3.inOut\" }, 0);\n          tl.to([\"#s3\", \"#t3\"], { x: 1640, duration: 0.7, ease: \"power3.inOut\" }, 0);\n          tl.to([\"#s4\", \"#t4\"], { x: 1640, duration: 0.35, ease: \"power3.inOut\" }, 0);\n          tl.to([\"#s5\", \"#t5\"], { x: 1640, duration: 0.2, ease: \"power3.inOut\" }, 0);\n\n          tl.set(document.body, {}, 4);\n\n          attachMotionBlur(\n            [\"#s1\", \"#s2\", \"#s3\", \"#s4\", \"#s5\", \"#t1\", \"#t2\", \"#t3\", \"#t4\", \"#t5\"],\n            tl,\n          );\n\n          window.__timelines = window.__timelines || {};\n          window.__timelines[\"motion-blur-demo\"] = tl;\n        })();\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Motion Blur — Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #06060a;\n      }\n\n      #demo {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        font-family: \"SF Mono\", ui-monospace, monospace;\n        background: #06060a;\n      }\n\n      .header {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        height: 80px;\n        display: flex;\n        align-items: flex-end;\n        padding: 0 72px 20px;\n        border-bottom: 1px solid #0f0f18;\n      }\n      .header-title {\n        font-size: 11px;\n        letter-spacing: 0.4em;\n        text-transform: uppercase;\n        color: #1e1e2a;\n      }\n      .header-sub {\n        margin-left: auto;\n        font-size: 11px;\n        letter-spacing: 0.25em;\n        text-transform: uppercase;\n        color: #14141c;\n      }\n\n      .group {\n        position: absolute;\n        left: 0;\n        right: 0;\n        height: 184px;\n      }\n\n      .group::after {\n        content: \"\";\n        position: absolute;\n        bottom: 0;\n        left: 72px;\n        right: 72px;\n        height: 1px;\n        background: #0d0d15;\n      }\n\n      .dur {\n        position: absolute;\n        left: 72px;\n        top: 0;\n        width: 90px;\n        height: 160px;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n      }\n      .dur-num {\n        font-size: 28px;\n        font-weight: 700;\n        letter-spacing: -0.04em;\n        color: #fff;\n        line-height: 1;\n      }\n      .dur-unit {\n        font-size: 9px;\n        letter-spacing: 0.25em;\n        text-transform: uppercase;\n        color: #252532;\n        margin-top: 5px;\n      }\n\n      .row-hint {\n        position: absolute;\n        left: 176px;\n        width: 44px;\n        height: 72px;\n        display: flex;\n        align-items: center;\n        font-size: 8px;\n        letter-spacing: 0.2em;\n        text-transform: uppercase;\n        color: #161620;\n      }\n\n      .spd {\n        position: absolute;\n        right: 72px;\n        top: 0;\n        width: 100px;\n        height: 160px;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: flex-end;\n      }\n      .spd-label {\n        font-size: 10px;\n        letter-spacing: 0.3em;\n        text-transform: uppercase;\n        color: #181822;\n      }\n\n      .pill {\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 200px;\n        height: 72px;\n        border-radius: 36px;\n        /* Flat L1 ink: every row is the same object, so only the blur differs. */\n        background: rgba(244, 244, 245, 0.72);\n        will-change: transform, filter;\n      }\n\n      .word {\n        position: absolute;\n        left: 0;\n        top: 88px;\n        height: 72px;\n        line-height: 72px;\n        white-space: nowrap;\n        font-size: 56px;\n        font-weight: 800;\n        letter-spacing: -0.03em;\n        color: #f4f4f5;\n        will-change: transform, filter;\n      }\n\n      .inner-div {\n        position: absolute;\n        left: 220px;\n        right: 200px;\n        top: 80px;\n        height: 1px;\n        background: #0a0a12;\n      }\n\n      .track-a,\n      .track-b {\n        position: absolute;\n        left: 220px;\n        right: 200px;\n        height: 1px;\n        background: #0c0c14;\n      }\n      .track-a {\n        top: 35px;\n      }\n      .track-b {\n        top: 123px;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"motion-blur-demo\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"4\"\n    >\n      <div class=\"header\">\n        <span class=\"header-title\">Motion Blur — Velocity Showcase</span>\n        <span class=\"header-sub\"\n          >17 duplicates at 1/16 · 720° shutter · smear = speed × shutter time</span\n        >\n      </div>\n\n      <div class=\"group\" style=\"top: 80px\">\n        <div class=\"dur\"><span class=\"dur-num\">3.0</span><span class=\"dur-unit\">seconds</span></div>\n        <div class=\"row-hint\" style=\"top: 0\">shape</div>\n        <div class=\"row-hint\" style=\"top: 88px\">text</div>\n        <div class=\"track-a\"></div>\n        <div class=\"inner-div\"></div>\n        <div class=\"track-b\"></div>\n        <div class=\"pill\" id=\"s1\" data-hf-motion-blur></div>\n        <div class=\"word\" id=\"t1\" data-hf-motion-blur>DRIFT</div>\n        <div class=\"spd\"><span class=\"spd-label\">slow</span></div>\n      </div>\n\n      <div class=\"group\" style=\"top: 264px\">\n        <div class=\"dur\"><span class=\"dur-num\">1.5</span><span class=\"dur-unit\">seconds</span></div>\n        <div class=\"row-hint\" style=\"top: 0\">shape</div>\n        <div class=\"row-hint\" style=\"top: 88px\">text</div>\n        <div class=\"track-a\"></div>\n        <div class=\"inner-div\"></div>\n        <div class=\"track-b\"></div>\n        <div class=\"pill\" id=\"s2\" data-hf-motion-blur></div>\n        <div class=\"word\" id=\"t2\" data-hf-motion-blur>GLIDE</div>\n        <div class=\"spd\"><span class=\"spd-label\">medium</span></div>\n      </div>\n\n      <div class=\"group\" style=\"top: 448px\">\n        <div class=\"dur\"><span class=\"dur-num\">0.7</span><span class=\"dur-unit\">seconds</span></div>\n        <div class=\"row-hint\" style=\"top: 0\">shape</div>\n        <div class=\"row-hint\" style=\"top: 88px\">text</div>\n        <div class=\"track-a\"></div>\n        <div class=\"inner-div\"></div>\n        <div class=\"track-b\"></div>\n        <div class=\"pill\" id=\"s3\" data-hf-motion-blur></div>\n        <div class=\"word\" id=\"t3\" data-hf-motion-blur>RUSH</div>\n        <div class=\"spd\"><span class=\"spd-label\">fast</span></div>\n      </div>\n\n      <div class=\"group\" style=\"top: 632px\">\n        <div class=\"dur\">\n          <span class=\"dur-num\">0.35</span><span class=\"dur-unit\">seconds</span>\n        </div>\n        <div class=\"row-hint\" style=\"top: 0\">shape</div>\n        <div class=\"row-hint\" style=\"top: 88px\">text</div>\n        <div class=\"track-a\"></div>\n        <div class=\"inner-div\"></div>\n        <div class=\"track-b\"></div>\n        <div class=\"pill\" id=\"s4\" data-hf-motion-blur></div>\n        <div class=\"word\" id=\"t4\" data-hf-motion-blur>BLAST</div>\n        <div class=\"spd\"><span class=\"spd-label\">faster</span></div>\n      </div>\n\n      <div class=\"group\" style=\"top: 816px\">\n        <div class=\"dur\"><span class=\"dur-num\">0.2</span><span class=\"dur-unit\">seconds</span></div>\n        <div class=\"row-hint\" style=\"top: 0\">shape</div>\n        <div class=\"row-hint\" style=\"top: 88px\">text</div>\n        <div class=\"track-a\"></div>\n        <div class=\"inner-div\"></div>\n        <div class=\"track-b\"></div>\n        <div class=\"pill\" id=\"s5\" data-hf-motion-blur></div>\n        <div class=\"word\" id=\"t5\" data-hf-motion-blur>WARP</div>\n        <div class=\"spd\"><span class=\"spd-label\">extreme</span></div>\n      </div>\n\n      <script>\n        (function () {\n          /* SHUTTER_SNIPPET_START */\n          if (!window._hfMbUid) window._hfMbUid = 0;\n          if (!window._hfMbAttached) window._hfMbAttached = new WeakSet();\n          if (!window._hfMbSkipped) window._hfMbSkipped = new WeakSet();\n          if (!window._hfMbProxies) window._hfMbProxies = new WeakSet();\n          if (!window._hfMbTimeline) window._hfMbTimeline = new WeakMap();\n          if (!window._hfMbWarned) window._hfMbWarned = new WeakSet();\n\n          // The declarative form. A copy of a target must not carry it, or the copy is swept\n          // as a target of its own; the group's own marker is `data-hf-motion-blur-group`.\n          var SWEEP_ATTR = \"data-hf-motion-blur\";\n          // About eight seconds. Long enough for an asynchronously mounted sub-composition, short\n          // enough that a page with a genuine mistake in it reports before anyone stops watching.\n          var POLL_MS = 32;\n          var POLL_TICKS = 250;\n          var SWEEP_SELECTOR = \"[\" + SWEEP_ATTR + \"]\";\n          var OPTION_KEYS = [\"shutterAngle\", \"shutterPhase\", \"samplesPerFrame\", \"fps\"];\n\n          // A copy is a deep clone, so the attribute rides along on the root AND on every marked\n          // descendant. Any one left behind is swept as a target of its own, which clones again.\n          var COPY_STRIP = [SWEEP_ATTR, \"data-composition-id\", \"data-fps\"];\n\n          function stripAttrs(el) {\n            for (var a = 0; a < COPY_STRIP.length; a++) el.removeAttribute(COPY_STRIP[a]);\n          }\n\n          function stripCopyAttrs(root) {\n            stripAttrs(root);\n            var inner = root.querySelectorAll(\"[\" + COPY_STRIP.join(\"],[\") + \"]\");\n            for (var i = 0; i < inner.length; i++) stripAttrs(inner[i]);\n          }\n\n          // Shutter length is measured in frames, so the snippet must know the composition\n          // frame rate: explicit option, else the target's OWN root, else the first root in\n          // the document, else 30. The target's root is what makes two compositions on one\n          // page read their own data-fps instead of sharing the first one written.\n          function resolveFps(optionFps, target) {\n            var explicit = Number(optionFps);\n            if (explicit > 0) return explicit;\n\n            var scoped = target ? target.closest(\"[data-composition-id][data-fps]\") : null;\n            var root = scoped || document.querySelector(\"[data-composition-id][data-fps]\");\n            var rootFps = root ? Number(root.getAttribute(\"data-fps\")) : 0;\n            if (rootFps > 0) return rootFps;\n\n            return 30;\n          }\n\n          function numOption(value, fallback) {\n            return value !== undefined ? Number(value) : fallback;\n          }\n\n          // A resolved `transform` is either \"none\", a 2D matrix(a,b,c,d,e,f) or a 3D\n          // matrix3d of 16. Splitting the numbers into the linear part and the\n          // translation is what lets the deadband below use a pixel tolerance on the\n          // one and an angle/ratio tolerance on the other.\n          function parseTransform(value) {\n            if (!value || value === \"none\") return { linear: [1, 0, 0, 1], translate: [0, 0, 0] };\n            var nums = value\n              .slice(value.indexOf(\"(\") + 1, -1)\n              .split(\",\")\n              .map(parseFloat);\n            if (nums.length === 16) {\n              return {\n                linear: [\n                  nums[0],\n                  nums[1],\n                  nums[2],\n                  nums[4],\n                  nums[5],\n                  nums[6],\n                  nums[8],\n                  nums[9],\n                  nums[10],\n                  nums[3],\n                  nums[7],\n                  nums[11],\n                  nums[15],\n                ],\n                translate: [nums[12], nums[13], nums[14]],\n              };\n            }\n            return {\n              linear: [nums[0], nums[1], nums[2], nums[3]],\n              translate: [nums[4], nums[5], 0],\n            };\n          }\n\n          // Deadband: half a pixel of travel, a thousandth of a unit of linear change,\n          // about 0.06 degrees or 0.1% of scale. Below it the average is the source.\n          // The 2D and 3D forms have different arities, so a change of form counts as\n          // movement rather than being compared component by component.\n          function differs(a, b) {\n            if (a.linear.length !== b.linear.length) return true;\n            for (var i = 0; i < a.linear.length; i++) {\n              if (Math.abs(a.linear[i] - b.linear[i]) > 0.001) return true;\n            }\n            for (var j = 0; j < 3; j++) {\n              if (Math.abs(a.translate[j] - b.translate[j]) > 0.5) return true;\n            }\n            return false;\n          }\n\n          window.attachMotionBlur = function (selector, tl, opts) {\n            opts = opts || {};\n            var shutterAngle = numOption(opts.shutterAngle, 720);\n            var shutterPhase = numOption(opts.shutterPhase, -360);\n            var requestedSamples = numOption(opts.samplesPerFrame, 16);\n            var samples = Number.isFinite(requestedSamples)\n              ? Math.max(2, Math.min(64, Math.round(requestedSamples)))\n              : 16;\n            var items = Array.isArray(selector) ? selector : [selector];\n            var targets = items.reduce(function (acc, s) {\n              if (typeof s === \"string\") {\n                document.querySelectorAll(s).forEach(function (el) {\n                  acc.push(el);\n                });\n              } else if (s instanceof Element) {\n                acc.push(s);\n              }\n              return acc;\n            }, []);\n\n            // `samples` counts sub-intervals of the shutter window, so there is one copy at\n            // every interval boundary — both ends of the window included — and each carries\n            // 1/samples of the source. That is what the reference export shows: the outermost\n            // copy sits exactly one frame away from the frame time, not half a step short.\n            var copies = samples + 1;\n            var alpha = String(1 / samples);\n\n            // A copy is styled by nothing that selected the original: dropping the id also\n            // drops every `#id` rule that gave it size, colour and font. So each copy carries\n            // its own resolved style inline. Chrome returns \"\" for a computed style's cssText,\n            // so the declarations are enumerated rather than taken wholesale.\n            function resolvedStyles(source, out) {\n              var cs = getComputedStyle(source);\n              var text = \"\";\n              for (var i = 0; i < cs.length; i++) {\n                text += cs[i] + \":\" + cs.getPropertyValue(cs[i]) + \";\";\n              }\n              // A copy is a still of one instant. Left live, an inherited transition or\n              // keyframe animation would carry it somewhere the timeline never sampled.\n              out.push(text + \"transition:none;animation:none;\");\n              for (var c = 0; c < source.children.length; c++) {\n                resolvedStyles(source.children[c], out);\n              }\n              return out;\n            }\n\n            function paintResolvedStyles(copy, styles, cursor) {\n              copy.style.cssText = styles[cursor.i++];\n              for (var c = 0; c < copy.children.length; c++) {\n                paintResolvedStyles(copy.children[c], styles, cursor);\n              }\n            }\n\n            // Perspective applies to a parent's children only, and a copy is a grandchild.\n            // Sharing the parent's 3D context would need preserve-3d on the group, which\n            // mix-blend-mode flattens, so each copy carries the perspective itself. See the\n            // header for what that does to the vanishing point.\n            function parentPerspective(el) {\n              var value = el.parentNode ? getComputedStyle(el.parentNode).perspective : \"none\";\n              return value && value !== \"none\" ? \"perspective(\" + value + \") \" : \"\";\n            }\n\n            function attachOne(el) {\n              var group = document.createElement(\"div\");\n              group.setAttribute(\"data-hf-motion-blur-group\", \"hf-mb-\" + window._hfMbUid++);\n              group.style.cssText =\n                \"position:absolute;left:0;top:0;width:0;height:0;isolation:isolate;pointer-events:none;display:none;\";\n\n              var clones = [];\n              for (var k = 0; k < copies; k++) {\n                var clone = el.cloneNode(true);\n                clone.removeAttribute(\"id\");\n                stripCopyAttrs(clone);\n                clones.push(clone);\n                group.appendChild(clone);\n              }\n              var s = {\n                el: el,\n                group: group,\n                clones: clones,\n                samples: [],\n                perspective: \"\",\n                watch: null,\n              };\n\n              // Resolved styles and the parent's perspective are px once read, so a\n              // container-relative element needs them again when its box changes. Per frame\n              // that would walk the whole subtree once per copy; on resize it costs nothing\n              // on a fixed-size render and keeps a live preview honest.\n              function snapshot() {\n                var styles = resolvedStyles(el, []);\n                s.perspective = parentPerspective(el);\n                for (var c = 0; c < clones.length; c++) {\n                  paintResolvedStyles(clones[c], styles, { i: 0 });\n                  clones[c].style.position = \"absolute\";\n                  clones[c].style.margin = \"0\";\n                  clones[c].style.opacity = alpha;\n                  clones[c].style.mixBlendMode = \"plus-lighter\";\n                }\n              }\n\n              // Snapshot BEFORE the group enters the page, so a throw in the style walk leaves\n              // nothing behind: the record the rollback needs does not exist until it returns.\n              snapshot();\n              el.parentNode.insertBefore(group, el);\n              if (typeof ResizeObserver === \"function\") {\n                s.watch = new ResizeObserver(snapshot);\n                s.watch.observe(el);\n              }\n              return s;\n            }\n\n            var state = [];\n            // Every element this call marked. A throw inside `attachOne` never returns its\n            // record, so `state` alone cannot give the marks back.\n            var claimed = [];\n            try {\n              for (var q = 0; q < targets.length; q++) {\n                var candidate = targets[q];\n                // One group per element, whether a second call names it or one call names it\n                // twice: a second set of copies over the first would double the ink. Marked\n                // BEFORE the copies go in: inserting them runs custom-element reactions\n                // synchronously, and one that registers a timeline re-enters the write trap.\n                if (window._hfMbAttached.has(candidate)) continue;\n                window._hfMbAttached.add(candidate);\n                window._hfMbTimeline.set(candidate, tl);\n                claimed.push(candidate);\n                state.push(attachOne(candidate));\n              }\n            } catch (e) {\n              unmark(claimed);\n              discard(state);\n              throw e;\n            }\n            // Nothing to blur means nothing to seek: a tracker here would run the whole sample\n            // loop every frame over an empty set.\n            if (state.length === 0) return;\n\n            // One seek loop drives the whole call, so the window is ONE length, and it belongs\n            // to the composition of an element this call actually attached.\n            var fps = resolveFps(opts.fps, state[0].el);\n            for (var d = 1; d < state.length; d++) {\n              if (resolveFps(opts.fps, state[d].el) === fps) continue;\n              var line = \"one call cannot blur compositions at different frame rates; using \";\n              console.warn(\"[motion-blur] \" + line + fps, state[d].el);\n              break;\n            }\n\n            function readTransform(el) {\n              var cs = getComputedStyle(el);\n              return {\n                css: cs.transform,\n                origin: cs.transformOrigin,\n                opacity: cs.opacity,\n                parsed: parseTransform(cs.transform),\n              };\n            }\n\n            var scheduled = false;\n\n            function applyShutter() {\n              var shutterTime = shutterAngle / 360 / fps;\n              if (!(shutterTime > 0)) {\n                state.forEach(function (s) {\n                  s.group.style.display = \"none\";\n                });\n                return;\n              }\n\n              var t0 = tl.time();\n              var duration = tl.duration();\n              var windowStart = t0 + shutterPhase / 360 / fps;\n\n              // Sample the real trajectory: seek to each sub-frame time with events\n              // suppressed (so no tween callbacks, including this tracker's, fire),\n              // read the resolved transform, then restore the frame time.\n              try {\n                for (var k = 0; k < copies; k++) {\n                  var tk = windowStart + (k / samples) * shutterTime;\n                  tl.time(Math.min(duration, Math.max(0, tk)), true);\n                  state.forEach(function (s) {\n                    s.samples[k] = readTransform(s.el);\n                  });\n                }\n              } finally {\n                tl.time(t0, true);\n              }\n\n              state.forEach(function (s) {\n                var current = readTransform(s.el);\n                var moved = false;\n                for (var i = 0; i < copies; i++) {\n                  if (differs(s.samples[i].parsed, current.parsed)) {\n                    moved = true;\n                    break;\n                  }\n                }\n                if (!moved) {\n                  s.group.style.display = \"none\";\n                  return;\n                }\n\n                // The copies are absolutely positioned inside the group, and the group sits at\n                // the origin of the element's own containing block, so the element's offset box\n                // places them. Re-read every frame: a beat is free to move the box itself.\n                var left = s.el.offsetLeft + \"px\";\n                var top = s.el.offsetTop + \"px\";\n                var width = s.el.offsetWidth + \"px\";\n                var height = s.el.offsetHeight + \"px\";\n                for (var j = 0; j < copies; j++) {\n                  var clone = s.clones[j];\n                  clone.style.left = left;\n                  clone.style.top = top;\n                  clone.style.width = width;\n                  clone.style.height = height;\n                  clone.style.transformOrigin = s.samples[j].origin;\n                  clone.style.transform =\n                    s.perspective + (s.samples[j].css === \"none\" ? \"\" : s.samples[j].css);\n                }\n                // The copies are the element's own ink, so they have to carry its opacity too:\n                // a beat that moves and fades at once would otherwise leave a full-strength\n                // smear behind a vanishing element. It rides the group, not the copies, whose\n                // own opacity is the 1/N shutter weight.\n                s.group.style.opacity = current.opacity;\n                s.group.style.display = \"\";\n              });\n            }\n\n            // tl.eventCallback(\"onUpdate\") is unavailable under the HyperFrames runtime proxy, so a\n            // tracker tween's onUpdate fires on every seek. Sampling is deferred to a microtask:\n            // seeking GSAP from inside its own render reads stale tween state, while the microtask\n            // runs after the seek returns and before the frame is captured or painted.\n            var _proxy = { t: 0 };\n            try {\n              tl.to(\n                _proxy,\n                {\n                  t: 1,\n                  duration: Math.max(tl.duration(), 0.1),\n                  ease: \"none\",\n                  onUpdate: function () {\n                    if (scheduled) return;\n                    scheduled = true;\n                    Promise.resolve().then(function () {\n                      scheduled = false;\n                      applyShutter();\n                    });\n                  },\n                },\n                0,\n              );\n            } catch (e) {\n              unmark(claimed);\n              discard(state);\n              throw e;\n            }\n          };\n\n          // An empty attribute means defaults; anything else is a JSON options object. A value that\n          // is not an options object is skipped loudly rather than read as defaults, because a typo\n          // in it would otherwise render as a silently unblurred element.\n          function sweepOptions(el) {\n            var text = (el.getAttribute(SWEEP_ATTR) || \"\").trim();\n            if (text === \"\") return {};\n            var parsed = null;\n            try {\n              parsed = JSON.parse(text);\n            } catch (e) {\n              return refuse(el, \"is not JSON: \" + text);\n            }\n            // `null`, a number and a string all parse. None of them is a set of options.\n            if (parsed === null || typeof parsed !== \"object\" || Array.isArray(parsed)) {\n              return refuse(el, \"is not a JSON object: \" + text);\n            }\n            var bad = unknownKey(parsed);\n            if (bad !== null) return refuse(el, \"names no such option: \" + bad);\n            var wrong = nonNumber(parsed);\n            if (wrong !== null) return refuse(el, \"needs a number for \" + wrong);\n            return parsed;\n          }\n\n          // A misspelled key is the likeliest typo in a JSON object, and reading it as\n          // defaults is the silent no-op this attribute exists to remove.\n          function unknownKey(parsed) {\n            for (var key in parsed) {\n              if (OPTION_KEYS.indexOf(key) < 0) return key;\n            }\n            return null;\n          }\n\n          // A key with a value the shutter cannot use is the same silent no-op as a key it does\n          // not know: a non-numeric angle hides the smear, a non-numeric phase parks every copy\n          // at the timeline's start. JSON gives real numbers, so anything else is a typo.\n          function nonNumber(parsed) {\n            for (var i = 0; i < OPTION_KEYS.length; i++) {\n              var held = parsed[OPTION_KEYS[i]];\n              if (held === undefined) continue;\n              if (typeof held !== \"number\" || !Number.isFinite(held)) return OPTION_KEYS[i];\n            }\n            return null;\n          }\n\n          // A throw partway through an attach leaves an element blurred by nothing, so the copies\n          // go too, along with the observer that would otherwise keep walking a detached subtree\n          // on every resize of an element nothing blurs.\n          // The mark is what a second trigger reads, so it is the first thing to give back.\n          function unmark(els) {\n            for (var i = 0; i < els.length; i++) {\n              window._hfMbAttached.delete(els[i]);\n              window._hfMbTimeline.delete(els[i]);\n            }\n          }\n\n          function discard(state) {\n            for (var i = 0; i < state.length; i++) {\n              var s = state[i];\n              if (s.watch !== null) s.watch.disconnect();\n              if (s.group.parentNode !== null) s.group.parentNode.removeChild(s.group);\n            }\n          }\n\n          function refuse(el, why) {\n            window._hfMbSkipped.add(el);\n            console.warn(\"[motion-blur] \" + SWEEP_ATTR + \" \" + why, el);\n            return null;\n          }\n\n          // An element belongs to the nearest composition above it, so a sub-composition's\n          // targets follow that sub-composition's own timeline.\n          function compositionOf(el) {\n            var host = el.closest(\"[data-composition-id]\");\n            return host ? host.getAttribute(\"data-composition-id\") : null;\n          }\n\n          // Anything else registered on the container is somebody else's bookkeeping: a\n          // timeline is the thing this snippet can seek and extend.\n          function isTimeline(value) {\n            return !!value && typeof value.time === \"function\" && typeof value.to === \"function\";\n          }\n\n          // Attached, or skipped as unparseable. Both are terminal, so a later trigger must not\n          // report or attach the element twice.\n          function handled(el) {\n            return window._hfMbAttached.has(el) || window._hfMbSkipped.has(el);\n          }\n\n          // The timeline registered for an element's own composition, or null. Read from the\n          // registry rather than taken from whoever wrote it, so every trigger agrees.\n          function timelineFor(el) {\n            var id = compositionOf(el);\n            if (id === null) return null;\n            var registry = window.__timelines;\n            var found = registry ? registry[id] : null;\n            return isTimeline(found) ? found : null;\n          }\n\n          // A marked element whose parent is not an Element has no target above it: the parent\n          // of a root is the Document, which has no `closest`.\n          function nestedInTarget(el) {\n            var parent = el.parentNode;\n            if (parent === null || typeof parent.closest !== \"function\") return false;\n            return parent.closest(SWEEP_SELECTOR) !== null;\n          }\n\n          // One owner of attaching one element. Answers whether the element still needs a trigger.\n          function claim(el) {\n            var tl = timelineFor(el);\n            if (handled(el)) {\n              var owner = window._hfMbTimeline.get(el);\n              // Re-registering a key with a DIFFERENT timeline leaves the copies driven by the one\n              // nobody seeks, which renders sharp and says nothing. Report it rather than guess.\n              var changed = tl !== null && owner !== undefined && owner !== tl;\n              if (changed && !window._hfMbWarned.has(el)) {\n                window._hfMbWarned.add(el);\n                console.warn(\n                  \"[motion-blur] a second timeline registered for this element; the copies still follow the first\",\n                  el,\n                );\n              }\n              return true;\n            }\n            // Its group would be inserted into the live outer element, so the outer target's\n            // style replay would walk a subtree its cursor no longer matches.\n            if (nestedInTarget(el)) {\n              refuse(el, \"cannot blur a target inside another target; blur one of them\");\n              return true;\n            }\n            var opts = sweepOptions(el);\n            if (opts === null) return true;\n            if (tl === null) return false;\n            window.attachMotionBlur(el, tl, opts);\n            return true;\n          }\n\n          // Returns the elements still waiting for their composition to register a timeline.\n          // The trap below runs this INSIDE the author's registration statement, so one bad\n          // target must not abort the rest of their composition script.\n          function sweep() {\n            var pending = [];\n            document.querySelectorAll(SWEEP_SELECTOR).forEach(function (el) {\n              try {\n                if (!claim(el)) pending.push(el);\n              } catch (e) {\n                window._hfMbSkipped.add(el);\n                console.warn(\"[motion-blur] could not blur this element: \" + e, el);\n              }\n            });\n            return pending;\n          }\n\n          // Registering a timeline is the moment the author has finished building it, so trapping\n          // the write attaches before the renderer captures a frame. A microtask would be too\n          // early: it runs before the next `<script>` tag.\n          function registrationProxy(container) {\n            var proxy = new Proxy(container, {\n              set: function (target, key, value) {\n                target[key] = value;\n                if (typeof key === \"string\") sweep();\n                return true;\n              },\n            });\n            window._hfMbProxies.add(proxy);\n            return proxy;\n          }\n\n          function hookRegistration() {\n            var held = window.__timelines;\n            Object.defineProperty(window, \"__timelines\", {\n              configurable: true,\n              enumerable: true,\n              get: function () {\n                return held;\n              },\n              set: function (value) {\n                var container = !!value && typeof value === \"object\";\n                var fresh = container && !window._hfMbProxies.has(value);\n                held = fresh ? registrationProxy(value) : value;\n                if (fresh) sweep();\n              },\n            });\n            // A container assigned before this snippet ran is replayed through the setter, so a\n            // timeline already registered on it is swept too.\n            if (held !== undefined) window.__timelines = held;\n          }\n\n          // The trap above cannot see every registration: the runtime owns the registry object,\n          // wraps it per sub-composition, and mounts nested compositions asynchronously. So the\n          // registry is also POLLED, which needs no cooperation from whoever writes it.\n          function poll(ticks) {\n            var pending = sweep();\n            // The WHOLE budget, every time. Stopping the first tick nothing is pending kills the\n            // poll one tick into an ordinary page, which is before a late composition arrives.\n            if (ticks > 0) {\n              setTimeout(function () {\n                poll(ticks - 1);\n              }, POLL_MS);\n              return;\n            }\n            if (pending.length === 0) return;\n            var count = pending.length + \" element(s) carry \" + SWEEP_ATTR;\n            console.warn(\n              \"[motion-blur] \" + count + \", and no composition registered a timeline for them\",\n              pending,\n            );\n          }\n\n          if (!window._hfMbHooked) {\n            window._hfMbHooked = true;\n            hookRegistration();\n            poll(POLL_TICKS);\n          }\n          /* SHUTTER_SNIPPET_END */\n\n          var tl = gsap.timeline({ paused: true });\n\n          gsap.set([\"#s1\", \"#s2\", \"#s3\", \"#s4\", \"#s5\", \"#t1\", \"#t2\", \"#t3\", \"#t4\", \"#t5\"], {\n            x: -400,\n          });\n\n          tl.to([\"#s1\", \"#t1\"], { x: 1640, duration: 3.0, ease: \"power3.inOut\" }, 0);\n          tl.to([\"#s2\", \"#t2\"], { x: 1640, duration: 1.5, ease: \"power3.inOut\" }, 0);\n          tl.to([\"#s3\", \"#t3\"], { x: 1640, duration: 0.7, ease: \"power3.inOut\" }, 0);\n          tl.to([\"#s4\", \"#t4\"], { x: 1640, duration: 0.35, ease: \"power3.inOut\" }, 0);\n          tl.to([\"#s5\", \"#t5\"], { x: 1640, duration: 0.2, ease: \"power3.inOut\" }, 0);\n\n          tl.set(document.body, {}, 4);\n\n          // Every target above carries data-hf-motion-blur, so the registration below is\n          // what attaches them. No attachMotionBlur() call, and no order to get wrong.\n          window.__timelines = window.__timelines || {};\n          window.__timelines[\"motion-blur-demo\"] = tl;\n        })();\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/shutter-slam.json b/docs/public/catalog/components/shutter-slam.json
index eed8f790702..41a086083d3 100644
--- a/docs/public/catalog/components/shutter-slam.json
+++ b/docs/public/catalog/components/shutter-slam.json
@@ -1 +1 @@
-{"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head><style data-hyperframes-text-rendering=\"true\">html,body,*{text-rendering:geometricPrecision}</style>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=1920, height=1080\">\n  <script>/* inlined: https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js */\n/*!\n * GSAP 3.14.2\n * https://gsap.com\n * \n * @license Copyright 2025, GreenSock. All rights reserved.\n * Subject to the terms at https://gsap.com/standard-license.\n * @author: Jack Doyle, jack@greensock.com\n */\n\n!function(t,e){\"object\"==typeof exports&&\"undefined\"!=typeof module?e(exports):\"function\"==typeof define&&define.amd?define([\"exports\"],e):e((t=t||self).window=t.window||{})}(this,function(e){\"use strict\";function _inheritsLoose(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return t}function r(t){return\"string\"==typeof t}function s(t){return\"function\"==typeof t}function t(t){return\"number\"==typeof t}function u(t){return void 0===t}function v(t){return\"object\"==typeof t}function w(t){return!1!==t}function x(){return\"undefined\"!=typeof window}function y(t){return s(t)||r(t)}function R(t){return(i=bt(t,ht))&&Fe}function S(t,e){return console.warn(\"Invalid property\",t,\"set to\",e,\"Missing plugin? gsap.registerPlugin()\")}function T(t,e){return!e&&console.warn(t)}function U(t,e){return t&&(ht[t]=e)&&i&&(i[t]=e)||ht}function V(){return 0}function ga(t){var e,r,i=t[0];if(v(i)||s(i)||(t=[t]),!(e=(i._gsap||{}).harness)){for(r=yt.length;r--&&!yt[r].targetTest(i););e=yt[r]}for(r=t.length;r--;)t[r]&&(t[r]._gsap||(t[r]._gsap=new Xt(t[r],e)))||t.splice(r,1);return t}function ha(t){return t._gsap||ga(Pt(t))[0]._gsap}function ia(t,e,r){return(r=t[e])&&s(r)?t[e]():u(r)&&t.getAttribute&&t.getAttribute(e)||r}function ja(t,e){return(t=t.split(\",\")).forEach(e)||t}function ka(t){return Math.round(1e5*t)/1e5||0}function la(t){return Math.round(1e7*t)/1e7||0}function ma(t,e){var r=e.charAt(0),i=parseFloat(e.substr(2));return t=parseFloat(t),\"+\"===r?t+i:\"-\"===r?t-i:\"*\"===r?t*i:t/i}function na(t,e){for(var r=e.length,i=0;t.indexOf(e[i])<0&&++i<r;);return i<r}function oa(){var t,e,r=pt.length,i=pt.slice(0);for(_t={},t=pt.length=0;t<r;t++)(e=i[t])&&e._lazy&&(e.render(e._lazy[0],e._lazy[1],!0)._lazy=0)}function pa(t){return!!(t._initted||t._startAt||t.add)}function qa(t,e,r,i){pt.length&&!I&&oa(),t.render(e,r,i||!!(I&&e<0&&pa(t))),pt.length&&!I&&oa()}function ra(t){var e=parseFloat(t);return(e||0===e)&&(t+\"\").match(ot).length<2?e:r(t)?t.trim():t}function sa(t){return t}function ta(t,e){for(var r in e)r in t||(t[r]=e[r]);return t}function wa(t,e){for(var r in e)\"__proto__\"!==r&&\"constructor\"!==r&&\"prototype\"!==r&&(t[r]=v(e[r])?wa(t[r]||(t[r]={}),e[r]):e[r]);return t}function xa(t,e){var r,i={};for(r in t)r in e||(i[r]=t[r]);return i}function ya(t){var e=t.parent||L,r=t.keyframes?function _setKeyframeDefaults(i){return function(t,e){for(var r in e)r in t||\"duration\"===r&&i||\"ease\"===r||(t[r]=e[r])}}($(t.keyframes)):ta;if(w(t.inherit))for(;e;)r(t,e.vars.defaults),e=e.parent||e._dp;return t}function Aa(t,e,r,i,n){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var a,s=t[i];if(n)for(a=e[n];s&&s[n]>a;)s=s._prev;return s?(e._next=s._next,s._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[i]=e,e._prev=s,e.parent=e._dp=t,e}function Ba(t,e,r,i){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var n=e._prev,a=e._next;n?n._next=a:t[r]===e&&(t[r]=a),a?a._prev=n:t[i]===e&&(t[i]=n),e._next=e._prev=e.parent=null}function Ca(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove&&t.parent.remove(t),t._act=0}function Da(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t}function Fa(t,e,r,i){return t._startAt&&(I?t._startAt.revert(ft):t.vars.immediateRender&&!t.vars.autoRevert||t._startAt.render(e,!0,i))}function Ha(t){return t._repeat?wt(t._tTime,t=t.duration()+t._rDelay)*t:0}function Ja(t,e){return(t-e._start)*e._ts+(0<=e._ts?0:e._dirty?e.totalDuration():e._tDur)}function Ka(t){return t._end=la(t._start+(t._tDur/Math.abs(t._ts||t._rts||q)||0))}function La(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=la(r._time-(0<t._ts?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Ka(t),r._dirty||Da(r,t)),t}function Ma(t,e){var r;if((e._time||!e._dur&&e._initted||e._start<t._time&&(e._dur||!e.add))&&(r=Ja(t.rawTime(),e),(!e._dur||Mt(0,e.totalDuration(),r)-e._tTime>q)&&e.render(r,!0)),Da(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur<t.duration())for(r=t;r._dp;)0<=r.rawTime()&&r.totalTime(r._tTime),r=r._dp;t._zTime=-q}}function Na(e,r,i,n){return r.parent&&Ca(r),r._start=la((t(i)?i:i||e!==L?Ot(e,i,r):e._time)+r._delay),r._end=la(r._start+(r.totalDuration()/Math.abs(r.timeScale())||0)),Aa(e,r,\"_first\",\"_last\",e._sort?\"_start\":0),xt(r)||(e._recent=r),n||Ma(e,r),e._ts<0&&La(e,e._tTime),e}function Oa(t,e){return(ht.ScrollTrigger||S(\"scrollTrigger\",e))&&ht.ScrollTrigger.create(e,t)}function Pa(t,e,r,i,n){return Qt(t,e,n),t._initted?!r&&t._pt&&!I&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&f!==It.frame?(pt.push(t),t._lazy=[n,i],1):void 0:1}function Ua(t,e,r,i){var n=t._repeat,a=la(e)||0,s=t._tTime/t._tDur;return s&&!i&&(t._time*=a/t._dur),t._dur=a,t._tDur=n?n<0?1e10:la(a*(n+1)+t._rDelay*n):a,0<s&&!i&&La(t,t._tTime=t._tDur*s),t.parent&&Ka(t),r||Da(t.parent,t),t}function Va(t){return t instanceof Zt?Da(t):Ua(t,t._dur)}function Ya(e,r,i){var n,a,s=t(r[1]),o=(s?2:1)+(e<2?0:1),u=r[o];if(s&&(u.duration=r[1]),u.parent=i,e){for(n=u,a=i;a&&!(\"immediateRender\"in n);)n=a.vars.defaults||{},a=w(a.vars.inherit)&&a.parent;u.immediateRender=w(n.immediateRender),e<2?u.runBackwards=1:u.startAt=r[o-1]}return new te(r[0],u,r[1+o])}function Za(t,e){return t||0===t?e(t):e}function _a(t,e){return r(t)&&(e=ut.exec(t))?e[1]:\"\"}function cb(t,e){return t&&v(t)&&\"length\"in t&&(!e&&!t.length||t.length-1 in t&&v(t[0]))&&!t.nodeType&&t!==h}function fb(r){return r=Pt(r)[0]||T(\"Invalid scope\")||{},function(t){var e=r.current||r.nativeElement||r;return Pt(t,e.querySelectorAll?e:e===r?T(\"Invalid scope\")||a.createElement(\"div\"):r)}}function gb(t){return t.sort(function(){return.5-Math.random()})}function hb(t){if(s(t))return t;var p=v(t)?t:{each:t},_=Vt(p.ease),m=p.from||0,g=parseFloat(p.base)||0,y={},e=0<m&&m<1,T=isNaN(m)||e,b=p.axis,w=m,x=m;return r(m)?w=x={center:.5,edges:.5,end:1}[m]||0:!e&&T&&(w=m[0],x=m[1]),function(t,e,r){var i,n,a,s,o,u,h,l,f,d=(r||p).length,c=y[d];if(!c){if(!(f=\"auto\"===p.grid?0:(p.grid||[1,X])[1])){for(h=-X;h<(h=r[f++].getBoundingClientRect().left)&&f<d;);f<d&&f--}for(c=y[d]=[],i=T?Math.min(f,d)*w-.5:m%f,n=f===X?0:T?d*x/f-.5:m/f|0,l=X,u=h=0;u<d;u++)a=u%f-i,s=n-(u/f|0),c[u]=o=b?Math.abs(\"y\"===b?s:a):J(a*a+s*s),h<o&&(h=o),o<l&&(l=o);\"random\"===m&&gb(c),c.max=h-l,c.min=l,c.v=d=(parseFloat(p.amount)||parseFloat(p.each)*(d<f?d-1:b?\"y\"===b?d/f:f:Math.max(f,d/f))||0)*(\"edges\"===m?-1:1),c.b=d<0?g-d:g,c.u=_a(p.amount||p.each)||0,_=_&&d<0?jt(_):_}return d=(c[t]-c.min)/c.max||0,la(c.b+(_?_(d):d)*c.v)+c.u}}function ib(i){var n=Math.pow(10,((i+\"\").split(\".\")[1]||\"\").length);return function(e){var r=la(Math.round(parseFloat(e)/i)*i*n);return(r-r%1)/n+(t(e)?0:_a(e))}}function jb(h,e){var l,f,r=$(h);return!r&&v(h)&&(l=r=h.radius||X,h.values?(h=Pt(h.values),(f=!t(h[0]))&&(l*=l)):h=ib(h.increment)),Za(e,r?s(h)?function(t){return f=h(t),Math.abs(f-t)<=l?f:t}:function(e){for(var r,i,n=parseFloat(f?e.x:e),a=parseFloat(f?e.y:0),s=X,o=0,u=h.length;u--;)(r=f?(r=h[u].x-n)*r+(i=h[u].y-a)*i:Math.abs(h[u]-n))<s&&(s=r,o=u);return o=!l||s<=l?h[o]:e,f||o===e||t(e)?o:o+_a(e)}:ib(h))}function kb(t,e,r,i){return Za($(t)?!e:!0===r?!!(r=0):!i,function(){return $(t)?t[~~(Math.random()*t.length)]:(r=r||1e-5)&&(i=r<1?Math.pow(10,(r+\"\").length-2):1)&&Math.floor(Math.round((t-r/2+Math.random()*(e-t+.99*r))/r)*r*i)/i})}function ob(e,r,t){return Za(t,function(t){return e[~~r(t)]})}function rb(t){return t.replace(tt,function(t){var e=t.indexOf(\"[\")+1,r=t.substring(e||7,e?t.indexOf(\"]\"):t.length-1).split(et);return kb(e?r:+r[0],e?0:+r[1],+r[2]||1e-5)})}function ub(t,e,r){var i,n,a,s=t.labels,o=X;for(i in s)(n=s[i]-e)<0==!!r&&n&&o>(n=Math.abs(n))&&(a=i,o=n);return a}function wb(t){return Ca(t),t.scrollTrigger&&t.scrollTrigger.kill(!!I),t.progress()<1&&Dt(t,\"onInterrupt\"),t}function zb(t){if(t)if(t=!t.name&&t.default||t,x()||t.headless){var e=t.name,r=s(t),i=e&&!r&&t.init?function(){this._props=[]}:t,n={init:V,render:ve,add:Jt,kill:Te,modifier:ye,rawVars:0},a={targetTest:0,get:0,getSetter:le,aliases:{},register:0};if(Lt(),t!==i){if(mt[e])return;ta(i,ta(xa(t,n),a)),bt(i.prototype,bt(n,xa(t,a))),mt[i.prop=e]=i,t.targetTest&&(yt.push(i),ct[e]=1),e=(\"css\"===e?\"CSS\":e.charAt(0).toUpperCase()+e.substr(1))+\"Plugin\"}U(e,i),t.register&&t.register(Fe,i,we)}else St.push(t)}function Cb(t,e,r){return(6*(t+=t<0?1:1<t?-1:0)<1?e+(r-e)*t*6:t<.5?r:3*t<2?e+(r-e)*(2/3-t)*6:e)*zt+.5|0}function Db(e,r,i){var n,a,s,o,u,h,l,f,d,c,p=e?t(e)?[e>>16,e>>8&zt,e&zt]:0:Et.black;if(!p){if(\",\"===e.substr(-1)&&(e=e.substr(0,e.length-1)),Et[e])p=Et[e];else if(\"#\"===e.charAt(0)){if(e.length<6&&(e=\"#\"+(n=e.charAt(1))+n+(a=e.charAt(2))+a+(s=e.charAt(3))+s+(5===e.length?e.charAt(4)+e.charAt(4):\"\")),9===e.length)return[(p=parseInt(e.substr(1,6),16))>>16,p>>8&zt,p&zt,parseInt(e.substr(7),16)/255];p=[(e=parseInt(e.substr(1),16))>>16,e>>8&zt,e&zt]}else if(\"hsl\"===e.substr(0,3))if(p=c=e.match(rt),r){if(~e.indexOf(\"=\"))return p=e.match(it),i&&p.length<4&&(p[3]=1),p}else o=+p[0]%360/360,u=p[1]/100,n=2*(h=p[2]/100)-(a=h<=.5?h*(u+1):h+u-h*u),3<p.length&&(p[3]*=1),p[0]=Cb(o+1/3,n,a),p[1]=Cb(o,n,a),p[2]=Cb(o-1/3,n,a);else p=e.match(rt)||Et.transparent;p=p.map(Number)}return r&&!c&&(n=p[0]/zt,a=p[1]/zt,s=p[2]/zt,h=((l=Math.max(n,a,s))+(f=Math.min(n,a,s)))/2,l===f?o=u=0:(d=l-f,u=.5<h?d/(2-l-f):d/(l+f),o=l===n?(a-s)/d+(a<s?6:0):l===a?(s-n)/d+2:(n-a)/d+4,o*=60),p[0]=~~(o+.5),p[1]=~~(100*u+.5),p[2]=~~(100*h+.5)),i&&p.length<4&&(p[3]=1),p}function Eb(t){var r=[],i=[],n=-1;return t.split(Rt).forEach(function(t){var e=t.match(nt)||[];r.push.apply(r,e),i.push(n+=e.length+1)}),r.c=i,r}function Fb(t,e,r){var i,n,a,s,o=\"\",u=(t+o).match(Rt),h=e?\"hsla(\":\"rgba(\",l=0;if(!u)return t;if(u=u.map(function(t){return(t=Db(t,e,1))&&h+(e?t[0]+\",\"+t[1]+\"%,\"+t[2]+\"%,\"+t[3]:t.join(\",\"))+\")\"}),r&&(a=Eb(t),(i=r.c).join(o)!==a.c.join(o)))for(s=(n=t.replace(Rt,\"1\").split(nt)).length-1;l<s;l++)o+=n[l]+(~i.indexOf(l)?u.shift()||h+\"0,0,0,0)\":(a.length?a:u.length?u:r).shift());if(!n)for(s=(n=t.split(Rt)).length-1;l<s;l++)o+=n[l]+u[l];return o+n[s]}function Ib(t){var e,r=t.join(\" \");if(Rt.lastIndex=0,Rt.test(r))return e=Ft.test(r),t[1]=Fb(t[1],e),t[0]=Fb(t[0],e,Eb(t[1])),!0}function Rb(t){var e=(t+\"\").split(\"(\"),r=Bt[e[0]];return r&&1<e.length&&r.config?r.config.apply(null,~t.indexOf(\"{\")?[function _parseObjectInString(t){for(var e,r,i,n={},a=t.substr(1,t.length-3).split(\":\"),s=a[0],o=1,u=a.length;o<u;o++)r=a[o],e=o!==u-1?r.lastIndexOf(\",\"):r.length,i=r.substr(0,e),n[s]=isNaN(i)?i.replace(Nt,\"\").trim():+i,s=r.substr(e+1).trim();return n}(e[1])]:function _valueInParentheses(t){var e=t.indexOf(\"(\")+1,r=t.indexOf(\")\"),i=t.indexOf(\"(\",e);return t.substring(e,~i&&i<r?t.indexOf(\")\",r+1):r)}(t).split(\",\").map(ra)):Bt._CE&&Yt.test(t)?Bt._CE(\"\",t):r}function Tb(t,e){for(var r,i=t._first;i;)i instanceof Zt?Tb(i,e):!i.vars.yoyoEase||i._yoyo&&i._repeat||i._yoyo===e||(i.timeline?Tb(i.timeline,e):(r=i._ease,i._ease=i._yEase,i._yEase=r,i._yoyo=e)),i=i._next}function Vb(t,e,r,i){void 0===r&&(r=function easeOut(t){return 1-e(1-t)}),void 0===i&&(i=function easeInOut(t){return t<.5?e(2*t)/2:1-e(2*(1-t))/2});var n,a={easeIn:e,easeOut:r,easeInOut:i};return ja(t,function(t){for(var e in Bt[t]=ht[t]=a,Bt[n=t.toLowerCase()]=r,a)Bt[n+(\"easeIn\"===e?\".in\":\"easeOut\"===e?\".out\":\".inOut\")]=Bt[t+\".\"+e]=a[e]}),a}function Wb(e){return function(t){return t<.5?(1-e(1-2*t))/2:.5+e(2*(t-.5))/2}}function Xb(r,t,e){function Lm(t){return 1===t?1:i*Math.pow(2,-10*t)*G((t-a)*n)+1}var i=1<=t?t:1,n=(e||(r?.3:.45))/(t<1?t:1),a=n/Z*(Math.asin(1/i)||0),s=\"out\"===r?Lm:\"in\"===r?function(t){return 1-Lm(1-t)}:Wb(Lm);return n=Z/n,s.config=function(t,e){return Xb(r,t,e)},s}function Yb(e,r){function Tm(t){return t?--t*t*((r+1)*t+r)+1:0}void 0===r&&(r=1.70158);var t=\"out\"===e?Tm:\"in\"===e?function(t){return 1-Tm(1-t)}:Wb(Tm);return t.config=function(t){return Yb(e,t)},t}var F,I,l,L,h,n,a,i,o,f,d,c,p,_,m,g,b,k,O,M,C,P,A,D,z,E,B,Y,N={autoSleep:120,force3D:\"auto\",nullTargetWarn:1,units:{lineHeight:\"\"}},j={duration:.5,overwrite:!1,delay:0},X=1e8,q=1/X,Z=2*Math.PI,W=Z/4,H=0,J=Math.sqrt,Q=Math.cos,G=Math.sin,K=\"function\"==typeof ArrayBuffer&&ArrayBuffer.isView||function(){},$=Array.isArray,tt=/random\\([^)]+\\)/g,et=/,\\s*/g,rt=/(?:-?\\.?\\d|\\.)+/gi,it=/[-+=.]*\\d+[.e\\-+]*\\d*[e\\-+]*\\d*/g,nt=/[-+=.]*\\d+[.e-]*\\d*[a-z%]*/g,at=/[-+=.]*\\d+\\.?\\d*(?:e-|e\\+)?\\d*/gi,st=/[+-]=-?[.\\d]+/,ot=/[^,'\"\\[\\]\\s]+/gi,ut=/^[+\\-=e\\s\\d]*\\d+[.\\d]*([a-z]*|%)\\s*$/i,ht={},lt={suppressEvents:!0,isStart:!0,kill:!1},ft={suppressEvents:!0,kill:!1},dt={suppressEvents:!0},ct={},pt=[],_t={},mt={},gt={},vt=30,yt=[],Tt=\"\",bt=function _merge(t,e){for(var r in e)t[r]=e[r];return t},wt=function _animationCycle(t,e){var r=Math.floor(t=la(t/e));return t&&r===t?r-1:r},xt=function _isFromOrFromStart(t){var e=t.data;return\"isFromStart\"===e||\"isStart\"===e},kt={_start:0,endTime:V,totalDuration:V},Ot=function _parsePosition(t,e,i){var n,a,s,o=t.labels,u=t._recent||kt,h=t.duration()>=X?u.endTime(!1):t._dur;return r(e)&&(isNaN(e)||e in o)?(a=e.charAt(0),s=\"%\"===e.substr(-1),n=e.indexOf(\"=\"),\"<\"===a||\">\"===a?(0<=n&&(e=e.replace(/=/,\"\")),(\"<\"===a?u._start:u.endTime(0<=u._repeat))+(parseFloat(e.substr(1))||0)*(s?(n<0?u:i).totalDuration()/100:1)):n<0?(e in o||(o[e]=h),o[e]):(a=parseFloat(e.charAt(n-1)+e.substr(n+1)),s&&i&&(a=a/100*($(i)?i[0]:i).totalDuration()),1<n?_parsePosition(t,e.substr(0,n-1),i)+a:h+a)):null==e?h:+e},Mt=function _clamp(t,e,r){return r<t?t:e<r?e:r},Ct=[].slice,Pt=function toArray(t,e,i){return l&&!e&&l.selector?l.selector(t):!r(t)||i||!n&&Lt()?$(t)?function _flatten(t,e,i){return void 0===i&&(i=[]),t.forEach(function(t){return r(t)&&!e||cb(t,1)?i.push.apply(i,Pt(t)):i.push(t)})||i}(t,i):cb(t)?Ct.call(t,0):t?[t]:[]:Ct.call((e||a).querySelectorAll(t),0)},At=function mapRange(e,t,r,i,n){var a=t-e,s=i-r;return Za(n,function(t){return r+((t-e)/a*s||0)})},Dt=function _callback(t,e,r){var i,n,a,s=t.vars,o=s[e],u=l,h=t._ctx;if(o)return i=s[e+\"Params\"],n=s.callbackScope||t,r&&pt.length&&oa(),h&&(l=h),a=i?o.apply(n,i):o.call(n),l=u,a},St=[],zt=255,Et={aqua:[0,zt,zt],lime:[0,zt,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,zt],navy:[0,0,128],white:[zt,zt,zt],olive:[128,128,0],yellow:[zt,zt,0],orange:[zt,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[zt,0,0],pink:[zt,192,203],cyan:[0,zt,zt],transparent:[zt,zt,zt,0]},Rt=function(){var t,e=\"(?:\\\\b(?:(?:rgb|rgba|hsl|hsla)\\\\(.+?\\\\))|\\\\B#(?:[0-9a-f]{3,4}){1,2}\\\\b\";for(t in Et)e+=\"|\"+t+\"\\\\b\";return new RegExp(e+\")\",\"gi\")}(),Ft=/hsl[a]?\\(/,It=(O=Date.now,M=500,C=33,P=O(),A=P,z=D=1e3/240,g={time:0,frame:0,tick:function tick(){Al(!0)},deltaRatio:function deltaRatio(t){return b/(1e3/(t||60))},wake:function wake(){o&&(!n&&x()&&(h=n=window,a=h.document||{},ht.gsap=Fe,(h.gsapVersions||(h.gsapVersions=[])).push(Fe.version),R(i||h.GreenSockGlobals||!h.gsap&&h||{}),St.forEach(zb)),m=\"undefined\"!=typeof requestAnimationFrame&&requestAnimationFrame,p&&g.sleep(),_=m||function(t){return setTimeout(t,z-1e3*g.time+1|0)},c=1,Al(2))},sleep:function sleep(){(m?cancelAnimationFrame:clearTimeout)(p),c=0,_=V},lagSmoothing:function lagSmoothing(t,e){M=t||1/0,C=Math.min(e||33,M)},fps:function fps(t){D=1e3/(t||240),z=1e3*g.time+D},add:function add(n,t,e){var a=t?function(t,e,r,i){n(t,e,r,i),g.remove(a)}:n;return g.remove(n),E[e?\"unshift\":\"push\"](a),Lt(),a},remove:function remove(t,e){~(e=E.indexOf(t))&&E.splice(e,1)&&e<=k&&k--},_listeners:E=[]}),Lt=function _wake(){return!c&&It.wake()},Bt={},Yt=/^[\\d.\\-M][\\d.\\-,\\s]/,Nt=/[\"']/g,jt=function _invertEase(e){return function(t){return 1-e(1-t)}},Vt=function _parseEase(t,e){return t&&(s(t)?t:Bt[t]||Rb(t))||e};function Al(t){var e,r,i,n,a=O()-A,s=!0===t;if((M<a||a<0)&&(P+=a-C),(0<(e=(i=(A+=a)-P)-z)||s)&&(n=++g.frame,b=i-1e3*g.time,g.time=i/=1e3,z+=e+(D<=e?4:D-e),r=1),s||(p=_(Al)),r)for(k=0;k<E.length;k++)E[k](i,b,n,t)}function jn(t){return t<Y?B*t*t:t<.7272727272727273?B*Math.pow(t-1.5/2.75,2)+.75:t<.9090909090909092?B*(t-=2.25/2.75)*t+.9375:B*Math.pow(t-2.625/2.75,2)+.984375}ja(\"Linear,Quad,Cubic,Quart,Quint,Strong\",function(t,e){var r=e<5?e+1:e;Vb(t+\",Power\"+(r-1),e?function(t){return Math.pow(t,r)}:function(t){return t},function(t){return 1-Math.pow(1-t,r)},function(t){return t<.5?Math.pow(2*t,r)/2:1-Math.pow(2*(1-t),r)/2})}),Bt.Linear.easeNone=Bt.none=Bt.Linear.easeIn,Vb(\"Elastic\",Xb(\"in\"),Xb(\"out\"),Xb()),B=7.5625,Y=1/2.75,Vb(\"Bounce\",function(t){return 1-jn(1-t)},jn),Vb(\"Expo\",function(t){return Math.pow(2,10*(t-1))*t+t*t*t*t*t*t*(1-t)}),Vb(\"Circ\",function(t){return-(J(1-t*t)-1)}),Vb(\"Sine\",function(t){return 1===t?1:1-Q(t*W)}),Vb(\"Back\",Yb(\"in\"),Yb(\"out\"),Yb()),Bt.SteppedEase=Bt.steps=ht.SteppedEase={config:function config(t,e){void 0===t&&(t=1);var r=1/t,i=t+(e?0:1),n=e?1:0;return function(t){return((i*Mt(0,.99999999,t)|0)+n)*r}}},j.ease=Bt[\"quad.out\"],ja(\"onComplete,onUpdate,onStart,onRepeat,onReverseComplete,onInterrupt\",function(t){return Tt+=t+\",\"+t+\"Params,\"});var Ut,Xt=function GSCache(t,e){this.id=H++,(t._gsap=this).target=t,this.harness=e,this.get=e?e.get:ia,this.set=e?e.getSetter:le},qt=((Ut=Animation.prototype).delay=function delay(t){return t||0===t?(this.parent&&this.parent.smoothChildTiming&&this.startTime(this._start+t-this._delay),this._delay=t,this):this._delay},Ut.duration=function duration(t){return arguments.length?this.totalDuration(0<this._repeat?t+(t+this._rDelay)*this._repeat:t):this.totalDuration()&&this._dur},Ut.totalDuration=function totalDuration(t){return arguments.length?(this._dirty=0,Ua(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},Ut.totalTime=function totalTime(t,e){if(Lt(),!arguments.length)return this._tTime;var r=this._dp;if(r&&r.smoothChildTiming&&this._ts){for(La(this,t),!r._dp||r.parent||Ma(r,this);r&&r.parent;)r.parent._time!==r._start+(0<=r._ts?r._tTime/r._ts:(r.totalDuration()-r._tTime)/-r._ts)&&r.totalTime(r._tTime,!0),r=r.parent;!this.parent&&this._dp.autoRemoveChildren&&(0<this._ts&&t<this._tDur||this._ts<0&&0<t||!this._tDur&&!t)&&Na(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&Math.abs(this._zTime)===q||!this._initted&&this._dur&&t||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),qa(this,t,e)),this},Ut.time=function time(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+Ha(this))%(this._dur+this._rDelay)||(t?this._dur:0),e):this._time},Ut.totalProgress=function totalProgress(t,e){return arguments.length?this.totalTime(this.totalDuration()*t,e):this.totalDuration()?Math.min(1,this._tTime/this._tDur):0<=this.rawTime()&&this._initted?1:0},Ut.progress=function progress(t,e){return arguments.length?this.totalTime(this.duration()*(!this._yoyo||1&this.iteration()?t:1-t)+Ha(this),e):this.duration()?Math.min(1,this._time/this._dur):0<this.rawTime()?1:0},Ut.iteration=function iteration(t,e){var r=this.duration()+this._rDelay;return arguments.length?this.totalTime(this._time+(t-1)*r,e):this._repeat?wt(this._tTime,r)+1:1},Ut.timeScale=function timeScale(t,e){if(!arguments.length)return this._rts===-q?0:this._rts;if(this._rts===t)return this;var r=this.parent&&this._ts?Ja(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||t===-q?0:this._rts,this.totalTime(Mt(-Math.abs(this._delay),this.totalDuration(),r),!1!==e),Ka(this),function _recacheAncestors(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t}(this)},Ut.paused=function paused(t){return arguments.length?(this._ps!==t&&((this._ps=t)?(this._pTime=this._tTime||Math.max(-this._delay,this.rawTime()),this._ts=this._act=0):(Lt(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&Math.abs(this._zTime)!==q&&(this._tTime-=q)))),this):this._ps},Ut.startTime=function startTime(t){if(arguments.length){this._start=la(t);var e=this.parent||this._dp;return!e||!e._sort&&this.parent||Na(e,this,this._start-this._delay),this}return this._start},Ut.endTime=function endTime(t){return this._start+(w(t)?this.totalDuration():this.duration())/Math.abs(this._ts||1)},Ut.rawTime=function rawTime(t){var e=this.parent||this._dp;return e?t&&(!this._ts||this._repeat&&this._time&&this.totalProgress()<1)?this._tTime%(this._dur+this._rDelay):this._ts?Ja(e.rawTime(t),this):this._tTime:this._tTime},Ut.revert=function revert(t){void 0===t&&(t=dt);var e=I;return I=t,pa(this)&&(this.timeline&&this.timeline.revert(t),this.totalTime(-.01,t.suppressEvents)),\"nested\"!==this.data&&!1!==t.kill&&this.kill(),I=e,this},Ut.globalTime=function globalTime(t){for(var e=this,r=arguments.length?t:e.rawTime();e;)r=e._start+r/(Math.abs(e._ts)||1),e=e._dp;return!this.parent&&this._sat?this._sat.globalTime(t):r},Ut.repeat=function repeat(t){return arguments.length?(this._repeat=t===1/0?-2:t,Va(this)):-2===this._repeat?1/0:this._repeat},Ut.repeatDelay=function repeatDelay(t){if(arguments.length){var e=this._time;return this._rDelay=t,Va(this),e?this.time(e):this}return this._rDelay},Ut.yoyo=function yoyo(t){return arguments.length?(this._yoyo=t,this):this._yoyo},Ut.seek=function seek(t,e){return this.totalTime(Ot(this,t),w(e))},Ut.restart=function restart(t,e){return this.play().totalTime(t?-this._delay:0,w(e)),this._dur||(this._zTime=-q),this},Ut.play=function play(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},Ut.reverse=function reverse(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},Ut.pause=function pause(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},Ut.resume=function resume(){return this.paused(!1)},Ut.reversed=function reversed(t){return arguments.length?(!!t!==this.reversed()&&this.timeScale(-this._rts||(t?-q:0)),this):this._rts<0},Ut.invalidate=function invalidate(){return this._initted=this._act=0,this._zTime=-q,this},Ut.isActive=function isActive(){var t,e=this.parent||this._dp,r=this._start;return!(e&&!(this._ts&&this._initted&&e.isActive()&&(t=e.rawTime(!0))>=r&&t<this.endTime(!0)-q))},Ut.eventCallback=function eventCallback(t,e,r){var i=this.vars;return 1<arguments.length?(e?(i[t]=e,r&&(i[t+\"Params\"]=r),\"onUpdate\"===t&&(this._onUpdate=e)):delete i[t],this):i[t]},Ut.then=function then(t){var i=this,n=i._prom;return new Promise(function(e){function Fo(){var t=i.then;i.then=null,n&&n(),s(r)&&(r=r(i))&&(r.then||r===i)&&(i.then=t),e(r),i.then=t}var r=s(t)?t:sa;i._initted&&1===i.totalProgress()&&0<=i._ts||!i._tTime&&i._ts<0?Fo():i._prom=Fo})},Ut.kill=function kill(){wb(this)},Animation);function Animation(t){this.vars=t,this._delay=+t.delay||0,(this._repeat=t.repeat===1/0?-2:t.repeat||0)&&(this._rDelay=t.repeatDelay||0,this._yoyo=!!t.yoyo||!!t.yoyoEase),this._ts=1,Ua(this,+t.duration,1,1),this.data=t.data,l&&(this._ctx=l).data.push(this),c||It.wake()}ta(qt.prototype,{_time:0,_start:0,_end:0,_tTime:0,_tDur:0,_dirty:0,_repeat:0,_yoyo:!1,parent:null,_initted:!1,_rDelay:0,_ts:1,_dp:0,ratio:0,_zTime:-q,_prom:0,_ps:!1,_rts:1});var Zt=function(i){function Timeline(t,e){var r;return void 0===t&&(t={}),(r=i.call(this,t)||this).labels={},r.smoothChildTiming=!!t.smoothChildTiming,r.autoRemoveChildren=!!t.autoRemoveChildren,r._sort=w(t.sortChildren),L&&Na(t.parent||L,_assertThisInitialized(r),e),t.reversed&&r.reverse(),t.paused&&r.paused(!0),t.scrollTrigger&&Oa(_assertThisInitialized(r),t.scrollTrigger),r}_inheritsLoose(Timeline,i);var e=Timeline.prototype;return e.to=function to(t,e,r){return Ya(0,arguments,this),this},e.from=function from(t,e,r){return Ya(1,arguments,this),this},e.fromTo=function fromTo(t,e,r,i){return Ya(2,arguments,this),this},e.set=function set(t,e,r){return e.duration=0,e.parent=this,ya(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new te(t,e,Ot(this,r),1),this},e.call=function call(t,e,r){return Na(this,te.delayedCall(0,t,e),r)},e.staggerTo=function staggerTo(t,e,r,i,n,a,s){return r.duration=e,r.stagger=r.stagger||i,r.onComplete=a,r.onCompleteParams=s,r.parent=this,new te(t,r,Ot(this,n)),this},e.staggerFrom=function staggerFrom(t,e,r,i,n,a,s){return r.runBackwards=1,ya(r).immediateRender=w(r.immediateRender),this.staggerTo(t,e,r,i,n,a,s)},e.staggerFromTo=function staggerFromTo(t,e,r,i,n,a,s,o){return i.startAt=r,ya(i).immediateRender=w(i.immediateRender),this.staggerTo(t,e,i,n,a,s,o)},e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_=this._time,m=this._dirty?this.totalDuration():this._tDur,g=this._dur,v=t<=0?0:la(t),y=this._zTime<0!=t<0&&(this._initted||!g);if(this!==L&&m<v&&0<=t&&(v=m),v!==this._tTime||r||y){if(_!==this._time&&g&&(v+=this._time-_,t+=this._time-_),i=v,f=this._start,u=!(l=this._ts),y&&(g||(_=this._zTime),!t&&e||(this._zTime=t)),this._repeat){if(c=this._yoyo,o=g+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*o+t,e,r);if(i=la(v%o),v===m?(s=this._repeat,i=g):((s=~~(d=la(v/o)))&&s===d&&(i=g,s--),g<i&&(i=g)),d=wt(this._tTime,o),!_&&this._tTime&&d!==s&&this._tTime-d*o-this._dur<=0&&(d=s),c&&1&s&&(i=g-i,p=1),s!==d&&!this._lock){var T=c&&1&d,b=T===(c&&1&s);if(s<d&&(T=!T),_=T?0:v%g?g:v,this._lock=1,this.render(_||(p?0:la(s*o)),e,!g)._lock=0,this._tTime=v,!e&&this.parent&&Dt(this,\"onRepeat\"),this.vars.repeatRefresh&&!p&&(this.invalidate()._lock=1,d=s),_&&_!==this._time||u!=!this._ts||this.vars.onRepeat&&!this.parent&&!this._act)return this;if(g=this._dur,m=this._tDur,b&&(this._lock=2,_=T?g:-1e-4,this.render(_,!0),this.vars.repeatRefresh&&!p&&this.invalidate()),this._lock=0,!this._ts&&!u)return this;Tb(this,p)}}if(this._hasPause&&!this._forcing&&this._lock<2&&(h=function _findNextPauseTween(t,e,r){var i;if(e<r)for(i=t._first;i&&i._start<=r;){if(\"isPause\"===i.data&&i._start>e)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if(\"isPause\"===i.data&&i._start<e)return i;i=i._prev}}(this,la(_),la(i)))&&(v-=i-(i=h._start)),this._tTime=v,this._time=i,this._act=!l,this._initted||(this._onUpdate=this.vars.onUpdate,this._initted=1,this._zTime=t,_=0),!_&&v&&g&&!e&&!d&&(Dt(this,\"onStart\"),this._tTime!==v))return this;if(_<=i&&0<=t)for(n=this._first;n;){if(a=n._next,(n._act||i>=n._start)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(i-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(i-n._start)*n._ts,e,r),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=-q);break}}n=a}else{n=this._last;for(var w=t<0?t:i;n;){if(a=n._prev,(n._act||w<=n._end)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(w-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(w-n._start)*n._ts,e,r||I&&pa(n)),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=w?-q:q);break}}n=a}}if(h&&!e&&(this.pause(),h.render(_<=i?0:-q)._zTime=_<=i?1:-1,this._ts))return this._start=f,Ka(this),this.render(t,e,r);this._onUpdate&&!e&&Dt(this,\"onUpdate\",!0),(v===m&&this._tTime>=this.totalDuration()||!v&&_)&&(f!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||(!t&&g||!(v===m&&0<this._ts||!v&&this._ts<0)||Ca(this,1),e||t<0&&!_||!v&&!_&&m||(Dt(this,v===m&&0<=t?\"onComplete\":\"onReverseComplete\",!0),!this._prom||v<m&&0<this.timeScale()||this._prom())))}return this},e.add=function add(e,i){var n=this;if(t(i)||(i=Ot(this,i,e)),!(e instanceof qt)){if($(e))return e.forEach(function(t){return n.add(t,i)}),this;if(r(e))return this.addLabel(e,i);if(!s(e))return this;e=te.delayedCall(0,e)}return this!==e?Na(this,e,i):this},e.getChildren=function getChildren(t,e,r,i){void 0===t&&(t=!0),void 0===e&&(e=!0),void 0===r&&(r=!0),void 0===i&&(i=-X);for(var n=[],a=this._first;a;)a._start>=i&&(a instanceof te?e&&n.push(a):(r&&n.push(a),t&&n.push.apply(n,a.getChildren(!0,e,r)))),a=a._next;return n},e.getById=function getById(t){for(var e=this.getChildren(1,1,1),r=e.length;r--;)if(e[r].vars.id===t)return e[r]},e.remove=function remove(t){return r(t)?this.removeLabel(t):s(t)?this.killTweensOf(t):(t.parent===this&&Ba(this,t),t===this._recent&&(this._recent=this._last),Da(this))},e.totalTime=function totalTime(t,e){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=la(It.time-(0<this._ts?t/this._ts:(this.totalDuration()-t)/-this._ts))),i.prototype.totalTime.call(this,t,e),this._forcing=0,this):this._tTime},e.addLabel=function addLabel(t,e){return this.labels[t]=Ot(this,e),this},e.removeLabel=function removeLabel(t){return delete this.labels[t],this},e.addPause=function addPause(t,e,r){var i=te.delayedCall(0,e||V,r);return i.data=\"isPause\",this._hasPause=1,Na(this,i,Ot(this,t))},e.removePause=function removePause(t){var e=this._first;for(t=Ot(this,t);e;)e._start===t&&\"isPause\"===e.data&&Ca(e),e=e._next},e.killTweensOf=function killTweensOf(t,e,r){for(var i=this.getTweensOf(t,r),n=i.length;n--;)Wt!==i[n]&&i[n].kill(t,e);return this},e.getTweensOf=function getTweensOf(e,r){for(var i,n=[],a=Pt(e),s=this._first,o=t(r);s;)s instanceof te?na(s._targets,a)&&(o?(!Wt||s._initted&&s._ts)&&s.globalTime(0)<=r&&s.globalTime(s.totalDuration())>r:!r||s.isActive())&&n.push(s):(i=s.getTweensOf(a,r)).length&&n.push.apply(n,i),s=s._next;return n},e.tweenTo=function tweenTo(t,e){e=e||{};var r,i=this,n=Ot(i,t),a=e.startAt,s=e.onStart,o=e.onStartParams,u=e.immediateRender,h=te.to(i,ta({ease:e.ease||\"none\",lazy:!1,immediateRender:!1,time:n,overwrite:\"auto\",duration:e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale())||q,onStart:function onStart(){if(i.pause(),!r){var t=e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale());h._dur!==t&&Ua(h,t,0,1).render(h._time,!0,!0),r=1}s&&s.apply(h,o||[])}},e));return u?h.render(0):h},e.tweenFromTo=function tweenFromTo(t,e,r){return this.tweenTo(e,ta({startAt:{time:Ot(this,t)}},r))},e.recent=function recent(){return this._recent},e.nextLabel=function nextLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t))},e.previousLabel=function previousLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t),1)},e.currentLabel=function currentLabel(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+q)},e.shiftChildren=function shiftChildren(t,e,r){void 0===r&&(r=0);var i,n=this._first,a=this.labels;for(t=la(t);n;)n._start>=r&&(n._start+=t,n._end+=t),n=n._next;if(e)for(i in a)a[i]>=r&&(a[i]+=t);return Da(this)},e.invalidate=function invalidate(t){var e=this._first;for(this._lock=0;e;)e.invalidate(t),e=e._next;return i.prototype.invalidate.call(this,t)},e.clear=function clear(t){void 0===t&&(t=!0);for(var e,r=this._first;r;)e=r._next,this.remove(r),r=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),Da(this)},e.totalDuration=function totalDuration(t){var e,r,i,n=0,a=this,s=a._last,o=X;if(arguments.length)return a.timeScale((a._repeat<0?a.duration():a.totalDuration())/(a.reversed()?-t:t));if(a._dirty){for(i=a.parent;s;)e=s._prev,s._dirty&&s.totalDuration(),o<(r=s._start)&&a._sort&&s._ts&&!a._lock?(a._lock=1,Na(a,s,r-s._delay,1)._lock=0):o=r,r<0&&s._ts&&(n-=r,(!i&&!a._dp||i&&i.smoothChildTiming)&&(a._start+=la(r/a._ts),a._time-=r,a._tTime-=r),a.shiftChildren(-r,!1,-Infinity),o=0),s._end>n&&s._ts&&(n=s._end),s=e;Ua(a,a===L&&a._time>n?a._time:n,1,1),a._dirty=0}return a._tDur},Timeline.updateRoot=function updateRoot(t){if(L._ts&&(qa(L,Ja(t,L)),f=It.frame),It.frame>=vt){vt+=N.autoSleep||120;var e=L._first;if((!e||!e._ts)&&N.autoSleep&&It._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||It.sleep()}}},Timeline}(qt);ta(Zt.prototype,{_lock:0,_hasPause:0,_forcing:0});function dc(t,e,i,n,a,o){var u,h,l,f;if(mt[t]&&!1!==(u=new mt[t]).init(a,u.rawVars?e[t]:function _processVars(t,e,i,n,a){if(s(t)&&(t=Gt(t,a,e,i,n)),!v(t)||t.style&&t.nodeType||$(t)||K(t))return r(t)?Gt(t,a,e,i,n):t;var o,u={};for(o in t)u[o]=Gt(t[o],a,e,i,n);return u}(e[t],n,a,o,i),i,n,o)&&(i._pt=h=new we(i._pt,a,t,0,1,u.render,u,0,u.priority),i!==d))for(l=i._ptLookup[i._targets.indexOf(a)],f=u._props.length;f--;)l[u._props[f]]=h;return u}function jc(t,r,e,i){var n,a,s=r.ease||i||\"power1.inOut\";if($(r))a=e[t]||(e[t]=[]),r.forEach(function(t,e){return a.push({t:e/(r.length-1)*100,v:t,e:s})});else for(n in r)a=e[n]||(e[n]=[]),\"ease\"===n||a.push({t:parseFloat(t),v:r[n],e:s})}var Wt,Ht,Jt=function _addPropTween(t,e,i,n,a,o,u,h,l,f){s(n)&&(n=n(a||0,t,o));var d,c=t[e],p=\"get\"!==i?i:s(c)?l?t[e.indexOf(\"set\")||!s(t[\"get\"+e.substr(3)])?e:\"get\"+e.substr(3)](l):t[e]():c,_=s(c)?l?ue:re:ee;if(r(n)&&(~n.indexOf(\"random(\")&&(n=rb(n)),\"=\"===n.charAt(1)&&(!(d=ma(p,n)+(_a(p)||0))&&0!==d||(n=d))),!f||p!==n||Ht)return isNaN(p*n)||\"\"===n?(c||e in t||S(e,n),function _addComplexStringPropTween(t,e,r,i,n,a,s){var o,u,h,l,f,d,c,p,_=new we(this._pt,t,e,0,1,ge,null,n),m=0,g=0;for(_.b=r,_.e=i,r+=\"\",(c=~(i+=\"\").indexOf(\"random(\"))&&(i=rb(i)),a&&(a(p=[r,i],t,e),r=p[0],i=p[1]),u=r.match(at)||[];o=at.exec(i);)l=o[0],f=i.substring(m,o.index),h?h=(h+1)%5:\"rgba(\"===f.substr(-5)&&(h=1),l!==u[g++]&&(d=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:\",\",s:d,c:\"=\"===l.charAt(1)?ma(d,l)-d:parseFloat(l)-d,m:h&&h<4?Math.round:0},m=at.lastIndex);return _.c=m<i.length?i.substring(m,i.length):\"\",_.fp=s,(st.test(i)||c)&&(_.e=0),this._pt=_}.call(this,t,e,p,n,_,h||N.stringFilter,l)):(d=new we(this._pt,t,e,+p||0,n-(p||0),\"boolean\"==typeof c?_e:ce,0,_),l&&(d.fp=l),u&&d.modifier(u,this,t),this._pt=d)},Qt=function _initTween(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_,m=t.vars,g=m.ease,v=m.startAt,y=m.immediateRender,T=m.lazy,b=m.onUpdate,x=m.runBackwards,k=m.yoyoEase,O=m.keyframes,M=m.autoRevert,C=t._dur,P=t._startAt,A=t._targets,D=t.parent,S=D&&\"nested\"===D.data?D.vars.targets:A,z=\"auto\"===t._overwrite&&!F,E=t.timeline;if(!E||O&&g||(g=\"none\"),t._ease=Vt(g,j.ease),t._yEase=k?jt(Vt(!0===k?g:k,j.ease)):0,k&&t._yoyo&&!t._repeat&&(k=t._yEase,t._yEase=t._ease,t._ease=k),t._from=!E&&!!m.runBackwards,!E||O&&!m.stagger){if(p=(l=A[0]?ha(A[0]).harness:0)&&m[l.prop],i=xa(m,ct),P&&(P._zTime<0&&P.progress(1),e<0&&x&&y&&!M?P.render(-1,!0):P.revert(x&&C?ft:lt),P._lazy=0),v){if(Ca(t._startAt=te.set(A,ta({data:\"isStart\",overwrite:!1,parent:D,immediateRender:!0,lazy:!P&&w(T),startAt:null,delay:0,onUpdate:b&&function(){return Dt(t,\"onUpdate\")},stagger:0},v))),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I||!y&&!M)&&t._startAt.revert(ft),y&&C&&e<=0&&r<=0)return void(e&&(t._zTime=e))}else if(x&&C&&!P)if(e&&(y=!1),a=ta({overwrite:!1,data:\"isFromStart\",lazy:y&&!P&&w(T),immediateRender:y,stagger:0,parent:D},i),p&&(a[l.prop]=p),Ca(t._startAt=te.set(A,a)),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I?t._startAt.revert(ft):t._startAt.render(-1,!0)),t._zTime=e,y){if(!e)return}else _initTween(t._startAt,q,q);for(t._pt=t._ptCache=0,T=C&&w(T)||T&&!C,n=0;n<A.length;n++){if(h=(o=A[n])._gsap||ga(A)[n]._gsap,t._ptLookup[n]=d={},_t[h.id]&&pt.length&&oa(),c=S===A?n:S.indexOf(o),l&&!1!==(f=new l).init(o,p||i,t,c,S)&&(t._pt=s=new we(t._pt,o,f.name,0,1,f.render,f,0,f.priority),f._props.forEach(function(t){d[t]=s}),f.priority&&(u=1)),!l||p)for(a in i)mt[a]&&(f=dc(a,i,t,c,o,S))?f.priority&&(u=1):d[a]=s=Jt.call(t,o,a,\"get\",i[a],c,S,0,m.stringFilter);t._op&&t._op[n]&&t.kill(o,t._op[n]),z&&t._pt&&(Wt=t,L.killTweensOf(o,d,t.globalTime(e)),_=!t.parent,Wt=0),t._pt&&T&&(_t[h.id]=1)}u&&be(t),t._onInit&&t._onInit(t)}t._onUpdate=b,t._initted=(!t._op||t._pt)&&!_,O&&e<=0&&E.render(X,!0,!0)},Gt=function _parseFuncOrString(t,e,i,n,a){return s(t)?t.call(e,i,n,a):r(t)&&~t.indexOf(\"random(\")?rb(t):t},Kt=Tt+\"repeat,repeatDelay,yoyo,repeatRefresh,yoyoEase,autoRevert\",$t={};ja(Kt+\",id,stagger,delay,duration,paused,scrollTrigger\",function(t){return $t[t]=1});var te=function(R){function Tween(e,r,i,n){var a;\"number\"==typeof r&&(i.duration=r,r=i,i=null);var s,o,u,h,l,f,d,c,p=(a=R.call(this,n?r:ya(r))||this).vars,_=p.duration,m=p.delay,g=p.immediateRender,b=p.stagger,x=p.overwrite,k=p.keyframes,O=p.defaults,M=p.scrollTrigger,C=p.yoyoEase,P=r.parent||L,A=($(e)||K(e)?t(e[0]):\"length\"in r)?[e]:Pt(e);if(a._targets=A.length?ga(A):T(\"GSAP target \"+e+\" not found. https://gsap.com\",!N.nullTargetWarn)||[],a._ptLookup=[],a._overwrite=x,k||b||y(_)||y(m)){if(r=a.vars,(s=a.timeline=new Zt({data:\"nested\",defaults:O||{},targets:P&&\"nested\"===P.data?P.vars.targets:A})).kill(),s.parent=s._dp=_assertThisInitialized(a),s._start=0,b||y(_)||y(m)){if(h=A.length,d=b&&hb(b),v(b))for(l in b)~Kt.indexOf(l)&&((c=c||{})[l]=b[l]);for(o=0;o<h;o++)(u=xa(r,$t)).stagger=0,C&&(u.yoyoEase=C),c&&bt(u,c),f=A[o],u.duration=+Gt(_,_assertThisInitialized(a),o,f,A),u.delay=(+Gt(m,_assertThisInitialized(a),o,f,A)||0)-a._delay,!b&&1===h&&u.delay&&(a._delay=m=u.delay,a._start+=m,u.delay=0),s.to(f,u,d?d(o,f,A):0),s._ease=Bt.none;s.duration()?_=m=0:a.timeline=0}else if(k){ya(ta(s.vars.defaults,{ease:\"none\"})),s._ease=Vt(k.ease||r.ease||\"none\");var D,S,z,E=0;if($(k))k.forEach(function(t){return s.to(A,t,\">\")}),s.duration();else{for(l in u={},k)\"ease\"===l||\"easeEach\"===l||jc(l,k[l],u,k.easeEach);for(l in u)for(D=u[l].sort(function(t,e){return t.t-e.t}),o=E=0;o<D.length;o++)(z={ease:(S=D[o]).e,duration:(S.t-(o?D[o-1].t:0))/100*_})[l]=S.v,s.to(A,z,E),E+=z.duration;s.duration()<_&&s.to({},{duration:_-s.duration()})}}_||a.duration(_=s.duration())}else a.timeline=0;return!0!==x||F||(Wt=_assertThisInitialized(a),L.killTweensOf(A),Wt=0),Na(P,_assertThisInitialized(a),i),r.reversed&&a.reverse(),r.paused&&a.paused(!0),(g||!_&&!k&&a._start===la(P._time)&&w(g)&&function _hasNoPausedAncestors(t){return!t||t._ts&&_hasNoPausedAncestors(t.parent)}(_assertThisInitialized(a))&&\"nested\"!==P.data)&&(a._tTime=-q,a.render(Math.max(0,-m)||0)),M&&Oa(_assertThisInitialized(a),M),a}_inheritsLoose(Tween,R);var e=Tween.prototype;return e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d=this._time,c=this._tDur,p=this._dur,_=t<0,m=c-q<t&&!_?c:t<q?0:t;if(p){if(m!==this._tTime||!t||r||!this._initted&&this._tTime||this._startAt&&this._zTime<0!=_||this._lazy){if(i=m,l=this.timeline,this._repeat){if(s=p+this._rDelay,this._repeat<-1&&_)return this.totalTime(100*s+t,e,r);if(i=la(m%s),m===c?(a=this._repeat,i=p):(a=~~(o=la(m/s)))&&a===o?(i=p,a--):p<i&&(i=p),(u=this._yoyo&&1&a)&&(f=this._yEase,i=p-i),o=wt(this._tTime,s),i===d&&!r&&this._initted&&a===o)return this._tTime=m,this;a!==o&&(l&&this._yEase&&Tb(l,u),this.vars.repeatRefresh&&!u&&!this._lock&&i!==s&&this._initted&&(this._lock=r=1,this.render(la(s*a),!0).invalidate()._lock=0))}if(!this._initted){if(Pa(this,_?t:i,r,e,m))return this._tTime=0,this;if(!(d===this._time||r&&this.vars.repeatRefresh&&a!==o))return this;if(p!==this._dur)return this.render(t,e,r)}if(this._tTime=m,this._time=i,!this._act&&this._ts&&(this._act=1,this._lazy=0),this.ratio=h=(f||this._ease)(i/p),this._from&&(this.ratio=h=1-h),!d&&m&&!e&&!o&&(Dt(this,\"onStart\"),this._tTime!==m))return this;for(n=this._pt;n;)n.r(h,n.d),n=n._next;l&&l.render(t<0?t:l._dur*l._ease(i/this._dur),e,r)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(_&&Fa(this,t,0,r),Dt(this,\"onUpdate\")),this._repeat&&a!==o&&this.vars.onRepeat&&!e&&this.parent&&Dt(this,\"onRepeat\"),m!==this._tDur&&m||this._tTime!==m||(_&&!this._onUpdate&&Fa(this,t,0,!0),!t&&p||!(m===this._tDur&&0<this._ts||!m&&this._ts<0)||Ca(this,1),e||_&&!d||!(m||d||u)||(Dt(this,m===c?\"onComplete\":\"onReverseComplete\",!0),!this._prom||m<c&&0<this.timeScale()||this._prom()))}}else!function _renderZeroDurationTween(t,e,r,i){var n,a,s,o=t.ratio,u=e<0||!e&&(!t._start&&function _parentPlayheadIsBeforeStart(t){var e=t.parent;return e&&e._ts&&e._initted&&!e._lock&&(e.rawTime()<0||_parentPlayheadIsBeforeStart(e))}(t)&&(t._initted||!xt(t))||(t._ts<0||t._dp._ts<0)&&!xt(t))?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=Mt(0,t._tDur,e),a=wt(l,h),t._yoyo&&1&a&&(u=1-u),a!==wt(t._tTime,h)&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||I||i||t._zTime===q||!e&&t._zTime){if(!t._initted&&Pa(t,e,i,r,l))return;for(s=t._zTime,t._zTime=e||(r?q:0),r=r||e&&!s,t.ratio=u,t._from&&(u=1-u),t._time=0,t._tTime=l,n=t._pt;n;)n.r(u,n.d),n=n._next;e<0&&Fa(t,e,0,!0),t._onUpdate&&!r&&Dt(t,\"onUpdate\"),l&&t._repeat&&!r&&t.parent&&Dt(t,\"onRepeat\"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&Ca(t,1),r||I||(Dt(t,u?\"onComplete\":\"onReverseComplete\",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,r);return this},e.targets=function targets(){return this._targets},e.invalidate=function invalidate(t){return t&&this.vars.runBackwards||(this._startAt=0),this._pt=this._op=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(t),R.prototype.invalidate.call(this,t)},e.resetTo=function resetTo(t,e,r,i,n){c||It.wake(),this._ts||this.play();var a,s=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||Qt(this,s),a=this._ease(s/this._dur),function _updatePropTweens(t,e,r,i,n,a,s,o){var u,h,l,f,d=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!d)for(d=t._ptCache[e]=[],l=t._ptLookup,f=t._targets.length;f--;){if((u=l[f][e])&&u.d&&u.d._pt)for(u=u.d._pt;u&&u.p!==e&&u.fp!==e;)u=u._next;if(!u)return Ht=1,t.vars[e]=\"+=0\",Qt(t,s),Ht=0,o?T(e+\" not eligible for reset\"):1;d.push(u)}for(f=d.length;f--;)(u=(h=d[f])._pt||h).s=!i&&0!==i||n?u.s+(i||0)+a*u.c:i,u.c=r-u.s,h.e&&(h.e=ka(r)+_a(h.e)),h.b&&(h.b=u.s+_a(h.b))}(this,t,e,r,i,a,s,n)?this.resetTo(t,e,r,i,1):(La(this,0),this.parent||Aa(this._dp,this,\"_first\",\"_last\",this._dp._sort?\"_start\":0),this.render(0))},e.kill=function kill(t,e){if(void 0===e&&(e=\"all\"),!(t||e&&\"all\"!==e))return this._lazy=this._pt=0,this.parent?wb(this):this.scrollTrigger&&this.scrollTrigger.kill(!!I),this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Wt&&!0!==Wt.vars.overwrite)._first||wb(this),this.parent&&i!==this.timeline.totalDuration()&&Ua(this,this._dur*this.timeline._tDur/i,0,1),this}var n,a,s,o,u,h,l,f=this._targets,d=t?Pt(t):f,c=this._ptLookup,p=this._pt;if((!e||\"all\"===e)&&function _arraysMatch(t,e){for(var r=t.length,i=r===e.length;i&&r--&&t[r]===e[r];);return r<0}(f,d))return\"all\"===e&&(this._pt=0),wb(this);for(n=this._op=this._op||[],\"all\"!==e&&(r(e)&&(u={},ja(e,function(t){return u[t]=1}),e=u),e=function _addAliasesToVars(t,e){var r,i,n,a,s=t[0]?ha(t[0]).harness:0,o=s&&s.aliases;if(!o)return e;for(i in r=bt({},e),o)if(i in r)for(n=(a=o[i].split(\",\")).length;n--;)r[a[n]]=r[i];return r}(f,e)),l=f.length;l--;)if(~d.indexOf(f[l]))for(u in a=c[l],\"all\"===e?(n[l]=e,o=a,s={}):(s=n[l]=n[l]||{},o=e),o)(h=a&&a[u])&&(\"kill\"in h.d&&!0!==h.d.kill(u)||Ba(this,h,\"_pt\"),delete a[u]),\"all\"!==s&&(s[u]=1);return this._initted&&!this._pt&&p&&wb(this),this},Tween.to=function to(t,e,r){return new Tween(t,e,r)},Tween.from=function from(t,e){return Ya(1,arguments)},Tween.delayedCall=function delayedCall(t,e,r,i){return new Tween(e,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:e,onReverseComplete:e,onCompleteParams:r,onReverseCompleteParams:r,callbackScope:i})},Tween.fromTo=function fromTo(t,e,r){return Ya(2,arguments)},Tween.set=function set(t,e){return e.duration=0,e.repeatDelay||(e.repeat=0),new Tween(t,e)},Tween.killTweensOf=function killTweensOf(t,e,r){return L.killTweensOf(t,e,r)},Tween}(qt);ta(te.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),ja(\"staggerTo,staggerFrom,staggerFromTo\",function(r){te[r]=function(){var t=new Zt,e=Ct.call(arguments,0);return e.splice(\"staggerFromTo\"===r?5:4,0,0),t[r].apply(t,e)}});function rc(t,e,r){return t.setAttribute(e,r)}function zc(t,e,r,i){i.mSet(t,e,i.m.call(i.tween,r,i.mt),i)}var ee=function _setterPlain(t,e,r){return t[e]=r},re=function _setterFunc(t,e,r){return t[e](r)},ue=function _setterFuncWithParam(t,e,r,i){return t[e](i.fp,r)},le=function _getSetter(t,e){return s(t[e])?re:u(t[e])&&t.setAttribute?rc:ee},ce=function _renderPlain(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},_e=function _renderBoolean(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},ge=function _renderComplexString(t,e){var r=e._pt,i=\"\";if(!t&&e.b)i=e.b;else if(1===t&&e.e)i=e.e;else{for(;r;)i=r.p+(r.m?r.m(r.s+r.c*t):Math.round(1e4*(r.s+r.c*t))/1e4)+i,r=r._next;i+=e.c}e.set(e.t,e.p,i,e)},ve=function _renderPropTweens(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},ye=function _addPluginModifier(t,e,r,i){for(var n,a=this._pt;a;)n=a._next,a.p===i&&a.modifier(t,e,r),a=n},Te=function _killPropTweensOf(t){for(var e,r,i=this._pt;i;)r=i._next,i.p===t&&!i.op||i.op===t?Ba(this,i,\"_pt\"):i.dep||(e=1),i=r;return!e},be=function _sortPropTweensByPriority(t){for(var e,r,i,n,a=t._pt;a;){for(e=a._next,r=i;r&&r.pr>a.pr;)r=r._next;(a._prev=r?r._prev:n)?a._prev._next=a:i=a,(a._next=r)?r._prev=a:n=a,a=e}t._pt=i},we=(PropTween.prototype.modifier=function modifier(t,e,r){this.mSet=this.mSet||this.set,this.set=zc,this.m=t,this.mt=r,this.tween=e},PropTween);function PropTween(t,e,r,i,n,a,s,o,u){this.t=e,this.s=i,this.c=n,this.p=r,this.r=a||ce,this.d=s||this,this.set=o||ee,this.pr=u||0,(this._next=t)&&(t._prev=this)}ja(Tt+\"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger\",function(t){return ct[t]=1}),ht.TweenMax=ht.TweenLite=te,ht.TimelineLite=ht.TimelineMax=Zt,L=new Zt({sortChildren:!1,defaults:j,autoRemoveChildren:!0,id:\"root\",smoothChildTiming:!0}),N.stringFilter=Ib;function Hc(t){return(Oe[t]||Me).map(function(t){return t()})}function Ic(){var t=Date.now(),o=[];2<t-Ce&&(Hc(\"matchMediaInit\"),ke.forEach(function(t){var e,r,i,n,a=t.queries,s=t.conditions;for(r in a)(e=h.matchMedia(a[r]).matches)&&(i=1),e!==s[r]&&(s[r]=e,n=1);n&&(t.revert(),i&&o.push(t))}),Hc(\"matchMediaRevert\"),o.forEach(function(e){return e.onMatch(e,function(t){return e.add(null,t)})}),Ce=t,Hc(\"matchMedia\"))}var xe,ke=[],Oe={},Me=[],Ce=0,Pe=0,De=((xe=Context.prototype).add=function add(t,i,n){function Jw(){var t,e=l,r=a.selector;return e&&e!==a&&e.data.push(a),n&&(a.selector=fb(n)),l=a,t=i.apply(a,arguments),s(t)&&a._r.push(t),l=e,a.selector=r,a.isReverted=!1,t}s(t)&&(n=i,i=t,t=s);var a=this;return a.last=Jw,t===s?Jw(a,function(t){return a.add(null,t)}):t?a[t]=Jw:Jw},xe.ignore=function ignore(t){var e=l;l=null,t(this),l=e},xe.getTweens=function getTweens(){var e=[];return this.data.forEach(function(t){return t instanceof Context?e.push.apply(e,t.getTweens()):t instanceof te&&!(t.parent&&\"nested\"===t.parent.data)&&e.push(t)}),e},xe.clear=function clear(){this._r.length=this.data.length=0},xe.kill=function kill(i,t){var n=this;if(i?function(){for(var t,e=n.getTweens(),r=n.data.length;r--;)\"isFlip\"===(t=n.data[r]).data&&(t.revert(),t.getChildren(!0,!0,!1).forEach(function(t){return e.splice(e.indexOf(t),1)}));for(e.map(function(t){return{g:t._dur||t._delay||t._sat&&!t._sat.vars.immediateRender?t.globalTime(0):-1/0,t:t}}).sort(function(t,e){return e.g-t.g||-1/0}).forEach(function(t){return t.t.revert(i)}),r=n.data.length;r--;)(t=n.data[r])instanceof Zt?\"nested\"!==t.data&&(t.scrollTrigger&&t.scrollTrigger.revert(),t.kill()):t instanceof te||!t.revert||t.revert(i);n._r.forEach(function(t){return t(i,n)}),n.isReverted=!0}():this.data.forEach(function(t){return t.kill&&t.kill()}),this.clear(),t)for(var e=ke.length;e--;)ke[e].id===this.id&&ke.splice(e,1)},xe.revert=function revert(t){this.kill(t||{})},Context);function Context(t,e){this.selector=e&&fb(e),this.data=[],this._r=[],this.isReverted=!1,this.id=Pe++,t&&this.add(t)}var Se,Ee=((Se=MatchMedia.prototype).add=function add(t,e,r){v(t)||(t={matches:t});var i,n,a,s=new De(0,r||this.scope),o=s.conditions={};for(n in l&&!s.selector&&(s.selector=l.selector),this.contexts.push(s),e=s.add(\"onMatch\",e),s.queries=t)\"all\"===n?a=1:(i=h.matchMedia(t[n]))&&(ke.indexOf(s)<0&&ke.push(s),(o[n]=i.matches)&&(a=1),i.addListener?i.addListener(Ic):i.addEventListener(\"change\",Ic));return a&&e(s,function(t){return s.add(null,t)}),this},Se.revert=function revert(t){this.kill(t||{})},Se.kill=function kill(e){this.contexts.forEach(function(t){return t.kill(e,!0)})},MatchMedia);function MatchMedia(t){this.contexts=[],this.scope=t,l&&l.data.push(this)}var Re={registerPlugin:function registerPlugin(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];e.forEach(function(t){return zb(t)})},timeline:function timeline(t){return new Zt(t)},getTweensOf:function getTweensOf(t,e){return L.getTweensOf(t,e)},getProperty:function getProperty(i,t,e,n){r(i)&&(i=Pt(i)[0]);var a=ha(i||{}).get,s=e?sa:ra;return\"native\"===e&&(e=\"\"),i?t?s((mt[t]&&mt[t].get||a)(i,t,e,n)):function(t,e,r){return s((mt[t]&&mt[t].get||a)(i,t,e,r))}:i},quickSetter:function quickSetter(r,e,i){if(1<(r=Pt(r)).length){var n=r.map(function(t){return Fe.quickSetter(t,e,i)}),a=n.length;return function(t){for(var e=a;e--;)n[e](t)}}r=r[0]||{};var s=mt[e],o=ha(r),u=o.harness&&(o.harness.aliases||{})[e]||e,h=s?function(t){var e=new s;d._pt=0,e.init(r,i?t+i:t,d,0,[r]),e.render(1,e),d._pt&&ve(1,d)}:o.set(r,u);return s?h:function(t){return h(r,u,i?t+i:t,o,1)}},quickTo:function quickTo(t,i,e){function by(t,e,r){return n.resetTo(i,t,e,r)}var r,n=Fe.to(t,ta(((r={})[i]=\"+=0.1\",r.paused=!0,r.stagger=0,r),e||{}));return by.tween=n,by},isTweening:function isTweening(t){return 0<L.getTweensOf(t,!0).length},defaults:function defaults(t){return t&&t.ease&&(t.ease=Vt(t.ease,j.ease)),wa(j,t||{})},config:function config(t){return wa(N,t||{})},registerEffect:function registerEffect(t){var i=t.name,n=t.effect,e=t.plugins,a=t.defaults,r=t.extendTimeline;(e||\"\").split(\",\").forEach(function(t){return t&&!mt[t]&&!ht[t]&&T(i+\" effect requires \"+t+\" plugin.\")}),gt[i]=function(t,e,r){return n(Pt(t),ta(e||{},a),r)},r&&(Zt.prototype[i]=function(t,e,r){return this.add(gt[i](t,v(e)?e:(r=e)&&{},this),r)})},registerEase:function registerEase(t,e){Bt[t]=Vt(e)},parseEase:function parseEase(t,e){return arguments.length?Vt(t,e):Bt},getById:function getById(t){return L.getById(t)},exportRoot:function exportRoot(t,e){void 0===t&&(t={});var r,i,n=new Zt(t);for(n.smoothChildTiming=w(t.smoothChildTiming),L.remove(n),n._dp=0,n._time=n._tTime=L._time,r=L._first;r;)i=r._next,!e&&!r._dur&&r instanceof te&&r.vars.onComplete===r._targets[0]||Na(n,r,r._start-r._delay),r=i;return Na(L,n,0),n},context:function context(t,e){return t?new De(t,e):l},matchMedia:function matchMedia(t){return new Ee(t)},matchMediaRefresh:function matchMediaRefresh(){return ke.forEach(function(t){var e,r,i=t.conditions;for(r in i)i[r]&&(i[r]=!1,e=1);e&&t.revert()})||Ic()},addEventListener:function addEventListener(t,e){var r=Oe[t]||(Oe[t]=[]);~r.indexOf(e)||r.push(e)},removeEventListener:function removeEventListener(t,e){var r=Oe[t],i=r&&r.indexOf(e);0<=i&&r.splice(i,1)},utils:{wrap:function wrap(e,t,r){var i=t-e;return $(e)?ob(e,wrap(0,e.length),t):Za(r,function(t){return(i+(t-e)%i)%i+e})},wrapYoyo:function wrapYoyo(e,t,r){var i=t-e,n=2*i;return $(e)?ob(e,wrapYoyo(0,e.length-1),t):Za(r,function(t){return e+(i<(t=(n+(t-e)%n)%n||0)?n-t:t)})},distribute:hb,random:kb,snap:jb,normalize:function normalize(t,e,r){return At(t,e,0,1,r)},getUnit:_a,clamp:function clamp(e,r,t){return Za(t,function(t){return Mt(e,r,t)})},splitColor:Db,toArray:Pt,selector:fb,mapRange:At,pipe:function pipe(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return function(t){return e.reduce(function(t,e){return e(t)},t)}},unitize:function unitize(e,r){return function(t){return e(parseFloat(t))+(r||_a(t))}},interpolate:function interpolate(e,i,t,n){var a=isNaN(e+i)?0:function(t){return(1-t)*e+t*i};if(!a){var s,o,u,h,l,f=r(e),d={};if(!0===t&&(n=1)&&(t=null),f)e={p:e},i={p:i};else if($(e)&&!$(i)){for(u=[],h=e.length,l=h-2,o=1;o<h;o++)u.push(interpolate(e[o-1],e[o]));h--,a=function func(t){t*=h;var e=Math.min(l,~~t);return u[e](t-e)},t=i}else n||(e=bt($(e)?[]:{},e));if(!u){for(s in i)Jt.call(d,e,s,\"get\",i[s]);a=function func(t){return ve(t,d)||(f?e.p:e)}}}return Za(t,a)},shuffle:gb},install:R,effects:gt,ticker:It,updateRoot:Zt.updateRoot,plugins:mt,globalTimeline:L,core:{PropTween:we,globals:U,Tween:te,Timeline:Zt,Animation:qt,getCache:ha,_removeLinkedListItem:Ba,reverting:function reverting(){return I},context:function context(t){return t&&l&&(l.data.push(t),t._ctx=l),l},suppressOverwrites:function suppressOverwrites(t){return F=t}}};ja(\"to,from,fromTo,delayedCall,set,killTweensOf\",function(t){return Re[t]=te[t]}),It.add(Zt.updateRoot),d=Re.to({},{duration:0});function Mc(t,e){for(var r=t._pt;r&&r.p!==e&&r.op!==e&&r.fp!==e;)r=r._next;return r}function Oc(t,a){return{name:t,headless:1,rawVars:1,init:function init(t,n,e){e._onInit=function(t){var e,i;if(r(n)&&(e={},ja(n,function(t){return e[t]=1}),n=e),a){for(i in e={},n)e[i]=a(n[i]);n=e}!function _addModifiers(t,e){var r,i,n,a=t._targets;for(r in e)for(i=a.length;i--;)(n=(n=t._ptLookup[i][r])&&n.d)&&(n._pt&&(n=Mc(n,r)),n&&n.modifier&&n.modifier(e[r],t,a[i],r))}(t,n)}}}}var Fe=Re.registerPlugin({name:\"attr\",init:function init(t,e,r,i,n){var a,s,o;for(a in this.tween=r,e)o=t.getAttribute(a)||\"\",(s=this.add(t,\"setAttribute\",(o||0)+\"\",e[a],i,n,0,0,a)).op=a,s.b=o,this._props.push(a)},render:function render(t,e){for(var r=e._pt;r;)I?r.set(r.t,r.p,r.b,r):r.r(t,r.d),r=r._next}},{name:\"endArray\",headless:1,init:function init(t,e){for(var r=e.length;r--;)this.add(t,r,t[r]||0,e[r],0,0,0,0,0,1)}},Oc(\"roundProps\",ib),Oc(\"modifiers\"),Oc(\"snap\",jb))||Re;te.version=Zt.version=Fe.version=\"3.14.2\",o=1,x()&&Lt();function yd(t,e){return e.set(e.t,e.p,Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function zd(t,e){return e.set(e.t,e.p,1===t?e.e:Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function Ad(t,e){return e.set(e.t,e.p,t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Bd(t,e){return e.set(e.t,e.p,1===t?e.e:t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Cd(t,e){var r=e.s+e.c*t;e.set(e.t,e.p,~~(r+(r<0?-.5:.5))+e.u,e)}function Dd(t,e){return e.set(e.t,e.p,t?e.e:e.b,e)}function Ed(t,e){return e.set(e.t,e.p,1!==t?e.b:e.e,e)}function Fd(t,e,r){return t.style[e]=r}function Gd(t,e,r){return t.style.setProperty(e,r)}function Hd(t,e,r){return t._gsap[e]=r}function Id(t,e,r){return t._gsap.scaleX=t._gsap.scaleY=r}function Jd(t,e,r,i,n){var a=t._gsap;a.scaleX=a.scaleY=r,a.renderTransform(n,a)}function Kd(t,e,r,i,n){var a=t._gsap;a[e]=r,a.renderTransform(n,a)}function Nd(t,e){var r=this,i=this.target,n=i.style,a=i._gsap;if(t in hr&&n){if(this.tfm=this.tfm||{},\"transform\"===t)return mr.transform.split(\",\").forEach(function(t){return Nd.call(r,t,e)});if(~(t=mr[t]||t).indexOf(\",\")?t.split(\",\").forEach(function(t){return r.tfm[t]=xr(i,t)}):this.tfm[t]=a.x?a[t]:xr(i,t),t===vr&&(this.tfm.zOrigin=a.zOrigin),0<=this.props.indexOf(gr))return;a.svg&&(this.svgo=i.getAttribute(\"data-svg-origin\"),this.props.push(vr,e,\"\")),t=gr}(n||e)&&this.props.push(t,e,n[t])}function Od(t){t.translate&&(t.removeProperty(\"translate\"),t.removeProperty(\"scale\"),t.removeProperty(\"rotate\"))}function Pd(){var t,e,r=this.props,i=this.target,n=i.style,a=i._gsap;for(t=0;t<r.length;t+=3)r[t+1]?2===r[t+1]?i[r[t]](r[t+2]):i[r[t]]=r[t+2]:r[t+2]?n[r[t]]=r[t+2]:n.removeProperty(\"--\"===r[t].substr(0,2)?r[t]:r[t].replace(cr,\"-$1\").toLowerCase());if(this.tfm){for(e in this.tfm)a[e]=this.tfm[e];a.svg&&(a.renderTransform(),i.setAttribute(\"data-svg-origin\",this.svgo||\"\")),(t=Ue())&&t.isStart||n[gr]||(Od(n),a.zOrigin&&n[vr]&&(n[vr]+=\" \"+a.zOrigin+\"px\",a.zOrigin=0,a.renderTransform()),a.uncache=1)}}function Qd(t,e){var r={target:t,props:[],revert:Pd,save:Nd};return t._gsap||Fe.core.getCache(t),e&&t.style&&t.nodeType&&e.split(\",\").forEach(function(t){return r.save(t)}),r}function Sd(t,e){var r=Le.createElementNS?Le.createElementNS((e||\"http://www.w3.org/1999/xhtml\").replace(/^https/,\"http\"),t):Le.createElement(t);return r&&r.style?r:Le.createElement(t)}function Td(t,e,r){var i=getComputedStyle(t);return i[e]||i.getPropertyValue(e.replace(cr,\"-$1\").toLowerCase())||i.getPropertyValue(e)||!r&&Td(t,Tr(e)||e,1)||\"\"}function Wd(){(function _windowExists(){return\"undefined\"!=typeof window})()&&window.document&&(Ie=window,Le=Ie.document,Ye=Le.documentElement,je=Sd(\"div\")||{style:{}},Sd(\"div\"),gr=Tr(gr),vr=gr+\"Origin\",je.style.cssText=\"border-width:0;line-height:0;position:absolute;padding:0\",Xe=!!Tr(\"perspective\"),Ue=Fe.core.reverting,Ne=1)}function Xd(t){var e,r=t.ownerSVGElement,i=Sd(\"svg\",r&&r.getAttribute(\"xmlns\")||\"http://www.w3.org/2000/svg\"),n=t.cloneNode(!0);n.style.display=\"block\",i.appendChild(n),Ye.appendChild(i);try{e=n.getBBox()}catch(t){}return i.removeChild(n),Ye.removeChild(i),e}function Yd(t,e){for(var r=e.length;r--;)if(t.hasAttribute(e[r]))return t.getAttribute(e[r])}function Zd(e){var r,i;try{r=e.getBBox()}catch(t){r=Xd(e),i=1}return r&&(r.width||r.height)||i||(r=Xd(e)),!r||r.width||r.x||r.y?r:{x:+Yd(e,[\"x\",\"cx\",\"x1\"])||0,y:+Yd(e,[\"y\",\"cy\",\"y1\"])||0,width:0,height:0}}function $d(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!Zd(t))}function _d(t,e){if(e){var r,i=t.style;e in hr&&e!==vr&&(e=gr),i.removeProperty?(\"ms\"!==(r=e.substr(0,2))&&\"webkit\"!==e.substr(0,6)||(e=\"-\"+e),i.removeProperty(\"--\"===r?e:e.replace(cr,\"-$1\").toLowerCase())):i.removeAttribute(e)}}function ae(t,e,r,i,n,a){var s=new we(t._pt,e,r,0,1,a?Ed:Dd);return(t._pt=s).b=i,s.e=n,t._props.push(r),s}function de(t,e,r,i){var n,a,s,o,u=parseFloat(r)||0,h=(r+\"\").trim().substr((u+\"\").length)||\"px\",l=je.style,f=pr.test(e),d=\"svg\"===t.tagName.toLowerCase(),c=(d?\"client\":\"offset\")+(f?\"Width\":\"Height\"),p=\"px\"===i,_=\"%\"===i;if(i===h||!u||br[i]||br[h])return u;if(\"px\"===h||p||(u=de(t,e,r,\"px\")),o=t.getCTM&&$d(t),(_||\"%\"===h)&&(hr[e]||~e.indexOf(\"adius\")))return n=o?t.getBBox()[f?\"width\":\"height\"]:t[c],ka(_?u/n*100:u/100*n);if(l[f?\"width\":\"height\"]=100+(p?h:i),a=\"rem\"!==i&&~e.indexOf(\"adius\")||\"em\"===i&&t.appendChild&&!d?t:t.parentNode,o&&(a=(t.ownerSVGElement||{}).parentNode),a&&a!==Le&&a.appendChild||(a=Le.body),(s=a._gsap)&&_&&s.width&&f&&s.time===It.time&&!s.uncache)return ka(u/s.width*100);if(!_||\"height\"!==e&&\"width\"!==e)!_&&\"%\"!==h||wr[Td(a,\"display\")]||(l.position=Td(t,\"position\")),a===t&&(l.position=\"static\"),a.appendChild(je),n=je[c],a.removeChild(je),l.position=\"absolute\";else{var m=t.style[e];t.style[e]=100+i,n=t[c],m?t.style[e]=m:_d(t,e)}return f&&_&&((s=ha(a)).time=It.time,s.width=a[c]),ka(p?n*u/100:n&&u?100/n*u:0)}function fe(t,e,r,i){if(!r||\"none\"===r){var n=Tr(e,t,1),a=n&&Td(t,n,1);a&&a!==r?(e=n,r=a):\"borderColor\"===e&&(r=Td(t,\"borderTopColor\"))}var s,o,u,h,l,f,d,c,p,_,m,g=new we(this._pt,t.style,e,0,1,ge),v=0,y=0;if(g.b=r,g.e=i,r+=\"\",\"var(--\"===(i+=\"\").substring(0,6)&&(i=Td(t,i.substring(4,i.indexOf(\")\")))),\"auto\"===i&&(f=t.style[e],t.style[e]=i,i=Td(t,e)||i,f?t.style[e]=f:_d(t,e)),Ib(s=[r,i]),i=s[1],u=(r=s[0]).match(nt)||[],(i.match(nt)||[]).length){for(;o=nt.exec(i);)d=o[0],p=i.substring(v,o.index),l?l=(l+1)%5:\"rgba(\"!==p.substr(-5)&&\"hsla(\"!==p.substr(-5)||(l=1),d!==(f=u[y++]||\"\")&&(h=parseFloat(f)||0,m=f.substr((h+\"\").length),\"=\"===d.charAt(1)&&(d=ma(h,d)+m),c=parseFloat(d),_=d.substr((c+\"\").length),v=nt.lastIndex-_.length,_||(_=_||N.units[e]||m,v===i.length&&(i+=_,g.e+=_)),m!==_&&(h=de(t,e,f,_)||0),g._pt={_next:g._pt,p:p||1===y?p:\",\",s:h,c:c-h,m:l&&l<4||\"zIndex\"===e?Math.round:0});g.c=v<i.length?i.substring(v,i.length):\"\"}else g.r=\"display\"===e&&\"none\"===i?Ed:Dd;return st.test(i)&&(g.e=0),this._pt=g}function he(t){var e=t.split(\" \"),r=e[0],i=e[1]||\"50%\";return\"top\"!==r&&\"bottom\"!==r&&\"left\"!==i&&\"right\"!==i||(t=r,r=i,i=t),e[0]=kr[r]||r,e[1]=kr[i]||i,e.join(\" \")}function ie(t,e){if(e.tween&&e.tween._time===e.tween._dur){var r,i,n,a=e.t,s=a.style,o=e.u,u=a._gsap;if(\"all\"===o||!0===o)s.cssText=\"\",i=1;else for(n=(o=o.split(\",\")).length;-1<--n;)r=o[n],hr[r]&&(i=1,r=\"transformOrigin\"===r?vr:gr),_d(a,r);i&&(_d(a,gr),u&&(u.svg&&a.removeAttribute(\"transform\"),s.scale=s.rotate=s.translate=\"none\",Pr(a,1),u.uncache=1,Od(s)))}}function me(t){return\"matrix(1, 0, 0, 1, 0, 0)\"===t||\"none\"===t||!t}function ne(t){var e=Td(t,gr);return me(e)?Mr:e.substr(7).match(it).map(ka)}function oe(t,e){var r,i,n,a,s=t._gsap||ha(t),o=t.style,u=ne(t);return s.svg&&t.getAttribute(\"transform\")?\"1,0,0,1,0,0\"===(u=[(n=t.transform.baseVal.consolidate().matrix).a,n.b,n.c,n.d,n.e,n.f]).join(\",\")?Mr:u:(u!==Mr||t.offsetParent||t===Ye||s.svg||(n=o.display,o.display=\"block\",(r=t.parentNode)&&(t.offsetParent||t.getBoundingClientRect().width)||(a=1,i=t.nextElementSibling,Ye.appendChild(t)),u=ne(t),n?o.display=n:_d(t,\"display\"),a&&(i?r.insertBefore(t,i):r?r.appendChild(t):Ye.removeChild(t))),e&&6<u.length?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)}function pe(t,e,r,i,n,a){var s,o,u,h=t._gsap,l=n||oe(t,!0),f=h.xOrigin||0,d=h.yOrigin||0,c=h.xOffset||0,p=h.yOffset||0,_=l[0],m=l[1],g=l[2],v=l[3],y=l[4],T=l[5],b=e.split(\" \"),w=parseFloat(b[0])||0,x=parseFloat(b[1])||0;r?l!==Mr&&(o=_*v-m*g)&&(u=w*(-m/o)+x*(_/o)-(_*T-m*y)/o,w=w*(v/o)+x*(-g/o)+(g*T-v*y)/o,x=u):(w=(s=Zd(t)).x+(~b[0].indexOf(\"%\")?w/100*s.width:w),x=s.y+(~(b[1]||b[0]).indexOf(\"%\")?x/100*s.height:x)),i||!1!==i&&h.smooth?(y=w-f,T=x-d,h.xOffset=c+(y*_+T*g)-y,h.yOffset=p+(y*m+T*v)-T):h.xOffset=h.yOffset=0,h.xOrigin=w,h.yOrigin=x,h.smooth=!!i,h.origin=e,h.originIsAbsolute=!!r,t.style[vr]=\"0px 0px\",a&&(ae(a,h,\"xOrigin\",f,w),ae(a,h,\"yOrigin\",d,x),ae(a,h,\"xOffset\",c,h.xOffset),ae(a,h,\"yOffset\",p,h.yOffset)),t.setAttribute(\"data-svg-origin\",w+\" \"+x)}function se(t,e,r){var i=_a(e);return ka(parseFloat(e)+parseFloat(de(t,\"x\",r+\"px\",i)))+i}function ze(t,e,i,n,a){var s,o,u=360,h=r(a),l=parseFloat(a)*(h&&~a.indexOf(\"rad\")?lr:1)-n,f=n+l+\"deg\";return h&&(\"short\"===(s=a.split(\"_\")[1])&&(l%=u)!==l%180&&(l+=l<0?u:-u),\"cw\"===s&&l<0?l=(l+36e9)%u-~~(l/u)*u:\"ccw\"===s&&0<l&&(l=(l-36e9)%u-~~(l/u)*u)),t._pt=o=new we(t._pt,e,i,n,l,zd),o.e=f,o.u=\"deg\",t._props.push(i),o}function Ae(t,e){for(var r in e)t[r]=e[r];return t}function Be(t,e,r){var i,n,a,s,o,u,h,l=Ae({},r._gsap),f=r.style;for(n in l.svg?(a=r.getAttribute(\"transform\"),r.setAttribute(\"transform\",\"\"),f[gr]=e,i=Pr(r,1),_d(r,gr),r.setAttribute(\"transform\",a)):(a=getComputedStyle(r)[gr],f[gr]=e,i=Pr(r,1),f[gr]=a),hr)(a=l[n])!==(s=i[n])&&\"perspective,force3D,transformOrigin,svgOrigin\".indexOf(n)<0&&(o=_a(a)!==(h=_a(s))?de(r,n,a,h):parseFloat(a),u=parseFloat(s),t._pt=new we(t._pt,i,n,o,u-o,yd),t._pt.u=h||0,t._props.push(n));Ae(i,l)}var Ie,Le,Ye,Ne,je,Ve,Ue,Xe,qe=Bt.Power0,Ze=Bt.Power1,We=Bt.Power2,He=Bt.Power3,Je=Bt.Power4,Qe=Bt.Linear,Ge=Bt.Quad,Ke=Bt.Cubic,$e=Bt.Quart,tr=Bt.Quint,er=Bt.Strong,rr=Bt.Elastic,ir=Bt.Back,nr=Bt.SteppedEase,ar=Bt.Bounce,sr=Bt.Sine,or=Bt.Expo,ur=Bt.Circ,hr={},lr=180/Math.PI,fr=Math.PI/180,dr=Math.atan2,cr=/([A-Z])/g,pr=/(left|right|width|margin|padding|x)/i,_r=/[\\s,\\(]\\S/,mr={autoAlpha:\"opacity,visibility\",scale:\"scaleX,scaleY\",alpha:\"opacity\"},gr=\"transform\",vr=gr+\"Origin\",yr=\"O,Moz,ms,Ms,Webkit\".split(\",\"),Tr=function _checkPropPrefix(t,e,r){var i=(e||je).style,n=5;if(t in i&&!r)return t;for(t=t.charAt(0).toUpperCase()+t.substr(1);n--&&!(yr[n]+t in i););return n<0?null:(3===n?\"ms\":0<=n?yr[n]:\"\")+t},br={deg:1,rad:1,turn:1},wr={grid:1,flex:1},xr=function _get(t,e,r,i){var n;return Ne||Wd(),e in mr&&\"transform\"!==e&&~(e=mr[e]).indexOf(\",\")&&(e=e.split(\",\")[0]),hr[e]&&\"transform\"!==e?(n=Pr(t,i),n=\"transformOrigin\"!==e?n[e]:n.svg?n.origin:Ar(Td(t,vr))+\" \"+n.zOrigin+\"px\"):(n=t.style[e])&&\"auto\"!==n&&!i&&!~(n+\"\").indexOf(\"calc(\")||(n=Or[e]&&Or[e](t,e,r)||Td(t,e)||ia(t,e)||(\"opacity\"===e?1:0)),r&&!~(n+\"\").trim().indexOf(\" \")?de(t,e,n,r)+r:n},kr={top:\"0%\",bottom:\"100%\",left:\"0%\",right:\"100%\",center:\"50%\"},Or={clearProps:function clearProps(t,e,r,i,n){if(\"isFromStart\"!==n.data){var a=t._pt=new we(t._pt,e,r,0,0,ie);return a.u=i,a.pr=-10,a.tween=n,t._props.push(r),1}}},Mr=[1,0,0,1,0,0],Cr={},Pr=function _parseTransform(t,e){var r=t._gsap||new Xt(t);if(\"x\"in r&&!e&&!r.uncache)return r;var i,n,a,s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x,k,O,M,C,P,A,D,S,z,E,R,F=t.style,I=r.scaleX<0,L=\"deg\",B=getComputedStyle(t),Y=Td(t,vr)||\"0\";return i=n=a=u=h=l=f=d=c=0,s=o=1,r.svg=!(!t.getCTM||!$d(t)),B.translate&&(\"none\"===B.translate&&\"none\"===B.scale&&\"none\"===B.rotate||(F[gr]=(\"none\"!==B.translate?\"translate3d(\"+(B.translate+\" 0 0\").split(\" \").slice(0,3).join(\", \")+\") \":\"\")+(\"none\"!==B.rotate?\"rotate(\"+B.rotate+\") \":\"\")+(\"none\"!==B.scale?\"scale(\"+B.scale.split(\" \").join(\",\")+\") \":\"\")+(\"none\"!==B[gr]?B[gr]:\"\")),F.scale=F.rotate=F.translate=\"none\"),m=oe(t,r.svg),r.svg&&(M=r.uncache?(C=t.getBBox(),Y=r.xOrigin-C.x+\"px \"+(r.yOrigin-C.y)+\"px\",\"\"):!e&&t.getAttribute(\"data-svg-origin\"),pe(t,M||Y,!!M||r.originIsAbsolute,!1!==r.smooth,m)),p=r.xOrigin||0,_=r.yOrigin||0,m!==Mr&&(T=m[0],b=m[1],w=m[2],x=m[3],i=k=m[4],n=O=m[5],6===m.length?(s=Math.sqrt(T*T+b*b),o=Math.sqrt(x*x+w*w),u=T||b?dr(b,T)*lr:0,(f=w||x?dr(w,x)*lr+u:0)&&(o*=Math.abs(Math.cos(f*fr))),r.svg&&(i-=p-(p*T+_*w),n-=_-(p*b+_*x))):(R=m[6],z=m[7],A=m[8],D=m[9],S=m[10],E=m[11],i=m[12],n=m[13],a=m[14],h=(g=dr(R,S))*lr,g&&(M=k*(v=Math.cos(-g))+A*(y=Math.sin(-g)),C=O*v+D*y,P=R*v+S*y,A=k*-y+A*v,D=O*-y+D*v,S=R*-y+S*v,E=z*-y+E*v,k=M,O=C,R=P),l=(g=dr(-w,S))*lr,g&&(v=Math.cos(-g),E=x*(y=Math.sin(-g))+E*v,T=M=T*v-A*y,b=C=b*v-D*y,w=P=w*v-S*y),u=(g=dr(b,T))*lr,g&&(M=T*(v=Math.cos(g))+b*(y=Math.sin(g)),C=k*v+O*y,b=b*v-T*y,O=O*v-k*y,T=M,k=C),h&&359.9<Math.abs(h)+Math.abs(u)&&(h=u=0,l=180-l),s=ka(Math.sqrt(T*T+b*b+w*w)),o=ka(Math.sqrt(O*O+R*R)),g=dr(k,O),f=2e-4<Math.abs(g)?g*lr:0,c=E?1/(E<0?-E:E):0),r.svg&&(M=t.getAttribute(\"transform\"),r.forceCSS=t.setAttribute(\"transform\",\"\")||!me(Td(t,gr)),M&&t.setAttribute(\"transform\",M))),90<Math.abs(f)&&Math.abs(f)<270&&(I?(s*=-1,f+=u<=0?180:-180,u+=u<=0?180:-180):(o*=-1,f+=f<=0?180:-180)),e=e||r.uncache,r.x=i-((r.xPercent=i&&(!e&&r.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-i)?-50:0)))?t.offsetWidth*r.xPercent/100:0)+\"px\",r.y=n-((r.yPercent=n&&(!e&&r.yPercent||(Math.round(t.offsetHeight/2)===Math.round(-n)?-50:0)))?t.offsetHeight*r.yPercent/100:0)+\"px\",r.z=a+\"px\",r.scaleX=ka(s),r.scaleY=ka(o),r.rotation=ka(u)+L,r.rotationX=ka(h)+L,r.rotationY=ka(l)+L,r.skewX=f+L,r.skewY=d+L,r.transformPerspective=c+\"px\",(r.zOrigin=parseFloat(Y.split(\" \")[2])||!e&&r.zOrigin||0)&&(F[vr]=Ar(Y)),r.xOffset=r.yOffset=0,r.force3D=N.force3D,r.renderTransform=r.svg?Fr:Xe?Rr:Dr,r.uncache=0,r},Ar=function _firstTwoOnly(t){return(t=t.split(\" \"))[0]+\" \"+t[1]},Dr=function _renderNon3DTransforms(t,e){e.z=\"0px\",e.rotationY=e.rotationX=\"0deg\",e.force3D=0,Rr(t,e)},Sr=\"0deg\",zr=\"0px\",Er=\") \",Rr=function _renderCSSTransforms(t,e){var r=e||this,i=r.xPercent,n=r.yPercent,a=r.x,s=r.y,o=r.z,u=r.rotation,h=r.rotationY,l=r.rotationX,f=r.skewX,d=r.skewY,c=r.scaleX,p=r.scaleY,_=r.transformPerspective,m=r.force3D,g=r.target,v=r.zOrigin,y=\"\",T=\"auto\"===m&&t&&1!==t||!0===m;if(v&&(l!==Sr||h!==Sr)){var b,w=parseFloat(h)*fr,x=Math.sin(w),k=Math.cos(w);w=parseFloat(l)*fr,b=Math.cos(w),a=se(g,a,x*b*-v),s=se(g,s,-Math.sin(w)*-v),o=se(g,o,k*b*-v+v)}_!==zr&&(y+=\"perspective(\"+_+Er),(i||n)&&(y+=\"translate(\"+i+\"%, \"+n+\"%) \"),!T&&a===zr&&s===zr&&o===zr||(y+=o!==zr||T?\"translate3d(\"+a+\", \"+s+\", \"+o+\") \":\"translate(\"+a+\", \"+s+Er),u!==Sr&&(y+=\"rotate(\"+u+Er),h!==Sr&&(y+=\"rotateY(\"+h+Er),l!==Sr&&(y+=\"rotateX(\"+l+Er),f===Sr&&d===Sr||(y+=\"skew(\"+f+\", \"+d+Er),1===c&&1===p||(y+=\"scale(\"+c+\", \"+p+Er),g.style[gr]=y||\"translate(0, 0)\"},Fr=function _renderSVGTransforms(t,e){var r,i,n,a,s,o=e||this,u=o.xPercent,h=o.yPercent,l=o.x,f=o.y,d=o.rotation,c=o.skewX,p=o.skewY,_=o.scaleX,m=o.scaleY,g=o.target,v=o.xOrigin,y=o.yOrigin,T=o.xOffset,b=o.yOffset,w=o.forceCSS,x=parseFloat(l),k=parseFloat(f);d=parseFloat(d),c=parseFloat(c),(p=parseFloat(p))&&(c+=p=parseFloat(p),d+=p),d||c?(d*=fr,c*=fr,r=Math.cos(d)*_,i=Math.sin(d)*_,n=Math.sin(d-c)*-m,a=Math.cos(d-c)*m,c&&(p*=fr,s=Math.tan(c-p),n*=s=Math.sqrt(1+s*s),a*=s,p&&(s=Math.tan(p),r*=s=Math.sqrt(1+s*s),i*=s)),r=ka(r),i=ka(i),n=ka(n),a=ka(a)):(r=_,a=m,i=n=0),(x&&!~(l+\"\").indexOf(\"px\")||k&&!~(f+\"\").indexOf(\"px\"))&&(x=de(g,\"x\",l,\"px\"),k=de(g,\"y\",f,\"px\")),(v||y||T||b)&&(x=ka(x+v-(v*r+y*n)+T),k=ka(k+y-(v*i+y*a)+b)),(u||h)&&(s=g.getBBox(),x=ka(x+u/100*s.width),k=ka(k+h/100*s.height)),s=\"matrix(\"+r+\",\"+i+\",\"+n+\",\"+a+\",\"+x+\",\"+k+\")\",g.setAttribute(\"transform\",s),w&&(g.style[gr]=s)};ja(\"padding,margin,Width,Radius\",function(e,r){var t=\"Right\",i=\"Bottom\",n=\"Left\",o=(r<3?[\"Top\",t,i,n]:[\"Top\"+n,\"Top\"+t,i+t,i+n]).map(function(t){return r<2?e+t:\"border\"+t+e});Or[1<r?\"border\"+e:e]=function(e,t,r,i,n){var a,s;if(arguments.length<4)return a=o.map(function(t){return xr(e,t,r)}),5===(s=a.join(\" \")).split(a[0]).length?a[0]:s;a=(i+\"\").split(\" \"),s={},o.forEach(function(t,e){return s[t]=a[e]=a[e]||a[(e-1)/2|0]}),e.init(t,s,n)}});var Ir,Lr,Br,Yr={name:\"css\",register:Wd,targetTest:function targetTest(t){return t.style&&t.nodeType},init:function init(t,e,i,n,a){var s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x=this._props,k=t.style,O=i.vars.startAt;for(d in Ne||Wd(),this.styles=this.styles||Qd(t),b=this.styles.props,this.tween=i,e)if(\"autoRound\"!==d&&(o=e[d],!mt[d]||!dc(d,e,i,n,t,a)))if(l=typeof o,f=Or[d],\"function\"===l&&(l=typeof(o=o.call(i,n,t,a))),\"string\"===l&&~o.indexOf(\"random(\")&&(o=rb(o)),f)f(this,t,d,o,i)&&(T=1);else if(\"--\"===d.substr(0,2))s=(getComputedStyle(t).getPropertyValue(d)+\"\").trim(),o+=\"\",Rt.lastIndex=0,Rt.test(s)||(c=_a(s),(p=_a(o))?c!==p&&(s=de(t,d,s,p)+p):c&&(o+=c)),this.add(k,\"setProperty\",s,o,n,a,0,0,d),x.push(d),b.push(d,0,k[d]);else if(\"undefined\"!==l){if(O&&d in O?(s=\"function\"==typeof O[d]?O[d].call(i,n,t,a):O[d],r(s)&&~s.indexOf(\"random(\")&&(s=rb(s)),_a(s+\"\")||\"auto\"===s||(s+=N.units[d]||_a(xr(t,d))||\"\"),\"=\"===(s+\"\").charAt(1)&&(s=xr(t,d))):s=xr(t,d),h=parseFloat(s),(_=\"string\"===l&&\"=\"===o.charAt(1)&&o.substr(0,2))&&(o=o.substr(2)),u=parseFloat(o),d in mr&&(\"autoAlpha\"===d&&(1===h&&\"hidden\"===xr(t,\"visibility\")&&u&&(h=0),b.push(\"visibility\",0,k.visibility),ae(this,k,\"visibility\",h?\"inherit\":\"hidden\",u?\"inherit\":\"hidden\",!u)),\"scale\"!==d&&\"transform\"!==d&&~(d=mr[d]).indexOf(\",\")&&(d=d.split(\",\")[0])),m=d in hr){if(this.styles.save(d),w=o,\"string\"===l&&\"var(--\"===o.substring(0,6)){if(\"calc(\"===(o=Td(t,o.substring(4,o.indexOf(\")\")))).substring(0,5)){var M=t.style.perspective;t.style.perspective=o,o=Td(t,\"perspective\"),M?t.style.perspective=M:_d(t,\"perspective\")}u=parseFloat(o)}if(g||((v=t._gsap).renderTransform&&!e.parseTransform||Pr(t,e.parseTransform),y=!1!==e.smoothOrigin&&v.smooth,(g=this._pt=new we(this._pt,k,gr,0,1,v.renderTransform,v,0,-1)).dep=1),\"scale\"===d)this._pt=new we(this._pt,v,\"scaleY\",v.scaleY,(_?ma(v.scaleY,_+u):u)-v.scaleY||0,yd),this._pt.u=0,x.push(\"scaleY\",d),d+=\"X\";else{if(\"transformOrigin\"===d){b.push(vr,0,k[vr]),o=he(o),v.svg?pe(t,o,0,y,0,this):((p=parseFloat(o.split(\" \")[2])||0)!==v.zOrigin&&ae(this,v,\"zOrigin\",v.zOrigin,p),ae(this,k,d,Ar(s),Ar(o)));continue}if(\"svgOrigin\"===d){pe(t,o,1,y,0,this);continue}if(d in Cr){ze(this,v,d,h,_?ma(h,_+o):o);continue}if(\"smoothOrigin\"===d){ae(this,v,\"smooth\",v.smooth,o);continue}if(\"force3D\"===d){v[d]=o;continue}if(\"transform\"===d){Be(this,o,t);continue}}}else d in k||(d=Tr(d)||d);if(m||(u||0===u)&&(h||0===h)&&!_r.test(o)&&d in k)u=u||0,(c=(s+\"\").substr((h+\"\").length))!==(p=_a(o)||(d in N.units?N.units[d]:c))&&(h=de(t,d,s,p)),this._pt=new we(this._pt,m?v:k,d,h,(_?ma(h,_+u):u)-h,m||\"px\"!==p&&\"zIndex\"!==d||!1===e.autoRound?yd:Cd),this._pt.u=p||0,m&&w!==o?(this._pt.b=s,this._pt.e=w,this._pt.r=Bd):c!==p&&\"%\"!==p&&(this._pt.b=s,this._pt.r=Ad);else if(d in k)fe.call(this,t,d,s,_?_+o:o);else if(d in t)this.add(t,d,s||t[d],_?_+o:o,n,a);else if(\"parseTransform\"!==d){S(d,o);continue}m||(d in k?b.push(d,0,k[d]):\"function\"==typeof t[d]?b.push(d,2,t[d]()):b.push(d,1,s||t[d])),x.push(d)}T&&be(this)},render:function render(t,e){if(e.tween._time||!Ue())for(var r=e._pt;r;)r.r(t,r.d),r=r._next;else e.styles.revert()},get:xr,aliases:mr,getSetter:function getSetter(t,e,r){var i=mr[e];return i&&i.indexOf(\",\")<0&&(e=i),e in hr&&e!==vr&&(t._gsap.x||xr(t,\"x\"))?r&&Ve===r?\"scale\"===e?Id:Hd:(Ve=r||{})&&(\"scale\"===e?Jd:Kd):t.style&&!u(t.style[e])?Fd:~e.indexOf(\"-\")?Gd:le(t,e)},core:{_removeProperty:_d,_getMatrix:oe}};Fe.utils.checkPrefix=Tr,Fe.core.getStyleSaver=Qd,Br=ja((Ir=\"x,y,z,scale,scaleX,scaleY,xPercent,yPercent\")+\",\"+(Lr=\"rotation,rotationX,rotationY,skewX,skewY\")+\",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective\",function(t){hr[t]=1}),ja(Lr,function(t){N.units[t]=\"deg\",Cr[t]=1}),mr[Br[13]]=Ir+\",\"+Lr,ja(\"0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY\",function(t){var e=t.split(\":\");mr[e[1]]=Br[e[0]]}),ja(\"x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective\",function(t){N.units[t]=\"px\"}),Fe.registerPlugin(Yr);var Nr=Fe.registerPlugin(Yr)||Fe,jr=Nr.core.Tween;e.Back=ir,e.Bounce=ar,e.CSSPlugin=Yr,e.Circ=ur,e.Cubic=Ke,e.Elastic=rr,e.Expo=or,e.Linear=Qe,e.Power0=qe,e.Power1=Ze,e.Power2=We,e.Power3=He,e.Power4=Je,e.Quad=Ge,e.Quart=$e,e.Quint=tr,e.Sine=sr,e.SteppedEase=nr,e.Strong=er,e.TimelineLite=Zt,e.TimelineMax=Zt,e.TweenLite=te,e.TweenMax=jr,e.default=Nr,e.gsap=Nr;if (typeof(window)===\"undefined\"||window!==e){Object.defineProperty(e,\"__esModule\",{value:!0})} else {delete e.default}});\n\n\n</script>\n  <style>* { margin: 0; padding: 0; } html, body { width: 1920px; height: 1080px; overflow: hidden; background: #ffffff; }\n\n[data-composition-id=\"shutter-slam\"]:not(:has([data-hf-inner-root])), [data-composition-id=\"shutter-slam\"] > [data-hf-inner-root] {\n            background: #06060a;\n          }\n\n          *,\n          [data-composition-id=\"shutter-slam\"] *::before,\n          [data-composition-id=\"shutter-slam\"] *::after {\n            box-sizing: border-box;\n          }\n\n          [data-composition-id=\"shutter-slam\"] [data-hf-authored-id=\"root\"] {\n            position: absolute;\n            inset: 0;\n            overflow: hidden;\n            container-type: size;\n            isolation: isolate;\n            font-family: var(--font-display, Inter, system-ui, sans-serif);\n            pointer-events: none;\n          }\n\n          [data-composition-id=\"shutter-slam\"] .ss-clip {\n            position: absolute;\n            inset: 0;\n            width: 100cqw;\n            height: 100cqh;\n            overflow: hidden;\n          }\n\n          /* The turns need a perspective ancestor, and the blur reads its\n             perspective off the word's own parent, so the stage that carries\n             it must be the word's direct parent. */\n          [data-composition-id=\"shutter-slam\"] .ss-stage {\n            position: absolute;\n            inset: 0;\n            display: grid;\n            place-items: center;\n            perspective: 104cqw;\n          }\n\n          [data-composition-id=\"shutter-slam\"] .ss-word {\n            color: var(--ss-accent, #71f5a7);\n            font-size: var(--ss-font-size, min(14cqw, 26cqh));\n            font-weight: 900;\n            line-height: 1;\n            letter-spacing: -0.02em;\n            white-space: nowrap;\n            transform-origin: 50% 50%;\n            will-change: transform;\n          }\n\n[data-composition-id=\"shutter-slam\"] {\n  --text: MOTION;\n  --accent: green;\n  --blur: shutter;\n  --exit: none;\n}</style>\n</head>\n<body>\n  <div data-composition-id=\"preview-root\" data-width=\"1920\" data-height=\"1080\" data-start=\"0\" data-duration=\"5\">\n    <div style=\"width:1920px;height:1080px\" data-composition-file=\"demo.html\" data-composition-id=\"shutter-slam\" data-start=\"0\" data-duration=\"5\" data-track-index=\"0\" data-width=\"1920\" data-height=\"1080\"><div style=\"width:100%;height:100%\" data-hf-inner-root=\"true\" data-hf-authored-id=\"root\" data-fps=\"30\">\n        \n\n        <div id=\"shutter-slam-clip\" class=\"ss-clip clip\" data-start=\"0\" data-duration=\"6\" data-track-index=\"0\">\n          <div class=\"ss-stage\">\n            <div class=\"ss-word\" id=\"shutter-slam-word\" role=\"heading\" aria-level=\"1\"></div>\n          </div>\n        </div>\n\n        \n        \n        \n      </div></div>\n  </div>\n  \n<script>window.__timelines = window.__timelines || {};\n    window.__timelines[\"preview-root\"] = gsap.timeline({ paused: true });\n;\nwindow.__hfVariablesByComp = Object.assign({}, window.__hfVariablesByComp || {}, {\"shutter-slam\":{\"text\":\"MOTION\",\"accent\":\"green\",\"blur\":\"shutter\",\"cues\":\"\",\"exit\":\"none\"}});\n;\n(function(){\n  var __hfCompId = \"shutter-slam\";\n  var __hfTimelineCompId = \"shutter-slam\";\n  var __hfErrorLabel = \"[Compiler] Composition script failed\";\n  var __hfAuthoredRootId = \"root\";\n  var __hfAuthoredRootAttr = \"data-hf-authored-id\";\n  var __hfEscapeAttr = function(value) {\n    return (value + \"\").replace(/\\\\/g, \"\\\\\\\\\").replace(/\"/g, \"\\\\\\\"\");\n  };\n  var __hfRootSelector = \"[data-composition-id=\\\"shutter-slam\\\"]\" || (__hfCompId\n    ? '[data-composition-id=\"' + __hfEscapeAttr(__hfCompId) + '\"]'\n    : \"\");\n  var __hfRoot = null;\n  var __hfRootSelectorPattern = \"\\\\[\\\\s*data-composition-id\\\\s*=\\\\s*(?:\\\"shutter-slam\\\"|'shutter-slam')\\\\s*\\\\]\";\n  var __hfTimingSelectorPattern = \"\\\\s*\\\\[\\\\s*data-(?:start|duration)\\\\s*=\\\\s*(?:\\\"[^\\\"]*\\\"|'[^']*')\\\\s*\\\\]\";\n  var __hfAuthoredRootIdForms = [\"root\"];\n  var __hfAuthoredRootSelector = __hfAuthoredRootId\n    ? \"[\" + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(__hfAuthoredRootId) + '\"]'\n    : \"\";\n  var __hfIsSelectorNameChar = function(char) {\n    return !!char && /[\\w-]/.test(char);\n  };\n  var __hfReplaceAuthoredRootIdSelectors = function(selector) {\n    if (!__hfAuthoredRootSelector || !__hfAuthoredRootIdForms.length || typeof selector !== \"string\") {\n      return selector;\n    }\n    var result = \"\";\n    var bracketDepth = 0;\n    var quote = null;\n    for (var index = 0; index < selector.length; index += 1) {\n      var char = selector[index];\n      var previousChar = index > 0 ? selector[index - 1] : \"\";\n      if (quote) {\n        result += char;\n        if (char === quote && previousChar !== \"\\\\\") {\n          quote = null;\n        }\n        continue;\n      }\n      if (char === '\"' || char === \"'\") {\n        quote = char;\n        result += char;\n        continue;\n      }\n      if (char === \"[\") {\n        bracketDepth += 1;\n        result += char;\n        continue;\n      }\n      if (char === \"]\") {\n        bracketDepth = Math.max(0, bracketDepth - 1);\n        result += char;\n        continue;\n      }\n      if (char === \"#\" && bracketDepth === 0) {\n        var matchedForm = null;\n        for (var formIndex = 0; formIndex < __hfAuthoredRootIdForms.length; formIndex += 1) {\n          var form = __hfAuthoredRootIdForms[formIndex];\n          if (selector.slice(index + 1, index + 1 + form.length) === form) {\n            matchedForm = form;\n            break;\n          }\n        }\n        if (matchedForm) {\n          var nextChar = selector[index + 1 + matchedForm.length];\n          if (!__hfIsSelectorNameChar(nextChar)) {\n            result += __hfAuthoredRootSelector;\n            index += matchedForm.length;\n            continue;\n          }\n        }\n      }\n      result += char;\n    }\n    return result;\n  };\n  var __hfNormalizeSelector = function(selector) {\n    if (!__hfCompId || typeof selector !== \"string\") return selector;\n    var normalized = selector\n      .replace(new RegExp(__hfRootSelectorPattern + '(?:' + __hfTimingSelectorPattern + ')+', 'g'), __hfRootSelector)\n      .replace(new RegExp('(?:' + __hfTimingSelectorPattern + ')+' + __hfRootSelectorPattern, 'g'), __hfRootSelector);\n    if (__hfAuthoredRootSelector) {\n      normalized = __hfReplaceAuthoredRootIdSelectors(normalized);\n    }\n    return normalized;\n  };\n  var __hfFindRoot = function() {\n    if (!__hfRoot && __hfRootSelector) {\n      __hfRoot = window.document.querySelector(__hfRootSelector);\n    }\n    return __hfRoot;\n  };\n  var __hfContains = function(node) {\n    var root = __hfFindRoot();\n    return !root || node === root || root.contains(node);\n  };\n  var __hfQueryAll = function(selector) {\n    var root = __hfFindRoot();\n    if (!root || typeof selector !== \"string\") {\n      return window.document.querySelectorAll(selector);\n    }\n    return Array.prototype.filter.call(window.document.querySelectorAll(__hfNormalizeSelector(selector)), function(node) {\n      return __hfContains(node);\n    });\n  };\n  var __hfQueryOne = function(selector) {\n    var matches = __hfQueryAll(selector);\n    return matches[0] || null;\n  };\n  var __hfGetElementById = function(id) {\n    var found = window.document.getElementById(id);\n    if (found && __hfContains(found)) return found;\n    var root = __hfFindRoot();\n    if (!root) return found || null;\n    var idValue = id + \"\";\n    if (__hfAuthoredRootId && __hfAuthoredRootId === idValue && root.getAttribute && root.getAttribute(__hfAuthoredRootAttr) === idValue) {\n      return root;\n    }\n    if (root.id === idValue) return root;\n    if (typeof root.querySelector !== \"function\") return null;\n    try {\n      var authoredRootMatch = root.querySelector('[' + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(idValue) + '\"]');\n      if (authoredRootMatch) return authoredRootMatch;\n    } catch {}\n    if (typeof CSS !== \"undefined\" && CSS && typeof CSS.escape === \"function\") {\n      try {\n        return root.querySelector(\"#\" + CSS.escape(idValue)) || null;\n      } catch {}\n    }\n    try {\n      return root.querySelector('[id=\"' + __hfEscapeAttr(idValue) + '\"]') || null;\n    } catch {}\n    return null;\n  };\n  var __hfScopedDocument = typeof Proxy === \"function\"\n    ? new Proxy(window.document, {\n        get: function(target, prop, receiver) {\n          if (prop === \"querySelector\") return __hfQueryOne;\n          if (prop === \"querySelectorAll\") return __hfQueryAll;\n          if (prop === \"getElementById\") return __hfGetElementById;\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      })\n    : window.document;\n  var __hfTimelineRegistryProxy = null;\n  var __hfGetTimelineRegistry = function() {\n    window.__timelines = window.__timelines || {};\n    if (!__hfCompId || __hfCompId === __hfTimelineCompId || typeof Proxy !== \"function\") {\n      return window.__timelines;\n    }\n    if (!__hfTimelineRegistryProxy) {\n      __hfTimelineRegistryProxy = new Proxy(window.__timelines, {\n        get: function(target, prop, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.get(target, prop, target);\n          }\n          var authoredValue = Reflect.get(target, prop, target);\n          return authoredValue === undefined\n            ? Reflect.get(target, __hfTimelineCompId, target)\n            : authoredValue;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.set(target, prop, value, target);\n          }\n          // The authored node remains in the compiled DOM when its local id\n          // differs from the runtime mount id, so readiness legitimately sees\n          // both compositions. Publish the same timeline under both identities\n          // instead of replacing one with the other.\n          var authoredSet = Reflect.set(target, __hfCompId, value, target);\n          var runtimeSet = Reflect.set(target, __hfTimelineCompId, value, target);\n          return authoredSet && runtimeSet;\n        },\n      });\n    }\n    return __hfTimelineRegistryProxy;\n  };\n  var __hfScopedWindow = typeof Proxy === \"function\"\n    ? new Proxy(window, {\n        get: function(target, prop, receiver) {\n          if (prop === \"__timelines\") return __hfGetTimelineRegistry();\n          // Inside a sub-composition, __hyperframes is passed as a bare script\n          // param bound to the SCOPED variant (per-comp getVariables). But\n          // authors routinely write the documented window.__hyperframes.\n          // getVariables() form, which would otherwise fall through to the host\n          // page's base __hyperframes and return the WRONG (or empty) variables\n          // for this instance. Route it to the scoped variant too so both\n          // spellings resolve to this composition's own variables.\n          // (__hfScopedHyperframes is a hoisted var assigned below, before any\n          // sub-comp script -- the only code that reads this -- runs.)\n          if (prop === \"__hyperframes\") return __hfScopedHyperframes;\n          // Native window methods must stay bound to the real window. Handed\n          // back unbound, \"this\" at call time is this Proxy and Chrome rejects\n          // it with \"Illegal invocation\", which broke window.addEventListener,\n          // setTimeout, matchMedia and getComputedStyle inside every\n          // sub-composition -- including the window.addEventListener(\"hf-seek\",\n          // ...) form the Three.js and TypeGPU adapters document. The sibling\n          // document and gsap proxies here already bind.\n          //\n          // Only bind non-constructors. Function.prototype.bind drops static\n          // members, so binding a class exposed on window (window.Texts and\n          // friends) would silently strip its statics. Built-in methods have\n          // no .prototype; classes and constructor functions do.\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" && value.prototype === undefined\n            ? value.bind(target)\n            : value;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop === \"__timelines\") {\n            // Common authoring boilerplate assigns the registry back to\n            // itself (window.__timelines = window.__timelines || {}). The\n            // getter above returns our proxy; do not replace the canonical\n            // registry with that proxy or later wrappers will stack proxies.\n            if (value === __hfTimelineRegistryProxy) return true;\n            target.__timelines = value || {};\n            __hfTimelineRegistryProxy = null;\n            return true;\n          }\n          return Reflect.set(target, prop, value, target);\n        },\n      })\n    : window;\n  var __hfResolveGsapTarget = function(target) {\n    if (typeof target !== \"string\") return target;\n    return __hfQueryAll(target);\n  };\n  var __hfScopeTimeline = function(timeline) {\n    if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline;\n    [\"to\", \"from\", \"fromTo\", \"set\"].forEach(function(method) {\n      var original = timeline[method];\n      if (typeof original !== \"function\") return;\n      timeline[method] = function(target) {\n        var args = Array.prototype.slice.call(arguments);\n        args[0] = __hfResolveGsapTarget(target);\n        return original.apply(timeline, args);\n      };\n    });\n    try {\n      Object.defineProperty(timeline, \"__hfScopedCompositionRoot\", {\n        value: __hfFindRoot(),\n        configurable: true,\n      });\n    } catch {\n      // Best-effort: timelines coming from user code may have a frozen target\n      // or a non-extensible defineProperty path. Swallow — the scoped root\n      // is an enrichment, not a correctness invariant for playback.\n    }\n    return timeline;\n  };\n  var __hfBaseGsap = typeof gsap === \"undefined\" ? window.gsap : gsap;\n  var __hfScopedGsap = !__hfBaseGsap || typeof Proxy !== \"function\"\n    ? __hfBaseGsap\n    : new Proxy(__hfBaseGsap, {\n        get: function(target, prop, receiver) {\n          if (prop === \"timeline\") {\n            return function() {\n              return __hfScopeTimeline(target.timeline.apply(target, arguments));\n            };\n          }\n          if (prop === \"to\" || prop === \"from\" || prop === \"fromTo\" || prop === \"set\") {\n            return function(firstArg) {\n              var args = Array.prototype.slice.call(arguments);\n              args[0] = __hfResolveGsapTarget(firstArg);\n              return target[prop].apply(target, args);\n            };\n          }\n          if (prop === \"utils\" && target.utils && typeof Proxy === \"function\") {\n            return new Proxy(target.utils, {\n              get: function(utilsTarget, utilsProp, utilsReceiver) {\n                if (utilsProp === \"toArray\") {\n                  return function(firstArg) {\n                    var args = Array.prototype.slice.call(arguments);\n                    args[0] = __hfResolveGsapTarget(firstArg);\n                    return utilsTarget.toArray.apply(utilsTarget, args);\n                  };\n                }\n                if (utilsProp === \"selector\") {\n                  return function(base) {\n                    var baseEl = typeof base === \"string\" ? __hfQueryOne(base) : base;\n                    var root = baseEl || __hfFindRoot();\n                    return function(selector) {\n                      if (!root || typeof selector !== \"string\") return [];\n                      return Array.prototype.filter.call(\n                        window.document.querySelectorAll(__hfNormalizeSelector(selector)),\n                        function(node) {\n                          return node === root || (typeof root.contains === \"function\" && root.contains(node));\n                        },\n                      );\n                    };\n                  };\n                }\n                var value = Reflect.get(utilsTarget, utilsProp, utilsTarget);\n                return typeof value === \"function\" ? value.bind(utilsTarget) : value;\n              },\n            });\n          }\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      });\n  var __hfBaseHyperframes = window.__hyperframes;\n  var __hfScopedHyperframes = !__hfBaseHyperframes\n    ? __hfBaseHyperframes\n    : Object.assign({}, __hfBaseHyperframes, {\n        getVariables: function() {\n          var byComp = window.__hfVariablesByComp;\n          var scoped = byComp && __hfTimelineCompId ? byComp[__hfTimelineCompId] : null;\n          return scoped ? Object.assign({}, scoped) : {};\n        },\n      });\n  var __hfRun = function() {\n    try {\n      (function(document, gsap, window, __hyperframes) {\n\n          (function () {\n            if (!window._hfMbUid) window._hfMbUid = 0;\n            if (!window._hfMbAttached) window._hfMbAttached = new WeakSet();\n\n            // Shutter length is measured in frames, so the snippet must know the\n            // composition frame rate: explicit option, else the root's data-fps, else 30.\n            function resolveFps(optionFps) {\n              var explicit = Number(optionFps);\n              if (explicit > 0) return explicit;\n\n              var root = document.querySelector(\"[data-composition-id][data-fps]\");\n              var rootFps = root ? Number(root.getAttribute(\"data-fps\")) : 0;\n              if (rootFps > 0) return rootFps;\n\n              return 30;\n            }\n\n            function numOption(value, fallback) {\n              return value !== undefined ? Number(value) : fallback;\n            }\n\n            // A resolved `transform` is either \"none\", a 2D matrix(a,b,c,d,e,f) or a 3D\n            // matrix3d of 16. Splitting the numbers into the linear part and the\n            // translation is what lets the deadband below use a pixel tolerance on the\n            // one and an angle/ratio tolerance on the other.\n            function parseTransform(value) {\n              if (!value || value === \"none\") return { linear: [1, 0, 0, 1], translate: [0, 0, 0] };\n              var nums = value\n                .slice(value.indexOf(\"(\") + 1, -1)\n                .split(\",\")\n                .map(parseFloat);\n              if (nums.length === 16) {\n                return {\n                  linear: [\n                    nums[0],\n                    nums[1],\n                    nums[2],\n                    nums[4],\n                    nums[5],\n                    nums[6],\n                    nums[8],\n                    nums[9],\n                    nums[10],\n                    nums[3],\n                    nums[7],\n                    nums[11],\n                    nums[15],\n                  ],\n                  translate: [nums[12], nums[13], nums[14]],\n                };\n              }\n              return {\n                linear: [nums[0], nums[1], nums[2], nums[3]],\n                translate: [nums[4], nums[5], 0],\n              };\n            }\n\n            // Deadband: half a pixel of travel, a thousandth of a unit of linear change,\n            // about 0.06 degrees or 0.1% of scale. Below it the average is the source.\n            // The 2D and 3D forms have different arities, so a change of form counts as\n            // movement rather than being compared component by component.\n            function differs(a, b) {\n              if (a.linear.length !== b.linear.length) return true;\n              for (var i = 0; i < a.linear.length; i++) {\n                if (Math.abs(a.linear[i] - b.linear[i]) > 0.001) return true;\n              }\n              for (var j = 0; j < 3; j++) {\n                if (Math.abs(a.translate[j] - b.translate[j]) > 0.5) return true;\n              }\n              return false;\n            }\n\n            window.attachMotionBlur = function (selector, tl, opts) {\n              opts = opts || {};\n              var shutterAngle = numOption(opts.shutterAngle, 720);\n              var shutterPhase = numOption(opts.shutterPhase, -360);\n              var requestedSamples = numOption(opts.samplesPerFrame, 16);\n              var samples = Number.isFinite(requestedSamples)\n                ? Math.max(2, Math.min(64, Math.round(requestedSamples)))\n                : 16;\n              var fps = resolveFps(opts.fps);\n\n              var items = Array.isArray(selector) ? selector : [selector];\n              var targets = items.reduce(function (acc, s) {\n                if (typeof s === \"string\") {\n                  document.querySelectorAll(s).forEach(function (el) {\n                    acc.push(el);\n                  });\n                } else if (s instanceof Element) {\n                  acc.push(s);\n                }\n                return acc;\n              }, []);\n\n              // `samples` counts sub-intervals of the shutter window, so there is one copy at\n              // every interval boundary — both ends of the window included — and each carries\n              // 1/samples of the source. That is what the reference export shows: the outermost\n              // copy sits exactly one frame away from the frame time, not half a step short.\n              var copies = samples + 1;\n              var alpha = String(1 / samples);\n\n              // A copy is styled by nothing that selected the original: dropping the id also\n              // drops every `#id` rule that gave it size, colour and font. So each copy carries\n              // its own resolved style inline. Chrome returns \"\" for a computed style's cssText,\n              // so the declarations are enumerated rather than taken wholesale.\n              function resolvedStyles(source, out) {\n                var cs = getComputedStyle(source);\n                var text = \"\";\n                for (var i = 0; i < cs.length; i++) {\n                  text += cs[i] + \":\" + cs.getPropertyValue(cs[i]) + \";\";\n                }\n                // A copy is a still of one instant. Left live, an inherited transition or\n                // keyframe animation would carry it somewhere the timeline never sampled.\n                out.push(text + \"transition:none;animation:none;\");\n                for (var c = 0; c < source.children.length; c++) {\n                  resolvedStyles(source.children[c], out);\n                }\n                return out;\n              }\n\n              function paintResolvedStyles(copy, styles, cursor) {\n                copy.style.cssText = styles[cursor.i++];\n                for (var c = 0; c < copy.children.length; c++) {\n                  paintResolvedStyles(copy.children[c], styles, cursor);\n                }\n              }\n\n              // Perspective applies to a parent's children only, and a copy is a grandchild.\n              // Sharing the parent's 3D context would need preserve-3d on the group, which\n              // mix-blend-mode flattens, so each copy carries the perspective itself. See the\n              // header for what that does to the vanishing point.\n              function parentPerspective(el) {\n                var value = el.parentNode ? getComputedStyle(el.parentNode).perspective : \"none\";\n                return value && value !== \"none\" ? \"perspective(\" + value + \") \" : \"\";\n              }\n\n              var state = targets\n                .filter(function (el) {\n                  // One group per element. A second call on the same element would stack a\n                  // second set of copies over the first and double the ink, so the first\n                  // call owns it.\n                  if (window._hfMbAttached.has(el)) return false;\n                  window._hfMbAttached.add(el);\n                  return true;\n                })\n                .map(function (el) {\n                  var group = document.createElement(\"div\");\n                  group.setAttribute(\"data-hf-motion-blur\", \"hf-mb-\" + window._hfMbUid++);\n                  group.style.cssText =\n                    \"position:absolute;left:0;top:0;width:0;height:0;isolation:isolate;pointer-events:none;display:none;\";\n\n                  var clones = [];\n                  for (var k = 0; k < copies; k++) {\n                    var clone = el.cloneNode(true);\n                    clone.removeAttribute(\"id\");\n                    clones.push(clone);\n                    group.appendChild(clone);\n                  }\n                  el.parentNode.insertBefore(group, el);\n\n                  var s = { el: el, group: group, clones: clones, samples: [], perspective: \"\" };\n\n                  // Resolved styles and the parent's perspective are px once read, so a\n                  // container-relative element needs them again when its box changes. Per frame\n                  // that would walk the whole subtree once per copy; on resize it costs nothing\n                  // on a fixed-size render and keeps a live preview honest.\n                  function snapshot() {\n                    var styles = resolvedStyles(el, []);\n                    s.perspective = parentPerspective(el);\n                    for (var c = 0; c < clones.length; c++) {\n                      paintResolvedStyles(clones[c], styles, { i: 0 });\n                      clones[c].style.position = \"absolute\";\n                      clones[c].style.margin = \"0\";\n                      clones[c].style.opacity = alpha;\n                      clones[c].style.mixBlendMode = \"plus-lighter\";\n                    }\n                  }\n\n                  snapshot();\n                  if (typeof ResizeObserver === \"function\")\n                    new ResizeObserver(snapshot).observe(el);\n                  return s;\n                });\n\n              function readTransform(el) {\n                var cs = getComputedStyle(el);\n                return {\n                  css: cs.transform,\n                  origin: cs.transformOrigin,\n                  opacity: cs.opacity,\n                  parsed: parseTransform(cs.transform),\n                };\n              }\n\n              var scheduled = false;\n\n              function applyShutter() {\n                var shutterTime = shutterAngle / 360 / fps;\n                if (!(shutterTime > 0)) {\n                  state.forEach(function (s) {\n                    s.group.style.display = \"none\";\n                  });\n                  return;\n                }\n\n                var t0 = tl.time();\n                var duration = tl.duration();\n                var windowStart = t0 + shutterPhase / 360 / fps;\n\n                // Sample the real trajectory: seek to each sub-frame time with events\n                // suppressed (so no tween callbacks, including this tracker's, fire),\n                // read the resolved transform, then restore the frame time.\n                try {\n                  for (var k = 0; k < copies; k++) {\n                    var tk = windowStart + (k / samples) * shutterTime;\n                    tl.time(Math.min(duration, Math.max(0, tk)), true);\n                    state.forEach(function (s) {\n                      s.samples[k] = readTransform(s.el);\n                    });\n                  }\n                } finally {\n                  tl.time(t0, true);\n                }\n\n                state.forEach(function (s) {\n                  var current = readTransform(s.el);\n                  var moved = false;\n                  for (var i = 0; i < copies; i++) {\n                    if (differs(s.samples[i].parsed, current.parsed)) {\n                      moved = true;\n                      break;\n                    }\n                  }\n                  if (!moved) {\n                    s.group.style.display = \"none\";\n                    return;\n                  }\n\n                  // The copies are absolutely positioned inside the group, and the group sits at\n                  // the origin of the element's own containing block, so the element's offset box\n                  // places them. Re-read every frame: a beat is free to move the box itself.\n                  var left = s.el.offsetLeft + \"px\";\n                  var top = s.el.offsetTop + \"px\";\n                  var width = s.el.offsetWidth + \"px\";\n                  var height = s.el.offsetHeight + \"px\";\n                  for (var j = 0; j < copies; j++) {\n                    var clone = s.clones[j];\n                    clone.style.left = left;\n                    clone.style.top = top;\n                    clone.style.width = width;\n                    clone.style.height = height;\n                    clone.style.transformOrigin = s.samples[j].origin;\n                    clone.style.transform =\n                      s.perspective + (s.samples[j].css === \"none\" ? \"\" : s.samples[j].css);\n                  }\n                  // The copies are the element's own ink, so they have to carry its opacity too:\n                  // a beat that moves and fades at once would otherwise leave a full-strength\n                  // smear behind a vanishing element. It rides the group, not the copies, whose\n                  // own opacity is the 1/N shutter weight.\n                  s.group.style.opacity = current.opacity;\n                  s.group.style.display = \"\";\n                });\n              }\n\n              // tl.eventCallback(\"onUpdate\") is unavailable under the HyperFrames runtime proxy, so a\n              // tracker tween's onUpdate fires on every seek. Sampling is deferred to a microtask:\n              // seeking GSAP from inside its own render reads stale tween state, while the microtask\n              // runs after the seek returns and before the frame is captured or painted.\n              var _proxy = { t: 0 };\n              tl.to(\n                _proxy,\n                {\n                  t: 1,\n                  duration: Math.max(tl.duration(), 0.1),\n                  ease: \"none\",\n                  onUpdate: function () {\n                    if (scheduled) return;\n                    scheduled = true;\n                    Promise.resolve().then(function () {\n                      scheduled = false;\n                      applyShutter();\n                    });\n                  },\n                },\n                0,\n              );\n            };\n          })();\n        \n      }).call(window, __hfScopedDocument, __hfScopedGsap, __hfScopedWindow, __hfScopedHyperframes);\n    } catch (_err) {\n      console.error(__hfErrorLabel, __hfCompId, _err);\n    }\n  };\n  __hfFindRoot();\n  __hfRun();\n})();\n;\n(function(){\n  var __hfCompId = \"shutter-slam\";\n  var __hfTimelineCompId = \"shutter-slam\";\n  var __hfErrorLabel = \"[Compiler] Composition script failed\";\n  var __hfAuthoredRootId = \"root\";\n  var __hfAuthoredRootAttr = \"data-hf-authored-id\";\n  var __hfEscapeAttr = function(value) {\n    return (value + \"\").replace(/\\\\/g, \"\\\\\\\\\").replace(/\"/g, \"\\\\\\\"\");\n  };\n  var __hfRootSelector = \"[data-composition-id=\\\"shutter-slam\\\"]\" || (__hfCompId\n    ? '[data-composition-id=\"' + __hfEscapeAttr(__hfCompId) + '\"]'\n    : \"\");\n  var __hfRoot = null;\n  var __hfRootSelectorPattern = \"\\\\[\\\\s*data-composition-id\\\\s*=\\\\s*(?:\\\"shutter-slam\\\"|'shutter-slam')\\\\s*\\\\]\";\n  var __hfTimingSelectorPattern = \"\\\\s*\\\\[\\\\s*data-(?:start|duration)\\\\s*=\\\\s*(?:\\\"[^\\\"]*\\\"|'[^']*')\\\\s*\\\\]\";\n  var __hfAuthoredRootIdForms = [\"root\"];\n  var __hfAuthoredRootSelector = __hfAuthoredRootId\n    ? \"[\" + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(__hfAuthoredRootId) + '\"]'\n    : \"\";\n  var __hfIsSelectorNameChar = function(char) {\n    return !!char && /[\\w-]/.test(char);\n  };\n  var __hfReplaceAuthoredRootIdSelectors = function(selector) {\n    if (!__hfAuthoredRootSelector || !__hfAuthoredRootIdForms.length || typeof selector !== \"string\") {\n      return selector;\n    }\n    var result = \"\";\n    var bracketDepth = 0;\n    var quote = null;\n    for (var index = 0; index < selector.length; index += 1) {\n      var char = selector[index];\n      var previousChar = index > 0 ? selector[index - 1] : \"\";\n      if (quote) {\n        result += char;\n        if (char === quote && previousChar !== \"\\\\\") {\n          quote = null;\n        }\n        continue;\n      }\n      if (char === '\"' || char === \"'\") {\n        quote = char;\n        result += char;\n        continue;\n      }\n      if (char === \"[\") {\n        bracketDepth += 1;\n        result += char;\n        continue;\n      }\n      if (char === \"]\") {\n        bracketDepth = Math.max(0, bracketDepth - 1);\n        result += char;\n        continue;\n      }\n      if (char === \"#\" && bracketDepth === 0) {\n        var matchedForm = null;\n        for (var formIndex = 0; formIndex < __hfAuthoredRootIdForms.length; formIndex += 1) {\n          var form = __hfAuthoredRootIdForms[formIndex];\n          if (selector.slice(index + 1, index + 1 + form.length) === form) {\n            matchedForm = form;\n            break;\n          }\n        }\n        if (matchedForm) {\n          var nextChar = selector[index + 1 + matchedForm.length];\n          if (!__hfIsSelectorNameChar(nextChar)) {\n            result += __hfAuthoredRootSelector;\n            index += matchedForm.length;\n            continue;\n          }\n        }\n      }\n      result += char;\n    }\n    return result;\n  };\n  var __hfNormalizeSelector = function(selector) {\n    if (!__hfCompId || typeof selector !== \"string\") return selector;\n    var normalized = selector\n      .replace(new RegExp(__hfRootSelectorPattern + '(?:' + __hfTimingSelectorPattern + ')+', 'g'), __hfRootSelector)\n      .replace(new RegExp('(?:' + __hfTimingSelectorPattern + ')+' + __hfRootSelectorPattern, 'g'), __hfRootSelector);\n    if (__hfAuthoredRootSelector) {\n      normalized = __hfReplaceAuthoredRootIdSelectors(normalized);\n    }\n    return normalized;\n  };\n  var __hfFindRoot = function() {\n    if (!__hfRoot && __hfRootSelector) {\n      __hfRoot = window.document.querySelector(__hfRootSelector);\n    }\n    return __hfRoot;\n  };\n  var __hfContains = function(node) {\n    var root = __hfFindRoot();\n    return !root || node === root || root.contains(node);\n  };\n  var __hfQueryAll = function(selector) {\n    var root = __hfFindRoot();\n    if (!root || typeof selector !== \"string\") {\n      return window.document.querySelectorAll(selector);\n    }\n    return Array.prototype.filter.call(window.document.querySelectorAll(__hfNormalizeSelector(selector)), function(node) {\n      return __hfContains(node);\n    });\n  };\n  var __hfQueryOne = function(selector) {\n    var matches = __hfQueryAll(selector);\n    return matches[0] || null;\n  };\n  var __hfGetElementById = function(id) {\n    var found = window.document.getElementById(id);\n    if (found && __hfContains(found)) return found;\n    var root = __hfFindRoot();\n    if (!root) return found || null;\n    var idValue = id + \"\";\n    if (__hfAuthoredRootId && __hfAuthoredRootId === idValue && root.getAttribute && root.getAttribute(__hfAuthoredRootAttr) === idValue) {\n      return root;\n    }\n    if (root.id === idValue) return root;\n    if (typeof root.querySelector !== \"function\") return null;\n    try {\n      var authoredRootMatch = root.querySelector('[' + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(idValue) + '\"]');\n      if (authoredRootMatch) return authoredRootMatch;\n    } catch {}\n    if (typeof CSS !== \"undefined\" && CSS && typeof CSS.escape === \"function\") {\n      try {\n        return root.querySelector(\"#\" + CSS.escape(idValue)) || null;\n      } catch {}\n    }\n    try {\n      return root.querySelector('[id=\"' + __hfEscapeAttr(idValue) + '\"]') || null;\n    } catch {}\n    return null;\n  };\n  var __hfScopedDocument = typeof Proxy === \"function\"\n    ? new Proxy(window.document, {\n        get: function(target, prop, receiver) {\n          if (prop === \"querySelector\") return __hfQueryOne;\n          if (prop === \"querySelectorAll\") return __hfQueryAll;\n          if (prop === \"getElementById\") return __hfGetElementById;\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      })\n    : window.document;\n  var __hfTimelineRegistryProxy = null;\n  var __hfGetTimelineRegistry = function() {\n    window.__timelines = window.__timelines || {};\n    if (!__hfCompId || __hfCompId === __hfTimelineCompId || typeof Proxy !== \"function\") {\n      return window.__timelines;\n    }\n    if (!__hfTimelineRegistryProxy) {\n      __hfTimelineRegistryProxy = new Proxy(window.__timelines, {\n        get: function(target, prop, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.get(target, prop, target);\n          }\n          var authoredValue = Reflect.get(target, prop, target);\n          return authoredValue === undefined\n            ? Reflect.get(target, __hfTimelineCompId, target)\n            : authoredValue;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.set(target, prop, value, target);\n          }\n          // The authored node remains in the compiled DOM when its local id\n          // differs from the runtime mount id, so readiness legitimately sees\n          // both compositions. Publish the same timeline under both identities\n          // instead of replacing one with the other.\n          var authoredSet = Reflect.set(target, __hfCompId, value, target);\n          var runtimeSet = Reflect.set(target, __hfTimelineCompId, value, target);\n          return authoredSet && runtimeSet;\n        },\n      });\n    }\n    return __hfTimelineRegistryProxy;\n  };\n  var __hfScopedWindow = typeof Proxy === \"function\"\n    ? new Proxy(window, {\n        get: function(target, prop, receiver) {\n          if (prop === \"__timelines\") return __hfGetTimelineRegistry();\n          // Inside a sub-composition, __hyperframes is passed as a bare script\n          // param bound to the SCOPED variant (per-comp getVariables). But\n          // authors routinely write the documented window.__hyperframes.\n          // getVariables() form, which would otherwise fall through to the host\n          // page's base __hyperframes and return the WRONG (or empty) variables\n          // for this instance. Route it to the scoped variant too so both\n          // spellings resolve to this composition's own variables.\n          // (__hfScopedHyperframes is a hoisted var assigned below, before any\n          // sub-comp script -- the only code that reads this -- runs.)\n          if (prop === \"__hyperframes\") return __hfScopedHyperframes;\n          // Native window methods must stay bound to the real window. Handed\n          // back unbound, \"this\" at call time is this Proxy and Chrome rejects\n          // it with \"Illegal invocation\", which broke window.addEventListener,\n          // setTimeout, matchMedia and getComputedStyle inside every\n          // sub-composition -- including the window.addEventListener(\"hf-seek\",\n          // ...) form the Three.js and TypeGPU adapters document. The sibling\n          // document and gsap proxies here already bind.\n          //\n          // Only bind non-constructors. Function.prototype.bind drops static\n          // members, so binding a class exposed on window (window.Texts and\n          // friends) would silently strip its statics. Built-in methods have\n          // no .prototype; classes and constructor functions do.\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" && value.prototype === undefined\n            ? value.bind(target)\n            : value;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop === \"__timelines\") {\n            // Common authoring boilerplate assigns the registry back to\n            // itself (window.__timelines = window.__timelines || {}). The\n            // getter above returns our proxy; do not replace the canonical\n            // registry with that proxy or later wrappers will stack proxies.\n            if (value === __hfTimelineRegistryProxy) return true;\n            target.__timelines = value || {};\n            __hfTimelineRegistryProxy = null;\n            return true;\n          }\n          return Reflect.set(target, prop, value, target);\n        },\n      })\n    : window;\n  var __hfResolveGsapTarget = function(target) {\n    if (typeof target !== \"string\") return target;\n    return __hfQueryAll(target);\n  };\n  var __hfScopeTimeline = function(timeline) {\n    if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline;\n    [\"to\", \"from\", \"fromTo\", \"set\"].forEach(function(method) {\n      var original = timeline[method];\n      if (typeof original !== \"function\") return;\n      timeline[method] = function(target) {\n        var args = Array.prototype.slice.call(arguments);\n        args[0] = __hfResolveGsapTarget(target);\n        return original.apply(timeline, args);\n      };\n    });\n    try {\n      Object.defineProperty(timeline, \"__hfScopedCompositionRoot\", {\n        value: __hfFindRoot(),\n        configurable: true,\n      });\n    } catch {\n      // Best-effort: timelines coming from user code may have a frozen target\n      // or a non-extensible defineProperty path. Swallow — the scoped root\n      // is an enrichment, not a correctness invariant for playback.\n    }\n    return timeline;\n  };\n  var __hfBaseGsap = typeof gsap === \"undefined\" ? window.gsap : gsap;\n  var __hfScopedGsap = !__hfBaseGsap || typeof Proxy !== \"function\"\n    ? __hfBaseGsap\n    : new Proxy(__hfBaseGsap, {\n        get: function(target, prop, receiver) {\n          if (prop === \"timeline\") {\n            return function() {\n              return __hfScopeTimeline(target.timeline.apply(target, arguments));\n            };\n          }\n          if (prop === \"to\" || prop === \"from\" || prop === \"fromTo\" || prop === \"set\") {\n            return function(firstArg) {\n              var args = Array.prototype.slice.call(arguments);\n              args[0] = __hfResolveGsapTarget(firstArg);\n              return target[prop].apply(target, args);\n            };\n          }\n          if (prop === \"utils\" && target.utils && typeof Proxy === \"function\") {\n            return new Proxy(target.utils, {\n              get: function(utilsTarget, utilsProp, utilsReceiver) {\n                if (utilsProp === \"toArray\") {\n                  return function(firstArg) {\n                    var args = Array.prototype.slice.call(arguments);\n                    args[0] = __hfResolveGsapTarget(firstArg);\n                    return utilsTarget.toArray.apply(utilsTarget, args);\n                  };\n                }\n                if (utilsProp === \"selector\") {\n                  return function(base) {\n                    var baseEl = typeof base === \"string\" ? __hfQueryOne(base) : base;\n                    var root = baseEl || __hfFindRoot();\n                    return function(selector) {\n                      if (!root || typeof selector !== \"string\") return [];\n                      return Array.prototype.filter.call(\n                        window.document.querySelectorAll(__hfNormalizeSelector(selector)),\n                        function(node) {\n                          return node === root || (typeof root.contains === \"function\" && root.contains(node));\n                        },\n                      );\n                    };\n                  };\n                }\n                var value = Reflect.get(utilsTarget, utilsProp, utilsTarget);\n                return typeof value === \"function\" ? value.bind(utilsTarget) : value;\n              },\n            });\n          }\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      });\n  var __hfBaseHyperframes = window.__hyperframes;\n  var __hfScopedHyperframes = !__hfBaseHyperframes\n    ? __hfBaseHyperframes\n    : Object.assign({}, __hfBaseHyperframes, {\n        getVariables: function() {\n          var byComp = window.__hfVariablesByComp;\n          var scoped = byComp && __hfTimelineCompId ? byComp[__hfTimelineCompId] : null;\n          return scoped ? Object.assign({}, scoped) : {};\n        },\n      });\n  var __hfRun = function() {\n    try {\n      (function(document, gsap, window, __hyperframes) {\n\n          (function () {\n            \"use strict\";\n\n            var root = document.getElementById(\"root\");\n            var word = root.querySelector(\".ss-word\");\n            var vars =\n              window.__hyperframes && window.__hyperframes.getVariables\n                ? window.__hyperframes.getVariables()\n                : {};\n\n            var text = vars.text == null ? \"MOTION\" : String(vars.text);\n            var accentColors = {\n              green: \"var(--brand, #71f5a7)\",\n              blue: \"var(--accent, #61a8ff)\",\n              violet: \"var(--accent-2, #b895ff)\",\n            };\n            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)\n              ? vars.accent\n              : \"green\";\n            var blurred = vars.blur !== \"none\";\n            var exit = vars.exit === \"fade\" || vars.exit === \"up\" ? vars.exit : \"none\";\n\n            root.style.setProperty(\"--ss-accent\", accentColors[accent]);\n            word.textContent = text;\n\n            // One em per character keeps any word inside the box at rest, which is what\n            // the slam amplitudes are measured against; the scale punch is meant to\n            // overflow and the clip crops it.\n            var fittedCqw = Math.min(14, 76 / Math.max(1, Array.from(text).length));\n            root.style.setProperty(\"--ss-font-size\", \"min(\" + fittedCqw.toFixed(3) + \"cqw, 26cqh)\");\n\n            // Measured off the reference export; see the header.\n            function aeEase(t) {\n              var X1 = 0.54;\n              var X2 = 0.48;\n              var s = t;\n              for (var i = 0; i < 8; i++) {\n                var x = 3 * X1 * (1 - s) * (1 - s) * s + 3 * X2 * (1 - s) * s * s + s * s * s;\n                var dx =\n                  3 * X1 * (1 - 4 * s + 3 * s * s) + 3 * X2 * (2 * s - 3 * s * s) + 3 * s * s;\n                if (Math.abs(dx) < 1e-9) break;\n                s -= (x - t) / dx;\n                if (s < 0) s = 0;\n                else if (s > 1) s = 1;\n              }\n              return 3 * (1 - s) * s * s + s * s * s;\n            }\n\n            var SLAM_X = 32.1; // cqw, the reference's 617 px on a 1920 px frame\n            var SLAM_Y = 30.5; // cqh, its 329 px on a 1080 px frame\n            var SLAM = 0.3;\n            var TURN = 0.6;\n            var TURN_Z = 0.733;\n            // Authored start of each beat, and the end of the last one.\n            var CUES_BASE = [0, 1.2, 2.4, 3.7, 4.5, 5.233];\n            var BEATS_BASE = 5.233 + TURN_Z;\n            var OUT_BASE = exit === \"none\" ? 0 : 0.4;\n\n            var duration = Math.max(0.001, parseFloat(root.dataset.duration || \"6\"));\n            var baseTotal = BEATS_BASE + OUT_BASE;\n            var beatScale = duration < baseTotal ? duration / baseTotal : 1;\n\n            // An authored cue list replaces the rhythm outright rather than scaling it,\n            // so a beat locked to narration lands where the narration does. Missing or\n            // unreadable entries keep their authored start.\n            var authored = String(vars.cues == null ? \"\" : vars.cues)\n              .split(\",\")\n              .map(function (part) {\n                return parseFloat(part.trim());\n              });\n            var cues = CUES_BASE.map(function (base, index) {\n              var value = authored[index];\n              return Number.isFinite(value) ? value : base * beatScale;\n            });\n\n            var tl = gsap.timeline({ paused: true, defaults: { ease: aeEase } });\n            var slam = SLAM * beatScale;\n            var turn = TURN * beatScale;\n            var turnZ = TURN_Z * beatScale;\n\n            // Beat 1 — translate X, out and back twice.\n            tl.to(word, { x: SLAM_X + \"cqw\", duration: slam }, cues[0])\n              .to(word, { x: -SLAM_X + \"cqw\", duration: slam }, cues[0] + slam)\n              .to(word, { x: SLAM_X + \"cqw\", duration: slam }, cues[0] + slam * 2)\n              .to(word, { x: 0, duration: slam }, cues[0] + slam * 3);\n\n            // Beat 2 — translate Y, up first.\n            tl.to(word, { y: -SLAM_Y + \"cqh\", duration: slam }, cues[1])\n              .to(word, { y: SLAM_Y + \"cqh\", duration: slam }, cues[1] + slam)\n              .to(word, { y: -SLAM_Y + \"cqh\", duration: slam }, cues[1] + slam * 2)\n              .to(word, { y: 0, duration: slam }, cues[1] + slam * 3);\n\n            // Beat 3 — scale punch, up then down then up.\n            tl.to(word, { scale: 4.04, duration: slam }, cues[2])\n              .to(word, { scale: 0.466, duration: slam }, cues[2] + slam)\n              .to(word, { scale: 4.04, duration: slam }, cues[2] + slam * 2)\n              .to(word, { scale: 1, duration: slam }, cues[2] + slam * 3);\n\n            // Beats 4 to 6 — one full turn about each axis. A full turn ends where it\n            // started, so each is a single tween rather than an out-and-back pair.\n            tl.to(word, { rotationX: 360, duration: turn }, cues[3]);\n            tl.to(word, { rotationY: 360, duration: turn }, cues[4]);\n            tl.to(word, { rotation: 360, duration: turnZ }, cues[5]);\n\n            var beatsEnd = Math.max.apply(\n              null,\n              cues\n                .slice(0, 3)\n                .map(function (cue) {\n                  return cue + slam * 4;\n                })\n                .concat([cues[3] + turn, cues[4] + turn, cues[5] + turnZ]),\n            );\n            var outStart = Math.max(beatsEnd, duration - OUT_BASE * beatScale);\n\n            if (exit !== \"none\") {\n              tl.to(\n                word,\n                {\n                  opacity: 0,\n                  y: exit === \"up\" ? \"-12cqh\" : 0,\n                  duration: OUT_BASE * beatScale,\n                  ease: \"power2.in\",\n                },\n                outStart,\n              );\n            }\n\n            // Seeks past the last tween must still reach the blur's tracker, so the\n            // timeline runs to the mount's full duration.\n            tl.set({}, {}, duration);\n\n            // After every tween, before registration: the tracker tween the blur adds\n            // needs the timeline's final duration.\n            if (blurred) attachMotionBlur(word, tl, { fps: 30 });\n\n            tl.seek(0);\n            window.__timelines = window.__timelines || {};\n            window.__timelines[\"shutter-slam\"] = tl;\n          })();\n        \n      }).call(window, __hfScopedDocument, __hfScopedGsap, __hfScopedWindow, __hfScopedHyperframes);\n    } catch (_err) {\n      console.error(__hfErrorLabel, __hfCompId, _err);\n    }\n  };\n  __hfFindRoot();\n  __hfRun();\n})();</script></body>\n</html>"}
\ No newline at end of file
+{"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head><style data-hyperframes-text-rendering=\"true\">html,body,*{text-rendering:geometricPrecision}</style>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=1920, height=1080\">\n  <script>/* inlined: https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js */\n/*!\n * GSAP 3.14.2\n * https://gsap.com\n * \n * @license Copyright 2025, GreenSock. All rights reserved.\n * Subject to the terms at https://gsap.com/standard-license.\n * @author: Jack Doyle, jack@greensock.com\n */\n\n!function(t,e){\"object\"==typeof exports&&\"undefined\"!=typeof module?e(exports):\"function\"==typeof define&&define.amd?define([\"exports\"],e):e((t=t||self).window=t.window||{})}(this,function(e){\"use strict\";function _inheritsLoose(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return t}function r(t){return\"string\"==typeof t}function s(t){return\"function\"==typeof t}function t(t){return\"number\"==typeof t}function u(t){return void 0===t}function v(t){return\"object\"==typeof t}function w(t){return!1!==t}function x(){return\"undefined\"!=typeof window}function y(t){return s(t)||r(t)}function R(t){return(i=bt(t,ht))&&Fe}function S(t,e){return console.warn(\"Invalid property\",t,\"set to\",e,\"Missing plugin? gsap.registerPlugin()\")}function T(t,e){return!e&&console.warn(t)}function U(t,e){return t&&(ht[t]=e)&&i&&(i[t]=e)||ht}function V(){return 0}function ga(t){var e,r,i=t[0];if(v(i)||s(i)||(t=[t]),!(e=(i._gsap||{}).harness)){for(r=yt.length;r--&&!yt[r].targetTest(i););e=yt[r]}for(r=t.length;r--;)t[r]&&(t[r]._gsap||(t[r]._gsap=new Xt(t[r],e)))||t.splice(r,1);return t}function ha(t){return t._gsap||ga(Pt(t))[0]._gsap}function ia(t,e,r){return(r=t[e])&&s(r)?t[e]():u(r)&&t.getAttribute&&t.getAttribute(e)||r}function ja(t,e){return(t=t.split(\",\")).forEach(e)||t}function ka(t){return Math.round(1e5*t)/1e5||0}function la(t){return Math.round(1e7*t)/1e7||0}function ma(t,e){var r=e.charAt(0),i=parseFloat(e.substr(2));return t=parseFloat(t),\"+\"===r?t+i:\"-\"===r?t-i:\"*\"===r?t*i:t/i}function na(t,e){for(var r=e.length,i=0;t.indexOf(e[i])<0&&++i<r;);return i<r}function oa(){var t,e,r=pt.length,i=pt.slice(0);for(_t={},t=pt.length=0;t<r;t++)(e=i[t])&&e._lazy&&(e.render(e._lazy[0],e._lazy[1],!0)._lazy=0)}function pa(t){return!!(t._initted||t._startAt||t.add)}function qa(t,e,r,i){pt.length&&!I&&oa(),t.render(e,r,i||!!(I&&e<0&&pa(t))),pt.length&&!I&&oa()}function ra(t){var e=parseFloat(t);return(e||0===e)&&(t+\"\").match(ot).length<2?e:r(t)?t.trim():t}function sa(t){return t}function ta(t,e){for(var r in e)r in t||(t[r]=e[r]);return t}function wa(t,e){for(var r in e)\"__proto__\"!==r&&\"constructor\"!==r&&\"prototype\"!==r&&(t[r]=v(e[r])?wa(t[r]||(t[r]={}),e[r]):e[r]);return t}function xa(t,e){var r,i={};for(r in t)r in e||(i[r]=t[r]);return i}function ya(t){var e=t.parent||L,r=t.keyframes?function _setKeyframeDefaults(i){return function(t,e){for(var r in e)r in t||\"duration\"===r&&i||\"ease\"===r||(t[r]=e[r])}}($(t.keyframes)):ta;if(w(t.inherit))for(;e;)r(t,e.vars.defaults),e=e.parent||e._dp;return t}function Aa(t,e,r,i,n){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var a,s=t[i];if(n)for(a=e[n];s&&s[n]>a;)s=s._prev;return s?(e._next=s._next,s._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[i]=e,e._prev=s,e.parent=e._dp=t,e}function Ba(t,e,r,i){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var n=e._prev,a=e._next;n?n._next=a:t[r]===e&&(t[r]=a),a?a._prev=n:t[i]===e&&(t[i]=n),e._next=e._prev=e.parent=null}function Ca(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove&&t.parent.remove(t),t._act=0}function Da(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t}function Fa(t,e,r,i){return t._startAt&&(I?t._startAt.revert(ft):t.vars.immediateRender&&!t.vars.autoRevert||t._startAt.render(e,!0,i))}function Ha(t){return t._repeat?wt(t._tTime,t=t.duration()+t._rDelay)*t:0}function Ja(t,e){return(t-e._start)*e._ts+(0<=e._ts?0:e._dirty?e.totalDuration():e._tDur)}function Ka(t){return t._end=la(t._start+(t._tDur/Math.abs(t._ts||t._rts||q)||0))}function La(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=la(r._time-(0<t._ts?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Ka(t),r._dirty||Da(r,t)),t}function Ma(t,e){var r;if((e._time||!e._dur&&e._initted||e._start<t._time&&(e._dur||!e.add))&&(r=Ja(t.rawTime(),e),(!e._dur||Mt(0,e.totalDuration(),r)-e._tTime>q)&&e.render(r,!0)),Da(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur<t.duration())for(r=t;r._dp;)0<=r.rawTime()&&r.totalTime(r._tTime),r=r._dp;t._zTime=-q}}function Na(e,r,i,n){return r.parent&&Ca(r),r._start=la((t(i)?i:i||e!==L?Ot(e,i,r):e._time)+r._delay),r._end=la(r._start+(r.totalDuration()/Math.abs(r.timeScale())||0)),Aa(e,r,\"_first\",\"_last\",e._sort?\"_start\":0),xt(r)||(e._recent=r),n||Ma(e,r),e._ts<0&&La(e,e._tTime),e}function Oa(t,e){return(ht.ScrollTrigger||S(\"scrollTrigger\",e))&&ht.ScrollTrigger.create(e,t)}function Pa(t,e,r,i,n){return Qt(t,e,n),t._initted?!r&&t._pt&&!I&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&f!==It.frame?(pt.push(t),t._lazy=[n,i],1):void 0:1}function Ua(t,e,r,i){var n=t._repeat,a=la(e)||0,s=t._tTime/t._tDur;return s&&!i&&(t._time*=a/t._dur),t._dur=a,t._tDur=n?n<0?1e10:la(a*(n+1)+t._rDelay*n):a,0<s&&!i&&La(t,t._tTime=t._tDur*s),t.parent&&Ka(t),r||Da(t.parent,t),t}function Va(t){return t instanceof Zt?Da(t):Ua(t,t._dur)}function Ya(e,r,i){var n,a,s=t(r[1]),o=(s?2:1)+(e<2?0:1),u=r[o];if(s&&(u.duration=r[1]),u.parent=i,e){for(n=u,a=i;a&&!(\"immediateRender\"in n);)n=a.vars.defaults||{},a=w(a.vars.inherit)&&a.parent;u.immediateRender=w(n.immediateRender),e<2?u.runBackwards=1:u.startAt=r[o-1]}return new te(r[0],u,r[1+o])}function Za(t,e){return t||0===t?e(t):e}function _a(t,e){return r(t)&&(e=ut.exec(t))?e[1]:\"\"}function cb(t,e){return t&&v(t)&&\"length\"in t&&(!e&&!t.length||t.length-1 in t&&v(t[0]))&&!t.nodeType&&t!==h}function fb(r){return r=Pt(r)[0]||T(\"Invalid scope\")||{},function(t){var e=r.current||r.nativeElement||r;return Pt(t,e.querySelectorAll?e:e===r?T(\"Invalid scope\")||a.createElement(\"div\"):r)}}function gb(t){return t.sort(function(){return.5-Math.random()})}function hb(t){if(s(t))return t;var p=v(t)?t:{each:t},_=Vt(p.ease),m=p.from||0,g=parseFloat(p.base)||0,y={},e=0<m&&m<1,T=isNaN(m)||e,b=p.axis,w=m,x=m;return r(m)?w=x={center:.5,edges:.5,end:1}[m]||0:!e&&T&&(w=m[0],x=m[1]),function(t,e,r){var i,n,a,s,o,u,h,l,f,d=(r||p).length,c=y[d];if(!c){if(!(f=\"auto\"===p.grid?0:(p.grid||[1,X])[1])){for(h=-X;h<(h=r[f++].getBoundingClientRect().left)&&f<d;);f<d&&f--}for(c=y[d]=[],i=T?Math.min(f,d)*w-.5:m%f,n=f===X?0:T?d*x/f-.5:m/f|0,l=X,u=h=0;u<d;u++)a=u%f-i,s=n-(u/f|0),c[u]=o=b?Math.abs(\"y\"===b?s:a):J(a*a+s*s),h<o&&(h=o),o<l&&(l=o);\"random\"===m&&gb(c),c.max=h-l,c.min=l,c.v=d=(parseFloat(p.amount)||parseFloat(p.each)*(d<f?d-1:b?\"y\"===b?d/f:f:Math.max(f,d/f))||0)*(\"edges\"===m?-1:1),c.b=d<0?g-d:g,c.u=_a(p.amount||p.each)||0,_=_&&d<0?jt(_):_}return d=(c[t]-c.min)/c.max||0,la(c.b+(_?_(d):d)*c.v)+c.u}}function ib(i){var n=Math.pow(10,((i+\"\").split(\".\")[1]||\"\").length);return function(e){var r=la(Math.round(parseFloat(e)/i)*i*n);return(r-r%1)/n+(t(e)?0:_a(e))}}function jb(h,e){var l,f,r=$(h);return!r&&v(h)&&(l=r=h.radius||X,h.values?(h=Pt(h.values),(f=!t(h[0]))&&(l*=l)):h=ib(h.increment)),Za(e,r?s(h)?function(t){return f=h(t),Math.abs(f-t)<=l?f:t}:function(e){for(var r,i,n=parseFloat(f?e.x:e),a=parseFloat(f?e.y:0),s=X,o=0,u=h.length;u--;)(r=f?(r=h[u].x-n)*r+(i=h[u].y-a)*i:Math.abs(h[u]-n))<s&&(s=r,o=u);return o=!l||s<=l?h[o]:e,f||o===e||t(e)?o:o+_a(e)}:ib(h))}function kb(t,e,r,i){return Za($(t)?!e:!0===r?!!(r=0):!i,function(){return $(t)?t[~~(Math.random()*t.length)]:(r=r||1e-5)&&(i=r<1?Math.pow(10,(r+\"\").length-2):1)&&Math.floor(Math.round((t-r/2+Math.random()*(e-t+.99*r))/r)*r*i)/i})}function ob(e,r,t){return Za(t,function(t){return e[~~r(t)]})}function rb(t){return t.replace(tt,function(t){var e=t.indexOf(\"[\")+1,r=t.substring(e||7,e?t.indexOf(\"]\"):t.length-1).split(et);return kb(e?r:+r[0],e?0:+r[1],+r[2]||1e-5)})}function ub(t,e,r){var i,n,a,s=t.labels,o=X;for(i in s)(n=s[i]-e)<0==!!r&&n&&o>(n=Math.abs(n))&&(a=i,o=n);return a}function wb(t){return Ca(t),t.scrollTrigger&&t.scrollTrigger.kill(!!I),t.progress()<1&&Dt(t,\"onInterrupt\"),t}function zb(t){if(t)if(t=!t.name&&t.default||t,x()||t.headless){var e=t.name,r=s(t),i=e&&!r&&t.init?function(){this._props=[]}:t,n={init:V,render:ve,add:Jt,kill:Te,modifier:ye,rawVars:0},a={targetTest:0,get:0,getSetter:le,aliases:{},register:0};if(Lt(),t!==i){if(mt[e])return;ta(i,ta(xa(t,n),a)),bt(i.prototype,bt(n,xa(t,a))),mt[i.prop=e]=i,t.targetTest&&(yt.push(i),ct[e]=1),e=(\"css\"===e?\"CSS\":e.charAt(0).toUpperCase()+e.substr(1))+\"Plugin\"}U(e,i),t.register&&t.register(Fe,i,we)}else St.push(t)}function Cb(t,e,r){return(6*(t+=t<0?1:1<t?-1:0)<1?e+(r-e)*t*6:t<.5?r:3*t<2?e+(r-e)*(2/3-t)*6:e)*zt+.5|0}function Db(e,r,i){var n,a,s,o,u,h,l,f,d,c,p=e?t(e)?[e>>16,e>>8&zt,e&zt]:0:Et.black;if(!p){if(\",\"===e.substr(-1)&&(e=e.substr(0,e.length-1)),Et[e])p=Et[e];else if(\"#\"===e.charAt(0)){if(e.length<6&&(e=\"#\"+(n=e.charAt(1))+n+(a=e.charAt(2))+a+(s=e.charAt(3))+s+(5===e.length?e.charAt(4)+e.charAt(4):\"\")),9===e.length)return[(p=parseInt(e.substr(1,6),16))>>16,p>>8&zt,p&zt,parseInt(e.substr(7),16)/255];p=[(e=parseInt(e.substr(1),16))>>16,e>>8&zt,e&zt]}else if(\"hsl\"===e.substr(0,3))if(p=c=e.match(rt),r){if(~e.indexOf(\"=\"))return p=e.match(it),i&&p.length<4&&(p[3]=1),p}else o=+p[0]%360/360,u=p[1]/100,n=2*(h=p[2]/100)-(a=h<=.5?h*(u+1):h+u-h*u),3<p.length&&(p[3]*=1),p[0]=Cb(o+1/3,n,a),p[1]=Cb(o,n,a),p[2]=Cb(o-1/3,n,a);else p=e.match(rt)||Et.transparent;p=p.map(Number)}return r&&!c&&(n=p[0]/zt,a=p[1]/zt,s=p[2]/zt,h=((l=Math.max(n,a,s))+(f=Math.min(n,a,s)))/2,l===f?o=u=0:(d=l-f,u=.5<h?d/(2-l-f):d/(l+f),o=l===n?(a-s)/d+(a<s?6:0):l===a?(s-n)/d+2:(n-a)/d+4,o*=60),p[0]=~~(o+.5),p[1]=~~(100*u+.5),p[2]=~~(100*h+.5)),i&&p.length<4&&(p[3]=1),p}function Eb(t){var r=[],i=[],n=-1;return t.split(Rt).forEach(function(t){var e=t.match(nt)||[];r.push.apply(r,e),i.push(n+=e.length+1)}),r.c=i,r}function Fb(t,e,r){var i,n,a,s,o=\"\",u=(t+o).match(Rt),h=e?\"hsla(\":\"rgba(\",l=0;if(!u)return t;if(u=u.map(function(t){return(t=Db(t,e,1))&&h+(e?t[0]+\",\"+t[1]+\"%,\"+t[2]+\"%,\"+t[3]:t.join(\",\"))+\")\"}),r&&(a=Eb(t),(i=r.c).join(o)!==a.c.join(o)))for(s=(n=t.replace(Rt,\"1\").split(nt)).length-1;l<s;l++)o+=n[l]+(~i.indexOf(l)?u.shift()||h+\"0,0,0,0)\":(a.length?a:u.length?u:r).shift());if(!n)for(s=(n=t.split(Rt)).length-1;l<s;l++)o+=n[l]+u[l];return o+n[s]}function Ib(t){var e,r=t.join(\" \");if(Rt.lastIndex=0,Rt.test(r))return e=Ft.test(r),t[1]=Fb(t[1],e),t[0]=Fb(t[0],e,Eb(t[1])),!0}function Rb(t){var e=(t+\"\").split(\"(\"),r=Bt[e[0]];return r&&1<e.length&&r.config?r.config.apply(null,~t.indexOf(\"{\")?[function _parseObjectInString(t){for(var e,r,i,n={},a=t.substr(1,t.length-3).split(\":\"),s=a[0],o=1,u=a.length;o<u;o++)r=a[o],e=o!==u-1?r.lastIndexOf(\",\"):r.length,i=r.substr(0,e),n[s]=isNaN(i)?i.replace(Nt,\"\").trim():+i,s=r.substr(e+1).trim();return n}(e[1])]:function _valueInParentheses(t){var e=t.indexOf(\"(\")+1,r=t.indexOf(\")\"),i=t.indexOf(\"(\",e);return t.substring(e,~i&&i<r?t.indexOf(\")\",r+1):r)}(t).split(\",\").map(ra)):Bt._CE&&Yt.test(t)?Bt._CE(\"\",t):r}function Tb(t,e){for(var r,i=t._first;i;)i instanceof Zt?Tb(i,e):!i.vars.yoyoEase||i._yoyo&&i._repeat||i._yoyo===e||(i.timeline?Tb(i.timeline,e):(r=i._ease,i._ease=i._yEase,i._yEase=r,i._yoyo=e)),i=i._next}function Vb(t,e,r,i){void 0===r&&(r=function easeOut(t){return 1-e(1-t)}),void 0===i&&(i=function easeInOut(t){return t<.5?e(2*t)/2:1-e(2*(1-t))/2});var n,a={easeIn:e,easeOut:r,easeInOut:i};return ja(t,function(t){for(var e in Bt[t]=ht[t]=a,Bt[n=t.toLowerCase()]=r,a)Bt[n+(\"easeIn\"===e?\".in\":\"easeOut\"===e?\".out\":\".inOut\")]=Bt[t+\".\"+e]=a[e]}),a}function Wb(e){return function(t){return t<.5?(1-e(1-2*t))/2:.5+e(2*(t-.5))/2}}function Xb(r,t,e){function Lm(t){return 1===t?1:i*Math.pow(2,-10*t)*G((t-a)*n)+1}var i=1<=t?t:1,n=(e||(r?.3:.45))/(t<1?t:1),a=n/Z*(Math.asin(1/i)||0),s=\"out\"===r?Lm:\"in\"===r?function(t){return 1-Lm(1-t)}:Wb(Lm);return n=Z/n,s.config=function(t,e){return Xb(r,t,e)},s}function Yb(e,r){function Tm(t){return t?--t*t*((r+1)*t+r)+1:0}void 0===r&&(r=1.70158);var t=\"out\"===e?Tm:\"in\"===e?function(t){return 1-Tm(1-t)}:Wb(Tm);return t.config=function(t){return Yb(e,t)},t}var F,I,l,L,h,n,a,i,o,f,d,c,p,_,m,g,b,k,O,M,C,P,A,D,z,E,B,Y,N={autoSleep:120,force3D:\"auto\",nullTargetWarn:1,units:{lineHeight:\"\"}},j={duration:.5,overwrite:!1,delay:0},X=1e8,q=1/X,Z=2*Math.PI,W=Z/4,H=0,J=Math.sqrt,Q=Math.cos,G=Math.sin,K=\"function\"==typeof ArrayBuffer&&ArrayBuffer.isView||function(){},$=Array.isArray,tt=/random\\([^)]+\\)/g,et=/,\\s*/g,rt=/(?:-?\\.?\\d|\\.)+/gi,it=/[-+=.]*\\d+[.e\\-+]*\\d*[e\\-+]*\\d*/g,nt=/[-+=.]*\\d+[.e-]*\\d*[a-z%]*/g,at=/[-+=.]*\\d+\\.?\\d*(?:e-|e\\+)?\\d*/gi,st=/[+-]=-?[.\\d]+/,ot=/[^,'\"\\[\\]\\s]+/gi,ut=/^[+\\-=e\\s\\d]*\\d+[.\\d]*([a-z]*|%)\\s*$/i,ht={},lt={suppressEvents:!0,isStart:!0,kill:!1},ft={suppressEvents:!0,kill:!1},dt={suppressEvents:!0},ct={},pt=[],_t={},mt={},gt={},vt=30,yt=[],Tt=\"\",bt=function _merge(t,e){for(var r in e)t[r]=e[r];return t},wt=function _animationCycle(t,e){var r=Math.floor(t=la(t/e));return t&&r===t?r-1:r},xt=function _isFromOrFromStart(t){var e=t.data;return\"isFromStart\"===e||\"isStart\"===e},kt={_start:0,endTime:V,totalDuration:V},Ot=function _parsePosition(t,e,i){var n,a,s,o=t.labels,u=t._recent||kt,h=t.duration()>=X?u.endTime(!1):t._dur;return r(e)&&(isNaN(e)||e in o)?(a=e.charAt(0),s=\"%\"===e.substr(-1),n=e.indexOf(\"=\"),\"<\"===a||\">\"===a?(0<=n&&(e=e.replace(/=/,\"\")),(\"<\"===a?u._start:u.endTime(0<=u._repeat))+(parseFloat(e.substr(1))||0)*(s?(n<0?u:i).totalDuration()/100:1)):n<0?(e in o||(o[e]=h),o[e]):(a=parseFloat(e.charAt(n-1)+e.substr(n+1)),s&&i&&(a=a/100*($(i)?i[0]:i).totalDuration()),1<n?_parsePosition(t,e.substr(0,n-1),i)+a:h+a)):null==e?h:+e},Mt=function _clamp(t,e,r){return r<t?t:e<r?e:r},Ct=[].slice,Pt=function toArray(t,e,i){return l&&!e&&l.selector?l.selector(t):!r(t)||i||!n&&Lt()?$(t)?function _flatten(t,e,i){return void 0===i&&(i=[]),t.forEach(function(t){return r(t)&&!e||cb(t,1)?i.push.apply(i,Pt(t)):i.push(t)})||i}(t,i):cb(t)?Ct.call(t,0):t?[t]:[]:Ct.call((e||a).querySelectorAll(t),0)},At=function mapRange(e,t,r,i,n){var a=t-e,s=i-r;return Za(n,function(t){return r+((t-e)/a*s||0)})},Dt=function _callback(t,e,r){var i,n,a,s=t.vars,o=s[e],u=l,h=t._ctx;if(o)return i=s[e+\"Params\"],n=s.callbackScope||t,r&&pt.length&&oa(),h&&(l=h),a=i?o.apply(n,i):o.call(n),l=u,a},St=[],zt=255,Et={aqua:[0,zt,zt],lime:[0,zt,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,zt],navy:[0,0,128],white:[zt,zt,zt],olive:[128,128,0],yellow:[zt,zt,0],orange:[zt,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[zt,0,0],pink:[zt,192,203],cyan:[0,zt,zt],transparent:[zt,zt,zt,0]},Rt=function(){var t,e=\"(?:\\\\b(?:(?:rgb|rgba|hsl|hsla)\\\\(.+?\\\\))|\\\\B#(?:[0-9a-f]{3,4}){1,2}\\\\b\";for(t in Et)e+=\"|\"+t+\"\\\\b\";return new RegExp(e+\")\",\"gi\")}(),Ft=/hsl[a]?\\(/,It=(O=Date.now,M=500,C=33,P=O(),A=P,z=D=1e3/240,g={time:0,frame:0,tick:function tick(){Al(!0)},deltaRatio:function deltaRatio(t){return b/(1e3/(t||60))},wake:function wake(){o&&(!n&&x()&&(h=n=window,a=h.document||{},ht.gsap=Fe,(h.gsapVersions||(h.gsapVersions=[])).push(Fe.version),R(i||h.GreenSockGlobals||!h.gsap&&h||{}),St.forEach(zb)),m=\"undefined\"!=typeof requestAnimationFrame&&requestAnimationFrame,p&&g.sleep(),_=m||function(t){return setTimeout(t,z-1e3*g.time+1|0)},c=1,Al(2))},sleep:function sleep(){(m?cancelAnimationFrame:clearTimeout)(p),c=0,_=V},lagSmoothing:function lagSmoothing(t,e){M=t||1/0,C=Math.min(e||33,M)},fps:function fps(t){D=1e3/(t||240),z=1e3*g.time+D},add:function add(n,t,e){var a=t?function(t,e,r,i){n(t,e,r,i),g.remove(a)}:n;return g.remove(n),E[e?\"unshift\":\"push\"](a),Lt(),a},remove:function remove(t,e){~(e=E.indexOf(t))&&E.splice(e,1)&&e<=k&&k--},_listeners:E=[]}),Lt=function _wake(){return!c&&It.wake()},Bt={},Yt=/^[\\d.\\-M][\\d.\\-,\\s]/,Nt=/[\"']/g,jt=function _invertEase(e){return function(t){return 1-e(1-t)}},Vt=function _parseEase(t,e){return t&&(s(t)?t:Bt[t]||Rb(t))||e};function Al(t){var e,r,i,n,a=O()-A,s=!0===t;if((M<a||a<0)&&(P+=a-C),(0<(e=(i=(A+=a)-P)-z)||s)&&(n=++g.frame,b=i-1e3*g.time,g.time=i/=1e3,z+=e+(D<=e?4:D-e),r=1),s||(p=_(Al)),r)for(k=0;k<E.length;k++)E[k](i,b,n,t)}function jn(t){return t<Y?B*t*t:t<.7272727272727273?B*Math.pow(t-1.5/2.75,2)+.75:t<.9090909090909092?B*(t-=2.25/2.75)*t+.9375:B*Math.pow(t-2.625/2.75,2)+.984375}ja(\"Linear,Quad,Cubic,Quart,Quint,Strong\",function(t,e){var r=e<5?e+1:e;Vb(t+\",Power\"+(r-1),e?function(t){return Math.pow(t,r)}:function(t){return t},function(t){return 1-Math.pow(1-t,r)},function(t){return t<.5?Math.pow(2*t,r)/2:1-Math.pow(2*(1-t),r)/2})}),Bt.Linear.easeNone=Bt.none=Bt.Linear.easeIn,Vb(\"Elastic\",Xb(\"in\"),Xb(\"out\"),Xb()),B=7.5625,Y=1/2.75,Vb(\"Bounce\",function(t){return 1-jn(1-t)},jn),Vb(\"Expo\",function(t){return Math.pow(2,10*(t-1))*t+t*t*t*t*t*t*(1-t)}),Vb(\"Circ\",function(t){return-(J(1-t*t)-1)}),Vb(\"Sine\",function(t){return 1===t?1:1-Q(t*W)}),Vb(\"Back\",Yb(\"in\"),Yb(\"out\"),Yb()),Bt.SteppedEase=Bt.steps=ht.SteppedEase={config:function config(t,e){void 0===t&&(t=1);var r=1/t,i=t+(e?0:1),n=e?1:0;return function(t){return((i*Mt(0,.99999999,t)|0)+n)*r}}},j.ease=Bt[\"quad.out\"],ja(\"onComplete,onUpdate,onStart,onRepeat,onReverseComplete,onInterrupt\",function(t){return Tt+=t+\",\"+t+\"Params,\"});var Ut,Xt=function GSCache(t,e){this.id=H++,(t._gsap=this).target=t,this.harness=e,this.get=e?e.get:ia,this.set=e?e.getSetter:le},qt=((Ut=Animation.prototype).delay=function delay(t){return t||0===t?(this.parent&&this.parent.smoothChildTiming&&this.startTime(this._start+t-this._delay),this._delay=t,this):this._delay},Ut.duration=function duration(t){return arguments.length?this.totalDuration(0<this._repeat?t+(t+this._rDelay)*this._repeat:t):this.totalDuration()&&this._dur},Ut.totalDuration=function totalDuration(t){return arguments.length?(this._dirty=0,Ua(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},Ut.totalTime=function totalTime(t,e){if(Lt(),!arguments.length)return this._tTime;var r=this._dp;if(r&&r.smoothChildTiming&&this._ts){for(La(this,t),!r._dp||r.parent||Ma(r,this);r&&r.parent;)r.parent._time!==r._start+(0<=r._ts?r._tTime/r._ts:(r.totalDuration()-r._tTime)/-r._ts)&&r.totalTime(r._tTime,!0),r=r.parent;!this.parent&&this._dp.autoRemoveChildren&&(0<this._ts&&t<this._tDur||this._ts<0&&0<t||!this._tDur&&!t)&&Na(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&Math.abs(this._zTime)===q||!this._initted&&this._dur&&t||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),qa(this,t,e)),this},Ut.time=function time(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+Ha(this))%(this._dur+this._rDelay)||(t?this._dur:0),e):this._time},Ut.totalProgress=function totalProgress(t,e){return arguments.length?this.totalTime(this.totalDuration()*t,e):this.totalDuration()?Math.min(1,this._tTime/this._tDur):0<=this.rawTime()&&this._initted?1:0},Ut.progress=function progress(t,e){return arguments.length?this.totalTime(this.duration()*(!this._yoyo||1&this.iteration()?t:1-t)+Ha(this),e):this.duration()?Math.min(1,this._time/this._dur):0<this.rawTime()?1:0},Ut.iteration=function iteration(t,e){var r=this.duration()+this._rDelay;return arguments.length?this.totalTime(this._time+(t-1)*r,e):this._repeat?wt(this._tTime,r)+1:1},Ut.timeScale=function timeScale(t,e){if(!arguments.length)return this._rts===-q?0:this._rts;if(this._rts===t)return this;var r=this.parent&&this._ts?Ja(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||t===-q?0:this._rts,this.totalTime(Mt(-Math.abs(this._delay),this.totalDuration(),r),!1!==e),Ka(this),function _recacheAncestors(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t}(this)},Ut.paused=function paused(t){return arguments.length?(this._ps!==t&&((this._ps=t)?(this._pTime=this._tTime||Math.max(-this._delay,this.rawTime()),this._ts=this._act=0):(Lt(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&Math.abs(this._zTime)!==q&&(this._tTime-=q)))),this):this._ps},Ut.startTime=function startTime(t){if(arguments.length){this._start=la(t);var e=this.parent||this._dp;return!e||!e._sort&&this.parent||Na(e,this,this._start-this._delay),this}return this._start},Ut.endTime=function endTime(t){return this._start+(w(t)?this.totalDuration():this.duration())/Math.abs(this._ts||1)},Ut.rawTime=function rawTime(t){var e=this.parent||this._dp;return e?t&&(!this._ts||this._repeat&&this._time&&this.totalProgress()<1)?this._tTime%(this._dur+this._rDelay):this._ts?Ja(e.rawTime(t),this):this._tTime:this._tTime},Ut.revert=function revert(t){void 0===t&&(t=dt);var e=I;return I=t,pa(this)&&(this.timeline&&this.timeline.revert(t),this.totalTime(-.01,t.suppressEvents)),\"nested\"!==this.data&&!1!==t.kill&&this.kill(),I=e,this},Ut.globalTime=function globalTime(t){for(var e=this,r=arguments.length?t:e.rawTime();e;)r=e._start+r/(Math.abs(e._ts)||1),e=e._dp;return!this.parent&&this._sat?this._sat.globalTime(t):r},Ut.repeat=function repeat(t){return arguments.length?(this._repeat=t===1/0?-2:t,Va(this)):-2===this._repeat?1/0:this._repeat},Ut.repeatDelay=function repeatDelay(t){if(arguments.length){var e=this._time;return this._rDelay=t,Va(this),e?this.time(e):this}return this._rDelay},Ut.yoyo=function yoyo(t){return arguments.length?(this._yoyo=t,this):this._yoyo},Ut.seek=function seek(t,e){return this.totalTime(Ot(this,t),w(e))},Ut.restart=function restart(t,e){return this.play().totalTime(t?-this._delay:0,w(e)),this._dur||(this._zTime=-q),this},Ut.play=function play(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},Ut.reverse=function reverse(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},Ut.pause=function pause(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},Ut.resume=function resume(){return this.paused(!1)},Ut.reversed=function reversed(t){return arguments.length?(!!t!==this.reversed()&&this.timeScale(-this._rts||(t?-q:0)),this):this._rts<0},Ut.invalidate=function invalidate(){return this._initted=this._act=0,this._zTime=-q,this},Ut.isActive=function isActive(){var t,e=this.parent||this._dp,r=this._start;return!(e&&!(this._ts&&this._initted&&e.isActive()&&(t=e.rawTime(!0))>=r&&t<this.endTime(!0)-q))},Ut.eventCallback=function eventCallback(t,e,r){var i=this.vars;return 1<arguments.length?(e?(i[t]=e,r&&(i[t+\"Params\"]=r),\"onUpdate\"===t&&(this._onUpdate=e)):delete i[t],this):i[t]},Ut.then=function then(t){var i=this,n=i._prom;return new Promise(function(e){function Fo(){var t=i.then;i.then=null,n&&n(),s(r)&&(r=r(i))&&(r.then||r===i)&&(i.then=t),e(r),i.then=t}var r=s(t)?t:sa;i._initted&&1===i.totalProgress()&&0<=i._ts||!i._tTime&&i._ts<0?Fo():i._prom=Fo})},Ut.kill=function kill(){wb(this)},Animation);function Animation(t){this.vars=t,this._delay=+t.delay||0,(this._repeat=t.repeat===1/0?-2:t.repeat||0)&&(this._rDelay=t.repeatDelay||0,this._yoyo=!!t.yoyo||!!t.yoyoEase),this._ts=1,Ua(this,+t.duration,1,1),this.data=t.data,l&&(this._ctx=l).data.push(this),c||It.wake()}ta(qt.prototype,{_time:0,_start:0,_end:0,_tTime:0,_tDur:0,_dirty:0,_repeat:0,_yoyo:!1,parent:null,_initted:!1,_rDelay:0,_ts:1,_dp:0,ratio:0,_zTime:-q,_prom:0,_ps:!1,_rts:1});var Zt=function(i){function Timeline(t,e){var r;return void 0===t&&(t={}),(r=i.call(this,t)||this).labels={},r.smoothChildTiming=!!t.smoothChildTiming,r.autoRemoveChildren=!!t.autoRemoveChildren,r._sort=w(t.sortChildren),L&&Na(t.parent||L,_assertThisInitialized(r),e),t.reversed&&r.reverse(),t.paused&&r.paused(!0),t.scrollTrigger&&Oa(_assertThisInitialized(r),t.scrollTrigger),r}_inheritsLoose(Timeline,i);var e=Timeline.prototype;return e.to=function to(t,e,r){return Ya(0,arguments,this),this},e.from=function from(t,e,r){return Ya(1,arguments,this),this},e.fromTo=function fromTo(t,e,r,i){return Ya(2,arguments,this),this},e.set=function set(t,e,r){return e.duration=0,e.parent=this,ya(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new te(t,e,Ot(this,r),1),this},e.call=function call(t,e,r){return Na(this,te.delayedCall(0,t,e),r)},e.staggerTo=function staggerTo(t,e,r,i,n,a,s){return r.duration=e,r.stagger=r.stagger||i,r.onComplete=a,r.onCompleteParams=s,r.parent=this,new te(t,r,Ot(this,n)),this},e.staggerFrom=function staggerFrom(t,e,r,i,n,a,s){return r.runBackwards=1,ya(r).immediateRender=w(r.immediateRender),this.staggerTo(t,e,r,i,n,a,s)},e.staggerFromTo=function staggerFromTo(t,e,r,i,n,a,s,o){return i.startAt=r,ya(i).immediateRender=w(i.immediateRender),this.staggerTo(t,e,i,n,a,s,o)},e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_=this._time,m=this._dirty?this.totalDuration():this._tDur,g=this._dur,v=t<=0?0:la(t),y=this._zTime<0!=t<0&&(this._initted||!g);if(this!==L&&m<v&&0<=t&&(v=m),v!==this._tTime||r||y){if(_!==this._time&&g&&(v+=this._time-_,t+=this._time-_),i=v,f=this._start,u=!(l=this._ts),y&&(g||(_=this._zTime),!t&&e||(this._zTime=t)),this._repeat){if(c=this._yoyo,o=g+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*o+t,e,r);if(i=la(v%o),v===m?(s=this._repeat,i=g):((s=~~(d=la(v/o)))&&s===d&&(i=g,s--),g<i&&(i=g)),d=wt(this._tTime,o),!_&&this._tTime&&d!==s&&this._tTime-d*o-this._dur<=0&&(d=s),c&&1&s&&(i=g-i,p=1),s!==d&&!this._lock){var T=c&&1&d,b=T===(c&&1&s);if(s<d&&(T=!T),_=T?0:v%g?g:v,this._lock=1,this.render(_||(p?0:la(s*o)),e,!g)._lock=0,this._tTime=v,!e&&this.parent&&Dt(this,\"onRepeat\"),this.vars.repeatRefresh&&!p&&(this.invalidate()._lock=1,d=s),_&&_!==this._time||u!=!this._ts||this.vars.onRepeat&&!this.parent&&!this._act)return this;if(g=this._dur,m=this._tDur,b&&(this._lock=2,_=T?g:-1e-4,this.render(_,!0),this.vars.repeatRefresh&&!p&&this.invalidate()),this._lock=0,!this._ts&&!u)return this;Tb(this,p)}}if(this._hasPause&&!this._forcing&&this._lock<2&&(h=function _findNextPauseTween(t,e,r){var i;if(e<r)for(i=t._first;i&&i._start<=r;){if(\"isPause\"===i.data&&i._start>e)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if(\"isPause\"===i.data&&i._start<e)return i;i=i._prev}}(this,la(_),la(i)))&&(v-=i-(i=h._start)),this._tTime=v,this._time=i,this._act=!l,this._initted||(this._onUpdate=this.vars.onUpdate,this._initted=1,this._zTime=t,_=0),!_&&v&&g&&!e&&!d&&(Dt(this,\"onStart\"),this._tTime!==v))return this;if(_<=i&&0<=t)for(n=this._first;n;){if(a=n._next,(n._act||i>=n._start)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(i-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(i-n._start)*n._ts,e,r),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=-q);break}}n=a}else{n=this._last;for(var w=t<0?t:i;n;){if(a=n._prev,(n._act||w<=n._end)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(w-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(w-n._start)*n._ts,e,r||I&&pa(n)),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=w?-q:q);break}}n=a}}if(h&&!e&&(this.pause(),h.render(_<=i?0:-q)._zTime=_<=i?1:-1,this._ts))return this._start=f,Ka(this),this.render(t,e,r);this._onUpdate&&!e&&Dt(this,\"onUpdate\",!0),(v===m&&this._tTime>=this.totalDuration()||!v&&_)&&(f!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||(!t&&g||!(v===m&&0<this._ts||!v&&this._ts<0)||Ca(this,1),e||t<0&&!_||!v&&!_&&m||(Dt(this,v===m&&0<=t?\"onComplete\":\"onReverseComplete\",!0),!this._prom||v<m&&0<this.timeScale()||this._prom())))}return this},e.add=function add(e,i){var n=this;if(t(i)||(i=Ot(this,i,e)),!(e instanceof qt)){if($(e))return e.forEach(function(t){return n.add(t,i)}),this;if(r(e))return this.addLabel(e,i);if(!s(e))return this;e=te.delayedCall(0,e)}return this!==e?Na(this,e,i):this},e.getChildren=function getChildren(t,e,r,i){void 0===t&&(t=!0),void 0===e&&(e=!0),void 0===r&&(r=!0),void 0===i&&(i=-X);for(var n=[],a=this._first;a;)a._start>=i&&(a instanceof te?e&&n.push(a):(r&&n.push(a),t&&n.push.apply(n,a.getChildren(!0,e,r)))),a=a._next;return n},e.getById=function getById(t){for(var e=this.getChildren(1,1,1),r=e.length;r--;)if(e[r].vars.id===t)return e[r]},e.remove=function remove(t){return r(t)?this.removeLabel(t):s(t)?this.killTweensOf(t):(t.parent===this&&Ba(this,t),t===this._recent&&(this._recent=this._last),Da(this))},e.totalTime=function totalTime(t,e){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=la(It.time-(0<this._ts?t/this._ts:(this.totalDuration()-t)/-this._ts))),i.prototype.totalTime.call(this,t,e),this._forcing=0,this):this._tTime},e.addLabel=function addLabel(t,e){return this.labels[t]=Ot(this,e),this},e.removeLabel=function removeLabel(t){return delete this.labels[t],this},e.addPause=function addPause(t,e,r){var i=te.delayedCall(0,e||V,r);return i.data=\"isPause\",this._hasPause=1,Na(this,i,Ot(this,t))},e.removePause=function removePause(t){var e=this._first;for(t=Ot(this,t);e;)e._start===t&&\"isPause\"===e.data&&Ca(e),e=e._next},e.killTweensOf=function killTweensOf(t,e,r){for(var i=this.getTweensOf(t,r),n=i.length;n--;)Wt!==i[n]&&i[n].kill(t,e);return this},e.getTweensOf=function getTweensOf(e,r){for(var i,n=[],a=Pt(e),s=this._first,o=t(r);s;)s instanceof te?na(s._targets,a)&&(o?(!Wt||s._initted&&s._ts)&&s.globalTime(0)<=r&&s.globalTime(s.totalDuration())>r:!r||s.isActive())&&n.push(s):(i=s.getTweensOf(a,r)).length&&n.push.apply(n,i),s=s._next;return n},e.tweenTo=function tweenTo(t,e){e=e||{};var r,i=this,n=Ot(i,t),a=e.startAt,s=e.onStart,o=e.onStartParams,u=e.immediateRender,h=te.to(i,ta({ease:e.ease||\"none\",lazy:!1,immediateRender:!1,time:n,overwrite:\"auto\",duration:e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale())||q,onStart:function onStart(){if(i.pause(),!r){var t=e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale());h._dur!==t&&Ua(h,t,0,1).render(h._time,!0,!0),r=1}s&&s.apply(h,o||[])}},e));return u?h.render(0):h},e.tweenFromTo=function tweenFromTo(t,e,r){return this.tweenTo(e,ta({startAt:{time:Ot(this,t)}},r))},e.recent=function recent(){return this._recent},e.nextLabel=function nextLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t))},e.previousLabel=function previousLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t),1)},e.currentLabel=function currentLabel(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+q)},e.shiftChildren=function shiftChildren(t,e,r){void 0===r&&(r=0);var i,n=this._first,a=this.labels;for(t=la(t);n;)n._start>=r&&(n._start+=t,n._end+=t),n=n._next;if(e)for(i in a)a[i]>=r&&(a[i]+=t);return Da(this)},e.invalidate=function invalidate(t){var e=this._first;for(this._lock=0;e;)e.invalidate(t),e=e._next;return i.prototype.invalidate.call(this,t)},e.clear=function clear(t){void 0===t&&(t=!0);for(var e,r=this._first;r;)e=r._next,this.remove(r),r=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),Da(this)},e.totalDuration=function totalDuration(t){var e,r,i,n=0,a=this,s=a._last,o=X;if(arguments.length)return a.timeScale((a._repeat<0?a.duration():a.totalDuration())/(a.reversed()?-t:t));if(a._dirty){for(i=a.parent;s;)e=s._prev,s._dirty&&s.totalDuration(),o<(r=s._start)&&a._sort&&s._ts&&!a._lock?(a._lock=1,Na(a,s,r-s._delay,1)._lock=0):o=r,r<0&&s._ts&&(n-=r,(!i&&!a._dp||i&&i.smoothChildTiming)&&(a._start+=la(r/a._ts),a._time-=r,a._tTime-=r),a.shiftChildren(-r,!1,-Infinity),o=0),s._end>n&&s._ts&&(n=s._end),s=e;Ua(a,a===L&&a._time>n?a._time:n,1,1),a._dirty=0}return a._tDur},Timeline.updateRoot=function updateRoot(t){if(L._ts&&(qa(L,Ja(t,L)),f=It.frame),It.frame>=vt){vt+=N.autoSleep||120;var e=L._first;if((!e||!e._ts)&&N.autoSleep&&It._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||It.sleep()}}},Timeline}(qt);ta(Zt.prototype,{_lock:0,_hasPause:0,_forcing:0});function dc(t,e,i,n,a,o){var u,h,l,f;if(mt[t]&&!1!==(u=new mt[t]).init(a,u.rawVars?e[t]:function _processVars(t,e,i,n,a){if(s(t)&&(t=Gt(t,a,e,i,n)),!v(t)||t.style&&t.nodeType||$(t)||K(t))return r(t)?Gt(t,a,e,i,n):t;var o,u={};for(o in t)u[o]=Gt(t[o],a,e,i,n);return u}(e[t],n,a,o,i),i,n,o)&&(i._pt=h=new we(i._pt,a,t,0,1,u.render,u,0,u.priority),i!==d))for(l=i._ptLookup[i._targets.indexOf(a)],f=u._props.length;f--;)l[u._props[f]]=h;return u}function jc(t,r,e,i){var n,a,s=r.ease||i||\"power1.inOut\";if($(r))a=e[t]||(e[t]=[]),r.forEach(function(t,e){return a.push({t:e/(r.length-1)*100,v:t,e:s})});else for(n in r)a=e[n]||(e[n]=[]),\"ease\"===n||a.push({t:parseFloat(t),v:r[n],e:s})}var Wt,Ht,Jt=function _addPropTween(t,e,i,n,a,o,u,h,l,f){s(n)&&(n=n(a||0,t,o));var d,c=t[e],p=\"get\"!==i?i:s(c)?l?t[e.indexOf(\"set\")||!s(t[\"get\"+e.substr(3)])?e:\"get\"+e.substr(3)](l):t[e]():c,_=s(c)?l?ue:re:ee;if(r(n)&&(~n.indexOf(\"random(\")&&(n=rb(n)),\"=\"===n.charAt(1)&&(!(d=ma(p,n)+(_a(p)||0))&&0!==d||(n=d))),!f||p!==n||Ht)return isNaN(p*n)||\"\"===n?(c||e in t||S(e,n),function _addComplexStringPropTween(t,e,r,i,n,a,s){var o,u,h,l,f,d,c,p,_=new we(this._pt,t,e,0,1,ge,null,n),m=0,g=0;for(_.b=r,_.e=i,r+=\"\",(c=~(i+=\"\").indexOf(\"random(\"))&&(i=rb(i)),a&&(a(p=[r,i],t,e),r=p[0],i=p[1]),u=r.match(at)||[];o=at.exec(i);)l=o[0],f=i.substring(m,o.index),h?h=(h+1)%5:\"rgba(\"===f.substr(-5)&&(h=1),l!==u[g++]&&(d=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:\",\",s:d,c:\"=\"===l.charAt(1)?ma(d,l)-d:parseFloat(l)-d,m:h&&h<4?Math.round:0},m=at.lastIndex);return _.c=m<i.length?i.substring(m,i.length):\"\",_.fp=s,(st.test(i)||c)&&(_.e=0),this._pt=_}.call(this,t,e,p,n,_,h||N.stringFilter,l)):(d=new we(this._pt,t,e,+p||0,n-(p||0),\"boolean\"==typeof c?_e:ce,0,_),l&&(d.fp=l),u&&d.modifier(u,this,t),this._pt=d)},Qt=function _initTween(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_,m=t.vars,g=m.ease,v=m.startAt,y=m.immediateRender,T=m.lazy,b=m.onUpdate,x=m.runBackwards,k=m.yoyoEase,O=m.keyframes,M=m.autoRevert,C=t._dur,P=t._startAt,A=t._targets,D=t.parent,S=D&&\"nested\"===D.data?D.vars.targets:A,z=\"auto\"===t._overwrite&&!F,E=t.timeline;if(!E||O&&g||(g=\"none\"),t._ease=Vt(g,j.ease),t._yEase=k?jt(Vt(!0===k?g:k,j.ease)):0,k&&t._yoyo&&!t._repeat&&(k=t._yEase,t._yEase=t._ease,t._ease=k),t._from=!E&&!!m.runBackwards,!E||O&&!m.stagger){if(p=(l=A[0]?ha(A[0]).harness:0)&&m[l.prop],i=xa(m,ct),P&&(P._zTime<0&&P.progress(1),e<0&&x&&y&&!M?P.render(-1,!0):P.revert(x&&C?ft:lt),P._lazy=0),v){if(Ca(t._startAt=te.set(A,ta({data:\"isStart\",overwrite:!1,parent:D,immediateRender:!0,lazy:!P&&w(T),startAt:null,delay:0,onUpdate:b&&function(){return Dt(t,\"onUpdate\")},stagger:0},v))),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I||!y&&!M)&&t._startAt.revert(ft),y&&C&&e<=0&&r<=0)return void(e&&(t._zTime=e))}else if(x&&C&&!P)if(e&&(y=!1),a=ta({overwrite:!1,data:\"isFromStart\",lazy:y&&!P&&w(T),immediateRender:y,stagger:0,parent:D},i),p&&(a[l.prop]=p),Ca(t._startAt=te.set(A,a)),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I?t._startAt.revert(ft):t._startAt.render(-1,!0)),t._zTime=e,y){if(!e)return}else _initTween(t._startAt,q,q);for(t._pt=t._ptCache=0,T=C&&w(T)||T&&!C,n=0;n<A.length;n++){if(h=(o=A[n])._gsap||ga(A)[n]._gsap,t._ptLookup[n]=d={},_t[h.id]&&pt.length&&oa(),c=S===A?n:S.indexOf(o),l&&!1!==(f=new l).init(o,p||i,t,c,S)&&(t._pt=s=new we(t._pt,o,f.name,0,1,f.render,f,0,f.priority),f._props.forEach(function(t){d[t]=s}),f.priority&&(u=1)),!l||p)for(a in i)mt[a]&&(f=dc(a,i,t,c,o,S))?f.priority&&(u=1):d[a]=s=Jt.call(t,o,a,\"get\",i[a],c,S,0,m.stringFilter);t._op&&t._op[n]&&t.kill(o,t._op[n]),z&&t._pt&&(Wt=t,L.killTweensOf(o,d,t.globalTime(e)),_=!t.parent,Wt=0),t._pt&&T&&(_t[h.id]=1)}u&&be(t),t._onInit&&t._onInit(t)}t._onUpdate=b,t._initted=(!t._op||t._pt)&&!_,O&&e<=0&&E.render(X,!0,!0)},Gt=function _parseFuncOrString(t,e,i,n,a){return s(t)?t.call(e,i,n,a):r(t)&&~t.indexOf(\"random(\")?rb(t):t},Kt=Tt+\"repeat,repeatDelay,yoyo,repeatRefresh,yoyoEase,autoRevert\",$t={};ja(Kt+\",id,stagger,delay,duration,paused,scrollTrigger\",function(t){return $t[t]=1});var te=function(R){function Tween(e,r,i,n){var a;\"number\"==typeof r&&(i.duration=r,r=i,i=null);var s,o,u,h,l,f,d,c,p=(a=R.call(this,n?r:ya(r))||this).vars,_=p.duration,m=p.delay,g=p.immediateRender,b=p.stagger,x=p.overwrite,k=p.keyframes,O=p.defaults,M=p.scrollTrigger,C=p.yoyoEase,P=r.parent||L,A=($(e)||K(e)?t(e[0]):\"length\"in r)?[e]:Pt(e);if(a._targets=A.length?ga(A):T(\"GSAP target \"+e+\" not found. https://gsap.com\",!N.nullTargetWarn)||[],a._ptLookup=[],a._overwrite=x,k||b||y(_)||y(m)){if(r=a.vars,(s=a.timeline=new Zt({data:\"nested\",defaults:O||{},targets:P&&\"nested\"===P.data?P.vars.targets:A})).kill(),s.parent=s._dp=_assertThisInitialized(a),s._start=0,b||y(_)||y(m)){if(h=A.length,d=b&&hb(b),v(b))for(l in b)~Kt.indexOf(l)&&((c=c||{})[l]=b[l]);for(o=0;o<h;o++)(u=xa(r,$t)).stagger=0,C&&(u.yoyoEase=C),c&&bt(u,c),f=A[o],u.duration=+Gt(_,_assertThisInitialized(a),o,f,A),u.delay=(+Gt(m,_assertThisInitialized(a),o,f,A)||0)-a._delay,!b&&1===h&&u.delay&&(a._delay=m=u.delay,a._start+=m,u.delay=0),s.to(f,u,d?d(o,f,A):0),s._ease=Bt.none;s.duration()?_=m=0:a.timeline=0}else if(k){ya(ta(s.vars.defaults,{ease:\"none\"})),s._ease=Vt(k.ease||r.ease||\"none\");var D,S,z,E=0;if($(k))k.forEach(function(t){return s.to(A,t,\">\")}),s.duration();else{for(l in u={},k)\"ease\"===l||\"easeEach\"===l||jc(l,k[l],u,k.easeEach);for(l in u)for(D=u[l].sort(function(t,e){return t.t-e.t}),o=E=0;o<D.length;o++)(z={ease:(S=D[o]).e,duration:(S.t-(o?D[o-1].t:0))/100*_})[l]=S.v,s.to(A,z,E),E+=z.duration;s.duration()<_&&s.to({},{duration:_-s.duration()})}}_||a.duration(_=s.duration())}else a.timeline=0;return!0!==x||F||(Wt=_assertThisInitialized(a),L.killTweensOf(A),Wt=0),Na(P,_assertThisInitialized(a),i),r.reversed&&a.reverse(),r.paused&&a.paused(!0),(g||!_&&!k&&a._start===la(P._time)&&w(g)&&function _hasNoPausedAncestors(t){return!t||t._ts&&_hasNoPausedAncestors(t.parent)}(_assertThisInitialized(a))&&\"nested\"!==P.data)&&(a._tTime=-q,a.render(Math.max(0,-m)||0)),M&&Oa(_assertThisInitialized(a),M),a}_inheritsLoose(Tween,R);var e=Tween.prototype;return e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d=this._time,c=this._tDur,p=this._dur,_=t<0,m=c-q<t&&!_?c:t<q?0:t;if(p){if(m!==this._tTime||!t||r||!this._initted&&this._tTime||this._startAt&&this._zTime<0!=_||this._lazy){if(i=m,l=this.timeline,this._repeat){if(s=p+this._rDelay,this._repeat<-1&&_)return this.totalTime(100*s+t,e,r);if(i=la(m%s),m===c?(a=this._repeat,i=p):(a=~~(o=la(m/s)))&&a===o?(i=p,a--):p<i&&(i=p),(u=this._yoyo&&1&a)&&(f=this._yEase,i=p-i),o=wt(this._tTime,s),i===d&&!r&&this._initted&&a===o)return this._tTime=m,this;a!==o&&(l&&this._yEase&&Tb(l,u),this.vars.repeatRefresh&&!u&&!this._lock&&i!==s&&this._initted&&(this._lock=r=1,this.render(la(s*a),!0).invalidate()._lock=0))}if(!this._initted){if(Pa(this,_?t:i,r,e,m))return this._tTime=0,this;if(!(d===this._time||r&&this.vars.repeatRefresh&&a!==o))return this;if(p!==this._dur)return this.render(t,e,r)}if(this._tTime=m,this._time=i,!this._act&&this._ts&&(this._act=1,this._lazy=0),this.ratio=h=(f||this._ease)(i/p),this._from&&(this.ratio=h=1-h),!d&&m&&!e&&!o&&(Dt(this,\"onStart\"),this._tTime!==m))return this;for(n=this._pt;n;)n.r(h,n.d),n=n._next;l&&l.render(t<0?t:l._dur*l._ease(i/this._dur),e,r)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(_&&Fa(this,t,0,r),Dt(this,\"onUpdate\")),this._repeat&&a!==o&&this.vars.onRepeat&&!e&&this.parent&&Dt(this,\"onRepeat\"),m!==this._tDur&&m||this._tTime!==m||(_&&!this._onUpdate&&Fa(this,t,0,!0),!t&&p||!(m===this._tDur&&0<this._ts||!m&&this._ts<0)||Ca(this,1),e||_&&!d||!(m||d||u)||(Dt(this,m===c?\"onComplete\":\"onReverseComplete\",!0),!this._prom||m<c&&0<this.timeScale()||this._prom()))}}else!function _renderZeroDurationTween(t,e,r,i){var n,a,s,o=t.ratio,u=e<0||!e&&(!t._start&&function _parentPlayheadIsBeforeStart(t){var e=t.parent;return e&&e._ts&&e._initted&&!e._lock&&(e.rawTime()<0||_parentPlayheadIsBeforeStart(e))}(t)&&(t._initted||!xt(t))||(t._ts<0||t._dp._ts<0)&&!xt(t))?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=Mt(0,t._tDur,e),a=wt(l,h),t._yoyo&&1&a&&(u=1-u),a!==wt(t._tTime,h)&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||I||i||t._zTime===q||!e&&t._zTime){if(!t._initted&&Pa(t,e,i,r,l))return;for(s=t._zTime,t._zTime=e||(r?q:0),r=r||e&&!s,t.ratio=u,t._from&&(u=1-u),t._time=0,t._tTime=l,n=t._pt;n;)n.r(u,n.d),n=n._next;e<0&&Fa(t,e,0,!0),t._onUpdate&&!r&&Dt(t,\"onUpdate\"),l&&t._repeat&&!r&&t.parent&&Dt(t,\"onRepeat\"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&Ca(t,1),r||I||(Dt(t,u?\"onComplete\":\"onReverseComplete\",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,r);return this},e.targets=function targets(){return this._targets},e.invalidate=function invalidate(t){return t&&this.vars.runBackwards||(this._startAt=0),this._pt=this._op=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(t),R.prototype.invalidate.call(this,t)},e.resetTo=function resetTo(t,e,r,i,n){c||It.wake(),this._ts||this.play();var a,s=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||Qt(this,s),a=this._ease(s/this._dur),function _updatePropTweens(t,e,r,i,n,a,s,o){var u,h,l,f,d=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!d)for(d=t._ptCache[e]=[],l=t._ptLookup,f=t._targets.length;f--;){if((u=l[f][e])&&u.d&&u.d._pt)for(u=u.d._pt;u&&u.p!==e&&u.fp!==e;)u=u._next;if(!u)return Ht=1,t.vars[e]=\"+=0\",Qt(t,s),Ht=0,o?T(e+\" not eligible for reset\"):1;d.push(u)}for(f=d.length;f--;)(u=(h=d[f])._pt||h).s=!i&&0!==i||n?u.s+(i||0)+a*u.c:i,u.c=r-u.s,h.e&&(h.e=ka(r)+_a(h.e)),h.b&&(h.b=u.s+_a(h.b))}(this,t,e,r,i,a,s,n)?this.resetTo(t,e,r,i,1):(La(this,0),this.parent||Aa(this._dp,this,\"_first\",\"_last\",this._dp._sort?\"_start\":0),this.render(0))},e.kill=function kill(t,e){if(void 0===e&&(e=\"all\"),!(t||e&&\"all\"!==e))return this._lazy=this._pt=0,this.parent?wb(this):this.scrollTrigger&&this.scrollTrigger.kill(!!I),this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Wt&&!0!==Wt.vars.overwrite)._first||wb(this),this.parent&&i!==this.timeline.totalDuration()&&Ua(this,this._dur*this.timeline._tDur/i,0,1),this}var n,a,s,o,u,h,l,f=this._targets,d=t?Pt(t):f,c=this._ptLookup,p=this._pt;if((!e||\"all\"===e)&&function _arraysMatch(t,e){for(var r=t.length,i=r===e.length;i&&r--&&t[r]===e[r];);return r<0}(f,d))return\"all\"===e&&(this._pt=0),wb(this);for(n=this._op=this._op||[],\"all\"!==e&&(r(e)&&(u={},ja(e,function(t){return u[t]=1}),e=u),e=function _addAliasesToVars(t,e){var r,i,n,a,s=t[0]?ha(t[0]).harness:0,o=s&&s.aliases;if(!o)return e;for(i in r=bt({},e),o)if(i in r)for(n=(a=o[i].split(\",\")).length;n--;)r[a[n]]=r[i];return r}(f,e)),l=f.length;l--;)if(~d.indexOf(f[l]))for(u in a=c[l],\"all\"===e?(n[l]=e,o=a,s={}):(s=n[l]=n[l]||{},o=e),o)(h=a&&a[u])&&(\"kill\"in h.d&&!0!==h.d.kill(u)||Ba(this,h,\"_pt\"),delete a[u]),\"all\"!==s&&(s[u]=1);return this._initted&&!this._pt&&p&&wb(this),this},Tween.to=function to(t,e,r){return new Tween(t,e,r)},Tween.from=function from(t,e){return Ya(1,arguments)},Tween.delayedCall=function delayedCall(t,e,r,i){return new Tween(e,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:e,onReverseComplete:e,onCompleteParams:r,onReverseCompleteParams:r,callbackScope:i})},Tween.fromTo=function fromTo(t,e,r){return Ya(2,arguments)},Tween.set=function set(t,e){return e.duration=0,e.repeatDelay||(e.repeat=0),new Tween(t,e)},Tween.killTweensOf=function killTweensOf(t,e,r){return L.killTweensOf(t,e,r)},Tween}(qt);ta(te.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),ja(\"staggerTo,staggerFrom,staggerFromTo\",function(r){te[r]=function(){var t=new Zt,e=Ct.call(arguments,0);return e.splice(\"staggerFromTo\"===r?5:4,0,0),t[r].apply(t,e)}});function rc(t,e,r){return t.setAttribute(e,r)}function zc(t,e,r,i){i.mSet(t,e,i.m.call(i.tween,r,i.mt),i)}var ee=function _setterPlain(t,e,r){return t[e]=r},re=function _setterFunc(t,e,r){return t[e](r)},ue=function _setterFuncWithParam(t,e,r,i){return t[e](i.fp,r)},le=function _getSetter(t,e){return s(t[e])?re:u(t[e])&&t.setAttribute?rc:ee},ce=function _renderPlain(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},_e=function _renderBoolean(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},ge=function _renderComplexString(t,e){var r=e._pt,i=\"\";if(!t&&e.b)i=e.b;else if(1===t&&e.e)i=e.e;else{for(;r;)i=r.p+(r.m?r.m(r.s+r.c*t):Math.round(1e4*(r.s+r.c*t))/1e4)+i,r=r._next;i+=e.c}e.set(e.t,e.p,i,e)},ve=function _renderPropTweens(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},ye=function _addPluginModifier(t,e,r,i){for(var n,a=this._pt;a;)n=a._next,a.p===i&&a.modifier(t,e,r),a=n},Te=function _killPropTweensOf(t){for(var e,r,i=this._pt;i;)r=i._next,i.p===t&&!i.op||i.op===t?Ba(this,i,\"_pt\"):i.dep||(e=1),i=r;return!e},be=function _sortPropTweensByPriority(t){for(var e,r,i,n,a=t._pt;a;){for(e=a._next,r=i;r&&r.pr>a.pr;)r=r._next;(a._prev=r?r._prev:n)?a._prev._next=a:i=a,(a._next=r)?r._prev=a:n=a,a=e}t._pt=i},we=(PropTween.prototype.modifier=function modifier(t,e,r){this.mSet=this.mSet||this.set,this.set=zc,this.m=t,this.mt=r,this.tween=e},PropTween);function PropTween(t,e,r,i,n,a,s,o,u){this.t=e,this.s=i,this.c=n,this.p=r,this.r=a||ce,this.d=s||this,this.set=o||ee,this.pr=u||0,(this._next=t)&&(t._prev=this)}ja(Tt+\"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger\",function(t){return ct[t]=1}),ht.TweenMax=ht.TweenLite=te,ht.TimelineLite=ht.TimelineMax=Zt,L=new Zt({sortChildren:!1,defaults:j,autoRemoveChildren:!0,id:\"root\",smoothChildTiming:!0}),N.stringFilter=Ib;function Hc(t){return(Oe[t]||Me).map(function(t){return t()})}function Ic(){var t=Date.now(),o=[];2<t-Ce&&(Hc(\"matchMediaInit\"),ke.forEach(function(t){var e,r,i,n,a=t.queries,s=t.conditions;for(r in a)(e=h.matchMedia(a[r]).matches)&&(i=1),e!==s[r]&&(s[r]=e,n=1);n&&(t.revert(),i&&o.push(t))}),Hc(\"matchMediaRevert\"),o.forEach(function(e){return e.onMatch(e,function(t){return e.add(null,t)})}),Ce=t,Hc(\"matchMedia\"))}var xe,ke=[],Oe={},Me=[],Ce=0,Pe=0,De=((xe=Context.prototype).add=function add(t,i,n){function Jw(){var t,e=l,r=a.selector;return e&&e!==a&&e.data.push(a),n&&(a.selector=fb(n)),l=a,t=i.apply(a,arguments),s(t)&&a._r.push(t),l=e,a.selector=r,a.isReverted=!1,t}s(t)&&(n=i,i=t,t=s);var a=this;return a.last=Jw,t===s?Jw(a,function(t){return a.add(null,t)}):t?a[t]=Jw:Jw},xe.ignore=function ignore(t){var e=l;l=null,t(this),l=e},xe.getTweens=function getTweens(){var e=[];return this.data.forEach(function(t){return t instanceof Context?e.push.apply(e,t.getTweens()):t instanceof te&&!(t.parent&&\"nested\"===t.parent.data)&&e.push(t)}),e},xe.clear=function clear(){this._r.length=this.data.length=0},xe.kill=function kill(i,t){var n=this;if(i?function(){for(var t,e=n.getTweens(),r=n.data.length;r--;)\"isFlip\"===(t=n.data[r]).data&&(t.revert(),t.getChildren(!0,!0,!1).forEach(function(t){return e.splice(e.indexOf(t),1)}));for(e.map(function(t){return{g:t._dur||t._delay||t._sat&&!t._sat.vars.immediateRender?t.globalTime(0):-1/0,t:t}}).sort(function(t,e){return e.g-t.g||-1/0}).forEach(function(t){return t.t.revert(i)}),r=n.data.length;r--;)(t=n.data[r])instanceof Zt?\"nested\"!==t.data&&(t.scrollTrigger&&t.scrollTrigger.revert(),t.kill()):t instanceof te||!t.revert||t.revert(i);n._r.forEach(function(t){return t(i,n)}),n.isReverted=!0}():this.data.forEach(function(t){return t.kill&&t.kill()}),this.clear(),t)for(var e=ke.length;e--;)ke[e].id===this.id&&ke.splice(e,1)},xe.revert=function revert(t){this.kill(t||{})},Context);function Context(t,e){this.selector=e&&fb(e),this.data=[],this._r=[],this.isReverted=!1,this.id=Pe++,t&&this.add(t)}var Se,Ee=((Se=MatchMedia.prototype).add=function add(t,e,r){v(t)||(t={matches:t});var i,n,a,s=new De(0,r||this.scope),o=s.conditions={};for(n in l&&!s.selector&&(s.selector=l.selector),this.contexts.push(s),e=s.add(\"onMatch\",e),s.queries=t)\"all\"===n?a=1:(i=h.matchMedia(t[n]))&&(ke.indexOf(s)<0&&ke.push(s),(o[n]=i.matches)&&(a=1),i.addListener?i.addListener(Ic):i.addEventListener(\"change\",Ic));return a&&e(s,function(t){return s.add(null,t)}),this},Se.revert=function revert(t){this.kill(t||{})},Se.kill=function kill(e){this.contexts.forEach(function(t){return t.kill(e,!0)})},MatchMedia);function MatchMedia(t){this.contexts=[],this.scope=t,l&&l.data.push(this)}var Re={registerPlugin:function registerPlugin(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];e.forEach(function(t){return zb(t)})},timeline:function timeline(t){return new Zt(t)},getTweensOf:function getTweensOf(t,e){return L.getTweensOf(t,e)},getProperty:function getProperty(i,t,e,n){r(i)&&(i=Pt(i)[0]);var a=ha(i||{}).get,s=e?sa:ra;return\"native\"===e&&(e=\"\"),i?t?s((mt[t]&&mt[t].get||a)(i,t,e,n)):function(t,e,r){return s((mt[t]&&mt[t].get||a)(i,t,e,r))}:i},quickSetter:function quickSetter(r,e,i){if(1<(r=Pt(r)).length){var n=r.map(function(t){return Fe.quickSetter(t,e,i)}),a=n.length;return function(t){for(var e=a;e--;)n[e](t)}}r=r[0]||{};var s=mt[e],o=ha(r),u=o.harness&&(o.harness.aliases||{})[e]||e,h=s?function(t){var e=new s;d._pt=0,e.init(r,i?t+i:t,d,0,[r]),e.render(1,e),d._pt&&ve(1,d)}:o.set(r,u);return s?h:function(t){return h(r,u,i?t+i:t,o,1)}},quickTo:function quickTo(t,i,e){function by(t,e,r){return n.resetTo(i,t,e,r)}var r,n=Fe.to(t,ta(((r={})[i]=\"+=0.1\",r.paused=!0,r.stagger=0,r),e||{}));return by.tween=n,by},isTweening:function isTweening(t){return 0<L.getTweensOf(t,!0).length},defaults:function defaults(t){return t&&t.ease&&(t.ease=Vt(t.ease,j.ease)),wa(j,t||{})},config:function config(t){return wa(N,t||{})},registerEffect:function registerEffect(t){var i=t.name,n=t.effect,e=t.plugins,a=t.defaults,r=t.extendTimeline;(e||\"\").split(\",\").forEach(function(t){return t&&!mt[t]&&!ht[t]&&T(i+\" effect requires \"+t+\" plugin.\")}),gt[i]=function(t,e,r){return n(Pt(t),ta(e||{},a),r)},r&&(Zt.prototype[i]=function(t,e,r){return this.add(gt[i](t,v(e)?e:(r=e)&&{},this),r)})},registerEase:function registerEase(t,e){Bt[t]=Vt(e)},parseEase:function parseEase(t,e){return arguments.length?Vt(t,e):Bt},getById:function getById(t){return L.getById(t)},exportRoot:function exportRoot(t,e){void 0===t&&(t={});var r,i,n=new Zt(t);for(n.smoothChildTiming=w(t.smoothChildTiming),L.remove(n),n._dp=0,n._time=n._tTime=L._time,r=L._first;r;)i=r._next,!e&&!r._dur&&r instanceof te&&r.vars.onComplete===r._targets[0]||Na(n,r,r._start-r._delay),r=i;return Na(L,n,0),n},context:function context(t,e){return t?new De(t,e):l},matchMedia:function matchMedia(t){return new Ee(t)},matchMediaRefresh:function matchMediaRefresh(){return ke.forEach(function(t){var e,r,i=t.conditions;for(r in i)i[r]&&(i[r]=!1,e=1);e&&t.revert()})||Ic()},addEventListener:function addEventListener(t,e){var r=Oe[t]||(Oe[t]=[]);~r.indexOf(e)||r.push(e)},removeEventListener:function removeEventListener(t,e){var r=Oe[t],i=r&&r.indexOf(e);0<=i&&r.splice(i,1)},utils:{wrap:function wrap(e,t,r){var i=t-e;return $(e)?ob(e,wrap(0,e.length),t):Za(r,function(t){return(i+(t-e)%i)%i+e})},wrapYoyo:function wrapYoyo(e,t,r){var i=t-e,n=2*i;return $(e)?ob(e,wrapYoyo(0,e.length-1),t):Za(r,function(t){return e+(i<(t=(n+(t-e)%n)%n||0)?n-t:t)})},distribute:hb,random:kb,snap:jb,normalize:function normalize(t,e,r){return At(t,e,0,1,r)},getUnit:_a,clamp:function clamp(e,r,t){return Za(t,function(t){return Mt(e,r,t)})},splitColor:Db,toArray:Pt,selector:fb,mapRange:At,pipe:function pipe(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return function(t){return e.reduce(function(t,e){return e(t)},t)}},unitize:function unitize(e,r){return function(t){return e(parseFloat(t))+(r||_a(t))}},interpolate:function interpolate(e,i,t,n){var a=isNaN(e+i)?0:function(t){return(1-t)*e+t*i};if(!a){var s,o,u,h,l,f=r(e),d={};if(!0===t&&(n=1)&&(t=null),f)e={p:e},i={p:i};else if($(e)&&!$(i)){for(u=[],h=e.length,l=h-2,o=1;o<h;o++)u.push(interpolate(e[o-1],e[o]));h--,a=function func(t){t*=h;var e=Math.min(l,~~t);return u[e](t-e)},t=i}else n||(e=bt($(e)?[]:{},e));if(!u){for(s in i)Jt.call(d,e,s,\"get\",i[s]);a=function func(t){return ve(t,d)||(f?e.p:e)}}}return Za(t,a)},shuffle:gb},install:R,effects:gt,ticker:It,updateRoot:Zt.updateRoot,plugins:mt,globalTimeline:L,core:{PropTween:we,globals:U,Tween:te,Timeline:Zt,Animation:qt,getCache:ha,_removeLinkedListItem:Ba,reverting:function reverting(){return I},context:function context(t){return t&&l&&(l.data.push(t),t._ctx=l),l},suppressOverwrites:function suppressOverwrites(t){return F=t}}};ja(\"to,from,fromTo,delayedCall,set,killTweensOf\",function(t){return Re[t]=te[t]}),It.add(Zt.updateRoot),d=Re.to({},{duration:0});function Mc(t,e){for(var r=t._pt;r&&r.p!==e&&r.op!==e&&r.fp!==e;)r=r._next;return r}function Oc(t,a){return{name:t,headless:1,rawVars:1,init:function init(t,n,e){e._onInit=function(t){var e,i;if(r(n)&&(e={},ja(n,function(t){return e[t]=1}),n=e),a){for(i in e={},n)e[i]=a(n[i]);n=e}!function _addModifiers(t,e){var r,i,n,a=t._targets;for(r in e)for(i=a.length;i--;)(n=(n=t._ptLookup[i][r])&&n.d)&&(n._pt&&(n=Mc(n,r)),n&&n.modifier&&n.modifier(e[r],t,a[i],r))}(t,n)}}}}var Fe=Re.registerPlugin({name:\"attr\",init:function init(t,e,r,i,n){var a,s,o;for(a in this.tween=r,e)o=t.getAttribute(a)||\"\",(s=this.add(t,\"setAttribute\",(o||0)+\"\",e[a],i,n,0,0,a)).op=a,s.b=o,this._props.push(a)},render:function render(t,e){for(var r=e._pt;r;)I?r.set(r.t,r.p,r.b,r):r.r(t,r.d),r=r._next}},{name:\"endArray\",headless:1,init:function init(t,e){for(var r=e.length;r--;)this.add(t,r,t[r]||0,e[r],0,0,0,0,0,1)}},Oc(\"roundProps\",ib),Oc(\"modifiers\"),Oc(\"snap\",jb))||Re;te.version=Zt.version=Fe.version=\"3.14.2\",o=1,x()&&Lt();function yd(t,e){return e.set(e.t,e.p,Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function zd(t,e){return e.set(e.t,e.p,1===t?e.e:Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function Ad(t,e){return e.set(e.t,e.p,t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Bd(t,e){return e.set(e.t,e.p,1===t?e.e:t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Cd(t,e){var r=e.s+e.c*t;e.set(e.t,e.p,~~(r+(r<0?-.5:.5))+e.u,e)}function Dd(t,e){return e.set(e.t,e.p,t?e.e:e.b,e)}function Ed(t,e){return e.set(e.t,e.p,1!==t?e.b:e.e,e)}function Fd(t,e,r){return t.style[e]=r}function Gd(t,e,r){return t.style.setProperty(e,r)}function Hd(t,e,r){return t._gsap[e]=r}function Id(t,e,r){return t._gsap.scaleX=t._gsap.scaleY=r}function Jd(t,e,r,i,n){var a=t._gsap;a.scaleX=a.scaleY=r,a.renderTransform(n,a)}function Kd(t,e,r,i,n){var a=t._gsap;a[e]=r,a.renderTransform(n,a)}function Nd(t,e){var r=this,i=this.target,n=i.style,a=i._gsap;if(t in hr&&n){if(this.tfm=this.tfm||{},\"transform\"===t)return mr.transform.split(\",\").forEach(function(t){return Nd.call(r,t,e)});if(~(t=mr[t]||t).indexOf(\",\")?t.split(\",\").forEach(function(t){return r.tfm[t]=xr(i,t)}):this.tfm[t]=a.x?a[t]:xr(i,t),t===vr&&(this.tfm.zOrigin=a.zOrigin),0<=this.props.indexOf(gr))return;a.svg&&(this.svgo=i.getAttribute(\"data-svg-origin\"),this.props.push(vr,e,\"\")),t=gr}(n||e)&&this.props.push(t,e,n[t])}function Od(t){t.translate&&(t.removeProperty(\"translate\"),t.removeProperty(\"scale\"),t.removeProperty(\"rotate\"))}function Pd(){var t,e,r=this.props,i=this.target,n=i.style,a=i._gsap;for(t=0;t<r.length;t+=3)r[t+1]?2===r[t+1]?i[r[t]](r[t+2]):i[r[t]]=r[t+2]:r[t+2]?n[r[t]]=r[t+2]:n.removeProperty(\"--\"===r[t].substr(0,2)?r[t]:r[t].replace(cr,\"-$1\").toLowerCase());if(this.tfm){for(e in this.tfm)a[e]=this.tfm[e];a.svg&&(a.renderTransform(),i.setAttribute(\"data-svg-origin\",this.svgo||\"\")),(t=Ue())&&t.isStart||n[gr]||(Od(n),a.zOrigin&&n[vr]&&(n[vr]+=\" \"+a.zOrigin+\"px\",a.zOrigin=0,a.renderTransform()),a.uncache=1)}}function Qd(t,e){var r={target:t,props:[],revert:Pd,save:Nd};return t._gsap||Fe.core.getCache(t),e&&t.style&&t.nodeType&&e.split(\",\").forEach(function(t){return r.save(t)}),r}function Sd(t,e){var r=Le.createElementNS?Le.createElementNS((e||\"http://www.w3.org/1999/xhtml\").replace(/^https/,\"http\"),t):Le.createElement(t);return r&&r.style?r:Le.createElement(t)}function Td(t,e,r){var i=getComputedStyle(t);return i[e]||i.getPropertyValue(e.replace(cr,\"-$1\").toLowerCase())||i.getPropertyValue(e)||!r&&Td(t,Tr(e)||e,1)||\"\"}function Wd(){(function _windowExists(){return\"undefined\"!=typeof window})()&&window.document&&(Ie=window,Le=Ie.document,Ye=Le.documentElement,je=Sd(\"div\")||{style:{}},Sd(\"div\"),gr=Tr(gr),vr=gr+\"Origin\",je.style.cssText=\"border-width:0;line-height:0;position:absolute;padding:0\",Xe=!!Tr(\"perspective\"),Ue=Fe.core.reverting,Ne=1)}function Xd(t){var e,r=t.ownerSVGElement,i=Sd(\"svg\",r&&r.getAttribute(\"xmlns\")||\"http://www.w3.org/2000/svg\"),n=t.cloneNode(!0);n.style.display=\"block\",i.appendChild(n),Ye.appendChild(i);try{e=n.getBBox()}catch(t){}return i.removeChild(n),Ye.removeChild(i),e}function Yd(t,e){for(var r=e.length;r--;)if(t.hasAttribute(e[r]))return t.getAttribute(e[r])}function Zd(e){var r,i;try{r=e.getBBox()}catch(t){r=Xd(e),i=1}return r&&(r.width||r.height)||i||(r=Xd(e)),!r||r.width||r.x||r.y?r:{x:+Yd(e,[\"x\",\"cx\",\"x1\"])||0,y:+Yd(e,[\"y\",\"cy\",\"y1\"])||0,width:0,height:0}}function $d(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!Zd(t))}function _d(t,e){if(e){var r,i=t.style;e in hr&&e!==vr&&(e=gr),i.removeProperty?(\"ms\"!==(r=e.substr(0,2))&&\"webkit\"!==e.substr(0,6)||(e=\"-\"+e),i.removeProperty(\"--\"===r?e:e.replace(cr,\"-$1\").toLowerCase())):i.removeAttribute(e)}}function ae(t,e,r,i,n,a){var s=new we(t._pt,e,r,0,1,a?Ed:Dd);return(t._pt=s).b=i,s.e=n,t._props.push(r),s}function de(t,e,r,i){var n,a,s,o,u=parseFloat(r)||0,h=(r+\"\").trim().substr((u+\"\").length)||\"px\",l=je.style,f=pr.test(e),d=\"svg\"===t.tagName.toLowerCase(),c=(d?\"client\":\"offset\")+(f?\"Width\":\"Height\"),p=\"px\"===i,_=\"%\"===i;if(i===h||!u||br[i]||br[h])return u;if(\"px\"===h||p||(u=de(t,e,r,\"px\")),o=t.getCTM&&$d(t),(_||\"%\"===h)&&(hr[e]||~e.indexOf(\"adius\")))return n=o?t.getBBox()[f?\"width\":\"height\"]:t[c],ka(_?u/n*100:u/100*n);if(l[f?\"width\":\"height\"]=100+(p?h:i),a=\"rem\"!==i&&~e.indexOf(\"adius\")||\"em\"===i&&t.appendChild&&!d?t:t.parentNode,o&&(a=(t.ownerSVGElement||{}).parentNode),a&&a!==Le&&a.appendChild||(a=Le.body),(s=a._gsap)&&_&&s.width&&f&&s.time===It.time&&!s.uncache)return ka(u/s.width*100);if(!_||\"height\"!==e&&\"width\"!==e)!_&&\"%\"!==h||wr[Td(a,\"display\")]||(l.position=Td(t,\"position\")),a===t&&(l.position=\"static\"),a.appendChild(je),n=je[c],a.removeChild(je),l.position=\"absolute\";else{var m=t.style[e];t.style[e]=100+i,n=t[c],m?t.style[e]=m:_d(t,e)}return f&&_&&((s=ha(a)).time=It.time,s.width=a[c]),ka(p?n*u/100:n&&u?100/n*u:0)}function fe(t,e,r,i){if(!r||\"none\"===r){var n=Tr(e,t,1),a=n&&Td(t,n,1);a&&a!==r?(e=n,r=a):\"borderColor\"===e&&(r=Td(t,\"borderTopColor\"))}var s,o,u,h,l,f,d,c,p,_,m,g=new we(this._pt,t.style,e,0,1,ge),v=0,y=0;if(g.b=r,g.e=i,r+=\"\",\"var(--\"===(i+=\"\").substring(0,6)&&(i=Td(t,i.substring(4,i.indexOf(\")\")))),\"auto\"===i&&(f=t.style[e],t.style[e]=i,i=Td(t,e)||i,f?t.style[e]=f:_d(t,e)),Ib(s=[r,i]),i=s[1],u=(r=s[0]).match(nt)||[],(i.match(nt)||[]).length){for(;o=nt.exec(i);)d=o[0],p=i.substring(v,o.index),l?l=(l+1)%5:\"rgba(\"!==p.substr(-5)&&\"hsla(\"!==p.substr(-5)||(l=1),d!==(f=u[y++]||\"\")&&(h=parseFloat(f)||0,m=f.substr((h+\"\").length),\"=\"===d.charAt(1)&&(d=ma(h,d)+m),c=parseFloat(d),_=d.substr((c+\"\").length),v=nt.lastIndex-_.length,_||(_=_||N.units[e]||m,v===i.length&&(i+=_,g.e+=_)),m!==_&&(h=de(t,e,f,_)||0),g._pt={_next:g._pt,p:p||1===y?p:\",\",s:h,c:c-h,m:l&&l<4||\"zIndex\"===e?Math.round:0});g.c=v<i.length?i.substring(v,i.length):\"\"}else g.r=\"display\"===e&&\"none\"===i?Ed:Dd;return st.test(i)&&(g.e=0),this._pt=g}function he(t){var e=t.split(\" \"),r=e[0],i=e[1]||\"50%\";return\"top\"!==r&&\"bottom\"!==r&&\"left\"!==i&&\"right\"!==i||(t=r,r=i,i=t),e[0]=kr[r]||r,e[1]=kr[i]||i,e.join(\" \")}function ie(t,e){if(e.tween&&e.tween._time===e.tween._dur){var r,i,n,a=e.t,s=a.style,o=e.u,u=a._gsap;if(\"all\"===o||!0===o)s.cssText=\"\",i=1;else for(n=(o=o.split(\",\")).length;-1<--n;)r=o[n],hr[r]&&(i=1,r=\"transformOrigin\"===r?vr:gr),_d(a,r);i&&(_d(a,gr),u&&(u.svg&&a.removeAttribute(\"transform\"),s.scale=s.rotate=s.translate=\"none\",Pr(a,1),u.uncache=1,Od(s)))}}function me(t){return\"matrix(1, 0, 0, 1, 0, 0)\"===t||\"none\"===t||!t}function ne(t){var e=Td(t,gr);return me(e)?Mr:e.substr(7).match(it).map(ka)}function oe(t,e){var r,i,n,a,s=t._gsap||ha(t),o=t.style,u=ne(t);return s.svg&&t.getAttribute(\"transform\")?\"1,0,0,1,0,0\"===(u=[(n=t.transform.baseVal.consolidate().matrix).a,n.b,n.c,n.d,n.e,n.f]).join(\",\")?Mr:u:(u!==Mr||t.offsetParent||t===Ye||s.svg||(n=o.display,o.display=\"block\",(r=t.parentNode)&&(t.offsetParent||t.getBoundingClientRect().width)||(a=1,i=t.nextElementSibling,Ye.appendChild(t)),u=ne(t),n?o.display=n:_d(t,\"display\"),a&&(i?r.insertBefore(t,i):r?r.appendChild(t):Ye.removeChild(t))),e&&6<u.length?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)}function pe(t,e,r,i,n,a){var s,o,u,h=t._gsap,l=n||oe(t,!0),f=h.xOrigin||0,d=h.yOrigin||0,c=h.xOffset||0,p=h.yOffset||0,_=l[0],m=l[1],g=l[2],v=l[3],y=l[4],T=l[5],b=e.split(\" \"),w=parseFloat(b[0])||0,x=parseFloat(b[1])||0;r?l!==Mr&&(o=_*v-m*g)&&(u=w*(-m/o)+x*(_/o)-(_*T-m*y)/o,w=w*(v/o)+x*(-g/o)+(g*T-v*y)/o,x=u):(w=(s=Zd(t)).x+(~b[0].indexOf(\"%\")?w/100*s.width:w),x=s.y+(~(b[1]||b[0]).indexOf(\"%\")?x/100*s.height:x)),i||!1!==i&&h.smooth?(y=w-f,T=x-d,h.xOffset=c+(y*_+T*g)-y,h.yOffset=p+(y*m+T*v)-T):h.xOffset=h.yOffset=0,h.xOrigin=w,h.yOrigin=x,h.smooth=!!i,h.origin=e,h.originIsAbsolute=!!r,t.style[vr]=\"0px 0px\",a&&(ae(a,h,\"xOrigin\",f,w),ae(a,h,\"yOrigin\",d,x),ae(a,h,\"xOffset\",c,h.xOffset),ae(a,h,\"yOffset\",p,h.yOffset)),t.setAttribute(\"data-svg-origin\",w+\" \"+x)}function se(t,e,r){var i=_a(e);return ka(parseFloat(e)+parseFloat(de(t,\"x\",r+\"px\",i)))+i}function ze(t,e,i,n,a){var s,o,u=360,h=r(a),l=parseFloat(a)*(h&&~a.indexOf(\"rad\")?lr:1)-n,f=n+l+\"deg\";return h&&(\"short\"===(s=a.split(\"_\")[1])&&(l%=u)!==l%180&&(l+=l<0?u:-u),\"cw\"===s&&l<0?l=(l+36e9)%u-~~(l/u)*u:\"ccw\"===s&&0<l&&(l=(l-36e9)%u-~~(l/u)*u)),t._pt=o=new we(t._pt,e,i,n,l,zd),o.e=f,o.u=\"deg\",t._props.push(i),o}function Ae(t,e){for(var r in e)t[r]=e[r];return t}function Be(t,e,r){var i,n,a,s,o,u,h,l=Ae({},r._gsap),f=r.style;for(n in l.svg?(a=r.getAttribute(\"transform\"),r.setAttribute(\"transform\",\"\"),f[gr]=e,i=Pr(r,1),_d(r,gr),r.setAttribute(\"transform\",a)):(a=getComputedStyle(r)[gr],f[gr]=e,i=Pr(r,1),f[gr]=a),hr)(a=l[n])!==(s=i[n])&&\"perspective,force3D,transformOrigin,svgOrigin\".indexOf(n)<0&&(o=_a(a)!==(h=_a(s))?de(r,n,a,h):parseFloat(a),u=parseFloat(s),t._pt=new we(t._pt,i,n,o,u-o,yd),t._pt.u=h||0,t._props.push(n));Ae(i,l)}var Ie,Le,Ye,Ne,je,Ve,Ue,Xe,qe=Bt.Power0,Ze=Bt.Power1,We=Bt.Power2,He=Bt.Power3,Je=Bt.Power4,Qe=Bt.Linear,Ge=Bt.Quad,Ke=Bt.Cubic,$e=Bt.Quart,tr=Bt.Quint,er=Bt.Strong,rr=Bt.Elastic,ir=Bt.Back,nr=Bt.SteppedEase,ar=Bt.Bounce,sr=Bt.Sine,or=Bt.Expo,ur=Bt.Circ,hr={},lr=180/Math.PI,fr=Math.PI/180,dr=Math.atan2,cr=/([A-Z])/g,pr=/(left|right|width|margin|padding|x)/i,_r=/[\\s,\\(]\\S/,mr={autoAlpha:\"opacity,visibility\",scale:\"scaleX,scaleY\",alpha:\"opacity\"},gr=\"transform\",vr=gr+\"Origin\",yr=\"O,Moz,ms,Ms,Webkit\".split(\",\"),Tr=function _checkPropPrefix(t,e,r){var i=(e||je).style,n=5;if(t in i&&!r)return t;for(t=t.charAt(0).toUpperCase()+t.substr(1);n--&&!(yr[n]+t in i););return n<0?null:(3===n?\"ms\":0<=n?yr[n]:\"\")+t},br={deg:1,rad:1,turn:1},wr={grid:1,flex:1},xr=function _get(t,e,r,i){var n;return Ne||Wd(),e in mr&&\"transform\"!==e&&~(e=mr[e]).indexOf(\",\")&&(e=e.split(\",\")[0]),hr[e]&&\"transform\"!==e?(n=Pr(t,i),n=\"transformOrigin\"!==e?n[e]:n.svg?n.origin:Ar(Td(t,vr))+\" \"+n.zOrigin+\"px\"):(n=t.style[e])&&\"auto\"!==n&&!i&&!~(n+\"\").indexOf(\"calc(\")||(n=Or[e]&&Or[e](t,e,r)||Td(t,e)||ia(t,e)||(\"opacity\"===e?1:0)),r&&!~(n+\"\").trim().indexOf(\" \")?de(t,e,n,r)+r:n},kr={top:\"0%\",bottom:\"100%\",left:\"0%\",right:\"100%\",center:\"50%\"},Or={clearProps:function clearProps(t,e,r,i,n){if(\"isFromStart\"!==n.data){var a=t._pt=new we(t._pt,e,r,0,0,ie);return a.u=i,a.pr=-10,a.tween=n,t._props.push(r),1}}},Mr=[1,0,0,1,0,0],Cr={},Pr=function _parseTransform(t,e){var r=t._gsap||new Xt(t);if(\"x\"in r&&!e&&!r.uncache)return r;var i,n,a,s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x,k,O,M,C,P,A,D,S,z,E,R,F=t.style,I=r.scaleX<0,L=\"deg\",B=getComputedStyle(t),Y=Td(t,vr)||\"0\";return i=n=a=u=h=l=f=d=c=0,s=o=1,r.svg=!(!t.getCTM||!$d(t)),B.translate&&(\"none\"===B.translate&&\"none\"===B.scale&&\"none\"===B.rotate||(F[gr]=(\"none\"!==B.translate?\"translate3d(\"+(B.translate+\" 0 0\").split(\" \").slice(0,3).join(\", \")+\") \":\"\")+(\"none\"!==B.rotate?\"rotate(\"+B.rotate+\") \":\"\")+(\"none\"!==B.scale?\"scale(\"+B.scale.split(\" \").join(\",\")+\") \":\"\")+(\"none\"!==B[gr]?B[gr]:\"\")),F.scale=F.rotate=F.translate=\"none\"),m=oe(t,r.svg),r.svg&&(M=r.uncache?(C=t.getBBox(),Y=r.xOrigin-C.x+\"px \"+(r.yOrigin-C.y)+\"px\",\"\"):!e&&t.getAttribute(\"data-svg-origin\"),pe(t,M||Y,!!M||r.originIsAbsolute,!1!==r.smooth,m)),p=r.xOrigin||0,_=r.yOrigin||0,m!==Mr&&(T=m[0],b=m[1],w=m[2],x=m[3],i=k=m[4],n=O=m[5],6===m.length?(s=Math.sqrt(T*T+b*b),o=Math.sqrt(x*x+w*w),u=T||b?dr(b,T)*lr:0,(f=w||x?dr(w,x)*lr+u:0)&&(o*=Math.abs(Math.cos(f*fr))),r.svg&&(i-=p-(p*T+_*w),n-=_-(p*b+_*x))):(R=m[6],z=m[7],A=m[8],D=m[9],S=m[10],E=m[11],i=m[12],n=m[13],a=m[14],h=(g=dr(R,S))*lr,g&&(M=k*(v=Math.cos(-g))+A*(y=Math.sin(-g)),C=O*v+D*y,P=R*v+S*y,A=k*-y+A*v,D=O*-y+D*v,S=R*-y+S*v,E=z*-y+E*v,k=M,O=C,R=P),l=(g=dr(-w,S))*lr,g&&(v=Math.cos(-g),E=x*(y=Math.sin(-g))+E*v,T=M=T*v-A*y,b=C=b*v-D*y,w=P=w*v-S*y),u=(g=dr(b,T))*lr,g&&(M=T*(v=Math.cos(g))+b*(y=Math.sin(g)),C=k*v+O*y,b=b*v-T*y,O=O*v-k*y,T=M,k=C),h&&359.9<Math.abs(h)+Math.abs(u)&&(h=u=0,l=180-l),s=ka(Math.sqrt(T*T+b*b+w*w)),o=ka(Math.sqrt(O*O+R*R)),g=dr(k,O),f=2e-4<Math.abs(g)?g*lr:0,c=E?1/(E<0?-E:E):0),r.svg&&(M=t.getAttribute(\"transform\"),r.forceCSS=t.setAttribute(\"transform\",\"\")||!me(Td(t,gr)),M&&t.setAttribute(\"transform\",M))),90<Math.abs(f)&&Math.abs(f)<270&&(I?(s*=-1,f+=u<=0?180:-180,u+=u<=0?180:-180):(o*=-1,f+=f<=0?180:-180)),e=e||r.uncache,r.x=i-((r.xPercent=i&&(!e&&r.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-i)?-50:0)))?t.offsetWidth*r.xPercent/100:0)+\"px\",r.y=n-((r.yPercent=n&&(!e&&r.yPercent||(Math.round(t.offsetHeight/2)===Math.round(-n)?-50:0)))?t.offsetHeight*r.yPercent/100:0)+\"px\",r.z=a+\"px\",r.scaleX=ka(s),r.scaleY=ka(o),r.rotation=ka(u)+L,r.rotationX=ka(h)+L,r.rotationY=ka(l)+L,r.skewX=f+L,r.skewY=d+L,r.transformPerspective=c+\"px\",(r.zOrigin=parseFloat(Y.split(\" \")[2])||!e&&r.zOrigin||0)&&(F[vr]=Ar(Y)),r.xOffset=r.yOffset=0,r.force3D=N.force3D,r.renderTransform=r.svg?Fr:Xe?Rr:Dr,r.uncache=0,r},Ar=function _firstTwoOnly(t){return(t=t.split(\" \"))[0]+\" \"+t[1]},Dr=function _renderNon3DTransforms(t,e){e.z=\"0px\",e.rotationY=e.rotationX=\"0deg\",e.force3D=0,Rr(t,e)},Sr=\"0deg\",zr=\"0px\",Er=\") \",Rr=function _renderCSSTransforms(t,e){var r=e||this,i=r.xPercent,n=r.yPercent,a=r.x,s=r.y,o=r.z,u=r.rotation,h=r.rotationY,l=r.rotationX,f=r.skewX,d=r.skewY,c=r.scaleX,p=r.scaleY,_=r.transformPerspective,m=r.force3D,g=r.target,v=r.zOrigin,y=\"\",T=\"auto\"===m&&t&&1!==t||!0===m;if(v&&(l!==Sr||h!==Sr)){var b,w=parseFloat(h)*fr,x=Math.sin(w),k=Math.cos(w);w=parseFloat(l)*fr,b=Math.cos(w),a=se(g,a,x*b*-v),s=se(g,s,-Math.sin(w)*-v),o=se(g,o,k*b*-v+v)}_!==zr&&(y+=\"perspective(\"+_+Er),(i||n)&&(y+=\"translate(\"+i+\"%, \"+n+\"%) \"),!T&&a===zr&&s===zr&&o===zr||(y+=o!==zr||T?\"translate3d(\"+a+\", \"+s+\", \"+o+\") \":\"translate(\"+a+\", \"+s+Er),u!==Sr&&(y+=\"rotate(\"+u+Er),h!==Sr&&(y+=\"rotateY(\"+h+Er),l!==Sr&&(y+=\"rotateX(\"+l+Er),f===Sr&&d===Sr||(y+=\"skew(\"+f+\", \"+d+Er),1===c&&1===p||(y+=\"scale(\"+c+\", \"+p+Er),g.style[gr]=y||\"translate(0, 0)\"},Fr=function _renderSVGTransforms(t,e){var r,i,n,a,s,o=e||this,u=o.xPercent,h=o.yPercent,l=o.x,f=o.y,d=o.rotation,c=o.skewX,p=o.skewY,_=o.scaleX,m=o.scaleY,g=o.target,v=o.xOrigin,y=o.yOrigin,T=o.xOffset,b=o.yOffset,w=o.forceCSS,x=parseFloat(l),k=parseFloat(f);d=parseFloat(d),c=parseFloat(c),(p=parseFloat(p))&&(c+=p=parseFloat(p),d+=p),d||c?(d*=fr,c*=fr,r=Math.cos(d)*_,i=Math.sin(d)*_,n=Math.sin(d-c)*-m,a=Math.cos(d-c)*m,c&&(p*=fr,s=Math.tan(c-p),n*=s=Math.sqrt(1+s*s),a*=s,p&&(s=Math.tan(p),r*=s=Math.sqrt(1+s*s),i*=s)),r=ka(r),i=ka(i),n=ka(n),a=ka(a)):(r=_,a=m,i=n=0),(x&&!~(l+\"\").indexOf(\"px\")||k&&!~(f+\"\").indexOf(\"px\"))&&(x=de(g,\"x\",l,\"px\"),k=de(g,\"y\",f,\"px\")),(v||y||T||b)&&(x=ka(x+v-(v*r+y*n)+T),k=ka(k+y-(v*i+y*a)+b)),(u||h)&&(s=g.getBBox(),x=ka(x+u/100*s.width),k=ka(k+h/100*s.height)),s=\"matrix(\"+r+\",\"+i+\",\"+n+\",\"+a+\",\"+x+\",\"+k+\")\",g.setAttribute(\"transform\",s),w&&(g.style[gr]=s)};ja(\"padding,margin,Width,Radius\",function(e,r){var t=\"Right\",i=\"Bottom\",n=\"Left\",o=(r<3?[\"Top\",t,i,n]:[\"Top\"+n,\"Top\"+t,i+t,i+n]).map(function(t){return r<2?e+t:\"border\"+t+e});Or[1<r?\"border\"+e:e]=function(e,t,r,i,n){var a,s;if(arguments.length<4)return a=o.map(function(t){return xr(e,t,r)}),5===(s=a.join(\" \")).split(a[0]).length?a[0]:s;a=(i+\"\").split(\" \"),s={},o.forEach(function(t,e){return s[t]=a[e]=a[e]||a[(e-1)/2|0]}),e.init(t,s,n)}});var Ir,Lr,Br,Yr={name:\"css\",register:Wd,targetTest:function targetTest(t){return t.style&&t.nodeType},init:function init(t,e,i,n,a){var s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x=this._props,k=t.style,O=i.vars.startAt;for(d in Ne||Wd(),this.styles=this.styles||Qd(t),b=this.styles.props,this.tween=i,e)if(\"autoRound\"!==d&&(o=e[d],!mt[d]||!dc(d,e,i,n,t,a)))if(l=typeof o,f=Or[d],\"function\"===l&&(l=typeof(o=o.call(i,n,t,a))),\"string\"===l&&~o.indexOf(\"random(\")&&(o=rb(o)),f)f(this,t,d,o,i)&&(T=1);else if(\"--\"===d.substr(0,2))s=(getComputedStyle(t).getPropertyValue(d)+\"\").trim(),o+=\"\",Rt.lastIndex=0,Rt.test(s)||(c=_a(s),(p=_a(o))?c!==p&&(s=de(t,d,s,p)+p):c&&(o+=c)),this.add(k,\"setProperty\",s,o,n,a,0,0,d),x.push(d),b.push(d,0,k[d]);else if(\"undefined\"!==l){if(O&&d in O?(s=\"function\"==typeof O[d]?O[d].call(i,n,t,a):O[d],r(s)&&~s.indexOf(\"random(\")&&(s=rb(s)),_a(s+\"\")||\"auto\"===s||(s+=N.units[d]||_a(xr(t,d))||\"\"),\"=\"===(s+\"\").charAt(1)&&(s=xr(t,d))):s=xr(t,d),h=parseFloat(s),(_=\"string\"===l&&\"=\"===o.charAt(1)&&o.substr(0,2))&&(o=o.substr(2)),u=parseFloat(o),d in mr&&(\"autoAlpha\"===d&&(1===h&&\"hidden\"===xr(t,\"visibility\")&&u&&(h=0),b.push(\"visibility\",0,k.visibility),ae(this,k,\"visibility\",h?\"inherit\":\"hidden\",u?\"inherit\":\"hidden\",!u)),\"scale\"!==d&&\"transform\"!==d&&~(d=mr[d]).indexOf(\",\")&&(d=d.split(\",\")[0])),m=d in hr){if(this.styles.save(d),w=o,\"string\"===l&&\"var(--\"===o.substring(0,6)){if(\"calc(\"===(o=Td(t,o.substring(4,o.indexOf(\")\")))).substring(0,5)){var M=t.style.perspective;t.style.perspective=o,o=Td(t,\"perspective\"),M?t.style.perspective=M:_d(t,\"perspective\")}u=parseFloat(o)}if(g||((v=t._gsap).renderTransform&&!e.parseTransform||Pr(t,e.parseTransform),y=!1!==e.smoothOrigin&&v.smooth,(g=this._pt=new we(this._pt,k,gr,0,1,v.renderTransform,v,0,-1)).dep=1),\"scale\"===d)this._pt=new we(this._pt,v,\"scaleY\",v.scaleY,(_?ma(v.scaleY,_+u):u)-v.scaleY||0,yd),this._pt.u=0,x.push(\"scaleY\",d),d+=\"X\";else{if(\"transformOrigin\"===d){b.push(vr,0,k[vr]),o=he(o),v.svg?pe(t,o,0,y,0,this):((p=parseFloat(o.split(\" \")[2])||0)!==v.zOrigin&&ae(this,v,\"zOrigin\",v.zOrigin,p),ae(this,k,d,Ar(s),Ar(o)));continue}if(\"svgOrigin\"===d){pe(t,o,1,y,0,this);continue}if(d in Cr){ze(this,v,d,h,_?ma(h,_+o):o);continue}if(\"smoothOrigin\"===d){ae(this,v,\"smooth\",v.smooth,o);continue}if(\"force3D\"===d){v[d]=o;continue}if(\"transform\"===d){Be(this,o,t);continue}}}else d in k||(d=Tr(d)||d);if(m||(u||0===u)&&(h||0===h)&&!_r.test(o)&&d in k)u=u||0,(c=(s+\"\").substr((h+\"\").length))!==(p=_a(o)||(d in N.units?N.units[d]:c))&&(h=de(t,d,s,p)),this._pt=new we(this._pt,m?v:k,d,h,(_?ma(h,_+u):u)-h,m||\"px\"!==p&&\"zIndex\"!==d||!1===e.autoRound?yd:Cd),this._pt.u=p||0,m&&w!==o?(this._pt.b=s,this._pt.e=w,this._pt.r=Bd):c!==p&&\"%\"!==p&&(this._pt.b=s,this._pt.r=Ad);else if(d in k)fe.call(this,t,d,s,_?_+o:o);else if(d in t)this.add(t,d,s||t[d],_?_+o:o,n,a);else if(\"parseTransform\"!==d){S(d,o);continue}m||(d in k?b.push(d,0,k[d]):\"function\"==typeof t[d]?b.push(d,2,t[d]()):b.push(d,1,s||t[d])),x.push(d)}T&&be(this)},render:function render(t,e){if(e.tween._time||!Ue())for(var r=e._pt;r;)r.r(t,r.d),r=r._next;else e.styles.revert()},get:xr,aliases:mr,getSetter:function getSetter(t,e,r){var i=mr[e];return i&&i.indexOf(\",\")<0&&(e=i),e in hr&&e!==vr&&(t._gsap.x||xr(t,\"x\"))?r&&Ve===r?\"scale\"===e?Id:Hd:(Ve=r||{})&&(\"scale\"===e?Jd:Kd):t.style&&!u(t.style[e])?Fd:~e.indexOf(\"-\")?Gd:le(t,e)},core:{_removeProperty:_d,_getMatrix:oe}};Fe.utils.checkPrefix=Tr,Fe.core.getStyleSaver=Qd,Br=ja((Ir=\"x,y,z,scale,scaleX,scaleY,xPercent,yPercent\")+\",\"+(Lr=\"rotation,rotationX,rotationY,skewX,skewY\")+\",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective\",function(t){hr[t]=1}),ja(Lr,function(t){N.units[t]=\"deg\",Cr[t]=1}),mr[Br[13]]=Ir+\",\"+Lr,ja(\"0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY\",function(t){var e=t.split(\":\");mr[e[1]]=Br[e[0]]}),ja(\"x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective\",function(t){N.units[t]=\"px\"}),Fe.registerPlugin(Yr);var Nr=Fe.registerPlugin(Yr)||Fe,jr=Nr.core.Tween;e.Back=ir,e.Bounce=ar,e.CSSPlugin=Yr,e.Circ=ur,e.Cubic=Ke,e.Elastic=rr,e.Expo=or,e.Linear=Qe,e.Power0=qe,e.Power1=Ze,e.Power2=We,e.Power3=He,e.Power4=Je,e.Quad=Ge,e.Quart=$e,e.Quint=tr,e.Sine=sr,e.SteppedEase=nr,e.Strong=er,e.TimelineLite=Zt,e.TimelineMax=Zt,e.TweenLite=te,e.TweenMax=jr,e.default=Nr,e.gsap=Nr;if (typeof(window)===\"undefined\"||window!==e){Object.defineProperty(e,\"__esModule\",{value:!0})} else {delete e.default}});\n\n\n</script>\n  <style>* { margin: 0; padding: 0; } html, body { width: 1920px; height: 1080px; overflow: hidden; background: #ffffff; }\n\n[data-composition-id=\"shutter-slam\"]:not(:has([data-hf-inner-root])), [data-composition-id=\"shutter-slam\"] > [data-hf-inner-root] {\n            background: #06060a;\n          }\n\n          *,\n          [data-composition-id=\"shutter-slam\"] *::before,\n          [data-composition-id=\"shutter-slam\"] *::after {\n            box-sizing: border-box;\n          }\n\n          [data-composition-id=\"shutter-slam\"] [data-hf-authored-id=\"root\"] {\n            position: absolute;\n            inset: 0;\n            overflow: hidden;\n            container-type: size;\n            isolation: isolate;\n            font-family: var(--font-display, Inter, system-ui, sans-serif);\n            pointer-events: none;\n          }\n\n          [data-composition-id=\"shutter-slam\"] .ss-clip {\n            position: absolute;\n            inset: 0;\n            width: 100cqw;\n            height: 100cqh;\n            overflow: hidden;\n          }\n\n          /* The turns need a perspective ancestor, and the blur reads its\n             perspective off the word's own parent, so the stage that carries\n             it must be the word's direct parent. */\n          [data-composition-id=\"shutter-slam\"] .ss-stage {\n            position: absolute;\n            inset: 0;\n            display: grid;\n            place-items: center;\n            perspective: 104cqw;\n          }\n\n          [data-composition-id=\"shutter-slam\"] .ss-word {\n            color: var(--ss-accent, #71f5a7);\n            font-size: var(--ss-font-size, min(14cqw, 26cqh));\n            font-weight: 900;\n            line-height: 1;\n            letter-spacing: -0.02em;\n            white-space: nowrap;\n            transform-origin: 50% 50%;\n            will-change: transform;\n          }\n\n[data-composition-id=\"shutter-slam\"] {\n  --text: MOTION;\n  --accent: green;\n  --blur: shutter;\n  --exit: none;\n}</style>\n</head>\n<body>\n  <div data-composition-id=\"preview-root\" data-width=\"1920\" data-height=\"1080\" data-start=\"0\" data-duration=\"5\">\n    <div style=\"width:1920px;height:1080px\" data-composition-file=\"demo.html\" data-composition-id=\"shutter-slam\" data-start=\"0\" data-duration=\"5\" data-track-index=\"0\" data-width=\"1920\" data-height=\"1080\"><div style=\"width:100%;height:100%\" data-hf-inner-root=\"true\" data-hf-authored-id=\"root\" data-fps=\"30\">\n        \n\n        <div id=\"shutter-slam-clip\" class=\"ss-clip clip\" data-start=\"0\" data-duration=\"6\" data-track-index=\"0\">\n          <div class=\"ss-stage\">\n            <div class=\"ss-word\" id=\"shutter-slam-word\" role=\"heading\" aria-level=\"1\"></div>\n          </div>\n        </div>\n\n        \n        \n        \n      </div></div>\n  </div>\n  \n<script>window.__timelines = window.__timelines || {};\n    window.__timelines[\"preview-root\"] = gsap.timeline({ paused: true });\n;\nwindow.__hfVariablesByComp = Object.assign({}, window.__hfVariablesByComp || {}, {\"shutter-slam\":{\"text\":\"MOTION\",\"accent\":\"green\",\"blur\":\"shutter\",\"cues\":\"\",\"exit\":\"none\"}});\n;\n(function(){\n  var __hfCompId = \"shutter-slam\";\n  var __hfTimelineCompId = \"shutter-slam\";\n  var __hfErrorLabel = \"[Compiler] Composition script failed\";\n  var __hfAuthoredRootId = \"root\";\n  var __hfAuthoredRootAttr = \"data-hf-authored-id\";\n  var __hfEscapeAttr = function(value) {\n    return (value + \"\").replace(/\\\\/g, \"\\\\\\\\\").replace(/\"/g, \"\\\\\\\"\");\n  };\n  var __hfRootSelector = \"[data-composition-id=\\\"shutter-slam\\\"]\" || (__hfCompId\n    ? '[data-composition-id=\"' + __hfEscapeAttr(__hfCompId) + '\"]'\n    : \"\");\n  var __hfRoot = null;\n  var __hfRootSelectorPattern = \"\\\\[\\\\s*data-composition-id\\\\s*=\\\\s*(?:\\\"shutter-slam\\\"|'shutter-slam')\\\\s*\\\\]\";\n  var __hfTimingSelectorPattern = \"\\\\s*\\\\[\\\\s*data-(?:start|duration)\\\\s*=\\\\s*(?:\\\"[^\\\"]*\\\"|'[^']*')\\\\s*\\\\]\";\n  var __hfAuthoredRootIdForms = [\"root\"];\n  var __hfAuthoredRootSelector = __hfAuthoredRootId\n    ? \"[\" + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(__hfAuthoredRootId) + '\"]'\n    : \"\";\n  var __hfIsSelectorNameChar = function(char) {\n    return !!char && /[\\w-]/.test(char);\n  };\n  var __hfReplaceAuthoredRootIdSelectors = function(selector) {\n    if (!__hfAuthoredRootSelector || !__hfAuthoredRootIdForms.length || typeof selector !== \"string\") {\n      return selector;\n    }\n    var result = \"\";\n    var bracketDepth = 0;\n    var quote = null;\n    for (var index = 0; index < selector.length; index += 1) {\n      var char = selector[index];\n      var previousChar = index > 0 ? selector[index - 1] : \"\";\n      if (quote) {\n        result += char;\n        if (char === quote && previousChar !== \"\\\\\") {\n          quote = null;\n        }\n        continue;\n      }\n      if (char === '\"' || char === \"'\") {\n        quote = char;\n        result += char;\n        continue;\n      }\n      if (char === \"[\") {\n        bracketDepth += 1;\n        result += char;\n        continue;\n      }\n      if (char === \"]\") {\n        bracketDepth = Math.max(0, bracketDepth - 1);\n        result += char;\n        continue;\n      }\n      if (char === \"#\" && bracketDepth === 0) {\n        var matchedForm = null;\n        for (var formIndex = 0; formIndex < __hfAuthoredRootIdForms.length; formIndex += 1) {\n          var form = __hfAuthoredRootIdForms[formIndex];\n          if (selector.slice(index + 1, index + 1 + form.length) === form) {\n            matchedForm = form;\n            break;\n          }\n        }\n        if (matchedForm) {\n          var nextChar = selector[index + 1 + matchedForm.length];\n          if (!__hfIsSelectorNameChar(nextChar)) {\n            result += __hfAuthoredRootSelector;\n            index += matchedForm.length;\n            continue;\n          }\n        }\n      }\n      result += char;\n    }\n    return result;\n  };\n  var __hfNormalizeSelector = function(selector) {\n    if (!__hfCompId || typeof selector !== \"string\") return selector;\n    var normalized = selector\n      .replace(new RegExp(__hfRootSelectorPattern + '(?:' + __hfTimingSelectorPattern + ')+', 'g'), __hfRootSelector)\n      .replace(new RegExp('(?:' + __hfTimingSelectorPattern + ')+' + __hfRootSelectorPattern, 'g'), __hfRootSelector);\n    if (__hfAuthoredRootSelector) {\n      normalized = __hfReplaceAuthoredRootIdSelectors(normalized);\n    }\n    return normalized;\n  };\n  var __hfFindRoot = function() {\n    if (!__hfRoot && __hfRootSelector) {\n      __hfRoot = window.document.querySelector(__hfRootSelector);\n    }\n    return __hfRoot;\n  };\n  var __hfContains = function(node) {\n    var root = __hfFindRoot();\n    return !root || node === root || root.contains(node);\n  };\n  var __hfQueryAll = function(selector) {\n    var root = __hfFindRoot();\n    if (!root || typeof selector !== \"string\") {\n      return window.document.querySelectorAll(selector);\n    }\n    return Array.prototype.filter.call(window.document.querySelectorAll(__hfNormalizeSelector(selector)), function(node) {\n      return __hfContains(node);\n    });\n  };\n  var __hfQueryOne = function(selector) {\n    var matches = __hfQueryAll(selector);\n    return matches[0] || null;\n  };\n  var __hfGetElementById = function(id) {\n    var found = window.document.getElementById(id);\n    if (found && __hfContains(found)) return found;\n    var root = __hfFindRoot();\n    if (!root) return found || null;\n    var idValue = id + \"\";\n    if (__hfAuthoredRootId && __hfAuthoredRootId === idValue && root.getAttribute && root.getAttribute(__hfAuthoredRootAttr) === idValue) {\n      return root;\n    }\n    if (root.id === idValue) return root;\n    if (typeof root.querySelector !== \"function\") return null;\n    try {\n      var authoredRootMatch = root.querySelector('[' + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(idValue) + '\"]');\n      if (authoredRootMatch) return authoredRootMatch;\n    } catch {}\n    if (typeof CSS !== \"undefined\" && CSS && typeof CSS.escape === \"function\") {\n      try {\n        return root.querySelector(\"#\" + CSS.escape(idValue)) || null;\n      } catch {}\n    }\n    try {\n      return root.querySelector('[id=\"' + __hfEscapeAttr(idValue) + '\"]') || null;\n    } catch {}\n    return null;\n  };\n  var __hfScopedDocument = typeof Proxy === \"function\"\n    ? new Proxy(window.document, {\n        get: function(target, prop, receiver) {\n          if (prop === \"querySelector\") return __hfQueryOne;\n          if (prop === \"querySelectorAll\") return __hfQueryAll;\n          if (prop === \"getElementById\") return __hfGetElementById;\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      })\n    : window.document;\n  var __hfTimelineRegistryProxy = null;\n  var __hfGetTimelineRegistry = function() {\n    window.__timelines = window.__timelines || {};\n    if (!__hfCompId || __hfCompId === __hfTimelineCompId || typeof Proxy !== \"function\") {\n      return window.__timelines;\n    }\n    if (!__hfTimelineRegistryProxy) {\n      __hfTimelineRegistryProxy = new Proxy(window.__timelines, {\n        get: function(target, prop, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.get(target, prop, target);\n          }\n          var authoredValue = Reflect.get(target, prop, target);\n          return authoredValue === undefined\n            ? Reflect.get(target, __hfTimelineCompId, target)\n            : authoredValue;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.set(target, prop, value, target);\n          }\n          // The authored node remains in the compiled DOM when its local id\n          // differs from the runtime mount id, so readiness legitimately sees\n          // both compositions. Publish the same timeline under both identities\n          // instead of replacing one with the other.\n          var authoredSet = Reflect.set(target, __hfCompId, value, target);\n          var runtimeSet = Reflect.set(target, __hfTimelineCompId, value, target);\n          return authoredSet && runtimeSet;\n        },\n      });\n    }\n    return __hfTimelineRegistryProxy;\n  };\n  var __hfScopedWindow = typeof Proxy === \"function\"\n    ? new Proxy(window, {\n        get: function(target, prop, receiver) {\n          if (prop === \"__timelines\") return __hfGetTimelineRegistry();\n          // Inside a sub-composition, __hyperframes is passed as a bare script\n          // param bound to the SCOPED variant (per-comp getVariables). But\n          // authors routinely write the documented window.__hyperframes.\n          // getVariables() form, which would otherwise fall through to the host\n          // page's base __hyperframes and return the WRONG (or empty) variables\n          // for this instance. Route it to the scoped variant too so both\n          // spellings resolve to this composition's own variables.\n          // (__hfScopedHyperframes is a hoisted var assigned below, before any\n          // sub-comp script -- the only code that reads this -- runs.)\n          if (prop === \"__hyperframes\") return __hfScopedHyperframes;\n          // Native window methods must stay bound to the real window. Handed\n          // back unbound, \"this\" at call time is this Proxy and Chrome rejects\n          // it with \"Illegal invocation\", which broke window.addEventListener,\n          // setTimeout, matchMedia and getComputedStyle inside every\n          // sub-composition -- including the window.addEventListener(\"hf-seek\",\n          // ...) form the Three.js and TypeGPU adapters document. The sibling\n          // document and gsap proxies here already bind.\n          //\n          // Only bind non-constructors. Function.prototype.bind drops static\n          // members, so binding a class exposed on window (window.Texts and\n          // friends) would silently strip its statics. Built-in methods have\n          // no .prototype; classes and constructor functions do.\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" && value.prototype === undefined\n            ? value.bind(target)\n            : value;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop === \"__timelines\") {\n            // Common authoring boilerplate assigns the registry back to\n            // itself (window.__timelines = window.__timelines || {}). The\n            // getter above returns our proxy; do not replace the canonical\n            // registry with that proxy or later wrappers will stack proxies.\n            if (value === __hfTimelineRegistryProxy) return true;\n            target.__timelines = value || {};\n            __hfTimelineRegistryProxy = null;\n            return true;\n          }\n          return Reflect.set(target, prop, value, target);\n        },\n      })\n    : window;\n  var __hfResolveGsapTarget = function(target) {\n    if (typeof target !== \"string\") return target;\n    return __hfQueryAll(target);\n  };\n  var __hfScopeTimeline = function(timeline) {\n    if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline;\n    [\"to\", \"from\", \"fromTo\", \"set\"].forEach(function(method) {\n      var original = timeline[method];\n      if (typeof original !== \"function\") return;\n      timeline[method] = function(target) {\n        var args = Array.prototype.slice.call(arguments);\n        args[0] = __hfResolveGsapTarget(target);\n        return original.apply(timeline, args);\n      };\n    });\n    try {\n      Object.defineProperty(timeline, \"__hfScopedCompositionRoot\", {\n        value: __hfFindRoot(),\n        configurable: true,\n      });\n    } catch {\n      // Best-effort: timelines coming from user code may have a frozen target\n      // or a non-extensible defineProperty path. Swallow — the scoped root\n      // is an enrichment, not a correctness invariant for playback.\n    }\n    return timeline;\n  };\n  var __hfBaseGsap = typeof gsap === \"undefined\" ? window.gsap : gsap;\n  var __hfScopedGsap = !__hfBaseGsap || typeof Proxy !== \"function\"\n    ? __hfBaseGsap\n    : new Proxy(__hfBaseGsap, {\n        get: function(target, prop, receiver) {\n          if (prop === \"timeline\") {\n            return function() {\n              return __hfScopeTimeline(target.timeline.apply(target, arguments));\n            };\n          }\n          if (prop === \"to\" || prop === \"from\" || prop === \"fromTo\" || prop === \"set\") {\n            return function(firstArg) {\n              var args = Array.prototype.slice.call(arguments);\n              args[0] = __hfResolveGsapTarget(firstArg);\n              return target[prop].apply(target, args);\n            };\n          }\n          if (prop === \"utils\" && target.utils && typeof Proxy === \"function\") {\n            return new Proxy(target.utils, {\n              get: function(utilsTarget, utilsProp, utilsReceiver) {\n                if (utilsProp === \"toArray\") {\n                  return function(firstArg) {\n                    var args = Array.prototype.slice.call(arguments);\n                    args[0] = __hfResolveGsapTarget(firstArg);\n                    return utilsTarget.toArray.apply(utilsTarget, args);\n                  };\n                }\n                if (utilsProp === \"selector\") {\n                  return function(base) {\n                    var baseEl = typeof base === \"string\" ? __hfQueryOne(base) : base;\n                    var root = baseEl || __hfFindRoot();\n                    return function(selector) {\n                      if (!root || typeof selector !== \"string\") return [];\n                      return Array.prototype.filter.call(\n                        window.document.querySelectorAll(__hfNormalizeSelector(selector)),\n                        function(node) {\n                          return node === root || (typeof root.contains === \"function\" && root.contains(node));\n                        },\n                      );\n                    };\n                  };\n                }\n                var value = Reflect.get(utilsTarget, utilsProp, utilsTarget);\n                return typeof value === \"function\" ? value.bind(utilsTarget) : value;\n              },\n            });\n          }\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      });\n  var __hfBaseHyperframes = window.__hyperframes;\n  var __hfScopedHyperframes = !__hfBaseHyperframes\n    ? __hfBaseHyperframes\n    : Object.assign({}, __hfBaseHyperframes, {\n        getVariables: function() {\n          var byComp = window.__hfVariablesByComp;\n          var scoped = byComp && __hfTimelineCompId ? byComp[__hfTimelineCompId] : null;\n          return scoped ? Object.assign({}, scoped) : {};\n        },\n      });\n  var __hfRun = function() {\n    try {\n      (function(document, gsap, window, __hyperframes) {\n\n          (function () {\n            /* SHUTTER_SNIPPET_START */\n            if (!window._hfMbUid) window._hfMbUid = 0;\n            if (!window._hfMbAttached) window._hfMbAttached = new WeakSet();\n            if (!window._hfMbSkipped) window._hfMbSkipped = new WeakSet();\n            if (!window._hfMbProxies) window._hfMbProxies = new WeakSet();\n            if (!window._hfMbTimeline) window._hfMbTimeline = new WeakMap();\n            if (!window._hfMbWarned) window._hfMbWarned = new WeakSet();\n\n            // The declarative form. A copy of a target must not carry it, or the copy is swept\n            // as a target of its own; the group's own marker is `data-hf-motion-blur-group`.\n            var SWEEP_ATTR = \"data-hf-motion-blur\";\n            // About eight seconds. Long enough for an asynchronously mounted sub-composition, short\n            // enough that a page with a genuine mistake in it reports before anyone stops watching.\n            var POLL_MS = 32;\n            var POLL_TICKS = 250;\n            var SWEEP_SELECTOR = \"[\" + SWEEP_ATTR + \"]\";\n            var OPTION_KEYS = [\"shutterAngle\", \"shutterPhase\", \"samplesPerFrame\", \"fps\"];\n\n            // A copy is a deep clone, so the attribute rides along on the root AND on every marked\n            // descendant. Any one left behind is swept as a target of its own, which clones again.\n            var COPY_STRIP = [SWEEP_ATTR, \"data-composition-id\", \"data-fps\"];\n\n            function stripAttrs(el) {\n              for (var a = 0; a < COPY_STRIP.length; a++) el.removeAttribute(COPY_STRIP[a]);\n            }\n\n            function stripCopyAttrs(root) {\n              stripAttrs(root);\n              var inner = root.querySelectorAll(\"[\" + COPY_STRIP.join(\"],[\") + \"]\");\n              for (var i = 0; i < inner.length; i++) stripAttrs(inner[i]);\n            }\n\n            // Shutter length is measured in frames, so the snippet must know the composition\n            // frame rate: explicit option, else the target's OWN root, else the first root in\n            // the document, else 30. The target's root is what makes two compositions on one\n            // page read their own data-fps instead of sharing the first one written.\n            function resolveFps(optionFps, target) {\n              var explicit = Number(optionFps);\n              if (explicit > 0) return explicit;\n\n              var scoped = target ? target.closest(\"[data-composition-id][data-fps]\") : null;\n              var root = scoped || document.querySelector(\"[data-composition-id][data-fps]\");\n              var rootFps = root ? Number(root.getAttribute(\"data-fps\")) : 0;\n              if (rootFps > 0) return rootFps;\n\n              return 30;\n            }\n\n            function numOption(value, fallback) {\n              return value !== undefined ? Number(value) : fallback;\n            }\n\n            // A resolved `transform` is either \"none\", a 2D matrix(a,b,c,d,e,f) or a 3D\n            // matrix3d of 16. Splitting the numbers into the linear part and the\n            // translation is what lets the deadband below use a pixel tolerance on the\n            // one and an angle/ratio tolerance on the other.\n            function parseTransform(value) {\n              if (!value || value === \"none\") return { linear: [1, 0, 0, 1], translate: [0, 0, 0] };\n              var nums = value\n                .slice(value.indexOf(\"(\") + 1, -1)\n                .split(\",\")\n                .map(parseFloat);\n              if (nums.length === 16) {\n                return {\n                  linear: [\n                    nums[0],\n                    nums[1],\n                    nums[2],\n                    nums[4],\n                    nums[5],\n                    nums[6],\n                    nums[8],\n                    nums[9],\n                    nums[10],\n                    nums[3],\n                    nums[7],\n                    nums[11],\n                    nums[15],\n                  ],\n                  translate: [nums[12], nums[13], nums[14]],\n                };\n              }\n              return {\n                linear: [nums[0], nums[1], nums[2], nums[3]],\n                translate: [nums[4], nums[5], 0],\n              };\n            }\n\n            // Deadband: half a pixel of travel, a thousandth of a unit of linear change,\n            // about 0.06 degrees or 0.1% of scale. Below it the average is the source.\n            // The 2D and 3D forms have different arities, so a change of form counts as\n            // movement rather than being compared component by component.\n            function differs(a, b) {\n              if (a.linear.length !== b.linear.length) return true;\n              for (var i = 0; i < a.linear.length; i++) {\n                if (Math.abs(a.linear[i] - b.linear[i]) > 0.001) return true;\n              }\n              for (var j = 0; j < 3; j++) {\n                if (Math.abs(a.translate[j] - b.translate[j]) > 0.5) return true;\n              }\n              return false;\n            }\n\n            window.attachMotionBlur = function (selector, tl, opts) {\n              opts = opts || {};\n              var shutterAngle = numOption(opts.shutterAngle, 720);\n              var shutterPhase = numOption(opts.shutterPhase, -360);\n              var requestedSamples = numOption(opts.samplesPerFrame, 16);\n              var samples = Number.isFinite(requestedSamples)\n                ? Math.max(2, Math.min(64, Math.round(requestedSamples)))\n                : 16;\n              var items = Array.isArray(selector) ? selector : [selector];\n              var targets = items.reduce(function (acc, s) {\n                if (typeof s === \"string\") {\n                  document.querySelectorAll(s).forEach(function (el) {\n                    acc.push(el);\n                  });\n                } else if (s instanceof Element) {\n                  acc.push(s);\n                }\n                return acc;\n              }, []);\n\n              // `samples` counts sub-intervals of the shutter window, so there is one copy at\n              // every interval boundary — both ends of the window included — and each carries\n              // 1/samples of the source. That is what the reference export shows: the outermost\n              // copy sits exactly one frame away from the frame time, not half a step short.\n              var copies = samples + 1;\n              var alpha = String(1 / samples);\n\n              // A copy is styled by nothing that selected the original: dropping the id also\n              // drops every `#id` rule that gave it size, colour and font. So each copy carries\n              // its own resolved style inline. Chrome returns \"\" for a computed style's cssText,\n              // so the declarations are enumerated rather than taken wholesale.\n              function resolvedStyles(source, out) {\n                var cs = getComputedStyle(source);\n                var text = \"\";\n                for (var i = 0; i < cs.length; i++) {\n                  text += cs[i] + \":\" + cs.getPropertyValue(cs[i]) + \";\";\n                }\n                // A copy is a still of one instant. Left live, an inherited transition or\n                // keyframe animation would carry it somewhere the timeline never sampled.\n                out.push(text + \"transition:none;animation:none;\");\n                for (var c = 0; c < source.children.length; c++) {\n                  resolvedStyles(source.children[c], out);\n                }\n                return out;\n              }\n\n              function paintResolvedStyles(copy, styles, cursor) {\n                copy.style.cssText = styles[cursor.i++];\n                for (var c = 0; c < copy.children.length; c++) {\n                  paintResolvedStyles(copy.children[c], styles, cursor);\n                }\n              }\n\n              // Perspective applies to a parent's children only, and a copy is a grandchild.\n              // Sharing the parent's 3D context would need preserve-3d on the group, which\n              // mix-blend-mode flattens, so each copy carries the perspective itself. See the\n              // header for what that does to the vanishing point.\n              function parentPerspective(el) {\n                var value = el.parentNode ? getComputedStyle(el.parentNode).perspective : \"none\";\n                return value && value !== \"none\" ? \"perspective(\" + value + \") \" : \"\";\n              }\n\n              function attachOne(el) {\n                var group = document.createElement(\"div\");\n                group.setAttribute(\"data-hf-motion-blur-group\", \"hf-mb-\" + window._hfMbUid++);\n                group.style.cssText =\n                  \"position:absolute;left:0;top:0;width:0;height:0;isolation:isolate;pointer-events:none;display:none;\";\n\n                var clones = [];\n                for (var k = 0; k < copies; k++) {\n                  var clone = el.cloneNode(true);\n                  clone.removeAttribute(\"id\");\n                  stripCopyAttrs(clone);\n                  clones.push(clone);\n                  group.appendChild(clone);\n                }\n                var s = {\n                  el: el,\n                  group: group,\n                  clones: clones,\n                  samples: [],\n                  perspective: \"\",\n                  watch: null,\n                };\n\n                // Resolved styles and the parent's perspective are px once read, so a\n                // container-relative element needs them again when its box changes. Per frame\n                // that would walk the whole subtree once per copy; on resize it costs nothing\n                // on a fixed-size render and keeps a live preview honest.\n                function snapshot() {\n                  var styles = resolvedStyles(el, []);\n                  s.perspective = parentPerspective(el);\n                  for (var c = 0; c < clones.length; c++) {\n                    paintResolvedStyles(clones[c], styles, { i: 0 });\n                    clones[c].style.position = \"absolute\";\n                    clones[c].style.margin = \"0\";\n                    clones[c].style.opacity = alpha;\n                    clones[c].style.mixBlendMode = \"plus-lighter\";\n                  }\n                }\n\n                // Snapshot BEFORE the group enters the page, so a throw in the style walk leaves\n                // nothing behind: the record the rollback needs does not exist until it returns.\n                snapshot();\n                el.parentNode.insertBefore(group, el);\n                if (typeof ResizeObserver === \"function\") {\n                  s.watch = new ResizeObserver(snapshot);\n                  s.watch.observe(el);\n                }\n                return s;\n              }\n\n              var state = [];\n              // Every element this call marked. A throw inside `attachOne` never returns its\n              // record, so `state` alone cannot give the marks back.\n              var claimed = [];\n              try {\n                for (var q = 0; q < targets.length; q++) {\n                  var candidate = targets[q];\n                  // One group per element, whether a second call names it or one call names it\n                  // twice: a second set of copies over the first would double the ink. Marked\n                  // BEFORE the copies go in: inserting them runs custom-element reactions\n                  // synchronously, and one that registers a timeline re-enters the write trap.\n                  if (window._hfMbAttached.has(candidate)) continue;\n                  window._hfMbAttached.add(candidate);\n                  window._hfMbTimeline.set(candidate, tl);\n                  claimed.push(candidate);\n                  state.push(attachOne(candidate));\n                }\n              } catch (e) {\n                unmark(claimed);\n                discard(state);\n                throw e;\n              }\n              // Nothing to blur means nothing to seek: a tracker here would run the whole sample\n              // loop every frame over an empty set.\n              if (state.length === 0) return;\n\n              // One seek loop drives the whole call, so the window is ONE length, and it belongs\n              // to the composition of an element this call actually attached.\n              var fps = resolveFps(opts.fps, state[0].el);\n              for (var d = 1; d < state.length; d++) {\n                if (resolveFps(opts.fps, state[d].el) === fps) continue;\n                var line = \"one call cannot blur compositions at different frame rates; using \";\n                console.warn(\"[motion-blur] \" + line + fps, state[d].el);\n                break;\n              }\n\n              function readTransform(el) {\n                var cs = getComputedStyle(el);\n                return {\n                  css: cs.transform,\n                  origin: cs.transformOrigin,\n                  opacity: cs.opacity,\n                  parsed: parseTransform(cs.transform),\n                };\n              }\n\n              var scheduled = false;\n\n              function applyShutter() {\n                var shutterTime = shutterAngle / 360 / fps;\n                if (!(shutterTime > 0)) {\n                  state.forEach(function (s) {\n                    s.group.style.display = \"none\";\n                  });\n                  return;\n                }\n\n                var t0 = tl.time();\n                var duration = tl.duration();\n                var windowStart = t0 + shutterPhase / 360 / fps;\n\n                // Sample the real trajectory: seek to each sub-frame time with events\n                // suppressed (so no tween callbacks, including this tracker's, fire),\n                // read the resolved transform, then restore the frame time.\n                try {\n                  for (var k = 0; k < copies; k++) {\n                    var tk = windowStart + (k / samples) * shutterTime;\n                    tl.time(Math.min(duration, Math.max(0, tk)), true);\n                    state.forEach(function (s) {\n                      s.samples[k] = readTransform(s.el);\n                    });\n                  }\n                } finally {\n                  tl.time(t0, true);\n                }\n\n                state.forEach(function (s) {\n                  var current = readTransform(s.el);\n                  var moved = false;\n                  for (var i = 0; i < copies; i++) {\n                    if (differs(s.samples[i].parsed, current.parsed)) {\n                      moved = true;\n                      break;\n                    }\n                  }\n                  if (!moved) {\n                    s.group.style.display = \"none\";\n                    return;\n                  }\n\n                  // The copies are absolutely positioned inside the group, and the group sits at\n                  // the origin of the element's own containing block, so the element's offset box\n                  // places them. Re-read every frame: a beat is free to move the box itself.\n                  var left = s.el.offsetLeft + \"px\";\n                  var top = s.el.offsetTop + \"px\";\n                  var width = s.el.offsetWidth + \"px\";\n                  var height = s.el.offsetHeight + \"px\";\n                  for (var j = 0; j < copies; j++) {\n                    var clone = s.clones[j];\n                    clone.style.left = left;\n                    clone.style.top = top;\n                    clone.style.width = width;\n                    clone.style.height = height;\n                    clone.style.transformOrigin = s.samples[j].origin;\n                    clone.style.transform =\n                      s.perspective + (s.samples[j].css === \"none\" ? \"\" : s.samples[j].css);\n                  }\n                  // The copies are the element's own ink, so they have to carry its opacity too:\n                  // a beat that moves and fades at once would otherwise leave a full-strength\n                  // smear behind a vanishing element. It rides the group, not the copies, whose\n                  // own opacity is the 1/N shutter weight.\n                  s.group.style.opacity = current.opacity;\n                  s.group.style.display = \"\";\n                });\n              }\n\n              // tl.eventCallback(\"onUpdate\") is unavailable under the HyperFrames runtime proxy, so a\n              // tracker tween's onUpdate fires on every seek. Sampling is deferred to a microtask:\n              // seeking GSAP from inside its own render reads stale tween state, while the microtask\n              // runs after the seek returns and before the frame is captured or painted.\n              var _proxy = { t: 0 };\n              try {\n                tl.to(\n                  _proxy,\n                  {\n                    t: 1,\n                    duration: Math.max(tl.duration(), 0.1),\n                    ease: \"none\",\n                    onUpdate: function () {\n                      if (scheduled) return;\n                      scheduled = true;\n                      Promise.resolve().then(function () {\n                        scheduled = false;\n                        applyShutter();\n                      });\n                    },\n                  },\n                  0,\n                );\n              } catch (e) {\n                unmark(claimed);\n                discard(state);\n                throw e;\n              }\n            };\n\n            // An empty attribute means defaults; anything else is a JSON options object. A value that\n            // is not an options object is skipped loudly rather than read as defaults, because a typo\n            // in it would otherwise render as a silently unblurred element.\n            function sweepOptions(el) {\n              var text = (el.getAttribute(SWEEP_ATTR) || \"\").trim();\n              if (text === \"\") return {};\n              var parsed = null;\n              try {\n                parsed = JSON.parse(text);\n              } catch (e) {\n                return refuse(el, \"is not JSON: \" + text);\n              }\n              // `null`, a number and a string all parse. None of them is a set of options.\n              if (parsed === null || typeof parsed !== \"object\" || Array.isArray(parsed)) {\n                return refuse(el, \"is not a JSON object: \" + text);\n              }\n              var bad = unknownKey(parsed);\n              if (bad !== null) return refuse(el, \"names no such option: \" + bad);\n              var wrong = nonNumber(parsed);\n              if (wrong !== null) return refuse(el, \"needs a number for \" + wrong);\n              return parsed;\n            }\n\n            // A misspelled key is the likeliest typo in a JSON object, and reading it as\n            // defaults is the silent no-op this attribute exists to remove.\n            function unknownKey(parsed) {\n              for (var key in parsed) {\n                if (OPTION_KEYS.indexOf(key) < 0) return key;\n              }\n              return null;\n            }\n\n            // A key with a value the shutter cannot use is the same silent no-op as a key it does\n            // not know: a non-numeric angle hides the smear, a non-numeric phase parks every copy\n            // at the timeline's start. JSON gives real numbers, so anything else is a typo.\n            function nonNumber(parsed) {\n              for (var i = 0; i < OPTION_KEYS.length; i++) {\n                var held = parsed[OPTION_KEYS[i]];\n                if (held === undefined) continue;\n                if (typeof held !== \"number\" || !Number.isFinite(held)) return OPTION_KEYS[i];\n              }\n              return null;\n            }\n\n            // A throw partway through an attach leaves an element blurred by nothing, so the copies\n            // go too, along with the observer that would otherwise keep walking a detached subtree\n            // on every resize of an element nothing blurs.\n            // The mark is what a second trigger reads, so it is the first thing to give back.\n            function unmark(els) {\n              for (var i = 0; i < els.length; i++) {\n                window._hfMbAttached.delete(els[i]);\n                window._hfMbTimeline.delete(els[i]);\n              }\n            }\n\n            function discard(state) {\n              for (var i = 0; i < state.length; i++) {\n                var s = state[i];\n                if (s.watch !== null) s.watch.disconnect();\n                if (s.group.parentNode !== null) s.group.parentNode.removeChild(s.group);\n              }\n            }\n\n            function refuse(el, why) {\n              window._hfMbSkipped.add(el);\n              console.warn(\"[motion-blur] \" + SWEEP_ATTR + \" \" + why, el);\n              return null;\n            }\n\n            // An element belongs to the nearest composition above it, so a sub-composition's\n            // targets follow that sub-composition's own timeline.\n            function compositionOf(el) {\n              var host = el.closest(\"[data-composition-id]\");\n              return host ? host.getAttribute(\"data-composition-id\") : null;\n            }\n\n            // Anything else registered on the container is somebody else's bookkeeping: a\n            // timeline is the thing this snippet can seek and extend.\n            function isTimeline(value) {\n              return !!value && typeof value.time === \"function\" && typeof value.to === \"function\";\n            }\n\n            // Attached, or skipped as unparseable. Both are terminal, so a later trigger must not\n            // report or attach the element twice.\n            function handled(el) {\n              return window._hfMbAttached.has(el) || window._hfMbSkipped.has(el);\n            }\n\n            // The timeline registered for an element's own composition, or null. Read from the\n            // registry rather than taken from whoever wrote it, so every trigger agrees.\n            function timelineFor(el) {\n              var id = compositionOf(el);\n              if (id === null) return null;\n              var registry = window.__timelines;\n              var found = registry ? registry[id] : null;\n              return isTimeline(found) ? found : null;\n            }\n\n            // A marked element whose parent is not an Element has no target above it: the parent\n            // of a root is the Document, which has no `closest`.\n            function nestedInTarget(el) {\n              var parent = el.parentNode;\n              if (parent === null || typeof parent.closest !== \"function\") return false;\n              return parent.closest(SWEEP_SELECTOR) !== null;\n            }\n\n            // One owner of attaching one element. Answers whether the element still needs a trigger.\n            function claim(el) {\n              var tl = timelineFor(el);\n              if (handled(el)) {\n                var owner = window._hfMbTimeline.get(el);\n                // Re-registering a key with a DIFFERENT timeline leaves the copies driven by the one\n                // nobody seeks, which renders sharp and says nothing. Report it rather than guess.\n                var changed = tl !== null && owner !== undefined && owner !== tl;\n                if (changed && !window._hfMbWarned.has(el)) {\n                  window._hfMbWarned.add(el);\n                  console.warn(\n                    \"[motion-blur] a second timeline registered for this element; the copies still follow the first\",\n                    el,\n                  );\n                }\n                return true;\n              }\n              // Its group would be inserted into the live outer element, so the outer target's\n              // style replay would walk a subtree its cursor no longer matches.\n              if (nestedInTarget(el)) {\n                refuse(el, \"cannot blur a target inside another target; blur one of them\");\n                return true;\n              }\n              var opts = sweepOptions(el);\n              if (opts === null) return true;\n              if (tl === null) return false;\n              window.attachMotionBlur(el, tl, opts);\n              return true;\n            }\n\n            // Returns the elements still waiting for their composition to register a timeline.\n            // The trap below runs this INSIDE the author's registration statement, so one bad\n            // target must not abort the rest of their composition script.\n            function sweep() {\n              var pending = [];\n              document.querySelectorAll(SWEEP_SELECTOR).forEach(function (el) {\n                try {\n                  if (!claim(el)) pending.push(el);\n                } catch (e) {\n                  window._hfMbSkipped.add(el);\n                  console.warn(\"[motion-blur] could not blur this element: \" + e, el);\n                }\n              });\n              return pending;\n            }\n\n            // Registering a timeline is the moment the author has finished building it, so trapping\n            // the write attaches before the renderer captures a frame. A microtask would be too\n            // early: it runs before the next `<script>` tag.\n            function registrationProxy(container) {\n              var proxy = new Proxy(container, {\n                set: function (target, key, value) {\n                  target[key] = value;\n                  if (typeof key === \"string\") sweep();\n                  return true;\n                },\n              });\n              window._hfMbProxies.add(proxy);\n              return proxy;\n            }\n\n            function hookRegistration() {\n              var held = window.__timelines;\n              Object.defineProperty(window, \"__timelines\", {\n                configurable: true,\n                enumerable: true,\n                get: function () {\n                  return held;\n                },\n                set: function (value) {\n                  var container = !!value && typeof value === \"object\";\n                  var fresh = container && !window._hfMbProxies.has(value);\n                  held = fresh ? registrationProxy(value) : value;\n                  if (fresh) sweep();\n                },\n              });\n              // A container assigned before this snippet ran is replayed through the setter, so a\n              // timeline already registered on it is swept too.\n              if (held !== undefined) window.__timelines = held;\n            }\n\n            // The trap above cannot see every registration: the runtime owns the registry object,\n            // wraps it per sub-composition, and mounts nested compositions asynchronously. So the\n            // registry is also POLLED, which needs no cooperation from whoever writes it.\n            function poll(ticks) {\n              var pending = sweep();\n              // The WHOLE budget, every time. Stopping the first tick nothing is pending kills the\n              // poll one tick into an ordinary page, which is before a late composition arrives.\n              if (ticks > 0) {\n                setTimeout(function () {\n                  poll(ticks - 1);\n                }, POLL_MS);\n                return;\n              }\n              if (pending.length === 0) return;\n              var count = pending.length + \" element(s) carry \" + SWEEP_ATTR;\n              console.warn(\n                \"[motion-blur] \" + count + \", and no composition registered a timeline for them\",\n                pending,\n              );\n            }\n\n            if (!window._hfMbHooked) {\n              window._hfMbHooked = true;\n              hookRegistration();\n              poll(POLL_TICKS);\n            }\n            /* SHUTTER_SNIPPET_END */\n          })();\n        \n      }).call(window, __hfScopedDocument, __hfScopedGsap, __hfScopedWindow, __hfScopedHyperframes);\n    } catch (_err) {\n      console.error(__hfErrorLabel, __hfCompId, _err);\n    }\n  };\n  __hfFindRoot();\n  __hfRun();\n})();\n;\n(function(){\n  var __hfCompId = \"shutter-slam\";\n  var __hfTimelineCompId = \"shutter-slam\";\n  var __hfErrorLabel = \"[Compiler] Composition script failed\";\n  var __hfAuthoredRootId = \"root\";\n  var __hfAuthoredRootAttr = \"data-hf-authored-id\";\n  var __hfEscapeAttr = function(value) {\n    return (value + \"\").replace(/\\\\/g, \"\\\\\\\\\").replace(/\"/g, \"\\\\\\\"\");\n  };\n  var __hfRootSelector = \"[data-composition-id=\\\"shutter-slam\\\"]\" || (__hfCompId\n    ? '[data-composition-id=\"' + __hfEscapeAttr(__hfCompId) + '\"]'\n    : \"\");\n  var __hfRoot = null;\n  var __hfRootSelectorPattern = \"\\\\[\\\\s*data-composition-id\\\\s*=\\\\s*(?:\\\"shutter-slam\\\"|'shutter-slam')\\\\s*\\\\]\";\n  var __hfTimingSelectorPattern = \"\\\\s*\\\\[\\\\s*data-(?:start|duration)\\\\s*=\\\\s*(?:\\\"[^\\\"]*\\\"|'[^']*')\\\\s*\\\\]\";\n  var __hfAuthoredRootIdForms = [\"root\"];\n  var __hfAuthoredRootSelector = __hfAuthoredRootId\n    ? \"[\" + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(__hfAuthoredRootId) + '\"]'\n    : \"\";\n  var __hfIsSelectorNameChar = function(char) {\n    return !!char && /[\\w-]/.test(char);\n  };\n  var __hfReplaceAuthoredRootIdSelectors = function(selector) {\n    if (!__hfAuthoredRootSelector || !__hfAuthoredRootIdForms.length || typeof selector !== \"string\") {\n      return selector;\n    }\n    var result = \"\";\n    var bracketDepth = 0;\n    var quote = null;\n    for (var index = 0; index < selector.length; index += 1) {\n      var char = selector[index];\n      var previousChar = index > 0 ? selector[index - 1] : \"\";\n      if (quote) {\n        result += char;\n        if (char === quote && previousChar !== \"\\\\\") {\n          quote = null;\n        }\n        continue;\n      }\n      if (char === '\"' || char === \"'\") {\n        quote = char;\n        result += char;\n        continue;\n      }\n      if (char === \"[\") {\n        bracketDepth += 1;\n        result += char;\n        continue;\n      }\n      if (char === \"]\") {\n        bracketDepth = Math.max(0, bracketDepth - 1);\n        result += char;\n        continue;\n      }\n      if (char === \"#\" && bracketDepth === 0) {\n        var matchedForm = null;\n        for (var formIndex = 0; formIndex < __hfAuthoredRootIdForms.length; formIndex += 1) {\n          var form = __hfAuthoredRootIdForms[formIndex];\n          if (selector.slice(index + 1, index + 1 + form.length) === form) {\n            matchedForm = form;\n            break;\n          }\n        }\n        if (matchedForm) {\n          var nextChar = selector[index + 1 + matchedForm.length];\n          if (!__hfIsSelectorNameChar(nextChar)) {\n            result += __hfAuthoredRootSelector;\n            index += matchedForm.length;\n            continue;\n          }\n        }\n      }\n      result += char;\n    }\n    return result;\n  };\n  var __hfNormalizeSelector = function(selector) {\n    if (!__hfCompId || typeof selector !== \"string\") return selector;\n    var normalized = selector\n      .replace(new RegExp(__hfRootSelectorPattern + '(?:' + __hfTimingSelectorPattern + ')+', 'g'), __hfRootSelector)\n      .replace(new RegExp('(?:' + __hfTimingSelectorPattern + ')+' + __hfRootSelectorPattern, 'g'), __hfRootSelector);\n    if (__hfAuthoredRootSelector) {\n      normalized = __hfReplaceAuthoredRootIdSelectors(normalized);\n    }\n    return normalized;\n  };\n  var __hfFindRoot = function() {\n    if (!__hfRoot && __hfRootSelector) {\n      __hfRoot = window.document.querySelector(__hfRootSelector);\n    }\n    return __hfRoot;\n  };\n  var __hfContains = function(node) {\n    var root = __hfFindRoot();\n    return !root || node === root || root.contains(node);\n  };\n  var __hfQueryAll = function(selector) {\n    var root = __hfFindRoot();\n    if (!root || typeof selector !== \"string\") {\n      return window.document.querySelectorAll(selector);\n    }\n    return Array.prototype.filter.call(window.document.querySelectorAll(__hfNormalizeSelector(selector)), function(node) {\n      return __hfContains(node);\n    });\n  };\n  var __hfQueryOne = function(selector) {\n    var matches = __hfQueryAll(selector);\n    return matches[0] || null;\n  };\n  var __hfGetElementById = function(id) {\n    var found = window.document.getElementById(id);\n    if (found && __hfContains(found)) return found;\n    var root = __hfFindRoot();\n    if (!root) return found || null;\n    var idValue = id + \"\";\n    if (__hfAuthoredRootId && __hfAuthoredRootId === idValue && root.getAttribute && root.getAttribute(__hfAuthoredRootAttr) === idValue) {\n      return root;\n    }\n    if (root.id === idValue) return root;\n    if (typeof root.querySelector !== \"function\") return null;\n    try {\n      var authoredRootMatch = root.querySelector('[' + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(idValue) + '\"]');\n      if (authoredRootMatch) return authoredRootMatch;\n    } catch {}\n    if (typeof CSS !== \"undefined\" && CSS && typeof CSS.escape === \"function\") {\n      try {\n        return root.querySelector(\"#\" + CSS.escape(idValue)) || null;\n      } catch {}\n    }\n    try {\n      return root.querySelector('[id=\"' + __hfEscapeAttr(idValue) + '\"]') || null;\n    } catch {}\n    return null;\n  };\n  var __hfScopedDocument = typeof Proxy === \"function\"\n    ? new Proxy(window.document, {\n        get: function(target, prop, receiver) {\n          if (prop === \"querySelector\") return __hfQueryOne;\n          if (prop === \"querySelectorAll\") return __hfQueryAll;\n          if (prop === \"getElementById\") return __hfGetElementById;\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      })\n    : window.document;\n  var __hfTimelineRegistryProxy = null;\n  var __hfGetTimelineRegistry = function() {\n    window.__timelines = window.__timelines || {};\n    if (!__hfCompId || __hfCompId === __hfTimelineCompId || typeof Proxy !== \"function\") {\n      return window.__timelines;\n    }\n    if (!__hfTimelineRegistryProxy) {\n      __hfTimelineRegistryProxy = new Proxy(window.__timelines, {\n        get: function(target, prop, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.get(target, prop, target);\n          }\n          var authoredValue = Reflect.get(target, prop, target);\n          return authoredValue === undefined\n            ? Reflect.get(target, __hfTimelineCompId, target)\n            : authoredValue;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.set(target, prop, value, target);\n          }\n          // The authored node remains in the compiled DOM when its local id\n          // differs from the runtime mount id, so readiness legitimately sees\n          // both compositions. Publish the same timeline under both identities\n          // instead of replacing one with the other.\n          var authoredSet = Reflect.set(target, __hfCompId, value, target);\n          var runtimeSet = Reflect.set(target, __hfTimelineCompId, value, target);\n          return authoredSet && runtimeSet;\n        },\n      });\n    }\n    return __hfTimelineRegistryProxy;\n  };\n  var __hfScopedWindow = typeof Proxy === \"function\"\n    ? new Proxy(window, {\n        get: function(target, prop, receiver) {\n          if (prop === \"__timelines\") return __hfGetTimelineRegistry();\n          // Inside a sub-composition, __hyperframes is passed as a bare script\n          // param bound to the SCOPED variant (per-comp getVariables). But\n          // authors routinely write the documented window.__hyperframes.\n          // getVariables() form, which would otherwise fall through to the host\n          // page's base __hyperframes and return the WRONG (or empty) variables\n          // for this instance. Route it to the scoped variant too so both\n          // spellings resolve to this composition's own variables.\n          // (__hfScopedHyperframes is a hoisted var assigned below, before any\n          // sub-comp script -- the only code that reads this -- runs.)\n          if (prop === \"__hyperframes\") return __hfScopedHyperframes;\n          // Native window methods must stay bound to the real window. Handed\n          // back unbound, \"this\" at call time is this Proxy and Chrome rejects\n          // it with \"Illegal invocation\", which broke window.addEventListener,\n          // setTimeout, matchMedia and getComputedStyle inside every\n          // sub-composition -- including the window.addEventListener(\"hf-seek\",\n          // ...) form the Three.js and TypeGPU adapters document. The sibling\n          // document and gsap proxies here already bind.\n          //\n          // Only bind non-constructors. Function.prototype.bind drops static\n          // members, so binding a class exposed on window (window.Texts and\n          // friends) would silently strip its statics. Built-in methods have\n          // no .prototype; classes and constructor functions do.\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" && value.prototype === undefined\n            ? value.bind(target)\n            : value;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop === \"__timelines\") {\n            // Common authoring boilerplate assigns the registry back to\n            // itself (window.__timelines = window.__timelines || {}). The\n            // getter above returns our proxy; do not replace the canonical\n            // registry with that proxy or later wrappers will stack proxies.\n            if (value === __hfTimelineRegistryProxy) return true;\n            target.__timelines = value || {};\n            __hfTimelineRegistryProxy = null;\n            return true;\n          }\n          return Reflect.set(target, prop, value, target);\n        },\n      })\n    : window;\n  var __hfResolveGsapTarget = function(target) {\n    if (typeof target !== \"string\") return target;\n    return __hfQueryAll(target);\n  };\n  var __hfScopeTimeline = function(timeline) {\n    if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline;\n    [\"to\", \"from\", \"fromTo\", \"set\"].forEach(function(method) {\n      var original = timeline[method];\n      if (typeof original !== \"function\") return;\n      timeline[method] = function(target) {\n        var args = Array.prototype.slice.call(arguments);\n        args[0] = __hfResolveGsapTarget(target);\n        return original.apply(timeline, args);\n      };\n    });\n    try {\n      Object.defineProperty(timeline, \"__hfScopedCompositionRoot\", {\n        value: __hfFindRoot(),\n        configurable: true,\n      });\n    } catch {\n      // Best-effort: timelines coming from user code may have a frozen target\n      // or a non-extensible defineProperty path. Swallow — the scoped root\n      // is an enrichment, not a correctness invariant for playback.\n    }\n    return timeline;\n  };\n  var __hfBaseGsap = typeof gsap === \"undefined\" ? window.gsap : gsap;\n  var __hfScopedGsap = !__hfBaseGsap || typeof Proxy !== \"function\"\n    ? __hfBaseGsap\n    : new Proxy(__hfBaseGsap, {\n        get: function(target, prop, receiver) {\n          if (prop === \"timeline\") {\n            return function() {\n              return __hfScopeTimeline(target.timeline.apply(target, arguments));\n            };\n          }\n          if (prop === \"to\" || prop === \"from\" || prop === \"fromTo\" || prop === \"set\") {\n            return function(firstArg) {\n              var args = Array.prototype.slice.call(arguments);\n              args[0] = __hfResolveGsapTarget(firstArg);\n              return target[prop].apply(target, args);\n            };\n          }\n          if (prop === \"utils\" && target.utils && typeof Proxy === \"function\") {\n            return new Proxy(target.utils, {\n              get: function(utilsTarget, utilsProp, utilsReceiver) {\n                if (utilsProp === \"toArray\") {\n                  return function(firstArg) {\n                    var args = Array.prototype.slice.call(arguments);\n                    args[0] = __hfResolveGsapTarget(firstArg);\n                    return utilsTarget.toArray.apply(utilsTarget, args);\n                  };\n                }\n                if (utilsProp === \"selector\") {\n                  return function(base) {\n                    var baseEl = typeof base === \"string\" ? __hfQueryOne(base) : base;\n                    var root = baseEl || __hfFindRoot();\n                    return function(selector) {\n                      if (!root || typeof selector !== \"string\") return [];\n                      return Array.prototype.filter.call(\n                        window.document.querySelectorAll(__hfNormalizeSelector(selector)),\n                        function(node) {\n                          return node === root || (typeof root.contains === \"function\" && root.contains(node));\n                        },\n                      );\n                    };\n                  };\n                }\n                var value = Reflect.get(utilsTarget, utilsProp, utilsTarget);\n                return typeof value === \"function\" ? value.bind(utilsTarget) : value;\n              },\n            });\n          }\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      });\n  var __hfBaseHyperframes = window.__hyperframes;\n  var __hfScopedHyperframes = !__hfBaseHyperframes\n    ? __hfBaseHyperframes\n    : Object.assign({}, __hfBaseHyperframes, {\n        getVariables: function() {\n          var byComp = window.__hfVariablesByComp;\n          var scoped = byComp && __hfTimelineCompId ? byComp[__hfTimelineCompId] : null;\n          return scoped ? Object.assign({}, scoped) : {};\n        },\n      });\n  var __hfRun = function() {\n    try {\n      (function(document, gsap, window, __hyperframes) {\n\n          (function () {\n            \"use strict\";\n\n            var root = document.getElementById(\"root\");\n            var word = root.querySelector(\".ss-word\");\n            var vars =\n              window.__hyperframes && window.__hyperframes.getVariables\n                ? window.__hyperframes.getVariables()\n                : {};\n\n            var text = vars.text == null ? \"MOTION\" : String(vars.text);\n            var accentColors = {\n              green: \"var(--brand, #71f5a7)\",\n              blue: \"var(--accent, #61a8ff)\",\n              violet: \"var(--accent-2, #b895ff)\",\n            };\n            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)\n              ? vars.accent\n              : \"green\";\n            var blurred = vars.blur !== \"none\";\n            var exit = vars.exit === \"fade\" || vars.exit === \"up\" ? vars.exit : \"none\";\n\n            root.style.setProperty(\"--ss-accent\", accentColors[accent]);\n            word.textContent = text;\n\n            // One em per character keeps any word inside the box at rest, which is what\n            // the slam amplitudes are measured against; the scale punch is meant to\n            // overflow and the clip crops it.\n            var fittedCqw = Math.min(14, 76 / Math.max(1, Array.from(text).length));\n            root.style.setProperty(\"--ss-font-size\", \"min(\" + fittedCqw.toFixed(3) + \"cqw, 26cqh)\");\n\n            // Measured off the reference export; see the header.\n            function aeEase(t) {\n              var X1 = 0.54;\n              var X2 = 0.48;\n              var s = t;\n              for (var i = 0; i < 8; i++) {\n                var x = 3 * X1 * (1 - s) * (1 - s) * s + 3 * X2 * (1 - s) * s * s + s * s * s;\n                var dx =\n                  3 * X1 * (1 - 4 * s + 3 * s * s) + 3 * X2 * (2 * s - 3 * s * s) + 3 * s * s;\n                if (Math.abs(dx) < 1e-9) break;\n                s -= (x - t) / dx;\n                if (s < 0) s = 0;\n                else if (s > 1) s = 1;\n              }\n              return 3 * (1 - s) * s * s + s * s * s;\n            }\n\n            var SLAM_X = 32.1; // cqw, the reference's 617 px on a 1920 px frame\n            var SLAM_Y = 30.5; // cqh, its 329 px on a 1080 px frame\n            var SLAM = 0.3;\n            var TURN = 0.6;\n            var TURN_Z = 0.733;\n            // Authored start of each beat, and the end of the last one.\n            var CUES_BASE = [0, 1.2, 2.4, 3.7, 4.5, 5.233];\n            var BEATS_BASE = 5.233 + TURN_Z;\n            var OUT_BASE = exit === \"none\" ? 0 : 0.4;\n\n            var duration = Math.max(0.001, parseFloat(root.dataset.duration || \"6\"));\n            var baseTotal = BEATS_BASE + OUT_BASE;\n            var beatScale = duration < baseTotal ? duration / baseTotal : 1;\n\n            // An authored cue list replaces the rhythm outright rather than scaling it,\n            // so a beat locked to narration lands where the narration does. Missing or\n            // unreadable entries keep their authored start.\n            var authored = String(vars.cues == null ? \"\" : vars.cues)\n              .split(\",\")\n              .map(function (part) {\n                return parseFloat(part.trim());\n              });\n            var cues = CUES_BASE.map(function (base, index) {\n              var value = authored[index];\n              return Number.isFinite(value) ? value : base * beatScale;\n            });\n\n            var tl = gsap.timeline({ paused: true, defaults: { ease: aeEase } });\n            var slam = SLAM * beatScale;\n            var turn = TURN * beatScale;\n            var turnZ = TURN_Z * beatScale;\n\n            // Beat 1 — translate X, out and back twice.\n            tl.to(word, { x: SLAM_X + \"cqw\", duration: slam }, cues[0])\n              .to(word, { x: -SLAM_X + \"cqw\", duration: slam }, cues[0] + slam)\n              .to(word, { x: SLAM_X + \"cqw\", duration: slam }, cues[0] + slam * 2)\n              .to(word, { x: 0, duration: slam }, cues[0] + slam * 3);\n\n            // Beat 2 — translate Y, up first.\n            tl.to(word, { y: -SLAM_Y + \"cqh\", duration: slam }, cues[1])\n              .to(word, { y: SLAM_Y + \"cqh\", duration: slam }, cues[1] + slam)\n              .to(word, { y: -SLAM_Y + \"cqh\", duration: slam }, cues[1] + slam * 2)\n              .to(word, { y: 0, duration: slam }, cues[1] + slam * 3);\n\n            // Beat 3 — scale punch, up then down then up.\n            tl.to(word, { scale: 4.04, duration: slam }, cues[2])\n              .to(word, { scale: 0.466, duration: slam }, cues[2] + slam)\n              .to(word, { scale: 4.04, duration: slam }, cues[2] + slam * 2)\n              .to(word, { scale: 1, duration: slam }, cues[2] + slam * 3);\n\n            // Beats 4 to 6 — one full turn about each axis. A full turn ends where it\n            // started, so each is a single tween rather than an out-and-back pair.\n            tl.to(word, { rotationX: 360, duration: turn }, cues[3]);\n            tl.to(word, { rotationY: 360, duration: turn }, cues[4]);\n            tl.to(word, { rotation: 360, duration: turnZ }, cues[5]);\n\n            var beatsEnd = Math.max.apply(\n              null,\n              cues\n                .slice(0, 3)\n                .map(function (cue) {\n                  return cue + slam * 4;\n                })\n                .concat([cues[3] + turn, cues[4] + turn, cues[5] + turnZ]),\n            );\n            var outStart = Math.max(beatsEnd, duration - OUT_BASE * beatScale);\n\n            if (exit !== \"none\") {\n              tl.to(\n                word,\n                {\n                  opacity: 0,\n                  y: exit === \"up\" ? \"-12cqh\" : 0,\n                  duration: OUT_BASE * beatScale,\n                  ease: \"power2.in\",\n                },\n                outStart,\n              );\n            }\n\n            // Seeks past the last tween must still reach the blur's tracker, so the\n            // timeline runs to the mount's full duration.\n            tl.set({}, {}, duration);\n\n            // After every tween, before registration: the tracker tween the blur adds\n            // needs the timeline's final duration.\n            if (blurred) attachMotionBlur(word, tl, { fps: 30 });\n\n            tl.seek(0);\n            window.__timelines = window.__timelines || {};\n            window.__timelines[\"shutter-slam\"] = tl;\n          })();\n        \n      }).call(window, __hfScopedDocument, __hfScopedGsap, __hfScopedWindow, __hfScopedHyperframes);\n    } catch (_err) {\n      console.error(__hfErrorLabel, __hfCompId, _err);\n    }\n  };\n  __hfFindRoot();\n  __hfRun();\n})();</script></body>\n</html>"}
\ No newline at end of file
diff --git a/packages/cli/src/registry/motionBlurShutter.browser.test.ts b/packages/cli/src/registry/motionBlurShutter.browser.test.ts
index 25e5498d8d4..5bfc106efdb 100644
--- a/packages/cli/src/registry/motionBlurShutter.browser.test.ts
+++ b/packages/cli/src/registry/motionBlurShutter.browser.test.ts
@@ -2,7 +2,7 @@
 import { readFileSync } from "node:fs";
 import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
-import { afterEach, describe, expect, it } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import reference from "./__fixtures__/motion-blur-ae-reference.json";
 
 const repoRoot = resolve(dirname(fileURLToPath(import.meta.url)), "../../../..");
@@ -13,22 +13,18 @@ function readRepoFile(relativePath: string): string {
 
 const snippetHtml = readRepoFile("registry/components/motion-blur/motion-blur.html");
 
-/** First line of the snippet's IIFE body, which runs to the `};` closing it at the same indent. */
-const BODY_FIRST_LINE = "if (!window._hfMbUid) window._hfMbUid = 0;";
+const SNIPPET_START = "/* SHUTTER_SNIPPET_START */";
+const SNIPPET_END = "/* SHUTTER_SNIPPET_END */";
 
-/** The snippet's IIFE body verbatim, located by the indent of its own first line, so a copy
- *  nested in a component template is found as readily as one in a demo plate. */
+/** The snippet verbatim, between its own sentinel comments. In a copy the snippet shares one
+ *  IIFE with that composition's timeline code, so no brace or closer can tell the two apart:
+ *  the delimiters have to be written down. */
 function snippetSource(source: string): string {
-  const escaped = BODY_FIRST_LINE.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-  const match = new RegExp(`^([ ]*)${escaped}$`, "m").exec(source);
-  const indent = match?.[1];
-  if (match === null || indent === undefined) {
-    throw new Error("could not locate the snippet body");
-  }
-  const endMarker = `\n${indent}};`;
-  const end = source.indexOf(endMarker, match.index);
-  if (end < 0) throw new Error("could not locate the end of the snippet body");
-  return source.slice(match.index, end + endMarker.length);
+  const start = source.indexOf(SNIPPET_START);
+  if (start < 0) throw new Error(`could not locate ${SNIPPET_START}`);
+  const end = source.indexOf(SNIPPET_END, start);
+  if (end < 0) throw new Error(`could not locate ${SNIPPET_END}`);
+  return source.slice(start, end + SNIPPET_END.length);
 }
 
 /** Runs of code lines joined, because oxfmt wraps a statement differently at each nesting depth.
@@ -91,9 +87,18 @@ function installSnippet(): void {
   new Function(body)();
 }
 
-function makeTimeline(): { tl: Timeline; currentTime: () => number; fire: () => void } {
+interface Fake {
+  tl: Timeline;
+  currentTime: () => number;
+  fire: () => void;
+  /** How many tracker tweens the snippet installed. A call that blurs nothing installs none. */
+  trackers: () => number;
+}
+
+function makeTimeline(onTo?: () => void): Fake {
   let now = FRAME_TIME_S;
   let onUpdate: (() => void) | undefined;
+  let trackers = 0;
   const tl: Timeline = {
     time(value?: number) {
       if (value === undefined) return now;
@@ -102,11 +107,13 @@ function makeTimeline(): { tl: Timeline; currentTime: () => number; fire: () =>
     },
     duration: () => DURATION_S,
     to(_target, vars) {
+      onTo?.();
+      trackers += 1;
       onUpdate = vars.onUpdate;
       return tl;
     },
   };
-  return { tl, currentTime: () => now, fire: () => onUpdate?.() };
+  return { tl, currentTime: () => now, fire: () => onUpdate?.(), trackers: () => trackers };
 }
 
 /**
@@ -131,20 +138,27 @@ function installComputedStyle(
     }) as unknown as CSSStyleDeclaration) as typeof globalThis.getComputedStyle;
 }
 
-/** Captures the observers the snippet installs so a test can fire a resize itself. */
-function installResizeObserver(): { resize: () => void } {
-  const callbacks: Array<() => void> = [];
+/** Captures the observers the snippet installs so a test can fire a resize itself, and
+ *  counts the ones still connected: an observer left on an element nothing blurs keeps
+ *  walking N+1 detached subtrees on every resize. */
+function installResizeObserver(): { resize: () => void; live: () => number } {
+  const callbacks = new Set<() => void>();
   (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver = class {
+    private readonly callback: () => void;
     constructor(callback: () => void) {
-      callbacks.push(callback);
+      this.callback = callback;
+      callbacks.add(callback);
     }
     observe(): void {}
-    disconnect(): void {}
+    disconnect(): void {
+      callbacks.delete(this.callback);
+    }
   };
   return {
     resize: () => {
       for (const callback of callbacks) callback();
     },
+    live: () => callbacks.size,
   };
 }
 
@@ -183,7 +197,7 @@ async function attach(
 
   fire();
   await Promise.resolve();
-  const group = document.querySelector<HTMLElement>("[data-hf-motion-blur]");
+  const group = document.querySelector<HTMLElement>("[data-hf-motion-blur-group]");
   if (!group) throw new Error("motion-blur group was not created");
   return { group, word, copies: [...group.children] as HTMLElement[], fire, reattach };
 }
@@ -219,10 +233,24 @@ function copyPitches(offsets: number[]): number[] {
 
 const originalGetComputedStyle = globalThis.getComputedStyle;
 
-afterEach(() => {
+beforeEach(() => {
+  // The snippet polls the registry on a timer for seconds. Fake timers let a test reach the
+  // end of that budget, and let this file drain one test's poll before the next starts.
+  vi.useFakeTimers();
+});
+
+afterEach(async () => {
   document.body.innerHTML = "";
+  // Each install leaves a poll running. A pending one would otherwise fire inside a later
+  // test against that test's document, so it is drained here over an emptied body.
+  await vi.runAllTimersAsync();
+  vi.useRealTimers();
   globalThis.getComputedStyle = originalGetComputedStyle;
   delete (globalThis as unknown as { ResizeObserver?: unknown }).ResizeObserver;
+  // The registration hook and its one-shot guard live on window, so without this the
+  // second test in the file would run against the first test's accessor.
+  delete (window as unknown as { _hfMbHooked?: boolean })._hfMbHooked;
+  delete (window as unknown as { __timelines?: unknown }).__timelines;
 });
 
 describe("motion-blur snippet copies", () => {
@@ -349,7 +377,7 @@ describe("motion-blur drivers", () => {
     const { reattach } = await attach();
     reattach();
 
-    expect(document.querySelectorAll("[data-hf-motion-blur]")).toHaveLength(1);
+    expect(document.querySelectorAll("[data-hf-motion-blur-group]")).toHaveLength(1);
   });
 
   it("re-reads the copies' styles when the element's box changes", async () => {
@@ -381,3 +409,589 @@ describe("motion-blur drivers", () => {
     expect(group.style.display).toBe("none");
   });
 });
+
+/** A composition with one declaratively marked target, and the pieces to drive it. */
+interface Declared {
+  word: HTMLElement;
+  root: HTMLElement;
+  /** The composition's own timeline, for a test that has to call the imperative form. */
+  tl: Timeline;
+  trackers: () => number;
+  register: (key?: string, value?: unknown) => void;
+  fire: () => void;
+  groups: () => HTMLElement[];
+  settle: () => Promise<void>;
+}
+
+const COMPOSITION = "declarative-composition";
+/** The snippet's own budget, 250 ticks of 32 ms, plus one tick of slack. */
+const POLL_BUDGET_MS = 250 * 32 + 32;
+
+function declare(
+  attribute: string | null,
+  compositionId: string = COMPOSITION,
+  rootFps: number | null = null,
+): Declared {
+  const root = document.createElement("div");
+  root.setAttribute("data-composition-id", compositionId);
+  if (rootFps !== null) root.setAttribute("data-fps", String(rootFps));
+  document.body.appendChild(root);
+  const word = document.createElement("div");
+  word.id = "word";
+  if (attribute !== null) word.setAttribute("data-hf-motion-blur", attribute);
+  Object.defineProperty(word, "offsetWidth", { value: WORD_WIDTH });
+  Object.defineProperty(word, "offsetHeight", { value: WORD_HEIGHT });
+  Object.defineProperty(word, "offsetLeft", { value: 437 });
+  Object.defineProperty(word, "offsetTop", { value: 442 });
+  root.appendChild(word);
+
+  const { tl, currentTime, fire, trackers } = makeTimeline();
+  installComputedStyle(
+    word,
+    currentTime,
+    translating,
+    () => "1",
+    () => PERSPECTIVE,
+  );
+  installSnippet();
+
+  const host = window as unknown as { __timelines?: Record<string, unknown> };
+  return {
+    word,
+    root,
+    tl,
+    trackers,
+    fire,
+    // The authoring boilerplate verbatim, self-assignment included: those two writes are
+    // what the snippet has to intercept.
+    register: (key: string = compositionId, value: unknown = tl) => {
+      host.__timelines = host.__timelines ?? {};
+      (host.__timelines as Record<string, unknown>)[key] = value;
+    },
+    groups: () => [...document.querySelectorAll<HTMLElement>("[data-hf-motion-blur-group]")],
+    // Runs the snippet's whole polling budget, which is how the unclaimed-target warning
+    // is reached. Fake timers, because the real budget is seconds of wall clock.
+    settle: async () => {
+      await vi.advanceTimersByTimeAsync(POLL_BUDGET_MS);
+    },
+  };
+}
+
+describe("motion-blur declarative attribute", () => {
+  it("attaches on timeline registration, with no attachMotionBlur call", async () => {
+    // The ordering contract is the whole point: registering the timeline is the moment the
+    // author has finished building it, so the attribute has no order to get wrong.
+    const target = declare("");
+    expect(target.groups()).toHaveLength(0);
+
+    target.register();
+    target.fire();
+    await Promise.resolve();
+
+    const [group] = target.groups();
+    expect(group?.children).toHaveLength(COPIES);
+    expect(group?.style.display).toBe("");
+  });
+
+  it("reads its options out of the attribute", async () => {
+    const target = declare('{"samplesPerFrame": 4}');
+    target.register();
+    target.fire();
+    await Promise.resolve();
+
+    expect(target.groups()[0]?.children).toHaveLength(5);
+  });
+
+  it("leaves a target alone when another composition registers", async () => {
+    // One page can hold several compositions, and a target belongs to the nearest one.
+    const target = declare("");
+    target.register("some-other-composition");
+
+    expect(target.groups()).toHaveLength(0);
+  });
+
+  it("leaves a target alone when the registered value is not a timeline", async () => {
+    const target = declare("");
+    target.register(COMPOSITION, { notATimeline: true });
+
+    expect(target.groups()).toHaveLength(0);
+  });
+
+  it("does not sweep its own copies as targets", async () => {
+    // A copy is cloned from the target, attribute included, so without stripping it the
+    // sweep would attach a second group inside the first one's.
+    const target = declare("");
+    target.register();
+    target.fire();
+    await Promise.resolve();
+    target.register();
+
+    expect(target.groups()).toHaveLength(1);
+    const [group] = target.groups();
+    for (const copy of [...(group?.children ?? [])]) {
+      expect(copy.hasAttribute("data-hf-motion-blur")).toBe(false);
+    }
+  });
+
+  it("blurs once when the attribute and attachMotionBlur name the same element", async () => {
+    const target = declare("");
+    target.register();
+    const attachBlur = (
+      window as unknown as { attachMotionBlur: (s: string, t: unknown, o: unknown) => void }
+    ).attachMotionBlur;
+    attachBlur("#word", makeTimeline().tl, { fps: FPS });
+
+    expect(target.groups()).toHaveLength(1);
+  });
+
+  it("warns instead of silently rendering sharp when no composition claims a target", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const target = declare("", "a-composition-that-never-registers");
+    await target.settle();
+
+    expect(target.groups()).toHaveLength(0);
+    expect(warn).toHaveBeenCalledOnce();
+    expect(String(warn.mock.calls[0]?.[0])).toContain(
+      "no composition registered a timeline for them",
+    );
+    warn.mockRestore();
+  });
+
+  it("warns and skips a value that is not JSON, rather than reading it as defaults", async () => {
+    // A typo in the options would otherwise blur with the wrong shutter, or not at all,
+    // with nothing on the console to say which.
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const target = declare("{samplesPerFrame: 4}");
+    target.register();
+
+    expect(target.groups()).toHaveLength(0);
+    expect(String(warn.mock.calls[0]?.[0])).toContain("is not JSON");
+
+    // Already reported, so the load-time sweep must not report it a second time.
+    warn.mockClear();
+    await target.settle();
+    expect(warn).not.toHaveBeenCalled();
+    warn.mockRestore();
+  });
+
+  it("does not stack a proxy when the registry is assigned back to itself", () => {
+    // `window.__timelines = window.__timelines || {}` is the documented boilerplate, so the
+    // interception sees its own result handed back and must not wrap it a second time.
+    const target = declare("");
+    target.register();
+    const host = window as unknown as { __timelines?: Record<string, unknown> };
+    const first = host.__timelines;
+
+    host.__timelines = host.__timelines ?? {};
+
+    expect(host.__timelines).toBe(first);
+  });
+
+  it("says nothing when every target was claimed", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const target = declare("");
+    target.register();
+    await target.settle();
+
+    expect(target.groups()).toHaveLength(1);
+    expect(warn).not.toHaveBeenCalled();
+    warn.mockRestore();
+  });
+});
+
+describe("motion-blur declarative attribute, the cases only executing found", () => {
+  it("refuses a target inside another target, and keeps no attribute on a copy", async () => {
+    // The inner target's group would be inserted into the LIVE outer element, so the outer's
+    // style replay would walk a subtree its own copies no longer match. And a copy is a deep
+    // clone, so the attribute rides along on descendants unless it is stripped there too.
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const target = declare("");
+    const child = document.createElement("span");
+    child.setAttribute("data-hf-motion-blur", "");
+    Object.defineProperty(child, "offsetWidth", { value: 10 });
+    Object.defineProperty(child, "offsetHeight", { value: 10 });
+    target.word.appendChild(child);
+
+    target.register();
+    target.register();
+
+    expect(target.groups()).toHaveLength(1);
+    expect(
+      document.querySelectorAll("[data-hf-motion-blur-group] [data-hf-motion-blur]"),
+    ).toHaveLength(0);
+    await target.settle();
+
+    // Once, not once per sweep: the refusal is terminal, so the poll must not re-report it,
+    // and it must not be counted as a target still waiting for a timeline.
+    expect(warn).toHaveBeenCalledTimes(1);
+    expect(String(warn.mock.calls[0]?.[0])).toContain("inside another");
+    expect(String(warn.mock.calls[0]?.[0])).not.toContain("no composition registered");
+    warn.mockRestore();
+  });
+
+  it("attaches a target whose composition mounts after its timeline is registered", async () => {
+    // A sub-composition registers and then its DOM arrives. Both triggers are write-driven,
+    // so the poll has to survive a tick on which nothing was pending.
+    const target = declare("");
+    target.register();
+    await vi.advanceTimersByTimeAsync(64);
+    expect(target.groups()).toHaveLength(1);
+
+    const { tl } = makeTimeline();
+    target.register("second-composition", tl);
+    const host = document.createElement("div");
+    host.setAttribute("data-composition-id", "second-composition");
+    const late = document.createElement("div");
+    late.setAttribute("data-hf-motion-blur", "");
+    Object.defineProperty(late, "offsetWidth", { value: WORD_WIDTH });
+    Object.defineProperty(late, "offsetHeight", { value: WORD_HEIGHT });
+    host.appendChild(late);
+    document.body.appendChild(host);
+
+    await vi.advanceTimersByTimeAsync(64);
+
+    expect(target.groups()).toHaveLength(2);
+  });
+
+  it("warns once about a second timeline, not once per poll tick", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const target = declare("");
+    target.register();
+    target.register(COMPOSITION, makeTimeline().tl);
+
+    await vi.advanceTimersByTimeAsync(POLL_BUDGET_MS);
+
+    const second = warn.mock.calls.filter((call) => String(call[0]).includes("second timeline"));
+    expect(second).toHaveLength(1);
+    warn.mockRestore();
+  });
+
+  it("blames the attribute, not the composition, when a value is malformed", async () => {
+    // The parse has to happen before the timeline lookup, or an unclaimed composition hides
+    // the real cause behind a warning that points at the wrong thing.
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    declare("{bad}", "a-composition-that-never-registers");
+
+    await vi.advanceTimersByTimeAsync(POLL_BUDGET_MS);
+
+    const said = warn.mock.calls.map((call) => String(call[0])).join(" ");
+    expect(said).toContain("is not JSON");
+    expect(said).not.toContain("no composition registered");
+    warn.mockRestore();
+  });
+
+  it.each(["null", "720", '"shutterAngle"', "[]"])(
+    "warns and skips %s, rather than reading it as defaults",
+    async (value) => {
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      const target = declare(value);
+      target.register();
+
+      expect(target.groups()).toHaveLength(0);
+      expect(String(warn.mock.calls[0]?.[0])).toContain("is not a JSON object");
+      warn.mockRestore();
+    },
+  );
+
+  it("warns when a second timeline is registered for an element it already blurred", async () => {
+    // The copies keep following the first timeline. Nobody seeks it, so they render sharp,
+    // and without this the only signal is a composition that quietly lost its blur.
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const target = declare("");
+    target.register();
+    expect(target.groups()).toHaveLength(1);
+
+    target.register(COMPOSITION, makeTimeline().tl);
+
+    expect(target.groups()).toHaveLength(1);
+    expect(warn.mock.calls.map((call) => String(call[0])).join(" ")).toContain("second timeline");
+    warn.mockRestore();
+  });
+
+  it("attaches a registration the write trap cannot see", async () => {
+    // The runtime owns the registry object and wraps it per sub-composition, so a write can
+    // land on the raw object without passing through the accessor. Polling needs no
+    // cooperation from whoever writes it.
+    const host = window as unknown as { __timelines?: Record<string, unknown> };
+    host.__timelines = {};
+    const raw = host.__timelines;
+    const target = declare("");
+    const { tl } = makeTimeline();
+
+    raw[COMPOSITION] = tl;
+    expect(target.groups()).toHaveLength(0);
+
+    await vi.advanceTimersByTimeAsync(64);
+
+    expect(target.groups()).toHaveLength(1);
+  });
+
+  it("does not warn about a target whose composition registers late", async () => {
+    // Nested compositions mount asynchronously, well after load, so a warning keyed to load
+    // would fire on a composition that was about to arrive.
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const target = declare("");
+
+    await vi.advanceTimersByTimeAsync(2000);
+    expect(warn).not.toHaveBeenCalled();
+
+    target.register();
+    await vi.advanceTimersByTimeAsync(POLL_BUDGET_MS);
+
+    expect(target.groups()).toHaveLength(1);
+    expect(warn).not.toHaveBeenCalled();
+    warn.mockRestore();
+  });
+
+  it("reads the frame rate of its own composition, not the first one in the document", async () => {
+    // `resolveFps` used a document-wide query while the timeline came from the NEAREST
+    // composition root, so a second composition on the page inherited the first one's rate
+    // and got a shutter window half or double the length it asked for.
+    const decoy = document.createElement("div");
+    decoy.setAttribute("data-composition-id", "a-faster-composition");
+    decoy.setAttribute("data-fps", String(FPS * 2));
+    document.body.appendChild(decoy);
+
+    const target = declare("", COMPOSITION, FPS);
+    target.register();
+    target.fire();
+    await Promise.resolve();
+
+    const group = target.groups()[0];
+    if (!group) throw new Error("motion-blur group was not created");
+    const { trailing, leading } = windowEdges(copyOffsets([...group.children] as HTMLElement[]));
+
+    expect(trailing).toBeCloseTo(-reference.trailingDisplacementPx, 1);
+    expect(leading).toBeCloseTo(reference.leadingDisplacementPx, 1);
+  });
+
+  it("refuses an option name it does not know instead of rendering with the defaults", async () => {
+    // The likeliest typo in a JSON object is the key, and reading it as defaults is exactly
+    // the silent no-op the attribute exists to remove.
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const target = declare('{"samplesperframe": 4}');
+
+    target.register();
+    await target.settle();
+
+    expect(target.groups()).toHaveLength(0);
+    expect(warn).toHaveBeenCalledTimes(1);
+    expect(String(warn.mock.calls[0]?.[0])).toContain("samplesperframe");
+    warn.mockRestore();
+  });
+
+  it("survives a marked element whose parent is not an element", async () => {
+    // `document.documentElement.parentNode` is the Document, which has no `closest`, so the
+    // nesting check threw a TypeError on a marked root. The sweep's own boundary now catches
+    // anything thrown; this guard is what keeps the element's own message the honest one.
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    document.documentElement.setAttribute("data-hf-motion-blur", "");
+    try {
+      const target = declare(null);
+
+      expect(() => target.register()).not.toThrow();
+      await target.settle();
+
+      // The poll reached its deadline, which it could only do if it was installed at all.
+      expect(warn).toHaveBeenCalledTimes(1);
+      expect(String(warn.mock.calls[0]?.[0])).toContain("no composition registered");
+    } finally {
+      document.documentElement.removeAttribute("data-hf-motion-blur");
+      warn.mockRestore();
+    }
+  });
+
+  it("does not let one unblurrable target abort the author's registration statement", async () => {
+    // The write trap runs the sweep INSIDE `window.__timelines[id] = tl`, so a throw here
+    // would take the rest of the author's composition script with it.
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const target = declare("");
+    const host = window as unknown as { attachMotionBlur: (...args: unknown[]) => void };
+    const real = host.attachMotionBlur;
+    host.attachMotionBlur = () => {
+      throw new Error("no");
+    };
+
+    expect(() => target.register()).not.toThrow();
+    expect(warn).toHaveBeenCalledTimes(1);
+    expect(String(warn.mock.calls[0]?.[0])).toContain("could not blur");
+
+    host.attachMotionBlur = real;
+    warn.mockRestore();
+  });
+
+  it.each([
+    ['{"shutterAngle": "720deg"}', "shutterAngle"],
+    ['{"shutterPhase": "-360deg"}', "shutterPhase"],
+    ['{"fps": {"n": 30}}', "fps"],
+  ])("refuses %s, whose value the shutter cannot use", async (value, name) => {
+    // Checking the key name and not the value left the worse half of the same typo: a
+    // non-numeric angle hides the smear, and a non-numeric phase seeks every copy to NaN,
+    // which under real GSAP parks 17 copies at the timeline's start position.
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const target = declare(value);
+
+    target.register();
+    await target.settle();
+
+    expect(target.groups()).toHaveLength(0);
+    expect(warn).toHaveBeenCalledTimes(1);
+    expect(String(warn.mock.calls[0]?.[0])).toContain("needs a number for " + name);
+    warn.mockRestore();
+  });
+
+  it("installs no tracker for a call that blurs nothing", async () => {
+    // A second call on an already-blurred element used to install another tracker, and a
+    // tracker runs the whole sample loop on every seek over a set it does not own.
+    const target = declare("");
+    target.register();
+    expect(target.trackers()).toBe(1);
+
+    const attachBlur = (
+      window as unknown as { attachMotionBlur: (s: unknown, t: unknown, o?: unknown) => void }
+    ).attachMotionBlur;
+    attachBlur(target.word, target.tl, {});
+    attachBlur("#nothing-matches-this", target.tl, {});
+
+    expect(target.trackers()).toBe(1);
+    expect(target.groups()).toHaveLength(1);
+  });
+
+  it("leaves no copies and no mark behind when an attach throws partway", async () => {
+    // The sweep's boundary stops a throw from aborting the author's registration statement,
+    // but the element must not be left marked-attached with a group and no tracker: that is
+    // sharp forever, with no retry, and the copies still in the DOM.
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const observers = installResizeObserver();
+    const target = declare("");
+    const doomed = makeTimeline(() => {
+      throw new Error("no tracker for you");
+    });
+
+    target.register(COMPOSITION, doomed.tl);
+
+    expect(target.groups()).toHaveLength(0);
+    expect(document.querySelectorAll("[data-hf-motion-blur-group]")).toHaveLength(0);
+    expect(observers.live()).toBe(0);
+    expect(String(warn.mock.calls[0]?.[0])).toContain("could not blur");
+
+    // The mark is given back, so the imperative form can still rescue the element. The
+    // DECLARATIVE path does not retry: the sweep records the failure as skipped, which
+    // `handled()` reads, and a throw is reported once rather than retried for eight seconds.
+    const rescue = makeTimeline();
+    const attachBlur = (
+      window as unknown as { attachMotionBlur: (s: unknown, t: unknown, o?: unknown) => void }
+    ).attachMotionBlur;
+    attachBlur(target.word, rescue.tl, {});
+
+    expect(target.groups()).toHaveLength(1);
+    expect(rescue.trackers()).toBe(1);
+    expect(observers.live()).toBe(1);
+    warn.mockRestore();
+  });
+
+  it("warns when one call names compositions at different frame rates", async () => {
+    // One seek loop drives the whole call, so the shutter window is one length. Two roots
+    // at different rates cannot both be right, and silently using the first is what the
+    // document-wide lookup used to do.
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const target = declare(null, COMPOSITION, FPS);
+    const other = document.createElement("div");
+    other.setAttribute("data-composition-id", "a-faster-composition");
+    other.setAttribute("data-fps", String(FPS * 2));
+    document.body.appendChild(other);
+    const fast = document.createElement("div");
+    Object.defineProperty(fast, "offsetWidth", { value: 10 });
+    Object.defineProperty(fast, "offsetHeight", { value: 10 });
+    other.appendChild(fast);
+
+    const { tl } = makeTimeline();
+    const attachBlur = (
+      window as unknown as { attachMotionBlur: (s: unknown, t: unknown, o?: unknown) => void }
+    ).attachMotionBlur;
+    attachBlur([target.word, fast], tl, {});
+
+    expect(warn).toHaveBeenCalledTimes(1);
+    expect(String(warn.mock.calls[0]?.[0])).toContain("different frame rates");
+    warn.mockRestore();
+  });
+
+  it("does not blame the composition for a nested target claimed on the last poll tick", async () => {
+    // `refuse` returns null, so returning it from the nesting branch pushes the element into
+    // `pending`. Invisible on every tick but the last, which is the one the deadline warning
+    // reads, so the refusal arrives with a second line blaming a composition that did register.
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const target = declare(null);
+    target.register();
+    await vi.advanceTimersByTimeAsync(249 * 32);
+
+    const outer = document.createElement("div");
+    outer.setAttribute("data-hf-motion-blur", "");
+    Object.defineProperty(outer, "offsetWidth", { value: 40 });
+    Object.defineProperty(outer, "offsetHeight", { value: 40 });
+    const inner = document.createElement("span");
+    inner.setAttribute("data-hf-motion-blur", "");
+    Object.defineProperty(inner, "offsetWidth", { value: 10 });
+    Object.defineProperty(inner, "offsetHeight", { value: 10 });
+    outer.appendChild(inner);
+    target.root.appendChild(outer);
+
+    await vi.advanceTimersByTimeAsync(POLL_BUDGET_MS);
+
+    const lines = warn.mock.calls.map((call) => String(call[0]));
+    expect(lines.filter((line) => line.includes("inside another"))).toHaveLength(1);
+    expect(lines.filter((line) => line.includes("no composition registered"))).toHaveLength(0);
+    warn.mockRestore();
+  });
+
+  it("takes the frame rate from an element it attached, not the first one it was handed", async () => {
+    // `targets[0]` can be an element this call does NOT blur, because an already-blurred
+    // element is skipped. Reading its root gives the whole call the wrong window length.
+    const faster = document.createElement("div");
+    faster.setAttribute("data-composition-id", "already-blurred-and-faster");
+    faster.setAttribute("data-fps", String(FPS * 2));
+    document.body.appendChild(faster);
+    const done = document.createElement("div");
+    faster.appendChild(done);
+
+    const target = declare("", COMPOSITION, FPS);
+    const attachBlur = (
+      window as unknown as { attachMotionBlur: (s: unknown, t: unknown, o?: unknown) => void }
+    ).attachMotionBlur;
+    attachBlur(done, makeTimeline().tl, {});
+
+    attachBlur([done, target.word], target.tl, {});
+    target.fire();
+    await Promise.resolve();
+
+    const group = [...document.querySelectorAll<HTMLElement>("[data-hf-motion-blur-group]")].at(-1);
+    if (!group) throw new Error("motion-blur group was not created");
+    const { trailing, leading } = windowEdges(copyOffsets([...group.children] as HTMLElement[]));
+
+    expect(trailing).toBeCloseTo(-reference.trailingDisplacementPx, 1);
+    expect(leading).toBeCloseTo(reference.leadingDisplacementPx, 1);
+  });
+
+  it("puts no copies in the page when the style walk itself throws", async () => {
+    // The rollback can only remove records `attachOne` RETURNED. A throw between the insert
+    // and the return leaves a group nothing owns, and the element unmarked, so a later
+    // trigger inserts a second one. Inserting after the snapshot is what closes that.
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const target = declare("");
+    const real = globalThis.getComputedStyle;
+    globalThis.getComputedStyle = ((element: Element) => {
+      if (element === target.word) throw new Error("no styles for you");
+      return real(element);
+    }) as typeof globalThis.getComputedStyle;
+
+    try {
+      target.register();
+
+      expect(document.querySelectorAll("[data-hf-motion-blur-group]")).toHaveLength(0);
+      expect(String(warn.mock.calls[0]?.[0])).toContain("could not blur");
+    } finally {
+      globalThis.getComputedStyle = real;
+      warn.mockRestore();
+    }
+  });
+});
diff --git a/registry/components/motion-blur/demo.html b/registry/components/motion-blur/demo.html
index 6dadcef903f..8a8eac71b27 100644
--- a/registry/components/motion-blur/demo.html
+++ b/registry/components/motion-blur/demo.html
@@ -201,8 +201,8 @@
         <div class="track-a"></div>
         <div class="inner-div"></div>
         <div class="track-b"></div>
-        <div class="pill" id="s1"></div>
-        <div class="word" id="t1">DRIFT</div>
+        <div class="pill" id="s1" data-hf-motion-blur></div>
+        <div class="word" id="t1" data-hf-motion-blur>DRIFT</div>
         <div class="spd"><span class="spd-label">slow</span></div>
       </div>
 
@@ -213,8 +213,8 @@
         <div class="track-a"></div>
         <div class="inner-div"></div>
         <div class="track-b"></div>
-        <div class="pill" id="s2"></div>
-        <div class="word" id="t2">GLIDE</div>
+        <div class="pill" id="s2" data-hf-motion-blur></div>
+        <div class="word" id="t2" data-hf-motion-blur>GLIDE</div>
         <div class="spd"><span class="spd-label">medium</span></div>
       </div>
 
@@ -225,8 +225,8 @@
         <div class="track-a"></div>
         <div class="inner-div"></div>
         <div class="track-b"></div>
-        <div class="pill" id="s3"></div>
-        <div class="word" id="t3">RUSH</div>
+        <div class="pill" id="s3" data-hf-motion-blur></div>
+        <div class="word" id="t3" data-hf-motion-blur>RUSH</div>
         <div class="spd"><span class="spd-label">fast</span></div>
       </div>
 
@@ -239,8 +239,8 @@
         <div class="track-a"></div>
         <div class="inner-div"></div>
         <div class="track-b"></div>
-        <div class="pill" id="s4"></div>
-        <div class="word" id="t4">BLAST</div>
+        <div class="pill" id="s4" data-hf-motion-blur></div>
+        <div class="word" id="t4" data-hf-motion-blur>BLAST</div>
         <div class="spd"><span class="spd-label">faster</span></div>
       </div>
 
@@ -251,23 +251,55 @@
         <div class="track-a"></div>
         <div class="inner-div"></div>
         <div class="track-b"></div>
-        <div class="pill" id="s5"></div>
-        <div class="word" id="t5">WARP</div>
+        <div class="pill" id="s5" data-hf-motion-blur></div>
+        <div class="word" id="t5" data-hf-motion-blur>WARP</div>
         <div class="spd"><span class="spd-label">extreme</span></div>
       </div>
 
       <script>
         (function () {
+          /* SHUTTER_SNIPPET_START */
           if (!window._hfMbUid) window._hfMbUid = 0;
           if (!window._hfMbAttached) window._hfMbAttached = new WeakSet();
+          if (!window._hfMbSkipped) window._hfMbSkipped = new WeakSet();
+          if (!window._hfMbProxies) window._hfMbProxies = new WeakSet();
+          if (!window._hfMbTimeline) window._hfMbTimeline = new WeakMap();
+          if (!window._hfMbWarned) window._hfMbWarned = new WeakSet();
+
+          // The declarative form. A copy of a target must not carry it, or the copy is swept
+          // as a target of its own; the group's own marker is `data-hf-motion-blur-group`.
+          var SWEEP_ATTR = "data-hf-motion-blur";
+          // About eight seconds. Long enough for an asynchronously mounted sub-composition, short
+          // enough that a page with a genuine mistake in it reports before anyone stops watching.
+          var POLL_MS = 32;
+          var POLL_TICKS = 250;
+          var SWEEP_SELECTOR = "[" + SWEEP_ATTR + "]";
+          var OPTION_KEYS = ["shutterAngle", "shutterPhase", "samplesPerFrame", "fps"];
+
+          // A copy is a deep clone, so the attribute rides along on the root AND on every marked
+          // descendant. Any one left behind is swept as a target of its own, which clones again.
+          var COPY_STRIP = [SWEEP_ATTR, "data-composition-id", "data-fps"];
+
+          function stripAttrs(el) {
+            for (var a = 0; a < COPY_STRIP.length; a++) el.removeAttribute(COPY_STRIP[a]);
+          }
+
+          function stripCopyAttrs(root) {
+            stripAttrs(root);
+            var inner = root.querySelectorAll("[" + COPY_STRIP.join("],[") + "]");
+            for (var i = 0; i < inner.length; i++) stripAttrs(inner[i]);
+          }
 
-          // Shutter length is measured in frames, so the snippet must know the
-          // composition frame rate: explicit option, else the root's data-fps, else 30.
-          function resolveFps(optionFps) {
+          // Shutter length is measured in frames, so the snippet must know the composition
+          // frame rate: explicit option, else the target's OWN root, else the first root in
+          // the document, else 30. The target's root is what makes two compositions on one
+          // page read their own data-fps instead of sharing the first one written.
+          function resolveFps(optionFps, target) {
             var explicit = Number(optionFps);
             if (explicit > 0) return explicit;
 
-            var root = document.querySelector("[data-composition-id][data-fps]");
+            var scoped = target ? target.closest("[data-composition-id][data-fps]") : null;
+            var root = scoped || document.querySelector("[data-composition-id][data-fps]");
             var rootFps = root ? Number(root.getAttribute("data-fps")) : 0;
             if (rootFps > 0) return rootFps;
 
@@ -337,8 +369,6 @@
             var samples = Number.isFinite(requestedSamples)
               ? Math.max(2, Math.min(64, Math.round(requestedSamples)))
               : 16;
-            var fps = resolveFps(opts.fps);
-
             var items = Array.isArray(selector) ? selector : [selector];
             var targets = items.reduce(function (acc, s) {
               if (typeof s === "string") {
@@ -393,52 +423,91 @@
               return value && value !== "none" ? "perspective(" + value + ") " : "";
             }
 
-            var state = targets
-              .filter(function (el) {
-                // One group per element. A second call on the same element would stack a
-                // second set of copies over the first and double the ink, so the first
-                // call owns it.
-                if (window._hfMbAttached.has(el)) return false;
-                window._hfMbAttached.add(el);
-                return true;
-              })
-              .map(function (el) {
-                var group = document.createElement("div");
-                group.setAttribute("data-hf-motion-blur", "hf-mb-" + window._hfMbUid++);
-                group.style.cssText =
-                  "position:absolute;left:0;top:0;width:0;height:0;isolation:isolate;pointer-events:none;display:none;";
-
-                var clones = [];
-                for (var k = 0; k < copies; k++) {
-                  var clone = el.cloneNode(true);
-                  clone.removeAttribute("id");
-                  clones.push(clone);
-                  group.appendChild(clone);
-                }
-                el.parentNode.insertBefore(group, el);
-
-                var s = { el: el, group: group, clones: clones, samples: [], perspective: "" };
-
-                // Resolved styles and the parent's perspective are px once read, so a
-                // container-relative element needs them again when its box changes. Per frame
-                // that would walk the whole subtree once per copy; on resize it costs nothing
-                // on a fixed-size render and keeps a live preview honest.
-                function snapshot() {
-                  var styles = resolvedStyles(el, []);
-                  s.perspective = parentPerspective(el);
-                  for (var c = 0; c < clones.length; c++) {
-                    paintResolvedStyles(clones[c], styles, { i: 0 });
-                    clones[c].style.position = "absolute";
-                    clones[c].style.margin = "0";
-                    clones[c].style.opacity = alpha;
-                    clones[c].style.mixBlendMode = "plus-lighter";
-                  }
+            function attachOne(el) {
+              var group = document.createElement("div");
+              group.setAttribute("data-hf-motion-blur-group", "hf-mb-" + window._hfMbUid++);
+              group.style.cssText =
+                "position:absolute;left:0;top:0;width:0;height:0;isolation:isolate;pointer-events:none;display:none;";
+
+              var clones = [];
+              for (var k = 0; k < copies; k++) {
+                var clone = el.cloneNode(true);
+                clone.removeAttribute("id");
+                stripCopyAttrs(clone);
+                clones.push(clone);
+                group.appendChild(clone);
+              }
+              var s = {
+                el: el,
+                group: group,
+                clones: clones,
+                samples: [],
+                perspective: "",
+                watch: null,
+              };
+
+              // Resolved styles and the parent's perspective are px once read, so a
+              // container-relative element needs them again when its box changes. Per frame
+              // that would walk the whole subtree once per copy; on resize it costs nothing
+              // on a fixed-size render and keeps a live preview honest.
+              function snapshot() {
+                var styles = resolvedStyles(el, []);
+                s.perspective = parentPerspective(el);
+                for (var c = 0; c < clones.length; c++) {
+                  paintResolvedStyles(clones[c], styles, { i: 0 });
+                  clones[c].style.position = "absolute";
+                  clones[c].style.margin = "0";
+                  clones[c].style.opacity = alpha;
+                  clones[c].style.mixBlendMode = "plus-lighter";
                 }
+              }
 
-                snapshot();
-                if (typeof ResizeObserver === "function") new ResizeObserver(snapshot).observe(el);
-                return s;
-              });
+              // Snapshot BEFORE the group enters the page, so a throw in the style walk leaves
+              // nothing behind: the record the rollback needs does not exist until it returns.
+              snapshot();
+              el.parentNode.insertBefore(group, el);
+              if (typeof ResizeObserver === "function") {
+                s.watch = new ResizeObserver(snapshot);
+                s.watch.observe(el);
+              }
+              return s;
+            }
+
+            var state = [];
+            // Every element this call marked. A throw inside `attachOne` never returns its
+            // record, so `state` alone cannot give the marks back.
+            var claimed = [];
+            try {
+              for (var q = 0; q < targets.length; q++) {
+                var candidate = targets[q];
+                // One group per element, whether a second call names it or one call names it
+                // twice: a second set of copies over the first would double the ink. Marked
+                // BEFORE the copies go in: inserting them runs custom-element reactions
+                // synchronously, and one that registers a timeline re-enters the write trap.
+                if (window._hfMbAttached.has(candidate)) continue;
+                window._hfMbAttached.add(candidate);
+                window._hfMbTimeline.set(candidate, tl);
+                claimed.push(candidate);
+                state.push(attachOne(candidate));
+              }
+            } catch (e) {
+              unmark(claimed);
+              discard(state);
+              throw e;
+            }
+            // Nothing to blur means nothing to seek: a tracker here would run the whole sample
+            // loop every frame over an empty set.
+            if (state.length === 0) return;
+
+            // One seek loop drives the whole call, so the window is ONE length, and it belongs
+            // to the composition of an element this call actually attached.
+            var fps = resolveFps(opts.fps, state[0].el);
+            for (var d = 1; d < state.length; d++) {
+              if (resolveFps(opts.fps, state[d].el) === fps) continue;
+              var line = "one call cannot blur compositions at different frame rates; using ";
+              console.warn("[motion-blur] " + line + fps, state[d].el);
+              break;
+            }
 
             function readTransform(el) {
               var cs = getComputedStyle(el);
@@ -525,24 +594,245 @@
             // seeking GSAP from inside its own render reads stale tween state, while the microtask
             // runs after the seek returns and before the frame is captured or painted.
             var _proxy = { t: 0 };
-            tl.to(
-              _proxy,
-              {
-                t: 1,
-                duration: Math.max(tl.duration(), 0.1),
-                ease: "none",
-                onUpdate: function () {
-                  if (scheduled) return;
-                  scheduled = true;
-                  Promise.resolve().then(function () {
-                    scheduled = false;
-                    applyShutter();
-                  });
+            try {
+              tl.to(
+                _proxy,
+                {
+                  t: 1,
+                  duration: Math.max(tl.duration(), 0.1),
+                  ease: "none",
+                  onUpdate: function () {
+                    if (scheduled) return;
+                    scheduled = true;
+                    Promise.resolve().then(function () {
+                      scheduled = false;
+                      applyShutter();
+                    });
+                  },
                 },
+                0,
+              );
+            } catch (e) {
+              unmark(claimed);
+              discard(state);
+              throw e;
+            }
+          };
+
+          // An empty attribute means defaults; anything else is a JSON options object. A value that
+          // is not an options object is skipped loudly rather than read as defaults, because a typo
+          // in it would otherwise render as a silently unblurred element.
+          function sweepOptions(el) {
+            var text = (el.getAttribute(SWEEP_ATTR) || "").trim();
+            if (text === "") return {};
+            var parsed = null;
+            try {
+              parsed = JSON.parse(text);
+            } catch (e) {
+              return refuse(el, "is not JSON: " + text);
+            }
+            // `null`, a number and a string all parse. None of them is a set of options.
+            if (parsed === null || typeof parsed !== "object" || Array.isArray(parsed)) {
+              return refuse(el, "is not a JSON object: " + text);
+            }
+            var bad = unknownKey(parsed);
+            if (bad !== null) return refuse(el, "names no such option: " + bad);
+            var wrong = nonNumber(parsed);
+            if (wrong !== null) return refuse(el, "needs a number for " + wrong);
+            return parsed;
+          }
+
+          // A misspelled key is the likeliest typo in a JSON object, and reading it as
+          // defaults is the silent no-op this attribute exists to remove.
+          function unknownKey(parsed) {
+            for (var key in parsed) {
+              if (OPTION_KEYS.indexOf(key) < 0) return key;
+            }
+            return null;
+          }
+
+          // A key with a value the shutter cannot use is the same silent no-op as a key it does
+          // not know: a non-numeric angle hides the smear, a non-numeric phase parks every copy
+          // at the timeline's start. JSON gives real numbers, so anything else is a typo.
+          function nonNumber(parsed) {
+            for (var i = 0; i < OPTION_KEYS.length; i++) {
+              var held = parsed[OPTION_KEYS[i]];
+              if (held === undefined) continue;
+              if (typeof held !== "number" || !Number.isFinite(held)) return OPTION_KEYS[i];
+            }
+            return null;
+          }
+
+          // A throw partway through an attach leaves an element blurred by nothing, so the copies
+          // go too, along with the observer that would otherwise keep walking a detached subtree
+          // on every resize of an element nothing blurs.
+          // The mark is what a second trigger reads, so it is the first thing to give back.
+          function unmark(els) {
+            for (var i = 0; i < els.length; i++) {
+              window._hfMbAttached.delete(els[i]);
+              window._hfMbTimeline.delete(els[i]);
+            }
+          }
+
+          function discard(state) {
+            for (var i = 0; i < state.length; i++) {
+              var s = state[i];
+              if (s.watch !== null) s.watch.disconnect();
+              if (s.group.parentNode !== null) s.group.parentNode.removeChild(s.group);
+            }
+          }
+
+          function refuse(el, why) {
+            window._hfMbSkipped.add(el);
+            console.warn("[motion-blur] " + SWEEP_ATTR + " " + why, el);
+            return null;
+          }
+
+          // An element belongs to the nearest composition above it, so a sub-composition's
+          // targets follow that sub-composition's own timeline.
+          function compositionOf(el) {
+            var host = el.closest("[data-composition-id]");
+            return host ? host.getAttribute("data-composition-id") : null;
+          }
+
+          // Anything else registered on the container is somebody else's bookkeeping: a
+          // timeline is the thing this snippet can seek and extend.
+          function isTimeline(value) {
+            return !!value && typeof value.time === "function" && typeof value.to === "function";
+          }
+
+          // Attached, or skipped as unparseable. Both are terminal, so a later trigger must not
+          // report or attach the element twice.
+          function handled(el) {
+            return window._hfMbAttached.has(el) || window._hfMbSkipped.has(el);
+          }
+
+          // The timeline registered for an element's own composition, or null. Read from the
+          // registry rather than taken from whoever wrote it, so every trigger agrees.
+          function timelineFor(el) {
+            var id = compositionOf(el);
+            if (id === null) return null;
+            var registry = window.__timelines;
+            var found = registry ? registry[id] : null;
+            return isTimeline(found) ? found : null;
+          }
+
+          // A marked element whose parent is not an Element has no target above it: the parent
+          // of a root is the Document, which has no `closest`.
+          function nestedInTarget(el) {
+            var parent = el.parentNode;
+            if (parent === null || typeof parent.closest !== "function") return false;
+            return parent.closest(SWEEP_SELECTOR) !== null;
+          }
+
+          // One owner of attaching one element. Answers whether the element still needs a trigger.
+          function claim(el) {
+            var tl = timelineFor(el);
+            if (handled(el)) {
+              var owner = window._hfMbTimeline.get(el);
+              // Re-registering a key with a DIFFERENT timeline leaves the copies driven by the one
+              // nobody seeks, which renders sharp and says nothing. Report it rather than guess.
+              var changed = tl !== null && owner !== undefined && owner !== tl;
+              if (changed && !window._hfMbWarned.has(el)) {
+                window._hfMbWarned.add(el);
+                console.warn(
+                  "[motion-blur] a second timeline registered for this element; the copies still follow the first",
+                  el,
+                );
+              }
+              return true;
+            }
+            // Its group would be inserted into the live outer element, so the outer target's
+            // style replay would walk a subtree its cursor no longer matches.
+            if (nestedInTarget(el)) {
+              refuse(el, "cannot blur a target inside another target; blur one of them");
+              return true;
+            }
+            var opts = sweepOptions(el);
+            if (opts === null) return true;
+            if (tl === null) return false;
+            window.attachMotionBlur(el, tl, opts);
+            return true;
+          }
+
+          // Returns the elements still waiting for their composition to register a timeline.
+          // The trap below runs this INSIDE the author's registration statement, so one bad
+          // target must not abort the rest of their composition script.
+          function sweep() {
+            var pending = [];
+            document.querySelectorAll(SWEEP_SELECTOR).forEach(function (el) {
+              try {
+                if (!claim(el)) pending.push(el);
+              } catch (e) {
+                window._hfMbSkipped.add(el);
+                console.warn("[motion-blur] could not blur this element: " + e, el);
+              }
+            });
+            return pending;
+          }
+
+          // Registering a timeline is the moment the author has finished building it, so trapping
+          // the write attaches before the renderer captures a frame. A microtask would be too
+          // early: it runs before the next `<script>` tag.
+          function registrationProxy(container) {
+            var proxy = new Proxy(container, {
+              set: function (target, key, value) {
+                target[key] = value;
+                if (typeof key === "string") sweep();
+                return true;
+              },
+            });
+            window._hfMbProxies.add(proxy);
+            return proxy;
+          }
+
+          function hookRegistration() {
+            var held = window.__timelines;
+            Object.defineProperty(window, "__timelines", {
+              configurable: true,
+              enumerable: true,
+              get: function () {
+                return held;
               },
-              0,
+              set: function (value) {
+                var container = !!value && typeof value === "object";
+                var fresh = container && !window._hfMbProxies.has(value);
+                held = fresh ? registrationProxy(value) : value;
+                if (fresh) sweep();
+              },
+            });
+            // A container assigned before this snippet ran is replayed through the setter, so a
+            // timeline already registered on it is swept too.
+            if (held !== undefined) window.__timelines = held;
+          }
+
+          // The trap above cannot see every registration: the runtime owns the registry object,
+          // wraps it per sub-composition, and mounts nested compositions asynchronously. So the
+          // registry is also POLLED, which needs no cooperation from whoever writes it.
+          function poll(ticks) {
+            var pending = sweep();
+            // The WHOLE budget, every time. Stopping the first tick nothing is pending kills the
+            // poll one tick into an ordinary page, which is before a late composition arrives.
+            if (ticks > 0) {
+              setTimeout(function () {
+                poll(ticks - 1);
+              }, POLL_MS);
+              return;
+            }
+            if (pending.length === 0) return;
+            var count = pending.length + " element(s) carry " + SWEEP_ATTR;
+            console.warn(
+              "[motion-blur] " + count + ", and no composition registered a timeline for them",
+              pending,
             );
-          };
+          }
+
+          if (!window._hfMbHooked) {
+            window._hfMbHooked = true;
+            hookRegistration();
+            poll(POLL_TICKS);
+          }
+          /* SHUTTER_SNIPPET_END */
 
           var tl = gsap.timeline({ paused: true });
 
@@ -558,11 +848,8 @@
 
           tl.set(document.body, {}, 4);
 
-          attachMotionBlur(
-            ["#s1", "#s2", "#s3", "#s4", "#s5", "#t1", "#t2", "#t3", "#t4", "#t5"],
-            tl,
-          );
-
+          // Every target above carries data-hf-motion-blur, so the registration below is
+          // what attaches them. No attachMotionBlur() call, and no order to get wrong.
           window.__timelines = window.__timelines || {};
           window.__timelines["motion-blur-demo"] = tl;
         })();
diff --git a/registry/components/motion-blur/motion-blur.html b/registry/components/motion-blur/motion-blur.html
index db5f752c9f7..b07c9118d4d 100644
--- a/registry/components/motion-blur/motion-blur.html
+++ b/registry/components/motion-blur/motion-blur.html
@@ -1,8 +1,9 @@
 <!--
   Motion Blur — After Effects-style shutter-based motion blur.
 
-  Usage: paste this snippet into your composition, then call
-  attachMotionBlur() with any element animated by your GSAP timeline.
+  Usage: paste this snippet into your composition, then put
+  data-hf-motion-blur on any element your GSAP timeline animates.
+  Nothing else to call, and no order to get wrong.
 
   How it works — the same model After Effects uses for the layer Motion Blur
   switch (temporal supersampling), synthesised inside the page because the
@@ -75,12 +76,27 @@
   - The host must render the timeline for the blur to update — HyperFrames
     seeks every frame. A fresh paused timeline that is never seeked shows no
     blur on its first frame.
-  - Call attachMotionBlur() AFTER defining all tweens (the timeline's final
-    duration must be known), before window.__timelines registration.
+  - A declarative target is attached as soon as its composition's timeline is
+    registered, and the registry is also polled for about eight seconds after
+    load, so a composition that mounts asynchronously is picked up too. A
+    target added to the document after that window needs attachMotionBlur().
   - GSAP must be loaded before this snippet executes.
 
   API:
-    attachMotionBlur(selector, timeline, options?)
+    data-hf-motion-blur on the element that moves. Empty for defaults, else a
+      JSON OBJECT of the options below (double quotes on the keys). The
+      element's timeline is the one registered under the data-composition-id of
+      its nearest ancestor carrying that attribute, so a sub-composition's
+      targets follow that sub-composition.
+      Three things warn rather than rendering sharp in silence: a target no
+      composition ever registers a timeline for, a value that is not JSON, and
+      a value that parses but is not an object (null, a number, a string).
+      A second timeline registered under the same key also warns: the copies
+      keep following the first one.
+    attachMotionBlur(selector, timeline, options?) — the imperative form, for a
+      target built after the polling window. Call it AFTER defining all tweens,
+      so the timeline's final duration is known.
+      Either form blurs a given element once, whichever names it first.
 
   Options:
     shutterAngle     — degrees of the frame interval the shutter is open
@@ -91,23 +107,61 @@
                        back, like the AE reference)
     samplesPerFrame  — sub-intervals of the shutter window, so N+1 duplicates
                        each at 1/N opacity (default 16, max 64)
-    fps              — composition frame rate (default: the root's data-fps,
-                       else 30). Pass it explicitly when rendering with an
-                       fps override (`hyperframes render --fps`).
+    fps              — composition frame rate (default: the data-fps of the
+                       target's own composition root, else 30). Pass it
+                       explicitly when rendering with an fps override
+                       (`hyperframes render --fps`).
+
+  A key that is none of the four, or a value that is not a finite number, is
+  refused by name rather than read as defaults. Both halves matter: a
+  non-numeric angle hides the smear, and a non-numeric phase seeks every copy
+  to NaN, which parks them at the timeline's start.
 -->
 
 <script>
   (function () {
+    /* SHUTTER_SNIPPET_START */
     if (!window._hfMbUid) window._hfMbUid = 0;
     if (!window._hfMbAttached) window._hfMbAttached = new WeakSet();
+    if (!window._hfMbSkipped) window._hfMbSkipped = new WeakSet();
+    if (!window._hfMbProxies) window._hfMbProxies = new WeakSet();
+    if (!window._hfMbTimeline) window._hfMbTimeline = new WeakMap();
+    if (!window._hfMbWarned) window._hfMbWarned = new WeakSet();
+
+    // The declarative form. A copy of a target must not carry it, or the copy is swept
+    // as a target of its own; the group's own marker is `data-hf-motion-blur-group`.
+    var SWEEP_ATTR = "data-hf-motion-blur";
+    // About eight seconds. Long enough for an asynchronously mounted sub-composition, short
+    // enough that a page with a genuine mistake in it reports before anyone stops watching.
+    var POLL_MS = 32;
+    var POLL_TICKS = 250;
+    var SWEEP_SELECTOR = "[" + SWEEP_ATTR + "]";
+    var OPTION_KEYS = ["shutterAngle", "shutterPhase", "samplesPerFrame", "fps"];
+
+    // A copy is a deep clone, so the attribute rides along on the root AND on every marked
+    // descendant. Any one left behind is swept as a target of its own, which clones again.
+    var COPY_STRIP = [SWEEP_ATTR, "data-composition-id", "data-fps"];
+
+    function stripAttrs(el) {
+      for (var a = 0; a < COPY_STRIP.length; a++) el.removeAttribute(COPY_STRIP[a]);
+    }
+
+    function stripCopyAttrs(root) {
+      stripAttrs(root);
+      var inner = root.querySelectorAll("[" + COPY_STRIP.join("],[") + "]");
+      for (var i = 0; i < inner.length; i++) stripAttrs(inner[i]);
+    }
 
-    // Shutter length is measured in frames, so the snippet must know the
-    // composition frame rate: explicit option, else the root's data-fps, else 30.
-    function resolveFps(optionFps) {
+    // Shutter length is measured in frames, so the snippet must know the composition
+    // frame rate: explicit option, else the target's OWN root, else the first root in
+    // the document, else 30. The target's root is what makes two compositions on one
+    // page read their own data-fps instead of sharing the first one written.
+    function resolveFps(optionFps, target) {
       var explicit = Number(optionFps);
       if (explicit > 0) return explicit;
 
-      var root = document.querySelector("[data-composition-id][data-fps]");
+      var scoped = target ? target.closest("[data-composition-id][data-fps]") : null;
+      var root = scoped || document.querySelector("[data-composition-id][data-fps]");
       var rootFps = root ? Number(root.getAttribute("data-fps")) : 0;
       if (rootFps > 0) return rootFps;
 
@@ -177,8 +231,6 @@
       var samples = Number.isFinite(requestedSamples)
         ? Math.max(2, Math.min(64, Math.round(requestedSamples)))
         : 16;
-      var fps = resolveFps(opts.fps);
-
       var items = Array.isArray(selector) ? selector : [selector];
       var targets = items.reduce(function (acc, s) {
         if (typeof s === "string") {
@@ -233,52 +285,91 @@
         return value && value !== "none" ? "perspective(" + value + ") " : "";
       }
 
-      var state = targets
-        .filter(function (el) {
-          // One group per element. A second call on the same element would stack a
-          // second set of copies over the first and double the ink, so the first
-          // call owns it.
-          if (window._hfMbAttached.has(el)) return false;
-          window._hfMbAttached.add(el);
-          return true;
-        })
-        .map(function (el) {
-          var group = document.createElement("div");
-          group.setAttribute("data-hf-motion-blur", "hf-mb-" + window._hfMbUid++);
-          group.style.cssText =
-            "position:absolute;left:0;top:0;width:0;height:0;isolation:isolate;pointer-events:none;display:none;";
-
-          var clones = [];
-          for (var k = 0; k < copies; k++) {
-            var clone = el.cloneNode(true);
-            clone.removeAttribute("id");
-            clones.push(clone);
-            group.appendChild(clone);
-          }
-          el.parentNode.insertBefore(group, el);
-
-          var s = { el: el, group: group, clones: clones, samples: [], perspective: "" };
-
-          // Resolved styles and the parent's perspective are px once read, so a
-          // container-relative element needs them again when its box changes. Per frame
-          // that would walk the whole subtree once per copy; on resize it costs nothing
-          // on a fixed-size render and keeps a live preview honest.
-          function snapshot() {
-            var styles = resolvedStyles(el, []);
-            s.perspective = parentPerspective(el);
-            for (var c = 0; c < clones.length; c++) {
-              paintResolvedStyles(clones[c], styles, { i: 0 });
-              clones[c].style.position = "absolute";
-              clones[c].style.margin = "0";
-              clones[c].style.opacity = alpha;
-              clones[c].style.mixBlendMode = "plus-lighter";
-            }
+      function attachOne(el) {
+        var group = document.createElement("div");
+        group.setAttribute("data-hf-motion-blur-group", "hf-mb-" + window._hfMbUid++);
+        group.style.cssText =
+          "position:absolute;left:0;top:0;width:0;height:0;isolation:isolate;pointer-events:none;display:none;";
+
+        var clones = [];
+        for (var k = 0; k < copies; k++) {
+          var clone = el.cloneNode(true);
+          clone.removeAttribute("id");
+          stripCopyAttrs(clone);
+          clones.push(clone);
+          group.appendChild(clone);
+        }
+        var s = {
+          el: el,
+          group: group,
+          clones: clones,
+          samples: [],
+          perspective: "",
+          watch: null,
+        };
+
+        // Resolved styles and the parent's perspective are px once read, so a
+        // container-relative element needs them again when its box changes. Per frame
+        // that would walk the whole subtree once per copy; on resize it costs nothing
+        // on a fixed-size render and keeps a live preview honest.
+        function snapshot() {
+          var styles = resolvedStyles(el, []);
+          s.perspective = parentPerspective(el);
+          for (var c = 0; c < clones.length; c++) {
+            paintResolvedStyles(clones[c], styles, { i: 0 });
+            clones[c].style.position = "absolute";
+            clones[c].style.margin = "0";
+            clones[c].style.opacity = alpha;
+            clones[c].style.mixBlendMode = "plus-lighter";
           }
+        }
 
-          snapshot();
-          if (typeof ResizeObserver === "function") new ResizeObserver(snapshot).observe(el);
-          return s;
-        });
+        // Snapshot BEFORE the group enters the page, so a throw in the style walk leaves
+        // nothing behind: the record the rollback needs does not exist until it returns.
+        snapshot();
+        el.parentNode.insertBefore(group, el);
+        if (typeof ResizeObserver === "function") {
+          s.watch = new ResizeObserver(snapshot);
+          s.watch.observe(el);
+        }
+        return s;
+      }
+
+      var state = [];
+      // Every element this call marked. A throw inside `attachOne` never returns its
+      // record, so `state` alone cannot give the marks back.
+      var claimed = [];
+      try {
+        for (var q = 0; q < targets.length; q++) {
+          var candidate = targets[q];
+          // One group per element, whether a second call names it or one call names it
+          // twice: a second set of copies over the first would double the ink. Marked
+          // BEFORE the copies go in: inserting them runs custom-element reactions
+          // synchronously, and one that registers a timeline re-enters the write trap.
+          if (window._hfMbAttached.has(candidate)) continue;
+          window._hfMbAttached.add(candidate);
+          window._hfMbTimeline.set(candidate, tl);
+          claimed.push(candidate);
+          state.push(attachOne(candidate));
+        }
+      } catch (e) {
+        unmark(claimed);
+        discard(state);
+        throw e;
+      }
+      // Nothing to blur means nothing to seek: a tracker here would run the whole sample
+      // loop every frame over an empty set.
+      if (state.length === 0) return;
+
+      // One seek loop drives the whole call, so the window is ONE length, and it belongs
+      // to the composition of an element this call actually attached.
+      var fps = resolveFps(opts.fps, state[0].el);
+      for (var d = 1; d < state.length; d++) {
+        if (resolveFps(opts.fps, state[d].el) === fps) continue;
+        var line = "one call cannot blur compositions at different frame rates; using ";
+        console.warn("[motion-blur] " + line + fps, state[d].el);
+        break;
+      }
 
       function readTransform(el) {
         var cs = getComputedStyle(el);
@@ -365,30 +456,256 @@
       // seeking GSAP from inside its own render reads stale tween state, while the microtask
       // runs after the seek returns and before the frame is captured or painted.
       var _proxy = { t: 0 };
-      tl.to(
-        _proxy,
-        {
-          t: 1,
-          duration: Math.max(tl.duration(), 0.1),
-          ease: "none",
-          onUpdate: function () {
-            if (scheduled) return;
-            scheduled = true;
-            Promise.resolve().then(function () {
-              scheduled = false;
-              applyShutter();
-            });
+      try {
+        tl.to(
+          _proxy,
+          {
+            t: 1,
+            duration: Math.max(tl.duration(), 0.1),
+            ease: "none",
+            onUpdate: function () {
+              if (scheduled) return;
+              scheduled = true;
+              Promise.resolve().then(function () {
+                scheduled = false;
+                applyShutter();
+              });
+            },
           },
+          0,
+        );
+      } catch (e) {
+        unmark(claimed);
+        discard(state);
+        throw e;
+      }
+    };
+
+    // An empty attribute means defaults; anything else is a JSON options object. A value that
+    // is not an options object is skipped loudly rather than read as defaults, because a typo
+    // in it would otherwise render as a silently unblurred element.
+    function sweepOptions(el) {
+      var text = (el.getAttribute(SWEEP_ATTR) || "").trim();
+      if (text === "") return {};
+      var parsed = null;
+      try {
+        parsed = JSON.parse(text);
+      } catch (e) {
+        return refuse(el, "is not JSON: " + text);
+      }
+      // `null`, a number and a string all parse. None of them is a set of options.
+      if (parsed === null || typeof parsed !== "object" || Array.isArray(parsed)) {
+        return refuse(el, "is not a JSON object: " + text);
+      }
+      var bad = unknownKey(parsed);
+      if (bad !== null) return refuse(el, "names no such option: " + bad);
+      var wrong = nonNumber(parsed);
+      if (wrong !== null) return refuse(el, "needs a number for " + wrong);
+      return parsed;
+    }
+
+    // A misspelled key is the likeliest typo in a JSON object, and reading it as
+    // defaults is the silent no-op this attribute exists to remove.
+    function unknownKey(parsed) {
+      for (var key in parsed) {
+        if (OPTION_KEYS.indexOf(key) < 0) return key;
+      }
+      return null;
+    }
+
+    // A key with a value the shutter cannot use is the same silent no-op as a key it does
+    // not know: a non-numeric angle hides the smear, a non-numeric phase parks every copy
+    // at the timeline's start. JSON gives real numbers, so anything else is a typo.
+    function nonNumber(parsed) {
+      for (var i = 0; i < OPTION_KEYS.length; i++) {
+        var held = parsed[OPTION_KEYS[i]];
+        if (held === undefined) continue;
+        if (typeof held !== "number" || !Number.isFinite(held)) return OPTION_KEYS[i];
+      }
+      return null;
+    }
+
+    // A throw partway through an attach leaves an element blurred by nothing, so the copies
+    // go too, along with the observer that would otherwise keep walking a detached subtree
+    // on every resize of an element nothing blurs.
+    // The mark is what a second trigger reads, so it is the first thing to give back.
+    function unmark(els) {
+      for (var i = 0; i < els.length; i++) {
+        window._hfMbAttached.delete(els[i]);
+        window._hfMbTimeline.delete(els[i]);
+      }
+    }
+
+    function discard(state) {
+      for (var i = 0; i < state.length; i++) {
+        var s = state[i];
+        if (s.watch !== null) s.watch.disconnect();
+        if (s.group.parentNode !== null) s.group.parentNode.removeChild(s.group);
+      }
+    }
+
+    function refuse(el, why) {
+      window._hfMbSkipped.add(el);
+      console.warn("[motion-blur] " + SWEEP_ATTR + " " + why, el);
+      return null;
+    }
+
+    // An element belongs to the nearest composition above it, so a sub-composition's
+    // targets follow that sub-composition's own timeline.
+    function compositionOf(el) {
+      var host = el.closest("[data-composition-id]");
+      return host ? host.getAttribute("data-composition-id") : null;
+    }
+
+    // Anything else registered on the container is somebody else's bookkeeping: a
+    // timeline is the thing this snippet can seek and extend.
+    function isTimeline(value) {
+      return !!value && typeof value.time === "function" && typeof value.to === "function";
+    }
+
+    // Attached, or skipped as unparseable. Both are terminal, so a later trigger must not
+    // report or attach the element twice.
+    function handled(el) {
+      return window._hfMbAttached.has(el) || window._hfMbSkipped.has(el);
+    }
+
+    // The timeline registered for an element's own composition, or null. Read from the
+    // registry rather than taken from whoever wrote it, so every trigger agrees.
+    function timelineFor(el) {
+      var id = compositionOf(el);
+      if (id === null) return null;
+      var registry = window.__timelines;
+      var found = registry ? registry[id] : null;
+      return isTimeline(found) ? found : null;
+    }
+
+    // A marked element whose parent is not an Element has no target above it: the parent
+    // of a root is the Document, which has no `closest`.
+    function nestedInTarget(el) {
+      var parent = el.parentNode;
+      if (parent === null || typeof parent.closest !== "function") return false;
+      return parent.closest(SWEEP_SELECTOR) !== null;
+    }
+
+    // One owner of attaching one element. Answers whether the element still needs a trigger.
+    function claim(el) {
+      var tl = timelineFor(el);
+      if (handled(el)) {
+        var owner = window._hfMbTimeline.get(el);
+        // Re-registering a key with a DIFFERENT timeline leaves the copies driven by the one
+        // nobody seeks, which renders sharp and says nothing. Report it rather than guess.
+        var changed = tl !== null && owner !== undefined && owner !== tl;
+        if (changed && !window._hfMbWarned.has(el)) {
+          window._hfMbWarned.add(el);
+          console.warn(
+            "[motion-blur] a second timeline registered for this element; the copies still follow the first",
+            el,
+          );
+        }
+        return true;
+      }
+      // Its group would be inserted into the live outer element, so the outer target's
+      // style replay would walk a subtree its cursor no longer matches.
+      if (nestedInTarget(el)) {
+        refuse(el, "cannot blur a target inside another target; blur one of them");
+        return true;
+      }
+      var opts = sweepOptions(el);
+      if (opts === null) return true;
+      if (tl === null) return false;
+      window.attachMotionBlur(el, tl, opts);
+      return true;
+    }
+
+    // Returns the elements still waiting for their composition to register a timeline.
+    // The trap below runs this INSIDE the author's registration statement, so one bad
+    // target must not abort the rest of their composition script.
+    function sweep() {
+      var pending = [];
+      document.querySelectorAll(SWEEP_SELECTOR).forEach(function (el) {
+        try {
+          if (!claim(el)) pending.push(el);
+        } catch (e) {
+          window._hfMbSkipped.add(el);
+          console.warn("[motion-blur] could not blur this element: " + e, el);
+        }
+      });
+      return pending;
+    }
+
+    // Registering a timeline is the moment the author has finished building it, so trapping
+    // the write attaches before the renderer captures a frame. A microtask would be too
+    // early: it runs before the next `<script>` tag.
+    function registrationProxy(container) {
+      var proxy = new Proxy(container, {
+        set: function (target, key, value) {
+          target[key] = value;
+          if (typeof key === "string") sweep();
+          return true;
         },
-        0,
+      });
+      window._hfMbProxies.add(proxy);
+      return proxy;
+    }
+
+    function hookRegistration() {
+      var held = window.__timelines;
+      Object.defineProperty(window, "__timelines", {
+        configurable: true,
+        enumerable: true,
+        get: function () {
+          return held;
+        },
+        set: function (value) {
+          var container = !!value && typeof value === "object";
+          var fresh = container && !window._hfMbProxies.has(value);
+          held = fresh ? registrationProxy(value) : value;
+          if (fresh) sweep();
+        },
+      });
+      // A container assigned before this snippet ran is replayed through the setter, so a
+      // timeline already registered on it is swept too.
+      if (held !== undefined) window.__timelines = held;
+    }
+
+    // The trap above cannot see every registration: the runtime owns the registry object,
+    // wraps it per sub-composition, and mounts nested compositions asynchronously. So the
+    // registry is also POLLED, which needs no cooperation from whoever writes it.
+    function poll(ticks) {
+      var pending = sweep();
+      // The WHOLE budget, every time. Stopping the first tick nothing is pending kills the
+      // poll one tick into an ordinary page, which is before a late composition arrives.
+      if (ticks > 0) {
+        setTimeout(function () {
+          poll(ticks - 1);
+        }, POLL_MS);
+        return;
+      }
+      if (pending.length === 0) return;
+      var count = pending.length + " element(s) carry " + SWEEP_ATTR;
+      console.warn(
+        "[motion-blur] " + count + ", and no composition registered a timeline for them",
+        pending,
       );
-    };
+    }
+
+    if (!window._hfMbHooked) {
+      window._hfMbHooked = true;
+      hookRegistration();
+      poll(POLL_TICKS);
+    }
+    /* SHUTTER_SNIPPET_END */
   })();
 </script>
 
 <!--
   Timeline integration example:
 
+  <div id="root" data-composition-id="my-composition" data-duration="6" data-fps="30">
+    <div id="my-box" data-hf-motion-blur></div>
+    <div id="my-title" data-hf-motion-blur='{"shutterAngle": 360}'></div>
+  </div>
+
   const tl = gsap.timeline({ paused: true });
 
   tl.fromTo("#my-box", { x: -100 }, { x: 1700, duration: 1.2, ease: "power3.inOut" }, 0.5);
@@ -396,11 +713,10 @@
   // Extend to data-duration so seeks past the last tween reach the blur callback.
   tl.set(document.body, {}, DATA_DURATION);
 
-  // Call AFTER tweens, BEFORE window.__timelines registration.
-  // attachMotionBlur adds a tracking tween with onUpdate — must be called after
-  // tl.set()/tl.to() have established the final timeline duration.
-  attachMotionBlur("#my-box", tl, { shutterAngle: 720, samplesPerFrame: 16 });
-
+  // The registration below is what attaches both targets, in that order.
   window.__timelines = window.__timelines || {};
   window.__timelines["my-composition"] = tl;
+
+  // Only for an element created later than the polling window above:
+  attachMotionBlur("#late-box", tl, { shutterAngle: 720, samplesPerFrame: 16 });
 -->
diff --git a/registry/components/shutter-slam/demo.html b/registry/components/shutter-slam/demo.html
index 8ab138923b6..49c51c7f5da 100644
--- a/registry/components/shutter-slam/demo.html
+++ b/registry/components/shutter-slam/demo.html
@@ -88,16 +88,48 @@
         <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
         <script>
           (function () {
+            /* SHUTTER_SNIPPET_START */
             if (!window._hfMbUid) window._hfMbUid = 0;
             if (!window._hfMbAttached) window._hfMbAttached = new WeakSet();
+            if (!window._hfMbSkipped) window._hfMbSkipped = new WeakSet();
+            if (!window._hfMbProxies) window._hfMbProxies = new WeakSet();
+            if (!window._hfMbTimeline) window._hfMbTimeline = new WeakMap();
+            if (!window._hfMbWarned) window._hfMbWarned = new WeakSet();
+
+            // The declarative form. A copy of a target must not carry it, or the copy is swept
+            // as a target of its own; the group's own marker is `data-hf-motion-blur-group`.
+            var SWEEP_ATTR = "data-hf-motion-blur";
+            // About eight seconds. Long enough for an asynchronously mounted sub-composition, short
+            // enough that a page with a genuine mistake in it reports before anyone stops watching.
+            var POLL_MS = 32;
+            var POLL_TICKS = 250;
+            var SWEEP_SELECTOR = "[" + SWEEP_ATTR + "]";
+            var OPTION_KEYS = ["shutterAngle", "shutterPhase", "samplesPerFrame", "fps"];
+
+            // A copy is a deep clone, so the attribute rides along on the root AND on every marked
+            // descendant. Any one left behind is swept as a target of its own, which clones again.
+            var COPY_STRIP = [SWEEP_ATTR, "data-composition-id", "data-fps"];
+
+            function stripAttrs(el) {
+              for (var a = 0; a < COPY_STRIP.length; a++) el.removeAttribute(COPY_STRIP[a]);
+            }
+
+            function stripCopyAttrs(root) {
+              stripAttrs(root);
+              var inner = root.querySelectorAll("[" + COPY_STRIP.join("],[") + "]");
+              for (var i = 0; i < inner.length; i++) stripAttrs(inner[i]);
+            }
 
-            // Shutter length is measured in frames, so the snippet must know the
-            // composition frame rate: explicit option, else the root's data-fps, else 30.
-            function resolveFps(optionFps) {
+            // Shutter length is measured in frames, so the snippet must know the composition
+            // frame rate: explicit option, else the target's OWN root, else the first root in
+            // the document, else 30. The target's root is what makes two compositions on one
+            // page read their own data-fps instead of sharing the first one written.
+            function resolveFps(optionFps, target) {
               var explicit = Number(optionFps);
               if (explicit > 0) return explicit;
 
-              var root = document.querySelector("[data-composition-id][data-fps]");
+              var scoped = target ? target.closest("[data-composition-id][data-fps]") : null;
+              var root = scoped || document.querySelector("[data-composition-id][data-fps]");
               var rootFps = root ? Number(root.getAttribute("data-fps")) : 0;
               if (rootFps > 0) return rootFps;
 
@@ -167,8 +199,6 @@
               var samples = Number.isFinite(requestedSamples)
                 ? Math.max(2, Math.min(64, Math.round(requestedSamples)))
                 : 16;
-              var fps = resolveFps(opts.fps);
-
               var items = Array.isArray(selector) ? selector : [selector];
               var targets = items.reduce(function (acc, s) {
                 if (typeof s === "string") {
@@ -223,53 +253,91 @@
                 return value && value !== "none" ? "perspective(" + value + ") " : "";
               }
 
-              var state = targets
-                .filter(function (el) {
-                  // One group per element. A second call on the same element would stack a
-                  // second set of copies over the first and double the ink, so the first
-                  // call owns it.
-                  if (window._hfMbAttached.has(el)) return false;
-                  window._hfMbAttached.add(el);
-                  return true;
-                })
-                .map(function (el) {
-                  var group = document.createElement("div");
-                  group.setAttribute("data-hf-motion-blur", "hf-mb-" + window._hfMbUid++);
-                  group.style.cssText =
-                    "position:absolute;left:0;top:0;width:0;height:0;isolation:isolate;pointer-events:none;display:none;";
+              function attachOne(el) {
+                var group = document.createElement("div");
+                group.setAttribute("data-hf-motion-blur-group", "hf-mb-" + window._hfMbUid++);
+                group.style.cssText =
+                  "position:absolute;left:0;top:0;width:0;height:0;isolation:isolate;pointer-events:none;display:none;";
+
+                var clones = [];
+                for (var k = 0; k < copies; k++) {
+                  var clone = el.cloneNode(true);
+                  clone.removeAttribute("id");
+                  stripCopyAttrs(clone);
+                  clones.push(clone);
+                  group.appendChild(clone);
+                }
+                var s = {
+                  el: el,
+                  group: group,
+                  clones: clones,
+                  samples: [],
+                  perspective: "",
+                  watch: null,
+                };
 
-                  var clones = [];
-                  for (var k = 0; k < copies; k++) {
-                    var clone = el.cloneNode(true);
-                    clone.removeAttribute("id");
-                    clones.push(clone);
-                    group.appendChild(clone);
-                  }
-                  el.parentNode.insertBefore(group, el);
-
-                  var s = { el: el, group: group, clones: clones, samples: [], perspective: "" };
-
-                  // Resolved styles and the parent's perspective are px once read, so a
-                  // container-relative element needs them again when its box changes. Per frame
-                  // that would walk the whole subtree once per copy; on resize it costs nothing
-                  // on a fixed-size render and keeps a live preview honest.
-                  function snapshot() {
-                    var styles = resolvedStyles(el, []);
-                    s.perspective = parentPerspective(el);
-                    for (var c = 0; c < clones.length; c++) {
-                      paintResolvedStyles(clones[c], styles, { i: 0 });
-                      clones[c].style.position = "absolute";
-                      clones[c].style.margin = "0";
-                      clones[c].style.opacity = alpha;
-                      clones[c].style.mixBlendMode = "plus-lighter";
-                    }
+                // Resolved styles and the parent's perspective are px once read, so a
+                // container-relative element needs them again when its box changes. Per frame
+                // that would walk the whole subtree once per copy; on resize it costs nothing
+                // on a fixed-size render and keeps a live preview honest.
+                function snapshot() {
+                  var styles = resolvedStyles(el, []);
+                  s.perspective = parentPerspective(el);
+                  for (var c = 0; c < clones.length; c++) {
+                    paintResolvedStyles(clones[c], styles, { i: 0 });
+                    clones[c].style.position = "absolute";
+                    clones[c].style.margin = "0";
+                    clones[c].style.opacity = alpha;
+                    clones[c].style.mixBlendMode = "plus-lighter";
                   }
+                }
 
-                  snapshot();
-                  if (typeof ResizeObserver === "function")
-                    new ResizeObserver(snapshot).observe(el);
-                  return s;
-                });
+                // Snapshot BEFORE the group enters the page, so a throw in the style walk leaves
+                // nothing behind: the record the rollback needs does not exist until it returns.
+                snapshot();
+                el.parentNode.insertBefore(group, el);
+                if (typeof ResizeObserver === "function") {
+                  s.watch = new ResizeObserver(snapshot);
+                  s.watch.observe(el);
+                }
+                return s;
+              }
+
+              var state = [];
+              // Every element this call marked. A throw inside `attachOne` never returns its
+              // record, so `state` alone cannot give the marks back.
+              var claimed = [];
+              try {
+                for (var q = 0; q < targets.length; q++) {
+                  var candidate = targets[q];
+                  // One group per element, whether a second call names it or one call names it
+                  // twice: a second set of copies over the first would double the ink. Marked
+                  // BEFORE the copies go in: inserting them runs custom-element reactions
+                  // synchronously, and one that registers a timeline re-enters the write trap.
+                  if (window._hfMbAttached.has(candidate)) continue;
+                  window._hfMbAttached.add(candidate);
+                  window._hfMbTimeline.set(candidate, tl);
+                  claimed.push(candidate);
+                  state.push(attachOne(candidate));
+                }
+              } catch (e) {
+                unmark(claimed);
+                discard(state);
+                throw e;
+              }
+              // Nothing to blur means nothing to seek: a tracker here would run the whole sample
+              // loop every frame over an empty set.
+              if (state.length === 0) return;
+
+              // One seek loop drives the whole call, so the window is ONE length, and it belongs
+              // to the composition of an element this call actually attached.
+              var fps = resolveFps(opts.fps, state[0].el);
+              for (var d = 1; d < state.length; d++) {
+                if (resolveFps(opts.fps, state[d].el) === fps) continue;
+                var line = "one call cannot blur compositions at different frame rates; using ";
+                console.warn("[motion-blur] " + line + fps, state[d].el);
+                break;
+              }
 
               function readTransform(el) {
                 var cs = getComputedStyle(el);
@@ -356,24 +424,245 @@
               // seeking GSAP from inside its own render reads stale tween state, while the microtask
               // runs after the seek returns and before the frame is captured or painted.
               var _proxy = { t: 0 };
-              tl.to(
-                _proxy,
-                {
-                  t: 1,
-                  duration: Math.max(tl.duration(), 0.1),
-                  ease: "none",
-                  onUpdate: function () {
-                    if (scheduled) return;
-                    scheduled = true;
-                    Promise.resolve().then(function () {
-                      scheduled = false;
-                      applyShutter();
-                    });
+              try {
+                tl.to(
+                  _proxy,
+                  {
+                    t: 1,
+                    duration: Math.max(tl.duration(), 0.1),
+                    ease: "none",
+                    onUpdate: function () {
+                      if (scheduled) return;
+                      scheduled = true;
+                      Promise.resolve().then(function () {
+                        scheduled = false;
+                        applyShutter();
+                      });
+                    },
                   },
+                  0,
+                );
+              } catch (e) {
+                unmark(claimed);
+                discard(state);
+                throw e;
+              }
+            };
+
+            // An empty attribute means defaults; anything else is a JSON options object. A value that
+            // is not an options object is skipped loudly rather than read as defaults, because a typo
+            // in it would otherwise render as a silently unblurred element.
+            function sweepOptions(el) {
+              var text = (el.getAttribute(SWEEP_ATTR) || "").trim();
+              if (text === "") return {};
+              var parsed = null;
+              try {
+                parsed = JSON.parse(text);
+              } catch (e) {
+                return refuse(el, "is not JSON: " + text);
+              }
+              // `null`, a number and a string all parse. None of them is a set of options.
+              if (parsed === null || typeof parsed !== "object" || Array.isArray(parsed)) {
+                return refuse(el, "is not a JSON object: " + text);
+              }
+              var bad = unknownKey(parsed);
+              if (bad !== null) return refuse(el, "names no such option: " + bad);
+              var wrong = nonNumber(parsed);
+              if (wrong !== null) return refuse(el, "needs a number for " + wrong);
+              return parsed;
+            }
+
+            // A misspelled key is the likeliest typo in a JSON object, and reading it as
+            // defaults is the silent no-op this attribute exists to remove.
+            function unknownKey(parsed) {
+              for (var key in parsed) {
+                if (OPTION_KEYS.indexOf(key) < 0) return key;
+              }
+              return null;
+            }
+
+            // A key with a value the shutter cannot use is the same silent no-op as a key it does
+            // not know: a non-numeric angle hides the smear, a non-numeric phase parks every copy
+            // at the timeline's start. JSON gives real numbers, so anything else is a typo.
+            function nonNumber(parsed) {
+              for (var i = 0; i < OPTION_KEYS.length; i++) {
+                var held = parsed[OPTION_KEYS[i]];
+                if (held === undefined) continue;
+                if (typeof held !== "number" || !Number.isFinite(held)) return OPTION_KEYS[i];
+              }
+              return null;
+            }
+
+            // A throw partway through an attach leaves an element blurred by nothing, so the copies
+            // go too, along with the observer that would otherwise keep walking a detached subtree
+            // on every resize of an element nothing blurs.
+            // The mark is what a second trigger reads, so it is the first thing to give back.
+            function unmark(els) {
+              for (var i = 0; i < els.length; i++) {
+                window._hfMbAttached.delete(els[i]);
+                window._hfMbTimeline.delete(els[i]);
+              }
+            }
+
+            function discard(state) {
+              for (var i = 0; i < state.length; i++) {
+                var s = state[i];
+                if (s.watch !== null) s.watch.disconnect();
+                if (s.group.parentNode !== null) s.group.parentNode.removeChild(s.group);
+              }
+            }
+
+            function refuse(el, why) {
+              window._hfMbSkipped.add(el);
+              console.warn("[motion-blur] " + SWEEP_ATTR + " " + why, el);
+              return null;
+            }
+
+            // An element belongs to the nearest composition above it, so a sub-composition's
+            // targets follow that sub-composition's own timeline.
+            function compositionOf(el) {
+              var host = el.closest("[data-composition-id]");
+              return host ? host.getAttribute("data-composition-id") : null;
+            }
+
+            // Anything else registered on the container is somebody else's bookkeeping: a
+            // timeline is the thing this snippet can seek and extend.
+            function isTimeline(value) {
+              return !!value && typeof value.time === "function" && typeof value.to === "function";
+            }
+
+            // Attached, or skipped as unparseable. Both are terminal, so a later trigger must not
+            // report or attach the element twice.
+            function handled(el) {
+              return window._hfMbAttached.has(el) || window._hfMbSkipped.has(el);
+            }
+
+            // The timeline registered for an element's own composition, or null. Read from the
+            // registry rather than taken from whoever wrote it, so every trigger agrees.
+            function timelineFor(el) {
+              var id = compositionOf(el);
+              if (id === null) return null;
+              var registry = window.__timelines;
+              var found = registry ? registry[id] : null;
+              return isTimeline(found) ? found : null;
+            }
+
+            // A marked element whose parent is not an Element has no target above it: the parent
+            // of a root is the Document, which has no `closest`.
+            function nestedInTarget(el) {
+              var parent = el.parentNode;
+              if (parent === null || typeof parent.closest !== "function") return false;
+              return parent.closest(SWEEP_SELECTOR) !== null;
+            }
+
+            // One owner of attaching one element. Answers whether the element still needs a trigger.
+            function claim(el) {
+              var tl = timelineFor(el);
+              if (handled(el)) {
+                var owner = window._hfMbTimeline.get(el);
+                // Re-registering a key with a DIFFERENT timeline leaves the copies driven by the one
+                // nobody seeks, which renders sharp and says nothing. Report it rather than guess.
+                var changed = tl !== null && owner !== undefined && owner !== tl;
+                if (changed && !window._hfMbWarned.has(el)) {
+                  window._hfMbWarned.add(el);
+                  console.warn(
+                    "[motion-blur] a second timeline registered for this element; the copies still follow the first",
+                    el,
+                  );
+                }
+                return true;
+              }
+              // Its group would be inserted into the live outer element, so the outer target's
+              // style replay would walk a subtree its cursor no longer matches.
+              if (nestedInTarget(el)) {
+                refuse(el, "cannot blur a target inside another target; blur one of them");
+                return true;
+              }
+              var opts = sweepOptions(el);
+              if (opts === null) return true;
+              if (tl === null) return false;
+              window.attachMotionBlur(el, tl, opts);
+              return true;
+            }
+
+            // Returns the elements still waiting for their composition to register a timeline.
+            // The trap below runs this INSIDE the author's registration statement, so one bad
+            // target must not abort the rest of their composition script.
+            function sweep() {
+              var pending = [];
+              document.querySelectorAll(SWEEP_SELECTOR).forEach(function (el) {
+                try {
+                  if (!claim(el)) pending.push(el);
+                } catch (e) {
+                  window._hfMbSkipped.add(el);
+                  console.warn("[motion-blur] could not blur this element: " + e, el);
+                }
+              });
+              return pending;
+            }
+
+            // Registering a timeline is the moment the author has finished building it, so trapping
+            // the write attaches before the renderer captures a frame. A microtask would be too
+            // early: it runs before the next `<script>` tag.
+            function registrationProxy(container) {
+              var proxy = new Proxy(container, {
+                set: function (target, key, value) {
+                  target[key] = value;
+                  if (typeof key === "string") sweep();
+                  return true;
+                },
+              });
+              window._hfMbProxies.add(proxy);
+              return proxy;
+            }
+
+            function hookRegistration() {
+              var held = window.__timelines;
+              Object.defineProperty(window, "__timelines", {
+                configurable: true,
+                enumerable: true,
+                get: function () {
+                  return held;
                 },
-                0,
+                set: function (value) {
+                  var container = !!value && typeof value === "object";
+                  var fresh = container && !window._hfMbProxies.has(value);
+                  held = fresh ? registrationProxy(value) : value;
+                  if (fresh) sweep();
+                },
+              });
+              // A container assigned before this snippet ran is replayed through the setter, so a
+              // timeline already registered on it is swept too.
+              if (held !== undefined) window.__timelines = held;
+            }
+
+            // The trap above cannot see every registration: the runtime owns the registry object,
+            // wraps it per sub-composition, and mounts nested compositions asynchronously. So the
+            // registry is also POLLED, which needs no cooperation from whoever writes it.
+            function poll(ticks) {
+              var pending = sweep();
+              // The WHOLE budget, every time. Stopping the first tick nothing is pending kills the
+              // poll one tick into an ordinary page, which is before a late composition arrives.
+              if (ticks > 0) {
+                setTimeout(function () {
+                  poll(ticks - 1);
+                }, POLL_MS);
+                return;
+              }
+              if (pending.length === 0) return;
+              var count = pending.length + " element(s) carry " + SWEEP_ATTR;
+              console.warn(
+                "[motion-blur] " + count + ", and no composition registered a timeline for them",
+                pending,
               );
-            };
+            }
+
+            if (!window._hfMbHooked) {
+              window._hfMbHooked = true;
+              hookRegistration();
+              poll(POLL_TICKS);
+            }
+            /* SHUTTER_SNIPPET_END */
           })();
         </script>
         <script>
diff --git a/registry/components/shutter-slam/shutter-slam.html b/registry/components/shutter-slam/shutter-slam.html
index 2ad3207cf27..de2aadaab51 100644
--- a/registry/components/shutter-slam/shutter-slam.html
+++ b/registry/components/shutter-slam/shutter-slam.html
@@ -122,16 +122,48 @@
         <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
         <script>
           (function () {
+            /* SHUTTER_SNIPPET_START */
             if (!window._hfMbUid) window._hfMbUid = 0;
             if (!window._hfMbAttached) window._hfMbAttached = new WeakSet();
+            if (!window._hfMbSkipped) window._hfMbSkipped = new WeakSet();
+            if (!window._hfMbProxies) window._hfMbProxies = new WeakSet();
+            if (!window._hfMbTimeline) window._hfMbTimeline = new WeakMap();
+            if (!window._hfMbWarned) window._hfMbWarned = new WeakSet();
+
+            // The declarative form. A copy of a target must not carry it, or the copy is swept
+            // as a target of its own; the group's own marker is `data-hf-motion-blur-group`.
+            var SWEEP_ATTR = "data-hf-motion-blur";
+            // About eight seconds. Long enough for an asynchronously mounted sub-composition, short
+            // enough that a page with a genuine mistake in it reports before anyone stops watching.
+            var POLL_MS = 32;
+            var POLL_TICKS = 250;
+            var SWEEP_SELECTOR = "[" + SWEEP_ATTR + "]";
+            var OPTION_KEYS = ["shutterAngle", "shutterPhase", "samplesPerFrame", "fps"];
+
+            // A copy is a deep clone, so the attribute rides along on the root AND on every marked
+            // descendant. Any one left behind is swept as a target of its own, which clones again.
+            var COPY_STRIP = [SWEEP_ATTR, "data-composition-id", "data-fps"];
+
+            function stripAttrs(el) {
+              for (var a = 0; a < COPY_STRIP.length; a++) el.removeAttribute(COPY_STRIP[a]);
+            }
+
+            function stripCopyAttrs(root) {
+              stripAttrs(root);
+              var inner = root.querySelectorAll("[" + COPY_STRIP.join("],[") + "]");
+              for (var i = 0; i < inner.length; i++) stripAttrs(inner[i]);
+            }
 
-            // Shutter length is measured in frames, so the snippet must know the
-            // composition frame rate: explicit option, else the root's data-fps, else 30.
-            function resolveFps(optionFps) {
+            // Shutter length is measured in frames, so the snippet must know the composition
+            // frame rate: explicit option, else the target's OWN root, else the first root in
+            // the document, else 30. The target's root is what makes two compositions on one
+            // page read their own data-fps instead of sharing the first one written.
+            function resolveFps(optionFps, target) {
               var explicit = Number(optionFps);
               if (explicit > 0) return explicit;
 
-              var root = document.querySelector("[data-composition-id][data-fps]");
+              var scoped = target ? target.closest("[data-composition-id][data-fps]") : null;
+              var root = scoped || document.querySelector("[data-composition-id][data-fps]");
               var rootFps = root ? Number(root.getAttribute("data-fps")) : 0;
               if (rootFps > 0) return rootFps;
 
@@ -201,8 +233,6 @@
               var samples = Number.isFinite(requestedSamples)
                 ? Math.max(2, Math.min(64, Math.round(requestedSamples)))
                 : 16;
-              var fps = resolveFps(opts.fps);
-
               var items = Array.isArray(selector) ? selector : [selector];
               var targets = items.reduce(function (acc, s) {
                 if (typeof s === "string") {
@@ -257,53 +287,91 @@
                 return value && value !== "none" ? "perspective(" + value + ") " : "";
               }
 
-              var state = targets
-                .filter(function (el) {
-                  // One group per element. A second call on the same element would stack a
-                  // second set of copies over the first and double the ink, so the first
-                  // call owns it.
-                  if (window._hfMbAttached.has(el)) return false;
-                  window._hfMbAttached.add(el);
-                  return true;
-                })
-                .map(function (el) {
-                  var group = document.createElement("div");
-                  group.setAttribute("data-hf-motion-blur", "hf-mb-" + window._hfMbUid++);
-                  group.style.cssText =
-                    "position:absolute;left:0;top:0;width:0;height:0;isolation:isolate;pointer-events:none;display:none;";
-
-                  var clones = [];
-                  for (var k = 0; k < copies; k++) {
-                    var clone = el.cloneNode(true);
-                    clone.removeAttribute("id");
-                    clones.push(clone);
-                    group.appendChild(clone);
-                  }
-                  el.parentNode.insertBefore(group, el);
-
-                  var s = { el: el, group: group, clones: clones, samples: [], perspective: "" };
-
-                  // Resolved styles and the parent's perspective are px once read, so a
-                  // container-relative element needs them again when its box changes. Per frame
-                  // that would walk the whole subtree once per copy; on resize it costs nothing
-                  // on a fixed-size render and keeps a live preview honest.
-                  function snapshot() {
-                    var styles = resolvedStyles(el, []);
-                    s.perspective = parentPerspective(el);
-                    for (var c = 0; c < clones.length; c++) {
-                      paintResolvedStyles(clones[c], styles, { i: 0 });
-                      clones[c].style.position = "absolute";
-                      clones[c].style.margin = "0";
-                      clones[c].style.opacity = alpha;
-                      clones[c].style.mixBlendMode = "plus-lighter";
-                    }
+              function attachOne(el) {
+                var group = document.createElement("div");
+                group.setAttribute("data-hf-motion-blur-group", "hf-mb-" + window._hfMbUid++);
+                group.style.cssText =
+                  "position:absolute;left:0;top:0;width:0;height:0;isolation:isolate;pointer-events:none;display:none;";
+
+                var clones = [];
+                for (var k = 0; k < copies; k++) {
+                  var clone = el.cloneNode(true);
+                  clone.removeAttribute("id");
+                  stripCopyAttrs(clone);
+                  clones.push(clone);
+                  group.appendChild(clone);
+                }
+                var s = {
+                  el: el,
+                  group: group,
+                  clones: clones,
+                  samples: [],
+                  perspective: "",
+                  watch: null,
+                };
+
+                // Resolved styles and the parent's perspective are px once read, so a
+                // container-relative element needs them again when its box changes. Per frame
+                // that would walk the whole subtree once per copy; on resize it costs nothing
+                // on a fixed-size render and keeps a live preview honest.
+                function snapshot() {
+                  var styles = resolvedStyles(el, []);
+                  s.perspective = parentPerspective(el);
+                  for (var c = 0; c < clones.length; c++) {
+                    paintResolvedStyles(clones[c], styles, { i: 0 });
+                    clones[c].style.position = "absolute";
+                    clones[c].style.margin = "0";
+                    clones[c].style.opacity = alpha;
+                    clones[c].style.mixBlendMode = "plus-lighter";
                   }
+                }
 
-                  snapshot();
-                  if (typeof ResizeObserver === "function")
-                    new ResizeObserver(snapshot).observe(el);
-                  return s;
-                });
+                // Snapshot BEFORE the group enters the page, so a throw in the style walk leaves
+                // nothing behind: the record the rollback needs does not exist until it returns.
+                snapshot();
+                el.parentNode.insertBefore(group, el);
+                if (typeof ResizeObserver === "function") {
+                  s.watch = new ResizeObserver(snapshot);
+                  s.watch.observe(el);
+                }
+                return s;
+              }
+
+              var state = [];
+              // Every element this call marked. A throw inside `attachOne` never returns its
+              // record, so `state` alone cannot give the marks back.
+              var claimed = [];
+              try {
+                for (var q = 0; q < targets.length; q++) {
+                  var candidate = targets[q];
+                  // One group per element, whether a second call names it or one call names it
+                  // twice: a second set of copies over the first would double the ink. Marked
+                  // BEFORE the copies go in: inserting them runs custom-element reactions
+                  // synchronously, and one that registers a timeline re-enters the write trap.
+                  if (window._hfMbAttached.has(candidate)) continue;
+                  window._hfMbAttached.add(candidate);
+                  window._hfMbTimeline.set(candidate, tl);
+                  claimed.push(candidate);
+                  state.push(attachOne(candidate));
+                }
+              } catch (e) {
+                unmark(claimed);
+                discard(state);
+                throw e;
+              }
+              // Nothing to blur means nothing to seek: a tracker here would run the whole sample
+              // loop every frame over an empty set.
+              if (state.length === 0) return;
+
+              // One seek loop drives the whole call, so the window is ONE length, and it belongs
+              // to the composition of an element this call actually attached.
+              var fps = resolveFps(opts.fps, state[0].el);
+              for (var d = 1; d < state.length; d++) {
+                if (resolveFps(opts.fps, state[d].el) === fps) continue;
+                var line = "one call cannot blur compositions at different frame rates; using ";
+                console.warn("[motion-blur] " + line + fps, state[d].el);
+                break;
+              }
 
               function readTransform(el) {
                 var cs = getComputedStyle(el);
@@ -390,24 +458,245 @@
               // seeking GSAP from inside its own render reads stale tween state, while the microtask
               // runs after the seek returns and before the frame is captured or painted.
               var _proxy = { t: 0 };
-              tl.to(
-                _proxy,
-                {
-                  t: 1,
-                  duration: Math.max(tl.duration(), 0.1),
-                  ease: "none",
-                  onUpdate: function () {
-                    if (scheduled) return;
-                    scheduled = true;
-                    Promise.resolve().then(function () {
-                      scheduled = false;
-                      applyShutter();
-                    });
+              try {
+                tl.to(
+                  _proxy,
+                  {
+                    t: 1,
+                    duration: Math.max(tl.duration(), 0.1),
+                    ease: "none",
+                    onUpdate: function () {
+                      if (scheduled) return;
+                      scheduled = true;
+                      Promise.resolve().then(function () {
+                        scheduled = false;
+                        applyShutter();
+                      });
+                    },
                   },
+                  0,
+                );
+              } catch (e) {
+                unmark(claimed);
+                discard(state);
+                throw e;
+              }
+            };
+
+            // An empty attribute means defaults; anything else is a JSON options object. A value that
+            // is not an options object is skipped loudly rather than read as defaults, because a typo
+            // in it would otherwise render as a silently unblurred element.
+            function sweepOptions(el) {
+              var text = (el.getAttribute(SWEEP_ATTR) || "").trim();
+              if (text === "") return {};
+              var parsed = null;
+              try {
+                parsed = JSON.parse(text);
+              } catch (e) {
+                return refuse(el, "is not JSON: " + text);
+              }
+              // `null`, a number and a string all parse. None of them is a set of options.
+              if (parsed === null || typeof parsed !== "object" || Array.isArray(parsed)) {
+                return refuse(el, "is not a JSON object: " + text);
+              }
+              var bad = unknownKey(parsed);
+              if (bad !== null) return refuse(el, "names no such option: " + bad);
+              var wrong = nonNumber(parsed);
+              if (wrong !== null) return refuse(el, "needs a number for " + wrong);
+              return parsed;
+            }
+
+            // A misspelled key is the likeliest typo in a JSON object, and reading it as
+            // defaults is the silent no-op this attribute exists to remove.
+            function unknownKey(parsed) {
+              for (var key in parsed) {
+                if (OPTION_KEYS.indexOf(key) < 0) return key;
+              }
+              return null;
+            }
+
+            // A key with a value the shutter cannot use is the same silent no-op as a key it does
+            // not know: a non-numeric angle hides the smear, a non-numeric phase parks every copy
+            // at the timeline's start. JSON gives real numbers, so anything else is a typo.
+            function nonNumber(parsed) {
+              for (var i = 0; i < OPTION_KEYS.length; i++) {
+                var held = parsed[OPTION_KEYS[i]];
+                if (held === undefined) continue;
+                if (typeof held !== "number" || !Number.isFinite(held)) return OPTION_KEYS[i];
+              }
+              return null;
+            }
+
+            // A throw partway through an attach leaves an element blurred by nothing, so the copies
+            // go too, along with the observer that would otherwise keep walking a detached subtree
+            // on every resize of an element nothing blurs.
+            // The mark is what a second trigger reads, so it is the first thing to give back.
+            function unmark(els) {
+              for (var i = 0; i < els.length; i++) {
+                window._hfMbAttached.delete(els[i]);
+                window._hfMbTimeline.delete(els[i]);
+              }
+            }
+
+            function discard(state) {
+              for (var i = 0; i < state.length; i++) {
+                var s = state[i];
+                if (s.watch !== null) s.watch.disconnect();
+                if (s.group.parentNode !== null) s.group.parentNode.removeChild(s.group);
+              }
+            }
+
+            function refuse(el, why) {
+              window._hfMbSkipped.add(el);
+              console.warn("[motion-blur] " + SWEEP_ATTR + " " + why, el);
+              return null;
+            }
+
+            // An element belongs to the nearest composition above it, so a sub-composition's
+            // targets follow that sub-composition's own timeline.
+            function compositionOf(el) {
+              var host = el.closest("[data-composition-id]");
+              return host ? host.getAttribute("data-composition-id") : null;
+            }
+
+            // Anything else registered on the container is somebody else's bookkeeping: a
+            // timeline is the thing this snippet can seek and extend.
+            function isTimeline(value) {
+              return !!value && typeof value.time === "function" && typeof value.to === "function";
+            }
+
+            // Attached, or skipped as unparseable. Both are terminal, so a later trigger must not
+            // report or attach the element twice.
+            function handled(el) {
+              return window._hfMbAttached.has(el) || window._hfMbSkipped.has(el);
+            }
+
+            // The timeline registered for an element's own composition, or null. Read from the
+            // registry rather than taken from whoever wrote it, so every trigger agrees.
+            function timelineFor(el) {
+              var id = compositionOf(el);
+              if (id === null) return null;
+              var registry = window.__timelines;
+              var found = registry ? registry[id] : null;
+              return isTimeline(found) ? found : null;
+            }
+
+            // A marked element whose parent is not an Element has no target above it: the parent
+            // of a root is the Document, which has no `closest`.
+            function nestedInTarget(el) {
+              var parent = el.parentNode;
+              if (parent === null || typeof parent.closest !== "function") return false;
+              return parent.closest(SWEEP_SELECTOR) !== null;
+            }
+
+            // One owner of attaching one element. Answers whether the element still needs a trigger.
+            function claim(el) {
+              var tl = timelineFor(el);
+              if (handled(el)) {
+                var owner = window._hfMbTimeline.get(el);
+                // Re-registering a key with a DIFFERENT timeline leaves the copies driven by the one
+                // nobody seeks, which renders sharp and says nothing. Report it rather than guess.
+                var changed = tl !== null && owner !== undefined && owner !== tl;
+                if (changed && !window._hfMbWarned.has(el)) {
+                  window._hfMbWarned.add(el);
+                  console.warn(
+                    "[motion-blur] a second timeline registered for this element; the copies still follow the first",
+                    el,
+                  );
+                }
+                return true;
+              }
+              // Its group would be inserted into the live outer element, so the outer target's
+              // style replay would walk a subtree its cursor no longer matches.
+              if (nestedInTarget(el)) {
+                refuse(el, "cannot blur a target inside another target; blur one of them");
+                return true;
+              }
+              var opts = sweepOptions(el);
+              if (opts === null) return true;
+              if (tl === null) return false;
+              window.attachMotionBlur(el, tl, opts);
+              return true;
+            }
+
+            // Returns the elements still waiting for their composition to register a timeline.
+            // The trap below runs this INSIDE the author's registration statement, so one bad
+            // target must not abort the rest of their composition script.
+            function sweep() {
+              var pending = [];
+              document.querySelectorAll(SWEEP_SELECTOR).forEach(function (el) {
+                try {
+                  if (!claim(el)) pending.push(el);
+                } catch (e) {
+                  window._hfMbSkipped.add(el);
+                  console.warn("[motion-blur] could not blur this element: " + e, el);
+                }
+              });
+              return pending;
+            }
+
+            // Registering a timeline is the moment the author has finished building it, so trapping
+            // the write attaches before the renderer captures a frame. A microtask would be too
+            // early: it runs before the next `<script>` tag.
+            function registrationProxy(container) {
+              var proxy = new Proxy(container, {
+                set: function (target, key, value) {
+                  target[key] = value;
+                  if (typeof key === "string") sweep();
+                  return true;
+                },
+              });
+              window._hfMbProxies.add(proxy);
+              return proxy;
+            }
+
+            function hookRegistration() {
+              var held = window.__timelines;
+              Object.defineProperty(window, "__timelines", {
+                configurable: true,
+                enumerable: true,
+                get: function () {
+                  return held;
                 },
-                0,
+                set: function (value) {
+                  var container = !!value && typeof value === "object";
+                  var fresh = container && !window._hfMbProxies.has(value);
+                  held = fresh ? registrationProxy(value) : value;
+                  if (fresh) sweep();
+                },
+              });
+              // A container assigned before this snippet ran is replayed through the setter, so a
+              // timeline already registered on it is swept too.
+              if (held !== undefined) window.__timelines = held;
+            }
+
+            // The trap above cannot see every registration: the runtime owns the registry object,
+            // wraps it per sub-composition, and mounts nested compositions asynchronously. So the
+            // registry is also POLLED, which needs no cooperation from whoever writes it.
+            function poll(ticks) {
+              var pending = sweep();
+              // The WHOLE budget, every time. Stopping the first tick nothing is pending kills the
+              // poll one tick into an ordinary page, which is before a late composition arrives.
+              if (ticks > 0) {
+                setTimeout(function () {
+                  poll(ticks - 1);
+                }, POLL_MS);
+                return;
+              }
+              if (pending.length === 0) return;
+              var count = pending.length + " element(s) carry " + SWEEP_ATTR;
+              console.warn(
+                "[motion-blur] " + count + ", and no composition registered a timeline for them",
+                pending,
               );
-            };
+            }
+
+            if (!window._hfMbHooked) {
+              window._hfMbHooked = true;
+              hookRegistration();
+              poll(POLL_TICKS);
+            }
+            /* SHUTTER_SNIPPET_END */
           })();
         </script>
         <script>
diff --git a/registry/examples/motion-blur/index.html b/registry/examples/motion-blur/index.html
index 96a5097f686..6106007298b 100644
--- a/registry/examples/motion-blur/index.html
+++ b/registry/examples/motion-blur/index.html
@@ -342,16 +342,48 @@
       <script>
         (function () {
           /* ── attachMotionBlur ─────────────────────────────────────── */
+          /* SHUTTER_SNIPPET_START */
           if (!window._hfMbUid) window._hfMbUid = 0;
           if (!window._hfMbAttached) window._hfMbAttached = new WeakSet();
+          if (!window._hfMbSkipped) window._hfMbSkipped = new WeakSet();
+          if (!window._hfMbProxies) window._hfMbProxies = new WeakSet();
+          if (!window._hfMbTimeline) window._hfMbTimeline = new WeakMap();
+          if (!window._hfMbWarned) window._hfMbWarned = new WeakSet();
+
+          // The declarative form. A copy of a target must not carry it, or the copy is swept
+          // as a target of its own; the group's own marker is `data-hf-motion-blur-group`.
+          var SWEEP_ATTR = "data-hf-motion-blur";
+          // About eight seconds. Long enough for an asynchronously mounted sub-composition, short
+          // enough that a page with a genuine mistake in it reports before anyone stops watching.
+          var POLL_MS = 32;
+          var POLL_TICKS = 250;
+          var SWEEP_SELECTOR = "[" + SWEEP_ATTR + "]";
+          var OPTION_KEYS = ["shutterAngle", "shutterPhase", "samplesPerFrame", "fps"];
+
+          // A copy is a deep clone, so the attribute rides along on the root AND on every marked
+          // descendant. Any one left behind is swept as a target of its own, which clones again.
+          var COPY_STRIP = [SWEEP_ATTR, "data-composition-id", "data-fps"];
+
+          function stripAttrs(el) {
+            for (var a = 0; a < COPY_STRIP.length; a++) el.removeAttribute(COPY_STRIP[a]);
+          }
+
+          function stripCopyAttrs(root) {
+            stripAttrs(root);
+            var inner = root.querySelectorAll("[" + COPY_STRIP.join("],[") + "]");
+            for (var i = 0; i < inner.length; i++) stripAttrs(inner[i]);
+          }
 
-          // Shutter length is measured in frames, so the snippet must know the
-          // composition frame rate: explicit option, else the root's data-fps, else 30.
-          function resolveFps(optionFps) {
+          // Shutter length is measured in frames, so the snippet must know the composition
+          // frame rate: explicit option, else the target's OWN root, else the first root in
+          // the document, else 30. The target's root is what makes two compositions on one
+          // page read their own data-fps instead of sharing the first one written.
+          function resolveFps(optionFps, target) {
             var explicit = Number(optionFps);
             if (explicit > 0) return explicit;
 
-            var root = document.querySelector("[data-composition-id][data-fps]");
+            var scoped = target ? target.closest("[data-composition-id][data-fps]") : null;
+            var root = scoped || document.querySelector("[data-composition-id][data-fps]");
             var rootFps = root ? Number(root.getAttribute("data-fps")) : 0;
             if (rootFps > 0) return rootFps;
 
@@ -421,8 +453,6 @@
             var samples = Number.isFinite(requestedSamples)
               ? Math.max(2, Math.min(64, Math.round(requestedSamples)))
               : 16;
-            var fps = resolveFps(opts.fps);
-
             var items = Array.isArray(selector) ? selector : [selector];
             var targets = items.reduce(function (acc, s) {
               if (typeof s === "string") {
@@ -477,52 +507,91 @@
               return value && value !== "none" ? "perspective(" + value + ") " : "";
             }
 
-            var state = targets
-              .filter(function (el) {
-                // One group per element. A second call on the same element would stack a
-                // second set of copies over the first and double the ink, so the first
-                // call owns it.
-                if (window._hfMbAttached.has(el)) return false;
-                window._hfMbAttached.add(el);
-                return true;
-              })
-              .map(function (el) {
-                var group = document.createElement("div");
-                group.setAttribute("data-hf-motion-blur", "hf-mb-" + window._hfMbUid++);
-                group.style.cssText =
-                  "position:absolute;left:0;top:0;width:0;height:0;isolation:isolate;pointer-events:none;display:none;";
-
-                var clones = [];
-                for (var k = 0; k < copies; k++) {
-                  var clone = el.cloneNode(true);
-                  clone.removeAttribute("id");
-                  clones.push(clone);
-                  group.appendChild(clone);
-                }
-                el.parentNode.insertBefore(group, el);
-
-                var s = { el: el, group: group, clones: clones, samples: [], perspective: "" };
-
-                // Resolved styles and the parent's perspective are px once read, so a
-                // container-relative element needs them again when its box changes. Per frame
-                // that would walk the whole subtree once per copy; on resize it costs nothing
-                // on a fixed-size render and keeps a live preview honest.
-                function snapshot() {
-                  var styles = resolvedStyles(el, []);
-                  s.perspective = parentPerspective(el);
-                  for (var c = 0; c < clones.length; c++) {
-                    paintResolvedStyles(clones[c], styles, { i: 0 });
-                    clones[c].style.position = "absolute";
-                    clones[c].style.margin = "0";
-                    clones[c].style.opacity = alpha;
-                    clones[c].style.mixBlendMode = "plus-lighter";
-                  }
+            function attachOne(el) {
+              var group = document.createElement("div");
+              group.setAttribute("data-hf-motion-blur-group", "hf-mb-" + window._hfMbUid++);
+              group.style.cssText =
+                "position:absolute;left:0;top:0;width:0;height:0;isolation:isolate;pointer-events:none;display:none;";
+
+              var clones = [];
+              for (var k = 0; k < copies; k++) {
+                var clone = el.cloneNode(true);
+                clone.removeAttribute("id");
+                stripCopyAttrs(clone);
+                clones.push(clone);
+                group.appendChild(clone);
+              }
+              var s = {
+                el: el,
+                group: group,
+                clones: clones,
+                samples: [],
+                perspective: "",
+                watch: null,
+              };
+
+              // Resolved styles and the parent's perspective are px once read, so a
+              // container-relative element needs them again when its box changes. Per frame
+              // that would walk the whole subtree once per copy; on resize it costs nothing
+              // on a fixed-size render and keeps a live preview honest.
+              function snapshot() {
+                var styles = resolvedStyles(el, []);
+                s.perspective = parentPerspective(el);
+                for (var c = 0; c < clones.length; c++) {
+                  paintResolvedStyles(clones[c], styles, { i: 0 });
+                  clones[c].style.position = "absolute";
+                  clones[c].style.margin = "0";
+                  clones[c].style.opacity = alpha;
+                  clones[c].style.mixBlendMode = "plus-lighter";
                 }
+              }
 
-                snapshot();
-                if (typeof ResizeObserver === "function") new ResizeObserver(snapshot).observe(el);
-                return s;
-              });
+              // Snapshot BEFORE the group enters the page, so a throw in the style walk leaves
+              // nothing behind: the record the rollback needs does not exist until it returns.
+              snapshot();
+              el.parentNode.insertBefore(group, el);
+              if (typeof ResizeObserver === "function") {
+                s.watch = new ResizeObserver(snapshot);
+                s.watch.observe(el);
+              }
+              return s;
+            }
+
+            var state = [];
+            // Every element this call marked. A throw inside `attachOne` never returns its
+            // record, so `state` alone cannot give the marks back.
+            var claimed = [];
+            try {
+              for (var q = 0; q < targets.length; q++) {
+                var candidate = targets[q];
+                // One group per element, whether a second call names it or one call names it
+                // twice: a second set of copies over the first would double the ink. Marked
+                // BEFORE the copies go in: inserting them runs custom-element reactions
+                // synchronously, and one that registers a timeline re-enters the write trap.
+                if (window._hfMbAttached.has(candidate)) continue;
+                window._hfMbAttached.add(candidate);
+                window._hfMbTimeline.set(candidate, tl);
+                claimed.push(candidate);
+                state.push(attachOne(candidate));
+              }
+            } catch (e) {
+              unmark(claimed);
+              discard(state);
+              throw e;
+            }
+            // Nothing to blur means nothing to seek: a tracker here would run the whole sample
+            // loop every frame over an empty set.
+            if (state.length === 0) return;
+
+            // One seek loop drives the whole call, so the window is ONE length, and it belongs
+            // to the composition of an element this call actually attached.
+            var fps = resolveFps(opts.fps, state[0].el);
+            for (var d = 1; d < state.length; d++) {
+              if (resolveFps(opts.fps, state[d].el) === fps) continue;
+              var line = "one call cannot blur compositions at different frame rates; using ";
+              console.warn("[motion-blur] " + line + fps, state[d].el);
+              break;
+            }
 
             function readTransform(el) {
               var cs = getComputedStyle(el);
@@ -609,24 +678,245 @@
             // seeking GSAP from inside its own render reads stale tween state, while the microtask
             // runs after the seek returns and before the frame is captured or painted.
             var _proxy = { t: 0 };
-            tl.to(
-              _proxy,
-              {
-                t: 1,
-                duration: Math.max(tl.duration(), 0.1),
-                ease: "none",
-                onUpdate: function () {
-                  if (scheduled) return;
-                  scheduled = true;
-                  Promise.resolve().then(function () {
-                    scheduled = false;
-                    applyShutter();
-                  });
+            try {
+              tl.to(
+                _proxy,
+                {
+                  t: 1,
+                  duration: Math.max(tl.duration(), 0.1),
+                  ease: "none",
+                  onUpdate: function () {
+                    if (scheduled) return;
+                    scheduled = true;
+                    Promise.resolve().then(function () {
+                      scheduled = false;
+                      applyShutter();
+                    });
+                  },
                 },
+                0,
+              );
+            } catch (e) {
+              unmark(claimed);
+              discard(state);
+              throw e;
+            }
+          };
+
+          // An empty attribute means defaults; anything else is a JSON options object. A value that
+          // is not an options object is skipped loudly rather than read as defaults, because a typo
+          // in it would otherwise render as a silently unblurred element.
+          function sweepOptions(el) {
+            var text = (el.getAttribute(SWEEP_ATTR) || "").trim();
+            if (text === "") return {};
+            var parsed = null;
+            try {
+              parsed = JSON.parse(text);
+            } catch (e) {
+              return refuse(el, "is not JSON: " + text);
+            }
+            // `null`, a number and a string all parse. None of them is a set of options.
+            if (parsed === null || typeof parsed !== "object" || Array.isArray(parsed)) {
+              return refuse(el, "is not a JSON object: " + text);
+            }
+            var bad = unknownKey(parsed);
+            if (bad !== null) return refuse(el, "names no such option: " + bad);
+            var wrong = nonNumber(parsed);
+            if (wrong !== null) return refuse(el, "needs a number for " + wrong);
+            return parsed;
+          }
+
+          // A misspelled key is the likeliest typo in a JSON object, and reading it as
+          // defaults is the silent no-op this attribute exists to remove.
+          function unknownKey(parsed) {
+            for (var key in parsed) {
+              if (OPTION_KEYS.indexOf(key) < 0) return key;
+            }
+            return null;
+          }
+
+          // A key with a value the shutter cannot use is the same silent no-op as a key it does
+          // not know: a non-numeric angle hides the smear, a non-numeric phase parks every copy
+          // at the timeline's start. JSON gives real numbers, so anything else is a typo.
+          function nonNumber(parsed) {
+            for (var i = 0; i < OPTION_KEYS.length; i++) {
+              var held = parsed[OPTION_KEYS[i]];
+              if (held === undefined) continue;
+              if (typeof held !== "number" || !Number.isFinite(held)) return OPTION_KEYS[i];
+            }
+            return null;
+          }
+
+          // A throw partway through an attach leaves an element blurred by nothing, so the copies
+          // go too, along with the observer that would otherwise keep walking a detached subtree
+          // on every resize of an element nothing blurs.
+          // The mark is what a second trigger reads, so it is the first thing to give back.
+          function unmark(els) {
+            for (var i = 0; i < els.length; i++) {
+              window._hfMbAttached.delete(els[i]);
+              window._hfMbTimeline.delete(els[i]);
+            }
+          }
+
+          function discard(state) {
+            for (var i = 0; i < state.length; i++) {
+              var s = state[i];
+              if (s.watch !== null) s.watch.disconnect();
+              if (s.group.parentNode !== null) s.group.parentNode.removeChild(s.group);
+            }
+          }
+
+          function refuse(el, why) {
+            window._hfMbSkipped.add(el);
+            console.warn("[motion-blur] " + SWEEP_ATTR + " " + why, el);
+            return null;
+          }
+
+          // An element belongs to the nearest composition above it, so a sub-composition's
+          // targets follow that sub-composition's own timeline.
+          function compositionOf(el) {
+            var host = el.closest("[data-composition-id]");
+            return host ? host.getAttribute("data-composition-id") : null;
+          }
+
+          // Anything else registered on the container is somebody else's bookkeeping: a
+          // timeline is the thing this snippet can seek and extend.
+          function isTimeline(value) {
+            return !!value && typeof value.time === "function" && typeof value.to === "function";
+          }
+
+          // Attached, or skipped as unparseable. Both are terminal, so a later trigger must not
+          // report or attach the element twice.
+          function handled(el) {
+            return window._hfMbAttached.has(el) || window._hfMbSkipped.has(el);
+          }
+
+          // The timeline registered for an element's own composition, or null. Read from the
+          // registry rather than taken from whoever wrote it, so every trigger agrees.
+          function timelineFor(el) {
+            var id = compositionOf(el);
+            if (id === null) return null;
+            var registry = window.__timelines;
+            var found = registry ? registry[id] : null;
+            return isTimeline(found) ? found : null;
+          }
+
+          // A marked element whose parent is not an Element has no target above it: the parent
+          // of a root is the Document, which has no `closest`.
+          function nestedInTarget(el) {
+            var parent = el.parentNode;
+            if (parent === null || typeof parent.closest !== "function") return false;
+            return parent.closest(SWEEP_SELECTOR) !== null;
+          }
+
+          // One owner of attaching one element. Answers whether the element still needs a trigger.
+          function claim(el) {
+            var tl = timelineFor(el);
+            if (handled(el)) {
+              var owner = window._hfMbTimeline.get(el);
+              // Re-registering a key with a DIFFERENT timeline leaves the copies driven by the one
+              // nobody seeks, which renders sharp and says nothing. Report it rather than guess.
+              var changed = tl !== null && owner !== undefined && owner !== tl;
+              if (changed && !window._hfMbWarned.has(el)) {
+                window._hfMbWarned.add(el);
+                console.warn(
+                  "[motion-blur] a second timeline registered for this element; the copies still follow the first",
+                  el,
+                );
+              }
+              return true;
+            }
+            // Its group would be inserted into the live outer element, so the outer target's
+            // style replay would walk a subtree its cursor no longer matches.
+            if (nestedInTarget(el)) {
+              refuse(el, "cannot blur a target inside another target; blur one of them");
+              return true;
+            }
+            var opts = sweepOptions(el);
+            if (opts === null) return true;
+            if (tl === null) return false;
+            window.attachMotionBlur(el, tl, opts);
+            return true;
+          }
+
+          // Returns the elements still waiting for their composition to register a timeline.
+          // The trap below runs this INSIDE the author's registration statement, so one bad
+          // target must not abort the rest of their composition script.
+          function sweep() {
+            var pending = [];
+            document.querySelectorAll(SWEEP_SELECTOR).forEach(function (el) {
+              try {
+                if (!claim(el)) pending.push(el);
+              } catch (e) {
+                window._hfMbSkipped.add(el);
+                console.warn("[motion-blur] could not blur this element: " + e, el);
+              }
+            });
+            return pending;
+          }
+
+          // Registering a timeline is the moment the author has finished building it, so trapping
+          // the write attaches before the renderer captures a frame. A microtask would be too
+          // early: it runs before the next `<script>` tag.
+          function registrationProxy(container) {
+            var proxy = new Proxy(container, {
+              set: function (target, key, value) {
+                target[key] = value;
+                if (typeof key === "string") sweep();
+                return true;
+              },
+            });
+            window._hfMbProxies.add(proxy);
+            return proxy;
+          }
+
+          function hookRegistration() {
+            var held = window.__timelines;
+            Object.defineProperty(window, "__timelines", {
+              configurable: true,
+              enumerable: true,
+              get: function () {
+                return held;
+              },
+              set: function (value) {
+                var container = !!value && typeof value === "object";
+                var fresh = container && !window._hfMbProxies.has(value);
+                held = fresh ? registrationProxy(value) : value;
+                if (fresh) sweep();
               },
-              0,
+            });
+            // A container assigned before this snippet ran is replayed through the setter, so a
+            // timeline already registered on it is swept too.
+            if (held !== undefined) window.__timelines = held;
+          }
+
+          // The trap above cannot see every registration: the runtime owns the registry object,
+          // wraps it per sub-composition, and mounts nested compositions asynchronously. So the
+          // registry is also POLLED, which needs no cooperation from whoever writes it.
+          function poll(ticks) {
+            var pending = sweep();
+            // The WHOLE budget, every time. Stopping the first tick nothing is pending kills the
+            // poll one tick into an ordinary page, which is before a late composition arrives.
+            if (ticks > 0) {
+              setTimeout(function () {
+                poll(ticks - 1);
+              }, POLL_MS);
+              return;
+            }
+            if (pending.length === 0) return;
+            var count = pending.length + " element(s) carry " + SWEEP_ATTR;
+            console.warn(
+              "[motion-blur] " + count + ", and no composition registered a timeline for them",
+              pending,
             );
-          };
+          }
+
+          if (!window._hfMbHooked) {
+            window._hfMbHooked = true;
+            hookRegistration();
+            poll(POLL_TICKS);
+          }
+          /* SHUTTER_SNIPPET_END */
 
           /* ── Timeline ─────────────────────────────────────────────── */
           var tl = gsap.timeline({ paused: true });
diff --git a/skills-manifest.json b/skills-manifest.json
index 18785d6fe5a..b344086f662 100644
--- a/skills-manifest.json
+++ b/skills-manifest.json
@@ -22,8 +22,8 @@
       "files": 26
     },
     "hyperframes-animation": {
-      "hash": "492f6f39edf2a8e5",
-      "files": 121
+      "hash": "479c716293a26531",
+      "files": 122
     },
     "hyperframes-audio": {
       "hash": "b39bac771e873eae",
diff --git a/skills/hyperframes-animation/SKILL.md b/skills/hyperframes-animation/SKILL.md
index 00aaaeed5c5..8571c100522 100644
--- a/skills/hyperframes-animation/SKILL.md
+++ b/skills/hyperframes-animation/SKILL.md
@@ -30,6 +30,7 @@ Blueprints live in `blueprints-index.md`. Each entry points to `blueprints/<id>.
 | Read one blueprint's full recipe                                               | `blueprints/<id>.md`                                |
 | Author a scene transition (CSS-driven, between two clips)                      | `transitions/overview.md`, `transitions/catalog.md` |
 | Look up a broader motion-design technique                                      | `techniques.md`                                     |
+| Motion blur — shutter smear on an element, and when not to use it              | `references/motion-blur.md`                         |
 | Analyze an existing composition's animation map                                | `scripts/animation-map.mjs`                         |
 | GSAP API — timeline / tweens / position parameters                             | `adapters/gsap.md`                                  |
 | GSAP — drop-in effect recipes                                                  | `rules/gsap-effects.md`                             |
diff --git a/skills/hyperframes-animation/references/motion-blur.md b/skills/hyperframes-animation/references/motion-blur.md
new file mode 100644
index 00000000000..483762c641f
--- /dev/null
+++ b/skills/hyperframes-animation/references/motion-blur.md
@@ -0,0 +1,133 @@
+# Motion blur — shutter smear on any animated element
+
+## Read this part before you blur anything
+
+Blur is not polish. It is the smear a real shutter leaves while the subject
+crosses the frame, so it only reads as correct when the subject crosses enough
+of the frame to have smeared. Applied to motion that was never fast enough, it
+reads as a soft, cheap render: the eye sees mush where it expected an edge.
+
+Do not blur:
+
+| Case                                             | Why                                                                                                    | Do instead                          |
+| ------------------------------------------------ | ------------------------------------------------------------------------------------------------------ | ----------------------------------- |
+| Travel under about one element-width per frame   | The copies pile up inside the element's own silhouette, so the result is a softer element, not a smear | Leave it sharp                      |
+| A fade, a color change, a blur-in, a filter beat | Nothing reaches `transform`, so there is no trajectory to integrate and no smear to draw               | Leave it sharp                      |
+| Text meant to be read at that moment             | A smeared word is an unreadable word, which is usually the opposite of the brief                       | Blur the approach, land sharp, hold |
+| A slow drift, a parallax layer, a breathing loop | Below the half-pixel deadband it renders sharp anyway; above it, it looks like a mistake               | Leave it sharp                      |
+| The whole scene, or a container of many elements | Cost is the copies of an entire subtree, and a container that never moves smears nothing inside it     | Point it at the element that moves  |
+
+Blur the beats that snap: a slam, a whip, a hard cut in position, a spin, a
+scale punch. One to three of them in a composition, not every tween.
+
+## Two routes, and they are not interchangeable
+
+| Route                                   | What it is                                                                                                       | Use when                                                                                                             |
+| --------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| The `motion-blur` registry component    | A DOM shutter synthesised in the page: N+1 additively blended copies of the element along its sampled trajectory | You want the smear visible in the preview, on selected elements, authored per element                                |
+| The engine's `motionBlur` render option | The renderer integrates real sub-frame samples of the whole frame                                                | You want every moving thing smeared, including canvas, video and transformed ancestors, and only in the final render |
+
+The component smears what a `transform` can express, on the elements you mark.
+The engine smears the frame. The component is the one an agent authors; the
+engine option is a render-time decision and shows nothing in a preview.
+
+## The contract: one attribute
+
+Paste the component's snippet into the composition, then mark the element:
+
+```html
+<div id="root" data-composition-id="hero" data-duration="4" data-fps="30">
+  <div id="slam" data-hf-motion-blur></div>
+  <div id="title" data-hf-motion-blur='{"shutterAngle": 360}'></div>
+</div>
+```
+
+Nothing to call and no ordering to get right. A marked element is attached as
+soon as its composition's timeline is registered, and the registry is also
+polled for about eight seconds after load, so a composition that mounts
+asynchronously is picked up too. An element takes the timeline registered under
+the `data-composition-id` of its nearest ancestor carrying that attribute, so a
+sub-composition's targets follow that sub-composition.
+
+Empty attribute means defaults. Any other value must parse as a JSON object, so
+it needs double quotes on the keys. A value that parses to something else,
+`null` or a bare number, warns and is skipped rather than quietly taken as
+defaults.
+
+`attachMotionBlur(target, timeline, options)` is for an element created later
+than that window. It has an ordering contract, after every tween so the
+timeline's final duration is known, and getting it wrong is silent. For markup
+that is already in the document, use the attribute.
+
+## Options
+
+| Option            | Default                                                      | Meaning                                                                                                                                                |
+| ----------------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `shutterAngle`    | 720                                                          | Degrees of the frame interval the shutter is open. 720 is two frames, measured off a real After Effects export. 360 is one frame. 0 disables the smear |
+| `shutterPhase`    | -360                                                         | Degrees the window start sits from the frame time. -360 centres the window on the frame                                                                |
+| `samplesPerFrame` | 16                                                           | Sub-intervals of the window, so this many plus one copies, each at 1 over this many opacity. Max 64                                                    |
+| `fps`             | the `data-fps` of the target's own composition root, else 30 | Composition frame rate. Pass it explicitly when rendering with an fps override                                                                         |
+
+A key that is none of these four, and a value that is not a finite number, are
+both refused by name rather than read as defaults. `{"shutterAngle": "720deg"}`
+is a refusal, not a 720 degree shutter.
+
+There is no axis, no strength and no radius. The smear is the trajectory,
+integrated; its extent is speed times shutter time and is not a free parameter.
+A template that passes `axis`, `blurMax` or `blurScale` carries an older fork of
+this snippet and its options do nothing in the current one.
+
+## The failure modes are all silent
+
+Every one of these renders a plausible-looking sharp element and reports
+nothing except where noted:
+
+| Symptom                                                                  | Cause                                                                                                               | Fix                                                                                  |
+| ------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
+| Console warns that no composition registered a timeline for an element   | The element is outside every `data-composition-id`, or that composition never registers a timeline                  | Put it inside the composition's root, or register the timeline                       |
+| Console warns the attribute is not JSON                                  | Single quotes, unquoted keys, a trailing comma                                                                      | Double-quoted JSON, or an empty attribute for defaults                               |
+| Console warns the attribute is not a JSON object                         | `null`, a bare number, a quoted string, an array                                                                    | An object, or an empty attribute for defaults                                        |
+| Console warns the attribute names no such option                         | A misspelled key, for example `samplesperframe`                                                                     | Use one of the four names above, case-sensitive                                      |
+| Console warns the attribute needs a number for an option                 | A quoted or unit-suffixed value, for example `"720deg"`                                                             | A bare JSON number                                                                   |
+| Console warns it cannot blur a target inside another target              | Both an element and one of its ancestors carry the attribute                                                        | Mark one of them, the one that moves                                                 |
+| Console warns one call cannot blur compositions at different frame rates | One `attachMotionBlur` call named elements in two compositions whose `data-fps` differ                              | One call per composition                                                             |
+| Console warns a second timeline registered for an element                | The same `data-composition-id` key was registered twice with different timelines; the copies still follow the first | Register once per composition                                                        |
+| No smear, no warning                                                     | The beat animates `left`, `top`, `width` or `height`; the snippet reads the resolved `transform`                    | Animate `x`, `y`, `scale`, `rotation`                                                |
+| No smear on a container's children                                       | The marked element does not move; its children do                                                                   | Mark the elements that move                                                          |
+| A smear that lags the element                                            | A transformed ancestor is doing the moving                                                                          | Move the element itself, or use the engine route                                     |
+| Blur only on the first frame, or never in a preview                      | The host never seeks the timeline                                                                                   | HyperFrames seeks every frame; a paused timeline nobody seeks shows nothing          |
+| A smear left behind in the old parent                                    | The target was reparented after attaching; the group stays where it was inserted and is never moved                 | Do not reparent a blurred element. Animate `x`/`y` instead, or attach after the move |
+| A selector stops matching after attaching                                | A copy keeps the element's classes, because a class rule is the only thing that can style a copy's pseudo-elements  | Address the element by id or by reference, never by a class a copy also carries      |
+
+## Cost
+
+Each target costs N+1 copies of its whole subtree. Those are restyled on attach
+and on resize, and re-transformed every frame, and the timeline is seeked N+1
+times per frame to sample the trajectory. At the default 16 that is 17 copies
+and 17 seeks per target per frame. Three marked elements is fine. Thirty is a
+different render.
+
+Drop `samplesPerFrame` before you drop the effect: 8 halves the cost and the
+staircase is still smooth on a fast beat.
+
+## The numbers, so you can argue with them
+
+The defaults are measured against a 1920x1080 30 fps After Effects export of
+translating text, not chosen. In that export the outermost trailing copy sits
+exactly at the previous frame's position and the outermost leading copy exactly
+at the next frame's, with 8 evenly spaced copies between on each side: a window
+of two frames, phase minus one frame, 16 sub-intervals. The staircase across a
+stroke steps by 0.063 plus or minus 0.002 of the sharp text intensity, a flat
+1/16 per copy with no taper toward the window edges. Triangle weighting scores
+1.6 dB worse against the same export.
+
+Per-beat PSNR against that reference, sharp render versus this component:
+translate +3.38 dB, scale +0.62, rotate X +0.43, rotate Y +0.84, rotate Z
++1.15. A beat that only scales or only rotates smears, which the earlier
+SVG-filter stage could not do.
+
+## See also
+
+`../../registry/components/motion-blur/motion-blur.html` is the snippet and its
+full header. `shutter-slam` is the same model as an installable component: the
+After Effects reference case, six beats, elastic to the container.