From 5a5657803d3a987e7ac74858ff4baf287d41cfd2 Mon Sep 17 00:00:00 2001
From: Anas Rashid <anasrasheed22@gmail.com>
Date: Fri, 9 Oct 2026 16:43:33 +0200
Subject: [PATCH] =?UTF-8?q?Home=20logo=20turns=20on=20hover=20like=20the?=
 =?UTF-8?q?=20header's:=20pale=20rays=20one=20way,=20gold=20lobes=20the=20?=
 =?UTF-8?q?other,=20the=20disc=20and=20=D8=AF=DB=8C=D9=88=D8=A7=D9=86=20st?=
 =?UTF-8?q?ill?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 web/src/pages/index.astro | 3 ++-
 web/src/styles/global.css | 6 +++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro
index d307a83b..d8a2965c 100644
--- a/web/src/pages/index.astro
+++ b/web/src/pages/index.astro
@@ -13,10 +13,11 @@ const token = Astro.locals.user ? Astro.cookies.get(COOKIE)?.value : undefined;
 const marked: number[] = token ? (await asUser(token, '/api/library/marks')).data.poets ?? [] : [];
 const card = (p: Poet) => `poet-card${marked.includes(p.id) ? ' mark-bm' : ''}`;
 import Bayt from '../components/Bayt.astro';
+import logo from '../../public/logo/turanj.svg?raw'; // inline, so its rays can turn on hover
 ---
 <Base>
   <section class="masthead">
-    <img class="masthead-logo" src="/logo/turanj.svg" width="220" height="220" alt="" />
+    <Fragment set:html={logo.replace('<svg ', '<svg class="logo masthead-logo" aria-hidden="true" ')} />
     <h1><span class="name">دیوان</span><Bayt /><span class="tagline">اردو کا کلاسیکی ادب</span></h1>
   </section>
   <p class="hero-count">{ud(count)} شعرا و ادبا · ویکی ماخذ کے عوامی ملکیت متون</p>
diff --git a/web/src/styles/global.css b/web/src/styles/global.css
index d181e095..3abb6a4d 100644
--- a/web/src/styles/global.css
+++ b/web/src/styles/global.css
@@ -92,10 +92,10 @@ body { margin: 0; background: var(--surface-page); color: var(--text); font-fami
 .wordmark .logo { width: clamp(52px, 13vw, 72px); height: auto; filter: drop-shadow(0 1px 3px rgb(0 0 0 / .15)); overflow: visible; }
 /* on hover the two layers of rays turn opposite ways; the blue disc and the word stay still */
 .logo .rays-long, .logo .rays-short { transform-box: fill-box; transform-origin: center; }
-.wordmark:hover .rays-long, .wordmark:focus-visible .rays-long { animation: rays 9s linear infinite; }
-.wordmark:hover .rays-short, .wordmark:focus-visible .rays-short { animation: rays 9s linear infinite reverse; }
+:is(.wordmark:hover, .wordmark:focus-visible, .masthead-logo:hover) .rays-long { animation: rays 9s linear infinite; }
+:is(.wordmark:hover, .wordmark:focus-visible, .masthead-logo:hover) .rays-short { animation: rays 9s linear infinite reverse; }
 @keyframes rays { to { transform: rotate(360deg); } }
-@media (prefers-reduced-motion: reduce) { .wordmark .logo g { animation: none !important; } }
+@media (prefers-reduced-motion: reduce) { .logo g { animation: none !important; } }
 .search-form { flex: 1; min-width: 0; display: flex; position: relative; }
 .search-form input { background: var(--surface-sunken); }
 .search-form input { flex: 1; min-width: 0; padding: 4px 14px; padding-inline-end: 116px; } /* min-width 0: shrinks instead of pushing past the icons */