Add ambient seed drift and easter egg bursts

assets/app.js

@@ -20,6 +20,12 @@ const modalInput = document.getElementById('modalInput');
 const modalTitle = document.getElementById('modalTitle');
 const hapticTick = () => { if ('vibrate' in navigator) navigator.vibrate(12); };
 const installBtn = document.getElementById('installBtn');
+let lastCountPulse = null;
+let lastFinishedId = null;
+let fireflyTimer = null;
+let fireflyActive = false;
+let titleClicks = [];
+let easterEggCooling = false;
 
 // --- Service Worker ---
 if ('serviceWorker' in navigator) {
@@ -141,15 +147,143 @@ function applyTheme() {
         document.body.classList.remove('dark-mode');
         document.getElementById('themeBtn').innerHTML = '☀️';
     }
+    handleAmbientDrift();
 }
 
 function toggleTheme() {
     isDarkMode = !isDarkMode;
     localStorage.setItem('crochetDarkMode', isDarkMode);
     applyTheme();
+    document.body.classList.add('theme-animating');
+    setTimeout(() => document.body.classList.remove('theme-animating'), 750);
 }
 applyTheme();
 
+// --- Firefly Animation ---
+function spawnFirefly({ markActive = false, source = 'ambient' } = {}) {
+    const wrap = document.createElement('div');
+    wrap.className = 'firefly-wrap';
+    const el = document.createElement('div');
+    el.className = 'firefly';
+    const top = Math.random() * 55 + 5; // 5vh–60vh
+    const scale = 0.9 + Math.random() * 0.4;
+    const duration = 12 + Math.random() * 8; // 12–20s
+    wrap.style.top = `${top}vh`;
+    wrap.style.setProperty('--fly-scale', scale);
+    wrap.style.setProperty('--fly-duration', `${duration}s`);
+    if (markActive) fireflyActive = true;
+    wrap.addEventListener('animationend', (e) => {
+        if (e.animationName !== 'fireflyGlide') return;
+        wrap.remove();
+        if (markActive) fireflyActive = false;
+    });
+    wrap.appendChild(el);
+    document.body.appendChild(wrap);
+}
+
+function spawnSeed({ markActive = false, source = 'ambient' } = {}) {
+    const wrap = document.createElement('div');
+    wrap.className = 'seed-wrap';
+    const el = document.createElement('div');
+    el.className = 'seed';
+    const top = Math.random() * 55 + 5; // 5vh–60vh
+    const scale = 0.85 + Math.random() * 0.4;
+    const duration = 14 + Math.random() * 8; // 14–22s
+    const tilt = (Math.random() * 16 + 8) * (Math.random() < 0.5 ? -1 : 1); // +/-8–24deg
+    const sway = 4 + Math.random() * 6; // px
+    const fromLeft = Math.random() < 0.5;
+    const start = fromLeft ? '-12vw' : '112vw';
+    const mid = fromLeft ? '30vw' : '-30vw';
+    const end = fromLeft ? '112vw' : '-12vw';
+    wrap.style.top = `${top}vh`;
+    wrap.style.setProperty('--seed-scale', scale);
+    wrap.style.setProperty('--seed-duration', `${duration}s`);
+    wrap.style.setProperty('--seed-tilt', `${tilt}deg`);
+    wrap.style.setProperty('--seed-sway', `${sway}px`);
+    wrap.style.setProperty('--seed-start', start);
+    wrap.style.setProperty('--seed-mid', mid);
+    wrap.style.setProperty('--seed-end', end);
+    if (markActive) fireflyActive = true;
+    wrap.addEventListener('animationend', (e) => {
+        if (e.animationName !== 'seedGlide') return;
+        wrap.remove();
+        if (markActive) fireflyActive = false;
+    });
+    wrap.appendChild(el);
+    document.body.appendChild(wrap);
+}
+
+function stopAmbientDrift() {
+    if (fireflyTimer) {
+        clearTimeout(fireflyTimer);
+        fireflyTimer = null;
+    }
+    document.querySelectorAll('.firefly-wrap').forEach(el => el.remove());
+    document.querySelectorAll('.seed-wrap').forEach(el => el.remove());
+    fireflyActive = false;
+}
+
+function scheduleAmbientDrift() {
+    const delay = 26000 + Math.random() * 18000; // 26–44s
+    fireflyTimer = setTimeout(() => {
+        if (isDarkMode) {
+            spawnFirefly();
+        } else {
+            spawnSeed();
+        }
+        scheduleAmbientDrift();
+    }, delay);
+}
+
+function handleAmbientDrift() {
+    stopAmbientDrift();
+    if (isDarkMode) {
+        spawnFirefly();
+    } else {
+        spawnSeed();
+    }
+    scheduleAmbientDrift();
+}
+handleAmbientDrift();
+
+const logoIcon = document.querySelector('.brand-icon');
+if (logoIcon) {
+    logoIcon.addEventListener('click', () => {
+        if (fireflyActive) return;
+        if (isDarkMode) {
+            spawnFirefly({ markActive: true, source: 'logo' });
+        } else {
+            spawnSeed({ markActive: true, source: 'logo' });
+        }
+    });
+}
+
+const titleEl = document.getElementById('appTitle');
+if (titleEl) {
+    titleEl.addEventListener('click', () => {
+        const now = Date.now();
+        titleClicks = titleClicks.filter(ts => now - ts < 7000);
+        titleClicks.push(now);
+        if (titleClicks.length >= 5 && !easterEggCooling) {
+            easterEggCooling = true;
+            triggerBurst();
+            setTimeout(() => {
+                easterEggCooling = false;
+                titleClicks = [];
+            }, 8000);
+        }
+    });
+}
+
+function triggerBurst() {
+    const burstCount = 8;
+    const spawner = isDarkMode ? spawnFirefly : spawnSeed;
+    for (let i = 0; i < burstCount; i++) {
+        const jitter = Math.random() * 200;
+        setTimeout(() => spawner({ source: 'burst' }), i * 140 + jitter);
+    }
+}
+
 // --- Focus Mode Logic ---
 let wakeLock = null;
 let isFocusMode = false;
@@ -220,9 +354,11 @@ document.addEventListener('visibilitychange', async () => {
         setTimeout(() => modalInput.focus(), 100);
     }
     async function deletePart(pId, partId) {
+        const project = projects.find(p => p.id === pId);
+        const part = project.parts.find(pt => pt.id === partId);
+        if (part.locked) return;
         const ok = await showConfirm({ title: 'Delete part?', text: 'This part will be removed.', confirmText: 'Delete', danger: true });
         if (ok) {
-            const project = projects.find(p => p.id === pId);
             project.parts = project.parts.filter(pt => pt.id !== partId);
             save();
         }
@@ -243,7 +379,7 @@ document.addEventListener('visibilitychange', async () => {
         const project = projects.find(p => p.id === pId);
         const part = project.parts.find(pt => pt.id === partId);
         part.finished = !part.finished;
-        if(part.finished) part.locked = false; 
+        if(part.finished) { part.locked = false; lastFinishedId = part.id; } else { lastFinishedId = null; }
         save();
     }
     function updateCount(pId, partId, change) {
@@ -254,6 +390,7 @@ document.addEventListener('visibilitychange', async () => {
         if (part.max !== null && part.count > part.max) part.count = part.max;
         if (part.count < 0) part.count = 0;
         hapticTick();
+        lastCountPulse = { partId, dir: change > 0 ? 'up' : 'down' };
         save();
     }
     async function resetCount(pId, partId) {
@@ -295,6 +432,10 @@ function openModal(type, pId = null, partId = null) {
             modalTitle.innerText = "Set Row Count";
             modalInput.value = part.count; modalInput.type = "number";
     }
+    else if (type === 'setMax') {
+        const part = projects.find(p => p.id === pId).parts.find(pt => pt.id === partId);
+        if (part.locked) return;
+    }
     modal.classList.add('active');
     setTimeout(() => modalInput.focus(), 100);
 }
@@ -391,11 +532,33 @@ function render() {
             const lockIcon = part.locked ? '🔒' : '🔓';
             const lockBtnClass = part.locked ? 'btn-lock locked-active' : 'btn-lock';
             const controlsDimmed = (part.locked || part.finished) ? 'dimmed' : '';
-            const hideControls = part.finished ? 'hidden-controls' : '';
+            const hideControls = (part.finished || part.minimized) ? 'hidden-controls' : '';
+            const showSetMax = part.minimized ? 'hidden' : '';
             const partNoteId = `part-note-${project.id}-${part.id}`;
+            const countId = `count-${part.id}`;
+            const pulseClass = lastCountPulse && lastCountPulse.partId === part.id
+                ? (lastCountPulse.dir === 'up' ? 'count-bump-up' : 'count-bump-down')
+                : '';
+            const finishPulseClass = part.finished && lastFinishedId === part.id ? 'finish-shimmer' : '';
+            const partCardId = `part-${part.id}`;
+            const partCardFullClass = `${isLocked} ${isFinished} ${isMinimized} ${finishPulseClass}`;
+            const lockDisabled = part.locked ? 'disabled' : '';
+            const actionsHtml = part.minimized
+                ? `<div class="part-actions"><button class="icon-btn btn-toggle-part" onclick="togglePartMinimize(${project.id}, ${part.id})" title="Expand">▼</button></div>`
+                : `<div class="part-actions">
+                        <button class="icon-btn btn-reset-part" onclick="resetCount(${project.id}, ${part.id})" ${isFinished || part.locked ? 'disabled' : ''}>↺</button>
+                        <button class="icon-btn btn-delete-part" onclick="deletePart(${project.id}, ${part.id})" ${lockDisabled}>🗑️</button>
+                        <button class="icon-btn btn-toggle-part" onclick="togglePartMinimize(${project.id}, ${part.id})" title="Minimize">▼</button>
+                    </div>`;
+            const countSubtext = part.minimized ? '' : `
+                <div class="count-subtext">
+                    ${part.max !== null ? `<strong>${part.count}</strong> / ${part.max}` : 'No max set'}
+                    <button class="icon-btn ${showSetMax}" onclick="openModal('setMax', ${project.id}, ${part.id})" title="Set max" ${lockDisabled}>⚙️</button>
+                </div>
+            `;
             
             partsHtml += `
-            <div class="part-card ${isLocked} ${isFinished} ${isMinimized}">
+            <div class="part-card ${partCardFullClass}" id="${partCardId}">
                 <div class="part-header">
                     <div class="part-name-group">
                         <label class="check-container">
@@ -405,17 +568,10 @@ function render() {
                         <span class="part-name" onclick="openModal('renamePart', ${project.id}, ${part.id})">${part.name}</span>
                         <span class="part-mini-count">${part.count}</span>
                     </div>
-                    <div class="part-actions">
+                    ${actionsHtml}
-                        <button class="icon-btn btn-toggle-part" onclick="togglePartMinimize(${project.id}, ${part.id})" title="Minimize">▼</button>
-                        <button class="icon-btn" onclick="resetCount(${project.id}, ${part.id})" ${isFinished ? 'disabled' : ''}>↺</button>
-                        <button class="icon-btn btn-delete-part" onclick="deletePart(${project.id}, ${part.id})">🗑️</button>
-                    </div>
-                </div>
-                <div class="count-display" ondblclick="openModal('manualCount', ${project.id}, ${part.id})">${part.count}</div>
-                <div class="count-subtext">
-                    ${part.max !== null ? `<strong>${part.count}</strong> / ${part.max}` : 'No max set'}
-                    <button class="icon-btn" onclick="openModal('setMax', ${project.id}, ${part.id})" title="Set max">⚙️</button>
                 </div>
+                <div class="count-display ${pulseClass}" id="${countId}" ondblclick="openModal('manualCount', ${project.id}, ${part.id})">${part.count}</div>
+                ${countSubtext}
                 <div class="controls ${hideControls}">
                     <button class="action-btn btn-minus ${controlsDimmed}" onclick="updateCount(${project.id}, ${part.id}, -1)">-</button>
                     <button class="action-btn ${lockBtnClass}" onclick="togglePartLock(${project.id}, ${part.id})">${lockIcon}</button>
@@ -453,6 +609,8 @@ function render() {
         grid.appendChild(projectContainer);
     });
 
+    lastCountPulse = null;
+    lastFinishedId = null;
     app.appendChild(grid);
 }
 

assets/style.css

@@ -1,14 +1,15 @@
 :root {
     /* --- Woodland Theme (Light) --- */
-    --bg: #e4e8d5; /* Sage background from image */
+    --bg: #e4e7d4; /* Sage background from image */
     --card-bg: #f8f5e6; /* Creamy yarn color */
-    --header-bg: #c5a384; /* Wood hook color */
+    --header-bg: #866f5a; /* Wood hook color */
     --header-text: #f8f5e6; /* Cream text for header */
     --text: #4a3b2a; /* Deep sepia brown outlines */
     --text-muted: #7a6b5a;
     --border: #d1c7b7;
     --shadow: 0 4px 8px rgba(74, 59, 42, 0.1); /* Warmer shadow */
     
+
     --modal-bg: #f8f5e6;
     --input-bg: #fffdf5;
     --input-border: #d1c7b7;
@@ -61,9 +62,18 @@ body {
     display: flex;
     flex-direction: column;
     overflow-x: hidden;
+    scrollbar-gutter: stable; /* Prevent layout shift when scrollbar appears/disappears */
     transition: background-color 0.3s, color 0.3s;
 }
 
+body.theme-animating { animation: themeSwap 0.7s ease-in-out; }
+@keyframes themeSwap {
+    0% { filter: brightness(1.08) saturate(1.06); opacity: 0.85; }
+    45% { filter: brightness(1.03) saturate(1.12) contrast(1.04); opacity: 0.92; }
+    75% { filter: brightness(0.98) saturate(1.04); opacity: 0.97; }
+    100% { filter: brightness(1) saturate(1); opacity: 1; }
+}
+
 header {
     background-color: var(--header-bg);
     color: var(--header-text);
@@ -87,6 +97,8 @@ h1 {
     color: var(--header-text);
     text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
     font-family: 'Cormorant Garamond', Georgia, serif;
+    cursor: pointer;
+    user-select: none;
 }
 
 .brand { display: flex; align-items: center; gap: 10px; }
@@ -112,8 +124,11 @@ h1 {
     font-size: 1.2rem;
     cursor: pointer;
     color: var(--header-text);
-    transition: all 0.2s;
+    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.2s;
+    transform: translateY(0);
 }
+.header-btn:hover { transform: translateY(-1px) scale(1.03); box-shadow: 0 6px 14px rgba(0,0,0,0.12); }
+.header-btn:active { transform: translateY(0) scale(0.96); box-shadow: none; }
 
 .header-btn.is-active { background: var(--header-text); color: var(--header-bg); }
 .hidden { display: none !important; }
@@ -123,7 +138,7 @@ h1 {
     margin: 0 auto;
     padding: 1.5rem 1.25rem calc(120px + env(safe-area-inset-bottom, 0px));
     position: relative;
-    z-index: 2;
+    z-index: 1; /* Keep cards above background but below flying effects */
     flex: 1;
 }
 
@@ -131,6 +146,7 @@ h1 {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     gap: 20px;
+    align-items: start; /* Prevent shorter cards from stretching to tallest row mate */
 }
 
 @media (min-width: 1280px) {
@@ -167,8 +183,9 @@ h1 {
     background: none; border: none; color: var(--project-color);
     font-size: 1.2rem; cursor: pointer; transition: transform 0.2s; padding: 5px;
 }
+.part-list { max-height: 2000px; opacity: 1; transition: max-height 0.35s ease, opacity 0.3s ease; overflow: hidden; }
 .project-collapsed .btn-toggle-project { transform: rotate(-90deg); }
-.project-collapsed .part-list { display: none; }
+.project-collapsed .part-list { max-height: 0; opacity: 0; pointer-events: none; }
 .project-collapsed { margin-bottom: 1rem; opacity: 0.8; box-shadow: none; }
 
 .project-actions { display: flex; gap: 8px; align-items: center; }
@@ -215,12 +232,21 @@ h1 {
     border-left-color: var(--success);
     opacity: 0.9;
 }
+.finish-shimmer { animation: finishShimmer 0.8s ease; }
+@keyframes finishShimmer {
+    0% { box-shadow: var(--shadow), 0 0 0 0 rgba(122, 139, 79, 0.32); }
+    60% { box-shadow: var(--shadow), 0 0 0 16px rgba(122, 139, 79, 0); }
+    100% { box-shadow: var(--shadow), 0 0 0 0 rgba(122, 139, 79, 0); }
+}
 
 .part-card.is-minimized { padding: 0.8rem 1rem; }
 .part-card.is-minimized .count-display,
 .part-card.is-minimized .controls { display: none; }
 .part-card.is-minimized .part-mini-count { display: inline-block; }
 .part-card.is-minimized .btn-toggle-part { transform: rotate(-90deg); }
+.part-card.is-minimized .count-subtext,
+.part-card.is-minimized .btn-reset-part,
+.part-card.is-minimized .btn-delete-part { display: none; }
 
 .part-header { display: flex; justify-content: space-between; align-items: center; }
 .part-card:not(.is-minimized) .part-header { margin-bottom: 15px; }
@@ -255,7 +281,14 @@ h1 {
 .is-finished .part-mini-count { color: var(--success); }
 
 .part-actions { display: flex; gap: 8px; align-items: center; }
-.icon-btn { background: none; border: none; font-size: 1.3rem; padding: 5px; color: var(--text-muted); cursor: pointer; transition: color 0.2s; }
+.part-actions { justify-content: flex-end; min-width: 120px; }
+.icon-btn {
+    background: none; border: none; font-size: 1.3rem; padding: 5px; color: var(--text-muted);
+    cursor: pointer; transition: color 0.2s;
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 32px; height: 32px;
+}
+.icon-btn:disabled { opacity: 0.4; pointer-events: none; }
 .btn-delete-part:hover { color: var(--danger); }
 .btn-toggle-part { transition: transform 0.2s; }
 
@@ -273,11 +306,24 @@ h1 {
     margin: 0 0 0.6rem 0;
 }
 .count-subtext strong { color: var(--project-color); }
+.count-bump-up { animation: countUp 0.26s ease; }
+.count-bump-down { animation: countDown 0.26s ease; }
+@keyframes countUp {
+    0% { transform: scale(0.95); color: var(--btn-secondary-text); }
+    60% { transform: scale(1.08); color: var(--project-color); }
+    100% { transform: scale(1); color: var(--project-color); }
+}
+@keyframes countDown {
+    0% { transform: scale(1.05); color: var(--project-color); }
+    60% { transform: scale(0.9); color: var(--text-muted); }
+    100% { transform: scale(1); color: var(--project-color); }
+}
 
 .note-toggle {
     background: none; border: 1px dashed var(--border); color: var(--text-muted);
     padding: 4px 10px; border-radius: 10px; cursor: pointer; font-size: 0.9rem;
-    margin-top: 8px;
+    margin: 12px auto 6px;
+    display: block;
 }
 .note-toggle:hover { color: var(--project-color); border-color: var(--project-color); }
 
@@ -321,23 +367,32 @@ button:active { transform: scale(0.97); box-shadow: none; }
     width: 65px; height: 65px; border-radius: 50%;
     display: flex; align-items: center; justify-content: center;
     font-size: 2.2rem; box-shadow: 0 6px 15px rgba(74, 59, 42, 0.3);
-    border: none; z-index: 3; transition: transform 0.1s;
+    border: none; z-index: 3; transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
-.fab:active { transform: scale(0.95); }
+.fab:hover { transform: translateY(-3px) scale(1.04) rotate(-2deg); box-shadow: 0 10px 24px rgba(0,0,0,0.18); }
+.fab:active { transform: translateY(0) scale(0.94); box-shadow: 0 3px 8px rgba(0,0,0,0.2); }
 .fab { z-index: 2; }
 
 /* --- MODAL --- */
 .modal-overlay {
-    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
     background-color: rgba(44, 35, 25, 0.6); z-index: 200; align-items: center; justify-content: center; backdrop-filter: blur(2px);
+    display: flex; opacity: 0; visibility: hidden; pointer-events: none;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
 }
-.modal-overlay.active { display: flex; }
+.modal-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; }
 .modal-content {
     background: var(--modal-bg); color: var(--text);
     padding: 25px; border-radius: 20px; width: 85%; max-width: 400px; 
-    animation: popIn 0.2s ease-out; box-shadow: var(--shadow); border: 1px solid var(--border);
+    animation: none; box-shadow: var(--shadow); border: 1px solid var(--border);
+    transform-origin: center;
+}
+.modal-overlay.active .modal-content { animation: modalIn 0.32s ease; }
+@keyframes modalIn { 
+    0% { transform: translateY(10px) scale(0.96); opacity: 0; } 
+    60% { transform: translateY(-4px) scale(1.02); opacity: 1; } 
+    100% { transform: translateY(0) scale(1); opacity: 1; } 
 }
-@keyframes popIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
 .modal-title { margin: 0 0 15px 0; font-size: 1.3rem; color: var(--text); font-weight: 800; }
 .modal-input {
     width: 100%; padding: 15px; font-size: 1.2rem;
@@ -360,12 +415,86 @@ button:active { transform: scale(0.97); box-shadow: none; }
     height: clamp(760px, 1200px, 1200px);
     background: url('textures/mushroom.svg') no-repeat center bottom;
     background-size: cover;
-    opacity: 0.65;
+    opacity: 1;
     width: 125vw;
     pointer-events: none;
     z-index: 0;
 }
 
+.firefly-wrap {
+    position: fixed;
+    left: -12vw;
+    width: 28px;
+    height: 28px;
+    animation: fireflyGlide var(--fly-duration, 14s) linear forwards;
+    z-index: 5; /* Float above content but below header */
+    pointer-events: none;
+}
+.firefly {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(255,245,200,0.9) 0%, rgba(255,245,200,0.4) 45%, rgba(255,245,200,0.1) 70%, rgba(255,245,200,0) 85%);
+    opacity: 0.9;
+    mix-blend-mode: screen;
+    filter: blur(1px) drop-shadow(0 0 14px rgba(255, 245, 200, 0.8)) brightness(1.15);
+    animation: fireflyFlutter 1.6s ease-in-out infinite alternate, fireflyFlicker 1.1s ease-in-out infinite alternate;
+}
+
+.seed-wrap {
+    position: fixed;
+    width: 36px;
+    height: 36px;
+    animation: seedGlide var(--seed-duration, 16s) linear forwards;
+    z-index: 5;
+    pointer-events: none;
+}
+.seed {
+    width: 200px;
+    height: 200px;
+    background: url('textures/seed.svg') no-repeat center/contain;
+    opacity: 0.4;
+    mix-blend-mode: screen;
+    filter: drop-shadow(0 4px 10px rgba(200, 190, 160, 0.55));
+    animation: seedDrift 2.6s ease-in-out infinite alternate, seedFlicker 1.4s ease-in-out infinite alternate;
+}
+@keyframes fireflyGlide {
+    0% { transform: translate3d(-10vw, 0, 0) scale(var(--fly-scale, 1)); opacity: 0; }
+    12% { opacity: 0.55; }
+    35% { transform: translate3d(25vw, -6px, 0) scale(var(--fly-scale, 1)); opacity: 0.65; }
+    65% { transform: translate3d(65vw, 6px, 0) scale(var(--fly-scale, 1)); opacity: 0.55; }
+    90% { opacity: 0.35; }
+    100% { transform: translate3d(110vw, 0, 0) scale(var(--fly-scale, 1)); opacity: 0; }
+}
+@keyframes fireflyFlutter {
+    0% { transform: translateY(-2px) translateX(-3px) scale(0.95); }
+    50% { transform: translateY(3px) translateX(2px) scale(1.05); }
+    100% { transform: translateY(-2px) translateX(1px) scale(0.97); }
+}
+@keyframes fireflyFlicker {
+    0% { opacity: 0.65; filter: blur(1px) drop-shadow(0 0 10px rgba(255,245,200,0.65)); }
+    50% { opacity: 1; filter: blur(0.5px) drop-shadow(0 0 16px rgba(255,245,200,1)); }
+    100% { opacity: 0.75; filter: blur(1px) drop-shadow(0 0 12px rgba(255,245,200,0.75)); }
+}
+
+@keyframes seedGlide {
+    0% { transform: translate3d(var(--seed-start, -12vw), 0, 0) scale(var(--seed-scale, 1)); opacity: 0; }
+    10% { opacity: 0.35; }
+    40% { transform: translate3d(calc(var(--seed-mid, 30vw)), -10px, 0) scale(var(--seed-scale, 1)); opacity: 0.5; }
+    70% { transform: translate3d(calc(var(--seed-mid, 30vw) * 2), 8px, 0) scale(var(--seed-scale, 1)); opacity: 0.4; }
+    100% { transform: translate3d(var(--seed-end, 110vw), -6px, 0) scale(var(--seed-scale, 1)); opacity: 0; }
+}
+@keyframes seedDrift {
+    0% { transform: translateY(-4px) translateX(calc(var(--seed-sway, 6px) * -1)) rotate(calc(var(--seed-tilt, 10deg) * -0.6)) scale(0.94); opacity: 0.65; }
+    50% { transform: translateY(5px) translateX(calc(var(--seed-sway, 6px) * 0.8)) rotate(calc(var(--seed-tilt, 10deg))) scale(1.05); opacity: 0.9; }
+    100% { transform: translateY(-3px) translateX(calc(var(--seed-sway, 6px) * 0.4)) rotate(calc(var(--seed-tilt, 10deg) * 0.2)) scale(0.97); opacity: 0.7; }
+}
+@keyframes seedFlicker {
+    0% { opacity: 0.65; filter: drop-shadow(0 2px 4px rgba(200,190,160,0.35)); }
+    50% { opacity: 0.9; filter: drop-shadow(0 4px 8px rgba(200,190,160,0.5)); }
+    100% { opacity: 0.7; filter: drop-shadow(0 3px 6px rgba(200,190,160,0.4)); }
+}
+
 @media (max-width: 768px) {
     .footer-bg {
         bottom: -40px;
@@ -394,6 +523,7 @@ button:active { transform: scale(0.97); box-shadow: none; }
     justify-content: center;
     z-index: 300;
     padding: 20px;
+    animation: overlayFade 0.22s ease;
 }
 
 .swal-dialog {
@@ -406,6 +536,7 @@ button:active { transform: scale(0.97); box-shadow: none; }
     border: 1px solid var(--border);
     text-align: center;
     position: relative;
+    animation: dialogPop 0.28s ease;
 }
 
 .swal-title {
@@ -431,3 +562,9 @@ button:active { transform: scale(0.97); box-shadow: none; }
 .swal-confirm { background: var(--project-color); color: var(--card-bg); }
 .swal-cancel { background: var(--lock-btn-bg); color: var(--text); }
 .swal-danger { background: var(--danger); color: var(--card-bg); }
+@keyframes overlayFade { from { opacity: 0; } to { opacity: 1; } }
+@keyframes dialogPop { 
+    0% { transform: translateY(8px) scale(0.96); opacity: 0; } 
+    60% { transform: translateY(-3px) scale(1.02); opacity: 1; } 
+    100% { transform: translateY(0) scale(1); opacity: 1; } 
+}

index.html

@@ -20,7 +20,7 @@
 <header>
     <div class="brand">
         <img class="brand-icon" src="assets/icons/favicon-96x96.png" alt="Toadstool Cottage Counter icon">
-        <h1>Toadstool Cottage Counter</h1>
+        <h1 id="appTitle">Toadstool Cottage Counter</h1>
     </div>
     <div class="header-controls">
         <button class="header-btn hidden" id="installBtn" title="Install app">⬇️</button>