@fynd-design-engineering/fynd-one-v2 3.4.61 → 3.4.63

package/dist/playbook-2026/index.js

@@ -1 +1,536 @@
-"use strict";(()=>{document.addEventListener("DOMContentLoaded",()=>{let o=window.gsap;if(!o){console.error("ERROR: GSAP not loaded!");return}let g=window.ScrollTrigger;g&&o.registerPlugin(g);let P=document.querySelectorAll("[entity-error-connector]"),b=document.querySelectorAll("[entity-success-connector]"),w=document.querySelectorAll("[entity-name]");if(w.length===0){console.error("ERROR: No entities found with [entity-name] attribute");return}let u=document.querySelector("[playbook='store']"),d=document.querySelector("[playbook='store-foundation']"),p=document.querySelector("[playbook='foundation-base']"),x=document.querySelector("[playbook='spacer']"),E=document.querySelector("[playbook='title-1']"),f=document.querySelector("[playbook='title-2']"),y=document.querySelector("[playbook='title-3']"),m=document.querySelector("[playbook='counter']"),L=document.querySelector("[playbook='counter-text']"),S=document.querySelector("[playbook='grid']"),v=document.querySelector("[playbook='question']"),F=document.querySelector("[playbook='button']"),A={value:2341100};L&&(L.textContent="2341700");let C=null,G=()=>{C&&C.kill(),C=o.timeline({repeat:-1}),L&&C.to(A,{value:2341728,duration:20,ease:"power2.out",onUpdate:()=>{L.textContent=Math.floor(A.value).toLocaleString()}}).set(A,{value:2341100})},k=[];if(w.forEach(e=>{let n=e.getAttribute("entity-name");if(!n)return;let a=Array.from(b).find(s=>s.getAttribute("entity-success-connector")===n),t=Array.from(P).find(s=>s.getAttribute("entity-error-connector")===n);if(a){let s=a.querySelector("path"),I=t?.querySelector("path")||null,N=Array.from(e.querySelectorAll('[entity-state="success"]')),O=Array.from(e.querySelectorAll('[entity-state="error"]'));s&&k.push({name:e,connector:a,path:s,errorConnector:t||null,errorPath:I,successState:N[0]||null,successStates:N,errorStates:O,id:n})}}),k.length===0){console.error("ERROR: No pairs created!");return}console.log(`\u2713 Created ${k.length} animation pairs`);let c=e=>{let n=window.innerWidth,a={storeFoundation:{mobile:{scale:3.8,x:"-53px",y:"-24px"},tablet:{scale:3,x:"0px",y:"-100px"},desktop:{scale:2.8,x:"-400px",y:"-50px"}},grid:{mobile:{scale:1.5,x:"30px"},tablet:{scale:1.8,x:"45px"},desktop:{scale:2.1,x:"60px"}},counter:{mobile:{scale:1,y:"-100px"},tablet:{scale:1.1,y:"-180px"},desktop:{scale:1.2,y:"-100px"}},question:{mobile:{scale:1,y:"-100px"},tablet:{scale:1.1,y:"-180px"},desktop:{scale:1.2,y:"-100px"}},spcerSet:{mobile:{height:"20px"},tablet:{height:"100px"},desktop:{height:"240px"}},storeAndStoreFoundationInitial:{mobile:{scale:3,x:"-40px",y:"20px"},tablet:{scale:2,x:"0px",y:"0px"},desktop:{scale:1.5,x:"0px",y:"0px"}},storeAndStoreFoundationFinal:{mobile:{scale:1,x:"0px",y:"0px"},tablet:{scale:1,x:"0px",y:"0px"},desktop:{scale:1,x:"0px",y:"0px"}}},t=()=>n<480?"mobile":n<992?"tablet":"desktop";return a[e]?.[t()]||{}},l=k.sort(()=>Math.random()-.5),h=l.map(e=>e.path).filter(Boolean),T=l.map(e=>e.name).filter(Boolean),W=l.flatMap(e=>e.successStates);o.set([...P,...b],{opacity:0}),u&&d&&o.set([u,d],{...c("storeAndStoreFoundationInitial")}),p&&o.set(p,{opacity:0}),w.length>0&&o.set(w,{opacity:0,scale:.5}),x&&o.set(x,{...c("spcerSet")}),S&&o.set(S,{scale:2}),v&&o.set(v,{...c("question")}),m&&o.set(m,{...c("counter")}),E&&o.set(E,{y:0}),f&&o.set(f,{y:40,opacity:0,filter:"blur(10px)"}),y&&o.set(y,{y:40,opacity:0,filter:"blur(10px)"}),l.forEach(({path:e,errorPath:n,successStates:a,errorStates:t})=>{if(e){try{let s=e.getTotalLength();o.set(e,{strokeDasharray:s,strokeDashoffset:s})}catch{console.warn("WARNING: Could not get SVG path length")}n&&o.set(n,{opacity:0}),a.forEach(s=>{s&&o.set(s,{opacity:0})}),t.forEach(s=>{s&&o.set(s,{opacity:0})})}});let r=o.timeline({scrollTrigger:{trigger:"#scroll",start:"top top",end:"+=5000vh",scrub:2.5,pin:!0,fastScrollSensitivity:1}});u&&d&&r.to([u,d],{...c("storeAndStoreFoundationFinal")}),x&&r.to(x,{height:"0px",duration:.4,ease:"power3.out"},"<"),S&&r.to(S,{scale:1,duration:.4,ease:"power3.out"},"<"),p&&r.to(p,{opacity:1,duration:.2,ease:"power3.out"},"-=0.1"),b.length>0&&r.set(b,{opacity:1}),h.length>0&&r.to(h,{strokeDashoffset:0,duration:.8,ease:"power3.out"},"+=0.05"),T.length>0&&r.to(T,{opacity:1,scale:1,duration:.2,ease:"power3.out",delay:.2},"-=0.6"),W.length>0&&r.to(W,{opacity:1,duration:.2,ease:"power3.out"},"-=0.6"),r.add(()=>{console.log("\u2705 Step 4 Complete: All pairs set to SUCCESS state"),l.forEach(e=>{o.set(e.path,{opacity:1}),o.set(e.connector,{opacity:1}),e.successStates.forEach(n=>{o.set(n,{opacity:1})}),e.errorPath&&o.set(e.errorPath,{opacity:0}),e.errorConnector&&o.set(e.errorConnector,{opacity:0}),e.errorStates.forEach(n=>{o.set(n,{opacity:0})})})},"-=0.2"),E&&f&&r.to(E,{y:-40,opacity:0,filter:"blur(10px)",duration:.3,ease:"sine.inOut"}).to(f,{y:0,opacity:1,filter:"blur(0px)",duration:.3,ease:"sine.inOut"},"-=0.1"),r.addLabel("beforeWaves"),r.add(()=>{console.log("\u{1F3AC} Initializing all pairs to SUCCESS state"),l.forEach(e=>{o.set(e.path,{opacity:1}),e.errorPath&&o.set(e.errorPath,{opacity:0}),e.errorConnector&&o.set(e.errorConnector,{opacity:0}),e.successStates.forEach(n=>o.set(n,{opacity:1})),e.errorStates.forEach(n=>o.set(n,{opacity:0}))})},"beforeWaves"),r.addLabel("step6Start","+=0.2");let i=l.filter(e=>e.errorConnector&&e.errorPath);i.length===0?console.warn("WARNING: No pairs with error states found"):console.log(`\u2713 Found ${i.length} pairs with error states`);let q=[["content","inventory"],["products","delivery"],["returns","promises"]],H=e=>{!e||!e.path||(o.to(e.path,{opacity:0,duration:.3,ease:"power3.in"}),e.errorPath&&o.to(e.errorPath,{opacity:1,duration:.3,ease:"power3.out"}),e.errorConnector&&o.to(e.errorConnector,{opacity:1,duration:.15,ease:"power3.out"}),e.successStates&&e.successStates.length>0&&o.to(e.successStates,{opacity:0,duration:.3,ease:"power3.in"}),e.errorStates&&e.errorStates.length>0&&o.to(e.errorStates,{opacity:1,duration:.3,ease:"power3.out"}))},M=e=>{!e||!e.path||(e.errorPath&&o.to(e.errorPath,{opacity:0,duration:.3,ease:"power3.in"}),e.errorConnector&&o.to(e.errorConnector,{opacity:0,duration:.15,ease:"power3.in"}),o.to(e.path,{opacity:1,duration:.3,ease:"power3.out"}),e.errorStates&&e.errorStates.length>0&&o.to(e.errorStates,{opacity:0,duration:.3,ease:"power3.in"}),e.successStates&&e.successStates.length>0&&o.to(e.successStates,{opacity:1,duration:.3,ease:"power3.out"}))};i.length>0&&(r.addLabel("wave1Start","step6Start"),r.add(()=>{console.log("\u{1F30A} Wave 1 triggered!");let e=q[0],n=i.filter(t=>e.includes(t.id.toLowerCase())),a=i.filter(t=>!e.includes(t.id.toLowerCase()));console.log(`  Failing: ${n.map(t=>t.id).join(", ")}`),console.log(`  Succeeding: ${a.map(t=>t.id).join(", ")}`),n.forEach(t=>H(t)),a.forEach(t=>M(t))},"wave1Start"),r.to({},{duration:.5},"wave1Start"),r.addLabel("wave2Start","+=0.2"),r.add(()=>{console.log("\u{1F30A} Wave 2 triggered!");let e=q[1],n=i.filter(t=>e.includes(t.id.toLowerCase())),a=i.filter(t=>!e.includes(t.id.toLowerCase()));console.log(`  Failing: ${n.map(t=>t.id).join(", ")}`),console.log(`  Succeeding: ${a.map(t=>t.id).join(", ")}`),n.forEach(t=>H(t)),a.forEach(t=>M(t))},"wave2Start"),r.to({},{duration:.5},"wave2Start"),r.addLabel("wave3Start","+=0.2"),r.add(()=>{console.log("\u{1F30A} Wave 3 triggered!");let e=q[2],n=i.filter(t=>e.includes(t.id.toLowerCase())),a=i.filter(t=>!e.includes(t.id.toLowerCase()));console.log(`  Failing: ${n.map(t=>t.id).join(", ")}`),console.log(`  Succeeding: ${a.map(t=>t.id).join(", ")}`),n.forEach(t=>H(t)),a.forEach(t=>M(t))},"wave3Start"),r.to({},{duration:.5},"wave3Start"),r.addLabel("afterWaves","+=0.2"),r.add(()=>{console.log("\u2705 All waves complete! Making all pairs SUCCESS"),i.forEach(e=>{M(e)})},"afterWaves"),f&&y&&r.to(f,{y:-40,opacity:0,filter:"blur(10px)",duration:.3,ease:"sine.inOut"},"wave3Start").to(y,{y:0,opacity:1,filter:"blur(0px)",duration:.3,ease:"sine.inOut"},"wave3Start"));let R=i.flatMap(e=>e.successStates);R.length>0&&r.to(R,{opacity:0,duration:.1,ease:"power3.in"},"afterWaves+=0.2"),T.length>0&&r.to(T,{opacity:0,scale:.3,duration:.1,ease:"power3.in"},"<"),h.length>0&&r.to(h,{strokeDashoffset:e=>{if(h[e])try{return h[e].getTotalLength()}catch{return 0}return 0},duration:.3,ease:"power3.in"},"-=0.05"),u&&p&&r.to([u,p],{scale:0,x:"140px",y:"-20px",opacity:0,duration:.1,ease:"power3.in"}),y&&r.to(y,{opacity:0,filter:"blur(5px)",duration:.1,ease:"power3.in"},"<"),d&&r.to(d,{...c("storeFoundation"),opacity:1,duration:.2,ease:"power3.in"},"<"),S&&r.to(S,{...c("grid"),duration:.3,ease:"power3.out"},"<"),m&&(r.to(m,{opacity:1,filter:"blur(0px)",duration:.3,ease:"power3.out",onStart:G},"-=0.1"),r.to(m,{opacity:0,filter:"blur(10px)",scale:1,delay:.5,duration:.2,ease:"power3.in"})),v&&r.to(v,{opacity:1,filter:"blur(0px)",duration:.2,scale:1.2,ease:"power3.out"}),F&&r.to(F,{scale:1.01,duration:1,ease:"power3.out"},"-=0.2"),g.refresh(),console.log("\u2713 Animation timeline complete!"),window.addEventListener("resize",()=>{g.refresh()})});})();
+"use strict";
+(() => {
+  // bin/live-reload.js
+  if (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1") {
+    new EventSource(`${"http://localhost:3000"}/esbuild`).addEventListener(
+      "change",
+      () => location.reload()
+    );
+  } else {
+  }
+
+  // src/playbook-2026/index.ts
+  document.addEventListener("DOMContentLoaded", () => {
+    const gsap = window.gsap;
+    if (!gsap) {
+      console.error("ERROR: GSAP not loaded!");
+      return;
+    }
+    const ScrollTrigger = window.ScrollTrigger;
+    if (ScrollTrigger) {
+      gsap.registerPlugin(ScrollTrigger);
+    }
+    const errorConnectors = document.querySelectorAll("[entity-error-connector]");
+    const successConnectors = document.querySelectorAll("[entity-success-connector]");
+    const entityNames = document.querySelectorAll("[entity-name]");
+    if (entityNames.length === 0) {
+      console.error("ERROR: No entities found with [entity-name] attribute");
+      return;
+    }
+    const store = document.querySelector("[playbook='store']");
+    const storeFoundation = document.querySelector("[playbook='store-foundation']");
+    const foundationBase = document.querySelector("[playbook='foundation-base']");
+    const spacer = document.querySelector("[playbook='spacer']");
+    const title1 = document.querySelector("[playbook='title-1']");
+    const title2 = document.querySelector("[playbook='title-2']");
+    const title3 = document.querySelector("[playbook='title-3']");
+    const counter = document.querySelector("[playbook='counter']");
+    const counterText = document.querySelector("[playbook='counter-text']");
+    const grid = document.querySelector("[playbook='grid']");
+    const question = document.querySelector("[playbook='question']");
+    const button = document.querySelector("[playbook='button']");
+    const counterValue = { value: 2341100 };
+    if (counterText) {
+      counterText.textContent = "2341700";
+    }
+    let counterAnimation = null;
+    const startCounterAnimation = () => {
+      if (counterAnimation) counterAnimation.kill();
+      counterAnimation = gsap.timeline({ repeat: -1 });
+      if (counterText) {
+        counterAnimation.to(counterValue, {
+          value: 2341728,
+          duration: 20,
+          ease: "power2.out",
+          onUpdate: () => {
+            counterText.textContent = Math.floor(counterValue.value).toLocaleString();
+          }
+        }).set(counterValue, { value: 2341100 });
+      }
+    };
+    const pairs = [];
+    entityNames.forEach((nameEl) => {
+      const id = nameEl.getAttribute("entity-name");
+      if (!id) return;
+      const matchingSuccessConnector = Array.from(successConnectors).find(
+        (connector) => connector.getAttribute("entity-success-connector") === id
+      );
+      const matchingErrorConnector = Array.from(errorConnectors).find(
+        (connector) => connector.getAttribute("entity-error-connector") === id
+      );
+      if (matchingSuccessConnector) {
+        const successPath = matchingSuccessConnector.querySelector("path");
+        const errorPath = matchingErrorConnector?.querySelector("path") || null;
+        const successStates = Array.from(nameEl.querySelectorAll('[entity-state="success"]'));
+        const errorStates = Array.from(nameEl.querySelectorAll('[entity-state="error"]'));
+        if (successPath) {
+          pairs.push({
+            name: nameEl,
+            connector: matchingSuccessConnector,
+            path: successPath,
+            errorConnector: matchingErrorConnector || null,
+            errorPath,
+            successState: successStates[0] || null,
+            successStates,
+            errorStates,
+            id
+          });
+        }
+      }
+    });
+    if (pairs.length === 0) {
+      console.error("ERROR: No pairs created!");
+      return;
+    }
+    console.log(`\u2713 Created ${pairs.length} animation pairs`);
+    const getBreakpointValues = (breakpointName) => {
+      const width = window.innerWidth;
+      const breakpoints = {
+        storeFoundation: {
+          mobile: { scale: 3.8, x: "-53px", y: "-24px" },
+          tablet: { scale: 3, x: "0px", y: "-100px" },
+          desktop: { scale: 2.8, x: "-400px", y: "-50px" }
+        },
+        grid: {
+          mobile: { scale: 1.5, x: "30px" },
+          tablet: { scale: 1.8, x: "45px" },
+          desktop: { scale: 2.1, x: "60px" }
+        },
+        counter: {
+          mobile: { scale: 1, y: "-100px" },
+          tablet: { scale: 1.1, y: "-180px" },
+          desktop: { scale: 1.2, y: "-100px" }
+        },
+        question: {
+          mobile: { scale: 1, y: "-100px" },
+          tablet: { scale: 1.1, y: "-180px" },
+          desktop: { scale: 1.2, y: "-100px" }
+        },
+        spcerSet: {
+          mobile: { height: "20px" },
+          tablet: { height: "100px" },
+          desktop: { height: "240px" }
+        },
+        storeAndStoreFoundationInitial: {
+          mobile: { scale: 3, x: "-40px", y: "20px" },
+          tablet: { scale: 2, x: "0px", y: "0px" },
+          desktop: { scale: 1.5, x: "0px", y: "0px" }
+        },
+        storeAndStoreFoundationFinal: {
+          mobile: { scale: 1, x: "0px", y: "0px" },
+          tablet: { scale: 1, x: "0px", y: "0px" },
+          desktop: { scale: 1, x: "0px", y: "0px" }
+        }
+        // Add more element configs as needed
+      };
+      const getDeviceType = () => {
+        if (width < 480) return "mobile";
+        if (width < 992) return "tablet";
+        return "desktop";
+      };
+      return breakpoints[breakpointName]?.[getDeviceType()] || {};
+    };
+    const shuffledPairs = pairs.sort(() => Math.random() - 0.5);
+    const allPaths = shuffledPairs.map((p) => p.path).filter(Boolean);
+    const allNames = shuffledPairs.map((p) => p.name).filter(Boolean);
+    const allSuccessStatesStep4 = shuffledPairs.flatMap((p) => p.successStates);
+    gsap.set([...errorConnectors, ...successConnectors], { opacity: 0 });
+    if (store && storeFoundation) gsap.set([store, storeFoundation], { ...getBreakpointValues("storeAndStoreFoundationInitial") });
+    if (foundationBase) gsap.set(foundationBase, { opacity: 0 });
+    if (entityNames.length > 0) gsap.set(entityNames, { opacity: 0, scale: 0.5 });
+    if (spacer) gsap.set(spacer, { ...getBreakpointValues("spcerSet") });
+    if (grid) gsap.set(grid, { scale: 2 });
+    if (question) gsap.set(question, { ...getBreakpointValues("question") });
+    if (counter) gsap.set(counter, { ...getBreakpointValues("counter") });
+    if (title1) gsap.set(title1, { y: 0 });
+    if (title2) gsap.set(title2, { y: 40, opacity: 0, filter: "blur(10px)" });
+    if (title3) gsap.set(title3, { y: 40, opacity: 0, filter: "blur(10px)" });
+    shuffledPairs.forEach(({ path, errorPath, successStates, errorStates }) => {
+      if (!path) return;
+      try {
+        const length = path.getTotalLength();
+        gsap.set(path, {
+          strokeDasharray: length,
+          strokeDashoffset: length
+        });
+      } catch (e) {
+        console.warn("WARNING: Could not get SVG path length");
+      }
+      if (errorPath) gsap.set(errorPath, { opacity: 0 });
+      successStates.forEach((state) => {
+        if (state) gsap.set(state, { opacity: 0 });
+      });
+      errorStates.forEach((state) => {
+        if (state) gsap.set(state, { opacity: 0 });
+      });
+    });
+    const tl = gsap.timeline({
+      scrollTrigger: {
+        trigger: "#scroll",
+        start: "top top",
+        end: "+=5000vh",
+        scrub: 2.5,
+        pin: true,
+        fastScrollSensitivity: 1
+      }
+    });
+    if (store && storeFoundation) {
+      tl.to([store, storeFoundation], { ...getBreakpointValues("storeAndStoreFoundationFinal") });
+    }
+    if (spacer) {
+      tl.to(spacer, {
+        height: "0px",
+        duration: 0.4,
+        ease: "power3.out"
+      }, "<");
+    }
+    if (grid) {
+      tl.to(grid, {
+        scale: 1,
+        duration: 0.4,
+        ease: "power3.out"
+      }, "<");
+    }
+    if (foundationBase) {
+      tl.to(foundationBase, {
+        opacity: 1,
+        duration: 0.2,
+        ease: "power3.out"
+      }, "-=0.1");
+    }
+    if (successConnectors.length > 0) {
+      tl.set(successConnectors, { opacity: 1 });
+    }
+    if (allPaths.length > 0) {
+      tl.to(allPaths, {
+        strokeDashoffset: 0,
+        duration: 0.8,
+        // Increased from 0.3 to see full path
+        ease: "power3.out"
+      }, "+=0.05");
+    }
+    if (allNames.length > 0) {
+      tl.to(allNames, {
+        opacity: 1,
+        scale: 1,
+        duration: 0.2,
+        ease: "power3.out",
+        delay: 0.2
+      }, "-=0.6");
+    }
+    if (allSuccessStatesStep4.length > 0) {
+      tl.to(allSuccessStatesStep4, {
+        opacity: 1,
+        duration: 0.2,
+        ease: "power3.out"
+      }, "-=0.6");
+    }
+    tl.add(() => {
+      console.log("\u2705 Step 4 Complete: All pairs set to SUCCESS state");
+      shuffledPairs.forEach((pair) => {
+        gsap.set(pair.path, { opacity: 1 });
+        gsap.set(pair.connector, { opacity: 1 });
+        pair.successStates.forEach((state) => {
+          gsap.set(state, { opacity: 1 });
+        });
+        if (pair.errorPath) {
+          gsap.set(pair.errorPath, { opacity: 0 });
+        }
+        if (pair.errorConnector) {
+          gsap.set(pair.errorConnector, { opacity: 0 });
+        }
+        pair.errorStates.forEach((state) => {
+          gsap.set(state, { opacity: 0 });
+        });
+      });
+    }, "-=0.2");
+    if (title1 && title2) {
+      tl.to(title1, {
+        y: -40,
+        opacity: 0,
+        filter: "blur(10px)",
+        duration: 0.3,
+        ease: "sine.inOut"
+      }).to(title2, {
+        y: 0,
+        opacity: 1,
+        filter: "blur(0px)",
+        duration: 0.3,
+        ease: "sine.inOut"
+      }, "-=0.1");
+    }
+    tl.addLabel("beforeWaves");
+    tl.add(() => {
+      console.log("\u{1F3AC} Initializing all pairs to SUCCESS state");
+      shuffledPairs.forEach((pair) => {
+        gsap.set(pair.path, { opacity: 1 });
+        if (pair.errorPath) gsap.set(pair.errorPath, { opacity: 0 });
+        if (pair.errorConnector) gsap.set(pair.errorConnector, { opacity: 0 });
+        pair.successStates.forEach((state) => gsap.set(state, { opacity: 1 }));
+        pair.errorStates.forEach((state) => gsap.set(state, { opacity: 0 }));
+      });
+    }, "beforeWaves");
+    tl.addLabel("step6Start", "+=0.2");
+    const pairsWithErrors = shuffledPairs.filter((p) => p.errorConnector && p.errorPath);
+    if (pairsWithErrors.length === 0) {
+      console.warn("WARNING: No pairs with error states found");
+    } else {
+      console.log(`\u2713 Found ${pairsWithErrors.length} pairs with error states`);
+    }
+    const failurePatterns = [
+      ["content", "inventory"],
+      // Wave 1
+      ["products", "delivery"],
+      // Wave 2
+      ["returns", "promises"]
+      // Wave 3
+    ];
+    const animateFailure = (pair) => {
+      if (!pair || !pair.path) return;
+      gsap.to(pair.path, {
+        opacity: 0,
+        duration: 0.3,
+        ease: "power3.in"
+      });
+      if (pair.errorPath) {
+        gsap.to(pair.errorPath, {
+          opacity: 1,
+          duration: 0.3,
+          ease: "power3.out"
+        });
+      }
+      if (pair.errorConnector) {
+        gsap.to(pair.errorConnector, {
+          opacity: 1,
+          duration: 0.15,
+          ease: "power3.out"
+        });
+      }
+      if (pair.successStates && pair.successStates.length > 0) {
+        gsap.to(pair.successStates, {
+          opacity: 0,
+          duration: 0.3,
+          ease: "power3.in"
+        });
+      }
+      if (pair.errorStates && pair.errorStates.length > 0) {
+        gsap.to(pair.errorStates, {
+          opacity: 1,
+          duration: 0.3,
+          ease: "power3.out"
+        });
+      }
+    };
+    const animateSuccess = (pair) => {
+      if (!pair || !pair.path) return;
+      if (pair.errorPath) {
+        gsap.to(pair.errorPath, {
+          opacity: 0,
+          duration: 0.3,
+          ease: "power3.in"
+        });
+      }
+      if (pair.errorConnector) {
+        gsap.to(pair.errorConnector, {
+          opacity: 0,
+          duration: 0.15,
+          ease: "power3.in"
+        });
+      }
+      gsap.to(pair.path, {
+        opacity: 1,
+        duration: 0.3,
+        ease: "power3.out"
+      });
+      if (pair.errorStates && pair.errorStates.length > 0) {
+        gsap.to(pair.errorStates, {
+          opacity: 0,
+          duration: 0.3,
+          ease: "power3.in"
+        });
+      }
+      if (pair.successStates && pair.successStates.length > 0) {
+        gsap.to(pair.successStates, {
+          opacity: 1,
+          duration: 0.3,
+          ease: "power3.out"
+        });
+      }
+    };
+    if (pairsWithErrors.length > 0) {
+      tl.addLabel("wave1Start", "step6Start");
+      tl.add(() => {
+        console.log(`\u{1F30A} Wave 1 triggered!`);
+        const failureIds = failurePatterns[0];
+        const toFail = pairsWithErrors.filter((p) => failureIds.includes(p.id.toLowerCase()));
+        const toSucceed = pairsWithErrors.filter((p) => !failureIds.includes(p.id.toLowerCase()));
+        console.log(`  Failing: ${toFail.map((p) => p.id).join(", ")}`);
+        console.log(`  Succeeding: ${toSucceed.map((p) => p.id).join(", ")}`);
+        toFail.forEach((pair) => animateFailure(pair));
+        toSucceed.forEach((pair) => animateSuccess(pair));
+      }, "wave1Start");
+      tl.to({}, { duration: 0.5 }, "wave1Start");
+      tl.addLabel("wave2Start", "+=0.2");
+      tl.add(() => {
+        console.log(`\u{1F30A} Wave 2 triggered!`);
+        const failureIds = failurePatterns[1];
+        const toFail = pairsWithErrors.filter((p) => failureIds.includes(p.id.toLowerCase()));
+        const toSucceed = pairsWithErrors.filter((p) => !failureIds.includes(p.id.toLowerCase()));
+        console.log(`  Failing: ${toFail.map((p) => p.id).join(", ")}`);
+        console.log(`  Succeeding: ${toSucceed.map((p) => p.id).join(", ")}`);
+        toFail.forEach((pair) => animateFailure(pair));
+        toSucceed.forEach((pair) => animateSuccess(pair));
+      }, "wave2Start");
+      tl.to({}, { duration: 0.5 }, "wave2Start");
+      tl.addLabel("wave3Start", "+=0.2");
+      tl.add(() => {
+        console.log(`\u{1F30A} Wave 3 triggered!`);
+        const failureIds = failurePatterns[2];
+        const toFail = pairsWithErrors.filter((p) => failureIds.includes(p.id.toLowerCase()));
+        const toSucceed = pairsWithErrors.filter((p) => !failureIds.includes(p.id.toLowerCase()));
+        console.log(`  Failing: ${toFail.map((p) => p.id).join(", ")}`);
+        console.log(`  Succeeding: ${toSucceed.map((p) => p.id).join(", ")}`);
+        toFail.forEach((pair) => animateFailure(pair));
+        toSucceed.forEach((pair) => animateSuccess(pair));
+      }, "wave3Start");
+      tl.to({}, { duration: 0.5 }, "wave3Start");
+      tl.addLabel("afterWaves", "+=0.2");
+      tl.add(() => {
+        console.log("\u2705 All waves complete! Making all pairs SUCCESS");
+        pairsWithErrors.forEach((pair) => {
+          animateSuccess(pair);
+        });
+      }, "afterWaves");
+      if (title2 && title3) {
+        tl.to(title2, {
+          y: -40,
+          opacity: 0,
+          filter: "blur(10px)",
+          duration: 0.3,
+          ease: "sine.inOut"
+        }, "wave3Start").to(title3, {
+          y: 0,
+          opacity: 1,
+          filter: "blur(0px)",
+          duration: 0.3,
+          ease: "sine.inOut"
+        }, "wave3Start");
+      }
+    }
+    const allSuccessStatesStep7 = pairsWithErrors.flatMap((p) => p.successStates);
+    if (allSuccessStatesStep7.length > 0) {
+      tl.to(allSuccessStatesStep7, {
+        opacity: 0,
+        duration: 0.1,
+        ease: "power3.in"
+      }, "afterWaves+=0.2");
+    }
+    if (allNames.length > 0) {
+      tl.to(allNames, {
+        opacity: 0,
+        scale: 0.3,
+        duration: 0.1,
+        ease: "power3.in"
+      }, "<");
+    }
+    if (allPaths.length > 0) {
+      tl.to(allPaths, {
+        strokeDashoffset: (index) => {
+          if (allPaths[index]) {
+            try {
+              return allPaths[index].getTotalLength();
+            } catch (e) {
+              return 0;
+            }
+          }
+          return 0;
+        },
+        duration: 0.3,
+        ease: "power3.in"
+      }, "-=0.05");
+    }
+    if (store && foundationBase) {
+      tl.to([store, foundationBase], {
+        scale: 0,
+        x: "140px",
+        y: "-20px",
+        opacity: 0,
+        duration: 0.1,
+        ease: "power3.in"
+      });
+    }
+    if (title3) {
+      tl.to(title3, {
+        opacity: 0,
+        filter: "blur(5px)",
+        duration: 0.1,
+        ease: "power3.in"
+      }, "<");
+    }
+    if (storeFoundation) {
+      tl.to(storeFoundation, {
+        ...getBreakpointValues("storeFoundation"),
+        opacity: 1,
+        duration: 0.2,
+        ease: "power3.in"
+      }, "<");
+    }
+    if (grid) {
+      tl.to(grid, {
+        ...getBreakpointValues("grid"),
+        duration: 0.3,
+        ease: "power3.out"
+      }, "<");
+    }
+    if (counter) {
+      tl.to(counter, {
+        opacity: 1,
+        filter: "blur(0px)",
+        duration: 0.3,
+        ease: "power3.out",
+        onStart: startCounterAnimation
+        // ← Triggers independent animation
+      }, "-=0.1");
+      tl.to(counter, {
+        opacity: 0,
+        filter: "blur(10px)",
+        scale: 1,
+        delay: 0.5,
+        duration: 0.2,
+        ease: "power3.in"
+      });
+    }
+    if (question) {
+      tl.to(question, {
+        opacity: 1,
+        filter: "blur(0px)",
+        duration: 0.2,
+        scale: 1.2,
+        ease: "power3.out"
+      });
+    }
+    if (button) {
+      tl.to(button, {
+        scale: 1.01,
+        duration: 1,
+        ease: "power3.out"
+      }, "-=0.2");
+    }
+    ScrollTrigger.refresh();
+    console.log("\u2713 Animation timeline complete!");
+    window.addEventListener("resize", () => {
+      ScrollTrigger.refresh();
+    });
+  });
+})();
+//# sourceMappingURL=index.js.map

package/dist/playbook-2026/styles.css

@@ -1 +1,110 @@
-[entity-state=error],[entity-state=success],[entity-error-connector]{opacity:0}[entity-success-connector]{opacity:1}[connector-wrapper]{opacity:0}#scroll{height:100dvh;width:100vw;overflow:hidden}.pin-spacer{overflow:hidden}[entity-error-connector],[entity-success-connector],[entity-name],[playbook=foundation-base]{opacity:0}[playbook=counter],[playbook=question]{opacity:0;pointer-events:none}[inner-shadow]{background-color:#3c3b3b;color:transparent;-webkit-background-clip:text;background-clip:text;text-shadow:0px 2px 3px rgba(255,255,255,.5);max-width:500px}[playbook-title]{font-size:3rem;font-family:var(--Primary);line-height:110%;letter-spacing:-.03em}@media (min-width: 992px) and (max-height: 713px){[playbook-title]{font-size:2.5rem;max-width:415px}}@media (max-width: 1199px){[playbook-main-title]{height:60px;font-size:70px}}[entity-error-connector] svg path{stroke-dasharray:4 8;animation:dashMove 1s linear infinite}@keyframes dashMove{to{stroke-dashoffset:-12}}[entity-success-connector] svg .comet-glow{animation:cometMove 2.5s linear infinite;filter:blur(4px);opacity:.7}[entity-success-connector] svg .comet{animation:cometMove 2.5s linear infinite;filter:blur(1px)}@keyframes cometMove{0%{stroke-dashoffset:0}to{stroke-dashoffset:-420}}@media (min-width: 481px) and (max-width: 768px){[inner-shadow]{max-width:450px}}@media (max-width: 480px){[inner-shadow]{max-width:244px}[playbook-title]{font-size:2.3rem}}
+/* src/playbook-2026/styles.css */
+[entity-state=error] {
+  opacity: 0;
+}
+[entity-state=success] {
+  opacity: 0;
+}
+[entity-error-connector] {
+  opacity: 0;
+}
+[entity-success-connector] {
+  opacity: 1;
+}
+[connector-wrapper] {
+  opacity: 0;
+}
+#scroll {
+  height: 100dvh;
+  width: 100vw;
+  overflow: hidden;
+}
+.pin-spacer {
+  overflow: hidden;
+}
+[entity-error-connector] {
+  opacity: 0;
+}
+[entity-success-connector] {
+  opacity: 0;
+}
+[entity-name] {
+  opacity: 0;
+}
+[playbook=foundation-base] {
+  opacity: 0;
+}
+[playbook=counter] {
+  opacity: 0;
+  pointer-events: none;
+}
+[playbook=question] {
+  opacity: 0;
+  pointer-events: none;
+}
+[inner-shadow] {
+  background-color: #3c3b3b;
+  color: transparent;
+  -webkit-background-clip: text;
+  background-clip: text;
+  text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.5);
+  max-width: 500px;
+}
+[playbook-title] {
+  font-size: 3rem;
+  font-family: var(--Primary);
+  line-height: 110%;
+  letter-spacing: -0.03em;
+}
+@media (min-width: 992px) and (max-height: 713px) {
+  [playbook-title] {
+    font-size: 2.5rem;
+    max-width: 415px;
+  }
+}
+@media (max-width: 1199px) {
+  [playbook-main-title] {
+    height: 60px;
+    font-size: 70px;
+  }
+}
+[entity-error-connector] svg path {
+  stroke-dasharray: 4 8;
+  animation: dashMove 1s linear infinite;
+}
+@keyframes dashMove {
+  to {
+    stroke-dashoffset: -12;
+  }
+}
+[entity-success-connector] svg .comet-glow {
+  animation: cometMove 2.5s linear infinite;
+  filter: blur(4px);
+  opacity: 0.7;
+}
+[entity-success-connector] svg .comet {
+  animation: cometMove 2.5s linear infinite;
+  filter: blur(1px);
+}
+@keyframes cometMove {
+  from {
+    stroke-dashoffset: 0;
+  }
+  to {
+    stroke-dashoffset: -420;
+  }
+}
+@media (min-width: 481px) and (max-width: 768px) {
+  [inner-shadow] {
+    max-width: 450px;
+  }
+}
+@media (max-width: 480px) {
+  [inner-shadow] {
+    max-width: 244px;
+  }
+  [playbook-title] {
+    font-size: 2.3rem;
+  }
+}
+/*# sourceMappingURL=styles.css.map */