From fa3a953a96c7100a60a143f44a6b12522a757606 Mon Sep 17 00:00:00 2001
From: Linus Olofsson <61837116+LinusOlofsson-maker@users.noreply.github.com>
Date: Thu, 21 May 2026 06:01:25 +0200
Subject: [PATCH] feat(footer): hover-glow links to lyxlimo + karleksguiden
 (#25)

MainLayout footer now includes attribution: 'Crafting digital
experiences for lyxlimo.se & karleksguiden.se' visible on all pages.

On index page only: hovering lyxlimo.se tints hero-logo with
green (#4fd1c5 teal), hovering karleksguiden.se tints with
magenta (#c026d3). Mouseleave restores default white smoky-path
animation. Mechanism reuses existing data-logo-tint attribute on
#text-wrapper.

Removed logo-pulse functionality entirely (threadLogoIn/Out paths,
runLogoPulse function, LOGO_PROBABILITY, updateLogoThreadPaths,
resize/scroll listeners for logo threads). Hover-based UX replaces
the random pulse approach per Linus design preference.
---
 src/components/WaveBackground.astro | 13 +------------
 src/layouts/MainLayout.astro        |  6 ++++++
 src/pages/index.astro               | 25 +++++++++++++++++++++++++
 3 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/components/WaveBackground.astro b/src/components/WaveBackground.astro
index fdb0585..1be604a 100644
--- a/src/components/WaveBackground.astro
+++ b/src/components/WaveBackground.astro
@@ -72,8 +72,6 @@ const pulseCore = theme === 'purple' ? '#fdf4ff' : '#f0fdfa';
             <path id="thread1" d="M-1000 200 Q 400 400 900 200 T 2600 200" fill="none" stroke="url(#gradSec)" stroke-width="0.5" class="opacity-50" data-pulse-path="true" />
             <path id="thread2" d="M-1000 800 Q 600 600 1100 800 T 2600 800" fill="none" stroke="url(#gradSec)" stroke-width="0.8" class="opacity-60" data-pulse-path="true" />
 
-            <path id="threadLogoIn" d="M 0 0 L 0 0" fill="none" stroke="url(#gradPurple)" stroke-width="0.6" class="opacity-50" />
-            <path id="threadLogoOut" d="M 0 0 L 0 0" fill="none" stroke="url(#gradMain)" stroke-width="0.6" class="opacity-45" />
         </g>
 
         <g id="box-trail-group"></g>
@@ -411,9 +409,8 @@ const pulseCore = theme === 'purple' ? '#fdf4ff' : '#f0fdfa';
         }
 
         const SPLIT_PROBABILITY = 0.55;
-        const LOGO_PROBABILITY = 0.50;
 
-        function isLogoTargetVisible(): HTMLElement | null {
+        function _unused_isLogoTargetVisible(): HTMLElement | null {
             const el = document.querySelector<HTMLElement>('[data-logo-target]');
             if (!el) return null;
             const rect = el.getBoundingClientRect();
@@ -605,14 +602,6 @@ const pulseCore = theme === 'purple' ? '#fdf4ff' : '#f0fdfa';
                 return;
             }
 
-            // 20% chans för logo-pulse OM logo är synlig
-            const wantLogo = Math.random() < LOGO_PROBABILITY;
-            if (wantLogo && isLogoTargetVisible()) {
-                runLogoPulse(14000 + Math.random() * 4000);
-                schedule();
-                return;
-            }
-
             const boxes = refreshBoxes();
             const intersecting: SVGPathElement[] = [];
             const nonIntersecting: SVGPathElement[] = [];
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
index e87084a..f19a0aa 100644
--- a/src/layouts/MainLayout.astro
+++ b/src/layouts/MainLayout.astro
@@ -30,6 +30,12 @@ const { title } = Astro.props;
     </main>
 
     <footer class="border-t border-neutral-800 py-8 text-center text-gray-500 text-sm bg-neutral-900 relative z-40">
+      <p class="mb-2">
+        Crafting digital experiences for
+        <a href="https://lyxlimo.se/" target="_blank" rel="noopener noreferrer" data-glow-link="green" class="text-gray-400 hover:text-white transition-colors">lyxlimo.se</a>
+        &amp;
+        <a href="https://karleksguiden.se/" target="_blank" rel="noopener noreferrer" data-glow-link="magenta" class="text-gray-400 hover:text-white transition-colors">karleksguiden.se</a>
+      </p>
       <p>&copy; {new Date().getFullYear()} Images by Olofsson. All rights reserved.</p>
     </footer>
 
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 2283847..4bfaa5a 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -140,6 +140,17 @@ import WaveBackground from '../components/WaveBackground.astro';
         text-shadow: 0 0 25px rgba(79,209,197,0.85), 0 0 50px rgba(79,209,197,0.55);
         transition: text-shadow 0.6s ease;
     }
+    #text-wrapper[data-logo-tint="magenta"] ~ * .smoky-path,
+    #text-wrapper[data-logo-tint="magenta"] .smoky-path {
+        animation: none !important;
+        stroke: #c026d3 !important;
+        opacity: 0.95 !important;
+        filter: url(#fog-filter) drop-shadow(0 0 12px rgba(192,38,211,0.7));
+    }
+    #text-wrapper[data-logo-tint="magenta"] h1 {
+        text-shadow: 0 0 25px rgba(192,38,211,0.85), 0 0 50px rgba(192,38,211,0.55);
+        transition: text-shadow 0.6s ease;
+    }
     #text-wrapper h1 {
         transition: text-shadow 0.8s ease;
     }
@@ -283,4 +294,18 @@ import WaveBackground from '../components/WaveBackground.astro';
   }, { threshold: 0.1 }); 
 
   if (footer) observer.observe(footer);
+
+  // FOOTER-LÄNKAR HOVER: ändra logo-glow när användare hovrar lyxlimo/karleksguiden-länkar
+  const glowLinks = document.querySelectorAll<HTMLElement>('[data-glow-link]');
+  glowLinks.forEach(link => {
+    link.addEventListener('mouseenter', () => {
+      if (!textWrapper) return;
+      const tint = link.getAttribute('data-glow-link');
+      if (tint) textWrapper.setAttribute('data-logo-tint', tint);
+    });
+    link.addEventListener('mouseleave', () => {
+      if (!textWrapper) return;
+      textWrapper.removeAttribute('data-logo-tint');
+    });
+  });
 </script>
\ No newline at end of file