Logo hover: the long rays turn clockwise and the short rays anticlockwise; the blue disc and دیوان stay still (the SVG is inline so its layers can move; no motion with reduced-motion)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/public/logo/shamsa.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" role="img" aria-label="دیوان"><title>دیوان</title><polygon fill="#b88828" points="120.00,6.00 131.90,29.58 146.55,20.90 154.90,35.74 177.00,21.27 175.52,47.65 192.55,47.45 192.35,64.48 218.73,63.00 204.26,85.10 219.10,93.45 210.42,108.10 234.00,120.00 210.42,131.90 219.10,146.55 204.26,154.90 218.73,177.00 192.35,175.52 192.55,192.55 175.52,192.35 177.00,218.73 154.90,204.26 146.55,219.10 131.90,210.42 120.00,234.00 108.10,210.42 93.45,219.10 85.10,204.26 63.00,218.73 64.48,192.35 47.45,192.55 47.65,175.52 21.27,177.00 35.74,154.90 20.90,146.55 29.58,131.90 6.00,120.00 29.58,108.10 20.90,93.45 35.74,85.10 21.27,63.00 47.65,64.48 47.45,47.45 64.48,47.65 63.00,21.27 85.10,35.74 93.45,20.90 108.10,29.58"/><circle cx="120" cy="120" r="88.92" fill="#b88828"/><circle cx="120" cy="120" r="82.08" fill="#1d3b8b"/><circle cx="120" cy="120" r="75.24" fill="none" stroke="#b88828" stroke-width="1.71"/><path transform="translate(63.0 134.2)" fill="#fbf6ea" d="M19.59 -5.77Q18.14 -7.22 17.12 -8.10Q16.10 -8.97 15.13 -9.70V-10.18Q15.47 -10.72 16.10 -11.49Q16.73 -12.27 17.48 -13.07Q18.24 -13.87 18.87 -14.50Q19.50 -15.13 19.79 -15.32H20.27Q22.26 -14.06 23.35 -13.04Q24.45 -12.03 24.45 -10.86Q24.45 -9.65 23.06 -8.29Q21.68 -6.93 19.98 -5.77ZM14.21 17.99Q10.23 17.99 7.64 16.76Q5.04 15.52 3.56 13.48Q2.08 11.44 1.47 8.97Q0.87 6.50 0.87 4.02Q0.87 -0.43 2.06 -5.43Q3.25 -10.43 5.96 -15.62L7.56 -15.03Q6.11 -11.59 5.53 -8.75Q4.94 -5.91 4.94 -3.63Q4.94 -0.87 5.74 1.09Q6.54 3.05 8.05 4.26Q9.55 5.48 11.66 6.03Q13.77 6.59 16.39 6.59Q19.16 6.59 21.49 6.03Q23.81 5.48 25.78 4.43Q27.74 3.39 29.30 1.98Q31.14 0.33 32.04 -1.21Q32.93 -2.76 33.25 -4.70Q33.57 -6.64 33.57 -9.41Q33.57 -10.33 33.54 -11.23Q33.52 -12.12 33.52 -13.04Q33.52 -15.62 33.86 -17.94Q34.20 -20.27 34.90 -22.63Q35.60 -24.98 36.62 -27.60L37.93 -27.31Q37.83 -26.63 37.71 -25.25Q37.59 -23.86 37.52 -22.17Q37.45 -20.47 37.40 -18.82Q37.40 -18.09 37.37 -17.39Q37.35 -16.68 37.35 -15.96Q37.30 -10.96 36.36 -6.06Q35.41 -1.16 33.57 3.17Q31.72 7.51 28.98 10.86Q26.24 14.21 22.55 16.10Q18.87 17.99 14.21 17.99ZM47.88 -4.89 46.62 -5.19Q46.81 -6.11 47.15 -8.70Q47.49 -11.30 47.68 -16.20L48.31 -30.12Q48.46 -32.84 48.68 -34.83Q48.90 -36.82 49.33 -38.56Q49.77 -40.31 50.52 -42.18Q51.27 -44.04 52.44 -46.47L53.65 -46.08Q53.31 -44.97 52.92 -42.52Q52.53 -40.07 52.29 -35.41L51.52 -21.00Q51.32 -16.83 50.38 -12.66Q49.43 -8.48 47.88 -4.89ZM58.60 4.80 58.16 3.58Q60.68 2.08 63.18 0.58Q65.68 -0.92 68.20 -2.42Q70.97 -4.36 72.57 -6.28Q74.17 -8.19 74.56 -10.04Q73.54 -9.70 72.47 -9.50Q71.41 -9.31 70.14 -9.31Q68.83 -9.31 67.62 -9.87Q66.41 -10.43 65.63 -11.49Q64.86 -12.56 64.86 -13.97Q64.86 -14.84 65.15 -16.00Q65.44 -17.17 66.07 -18.53L68.01 -22.46Q69.46 -25.42 72.23 -25.42Q74.36 -25.42 75.65 -23.91Q76.94 -22.41 77.49 -20.05Q78.05 -17.70 78.05 -15.08Q78.05 -12.56 77.40 -10.09Q76.74 -7.61 75.80 -5.55Q74.85 -3.49 73.95 -2.08Q73.05 -0.67 72.52 -0.29Q71.89 0.19 70.17 0.94Q68.45 1.69 66.26 2.47Q64.08 3.25 62.02 3.88Q59.96 4.51 58.60 4.80ZM77.71 14.11Q76.40 12.85 75.70 12.20Q75.00 11.54 74.49 11.10Q73.98 10.67 73.25 10.18V9.70Q73.59 9.16 74.22 8.39Q74.85 7.61 75.60 6.81Q76.35 6.01 76.98 5.38Q77.61 4.75 77.91 4.56H78.39Q79.65 5.33 80.43 5.99Q81.20 6.64 81.69 7.17Q82.71 5.96 83.68 4.97Q84.65 3.97 85.09 3.68H85.57Q87.56 4.94 88.65 5.96Q89.74 6.98 89.74 8.15Q89.74 9.36 88.36 10.72Q86.98 12.07 85.28 13.24H84.89Q83.87 12.27 83.22 11.66Q82.56 11.06 81.98 10.57Q80.91 12.22 78.10 14.11ZM74.75 -11.54Q73.73 -11.54 73.27 -12.80Q72.81 -14.06 72.81 -15.42Q72.81 -17.46 73.37 -18.62Q73.93 -19.79 74.78 -20.27Q75.63 -20.76 76.40 -20.76Q77.95 -20.76 78.83 -21.22Q79.70 -21.68 80.04 -22.82Q80.38 -23.96 80.38 -26.00V-29.83Q80.38 -31.29 80.67 -32.67Q80.96 -34.05 81.74 -35.72Q82.51 -37.40 83.92 -39.68L85.13 -39.34Q84.94 -38.51 84.67 -36.40Q84.41 -34.29 84.07 -30.90Q83.73 -27.50 83.00 -24.25Q82.27 -21.00 81.06 -17.85Q79.85 -14.69 78.29 -13.12Q76.74 -11.54 74.75 -11.54ZM93.92 4.80 93.53 3.58Q96.53 2.03 98.98 0.63Q101.43 -0.77 103.33 -2.06Q105.22 -3.34 106.53 -4.46Q107.84 -5.57 108.49 -6.52Q109.15 -7.47 109.15 -8.19Q109.15 -8.78 108.32 -9.79Q107.50 -10.81 105.51 -12.10Q103.52 -13.38 100.08 -14.79Q100.42 -16.00 101.02 -17.63Q101.63 -19.25 102.36 -20.93Q103.08 -22.60 103.76 -23.96Q104.44 -25.32 104.93 -25.95H105.61Q107.79 -24.83 109.49 -23.11Q111.19 -21.39 112.13 -19.13Q113.08 -16.88 113.08 -14.02Q113.08 -11.30 112.33 -8.80Q111.57 -6.30 110.43 -4.26Q109.29 -2.23 108.10 -0.87Q106.92 0.48 105.99 0.92Q104.78 1.50 101.51 2.61Q98.23 3.73 93.92 4.80Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" role="img" aria-label="دیوان"><title>دیوان</title><g class="rays-long"><polygon fill="#b88828" points="120.00,6.00 143.01,34.11 177.00,21.27 182.88,57.12 218.73,63.00 205.89,96.99 234.00,120.00 205.89,143.01 218.73,177.00 182.88,182.88 177.00,218.73 143.01,205.89 120.00,234.00 96.99,205.89 63.00,218.73 57.12,182.88 21.27,177.00 34.11,143.01 6.00,120.00 34.11,96.99 21.27,63.00 57.12,57.12 63.00,21.27 96.99,34.11"/></g><g class="rays-short"><polygon fill="#b88828" points="146.55,20.90 164.46,42.99 192.55,47.45 197.01,75.54 219.10,93.45 208.92,120.00 219.10,146.55 197.01,164.46 192.55,192.55 164.46,197.01 146.55,219.10 120.00,208.92 93.45,219.10 75.54,197.01 47.45,192.55 42.99,164.46 20.90,146.55 31.08,120.00 20.90,93.45 42.99,75.54 47.45,47.45 75.54,42.99 93.45,20.90 120.00,31.08"/></g><circle cx="120" cy="120" r="88.92" fill="#b88828"/><circle cx="120" cy="120" r="82.08" fill="#1d3b8b"/><circle cx="120" cy="120" r="75.24" fill="none" stroke="#b88828" stroke-width="1.71"/><path transform="translate(63.0 134.2)" fill="#fbf6ea" d="M19.59 -5.77Q18.14 -7.22 17.12 -8.10Q16.10 -8.97 15.13 -9.70V-10.18Q15.47 -10.72 16.10 -11.49Q16.73 -12.27 17.48 -13.07Q18.24 -13.87 18.87 -14.50Q19.50 -15.13 19.79 -15.32H20.27Q22.26 -14.06 23.35 -13.04Q24.45 -12.03 24.45 -10.86Q24.45 -9.65 23.06 -8.29Q21.68 -6.93 19.98 -5.77ZM14.21 17.99Q10.23 17.99 7.64 16.76Q5.04 15.52 3.56 13.48Q2.08 11.44 1.47 8.97Q0.87 6.50 0.87 4.02Q0.87 -0.43 2.06 -5.43Q3.25 -10.43 5.96 -15.62L7.56 -15.03Q6.11 -11.59 5.53 -8.75Q4.94 -5.91 4.94 -3.63Q4.94 -0.87 5.74 1.09Q6.54 3.05 8.05 4.26Q9.55 5.48 11.66 6.03Q13.77 6.59 16.39 6.59Q19.16 6.59 21.49 6.03Q23.81 5.48 25.78 4.43Q27.74 3.39 29.30 1.98Q31.14 0.33 32.04 -1.21Q32.93 -2.76 33.25 -4.70Q33.57 -6.64 33.57 -9.41Q33.57 -10.33 33.54 -11.23Q33.52 -12.12 33.52 -13.04Q33.52 -15.62 33.86 -17.94Q34.20 -20.27 34.90 -22.63Q35.60 -24.98 36.62 -27.60L37.93 -27.31Q37.83 -26.63 37.71 -25.25Q37.59 -23.86 37.52 -22.17Q37.45 -20.47 37.40 -18.82Q37.40 -18.09 37.37 -17.39Q37.35 -16.68 37.35 -15.96Q37.30 -10.96 36.36 -6.06Q35.41 -1.16 33.57 3.17Q31.72 7.51 28.98 10.86Q26.24 14.21 22.55 16.10Q18.87 17.99 14.21 17.99ZM47.88 -4.89 46.62 -5.19Q46.81 -6.11 47.15 -8.70Q47.49 -11.30 47.68 -16.20L48.31 -30.12Q48.46 -32.84 48.68 -34.83Q48.90 -36.82 49.33 -38.56Q49.77 -40.31 50.52 -42.18Q51.27 -44.04 52.44 -46.47L53.65 -46.08Q53.31 -44.97 52.92 -42.52Q52.53 -40.07 52.29 -35.41L51.52 -21.00Q51.32 -16.83 50.38 -12.66Q49.43 -8.48 47.88 -4.89ZM58.60 4.80 58.16 3.58Q60.68 2.08 63.18 0.58Q65.68 -0.92 68.20 -2.42Q70.97 -4.36 72.57 -6.28Q74.17 -8.19 74.56 -10.04Q73.54 -9.70 72.47 -9.50Q71.41 -9.31 70.14 -9.31Q68.83 -9.31 67.62 -9.87Q66.41 -10.43 65.63 -11.49Q64.86 -12.56 64.86 -13.97Q64.86 -14.84 65.15 -16.00Q65.44 -17.17 66.07 -18.53L68.01 -22.46Q69.46 -25.42 72.23 -25.42Q74.36 -25.42 75.65 -23.91Q76.94 -22.41 77.49 -20.05Q78.05 -17.70 78.05 -15.08Q78.05 -12.56 77.40 -10.09Q76.74 -7.61 75.80 -5.55Q74.85 -3.49 73.95 -2.08Q73.05 -0.67 72.52 -0.29Q71.89 0.19 70.17 0.94Q68.45 1.69 66.26 2.47Q64.08 3.25 62.02 3.88Q59.96 4.51 58.60 4.80ZM77.71 14.11Q76.40 12.85 75.70 12.20Q75.00 11.54 74.49 11.10Q73.98 10.67 73.25 10.18V9.70Q73.59 9.16 74.22 8.39Q74.85 7.61 75.60 6.81Q76.35 6.01 76.98 5.38Q77.61 4.75 77.91 4.56H78.39Q79.65 5.33 80.43 5.99Q81.20 6.64 81.69 7.17Q82.71 5.96 83.68 4.97Q84.65 3.97 85.09 3.68H85.57Q87.56 4.94 88.65 5.96Q89.74 6.98 89.74 8.15Q89.74 9.36 88.36 10.72Q86.98 12.07 85.28 13.24H84.89Q83.87 12.27 83.22 11.66Q82.56 11.06 81.98 10.57Q80.91 12.22 78.10 14.11ZM74.75 -11.54Q73.73 -11.54 73.27 -12.80Q72.81 -14.06 72.81 -15.42Q72.81 -17.46 73.37 -18.62Q73.93 -19.79 74.78 -20.27Q75.63 -20.76 76.40 -20.76Q77.95 -20.76 78.83 -21.22Q79.70 -21.68 80.04 -22.82Q80.38 -23.96 80.38 -26.00V-29.83Q80.38 -31.29 80.67 -32.67Q80.96 -34.05 81.74 -35.72Q82.51 -37.40 83.92 -39.68L85.13 -39.34Q84.94 -38.51 84.67 -36.40Q84.41 -34.29 84.07 -30.90Q83.73 -27.50 83.00 -24.25Q82.27 -21.00 81.06 -17.85Q79.85 -14.69 78.29 -13.12Q76.74 -11.54 74.75 -11.54ZM93.92 4.80 93.53 3.58Q96.53 2.03 98.98 0.63Q101.43 -0.77 103.33 -2.06Q105.22 -3.34 106.53 -4.46Q107.84 -5.57 108.49 -6.52Q109.15 -7.47 109.15 -8.19Q109.15 -8.78 108.32 -9.79Q107.50 -10.81 105.51 -12.10Q103.52 -13.38 100.08 -14.79Q100.42 -16.00 101.02 -17.63Q101.63 -19.25 102.36 -20.93Q103.08 -22.60 103.76 -23.96Q104.44 -25.32 104.93 -25.95H105.61Q107.79 -24.83 109.49 -23.11Q111.19 -21.39 112.13 -19.13Q113.08 -16.88 113.08 -14.02Q113.08 -11.30 112.33 -8.80Q111.57 -6.30 110.43 -4.26Q109.29 -2.23 108.10 -0.87Q106.92 0.48 105.99 0.92Q104.78 1.50 101.51 2.61Q98.23 3.73 93.92 4.80Z"/></svg>

web/src/layouts/Base.astro

@@ -9,6 +9,7 @@ interface Props { title?: string; description?: string; q?: string }
 const { title, description = 'اردو کا کلاسیکی ادب', q = '' } = Astro.props;
 const fullTitle = title ? `${title} · دیوان` : 'دیوان · اردو کا کلاسیکی ادب';
 import Icon from '../components/Icon.astro';
+import shamsa from '../../public/logo/shamsa.svg?raw'; // inline, so the page can turn its rays
 ---
 <!doctype html>
 <html lang="ur-PK" dir="rtl">
@@ -37,7 +38,7 @@ import Icon from '../components/Icon.astro';
   <body data-user={Astro.locals.user ? '1' : undefined}>
     <header class="site-header">
       <div class="wrap">
-        <a class="wordmark" href="/" title="سرورق"><img class="logo" src="/logo/shamsa.svg" width="72" height="72" alt="دیوان" /></a>
+        <a class="wordmark" href="/" title="سرورق"><Fragment set:html={shamsa.replace('<svg ', '<svg class="logo" ')} /></a>
         <form class="search-form" action="/search" method="get" role="search">
           <input type="search" name="q" id="q" data-urdu value={q} placeholder="شعر، لفظ یا عبارت تلاش کریں" aria-label="تلاش" autocomplete="off" />
           <button type="button" id="rom-toggle" class="in-box rom" aria-label="رومن حروف سے اردو" aria-pressed="false" title="رومن حروف سے اردو ٹائپنگ (dil → دل)">اب</button>

web/src/styles/global.css

@@ -89,8 +89,13 @@ body { margin: 0; background: var(--surface-page); color: var(--text); font-fami
 .site-header .wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 12px; }
 .wordmark { display: flex; flex: none; }
 /* the logo: the shamsa with دیوان inside, sized with the viewport */
-.wordmark .logo { width: clamp(52px, 13vw, 72px); height: auto; filter: drop-shadow(0 1px 3px rgb(0 0 0 / .15)); transition: transform .3s; }
+.wordmark .logo { width: clamp(52px, 13vw, 72px); height: auto; filter: drop-shadow(0 1px 3px rgb(0 0 0 / .15)); overflow: visible; }
-.wordmark:hover .logo { transform: rotate(8deg); }
+/* 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; }
+@keyframes rays { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .wordmark .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 */