<div class="flex-1 relative flex items-center justify-center">

          <div id="logo-container" class="relative z-10 w-64 h-64 md:w-80 md:h-80 cursor-pointer select-none">

            <img id="logo-img" alt="nexo" src="/images/logo.svg" class="w-full h-full" />

                      <svg class="w-6 h-6 text-indigo-600 morph-icon" viewBox="0 0 24 24" fill="currentColor">

                        <defs>

                          <path class="morph-resting" d="M12 3 L13 10 L20 8 L14 12 L20 16 L13 14 L12 21 L11 14 L4 16 L10 12 L4 8 L11 10 Z"/>

                          <path class="morph-alt" d="M12 1 L13 10 L22 7 L14 12 L22 17 L13 14 L12 23 L11 14 L2 17 L10 12 L2 7 L11 10 Z"/>

                          <path class="morph-shape" d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/>

                        </defs>

                        <path d="M12 3 L13 10 L20 8 L14 12 L20 16 L13 14 L12 21 L11 14 L4 16 L10 12 L4 8 L11 10 Z"/>

                      </svg>

                      <svg class="w-6 h-6 text-purple-600 morph-icon" viewBox="0 0 24 24" fill="currentColor">

                        <defs>

                          <path class="morph-resting" d="M12 3 L13 10 L20 8 L14 12 L20 16 L13 14 L12 21 L11 14 L4 16 L10 12 L4 8 L11 10 Z"/>

                          <path class="morph-alt" d="M12 2 L15 8 L21 7 L17 12 L21 17 L15 16 L12 22 L9 16 L3 17 L7 12 L3 7 L9 8 Z"/>

                          <path class="morph-shape" d="M20 6h-4V4c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zM10 4h4v2h-4V4zm10 16H4V8h16v12z M13 10h-2v3H8v2h3v3h2v-3h3v-2h-3z"/>

                        </defs>

                        <path d="M12 3 L13 10 L20 8 L14 12 L20 16 L13 14 L12 21 L11 14 L4 16 L10 12 L4 8 L11 10 Z"/>

                      </svg>

                      <svg class="w-6 h-6 text-blue-600 morph-icon" viewBox="0 0 24 24" fill="currentColor">

                        <defs>

                          <path class="morph-resting" d="M12 3 L13 10 L20 8 L14 12 L20 16 L13 14 L12 21 L11 14 L4 16 L10 12 L4 8 L11 10 Z"/>

                          <path class="morph-alt" d="M17 4 L14 11 L21 12 L14 13 L17 20 L12 14 L7 20 L10 13 L3 12 L10 11 L7 4 L12 10 Z"/>

                          <path class="morph-shape" d="M9.27 4.49c-1.63 7.54 3.75 12.41 7.66 13.8A7.993 7.993 0 0 1 12 20c-4.41 0-8-3.59-8-8 0-3.45 2.2-6.4 5.27-7.51m2.72-2.48C6.4 2.01 2 6.54 2 12c0 5.52 4.48 10 10 10 3.71 0 6.93-2.02 8.66-5.02-7.51-.25-12.09-8.43-8.32-14.97h-.35z"/>

                        </defs>

                        <path d="M12 3 L13 10 L20 8 L14 12 L20 16 L13 14 L12 21 L11 14 L4 16 L10 12 L4 8 L11 10 Z"/>

                      </svg>

const { animate, utils, stagger, splitText, morphTo } = anime;

// Motion path: glowing dot traces the logo outline.

// morphTo on hover: logo → 16-pt star, tries to mimic the logo

// XXX: morphTo note: animejs tries to find the shorter path to match the

// logo's in ~300 commands, so the star gets hundreds of "stacked" points. The

// morph works but looks like a chaotic crystallisation rather than a clean

// shape-to-shape swap. Not gonna waste more time on this bullshit

async function setupLogoAnimations() {

  const container = document.getElementById('logo-container');

  if (!container) return;

  let pathD;

  try {

    const text = await fetch('/images/logo.svg').then(r => r.text());

    pathD = new DOMParser()

      .parseFromString(text, 'image/svg+xml')

      .querySelector('path')

      .getAttribute('d');

  } catch {

    return;

  }

  // Blah

  const NS = 'http://www.w3.org/2000/svg';

  const mk = (tag, attrs = {}) => {

    const el = document.createElementNS(NS, tag);

    Object.entries(attrs).forEach(([k, v]) => el.setAttribute(k, v));

    return el;

  };

  const svg = mk('svg', { viewBox: '0 0 600 600' });

  svg.style.cssText = 'width:100%;height:100%;display:block;overflow:visible';

  const defs = mk('defs');

  // Radial gradient: bright upper-left highlight fading to a deeper green at

  // edges

  const grad = mk('radialGradient', {

    id: 'logo-gradient',

    cx: '42%',

    cy: '36%',

    r: '65%',

    gradientUnits: 'objectBoundingBox'

  });

  grad.appendChild(mk('stop', { offset: '0%',   'stop-color': '#2dff80' }));

  grad.appendChild(mk('stop', { offset: '52%',  'stop-color': '#13ec5b' }));

  grad.appendChild(mk('stop', { offset: '100%', 'stop-color': '#09a042' }));

  defs.appendChild(grad);

  // Glow filter for the dot

  const dotFilter = mk('filter', {

    id: 'dot-glow',

    x: '-300%',

    y: '-300%',

    width: '700%',

    height: '700%'

  });

  dotFilter.appendChild(mk('feGaussianBlur', {

    in: 'SourceGraphic',

    stdDeviation: '6',

    result: 'blur'

  }));

  const merge = mk('feMerge');

  merge.appendChild(mk('feMergeNode', { in: 'blur' }));

  merge.appendChild(mk('feMergeNode', { in: 'SourceGraphic' }));

  dotFilter.appendChild(merge);

  defs.appendChild(dotFilter);

  svg.appendChild(defs);

  // Logo path: gradient fill

  const logoPathEl = mk('path', {

    fill: 'url(#logo-gradient)',

    filter: 'url(#logo-texture)',

    d: pathD

  });

  svg.appendChild(logoPathEl);

  // morphTo targets (same 0-600 coordinate space as the logo)

  const starD = 'M300,30 L322,192 L466,109 L371,258 L562,296 L371,340 L466,489 L322,412 L300,570 L278,412 L134,489 L229,340 L38,296 L229,258 L134,109 L278,192 Z';

  const starEl = mk('path', { d: starD, visibility: 'hidden' });

  const origEl = mk('path', { d: pathD, visibility: 'hidden' });

  svg.appendChild(starEl);

  svg.appendChild(origEl);

  // Motion dot

  const trail = mk('circle', {

    r: '24',

    fill: '#13ec5b',

    opacity: '0.15',

    filter: 'url(#dot-glow)',

    cx: '316',

    cy: '578'

  });

  const dot = mk('circle', {

    r: '8',

    fill: 'black',

    opacity: '0.85',

    filter: 'url(#dot-glow)',

    cx: '316',

    cy: '578'

  });

  svg.appendChild(trail);

  svg.appendChild(dot);

  const img = container.querySelector('img');

  if (img) container.replaceChild(svg, img);

  else container.appendChild(svg);

  // Motion path

  const totalLen = logoPathEl.getTotalLength();

  if (!totalLen) return;

  const DURATION = 12000;

  let rafStart = null;

  function traceDot(ts) {

    if (rafStart === null) rafStart = ts;

    const t = ((ts - rafStart) % DURATION) / DURATION;

    const pt = logoPathEl.getPointAtLength(t * totalLen);

    dot.setAttribute('cx', pt.x);

    dot.setAttribute('cy', pt.y);

    trail.setAttribute('cx', pt.x);

    trail.setAttribute('cy', pt.y);

    requestAnimationFrame(traceDot);

  }

  requestAnimationFrame(traceDot);

  // morphTo experiment

  container.addEventListener('pointerenter', () => {

    animate(logoPathEl, { d: morphTo(starEl), duration: 900, ease: 'inOutCubic' });

  });

  container.addEventListener('pointerleave', () => {

    animate(logoPathEl, { d: morphTo(origEl), duration: 900, ease: 'inOutCubic' });

  });

}

  setupLogoAnimations();

  document.querySelectorAll('.glide__slide .morph-icon').forEach(svg => {

    const path = svg.querySelector(':scope > path');

    const resting = svg.querySelector('defs .morph-resting');

    const alt = svg.querySelector('defs .morph-alt');

    const shape = svg.querySelector('defs .morph-shape');

    const card = svg.closest('.group');

    let hovered = false;

    let spikeCycle = null;

    const rotAnim = animate(svg, {

      rotate: 360,

      loop: true,

      duration: 7000,

      ease: 'linear',

    });

    function runSpikeCycle() {

      if (hovered) return;

      const targets = [resting, alt];

      let i = 0;

      function step() {

        if (hovered) return;

        i = (i + 1) % targets.length;

        spikeCycle = animate(path, {

          d: morphTo(targets[i]),

          duration: 1800,

          ease: 'inOutSine',

          onComplete: () => setTimeout(step, 600),

        });

      }

      step();

    }

    runSpikeCycle();

    card.addEventListener('pointerenter', () => {

      hovered = true;

      spikeCycle?.pause();

      rotAnim.pause();

      animate(path, { d: morphTo(shape), duration: 500, ease: 'inOutCubic' });

    });

    card.addEventListener('pointerleave', () => {

      hovered = false;

      animate(path, {

        d: morphTo(resting),

        duration: 500,

        ease: 'inOutCubic',

        onComplete: () => {

          rotAnim.play();

          runSpikeCycle();

        },

      });

    });

  });

.morph-icon {

  transform-origin: center;

}