@easemate/web-kit 0.1.0

package/build/elements/logo/index.js

@@ -0,0 +1,728 @@
+import { html } from 'lit-html';
+import { Component } from '~/decorators/Component';
+import { Prop } from '~/decorators/Prop';
+const CENTER = { x: 74, y: 74 };
+const DOTS_DATA = [
+    { id: 'dot-1', cx: 7.22725, cy: 73.99975 },
+    { id: 'dot-2', cx: 8.0, cy: 107.63685 },
+    { id: 'dot-3', cx: 41.36365, cy: 7.72734 },
+    { id: 'dot-4', cx: 40.36105, cy: 40.36375 },
+    { id: 'dot-5', cx: 40.36105, cy: 107.63625 },
+    { id: 'dot-6', cx: 41.36365, cy: 140.77285 },
+    { id: 'dot-7', cx: 73.99995, cy: 7.22725 },
+    { id: 'dot-8', cx: 73.99995, cy: 140.77325 },
+    { id: 'dot-9', cx: 108.13785, cy: 7.72734 },
+    { id: 'dot-10', cx: 107.88425, cy: 73.99975 },
+    { id: 'dot-11', cx: 108.13785, cy: 140.77285 },
+    { id: 'dot-12', cx: 141.27285, cy: 40.86385 },
+    { id: 'dot-13', cx: 140.77225, cy: 73.99975 },
+    { id: 'dot-14', cx: 141.27285, cy: 107.63685 },
+    { id: 'dot-15', cx: 40.36165, cy: 73.99925 },
+    { id: 'dot-16', cx: 74.00125, cy: 40.36345 },
+    { id: 'dot-17', cx: 74.00125, cy: 73.99925 },
+    { id: 'dot-18', cx: 74.00125, cy: 107.63585 },
+    { id: 'dot-19', cx: 107.63485, cy: 40.36345 },
+    { id: 'dot-20', cx: 107.63485, cy: 107.63585 },
+    { id: 'dot-21', cx: 141.77, cy: 8.23 },
+    { id: 'dot-22', cx: 141.77, cy: 140.77 },
+    { id: 'dot-23', cx: 7.73019, cy: 140.77 },
+    { id: 'dot-24', cx: 7.72018, cy: 8.22 },
+    { id: 'dot-25', cx: 7.73518, cy: 40.865 }
+];
+const INNER_DOT_IDS = ['dot-19', 'dot-20', 'dot-18', 'dot-15', 'dot-17', 'dot-16'];
+const OUTER_DOT_IDS = DOTS_DATA.map((d) => d.id).filter((id) => !INNER_DOT_IDS.includes(id));
+const forceReflow = (el) => {
+    void window.getComputedStyle(el).opacity;
+};
+const getAngle = (dot) => Math.atan2(dot.cy - CENTER.y, dot.cx - CENTER.x);
+const sortByAngle = (ids) => ids
+    .map((id) => DOTS_DATA.find((d) => d.id === id))
+    .filter((dot) => dot != null)
+    .sort((a, b) => getAngle(a) - getAngle(b));
+const LOOP_DURATION = 1500;
+const ROTATION_DURATION = 600;
+@Component({
+    tag: 'ease-logo-loader',
+    styles: `
+    :host {
+      display: inline-block;
+      --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
+      --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
+      --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
+      
+      --dot-dark: var(--color-gray-0, oklab(98.81% 0 0));
+      --dot-medium: var(--color-gray-600, oklab(65.21% -0.0019 -0.0144));
+      --dot-light: var(--color-gray-700, oklab(37.92% -0.0006 -0.0179));
+      --dot-accent: var(--color-blue-600, oklab(76.85% 0.0462 -0.1115));
+    }
+
+    .logo-loader {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--logo-loader-size, 36px);
+      height: var(--logo-loader-size, 36px);
+    }
+
+    .logo-loader__svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+      transform-origin: center;
+      overflow: visible;
+    }
+
+    .logo-loader__svg rect {
+      transform-box: fill-box;
+      transform-origin: center;
+      transition:
+        transform 380ms var(--ease-out),
+        fill 320ms ease,
+        opacity 320ms ease;
+    }
+
+    /* State: intro - dots are animating in */
+    .logo-loader[data-state='intro'] .logo-loader__svg rect {
+      opacity: 0;
+      transform: scale(0);
+    }
+
+    /* Outer dots loading animation */
+    @keyframes loading-outer {
+      0%, 100% {
+        transform: scale(var(--base-scale, 1));
+        fill: var(--dot-light);
+        opacity: 0.4;
+      }
+      15% {
+        transform: scale(calc(var(--base-scale, 1) * 1.35));
+        fill: var(--dot-dark);
+        opacity: 1;
+      }
+      35% {
+        transform: scale(var(--base-scale, 1));
+        fill: var(--dot-medium);
+        opacity: 0.8;
+      }
+    }
+
+    /* Inner dots loading animation */
+    @keyframes loading-inner {
+      0%, 100% {
+        transform: scale(var(--base-scale, 0.6));
+        opacity: 0.7;
+        fill: var(--dot-medium);
+      }
+      50% {
+        transform: scale(calc(var(--base-scale, 0.6) * 1.9));
+        opacity: 0.1;
+        fill: var(--dot-light);
+      }
+    }
+
+    .dot-loading {
+      animation-name: loading-outer;
+      animation-duration: 600ms;
+      animation-timing-function: cubic-bezier(0.3, 0.6, 0.4, 1);
+      animation-iteration-count: infinite;
+      animation-fill-mode: both;
+      animation-delay: var(--delay, 0ms);
+    }
+
+    .dot-loading-inner {
+      animation-name: loading-inner;
+      animation-duration: 1500ms;
+      animation-timing-function: ease-in-out;
+      animation-iteration-count: infinite;
+      animation-fill-mode: both;
+      animation-delay: var(--delay, 0ms);
+    }
+
+    /* Exit animation class */
+    .restoring {
+      transition:
+        transform 450ms cubic-bezier(0.25, 0, 0.5, 1),
+        fill 350ms ease,
+        opacity 350ms ease;
+    }
+
+    /* Particle intro animation */
+    @keyframes particle-bounce {
+      0% { transform: scale(1); }
+      40% { transform: scale(1.25); }
+      65% { transform: scale(0.95); }
+      85% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+
+    .particle-bounce {
+      animation: particle-bounce 400ms var(--ease-overshoot) both;
+    }
+
+    /* Shockwave ring animation */
+    @keyframes shockwave-expansion {
+      0% {
+        transform: scale(1);
+        opacity: 1;
+        stroke-width: 1.5px;
+      }
+      100% {
+        transform: scale(4);
+        opacity: 0;
+        stroke-width: 0.5px;
+      }
+    }
+
+    .shockwave-ring {
+      fill: none;
+      stroke: var(--dot-dark);
+      transform-box: fill-box;
+      transform-origin: center;
+      animation: shockwave-expansion 900ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
+    }
+
+    /* Pulse wave for intro */
+    @keyframes pulse-wave {
+      0% {
+        transform: scale(1);
+        filter: brightness(1);
+      }
+      50% {
+        transform: scale(1.2);
+        filter: brightness(1.6);
+        fill: var(--dot-light);
+      }
+      100% {
+        transform: scale(1);
+        filter: brightness(1);
+      }
+    }
+
+    .dot-pulse-wave {
+      animation: pulse-wave var(--pulse-duration, 500ms) var(--pulse-delay, 0ms) cubic-bezier(0.455, 0.03, 0.515, 0.955);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .logo-loader__svg {
+        transition: none;
+        transform: scale(1);
+      }
+      .logo-loader__svg rect {
+        animation: none !important;
+        transition: none;
+        transform: scale(1);
+        opacity: 1;
+      }
+    }
+  `,
+    template(host) {
+        const size = host.size ?? 36;
+        const state = host.state;
+        const ariaLabel = host.ariaLabel;
+        const ariaLabelTrimmed = ariaLabel?.trim() ?? '';
+        return html `
+      <div
+        class="logo-loader"
+        data-state=${state}
+        style=${`--logo-loader-size:${size}px;`}
+      >
+        <svg
+          viewBox="0 0 148 148"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          class="logo-loader__svg"
+          role=${ariaLabelTrimmed ? 'img' : null}
+          aria-label=${ariaLabelTrimmed || null}
+          aria-hidden=${ariaLabelTrimmed ? null : 'true'}
+          focusable=${ariaLabelTrimmed ? null : 'false'}
+        >
+          <g class="shockwave-container"></g>
+          
+          <rect id="dot-1" x="0.5" y="67.2725" width="13.4545" height="13.4545" rx="6.72727" fill="var(--dot-medium)" />
+          <rect id="dot-2" x="3.5" y="103.152" width="8.9697" height="8.9697" rx="4.48485" fill="var(--dot-medium)" />
+          <rect id="dot-3" x="36.8788" y="3.24249" width="8.9697" height="8.9697" rx="4.48485" fill="var(--dot-medium)" />
+          <rect id="dot-4" x="33.6338" y="33.6365" width="13.4545" height="13.4545" rx="6.72727" fill="var(--dot-medium)" />
+          <rect id="dot-5" x="33.6338" y="100.909" width="13.4545" height="13.4545" rx="6.72727" fill="var(--dot-medium)" />
+          <rect id="dot-6" x="36.8788" y="136.288" width="8.9697" height="8.9697" rx="4.48485" fill="var(--dot-medium)" />
+          <rect id="dot-7" x="67.2727" y="0.5" width="13.4545" height="13.4545" rx="6.72727" fill="var(--dot-light)" />
+          <rect id="dot-8" x="67.2727" y="134.046" width="13.4545" height="13.4545" rx="6.72727" fill="var(--dot-medium)" />
+          <rect id="dot-9" x="103.653" y="3.24249" width="8.9697" height="8.9697" rx="4.48485" fill="var(--dot-medium)" />
+          <rect id="dot-10" x="101.407" y="67.2725" width="13.4545" height="13.4545" rx="6.72727" fill="var(--dot-medium)" />
+          <rect id="dot-11" x="103.653" y="136.288" width="8.9697" height="8.9697" rx="4.48485" fill="var(--dot-light)" />
+          <rect id="dot-12" x="136.788" y="36.379" width="8.9697" height="8.9697" rx="4.48485" fill="var(--dot-light)" />
+          <rect id="dot-13" x="134.045" y="67.2725" width="13.4545" height="13.4545" rx="6.72727" fill="var(--dot-light)" />
+          <rect id="dot-14" x="136.788" y="103.152" width="8.9697" height="8.9697" rx="4.48485" fill="var(--dot-light)" />
+          
+          <rect id="dot-15" x="26.9071" y="60.5447" width="26.9091" height="26.9091" rx="13.4545" fill="var(--dot-dark)" />
+          <rect id="dot-16" x="60.5467" y="26.9089" width="26.9091" height="26.9091" rx="13.4545" fill="var(--dot-dark)" />
+          <rect id="dot-17" x="60.5467" y="60.5447" width="26.9091" height="26.9091" rx="13.4545" fill="var(--dot-dark)" />
+          <rect id="dot-18" x="60.5467" y="94.1813" width="26.9091" height="26.9091" rx="13.4545" fill="var(--dot-dark)" />
+          <rect id="dot-19" x="94.1803" y="26.9089" width="26.9091" height="26.9091" rx="13.4545" fill="var(--dot-dark)" />
+          <rect id="dot-20" x="94.1803" y="94.1813" width="26.9091" height="26.9091" rx="13.4545" fill="var(--dot-dark)" />
+          
+          <rect id="dot-21" x="139.53" y="5.98999" width="4.48" height="4.48" rx="2.24" fill="var(--dot-light)" />
+          <rect id="dot-22" x="139.53" y="138.53" width="4.48" height="4.48" rx="2.24" fill="var(--dot-light)" />
+          <rect id="dot-23" x="5.49019" y="138.53" width="4.48" height="4.48" rx="2.24" fill="var(--dot-light)" />
+          <rect id="dot-24" x="5.48018" y="5.97998" width="4.48" height="4.48" rx="2.24" fill="var(--dot-light)" />
+          <rect id="dot-25" x="4.37018" y="37.5" width="6.73" height="6.73" rx="3.365" fill="var(--dot-light)" />
+        </svg>
+      </div>
+    `;
+    }
+})
+export class LogoLoader extends HTMLElement {
+    @Prop({
+        type: Boolean,
+        attribute: 'loading',
+        defaultValue: false,
+        onChange(next) {
+            this.handleLoadingChange(next);
+        }
+    })
+    accessor loading = false;
+    @Prop({
+        type: 'string',
+        attribute: 'intro',
+        defaultValue: 'wave'
+    })
+    accessor intro = 'wave';
+    @Prop({
+        type: Number,
+        attribute: 'size',
+        defaultValue: 36
+    })
+    accessor size = 36;
+    @Prop({
+        type: 'string',
+        attribute: 'aria-label',
+        defaultValue: null
+    })
+    accessor ariaLabel = null;
+    #state = 'intro';
+    #loopStartTime = 0;
+    #animationTimers = [];
+    #introCompleted = false;
+    get state() {
+        return this.#state;
+    }
+    set state(value) {
+        if (this.#state === value) {
+            return;
+        }
+        this.#state = value;
+        if (typeof this.requestRender === 'function') {
+            this.requestRender();
+        }
+    }
+    connectedCallback() {
+        // Wait for first render before starting intro animation
+        // The Component decorator renders after connectedCallback via requestAnimationFrame
+        requestAnimationFrame(() => {
+            // Double RAF to ensure render is complete
+            requestAnimationFrame(() => {
+                if (this.loading) {
+                    this.#runIntro(() => {
+                        this.#introCompleted = true;
+                        this.#startLoopAnimation();
+                    });
+                }
+                else {
+                    this.#runIntro(() => {
+                        this.#introCompleted = true;
+                        this.state = 'idle';
+                    });
+                }
+            });
+        });
+    }
+    disconnectedCallback() {
+        this.#clearTimers();
+    }
+    #clearTimers() {
+        for (const id of this.#animationTimers) {
+            window.clearTimeout(id);
+        }
+        this.#animationTimers = [];
+    }
+    #setTimeout(fn, delay) {
+        const id = window.setTimeout(fn, delay);
+        this.#animationTimers.push(id);
+        return id;
+    }
+    #getDot(id) {
+        const svg = this.shadowRoot?.querySelector('.logo-loader__svg');
+        return svg?.querySelector(`#${id}`);
+    }
+    #getShockwaveContainer() {
+        return this.shadowRoot?.querySelector('.shockwave-container');
+    }
+    #resetDotsState(instant = false, keepOpacity = false) {
+        const container = this.#getShockwaveContainer();
+        if (container) {
+            container.innerHTML = '';
+        }
+        for (const dot of DOTS_DATA) {
+            const el = this.#getDot(dot.id);
+            if (!el) {
+                continue;
+            }
+            if (instant) {
+                el.style.transition = 'none';
+            }
+            else {
+                el.style.transition = '';
+            }
+            // Remove all animation classes
+            el.classList.remove('dot-loading', 'dot-loading-inner', 'restoring', 'dot-pulse-wave', 'particle-bounce');
+            el.style.removeProperty('--base-scale');
+            el.style.removeProperty('--delay');
+            el.style.removeProperty('--pulse-delay');
+            el.style.removeProperty('--pulse-duration');
+            // Reset inline styles
+            el.style.transform = 'scale(1)';
+            if (!keepOpacity) {
+                el.style.opacity = instant ? '1' : '';
+            }
+            el.style.removeProperty('fill');
+            el.style.removeProperty('filter');
+            if (instant) {
+                forceReflow(el);
+                el.style.removeProperty('transition');
+            }
+        }
+    }
+    /** Ensure all dots are visible */
+    #ensureVisibility() {
+        for (const dot of DOTS_DATA) {
+            const el = this.#getDot(dot.id);
+            if (el && (el.style.opacity === '0' || el.style.opacity === '')) {
+                el.style.transition = 'opacity 200ms ease-out';
+                el.style.opacity = '1';
+            }
+        }
+    }
+    /** Run wave intro animation */
+    #runWaveIntro(onComplete) {
+        this.state = 'intro';
+        // Prepare dots hidden
+        for (const dot of DOTS_DATA) {
+            const el = this.#getDot(dot.id);
+            if (!el) {
+                continue;
+            }
+            el.style.transition = 'none';
+            el.style.opacity = '0';
+            el.style.transform = 'scale(0)';
+            forceReflow(el);
+        }
+        const innerDotIds = new Set(INNER_DOT_IDS);
+        const innerDots = DOTS_DATA.filter((d) => innerDotIds.has(d.id));
+        const outerDots = DOTS_DATA.filter((d) => !innerDotIds.has(d.id));
+        // WAVE 1: Inner dots appear at half scale
+        const orderedInner = sortByAngle(innerDots.map((d) => d.id));
+        orderedInner.forEach((dot, index) => {
+            const el = this.#getDot(dot.id);
+            if (!el) {
+                return;
+            }
+            el.style.fill = 'var(--dot-medium)';
+            forceReflow(el);
+            el.style.removeProperty('transition');
+            const delay = index * 75;
+            this.#setTimeout(() => {
+                el.style.transition = 'transform 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 400ms ease-out';
+                el.style.opacity = '1';
+                el.style.transform = 'scale(0.5)';
+            }, delay);
+        });
+        // WAVE 2: Inner to full scale + outer appear
+        this.#setTimeout(() => {
+            // Inner dots to full scale
+            orderedInner.forEach((dot, index) => {
+                const el = this.#getDot(dot.id);
+                if (!el) {
+                    return;
+                }
+                const delay = index * 65;
+                this.#setTimeout(() => {
+                    el.style.transition = 'transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1), fill 450ms ease-out';
+                    el.style.transform = 'scale(1)';
+                    el.style.removeProperty('fill');
+                }, delay);
+            });
+            // Outer dots appear
+            const orderedOuter = sortByAngle(outerDots.map((d) => d.id));
+            orderedOuter.forEach((dot, index) => {
+                const el = this.#getDot(dot.id);
+                if (!el) {
+                    return;
+                }
+                el.style.removeProperty('transition');
+                const delay = 150 + index * 40;
+                this.#setTimeout(() => {
+                    el.style.transition = 'transform 650ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 550ms ease-out';
+                    el.style.opacity = '1';
+                    el.style.transform = 'scale(1)';
+                }, delay);
+            });
+        }, 650);
+        // Completion
+        this.#setTimeout(() => {
+            onComplete?.();
+        }, 1400);
+    }
+    /** Run particle intro animation */
+    #runParticleIntro(onComplete) {
+        this.state = 'intro';
+        // Prepare dots hidden
+        for (const dot of DOTS_DATA) {
+            const el = this.#getDot(dot.id);
+            if (!el) {
+                continue;
+            }
+            el.style.transition = 'none';
+            el.style.opacity = '0';
+            el.style.transform = 'scale(0)';
+            forceReflow(el);
+        }
+        const innerDotIds = new Set(INNER_DOT_IDS);
+        // Create particle animation data
+        const particles = DOTS_DATA.map((dot, index) => {
+            const finalAngle = getAngle(dot);
+            const startDistance = 110 + Math.random() * 80;
+            const angleVariation = (Math.random() - 0.5) * Math.PI * 0.35;
+            const startAngle = finalAngle + angleVariation;
+            const startX = Math.cos(startAngle) * startDistance;
+            const startY = Math.sin(startAngle) * startDistance;
+            const curvature = Math.random() * 0.4 + 0.3;
+            const controlAngle = startAngle + (Math.random() - 0.5) * Math.PI * curvature;
+            const controlDistance = startDistance * 0.6;
+            const controlX = Math.cos(controlAngle) * controlDistance;
+            const controlY = Math.sin(controlAngle) * controlDistance;
+            const group = Math.floor(index / 5);
+            const groupDelay = group * 110;
+            const withinGroupDelay = (index % 5) * 40;
+            const delay = groupDelay + withinGroupDelay + Math.random() * 40;
+            const duration = 600 + Math.random() * 300;
+            return {
+                ...dot,
+                startX,
+                startY,
+                controlX,
+                controlY,
+                delay,
+                duration,
+                impactTime: delay + duration,
+                rotationSpeed: 720 + Math.random() * 360,
+                isInner: innerDotIds.has(dot.id)
+            };
+        });
+        particles.sort((a, b) => a.delay - b.delay);
+        // First 3 inner dots for shockwaves
+        const shockwaveParticles = particles
+            .filter((p) => p.isInner)
+            .sort((a, b) => a.impactTime - b.impactTime)
+            .slice(0, 3);
+        const shockwaveSet = new Set(shockwaveParticles.map((p) => p.id));
+        // Animate each particle
+        for (const particle of particles) {
+            const el = this.#getDot(particle.id);
+            if (!el) {
+                continue;
+            }
+            el.style.transform = `translate(${particle.startX}px, ${particle.startY}px) scale(0.05)`;
+            this.#setTimeout(() => {
+                el.style.opacity = '1';
+                const steps = 30;
+                let step = 0;
+                const animateStep = () => {
+                    step++;
+                    const progress = step / steps;
+                    const t = progress;
+                    const mt = 1 - t;
+                    const x = mt * mt * particle.startX + 2 * mt * t * particle.controlX + t * t * 0;
+                    const y = mt * mt * particle.startY + 2 * mt * t * particle.controlY + t * t * 0;
+                    const easeOut = 1 - (1 - progress) ** 4;
+                    const scale = 0.05 + easeOut * 0.95;
+                    const rotation = progress * particle.rotationSpeed;
+                    el.style.transition = 'transform 33ms linear';
+                    el.style.transform = `translate(${x}px, ${y}px) scale(${scale}) rotate(${rotation}deg)`;
+                    if (step < steps) {
+                        requestAnimationFrame(animateStep);
+                    }
+                    else {
+                        // Impact - clear all transforms
+                        const bounceDuration = 250;
+                        el.style.transition = `transform ${bounceDuration}ms cubic-bezier(0.34, 1.56, 0.64, 1)`;
+                        el.style.transform = 'scale(1)';
+                        if (shockwaveSet.has(particle.id)) {
+                            this.#triggerShockwave(particle);
+                        }
+                        this.#setTimeout(() => {
+                            el.classList.add('particle-bounce');
+                            this.#setTimeout(() => {
+                                el.classList.remove('particle-bounce');
+                            }, 400);
+                        }, bounceDuration);
+                    }
+                };
+                requestAnimationFrame(animateStep);
+            }, particle.delay);
+        }
+        // Early completion
+        const earlyRevealTime = Math.max(...particles.map((p) => p.delay)) * 0.6;
+        this.#setTimeout(() => {
+            onComplete?.();
+        }, earlyRevealTime);
+        // Final cleanup
+        const maxTime = Math.max(...particles.map((p) => p.impactTime + 500));
+        this.#setTimeout(() => {
+            this.#resetDotsState(false, true);
+        }, maxTime);
+    }
+    #triggerShockwave(dot) {
+        const container = this.#getShockwaveContainer();
+        if (!container) {
+            return;
+        }
+        const ring = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+        ring.setAttribute('cx', String(dot.cx));
+        ring.setAttribute('cy', String(dot.cy));
+        ring.setAttribute('r', '13.45');
+        ring.classList.add('shockwave-ring');
+        container.appendChild(ring);
+        this.#setTimeout(() => {
+            ring.remove();
+        }, 900);
+    }
+    #runIntro(onComplete) {
+        if (this.intro === 'particle') {
+            this.#runParticleIntro(onComplete);
+        }
+        else {
+            this.#runWaveIntro(onComplete);
+        }
+    }
+    #startLoopAnimation() {
+        this.#loopStartTime = performance.now();
+        this.#ensureVisibility();
+        // Inner dots - scale down with transition, then add animation class
+        const orderedInnerDots = sortByAngle(INNER_DOT_IDS);
+        let seedDelay = 0;
+        orderedInnerDots.forEach((dot) => {
+            this.#setTimeout(() => {
+                const el = this.#getDot(dot.id);
+                if (!el) {
+                    return;
+                }
+                const targetScale = 0.6;
+                el.style.transition = 'all 450ms cubic-bezier(0.4, 0, 0.2, 1)';
+                el.style.transform = `scale(${targetScale})`;
+                el.style.fill = 'var(--dot-medium)';
+                el.style.opacity = '0.7';
+                el.style.setProperty('--base-scale', `${targetScale}`);
+                const angle = getAngle(dot);
+                const normalizedAngle = (angle + Math.PI) / (2 * Math.PI);
+                const animationDelayMs = normalizedAngle * LOOP_DURATION;
+                el.style.setProperty('--delay', `${animationDelayMs}ms`);
+                this.#setTimeout(() => {
+                    el.classList.add('dot-loading-inner');
+                }, 100);
+            }, seedDelay);
+            seedDelay += 60;
+        });
+        const orderedOuterDots = sortByAngle(OUTER_DOT_IDS);
+        this.#setTimeout(() => {
+            orderedOuterDots.forEach((dot) => {
+                const el = this.#getDot(dot.id);
+                if (!el) {
+                    return;
+                }
+                el.style.transition = 'all 350ms ease-out';
+                const baseScale = 1.2;
+                el.style.setProperty('--base-scale', `${baseScale}`);
+                const angle = getAngle(dot);
+                const normalizedAngle = (angle + Math.PI) / (2 * Math.PI);
+                const animationDelayMs = normalizedAngle * ROTATION_DURATION;
+                el.style.setProperty('--delay', `${animationDelayMs}ms`);
+                this.#setTimeout(() => {
+                    el.classList.add('dot-loading');
+                }, 50);
+            });
+            this.state = 'loop';
+        }, seedDelay + 100);
+    }
+    #endLoopAnimation() {
+        const now = performance.now();
+        const elapsed = Math.max(0, now - this.#loopStartTime);
+        const timeInCycle = elapsed % LOOP_DURATION;
+        const timeLeft = LOOP_DURATION - timeInCycle + 50;
+        this.state = 'exit';
+        this.#setTimeout(() => {
+            const orderedAllDots = sortByAngle(DOTS_DATA.map((d) => d.id));
+            orderedAllDots.forEach((dot, i) => {
+                const el = this.#getDot(dot.id);
+                if (!el) {
+                    return;
+                }
+                const delay = i * 18;
+                this.#setTimeout(() => {
+                    el.classList.remove('dot-loading', 'dot-loading-inner');
+                    el.style.removeProperty('--delay');
+                    el.style.removeProperty('--base-scale');
+                    el.classList.add('restoring');
+                    el.style.transform = 'scale(1)';
+                    el.style.opacity = '1';
+                    el.style.removeProperty('fill');
+                    this.#setTimeout(() => {
+                        el.classList.remove('restoring');
+                    }, 500);
+                }, delay);
+            });
+            this.#setTimeout(() => {
+                this.state = 'idle';
+            }, orderedAllDots.length * 18 + 500);
+        }, timeLeft);
+    }
+    handleLoadingChange(next) {
+        if (!this.#introCompleted) {
+            return;
+        }
+        this.#clearTimers();
+        if (next) {
+            if (this.state === 'idle' || this.state === 'exit') {
+                this.#resetDotsState(true, true);
+                this.#startLoopAnimation();
+            }
+        }
+        else {
+            if (this.state === 'loop') {
+                this.#endLoopAnimation();
+            }
+            else if (this.state !== 'intro' && this.state !== 'exit') {
+                this.state = 'idle';
+            }
+        }
+    }
+    playIntro(variant) {
+        this.#clearTimers();
+        this.#resetDotsState(true);
+        const originalIntro = this.intro;
+        if (variant) {
+            this.intro = variant;
+        }
+        this.#runIntro(() => {
+            this.#introCompleted = true;
+            if (this.loading) {
+                this.#startLoopAnimation();
+            }
+            else {
+                this.state = 'idle';
+            }
+        });
+        if (variant) {
+            this.intro = originalIntro;
+        }
+    }
+}