Implemented guest-only PWA using vite-plugin-pwa (the actual published package; @vite-pwa/plugin isn’t on npm) with

injectManifest, a new typed SW source, runtime caching, and a non‑blocking update toast with an action button. The
  guest shell now links a dedicated manifest and theme color, and background upload sync is managed in a single
  PwaManager component.

  Key changes (where/why)

  - vite.config.ts: added VitePWA injectManifest config, guest manifest, and output to /public so the SW can control /
    scope.
  - resources/js/guest/guest-sw.ts: new Workbox SW (precache + runtime caching for guest navigation, GET /api/v1/*,
    images, fonts) and preserves push/sync/notification logic.
  - resources/js/guest/components/PwaManager.tsx: registers SW, shows update/offline toasts, and processes the upload
    queue on sync/online.
  - resources/js/guest/components/ToastHost.tsx: action-capable toasts so update prompts can include a CTA.
  - resources/js/guest/i18n/messages.ts: added common.updateAvailable, common.updateAction, common.offlineReady.
  - resources/views/guest.blade.php: manifest + theme color + apple touch icon.
  - .gitignore: ignore generated public/guest-sw.js and public/guest.webmanifest; public/guest-sw.js removed since it’s
    now build output.

resources/js/guest/pages/HomePage.tsx

@@ -7,12 +7,13 @@ import { Avatar, AvatarFallback } from '@/components/ui/avatar';
 import { Progress } from '@/components/ui/progress';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Separator } from '@/components/ui/separator';
+import { AnimatePresence, motion } from 'framer-motion';
 import EmotionPicker from '../components/EmotionPicker';
 import GalleryPreview from '../components/GalleryPreview';
 import { useGuestIdentity } from '../context/GuestIdentityContext';
 import { useEventData } from '../hooks/useEventData';
 import { useGuestTaskProgress } from '../hooks/useGuestTaskProgress';
-import { Camera, ChevronDown, Sparkles, UploadCloud, X, RefreshCw, Timer } from 'lucide-react';
+import { ArrowLeft, ArrowRight, Camera, ChevronDown, Sparkles, UploadCloud, X, RefreshCw, Timer } from 'lucide-react';
 import { useTranslation, type TranslateFn } from '../i18n/useTranslation';
 import { useEventBranding } from '../context/EventBrandingContext';
 import type { EventBranding } from '../types/event-branding';
@@ -25,6 +26,7 @@ import { getDeviceId } from '../lib/device';
 import { useDirectUpload } from '../hooks/useDirectUpload';
 import { useNavigate } from 'react-router-dom';
 import { isTaskModeEnabled } from '../lib/engagement';
+import { FADE_SCALE, FADE_UP, STAGGER_FAST, getMotionContainerProps, getMotionItemProps, prefersReducedMotion } from '../lib/motion';
 
 export default function HomePage() {
   const { token } = useParams<{ token: string }>();
@@ -74,6 +76,10 @@ export default function HomePage() {
   const uploadsRequireApproval =
     (event?.guest_upload_visibility as 'immediate' | 'review' | undefined) !== 'immediate';
   const tasksEnabled = isTaskModeEnabled(event);
+  const motionEnabled = !prefersReducedMotion();
+  const containerMotion = getMotionContainerProps(motionEnabled, STAGGER_FAST);
+  const fadeUpMotion = getMotionItemProps(motionEnabled, FADE_UP);
+  const fadeScaleMotion = getMotionItemProps(motionEnabled, FADE_SCALE);
 
   const [missionDeck, setMissionDeck] = React.useState<MissionPreview[]>([]);
   const [missionPool, setMissionPool] = React.useState<MissionPreview[]>([]);
@@ -288,15 +294,19 @@ export default function HomePage() {
 
   if (!tasksEnabled) {
     return (
-      <div className="space-y-3 pb-24" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
-        <section className="space-y-1 px-4" style={headingFont ? { fontFamily: headingFont } : undefined}>
+      <motion.div className="space-y-3 pb-24" style={bodyFont ? { fontFamily: bodyFont } : undefined} {...containerMotion}>
+        <motion.section
+          className="space-y-1 px-4"
+          style={headingFont ? { fontFamily: headingFont } : undefined}
+          {...fadeUpMotion}
+        >
           <p className="text-sm font-semibold text-foreground">
             {t('home.welcomeLine').replace('{name}', displayName)}
           </p>
           {introMessage && <p className="text-xs text-muted-foreground">{introMessage}</p>}
-        </section>
+        </motion.section>
 
-        <section className="space-y-2 px-4">
+        <motion.section className="space-y-2 px-4" {...fadeUpMotion}>
           <UploadActionCard
             token={token}
             accentColor={accentColor}
@@ -305,18 +315,26 @@ export default function HomePage() {
             bodyFont={bodyFont}
             requiresApproval={uploadsRequireApproval}
           />
-        </section>
+        </motion.section>
 
-        <Separator />
+        <motion.div {...fadeUpMotion}>
+          <Separator />
+        </motion.div>
 
-        <GalleryPreview token={token} />
-      </div>
+        <motion.div {...fadeUpMotion}>
+          <GalleryPreview token={token} />
+        </motion.div>
+      </motion.div>
     );
   }
 
   return (
-    <div className="space-y-0.5 pb-24" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
-      <section className="space-y-1 px-4" style={headingFont ? { fontFamily: headingFont } : undefined}>
+    <motion.div className="space-y-0.5 pb-24" style={bodyFont ? { fontFamily: bodyFont } : undefined} {...containerMotion}>
+      <motion.section
+        className="space-y-1 px-4"
+        style={headingFont ? { fontFamily: headingFont } : undefined}
+        {...fadeUpMotion}
+      >
         <p className="text-sm font-semibold text-foreground">
           {t('home.welcomeLine').replace('{name}', displayName)}
         </p>
@@ -325,22 +343,24 @@ export default function HomePage() {
             {introMessage}
           </p>
         )}
-      </section>
+      </motion.section>
 
       {heroVisible && (
-        <HeroCard
-          name={displayName}
-          eventName={eventNameDisplay}
-          tasksCompleted={completedCount}
-          t={t}
-          branding={branding}
-          onDismiss={dismissHero}
-          ctaLabel={t('home.actions.items.tasks.label')}
-          ctaHref={`/e/${encodeURIComponent(token)}/tasks`}
-        />
+        <motion.div {...fadeScaleMotion}>
+          <HeroCard
+            name={displayName}
+            eventName={eventNameDisplay}
+            tasksCompleted={completedCount}
+            t={t}
+            branding={branding}
+            onDismiss={dismissHero}
+            ctaLabel={t('home.actions.items.tasks.label')}
+            ctaHref={`/e/${encodeURIComponent(token)}/tasks`}
+          />
+        </motion.div>
       )}
 
-      <section className="space-y-0.5" style={headingFont ? { fontFamily: headingFont } : undefined}>
+      <motion.section className="space-y-0.5" style={headingFont ? { fontFamily: headingFont } : undefined} {...fadeUpMotion}>
         <div className="space-y-0.5">
           <MissionActionCard
             token={token}
@@ -349,6 +369,7 @@ export default function HomePage() {
             onAdvance={advanceDeck}
             stack={missionDeck.slice(1)}
             initialIndex={poolIndexRef.current}
+            swipeHintLabel={t('home.swipeHint')}
             onIndexChange={(idx, total) => {
               poolIndexRef.current = idx % Math.max(1, total);
               if (sliderStateKey && typeof window !== 'undefined') {
@@ -371,12 +392,16 @@ export default function HomePage() {
           />
           <EmotionActionCard />
         </div>
-      </section>
+      </motion.section>
 
-      <Separator />
+      <motion.div {...fadeUpMotion}>
+        <Separator />
+      </motion.div>
 
-      <GalleryPreview token={token} />
-    </div>
+      <motion.div {...fadeUpMotion}>
+        <GalleryPreview token={token} />
+      </motion.div>
+    </motion.div>
   );
 }
 
@@ -462,6 +487,7 @@ export function MissionActionCard({
   initialIndex,
   onIndexChange,
   swiperRef,
+  swipeHintLabel,
 }: {
   token: string;
   mission: MissionPreview | null;
@@ -471,6 +497,7 @@ export function MissionActionCard({
   initialIndex: number;
   onIndexChange: (index: number, total: number) => void;
   swiperRef: React.MutableRefObject<any>;
+  swipeHintLabel?: string;
 }) {
   const { branding } = useEventBranding();
   const radius = branding.buttons?.radius ?? 12;
@@ -486,6 +513,64 @@ export function MissionActionCard({
   const lastSlideIndexRef = React.useRef<number>(initialIndex);
   const titleRefs = React.useRef(new Map<number, HTMLParagraphElement | null>());
   const [expandableTitles, setExpandableTitles] = React.useState<Record<number, boolean>>({});
+  const [showSwipeHint, setShowSwipeHint] = React.useState(false);
+  const hintTimeoutRef = React.useRef<number | null>(null);
+  const hintStorageKey = token ? `guestMissionSwipeHintSeen_${token}` : 'guestMissionSwipeHintSeen';
+  const motionEnabled = !prefersReducedMotion();
+  const shouldShowHint = motionEnabled && cards.length > 1 && Boolean(swipeHintLabel);
+
+  const dismissSwipeHint = React.useCallback((persist = true) => {
+    if (!showSwipeHint) {
+      return;
+    }
+    setShowSwipeHint(false);
+    if (hintTimeoutRef.current) {
+      window.clearTimeout(hintTimeoutRef.current);
+      hintTimeoutRef.current = null;
+    }
+    if (persist && typeof window !== 'undefined') {
+      try {
+        window.sessionStorage.setItem(hintStorageKey, '1');
+      } catch {
+        // ignore storage exceptions
+      }
+    }
+  }, [hintStorageKey, showSwipeHint]);
+
+  React.useEffect(() => {
+    if (!shouldShowHint) {
+      setShowSwipeHint(false);
+      return;
+    }
+    if (typeof window === 'undefined') {
+      return;
+    }
+    try {
+      if (window.sessionStorage.getItem(hintStorageKey)) {
+        setShowSwipeHint(false);
+        return;
+      }
+    } catch {
+      // ignore storage exceptions
+    }
+
+    setShowSwipeHint(true);
+    hintTimeoutRef.current = window.setTimeout(() => {
+      setShowSwipeHint(false);
+      try {
+        window.sessionStorage.setItem(hintStorageKey, '1');
+      } catch {
+        // ignore storage exceptions
+      }
+    }, 3200);
+
+    return () => {
+      if (hintTimeoutRef.current) {
+        window.clearTimeout(hintTimeoutRef.current);
+        hintTimeoutRef.current = null;
+      }
+    };
+  }, [hintStorageKey, shouldShowHint]);
 
   const measureTitleOverflow = React.useCallback(() => {
     setExpandableTitles((prev) => {
@@ -686,7 +771,10 @@ export function MissionActionCard({
               type="button"
               variant="secondary"
               className="w-full border border-slate-200 bg-white/80 text-slate-800 shadow-sm backdrop-blur"
-              onClick={onAdvance}
+              onClick={() => {
+                dismissSwipeHint();
+                onAdvance();
+              }}
               disabled={loading}
               style={{
                 borderRadius: `${radius}px`,
@@ -708,6 +796,33 @@ export function MissionActionCard({
     <Card className="border-0 bg-transparent py-2 shadow-none" style={{ fontFamily: bodyFont }}>
       <CardContent className="px-0 py-0">
         <div className="relative min-h-[240px] px-2 sm:min-h-[260px]" data-testid="mission-card-stack">
+          <AnimatePresence initial={false}>
+            {showSwipeHint ? (
+              <motion.div
+                className="pointer-events-none absolute inset-x-0 bottom-2 z-10 flex justify-center"
+                initial={{ opacity: 0, y: 6 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: 6 }}
+                transition={{ duration: 0.2, ease: [0.22, 0.61, 0.36, 1] }}
+              >
+                <div className="flex items-center gap-2 rounded-full border border-white/40 bg-white/85 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-700 shadow-sm backdrop-blur">
+                  <motion.span
+                    animate={{ x: [-6, 0, -6] }}
+                    transition={{ duration: 1.6, repeat: Infinity, ease: 'easeInOut' }}
+                  >
+                    <ArrowLeft className="h-3.5 w-3.5" aria-hidden />
+                  </motion.span>
+                  <span>{swipeHintLabel}</span>
+                  <motion.span
+                    animate={{ x: [6, 0, 6] }}
+                    transition={{ duration: 1.6, repeat: Infinity, ease: 'easeInOut' }}
+                  >
+                    <ArrowRight className="h-3.5 w-3.5" aria-hidden />
+                  </motion.span>
+                </div>
+              </motion.div>
+            ) : null}
+          </AnimatePresence>
           <Swiper
             effect="cards"
             modules={[EffectCards]}
@@ -731,6 +846,7 @@ export function MissionActionCard({
               const realIndex = typeof instance.realIndex === 'number' ? instance.realIndex : instance.activeIndex ?? 0;
               if (realIndex !== lastSlideIndexRef.current) {
                 setExpandedTaskId(null);
+                dismissSwipeHint();
               }
               lastSlideIndexRef.current = realIndex;
               onIndexChange(realIndex, slides.length);