diff --git a/backend/src/services/file.js b/backend/src/services/file.js
index 1576e00..3ba884b 100644
--- a/backend/src/services/file.js
+++ b/backend/src/services/file.js
@@ -335,6 +335,38 @@ const uploadFile = async (folder, req, res) => {
   }
 };
 
+/**
+ * Parse Range header value
+ * @param {string} rangeHeader - Range header value (e.g., "bytes=0-1000")
+ * @param {number} totalSize - Total file size
+ * @returns {{start: number, end: number} | null}
+ */
+const parseRangeHeader = (rangeHeader, totalSize) => {
+  if (!rangeHeader || !rangeHeader.startsWith('bytes=')) return null;
+
+  const range = rangeHeader.slice(6); // Remove "bytes="
+  const parts = range.split('-');
+
+  let start = parseInt(parts[0], 10);
+  let end = parts[1] ? parseInt(parts[1], 10) : totalSize - 1;
+
+  // Handle suffix ranges (e.g., bytes=-500 means last 500 bytes)
+  if (isNaN(start)) {
+    start = totalSize - end;
+    end = totalSize - 1;
+  }
+
+  // Validate range
+  if (isNaN(start) || isNaN(end) || start > end || start >= totalSize) {
+    return null;
+  }
+
+  // Cap end to file size
+  end = Math.min(end, totalSize - 1);
+
+  return { start, end };
+};
+
 const downloadFile = async (req, res) => {
   const provider = getFileStorageProvider();
   const privateUrl = req.query.privateUrl;
@@ -359,6 +391,7 @@ const downloadFile = async (req, res) => {
   }
 
   res.setHeader('Cross-Origin-Resource-Policy', 'cross-origin');
+  res.setHeader('Accept-Ranges', 'bytes');
 
   // Create AbortController for request cancellation
   const abortController = new AbortController();
@@ -393,14 +426,6 @@ const downloadFile = async (req, res) => {
             return res.status(304).end();
           }
 
-          // Set caching headers
-          res.setHeader('ETag', etag);
-          res.setHeader(
-            'Cache-Control',
-            `public, max-age=${config.s3CacheMaxAge}`,
-          );
-          res.setHeader('Content-Length', stats.size);
-
           // Determine content type from extension
           const ext = path.extname(privateUrl).toLowerCase();
           const mimeTypes = {
@@ -421,12 +446,84 @@ const downloadFile = async (req, res) => {
             res.setHeader('Content-Type', mimeTypes[ext]);
           }
 
+          // Handle Range requests for cached files
+          const rangeHeader = req.headers.range;
+          if (rangeHeader) {
+            const range = parseRangeHeader(rangeHeader, stats.size);
+            if (range) {
+              const { start, end } = range;
+              const chunkSize = end - start + 1;
+
+              res.status(206);
+              res.setHeader('Content-Range', `bytes ${start}-${end}/${stats.size}`);
+              res.setHeader('Content-Length', chunkSize);
+              res.setHeader('ETag', etag);
+              res.setHeader('Cache-Control', `public, max-age=${config.s3CacheMaxAge}`);
+
+              return fs.createReadStream(cachePath, { start, end }).pipe(res);
+            }
+            // Invalid range - return 416
+            res.setHeader('Content-Range', `bytes */${stats.size}`);
+            return res.status(416).end();
+          }
+
+          // Set caching headers for full file
+          res.setHeader('ETag', etag);
+          res.setHeader(
+            'Cache-Control',
+            `public, max-age=${config.s3CacheMaxAge}`,
+          );
+          res.setHeader('Content-Length', stats.size);
+
           // Stream from cache
           return fs.createReadStream(cachePath).pipe(res);
         }
       }
 
-      // Download from S3
+      // Handle Range requests for S3 (bypass cache for partial requests)
+      const rangeHeader = req.headers.range;
+      if (rangeHeader) {
+        // For Range requests, we need to get file size first via headObject
+        const headResult = await s3.download(privateUrl, { signal, headOnly: true });
+        const totalSize = headResult.contentLength;
+
+        if (!totalSize) {
+          log.warn({ privateUrl }, 'Cannot determine file size for range request');
+          return res.status(500).send(createErrorResponse('Cannot determine file size', 'SIZE_UNKNOWN'));
+        }
+
+        const range = parseRangeHeader(rangeHeader, totalSize);
+        if (!range) {
+          res.setHeader('Content-Range', `bytes */${totalSize}`);
+          return res.status(416).end();
+        }
+
+        const { start, end } = range;
+        const chunkSize = end - start + 1;
+
+        // Download range from S3
+        const rangeResult = await s3.download(privateUrl, {
+          signal,
+          range: `bytes=${start}-${end}`,
+        });
+
+        res.status(206);
+        res.setHeader('Content-Range', `bytes ${start}-${end}/${totalSize}`);
+        res.setHeader('Content-Length', chunkSize);
+        if (rangeResult.contentType) res.setHeader('Content-Type', rangeResult.contentType);
+        res.setHeader('Cache-Control', `public, max-age=${config.s3CacheMaxAge}`);
+
+        if (typeof rangeResult.body.pipe === 'function') {
+          return rangeResult.body.pipe(res);
+        } else if (typeof rangeResult.body.transformToByteArray === 'function') {
+          const bytes = await rangeResult.body.transformToByteArray();
+          return res.send(Buffer.from(bytes));
+        } else {
+          return res.send(rangeResult.body);
+        }
+      }
+
+      // Download from S3 (full file)
       const result = await s3.download(privateUrl, { signal });
 
       if (result.contentType) res.setHeader('Content-Type', result.contentType);
@@ -537,7 +634,58 @@ const downloadFile = async (req, res) => {
           .send(createErrorResponse('File not found', 'NOT_FOUND'));
       }
     } else {
-      res.download(path.join(config.uploadDir, privateUrl));
+      // Local storage - support Range requests for video streaming
+      const localFilePath = path.join(config.uploadDir, privateUrl);
+
+      if (!fs.existsSync(localFilePath)) {
+        return res.status(404).send(createErrorResponse('File not found', 'NOT_FOUND'));
+      }
+
+      const stats = fs.statSync(localFilePath);
+      const totalSize = stats.size;
+
+      // Determine content type from extension
+      const ext = path.extname(privateUrl).toLowerCase();
+      const mimeTypes = {
+        '.jpg': 'image/jpeg',
+        '.jpeg': 'image/jpeg',
+        '.png': 'image/png',
+        '.gif': 'image/gif',
+        '.webp': 'image/webp',
+        '.svg': 'image/svg+xml',
+        '.ico': 'image/x-icon',
+        '.mp4': 'video/mp4',
+        '.webm': 'video/webm',
+        '.mp3': 'audio/mpeg',
+        '.wav': 'audio/wav',
+        '.pdf': 'application/pdf',
+      };
+      if (mimeTypes[ext]) {
+        res.setHeader('Content-Type', mimeTypes[ext]);
+      }
+
+      // Handle Range requests
+      const rangeHeader = req.headers.range;
+      if (rangeHeader) {
+        const range = parseRangeHeader(rangeHeader, totalSize);
+        if (range) {
+          const { start, end } = range;
+          const chunkSize = end - start + 1;
+
+          res.status(206);
+          res.setHeader('Content-Range', `bytes ${start}-${end}/${totalSize}`);
+          res.setHeader('Content-Length', chunkSize);
+
+          return fs.createReadStream(localFilePath, { start, end }).pipe(res);
+        }
+        // Invalid range - return 416
+        res.setHeader('Content-Range', `bytes */${totalSize}`);
+        return res.status(416).end();
+      }
+
+      // Full file download
+      res.setHeader('Content-Length', totalSize);
+      return fs.createReadStream(localFilePath).pipe(res);
     }
   } catch (error) {
     // Don't log abort errors as they're expected when client disconnects
diff --git a/backend/src/services/file/S3StorageProvider.js b/backend/src/services/file/S3StorageProvider.js
index 990cb47..20ed25e 100644
--- a/backend/src/services/file/S3StorageProvider.js
+++ b/backend/src/services/file/S3StorageProvider.js
@@ -227,18 +227,44 @@ class S3StorageProvider extends BaseStorageProvider {
    * @param {string} key - Storage key/path
    * @param {Object} [options] - Download options
    * @param {AbortSignal} [options.signal] - AbortController signal for cancellation
+   * @param {boolean} [options.headOnly] - Only get metadata (HEAD request)
+   * @param {string} [options.range] - HTTP Range header value (e.g., "bytes=0-1000")
    * @returns {Promise<{ body: ReadableStream, contentType?: string, contentLength?: number }>}
    */
   async download(key, options = {}) {
     const fullKey = this.buildKey(key);
-    const { signal } = options;
+    const { signal, headOnly, range } = options;
 
     const sendOptions = signal ? { abortSignal: signal } : {};
+
+    // HEAD request for metadata only
+    if (headOnly) {
+      const output = await this.client.send(
+        new HeadObjectCommand({
+          Bucket: this.bucket,
+          Key: fullKey,
+        }),
+        sendOptions,
+      );
+      return {
+        body: null,
+        contentType: output.ContentType,
+        contentLength: output.ContentLength,
+      };
+    }
+
+    // Build GetObjectCommand with optional Range header
+    const commandParams = {
+      Bucket: this.bucket,
+      Key: fullKey,
+    };
+
+    if (range) {
+      commandParams.Range = range;
+    }
+
     const output = await this.client.send(
-      new GetObjectCommand({
-        Bucket: this.bucket,
-        Key: fullKey,
-      }),
+      new GetObjectCommand(commandParams),
       sendOptions,
     );
 
diff --git a/frontend/public/sw.js b/frontend/public/sw.js
index 8ee50ae..dddd0b6 100644
--- a/frontend/public/sw.js
+++ b/frontend/public/sw.js
@@ -1,2 +1,2 @@
 (()=>{"use strict";let e,t,a,s={googleAnalytics:"googleAnalytics",precache:"precache-v2",prefix:"serwist",runtime:"runtime",suffix:"undefined"!=typeof registration?registration.scope:""},r=e=>[s.prefix,e,s.suffix].filter(e=>e&&e.length>0).join("-"),n={updateDetails:e=>{var t=t=>{let a=e[t];"string"==typeof a&&(s[t]=a)};for(let e of Object.keys(s))t(e)},getGoogleAnalyticsName:e=>e||r(s.googleAnalytics),getPrecacheName:e=>e||r(s.precache),getRuntimeName:e=>e||r(s.runtime)};class i extends Error{details;constructor(e,t){super(((e,...t)=>{let a=e;return t.length>0&&(a+=` :: ${JSON.stringify(t)}`),a})(e,t)),this.name=e,this.details=t}}function c(e){return new Promise(t=>setTimeout(t,e))}let o=new Set;function l(e,t){let a=new URL(e);for(let e of t)a.searchParams.delete(e);return a.href}async function h(e,t,a,s){let r=l(t.url,a);if(t.url===r)return e.match(t,s);let n={...s,ignoreSearch:!0};for(let i of(await e.keys(t,n)))if(r===l(i.url,a))return e.match(i,s)}class u{promise;resolve;reject;constructor(){this.promise=new Promise((e,t)=>{this.resolve=e,this.reject=t})}}let d=async()=>{for(let e of o)await e()},m="-precache-",g=async(e,t=m)=>{let a=(await self.caches.keys()).filter(a=>a.includes(t)&&a.includes(self.registration.scope)&&a!==e);return await Promise.all(a.map(e=>self.caches.delete(e))),a},p=(e,t)=>{let a=t();return e.waitUntil(a),a},f=(e,t)=>t.some(t=>e instanceof t),w=new WeakMap,y=new WeakMap,_=new WeakMap,b={get(e,t,a){if(e instanceof IDBTransaction){if("done"===t)return w.get(e);if("store"===t)return a.objectStoreNames[1]?void 0:a.objectStore(a.objectStoreNames[0])}return R(e[t])},set:(e,t,a)=>(e[t]=a,!0),has:(e,t)=>e instanceof IDBTransaction&&("done"===t||"store"===t)||t in e};function R(e){if(e instanceof IDBRequest){let t=new Promise((t,a)=>{let s=()=>{e.removeEventListener("success",r),e.removeEventListener("error",n)},r=()=>{t(R(e.result)),s()},n=()=>{a(e.error),s()};e.addEventListener("success",r),e.addEventListener("error",n)});return _.set(t,e),t}if(y.has(e))return y.get(e);let s=function(e){if("function"==typeof e)return(a||(a=[IDBCursor.prototype.advance,IDBCursor.prototype.continue,IDBCursor.prototype.continuePrimaryKey])).includes(e)?function(...t){return e.apply(v(this),t),R(this.request)}:function(...t){return R(e.apply(v(this),t))};return(e instanceof IDBTransaction&&function(e){if(w.has(e))return;let t=new Promise((t,a)=>{let s=()=>{e.removeEventListener("complete",r),e.removeEventListener("error",n),e.removeEventListener("abort",n)},r=()=>{t(),s()},n=()=>{a(e.error||new DOMException("AbortError","AbortError")),s()};e.addEventListener("complete",r),e.addEventListener("error",n),e.addEventListener("abort",n)});w.set(e,t)}(e),f(e,t||(t=[IDBDatabase,IDBObjectStore,IDBIndex,IDBCursor,IDBTransaction])))?new Proxy(e,b):e}(e);return s!==e&&(y.set(e,s),_.set(s,e)),s}let v=e=>_.get(e);function x(e,t,{blocked:a,upgrade:s,blocking:r,terminated:n}={}){let i=indexedDB.open(e,t),c=R(i);return s&&i.addEventListener("upgradeneeded",e=>{s(R(i.result),e.oldVersion,e.newVersion,R(i.transaction),e)}),a&&i.addEventListener("blocked",e=>a(e.oldVersion,e.newVersion,e)),c.then(e=>{n&&e.addEventListener("close",()=>n()),r&&e.addEventListener("versionchange",e=>r(e.oldVersion,e.newVersion,e))}).catch(()=>{}),c}let E=["get","getKey","getAll","getAllKeys","count"],S=["put","add","delete","clear"],q=new Map;function C(e,t){if(!(e instanceof IDBDatabase&&!(t in e)&&"string"==typeof t))return;if(q.get(t))return q.get(t);let a=t.replace(/FromIndex$/,""),s=t!==a,r=S.includes(a);if(!(a in(s?IDBIndex:IDBObjectStore).prototype)||!(r||E.includes(a)))return;let n=async function(e,...t){let n=this.transaction(e,r?"readwrite":"readonly"),i=n.store;return s&&(i=i.index(t.shift())),(await Promise.all([i[a](...t),r&&n.done]))[0]};return q.set(t,n),n}b=(e=>({...e,get:(t,a,s)=>C(t,a)||e.get(t,a,s),has:(t,a)=>!!C(t,a)||e.has(t,a)}))(b);let N=["continue","continuePrimaryKey","advance"],D={},T=new WeakMap,P=new WeakMap,U={get(e,t){if(!N.includes(t))return e[t];let a=D[t];return a||(a=D[t]=function(...e){T.set(this,P.get(this)[t](...e))}),a}};async function*A(...e){let t=this;if(t instanceof IDBCursor||(t=await t.openCursor(...e)),!t)return;let a=new Proxy(t,U);for(P.set(a,t),_.set(a,v(t));t;)yield a,t=await (T.get(a)||t.continue()),T.delete(a)}function k(e,t){return t===Symbol.asyncIterator&&f(e,[IDBIndex,IDBObjectStore,IDBCursor])||"iterate"===t&&f(e,[IDBIndex,IDBObjectStore])}b=(e=>({...e,get:(t,a,s)=>k(t,a)?A:e.get(t,a,s),has:(t,a)=>k(t,a)||e.has(t,a)}))(b);let I=async(t,a)=>{let s=null;if(t.url&&(s=new URL(t.url).origin),s!==self.location.origin)throw new i("cross-origin-copy-response",{origin:s});let r=t.clone(),n={headers:new Headers(r.headers),status:r.status,statusText:r.statusText},c=a?a(n):n,o=!function(){if(void 0===e){let t=new Response("");if("body"in t)try{new Response(t.body),e=!0}catch{e=!1}e=!1}return e}()?await r.blob():r.body;return new Response(o,c)},L="requests",W="queueName";class F{_db=null;async addEntry(e){let t=(await this.getDb()).transaction(L,"readwrite",{durability:"relaxed"});await t.store.add(e),await t.done}async getFirstEntryId(){let e=await this.getDb(),t=await e.transaction(L).store.openCursor();return t?.value.id}async getAllEntriesByQueueName(e){let t=await this.getDb();return await t.getAllFromIndex(L,W,IDBKeyRange.only(e))||[]}async getEntryCountByQueueName(e){return(await this.getDb()).countFromIndex(L,W,IDBKeyRange.only(e))}async deleteEntry(e){let t=await this.getDb();await t.delete(L,e)}async getFirstEntryByQueueName(e){return await this.getEndEntryFromIndex(IDBKeyRange.only(e),"next")}async getLastEntryByQueueName(e){return await this.getEndEntryFromIndex(IDBKeyRange.only(e),"prev")}async getEndEntryFromIndex(e,t){let a=await this.getDb(),s=await a.transaction(L).store.index(W).openCursor(e,t);return s?.value}async getDb(){return this._db||(this._db=await x("serwist-background-sync",3,{upgrade:this._upgradeDb})),this._db}_upgradeDb(e,t){t>0&&t<3&&e.objectStoreNames.contains(L)&&e.deleteObjectStore(L),e.createObjectStore(L,{autoIncrement:!0,keyPath:"id"}).createIndex(W,W,{unique:!1})}}class K{_queueName;_queueDb;constructor(e){this._queueName=e,this._queueDb=new F}async pushEntry(e){delete e.id,e.queueName=this._queueName,await this._queueDb.addEntry(e)}async unshiftEntry(e){let t=await this._queueDb.getFirstEntryId();t?e.id=t-1:delete e.id,e.queueName=this._queueName,await this._queueDb.addEntry(e)}async popEntry(){return this._removeEntry(await this._queueDb.getLastEntryByQueueName(this._queueName))}async shiftEntry(){return this._removeEntry(await this._queueDb.getFirstEntryByQueueName(this._queueName))}async getAll(){return await this._queueDb.getAllEntriesByQueueName(this._queueName)}async size(){return await this._queueDb.getEntryCountByQueueName(this._queueName)}async deleteEntry(e){await this._queueDb.deleteEntry(e)}async _removeEntry(e){return e&&await this.deleteEntry(e.id),e}}let B=["method","referrer","referrerPolicy","mode","credentials","cache","redirect","integrity","keepalive"];class M{_requestData;static async fromRequest(e){let t={url:e.url,headers:{}};for(let a of("GET"!==e.method&&(t.body=await e.clone().arrayBuffer()),e.headers.forEach((e,a)=>{t.headers[a]=e}),B))void 0!==e[a]&&(t[a]=e[a]);return new M(t)}constructor(e){"navigate"===e.mode&&(e.mode="same-origin"),this._requestData=e}toObject(){let e=Object.assign({},this._requestData);return e.headers=Object.assign({},this._requestData.headers),e.body&&(e.body=e.body.slice(0)),e}toRequest(){return new Request(this._requestData.url,this._requestData)}clone(){return new M(this.toObject())}}let O="serwist-background-sync",j=new Set,H=e=>{let t={request:new M(e.requestData).toRequest(),timestamp:e.timestamp};return e.metadata&&(t.metadata=e.metadata),t};class ${_name;_onSync;_maxRetentionTime;_queueStore;_forceSyncFallback;_syncInProgress=!1;_requestsAddedDuringSync=!1;constructor(e,{forceSyncFallback:t,onSync:a,maxRetentionTime:s}={}){if(j.has(e))throw new i("duplicate-queue-name",{name:e});j.add(e),this._name=e,this._onSync=a||this.replayRequests,this._maxRetentionTime=s||10080,this._forceSyncFallback=!!t,this._queueStore=new K(this._name),this._addSyncListener()}get name(){return this._name}async pushRequest(e){await this._addRequest(e,"push")}async unshiftRequest(e){await this._addRequest(e,"unshift")}async popRequest(){return this._removeRequest("pop")}async shiftRequest(){return this._removeRequest("shift")}async getAll(){let e=await this._queueStore.getAll(),t=Date.now(),a=[];for(let s of e){let e=60*this._maxRetentionTime*1e3;t-s.timestamp>e?await this._queueStore.deleteEntry(s.id):a.push(H(s))}return a}async size(){return await this._queueStore.size()}async _addRequest({request:e,metadata:t,timestamp:a=Date.now()},s){let r={requestData:(await M.fromRequest(e.clone())).toObject(),timestamp:a};switch(t&&(r.metadata=t),s){case"push":await this._queueStore.pushEntry(r);break;case"unshift":await this._queueStore.unshiftEntry(r)}this._syncInProgress?this._requestsAddedDuringSync=!0:await this.registerSync()}async _removeRequest(e){let t,a=Date.now();switch(e){case"pop":t=await this._queueStore.popEntry();break;case"shift":t=await this._queueStore.shiftEntry()}if(t){let s=60*this._maxRetentionTime*1e3;return a-t.timestamp>s?this._removeRequest(e):H(t)}}async replayRequests(){let e;for(;e=await this.shiftRequest();)try{await fetch(e.request.clone())}catch{throw await this.unshiftRequest(e),new i("queue-replay-failed",{name:this._name})}}async registerSync(){if("sync"in self.registration&&!this._forceSyncFallback)try{await self.registration.sync.register(`${O}:${this._name}`)}catch(e){}}_addSyncListener(){"sync"in self.registration&&!this._forceSyncFallback?self.addEventListener("sync",e=>{if(e.tag===`${O}:${this._name}`){let t=async()=>{let t;this._syncInProgress=!0;try{await this._onSync({queue:this})}catch(e){if(e instanceof Error)throw e}finally{this._requestsAddedDuringSync&&!(t&&!e.lastChance)&&await this.registerSync(),this._syncInProgress=!1,this._requestsAddedDuringSync=!1}};e.waitUntil(t())}}):this._onSync({queue:this})}static get _queueNames(){return j}}class z{_queue;constructor(e,t){this._queue=new $(e,t)}async fetchDidFail({request:e}){await this._queue.pushRequest({request:e})}}let G={cacheWillUpdate:async({response:e})=>200===e.status||0===e.status?e:null};function V(e){return"string"==typeof e?new Request(e):e}class Q{event;request;url;params;_cacheKeys={};_strategy;_handlerDeferred;_extendLifetimePromises;_plugins;_pluginStateMap;constructor(e,t){for(let a of(this.event=t.event,this.request=t.request,t.url&&(this.url=t.url,this.params=t.params),this._strategy=e,this._handlerDeferred=new u,this._extendLifetimePromises=[],this._plugins=[...e.plugins],this._pluginStateMap=new Map,this._plugins))this._pluginStateMap.set(a,{});this.event.waitUntil(this._handlerDeferred.promise)}async fetch(e){let{event:t}=this,a=V(e),s=await this.getPreloadResponse();if(s)return s;let r=this.hasCallback("fetchDidFail")?a.clone():null;try{for(let e of this.iterateCallbacks("requestWillFetch"))a=await e({request:a.clone(),event:t})}catch(e){if(e instanceof Error)throw new i("plugin-error-request-will-fetch",{thrownErrorMessage:e.message})}let n=a.clone();try{let e;for(let s of(e=await fetch(a,"navigate"===a.mode?void 0:this._strategy.fetchOptions),this.iterateCallbacks("fetchDidSucceed")))e=await s({event:t,request:n,response:e});return e}catch(e){throw r&&await this.runCallbacks("fetchDidFail",{error:e,event:t,originalRequest:r.clone(),request:n.clone()}),e}}async fetchAndCachePut(e){let t=await this.fetch(e),a=t.clone();return this.waitUntil(this.cachePut(e,a)),t}async cacheMatch(e){let t,a=V(e),{cacheName:s,matchOptions:r}=this._strategy,n=await this.getCacheKey(a,"read"),i={...r,cacheName:s};for(let e of(t=await caches.match(n,i),this.iterateCallbacks("cachedResponseWillBeUsed")))t=await e({cacheName:s,matchOptions:r,cachedResponse:t,request:n,event:this.event})||void 0;return t}async cachePut(e,t){let a=V(e);await c(0);let s=await this.getCacheKey(a,"write");if(!t)throw new i("cache-put-with-no-response",{url:new URL(String(s.url),location.href).href.replace(RegExp(`^${location.origin}`),"")});let r=await this._ensureResponseSafeToCache(t);if(!r)return!1;let{cacheName:n,matchOptions:o}=this._strategy,l=await self.caches.open(n),u=this.hasCallback("cacheDidUpdate"),m=u?await h(l,s.clone(),["__WB_REVISION__"],o):null;try{await l.put(s,u?r.clone():r)}catch(e){if(e instanceof Error)throw"QuotaExceededError"===e.name&&await d(),e}for(let e of this.iterateCallbacks("cacheDidUpdate"))await e({cacheName:n,oldResponse:m,newResponse:r.clone(),request:s,event:this.event});return!0}async getCacheKey(e,t){let a=`${e.url} | ${t}`;if(!this._cacheKeys[a]){let s=e;for(let e of this.iterateCallbacks("cacheKeyWillBeUsed"))s=V(await e({mode:t,request:s,event:this.event,params:this.params}));this._cacheKeys[a]=s}return this._cacheKeys[a]}hasCallback(e){for(let t of this._strategy.plugins)if(e in t)return!0;return!1}async runCallbacks(e,t){for(let a of this.iterateCallbacks(e))await a(t)}*iterateCallbacks(e){for(let t of this._strategy.plugins)if("function"==typeof t[e]){let a=this._pluginStateMap.get(t),s=s=>{let r={...s,state:a};return t[e](r)};yield s}}waitUntil(e){return this._extendLifetimePromises.push(e),e}async doneWaiting(){let e;for(;e=this._extendLifetimePromises.shift();)await e}destroy(){this._handlerDeferred.resolve(null)}async getPreloadResponse(){if(this.event instanceof FetchEvent&&"navigate"===this.event.request.mode&&"preloadResponse"in this.event)try{let e=await this.event.preloadResponse;if(e)return e}catch(e){}}async _ensureResponseSafeToCache(e){let t=e,a=!1;for(let e of this.iterateCallbacks("cacheWillUpdate"))if(t=await e({request:this.request,response:t,event:this.event})||void 0,a=!0,!t)break;return!a&&t&&200!==t.status&&(t=void 0),t}}class J{cacheName;plugins;fetchOptions;matchOptions;constructor(e={}){this.cacheName=n.getRuntimeName(e.cacheName),this.plugins=e.plugins||[],this.fetchOptions=e.fetchOptions,this.matchOptions=e.matchOptions}handle(e){let[t]=this.handleAll(e);return t}handleAll(e){e instanceof FetchEvent&&(e={event:e,request:e.request});let t=e.event,a="string"==typeof e.request?new Request(e.request):e.request,s=new Q(this,e.url?{event:t,request:a,url:e.url,params:e.params}:{event:t,request:a}),r=this._getResponse(s,a,t),n=this._awaitComplete(r,s,a,t);return[r,n]}async _getResponse(e,t,a){let s;await e.runCallbacks("handlerWillStart",{event:a,request:t});try{if(s=await this._handle(t,e),void 0===s||"error"===s.type)throw new i("no-response",{url:t.url})}catch(r){if(r instanceof Error){for(let n of e.iterateCallbacks("handlerDidError"))if(void 0!==(s=await n({error:r,event:a,request:t})))break}if(!s)throw r}for(let r of e.iterateCallbacks("handlerWillRespond"))s=await r({event:a,request:t,response:s});return s}async _awaitComplete(e,t,a,s){let r,n;try{r=await e}catch{}try{await t.runCallbacks("handlerDidRespond",{event:s,request:a,response:r}),await t.doneWaiting()}catch(e){e instanceof Error&&(n=e)}if(await t.runCallbacks("handlerDidComplete",{event:s,request:a,response:r,error:n}),t.destroy(),n)throw n}}class X extends J{_networkTimeoutSeconds;constructor(e={}){super(e),this.plugins.some(e=>"cacheWillUpdate"in e)||this.plugins.unshift(G),this._networkTimeoutSeconds=e.networkTimeoutSeconds||0}async _handle(e,t){let a,s=[],r=[];if(this._networkTimeoutSeconds){let{id:n,promise:i}=this._getTimeoutPromise({request:e,logs:s,handler:t});a=n,r.push(i)}let n=this._getNetworkPromise({timeoutId:a,request:e,logs:s,handler:t});r.push(n);let c=await t.waitUntil((async()=>await t.waitUntil(Promise.race(r))||await n)());if(!c)throw new i("no-response",{url:e.url});return c}_getTimeoutPromise({request:e,logs:t,handler:a}){let s;return{promise:new Promise(t=>{s=setTimeout(async()=>{t(await a.cacheMatch(e))},1e3*this._networkTimeoutSeconds)}),id:s}}async _getNetworkPromise({timeoutId:e,request:t,logs:a,handler:s}){let r,n;try{n=await s.fetchAndCachePut(t)}catch(e){e instanceof Error&&(r=e)}return e&&clearTimeout(e),(r||!n)&&(n=await s.cacheMatch(t)),n}}class Y extends J{_networkTimeoutSeconds;constructor(e={}){super(e),this._networkTimeoutSeconds=e.networkTimeoutSeconds||0}async _handle(e,t){let a,s;try{let a=[t.fetch(e)];if(this._networkTimeoutSeconds){let e=c(1e3*this._networkTimeoutSeconds);a.push(e)}if(!(s=await Promise.race(a)))throw Error(`Timed out the network response after ${this._networkTimeoutSeconds} seconds.`)}catch(e){e instanceof Error&&(a=e)}if(!s)throw new i("no-response",{url:e.url,error:a});return s}}let Z=e=>e&&"object"==typeof e?e:{handle:e};class ee{handler;match;method;catchHandler;constructor(e,t,a="GET"){this.handler=Z(t),this.match=e,this.method=a}setCatchHandler(e){this.catchHandler=Z(e)}}class et extends J{_fallbackToNetwork;static defaultPrecacheCacheabilityPlugin={cacheWillUpdate:async({response:e})=>!e||e.status>=400?null:e};static copyRedirectedCacheableResponsesPlugin={cacheWillUpdate:async({response:e})=>e.redirected?await I(e):e};constructor(e={}){e.cacheName=n.getPrecacheName(e.cacheName),super(e),this._fallbackToNetwork=!1!==e.fallbackToNetwork,this.plugins.push(et.copyRedirectedCacheableResponsesPlugin)}async _handle(e,t){let a=await t.getPreloadResponse();if(a)return a;let s=await t.cacheMatch(e);return s||(t.event&&"install"===t.event.type?await this._handleInstall(e,t):await this._handleFetch(e,t))}async _handleFetch(e,t){let a,s=t.params||{};if(this._fallbackToNetwork){let r=s.integrity,n=e.integrity,i=!n||n===r;a=await t.fetch(new Request(e,{integrity:"no-cors"!==e.mode?n||r:void 0})),r&&i&&"no-cors"!==e.mode&&(this._useDefaultCacheabilityPluginIfNeeded(),await t.cachePut(e,a.clone()))}else throw new i("missing-precache-entry",{cacheName:this.cacheName,url:e.url});return a}async _handleInstall(e,t){this._useDefaultCacheabilityPluginIfNeeded();let a=await t.fetch(e);if(!await t.cachePut(e,a.clone()))throw new i("bad-precaching-response",{url:e.url,status:a.status});return a}_useDefaultCacheabilityPluginIfNeeded(){let e=null,t=0;for(let[a,s]of this.plugins.entries())s!==et.copyRedirectedCacheableResponsesPlugin&&(s===et.defaultPrecacheCacheabilityPlugin&&(e=a),s.cacheWillUpdate&&t++);0===t?this.plugins.push(et.defaultPrecacheCacheabilityPlugin):t>1&&null!==e&&this.plugins.splice(e,1)}}class ea extends ee{_allowlist;_denylist;constructor(e,{allowlist:t=[/./],denylist:a=[]}={}){super(e=>this._match(e),e),this._allowlist=t,this._denylist=a}_match({url:e,request:t}){if(t&&"navigate"!==t.mode)return!1;let a=e.pathname+e.search;for(let e of this._denylist)if(e.test(a))return!1;return!!this._allowlist.some(e=>e.test(a))}}class es extends ee{constructor(e,t,a){super(({url:t})=>{let a=e.exec(t.href);if(a)return t.origin!==location.origin&&0!==a.index?void 0:a.slice(1)},t,a)}}let er=e=>{if(!e)throw new i("add-to-cache-list-unexpected-type",{entry:e});if("string"==typeof e){let t=new URL(e,location.href);return{cacheKey:t.href,url:t.href}}let{revision:t,url:a}=e;if(!a)throw new i("add-to-cache-list-unexpected-type",{entry:e});if(!t){let e=new URL(a,location.href);return{cacheKey:e.href,url:e.href}}let s=new URL(a,location.href),r=new URL(a,location.href);return s.searchParams.set("__WB_REVISION__",t),{cacheKey:s.href,url:r.href}};class en{updatedURLs=[];notUpdatedURLs=[];handlerWillStart=async({request:e,state:t})=>{t&&(t.originalRequest=e)};cachedResponseWillBeUsed=async({event:e,state:t,cachedResponse:a})=>{if("install"===e.type&&t?.originalRequest&&t.originalRequest instanceof Request){let e=t.originalRequest.url;a?this.notUpdatedURLs.push(e):this.updatedURLs.push(e)}return a}}let ei=async(e,t,a)=>{let s=t.map((e,t)=>({index:t,item:e})),r=async e=>{let t=[];for(;;){let r=s.pop();if(!r)return e(t);let n=await a(r.item);t.push({result:n,index:r.index})}},n=Array.from({length:e},()=>new Promise(r));return(await Promise.all(n)).flat().sort((e,t)=>e.index<t.index?-1:1).map(e=>e.result)};"undefined"!=typeof navigator&&/^((?!chrome|android).)*safari/i.test(navigator.userAgent);let ec="cache-entries",eo=e=>{let t=new URL(e,location.href);return t.hash="",t.href};class el{_cacheName;_db=null;constructor(e){this._cacheName=e}_getId(e){return`${this._cacheName}|${eo(e)}`}_upgradeDb(e){let t=e.createObjectStore(ec,{keyPath:"id"});t.createIndex("cacheName","cacheName",{unique:!1}),t.createIndex("timestamp","timestamp",{unique:!1})}_upgradeDbAndDeleteOldDbs(e){this._upgradeDb(e),this._cacheName&&function(e,{blocked:t}={}){let a=indexedDB.deleteDatabase(e);t&&a.addEventListener("blocked",e=>t(e.oldVersion,e)),R(a).then(()=>void 0)}(this._cacheName)}async setTimestamp(e,t){e=eo(e);let a={id:this._getId(e),cacheName:this._cacheName,url:e,timestamp:t},s=(await this.getDb()).transaction(ec,"readwrite",{durability:"relaxed"});await s.store.put(a),await s.done}async getTimestamp(e){let t=await this.getDb(),a=await t.get(ec,this._getId(e));return a?.timestamp}async expireEntries(e,t){let a=await this.getDb(),s=await a.transaction(ec,"readwrite").store.index("timestamp").openCursor(null,"prev"),r=[],n=0;for(;s;){let a=s.value;a.cacheName===this._cacheName&&(e&&a.timestamp<e||t&&n>=t?(s.delete(),r.push(a.url)):n++),s=await s.continue()}return r}async getDb(){return this._db||(this._db=await x("serwist-expiration",1,{upgrade:this._upgradeDbAndDeleteOldDbs.bind(this)})),this._db}}class eh{_isRunning=!1;_rerunRequested=!1;_maxEntries;_maxAgeSeconds;_matchOptions;_cacheName;_timestampModel;constructor(e,t={}){this._maxEntries=t.maxEntries,this._maxAgeSeconds=t.maxAgeSeconds,this._matchOptions=t.matchOptions,this._cacheName=e,this._timestampModel=new el(e)}async expireEntries(){if(this._isRunning){this._rerunRequested=!0;return}this._isRunning=!0;let e=this._maxAgeSeconds?Date.now()-1e3*this._maxAgeSeconds:0,t=await this._timestampModel.expireEntries(e,this._maxEntries),a=await self.caches.open(this._cacheName);for(let e of t)await a.delete(e,this._matchOptions);this._isRunning=!1,this._rerunRequested&&(this._rerunRequested=!1,this.expireEntries())}async updateTimestamp(e){await this._timestampModel.setTimestamp(e,Date.now())}async isURLExpired(e){if(!this._maxAgeSeconds)return!1;let t=await this._timestampModel.getTimestamp(e),a=Date.now()-1e3*this._maxAgeSeconds;return void 0===t||t<a}async delete(){this._rerunRequested=!1,await this._timestampModel.expireEntries(1/0)}}class eu{_config;_cacheExpirations;constructor(e={}){var t;this._config=e,this._cacheExpirations=new Map,this._config.maxAgeFrom||(this._config.maxAgeFrom="last-fetched"),this._config.purgeOnQuotaError&&(t=()=>this.deleteCacheAndMetadata(),o.add(t))}_getCacheExpiration(e){if(e===n.getRuntimeName())throw new i("expire-custom-caches-only");let t=this._cacheExpirations.get(e);return t||(t=new eh(e,this._config),this._cacheExpirations.set(e,t)),t}cachedResponseWillBeUsed({event:e,cacheName:t,request:a,cachedResponse:s}){if(!s)return null;let r=this._isResponseDateFresh(s),n=this._getCacheExpiration(t),i="last-used"===this._config.maxAgeFrom,c=(async()=>{i&&await n.updateTimestamp(a.url),await n.expireEntries()})();try{e.waitUntil(c)}catch{}return r?s:null}_isResponseDateFresh(e){if("last-used"===this._config.maxAgeFrom)return!0;let t=Date.now();if(!this._config.maxAgeSeconds)return!0;let a=this._getDateHeaderTimestamp(e);return null===a||a>=t-1e3*this._config.maxAgeSeconds}_getDateHeaderTimestamp(e){if(!e.headers.has("date"))return null;let t=new Date(e.headers.get("date")).getTime();return Number.isNaN(t)?null:t}async cacheDidUpdate({cacheName:e,request:t}){let a=this._getCacheExpiration(e);await a.updateTimestamp(t.url),await a.expireEntries()}async deleteCacheAndMetadata(){for(let[e,t]of this._cacheExpirations)await self.caches.delete(e),await t.delete();this._cacheExpirations=new Map}}let ed="www.google-analytics.com",em="www.googletagmanager.com",eg=/^\/(\w+\/)?collect/,ep=({serwist:e,cacheName:t,...a})=>{let s=n.getGoogleAnalyticsName(t),r=new z("serwist-google-analytics",{maxRetentionTime:2880,onSync:(e=>async({queue:t})=>{let a;for(;a=await t.shiftRequest();){let{request:s,timestamp:r}=a,n=new URL(s.url);try{let t="POST"===s.method?new URLSearchParams(await s.clone().text()):n.searchParams,a=r-(Number(t.get("qt"))||0),i=Date.now()-a;if(t.set("qt",String(i)),e.parameterOverrides)for(let a of Object.keys(e.parameterOverrides)){let s=e.parameterOverrides[a];t.set(a,s)}"function"==typeof e.hitFilter&&e.hitFilter.call(null,t),await fetch(new Request(n.origin+n.pathname,{body:t.toString(),method:"POST",mode:"cors",credentials:"omit",headers:{"Content-Type":"text/plain"}}))}catch(e){throw await t.unshiftRequest(a),e}}})(a)});for(let t of[new ee(({url:e})=>e.hostname===em&&"/gtm.js"===e.pathname,new X({cacheName:s}),"GET"),new ee(({url:e})=>e.hostname===ed&&"/analytics.js"===e.pathname,new X({cacheName:s}),"GET"),new ee(({url:e})=>e.hostname===em&&"/gtag/js"===e.pathname,new X({cacheName:s}),"GET"),...(e=>{let t=({url:e})=>e.hostname===ed&&eg.test(e.pathname),a=new Y({plugins:[e]});return[new ee(t,a,"GET"),new ee(t,a,"POST")]})(r)])e.registerRoute(t)};class ef{_fallbackUrls;_serwist;constructor({fallbackUrls:e,serwist:t}){this._fallbackUrls=e,this._serwist=t}async handlerDidError(e){for(let t of this._fallbackUrls)if("string"==typeof t){let e=await this._serwist.matchPrecache(t);if(void 0!==e)return e}else if(t.matcher(e)){let e=await this._serwist.matchPrecache(t.url);if(void 0!==e)return e}}}let ew=async(e,t)=>{try{if(206===t.status)return t;let a=e.headers.get("range");if(!a)throw new i("no-range-header");let s=(e=>{let t=e.trim().toLowerCase();if(!t.startsWith("bytes="))throw new i("unit-must-be-bytes",{normalizedRangeHeader:t});if(t.includes(","))throw new i("single-range-only",{normalizedRangeHeader:t});let a=/(\d*)-(\d*)/.exec(t);if(!a||!(a[1]||a[2]))throw new i("invalid-range-values",{normalizedRangeHeader:t});return{start:""===a[1]?void 0:Number(a[1]),end:""===a[2]?void 0:Number(a[2])}})(a),r=await t.blob(),n=((e,t,a)=>{let s,r,n=e.size;if(a&&a>n||t&&t<0)throw new i("range-not-satisfiable",{size:n,end:a,start:t});return void 0!==t&&void 0!==a?(s=t,r=a+1):void 0!==t&&void 0===a?(s=t,r=n):void 0!==a&&void 0===t&&(s=n-a,r=n),{start:s,end:r}})(r,s.start,s.end),c=r.slice(n.start,n.end),o=c.size,l=new Response(c,{status:206,statusText:"Partial Content",headers:t.headers});return l.headers.set("Content-Length",String(o)),l.headers.set("Content-Range",`bytes ${n.start}-${n.end-1}/${r.size}`),l}catch(e){return new Response("",{status:416,statusText:"Range Not Satisfiable"})}};class ey{cachedResponseWillBeUsed=async({request:e,cachedResponse:t})=>t&&e.headers.has("range")?await ew(e,t):t}class e_ extends J{async _handle(e,t){let a,s=await t.cacheMatch(e);if(!s)try{s=await t.fetchAndCachePut(e)}catch(e){e instanceof Error&&(a=e)}if(!s)throw new i("no-response",{url:e.url,error:a});return s}}class eb extends J{constructor(e={}){super(e),this.plugins.some(e=>"cacheWillUpdate"in e)||this.plugins.unshift(G)}async _handle(e,t){let a,s=t.fetchAndCachePut(e).catch(()=>{});t.waitUntil(s);let r=await t.cacheMatch(e);if(r);else try{r=await s}catch(e){e instanceof Error&&(a=e)}if(!r)throw new i("no-response",{url:e.url,error:a});return r}}class eR extends ee{constructor(e,t){super(({request:a})=>{let s=e.getUrlsToPrecacheKeys();for(let r of function*(e,{directoryIndex:t="index.html",ignoreURLParametersMatching:a=[/^utm_/,/^fbclid$/],cleanURLs:s=!0,urlManipulation:r}={}){let n=new URL(e,location.href);n.hash="",yield n.href;let i=((e,t=[])=>{for(let a of[...e.searchParams.keys()])t.some(e=>e.test(a))&&e.searchParams.delete(a);return e})(n,a);if(yield i.href,t&&i.pathname.endsWith("/")){let e=new URL(i.href);e.pathname+=t,yield e.href}if(s){let e=new URL(i.href);e.pathname+=".html",yield e.href}if(r)for(let e of r({url:n}))yield e.href}(a.url,t)){let t=s.get(r);if(t){let a=e.getIntegrityForPrecacheKey(t);return{cacheKey:t,integrity:a}}}},e.precacheStrategy)}}class ev{_precacheController;constructor({precacheController:e}){this._precacheController=e}cacheKeyWillBeUsed=async({request:e,params:t})=>{let a=t?.cacheKey||this._precacheController.getPrecacheKeyForUrl(e.url);return a?new Request(a,{headers:e.headers}):e}}class ex{_urlsToCacheKeys=new Map;_urlsToCacheModes=new Map;_cacheKeysToIntegrities=new Map;_concurrentPrecaching;_precacheStrategy;_routes;_defaultHandlerMap;_catchHandler;_requestRules;constructor({precacheEntries:e,precacheOptions:t,skipWaiting:a=!1,importScripts:s,navigationPreload:r=!1,cacheId:i,clientsClaim:c=!1,runtimeCaching:o,offlineAnalyticsConfig:l,disableDevLogs:h=!1,fallbacks:u,requestRules:d}={}){var m,p;let{precacheStrategyOptions:f,precacheRouteOptions:w,precacheMiscOptions:y}=((e,t={})=>{let{cacheName:a,plugins:s=[],fetchOptions:r,matchOptions:i,fallbackToNetwork:c,directoryIndex:o,ignoreURLParametersMatching:l,cleanURLs:h,urlManipulation:u,cleanupOutdatedCaches:d,concurrency:m=10,navigateFallback:g,navigateFallbackAllowlist:p,navigateFallbackDenylist:f}=t??{};return{precacheStrategyOptions:{cacheName:n.getPrecacheName(a),plugins:[...s,new ev({precacheController:e})],fetchOptions:r,matchOptions:i,fallbackToNetwork:c},precacheRouteOptions:{directoryIndex:o,ignoreURLParametersMatching:l,cleanURLs:h,urlManipulation:u},precacheMiscOptions:{cleanupOutdatedCaches:d,concurrency:m,navigateFallback:g,navigateFallbackAllowlist:p,navigateFallbackDenylist:f}}})(this,t);if(this._concurrentPrecaching=y.concurrency,this._precacheStrategy=new et(f),this._routes=new Map,this._defaultHandlerMap=new Map,this._requestRules=d,this.handleInstall=this.handleInstall.bind(this),this.handleActivate=this.handleActivate.bind(this),this.handleFetch=this.handleFetch.bind(this),this.handleCache=this.handleCache.bind(this),s&&s.length>0&&self.importScripts(...s),r&&self.registration?.navigationPreload&&self.addEventListener("activate",e=>{e.waitUntil(self.registration.navigationPreload.enable().then(()=>{}))}),void 0!==i&&(m={prefix:i},n.updateDetails(m)),a?self.skipWaiting():self.addEventListener("message",e=>{e.data&&"SKIP_WAITING"===e.data.type&&self.skipWaiting()}),c&&self.addEventListener("activate",()=>self.clients.claim()),e&&e.length>0&&this.addToPrecacheList(e),y.cleanupOutdatedCaches&&(p=f.cacheName,self.addEventListener("activate",e=>{e.waitUntil(g(n.getPrecacheName(p)).then(e=>{}))})),this.registerRoute(new eR(this,w)),y.navigateFallback&&this.registerRoute(new ea(this.createHandlerBoundToUrl(y.navigateFallback),{allowlist:y.navigateFallbackAllowlist,denylist:y.navigateFallbackDenylist})),void 0!==l&&("boolean"==typeof l?l&&ep({serwist:this}):ep({...l,serwist:this})),void 0!==o){if(void 0!==u){let e=new ef({fallbackUrls:u.entries,serwist:this});o.forEach(t=>{t.handler instanceof J&&!t.handler.plugins.some(e=>"handlerDidError"in e)&&t.handler.plugins.push(e)})}for(let e of o)this.registerCapture(e.matcher,e.handler,e.method)}h&&(self.__WB_DISABLE_DEV_LOGS=!0)}get precacheStrategy(){return this._precacheStrategy}get routes(){return this._routes}addEventListeners(){self.addEventListener("install",this.handleInstall),self.addEventListener("activate",this.handleActivate),self.addEventListener("fetch",this.handleFetch),self.addEventListener("message",this.handleCache)}addToPrecacheList(e){let t=[];for(let a of e){"string"==typeof a?t.push(a):a&&!a.integrity&&void 0===a.revision&&t.push(a.url);let{cacheKey:e,url:s}=er(a),r="string"!=typeof a&&a.revision?"reload":"default";if(this._urlsToCacheKeys.has(s)&&this._urlsToCacheKeys.get(s)!==e)throw new i("add-to-cache-list-conflicting-entries",{firstEntry:this._urlsToCacheKeys.get(s),secondEntry:e});if("string"!=typeof a&&a.integrity){if(this._cacheKeysToIntegrities.has(e)&&this._cacheKeysToIntegrities.get(e)!==a.integrity)throw new i("add-to-cache-list-conflicting-integrities",{url:s});this._cacheKeysToIntegrities.set(e,a.integrity)}this._urlsToCacheKeys.set(s,e),this._urlsToCacheModes.set(s,r)}t.length>0&&console.warn(`Serwist is precaching URLs without revision info: ${t.join(", ")}
-This is generally NOT safe. Learn more at https://bit.ly/wb-precache`)}handleInstall(e){return this.registerRequestRules(e),p(e,async()=>{let t=new en;this.precacheStrategy.plugins.push(t),await ei(this._concurrentPrecaching,Array.from(this._urlsToCacheKeys.entries()),async([t,a])=>{let s=this._cacheKeysToIntegrities.get(a),r=this._urlsToCacheModes.get(t),n=new Request(t,{integrity:s,cache:r,credentials:"same-origin"});await Promise.all(this.precacheStrategy.handleAll({event:e,request:n,url:new URL(n.url),params:{cacheKey:a}}))});let{updatedURLs:a,notUpdatedURLs:s}=t;return{updatedURLs:a,notUpdatedURLs:s}})}async registerRequestRules(e){if(this._requestRules&&e?.addRoutes)try{await e.addRoutes(this._requestRules),this._requestRules=void 0}catch(e){throw e}}handleActivate(e){return p(e,async()=>{let e=await self.caches.open(this.precacheStrategy.cacheName),t=await e.keys(),a=new Set(this._urlsToCacheKeys.values()),s=[];for(let r of t)a.has(r.url)||(await e.delete(r),s.push(r.url));return{deletedCacheRequests:s}})}handleFetch(e){let{request:t}=e,a=this.handleRequest({request:t,event:e});a&&e.respondWith(a)}handleCache(e){if(e.data&&"CACHE_URLS"===e.data.type){let{payload:t}=e.data,a=Promise.all(t.urlsToCache.map(t=>{let a;return a="string"==typeof t?new Request(t):new Request(...t),this.handleRequest({request:a,event:e})}));e.waitUntil(a),e.ports?.[0]&&a.then(()=>e.ports[0].postMessage(!0))}}setDefaultHandler(e,t="GET"){this._defaultHandlerMap.set(t,Z(e))}setCatchHandler(e){this._catchHandler=Z(e)}registerCapture(e,t,a){let s=((e,t,a)=>{if("string"==typeof e){let s=new URL(e,location.href);return new ee(({url:e})=>e.href===s.href,t,a)}if(e instanceof RegExp)return new es(e,t,a);if("function"==typeof e)return new ee(e,t,a);if(e instanceof ee)return e;throw new i("unsupported-route-type",{moduleName:"serwist",funcName:"parseRoute",paramName:"capture"})})(e,t,a);return this.registerRoute(s),s}registerRoute(e){this._routes.has(e.method)||this._routes.set(e.method,[]),this._routes.get(e.method).push(e)}unregisterRoute(e){if(!this._routes.has(e.method))throw new i("unregister-route-but-not-found-with-method",{method:e.method});let t=this._routes.get(e.method).indexOf(e);if(t>-1)this._routes.get(e.method).splice(t,1);else throw new i("unregister-route-route-not-registered")}getUrlsToPrecacheKeys(){return this._urlsToCacheKeys}getPrecachedUrls(){return[...this._urlsToCacheKeys.keys()]}getPrecacheKeyForUrl(e){let t=new URL(e,location.href);return this._urlsToCacheKeys.get(t.href)}getIntegrityForPrecacheKey(e){return this._cacheKeysToIntegrities.get(e)}async matchPrecache(e){let t=e instanceof Request?e.url:e,a=this.getPrecacheKeyForUrl(t);if(a)return(await self.caches.open(this.precacheStrategy.cacheName)).match(a)}createHandlerBoundToUrl(e){let t=this.getPrecacheKeyForUrl(e);if(!t)throw new i("non-precached-url",{url:e});return a=>(a.request=new Request(e),a.params={cacheKey:t,...a.params},this.precacheStrategy.handle(a))}handleRequest({request:e,event:t}){let a,s=new URL(e.url,location.href);if(!s.protocol.startsWith("http"))return;let r=s.origin===location.origin,{params:n,route:i}=this.findMatchingRoute({event:t,request:e,sameOrigin:r,url:s}),c=i?.handler,o=e.method;if(!c&&this._defaultHandlerMap.has(o)&&(c=this._defaultHandlerMap.get(o)),!c)return;try{a=c.handle({url:s,request:e,event:t,params:n})}catch(e){a=Promise.reject(e)}let l=i?.catchHandler;return a instanceof Promise&&(this._catchHandler||l)&&(a=a.catch(async a=>{if(l)try{return await l.handle({url:s,request:e,event:t,params:n})}catch(e){e instanceof Error&&(a=e)}if(this._catchHandler)return this._catchHandler.handle({url:s,request:e,event:t});throw a})),a}findMatchingRoute({url:e,sameOrigin:t,request:a,event:s}){for(let r of this._routes.get(a.method)||[]){let n,i=r.match({url:e,sameOrigin:t,request:a,event:s});if(i)return Array.isArray(n=i)&&0===n.length||i.constructor===Object&&0===Object.keys(i).length?n=void 0:"boolean"==typeof i&&(n=void 0),{route:r,params:n}}return{}}}let eE={rscPrefetch:"pages-rsc-prefetch",rsc:"pages-rsc",html:"pages"},eS=[{matcher:/^https:\/\/fonts\.(?:gstatic)\.com\/.*/i,handler:new e_({cacheName:"google-fonts-webfonts",plugins:[new eu({maxEntries:4,maxAgeSeconds:31536e3,maxAgeFrom:"last-used"})]})},{matcher:/^https:\/\/fonts\.(?:googleapis)\.com\/.*/i,handler:new eb({cacheName:"google-fonts-stylesheets",plugins:[new eu({maxEntries:4,maxAgeSeconds:604800,maxAgeFrom:"last-used"})]})},{matcher:/\.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,handler:new eb({cacheName:"static-font-assets",plugins:[new eu({maxEntries:4,maxAgeSeconds:604800,maxAgeFrom:"last-used"})]})},{matcher:/\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,handler:new eb({cacheName:"static-image-assets",plugins:[new eu({maxEntries:64,maxAgeSeconds:2592e3,maxAgeFrom:"last-used"})]})},{matcher:/\/_next\/static.+\.js$/i,handler:new e_({cacheName:"next-static-js-assets",plugins:[new eu({maxEntries:64,maxAgeSeconds:86400,maxAgeFrom:"last-used"})]})},{matcher:/\/_next\/image\?url=.+$/i,handler:new eb({cacheName:"next-image",plugins:[new eu({maxEntries:64,maxAgeSeconds:86400,maxAgeFrom:"last-used"})]})},{matcher:/\.(?:mp3|wav|ogg)$/i,handler:new e_({cacheName:"static-audio-assets",plugins:[new eu({maxEntries:32,maxAgeSeconds:86400,maxAgeFrom:"last-used"}),new ey]})},{matcher:/\.(?:mp4|webm)$/i,handler:new e_({cacheName:"static-video-assets",plugins:[new eu({maxEntries:32,maxAgeSeconds:86400,maxAgeFrom:"last-used"}),new ey]})},{matcher:/\.(?:js)$/i,handler:new eb({cacheName:"static-js-assets",plugins:[new eu({maxEntries:48,maxAgeSeconds:86400,maxAgeFrom:"last-used"})]})},{matcher:/\.(?:css|less)$/i,handler:new eb({cacheName:"static-style-assets",plugins:[new eu({maxEntries:32,maxAgeSeconds:86400,maxAgeFrom:"last-used"})]})},{matcher:/\/_next\/data\/.+\/.+\.json$/i,handler:new X({cacheName:"next-data",plugins:[new eu({maxEntries:32,maxAgeSeconds:86400,maxAgeFrom:"last-used"})]})},{matcher:/\.(?:json|xml|csv)$/i,handler:new X({cacheName:"static-data-assets",plugins:[new eu({maxEntries:32,maxAgeSeconds:86400,maxAgeFrom:"last-used"})]})},{matcher:/\/api\/auth\/.*/,handler:new Y({networkTimeoutSeconds:10})},{matcher:({sameOrigin:e,url:{pathname:t}})=>e&&t.startsWith("/api/"),method:"GET",handler:new X({cacheName:"apis",plugins:[new eu({maxEntries:16,maxAgeSeconds:86400,maxAgeFrom:"last-used"})],networkTimeoutSeconds:10})},{matcher:({request:e,url:{pathname:t},sameOrigin:a})=>"1"===e.headers.get("RSC")&&"1"===e.headers.get("Next-Router-Prefetch")&&a&&!t.startsWith("/api/"),handler:new X({cacheName:eE.rscPrefetch,plugins:[new eu({maxEntries:32,maxAgeSeconds:86400})]})},{matcher:({request:e,url:{pathname:t},sameOrigin:a})=>"1"===e.headers.get("RSC")&&a&&!t.startsWith("/api/"),handler:new X({cacheName:eE.rsc,plugins:[new eu({maxEntries:32,maxAgeSeconds:86400})]})},{matcher:({request:e,url:{pathname:t},sameOrigin:a})=>e.headers.get("Content-Type")?.includes("text/html")&&a&&!t.startsWith("/api/"),handler:new X({cacheName:eE.html,plugins:[new eu({maxEntries:32,maxAgeSeconds:86400})]})},{matcher:({url:{pathname:e},sameOrigin:t})=>t&&!e.startsWith("/api/"),handler:new X({cacheName:"others",plugins:[new eu({maxEntries:32,maxAgeSeconds:86400})]})},{matcher:({sameOrigin:e})=>!e,handler:new X({cacheName:"cross-origin",plugins:[new eu({maxEntries:32,maxAgeSeconds:3600})],networkTimeoutSeconds:10})},{matcher:/.*/i,method:"GET",handler:new Y}],eq={cacheNames:{static:"tour-builder-static-v1",dynamic:"tour-builder-dynamic-v1",assets:"tour-builder-assets-v1"}},eC=[".png",".jpg",".jpeg",".gif",".webp",".svg",".ico",".mp4",".webm",".mov",".mp3",".wav",".ogg",".m4a",".woff",".woff2",".ttf",".eot",".css",".js"],eN=e=>{let t=new URL(e.url);return[".mp4",".webm",".mov"].some(e=>t.pathname.toLowerCase().endsWith(e))},eD=e=>{let t=new URL(e.url);return[".mp3",".wav",".ogg",".m4a",".aac"].some(e=>t.pathname.toLowerCase().endsWith(e))},eT=e=>{try{if(e.includes("/file/download?privateUrl=")){let t=e.match(/privateUrl=([^&]+)/);if(t)return decodeURIComponent(t[1]).replace(/^\/+/,"")}if(e.includes("X-Amz-Signature=")||e.includes("x-amz-signature=")){let t=new URL(e).pathname.split("/").filter(Boolean),a=t.findIndex(e=>"assets"===e);if(-1!==a)return t.slice(a).join("/");if(t.length>1)return t.slice(1).join("/")}if(e.startsWith("assets/"))return e;let t=e.match(/^https?:\/\/[^/]+\.s3\.[^/]+\.amazonaws\.com\/[^/]+\/(assets\/.+)$/);if(t)return t[1].split("?")[0];return null}catch(e){return null}},eP=new Map;setInterval(()=>{eP.clear(),console.log("[SW] Cleared storage path mappings")},36e5);let eU=new ex({precacheEntries:[{'revision':'48e9a00892afb3b6ad229718e9bed021','url':'/_next/static/-PbEwkiFN4JCq5Uqr-1sT/_buildManifest.js'},{'revision':'b6652df95db52feb4daf4eca35380933','url':'/_next/static/-PbEwkiFN4JCq5Uqr-1sT/_ssgManifest.js'},{'revision':null,'url':'/_next/static/chunks/12142dde-27563c775e4f8cf0.js'},{'revision':null,'url':'/_next/static/chunks/1232-ee492d53bb7b1303.js'},{'revision':null,'url':'/_next/static/chunks/1818-b3660c83cef1d173.js'},{'revision':null,'url':'/_next/static/chunks/223-5e7611f0ad4bb7f3.js'},{'revision':null,'url':'/_next/static/chunks/2450-c991dd9dfbd7be31.js'},{'revision':null,'url':'/_next/static/chunks/3643-cd854ecad4d47645.js'},{'revision':null,'url':'/_next/static/chunks/400-ac29014eab06ed0b.js'},{'revision':null,'url':'/_next/static/chunks/4166-2355014a69094c93.js'},{'revision':null,'url':'/_next/static/chunks/4271-b6985491cfc2640a.js'},{'revision':null,'url':'/_next/static/chunks/4449-8c19077600e94603.js'},{'revision':null,'url':'/_next/static/chunks/4498-03cdfe804ff7affb.js'},{'revision':null,'url':'/_next/static/chunks/4587-c9e5910a896d025b.js'},{'revision':null,'url':'/_next/static/chunks/5371-1944e2cec48f4711.js'},{'revision':null,'url':'/_next/static/chunks/5541.e90be83844a6de15.js'},{'revision':null,'url':'/_next/static/chunks/5926-dd7d5959a02a865e.js'},{'revision':null,'url':'/_next/static/chunks/6d2b60a9-eb6c7fd9a57c4f19.js'},{'revision':null,'url':'/_next/static/chunks/7e42aecb-94f8c450c54b9556.js'},{'revision':null,'url':'/_next/static/chunks/8230-251e23b7a24ff307.js'},{'revision':null,'url':'/_next/static/chunks/8232-06043c4b3efac0d3.js'},{'revision':null,'url':'/_next/static/chunks/8317-4e9c090ccc089653.js'},{'revision':null,'url':'/_next/static/chunks/8628-4294e63d8a7907d5.js'},{'revision':null,'url':'/_next/static/chunks/8671-1ccce6aa57c8d062.js'},{'revision':null,'url':'/_next/static/chunks/9375.2c053880845a1e8b.js'},{'revision':null,'url':'/_next/static/chunks/9848-799d062feeef8c3c.js'},{'revision':null,'url':'/_next/static/chunks/fa3de7d5.7acfffddc0ff677e.js'},{'revision':null,'url':'/_next/static/chunks/framework-4dea986807dc9d02.js'},{'revision':null,'url':'/_next/static/chunks/main-f35af714f1aa0b25.js'},{'revision':null,'url':'/_next/static/chunks/pages/_error-530d8245847656c6.js'},{'revision':null,'url':'/_next/static/chunks/pages/access_logs/%5Baccess_logsId%5D-8d339e7e896d096c.js'},{'revision':null,'url':'/_next/static/chunks/pages/access_logs/access_logs-edit-35566af647779ab1.js'},{'revision':null,'url':'/_next/static/chunks/pages/access_logs/access_logs-list-b7b1e92379006764.js'},{'revision':null,'url':'/_next/static/chunks/pages/access_logs/access_logs-new-1c0b08a5d9c083df.js'},{'revision':null,'url':'/_next/static/chunks/pages/access_logs/access_logs-table-97bbef6e9c64cb6a.js'},{'revision':null,'url':'/_next/static/chunks/pages/access_logs/access_logs-view-a1df383934285298.js'},{'revision':null,'url':'/_next/static/chunks/pages/asset_variants/%5Basset_variantsId%5D-f30f413d0d49c7e4.js'},{'revision':null,'url':'/_next/static/chunks/pages/asset_variants/asset_variants-edit-72af829781a60809.js'},{'revision':null,'url':'/_next/static/chunks/pages/asset_variants/asset_variants-list-cf3da7bb076aa6f0.js'},{'revision':null,'url':'/_next/static/chunks/pages/asset_variants/asset_variants-new-3665f1d0e6e84dd4.js'},{'revision':null,'url':'/_next/static/chunks/pages/asset_variants/asset_variants-table-ee30957ff8d738c7.js'},{'revision':null,'url':'/_next/static/chunks/pages/asset_variants/asset_variants-view-cc2e3bbc0af9ae2c.js'},{'revision':null,'url':'/_next/static/chunks/pages/assets/%5BassetsId%5D-c76bec5d8cc7a727.js'},{'revision':null,'url':'/_next/static/chunks/pages/assets/assets-edit-244a4f0d1e658028.js'},{'revision':null,'url':'/_next/static/chunks/pages/assets/assets-list-7efe17782be4c508.js'},{'revision':null,'url':'/_next/static/chunks/pages/assets/assets-new-4befa34e01efba55.js'},{'revision':null,'url':'/_next/static/chunks/pages/assets/assets-table-5c322503011d3c30.js'},{'revision':null,'url':'/_next/static/chunks/pages/assets/assets-view-89c254b1127feb02.js'},{'revision':null,'url':'/_next/static/chunks/pages/constructor-facb32c487338a67.js'},{'revision':null,'url':'/_next/static/chunks/pages/dashboard-ef173dde9b60a5fc.js'},{'revision':null,'url':'/_next/static/chunks/pages/element-type-defaults-5ab16a411a1c84a0.js'},{'revision':null,'url':'/_next/static/chunks/pages/element-type-defaults/%5Bid%5D-bb582ba5e9158901.js'},{'revision':null,'url':'/_next/static/chunks/pages/error-e0bd1c24aeb3d601.js'},{'revision':null,'url':'/_next/static/chunks/pages/forgot-78b70d91742fd5b1.js'},{'revision':null,'url':'/_next/static/chunks/pages/index-53587e829512c859.js'},{'revision':null,'url':'/_next/static/chunks/pages/login-79ec11c8552cf796.js'},{'revision':null,'url':'/_next/static/chunks/pages/p/%5BprojectSlug%5D-b50eefa1596a8b74.js'},{'revision':null,'url':'/_next/static/chunks/pages/p/%5BprojectSlug%5D/stage-822175880ff64ec0.js'},{'revision':null,'url':'/_next/static/chunks/pages/password-reset-18f74e912f3914f5.js'},{'revision':null,'url':'/_next/static/chunks/pages/permissions/%5BpermissionsId%5D-03b8d6ce2746e5ac.js'},{'revision':null,'url':'/_next/static/chunks/pages/permissions/permissions-edit-35f3e6f87eb315d5.js'},{'revision':null,'url':'/_next/static/chunks/pages/permissions/permissions-list-155df5771dec31f4.js'},{'revision':null,'url':'/_next/static/chunks/pages/permissions/permissions-new-215d5a028e89340a.js'},{'revision':null,'url':'/_next/static/chunks/pages/permissions/permissions-table-f664d12fd7bc2c5d.js'},{'revision':null,'url':'/_next/static/chunks/pages/permissions/permissions-view-2f8c6ca80f30e4e7.js'},{'revision':null,'url':'/_next/static/chunks/pages/presigned_url_requests/%5Bpresigned_url_requestsId%5D-4d3473c7577b4b0d.js'},{'revision':null,'url':'/_next/static/chunks/pages/presigned_url_requests/presigned_url_requests-edit-52cb8b59b5fce4e7.js'},{'revision':null,'url':'/_next/static/chunks/pages/presigned_url_requests/presigned_url_requests-list-736e04880898639a.js'},{'revision':null,'url':'/_next/static/chunks/pages/presigned_url_requests/presigned_url_requests-new-baaf991bd748200f.js'},{'revision':null,'url':'/_next/static/chunks/pages/presigned_url_requests/presigned_url_requests-table-0147792af7b6e2ca.js'},{'revision':null,'url':'/_next/static/chunks/pages/presigned_url_requests/presigned_url_requests-view-39a5e0b77ea161c1.js'},{'revision':null,'url':'/_next/static/chunks/pages/privacy-policy-53ea2331c015449b.js'},{'revision':null,'url':'/_next/static/chunks/pages/profile-c1b2c9f67ee299cf.js'},{'revision':null,'url':'/_next/static/chunks/pages/project-element-defaults-41c52e13536a5e19.js'},{'revision':null,'url':'/_next/static/chunks/pages/project-element-defaults/%5Bid%5D-a5b938d6317d0f8a.js'},{'revision':null,'url':'/_next/static/chunks/pages/project_audio_tracks/%5Bproject_audio_tracksId%5D-21a2b75463c7ffdb.js'},{'revision':null,'url':'/_next/static/chunks/pages/project_audio_tracks/project_audio_tracks-edit-de76fb3c1d783efa.js'},{'revision':null,'url':'/_next/static/chunks/pages/project_audio_tracks/project_audio_tracks-list-7444bf0ff2adcf19.js'},{'revision':null,'url':'/_next/static/chunks/pages/project_audio_tracks/project_audio_tracks-new-ba6d6a3f8515b0d7.js'},{'revision':null,'url':'/_next/static/chunks/pages/project_audio_tracks/project_audio_tracks-table-b985f5c250b58ae0.js'},{'revision':null,'url':'/_next/static/chunks/pages/project_audio_tracks/project_audio_tracks-view-f2db64bfe6512eac.js'},{'revision':null,'url':'/_next/static/chunks/pages/project_memberships/%5Bproject_membershipsId%5D-e963682ce1f09381.js'},{'revision':null,'url':'/_next/static/chunks/pages/project_memberships/project_memberships-edit-58f19ec0e1dedb5a.js'},{'revision':null,'url':'/_next/static/chunks/pages/project_memberships/project_memberships-list-12773f6237f73890.js'},{'revision':null,'url':'/_next/static/chunks/pages/project_memberships/project_memberships-new-2e8763e625895fa4.js'},{'revision':null,'url':'/_next/static/chunks/pages/project_memberships/project_memberships-table-cfeb32ab7462cc52.js'},{'revision':null,'url':'/_next/static/chunks/pages/project_memberships/project_memberships-view-8b8a23b0cc93252e.js'},{'revision':null,'url':'/_next/static/chunks/pages/projects/%5BprojectsId%5D-86773b41c7e0155d.js'},{'revision':null,'url':'/_next/static/chunks/pages/projects/projects-edit-d696bd0d2f58534a.js'},{'revision':null,'url':'/_next/static/chunks/pages/projects/projects-list-6b45fca8d4e25a1a.js'},{'revision':null,'url':'/_next/static/chunks/pages/projects/projects-new-fa8a012e1d8c87f3.js'},{'revision':null,'url':'/_next/static/chunks/pages/projects/projects-table-d0b2ccf7259abe27.js'},{'revision':null,'url':'/_next/static/chunks/pages/projects/projects-view-7719886c9aa95720.js'},{'revision':null,'url':'/_next/static/chunks/pages/publish_events/%5Bpublish_eventsId%5D-91bb40dd49d451bd.js'},{'revision':null,'url':'/_next/static/chunks/pages/publish_events/publish_events-edit-5ee3360c4efe4ecc.js'},{'revision':null,'url':'/_next/static/chunks/pages/publish_events/publish_events-list-7dfc48227b634d01.js'},{'revision':null,'url':'/_next/static/chunks/pages/publish_events/publish_events-new-967699a276f0fc1f.js'},{'revision':null,'url':'/_next/static/chunks/pages/publish_events/publish_events-table-b7cb7261af5db570.js'},{'revision':null,'url':'/_next/static/chunks/pages/publish_events/publish_events-view-28f438459443352a.js'},{'revision':null,'url':'/_next/static/chunks/pages/pwa_caches/%5Bpwa_cachesId%5D-12230990c23e7fd8.js'},{'revision':null,'url':'/_next/static/chunks/pages/pwa_caches/pwa_caches-edit-e07b159d3fb8e05a.js'},{'revision':null,'url':'/_next/static/chunks/pages/pwa_caches/pwa_caches-list-ae78031d0263b1b8.js'},{'revision':null,'url':'/_next/static/chunks/pages/pwa_caches/pwa_caches-new-393d3dda89d132c0.js'},{'revision':null,'url':'/_next/static/chunks/pages/pwa_caches/pwa_caches-table-b9a9d80285f6ccf5.js'},{'revision':null,'url':'/_next/static/chunks/pages/pwa_caches/pwa_caches-view-0f23c3f267670577.js'},{'revision':null,'url':'/_next/static/chunks/pages/register-74317198a1107978.js'},{'revision':null,'url':'/_next/static/chunks/pages/roles/%5BrolesId%5D-c0bdb71711f9e8af.js'},{'revision':null,'url':'/_next/static/chunks/pages/roles/roles-edit-b7e1e9f9cdd69669.js'},{'revision':null,'url':'/_next/static/chunks/pages/roles/roles-list-bb2e8266272a34b3.js'},{'revision':null,'url':'/_next/static/chunks/pages/roles/roles-new-f88f533479cddf80.js'},{'revision':null,'url':'/_next/static/chunks/pages/roles/roles-table-2ae06818d79da9ec.js'},{'revision':null,'url':'/_next/static/chunks/pages/roles/roles-view-6f87b5ff9d68835f.js'},{'revision':null,'url':'/_next/static/chunks/pages/search-f2874b266789f090.js'},{'revision':null,'url':'/_next/static/chunks/pages/terms-of-use-7d00698d6183bde4.js'},{'revision':null,'url':'/_next/static/chunks/pages/tour_pages/%5Btour_pagesId%5D-3dc1e444688481a5.js'},{'revision':null,'url':'/_next/static/chunks/pages/tour_pages/tour_pages-edit-8063848d4e94fbe9.js'},{'revision':null,'url':'/_next/static/chunks/pages/tour_pages/tour_pages-list-c12f25262a5eec2c.js'},{'revision':null,'url':'/_next/static/chunks/pages/tour_pages/tour_pages-new-59a0c6ab6948843b.js'},{'revision':null,'url':'/_next/static/chunks/pages/tour_pages/tour_pages-table-20ae6c4ea35a9ffe.js'},{'revision':null,'url':'/_next/static/chunks/pages/tour_pages/tour_pages-view-554ee8551b6d8ad4.js'},{'revision':null,'url':'/_next/static/chunks/pages/users/%5BusersId%5D-29784dfa80b7733a.js'},{'revision':null,'url':'/_next/static/chunks/pages/users/users-edit-2be3c12290c2330b.js'},{'revision':null,'url':'/_next/static/chunks/pages/users/users-list-2185908a5a705b0e.js'},{'revision':null,'url':'/_next/static/chunks/pages/users/users-new-5b4a2f9ec6e25d41.js'},{'revision':null,'url':'/_next/static/chunks/pages/users/users-table-584067057f84845c.js'},{'revision':null,'url':'/_next/static/chunks/pages/users/users-view-6dc01b2679a81960.js'},{'revision':null,'url':'/_next/static/chunks/pages/verify-email-3c9a0ef6c6d5daff.js'},{'revision':'846118c33b2c0e922d7b3a7676f81f6f','url':'/_next/static/chunks/polyfills-42372ed130431b0a.js'},{'revision':null,'url':'/_next/static/chunks/webpack-16d698d3c4c52d85.js'},{'revision':null,'url':'/_next/static/css/715be398208dca58.css'},{'revision':null,'url':'/_next/static/css/ae94e3be50540262.css'},{'revision':null,'url':'/_next/static/css/de6fa09b8a0934d1.css'},{'revision':null,'url':'/_next/static/media/instrument-sans-latin-ext-wdth-normal.a718fc63.woff2'},{'revision':null,'url':'/_next/static/media/instrument-sans-latin-ext-wght-normal.7db92424.woff2'},{'revision':null,'url':'/_next/static/media/instrument-sans-latin-wdth-normal.68c3c527.woff2'},{'revision':null,'url':'/_next/static/media/instrument-sans-latin-wght-normal.ae05c57c.woff2'},{'revision':'43778b43fb039fdd5b0510561dc952ac','url':'/assets/vm-shot-2026-03-17T04-16-09-161Z.jpg'},{'revision':'3395d49fe2b96221471b4db0f5caf9e7','url':'/assets/vm-shot-2026-03-17T04-19-03-565Z.jpg'},{'revision':'62127cd8f85821f3e570a377a8a7e14b','url':'/assets/vm-shot-2026-03-17T04-36-56-252Z.jpg'},{'revision':'145c2d7e4ef298391258c6d8a8aaaece','url':'/assets/vm-shot-2026-03-17T04-45-14-111Z.jpg'},{'revision':'c6aae6521f08c847e370764d1c9c613d','url':'/assets/vm-shot-2026-03-17T04-50-58-546Z.jpg'},{'revision':'bf90fb959c1d418b01eb7e55de6672d5','url':'/assets/vm-shot-2026-03-19T06-12-36-229Z.jpg'},{'revision':'73de6cac0695249f4e59ce778a8e6e74','url':'/assets/vm-shot-2026-03-19T06-13-19-234Z.jpg'},{'revision':'bf90fb959c1d418b01eb7e55de6672d5','url':'/assets/vm-shot-2026-03-19T06-13-54-729Z.jpg'},{'revision':'ca6cbfcc74b52f00eef0f2adc8e65456','url':'/assets/vm-shot-2026-03-24T14-29-20-260Z.jpg'},{'revision':'0957c5365895c5ba31b10a84f4e45929','url':'/data-sources/clients.json'},{'revision':'5703d42f7838705ecf87510c4032b20c','url':'/data-sources/history.json'},{'revision':'5404a85badad8210a634ce41bb511545','url':'/favicon.svg'},{'revision':'508520242399a6b1fec65430901f4e6f','url':'/locales/de/common.json'},{'revision':'0a64739b954a93627749ffcb846fceaa','url':'/locales/en/common.json'},{'revision':'34715e25a3bcbab44f84232ce082d2ee','url':'/locales/es/common.json'},{'revision':'772a72f35589c06bdd8d9179c86459e6','url':'/locales/fr/common.json'},{'revision':'c67326edc61e0b5cf87e509ea7553466','url':'/manifest.json'},{'revision':'1254c9c72aa64724c203d26278712800','url':'/offline.html'}],skipWaiting:!0,clientsClaim:!0,navigationPreload:!0,runtimeCaching:[{matcher:e=>{let{request:t}=e,a=new URL(t.url);return"image"===t.destination||"font"===t.destination||[".css",".js",".woff",".woff2"].some(e=>a.pathname.endsWith(e))},handler:new e_({cacheName:eq.cacheNames.assets,plugins:[{cacheKeyWillBeUsed:async e=>{let{request:t,mode:a}=e,s=eT(t.url);return s?(console.log("[SW] Using storagePath for static asset ".concat(a,":"),s.slice(-40)),new Request(s)):t},cacheWillUpdate:async e=>{let{response:t}=e;return t&&200===t.status?t:null}}]})},{matcher:e=>{let{request:t}=e;return eN(t)},handler:new e_({cacheName:eq.cacheNames.assets,plugins:[{cacheKeyWillBeUsed:async e=>{let{request:t,mode:a}=e,s=eT(t.url);if(s){let e=eP.get(s);return e?(console.log("[SW] Using storageKey for video ".concat(a,":"),e.slice(-40)),new Request(e)):(console.log("[SW] Using storagePath for video ".concat(a,":"),s.slice(-40)),new Request(s))}return t},cachedResponseWillBeUsed:async e=>{let{cachedResponse:t,request:a}=e;if(!t)return null;let s=a.headers.get("range");if(!s)return t;let r=s.match(/bytes=(\d+)-(\d*)/);if(!r)return t;let n=parseInt(r[1],10),i=r[2]?parseInt(r[2],10):void 0,c=await t.blob(),o=void 0!==i?c.slice(n,i+1):c.slice(n);return new Response(o,{status:206,statusText:"Partial Content",headers:{"Content-Type":t.headers.get("Content-Type")||"video/mp4","Content-Length":String(o.size),"Content-Range":"bytes ".concat(n,"-").concat(void 0!==i?i:c.size-1,"/").concat(c.size),"Accept-Ranges":"bytes"}})},cacheWillUpdate:async e=>{let{response:t}=e;return t&&200===t.status?t:null}}]})},{matcher:e=>{let{request:t}=e;return eD(t)},handler:new e_({cacheName:eq.cacheNames.assets,plugins:[{cacheKeyWillBeUsed:async e=>{let{request:t,mode:a}=e,s=eT(t.url);if(s){let e=eP.get(s);return e?(console.log("[SW] Using storageKey for audio ".concat(a,":"),e.slice(-40)),new Request(e)):(console.log("[SW] Using storagePath for audio ".concat(a,":"),s.slice(-40)),new Request(s))}return t},cachedResponseWillBeUsed:async e=>{let{cachedResponse:t,request:a}=e;if(!t)return null;let s=a.headers.get("range");if(!s)return t;let r=s.match(/bytes=(\d+)-(\d*)/);if(!r)return t;let n=parseInt(r[1],10),i=r[2]?parseInt(r[2],10):void 0,c=await t.blob(),o=void 0!==i?c.slice(n,i+1):c.slice(n);return new Response(o,{status:206,statusText:"Partial Content",headers:{"Content-Type":t.headers.get("Content-Type")||"audio/mpeg","Content-Length":String(o.size),"Content-Range":"bytes ".concat(n,"-").concat(void 0!==i?i:c.size-1,"/").concat(c.size),"Accept-Ranges":"bytes"}})},cacheWillUpdate:async e=>{let{response:t}=e;return t&&200===t.status?t:null}}]})},{matcher:e=>{let{url:t}=e;return t.pathname.startsWith("/api/")},handler:new X({cacheName:"api-cache",networkTimeoutSeconds:10})},{matcher:e=>{let{request:t}=e;return(e=>{let t=new URL(e.url);return(!t.pathname.startsWith("/api/")||!!t.pathname.includes("/file/download"))&&!!(eC.some(e=>t.pathname.toLowerCase().endsWith(e))||t.pathname.includes("/file/download")||t.hostname.includes("amazonaws.com")||t.hostname.includes("cloudfront.net"))})(t)&&!eN(t)&&!eD(t)},handler:new e_({cacheName:eq.cacheNames.assets,plugins:[{cacheKeyWillBeUsed:async e=>{let{request:t,mode:a}=e,s=eT(t.url);return s?(console.log("[SW] Using storagePath for dynamic asset ".concat(a,":"),s.slice(-40)),new Request(s)):t},cacheWillUpdate:async e=>{let{response:t}=e;return t&&200===t.status?t:null}}]})},...eS]});self.addEventListener("message",e=>{let{type:t,payload:a}=e.data||{};switch(t){case"REGISTER_CACHE_URL":if(null==a?void 0:a.storageKey){let e=a.presignedUrl&&eT(a.presignedUrl)||a.storageKey;eP.set(e,a.storageKey),console.log("[SW] Registered storage path for caching",{storagePath:e.slice(-50),storageKey:a.storageKey.slice(-50)})}break;case"CLEAR_URL_MAPPINGS":eP.clear(),console.log("[SW] Storage path mappings cleared");break;case"CACHE_ASSETS":Array.isArray(null==a?void 0:a.urls)&&e.waitUntil(caches.open(eq.cacheNames.assets).then(e=>Promise.all(a.urls.map(t=>fetch(t).then(a=>{if(200===a.status)return e.put(t,a)}).catch(e=>{console.warn("[SW] Failed to cache asset:",t,e)})))));break;case"CACHE_VIDEO_CHUNK":(null==a?void 0:a.url)&&(null==a?void 0:a.chunk)&&e.waitUntil(caches.open(eq.cacheNames.assets).then(e=>{let t=new Response(a.chunk,{headers:{"Content-Type":a.contentType||"video/mp4","Content-Length":String(a.chunk.byteLength)}});return e.put(a.url,t)}));break;case"CLEAR_CACHE":eP.clear(),e.waitUntil(Promise.all([caches.delete(eq.cacheNames.dynamic),caches.delete(eq.cacheNames.assets)]).then(()=>{console.log("[SW] Caches and storage path mappings cleared")}));break;case"GET_CACHE_STATUS":e.waitUntil(caches.open(eq.cacheNames.assets).then(t=>t.keys().then(t=>{let a=e.source;null==a||a.postMessage({type:"CACHE_STATUS",payload:{cachedCount:t.length,urls:t.map(e=>e.url)}})})));break;case"SKIP_WAITING":self.skipWaiting()}}),eU.addEventListeners(),console.log("[SW] Serwist service worker loaded")})();
\ No newline at end of file
+This is generally NOT safe. Learn more at https://bit.ly/wb-precache`)}handleInstall(e){return this.registerRequestRules(e),p(e,async()=>{let t=new en;this.precacheStrategy.plugins.push(t),await ei(this._concurrentPrecaching,Array.from(this._urlsToCacheKeys.entries()),async([t,a])=>{let s=this._cacheKeysToIntegrities.get(a),r=this._urlsToCacheModes.get(t),n=new Request(t,{integrity:s,cache:r,credentials:"same-origin"});await Promise.all(this.precacheStrategy.handleAll({event:e,request:n,url:new URL(n.url),params:{cacheKey:a}}))});let{updatedURLs:a,notUpdatedURLs:s}=t;return{updatedURLs:a,notUpdatedURLs:s}})}async registerRequestRules(e){if(this._requestRules&&e?.addRoutes)try{await e.addRoutes(this._requestRules),this._requestRules=void 0}catch(e){throw e}}handleActivate(e){return p(e,async()=>{let e=await self.caches.open(this.precacheStrategy.cacheName),t=await e.keys(),a=new Set(this._urlsToCacheKeys.values()),s=[];for(let r of t)a.has(r.url)||(await e.delete(r),s.push(r.url));return{deletedCacheRequests:s}})}handleFetch(e){let{request:t}=e,a=this.handleRequest({request:t,event:e});a&&e.respondWith(a)}handleCache(e){if(e.data&&"CACHE_URLS"===e.data.type){let{payload:t}=e.data,a=Promise.all(t.urlsToCache.map(t=>{let a;return a="string"==typeof t?new Request(t):new Request(...t),this.handleRequest({request:a,event:e})}));e.waitUntil(a),e.ports?.[0]&&a.then(()=>e.ports[0].postMessage(!0))}}setDefaultHandler(e,t="GET"){this._defaultHandlerMap.set(t,Z(e))}setCatchHandler(e){this._catchHandler=Z(e)}registerCapture(e,t,a){let s=((e,t,a)=>{if("string"==typeof e){let s=new URL(e,location.href);return new ee(({url:e})=>e.href===s.href,t,a)}if(e instanceof RegExp)return new es(e,t,a);if("function"==typeof e)return new ee(e,t,a);if(e instanceof ee)return e;throw new i("unsupported-route-type",{moduleName:"serwist",funcName:"parseRoute",paramName:"capture"})})(e,t,a);return this.registerRoute(s),s}registerRoute(e){this._routes.has(e.method)||this._routes.set(e.method,[]),this._routes.get(e.method).push(e)}unregisterRoute(e){if(!this._routes.has(e.method))throw new i("unregister-route-but-not-found-with-method",{method:e.method});let t=this._routes.get(e.method).indexOf(e);if(t>-1)this._routes.get(e.method).splice(t,1);else throw new i("unregister-route-route-not-registered")}getUrlsToPrecacheKeys(){return this._urlsToCacheKeys}getPrecachedUrls(){return[...this._urlsToCacheKeys.keys()]}getPrecacheKeyForUrl(e){let t=new URL(e,location.href);return this._urlsToCacheKeys.get(t.href)}getIntegrityForPrecacheKey(e){return this._cacheKeysToIntegrities.get(e)}async matchPrecache(e){let t=e instanceof Request?e.url:e,a=this.getPrecacheKeyForUrl(t);if(a)return(await self.caches.open(this.precacheStrategy.cacheName)).match(a)}createHandlerBoundToUrl(e){let t=this.getPrecacheKeyForUrl(e);if(!t)throw new i("non-precached-url",{url:e});return a=>(a.request=new Request(e),a.params={cacheKey:t,...a.params},this.precacheStrategy.handle(a))}handleRequest({request:e,event:t}){let a,s=new URL(e.url,location.href);if(!s.protocol.startsWith("http"))return;let r=s.origin===location.origin,{params:n,route:i}=this.findMatchingRoute({event:t,request:e,sameOrigin:r,url:s}),c=i?.handler,o=e.method;if(!c&&this._defaultHandlerMap.has(o)&&(c=this._defaultHandlerMap.get(o)),!c)return;try{a=c.handle({url:s,request:e,event:t,params:n})}catch(e){a=Promise.reject(e)}let l=i?.catchHandler;return a instanceof Promise&&(this._catchHandler||l)&&(a=a.catch(async a=>{if(l)try{return await l.handle({url:s,request:e,event:t,params:n})}catch(e){e instanceof Error&&(a=e)}if(this._catchHandler)return this._catchHandler.handle({url:s,request:e,event:t});throw a})),a}findMatchingRoute({url:e,sameOrigin:t,request:a,event:s}){for(let r of this._routes.get(a.method)||[]){let n,i=r.match({url:e,sameOrigin:t,request:a,event:s});if(i)return Array.isArray(n=i)&&0===n.length||i.constructor===Object&&0===Object.keys(i).length?n=void 0:"boolean"==typeof i&&(n=void 0),{route:r,params:n}}return{}}}let eE={rscPrefetch:"pages-rsc-prefetch",rsc:"pages-rsc",html:"pages"},eS=[{matcher:/^https:\/\/fonts\.(?:gstatic)\.com\/.*/i,handler:new e_({cacheName:"google-fonts-webfonts",plugins:[new eu({maxEntries:4,maxAgeSeconds:31536e3,maxAgeFrom:"last-used"})]})},{matcher:/^https:\/\/fonts\.(?:googleapis)\.com\/.*/i,handler:new eb({cacheName:"google-fonts-stylesheets",plugins:[new eu({maxEntries:4,maxAgeSeconds:604800,maxAgeFrom:"last-used"})]})},{matcher:/\.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,handler:new eb({cacheName:"static-font-assets",plugins:[new eu({maxEntries:4,maxAgeSeconds:604800,maxAgeFrom:"last-used"})]})},{matcher:/\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,handler:new eb({cacheName:"static-image-assets",plugins:[new eu({maxEntries:64,maxAgeSeconds:2592e3,maxAgeFrom:"last-used"})]})},{matcher:/\/_next\/static.+\.js$/i,handler:new e_({cacheName:"next-static-js-assets",plugins:[new eu({maxEntries:64,maxAgeSeconds:86400,maxAgeFrom:"last-used"})]})},{matcher:/\/_next\/image\?url=.+$/i,handler:new eb({cacheName:"next-image",plugins:[new eu({maxEntries:64,maxAgeSeconds:86400,maxAgeFrom:"last-used"})]})},{matcher:/\.(?:mp3|wav|ogg)$/i,handler:new e_({cacheName:"static-audio-assets",plugins:[new eu({maxEntries:32,maxAgeSeconds:86400,maxAgeFrom:"last-used"}),new ey]})},{matcher:/\.(?:mp4|webm)$/i,handler:new e_({cacheName:"static-video-assets",plugins:[new eu({maxEntries:32,maxAgeSeconds:86400,maxAgeFrom:"last-used"}),new ey]})},{matcher:/\.(?:js)$/i,handler:new eb({cacheName:"static-js-assets",plugins:[new eu({maxEntries:48,maxAgeSeconds:86400,maxAgeFrom:"last-used"})]})},{matcher:/\.(?:css|less)$/i,handler:new eb({cacheName:"static-style-assets",plugins:[new eu({maxEntries:32,maxAgeSeconds:86400,maxAgeFrom:"last-used"})]})},{matcher:/\/_next\/data\/.+\/.+\.json$/i,handler:new X({cacheName:"next-data",plugins:[new eu({maxEntries:32,maxAgeSeconds:86400,maxAgeFrom:"last-used"})]})},{matcher:/\.(?:json|xml|csv)$/i,handler:new X({cacheName:"static-data-assets",plugins:[new eu({maxEntries:32,maxAgeSeconds:86400,maxAgeFrom:"last-used"})]})},{matcher:/\/api\/auth\/.*/,handler:new Y({networkTimeoutSeconds:10})},{matcher:({sameOrigin:e,url:{pathname:t}})=>e&&t.startsWith("/api/"),method:"GET",handler:new X({cacheName:"apis",plugins:[new eu({maxEntries:16,maxAgeSeconds:86400,maxAgeFrom:"last-used"})],networkTimeoutSeconds:10})},{matcher:({request:e,url:{pathname:t},sameOrigin:a})=>"1"===e.headers.get("RSC")&&"1"===e.headers.get("Next-Router-Prefetch")&&a&&!t.startsWith("/api/"),handler:new X({cacheName:eE.rscPrefetch,plugins:[new eu({maxEntries:32,maxAgeSeconds:86400})]})},{matcher:({request:e,url:{pathname:t},sameOrigin:a})=>"1"===e.headers.get("RSC")&&a&&!t.startsWith("/api/"),handler:new X({cacheName:eE.rsc,plugins:[new eu({maxEntries:32,maxAgeSeconds:86400})]})},{matcher:({request:e,url:{pathname:t},sameOrigin:a})=>e.headers.get("Content-Type")?.includes("text/html")&&a&&!t.startsWith("/api/"),handler:new X({cacheName:eE.html,plugins:[new eu({maxEntries:32,maxAgeSeconds:86400})]})},{matcher:({url:{pathname:e},sameOrigin:t})=>t&&!e.startsWith("/api/"),handler:new X({cacheName:"others",plugins:[new eu({maxEntries:32,maxAgeSeconds:86400})]})},{matcher:({sameOrigin:e})=>!e,handler:new X({cacheName:"cross-origin",plugins:[new eu({maxEntries:32,maxAgeSeconds:3600})],networkTimeoutSeconds:10})},{matcher:/.*/i,method:"GET",handler:new Y}],eq={cacheNames:{static:"tour-builder-static-v1",dynamic:"tour-builder-dynamic-v1",assets:"tour-builder-assets-v1"}},eC=[".png",".jpg",".jpeg",".gif",".webp",".svg",".ico",".mp4",".webm",".mov",".mp3",".wav",".ogg",".m4a",".woff",".woff2",".ttf",".eot",".css",".js"],eN=e=>{let t=new URL(e.url);return[".mp4",".webm",".mov"].some(e=>t.pathname.toLowerCase().endsWith(e))},eD=e=>{let t=new URL(e.url);return[".mp3",".wav",".ogg",".m4a",".aac"].some(e=>t.pathname.toLowerCase().endsWith(e))},eT=e=>{try{if(e.includes("/file/download?privateUrl=")){let t=e.match(/privateUrl=([^&]+)/);if(t)return decodeURIComponent(t[1]).replace(/^\/+/,"")}if(e.includes("X-Amz-Signature=")||e.includes("x-amz-signature=")){let t=new URL(e).pathname.split("/").filter(Boolean),a=t.findIndex(e=>"assets"===e);if(-1!==a)return t.slice(a).join("/");if(t.length>1)return t.slice(1).join("/")}if(e.startsWith("assets/"))return e;let t=e.match(/^https?:\/\/[^/]+\.s3\.[^/]+\.amazonaws\.com\/[^/]+\/(assets\/.+)$/);if(t)return t[1].split("?")[0];return null}catch(e){return null}},eP=new Map;setInterval(()=>{eP.clear(),console.log("[SW] Cleared storage path mappings")},36e5);let eU=new ex({precacheEntries:[{'revision':'8176e69ce8a57d1f2c88833db9695e7f','url':'/_next/static/Nx8WK1R_jk0ImwaPSFpEZ/_buildManifest.js'},{'revision':'b6652df95db52feb4daf4eca35380933','url':'/_next/static/Nx8WK1R_jk0ImwaPSFpEZ/_ssgManifest.js'},{'revision':null,'url':'/_next/static/chunks/12142dde-27563c775e4f8cf0.js'},{'revision':null,'url':'/_next/static/chunks/223-5e7611f0ad4bb7f3.js'},{'revision':null,'url':'/_next/static/chunks/3639-cd14c0b3222abc0f.js'},{'revision':null,'url':'/_next/static/chunks/3643-cd854ecad4d47645.js'},{'revision':null,'url':'/_next/static/chunks/3658-85ed1f5c943630b6.js'},{'revision':null,'url':'/_next/static/chunks/400-ac29014eab06ed0b.js'},{'revision':null,'url':'/_next/static/chunks/4166-fb783b1c70f3d744.js'},{'revision':null,'url':'/_next/static/chunks/4271-b6985491cfc2640a.js'},{'revision':null,'url':'/_next/static/chunks/4449-bdf4aeb088e38679.js'},{'revision':null,'url':'/_next/static/chunks/4498-33287c5f7f4f906f.js'},{'revision':null,'url':'/_next/static/chunks/4515-1830bd87b3c54e01.js'},{'revision':null,'url':'/_next/static/chunks/4587-c9e5910a896d025b.js'},{'revision':null,'url':'/_next/static/chunks/5371-1944e2cec48f4711.js'},{'revision':null,'url':'/_next/static/chunks/5541.e90be83844a6de15.js'},{'revision':null,'url':'/_next/static/chunks/6d2b60a9-eb6c7fd9a57c4f19.js'},{'revision':null,'url':'/_next/static/chunks/7e42aecb-94f8c450c54b9556.js'},{'revision':null,'url':'/_next/static/chunks/8180-d64b7d080d421773.js'},{'revision':null,'url':'/_next/static/chunks/8230-251e23b7a24ff307.js'},{'revision':null,'url':'/_next/static/chunks/8232-06043c4b3efac0d3.js'},{'revision':null,'url':'/_next/static/chunks/8317-4e9c090ccc089653.js'},{'revision':null,'url':'/_next/static/chunks/8366-6410354c1491f60a.js'},{'revision':null,'url':'/_next/static/chunks/8628-58bfe2d651454e89.js'},{'revision':null,'url':'/_next/static/chunks/9375.2c053880845a1e8b.js'},{'revision':null,'url':'/_next/static/chunks/9848-799d062feeef8c3c.js'},{'revision':null,'url':'/_next/static/chunks/fa3de7d5.7acfffddc0ff677e.js'},{'revision':null,'url':'/_next/static/chunks/framework-4dea986807dc9d02.js'},{'revision':null,'url':'/_next/static/chunks/main-f35af714f1aa0b25.js'},{'revision':null,'url':'/_next/static/chunks/pages/_error-530d8245847656c6.js'},{'revision':null,'url':'/_next/static/chunks/pages/access_logs/%5Baccess_logsId%5D-f28874507e6f5098.js'},{'revision':null,'url':'/_next/static/chunks/pages/access_logs/access_logs-edit-b460eaa195886f05.js'},{'revision':null,'url':'/_next/static/chunks/pages/access_logs/access_logs-list-374a36d094b2f91d.js'},{'revision':null,'url':'/_next/static/chunks/pages/access_logs/access_logs-new-316dae427bb1a425.js'},{'revision':null,'url':'/_next/static/chunks/pages/access_logs/access_logs-table-320341225528532a.js'},{'revision':null,'url':'/_next/static/chunks/pages/access_logs/access_logs-view-5caa4fc126fce326.js'},{'revision':null,'url':'/_next/static/chunks/pages/asset_variants/%5Basset_variantsId%5D-dfa121d326fe8623.js'},{'revision':null,'url':'/_next/static/chunks/pages/asset_variants/asset_variants-edit-9d551c7545acc058.js'},{'revision':null,'url':'/_next/static/chunks/pages/asset_variants/asset_variants-list-69fee1f7ee693caf.js'},{'revision':null,'url':'/_next/static/chunks/pages/asset_variants/asset_variants-new-4903a03e698a9694.js'},{'revision':null,'url':'/_next/static/chunks/pages/asset_variants/asset_variants-table-2ce1dd3f6569c112.js'},{'revision':null,'url':'/_next/static/chunks/pages/asset_variants/asset_variants-view-215e389fc57263d7.js'},{'revision':null,'url':'/_next/static/chunks/pages/assets/%5BassetsId%5D-9818cf1bfe706c30.js'},{'revision':null,'url':'/_next/static/chunks/pages/assets/assets-edit-31cc8b6d10fcc590.js'},{'revision':null,'url':'/_next/static/chunks/pages/assets/assets-list-827103fa1118a8f3.js'},{'revision':null,'url':'/_next/static/chunks/pages/assets/assets-new-1449e00ef4e9ea7a.js'},{'revision':null,'url':'/_next/static/chunks/pages/assets/assets-table-333b85d5a403eb30.js'},{'revision':null,'url':'/_next/static/chunks/pages/assets/assets-view-4a904823c447ae56.js'},{'revision':null,'url':'/_next/static/chunks/pages/constructor-cbb0fc807094ddb8.js'},{'revision':null,'url':'/_next/static/chunks/pages/dashboard-9c31c36b2aaac272.js'},{'revision':null,'url':'/_next/static/chunks/pages/element-type-defaults-b4b2a682b7110d4a.js'},{'revision':null,'url':'/_next/static/chunks/pages/element-type-defaults/%5Bid%5D-e1d59f81bfeb92d2.js'},{'revision':null,'url':'/_next/static/chunks/pages/error-078bf46bb4f4c577.js'},{'revision':null,'url':'/_next/static/chunks/pages/forgot-22af52cc664b2251.js'},{'revision':null,'url':'/_next/static/chunks/pages/index-f7e2d9108644a6f9.js'},{'revision':null,'url':'/_next/static/chunks/pages/login-a1d399f13c626ebd.js'},{'revision':null,'url':'/_next/static/chunks/pages/p/%5BprojectSlug%5D-f5626235effe723b.js'},{'revision':null,'url':'/_next/static/chunks/pages/p/%5BprojectSlug%5D/stage-a1d36cb5470f39e7.js'},{'revision':null,'url':'/_next/static/chunks/pages/password-reset-455af6aac51516fe.js'},{'revision':null,'url':'/_next/static/chunks/pages/permissions/%5BpermissionsId%5D-ba71d986ba5cc8fc.js'},{'revision':null,'url':'/_next/static/chunks/pages/permissions/permissions-edit-40c5c80e903296e5.js'},{'revision':null,'url':'/_next/static/chunks/pages/permissions/permissions-list-173a939b8f767fb0.js'},{'revision':null,'url':'/_next/static/chunks/pages/permissions/permissions-new-a5aaba465f5e06ba.js'},{'revision':null,'url':'/_next/static/chunks/pages/permissions/permissions-table-f2a0df70716b0284.js'},{'revision':null,'url':'/_next/static/chunks/pages/permissions/permissions-view-bc146f95287c4342.js'},{'revision':null,'url':'/_next/static/chunks/pages/presigned_url_requests/%5Bpresigned_url_requestsId%5D-d7074280b7a1269c.js'},{'revision':null,'url':'/_next/static/chunks/pages/presigned_url_requests/presigned_url_requests-edit-3a1654236738cc0a.js'},{'revision':null,'url':'/_next/static/chunks/pages/presigned_url_requests/presigned_url_requests-list-f20820d8be8c754a.js'},{'revision':null,'url':'/_next/static/chunks/pages/presigned_url_requests/presigned_url_requests-new-aecd81a5cb7a2ca9.js'},{'revision':null,'url':'/_next/static/chunks/pages/presigned_url_requests/presigned_url_requests-table-fc0554487470948c.js'},{'revision':null,'url':'/_next/static/chunks/pages/presigned_url_requests/presigned_url_requests-view-786d8c42729dfae4.js'},{'revision':null,'url':'/_next/static/chunks/pages/privacy-policy-53ea2331c015449b.js'},{'revision':null,'url':'/_next/static/chunks/pages/profile-cf3e76df64b95b2e.js'},{'revision':null,'url':'/_next/static/chunks/pages/project-element-defaults-b42e1eb7ad9baeec.js'},{'revision':null,'url':'/_next/static/chunks/pages/project-element-defaults/%5Bid%5D-dc40c92c88f5f468.js'},{'revision':null,'url':'/_next/static/chunks/pages/project_audio_tracks/%5Bproject_audio_tracksId%5D-18851bfd20223bd3.js'},{'revision':null,'url':'/_next/static/chunks/pages/project_audio_tracks/project_audio_tracks-edit-50440128faecb960.js'},{'revision':null,'url':'/_next/static/chunks/pages/project_audio_tracks/project_audio_tracks-list-17bf02d64388805e.js'},{'revision':null,'url':'/_next/static/chunks/pages/project_audio_tracks/project_audio_tracks-new-a9eb871b89fc9a7d.js'},{'revision':null,'url':'/_next/static/chunks/pages/project_audio_tracks/project_audio_tracks-table-8904e0e22909a1cd.js'},{'revision':null,'url':'/_next/static/chunks/pages/project_audio_tracks/project_audio_tracks-view-9a0e90abaa80f5c6.js'},{'revision':null,'url':'/_next/static/chunks/pages/project_memberships/%5Bproject_membershipsId%5D-d3231a2f7a8c4841.js'},{'revision':null,'url':'/_next/static/chunks/pages/project_memberships/project_memberships-edit-a5aac2ede6e10fa6.js'},{'revision':null,'url':'/_next/static/chunks/pages/project_memberships/project_memberships-list-f038d3a013deaef7.js'},{'revision':null,'url':'/_next/static/chunks/pages/project_memberships/project_memberships-new-635c81ed93a9a59b.js'},{'revision':null,'url':'/_next/static/chunks/pages/project_memberships/project_memberships-table-3b26e0796ef0631b.js'},{'revision':null,'url':'/_next/static/chunks/pages/project_memberships/project_memberships-view-a49b17115676b9d6.js'},{'revision':null,'url':'/_next/static/chunks/pages/projects/%5BprojectsId%5D-97fde22ccd383416.js'},{'revision':null,'url':'/_next/static/chunks/pages/projects/projects-edit-cdada24d860cdbc1.js'},{'revision':null,'url':'/_next/static/chunks/pages/projects/projects-list-4797bde4b728a4f7.js'},{'revision':null,'url':'/_next/static/chunks/pages/projects/projects-new-620fb97ab7b8c2ae.js'},{'revision':null,'url':'/_next/static/chunks/pages/projects/projects-table-4dab8b67c60241ee.js'},{'revision':null,'url':'/_next/static/chunks/pages/projects/projects-view-6ab88073d01e7234.js'},{'revision':null,'url':'/_next/static/chunks/pages/publish_events/%5Bpublish_eventsId%5D-baf397a319772a40.js'},{'revision':null,'url':'/_next/static/chunks/pages/publish_events/publish_events-edit-cb5fb3d2fe04da3e.js'},{'revision':null,'url':'/_next/static/chunks/pages/publish_events/publish_events-list-ed11277fbf030af1.js'},{'revision':null,'url':'/_next/static/chunks/pages/publish_events/publish_events-new-772e5dc7930d5413.js'},{'revision':null,'url':'/_next/static/chunks/pages/publish_events/publish_events-table-125100eb7ce83597.js'},{'revision':null,'url':'/_next/static/chunks/pages/publish_events/publish_events-view-989df6b2ae0f52ff.js'},{'revision':null,'url':'/_next/static/chunks/pages/pwa_caches/%5Bpwa_cachesId%5D-d15b2294a1fa5c3a.js'},{'revision':null,'url':'/_next/static/chunks/pages/pwa_caches/pwa_caches-edit-387462a9b31a5fd5.js'},{'revision':null,'url':'/_next/static/chunks/pages/pwa_caches/pwa_caches-list-893828e277a6fcd8.js'},{'revision':null,'url':'/_next/static/chunks/pages/pwa_caches/pwa_caches-new-2e051be868dfd532.js'},{'revision':null,'url':'/_next/static/chunks/pages/pwa_caches/pwa_caches-table-4b13eb9bd719ab77.js'},{'revision':null,'url':'/_next/static/chunks/pages/pwa_caches/pwa_caches-view-d4cd0ed163eeef15.js'},{'revision':null,'url':'/_next/static/chunks/pages/register-29076d71b547f51d.js'},{'revision':null,'url':'/_next/static/chunks/pages/roles/%5BrolesId%5D-530e349681b76250.js'},{'revision':null,'url':'/_next/static/chunks/pages/roles/roles-edit-3b414a4ab1be52f0.js'},{'revision':null,'url':'/_next/static/chunks/pages/roles/roles-list-11195c24a3a766b3.js'},{'revision':null,'url':'/_next/static/chunks/pages/roles/roles-new-372976d488ae4ffd.js'},{'revision':null,'url':'/_next/static/chunks/pages/roles/roles-table-fc38127ef72aa50c.js'},{'revision':null,'url':'/_next/static/chunks/pages/roles/roles-view-46eac6512efffec1.js'},{'revision':null,'url':'/_next/static/chunks/pages/search-e8adbb82adbdc228.js'},{'revision':null,'url':'/_next/static/chunks/pages/terms-of-use-7d00698d6183bde4.js'},{'revision':null,'url':'/_next/static/chunks/pages/tour_pages/%5Btour_pagesId%5D-24bac32931f40a4d.js'},{'revision':null,'url':'/_next/static/chunks/pages/tour_pages/tour_pages-edit-496f16c2780ded8c.js'},{'revision':null,'url':'/_next/static/chunks/pages/tour_pages/tour_pages-list-722b408231e0669a.js'},{'revision':null,'url':'/_next/static/chunks/pages/tour_pages/tour_pages-new-7b92fde20d8cb30c.js'},{'revision':null,'url':'/_next/static/chunks/pages/tour_pages/tour_pages-table-4e74acbf5f7ca7f5.js'},{'revision':null,'url':'/_next/static/chunks/pages/tour_pages/tour_pages-view-ddbb70192d378851.js'},{'revision':null,'url':'/_next/static/chunks/pages/users/%5BusersId%5D-f6a6505de81b0049.js'},{'revision':null,'url':'/_next/static/chunks/pages/users/users-edit-e55cf6d47da856f8.js'},{'revision':null,'url':'/_next/static/chunks/pages/users/users-list-10513f2e4f30f4ee.js'},{'revision':null,'url':'/_next/static/chunks/pages/users/users-new-dfdb731d8160e527.js'},{'revision':null,'url':'/_next/static/chunks/pages/users/users-table-0804ca961eb56a7f.js'},{'revision':null,'url':'/_next/static/chunks/pages/users/users-view-436d3bcdfad89528.js'},{'revision':null,'url':'/_next/static/chunks/pages/verify-email-3c9a0ef6c6d5daff.js'},{'revision':'846118c33b2c0e922d7b3a7676f81f6f','url':'/_next/static/chunks/polyfills-42372ed130431b0a.js'},{'revision':null,'url':'/_next/static/chunks/webpack-fb711922a0fad4b6.js'},{'revision':null,'url':'/_next/static/css/715be398208dca58.css'},{'revision':null,'url':'/_next/static/css/a4fad1b1a88475b2.css'},{'revision':null,'url':'/_next/static/css/de6fa09b8a0934d1.css'},{'revision':null,'url':'/_next/static/media/instrument-sans-latin-ext-wdth-normal.a718fc63.woff2'},{'revision':null,'url':'/_next/static/media/instrument-sans-latin-ext-wght-normal.7db92424.woff2'},{'revision':null,'url':'/_next/static/media/instrument-sans-latin-wdth-normal.68c3c527.woff2'},{'revision':null,'url':'/_next/static/media/instrument-sans-latin-wght-normal.ae05c57c.woff2'},{'revision':'43778b43fb039fdd5b0510561dc952ac','url':'/assets/vm-shot-2026-03-17T04-16-09-161Z.jpg'},{'revision':'3395d49fe2b96221471b4db0f5caf9e7','url':'/assets/vm-shot-2026-03-17T04-19-03-565Z.jpg'},{'revision':'62127cd8f85821f3e570a377a8a7e14b','url':'/assets/vm-shot-2026-03-17T04-36-56-252Z.jpg'},{'revision':'145c2d7e4ef298391258c6d8a8aaaece','url':'/assets/vm-shot-2026-03-17T04-45-14-111Z.jpg'},{'revision':'c6aae6521f08c847e370764d1c9c613d','url':'/assets/vm-shot-2026-03-17T04-50-58-546Z.jpg'},{'revision':'bf90fb959c1d418b01eb7e55de6672d5','url':'/assets/vm-shot-2026-03-19T06-12-36-229Z.jpg'},{'revision':'73de6cac0695249f4e59ce778a8e6e74','url':'/assets/vm-shot-2026-03-19T06-13-19-234Z.jpg'},{'revision':'bf90fb959c1d418b01eb7e55de6672d5','url':'/assets/vm-shot-2026-03-19T06-13-54-729Z.jpg'},{'revision':'ca6cbfcc74b52f00eef0f2adc8e65456','url':'/assets/vm-shot-2026-03-24T14-29-20-260Z.jpg'},{'revision':'0957c5365895c5ba31b10a84f4e45929','url':'/data-sources/clients.json'},{'revision':'5703d42f7838705ecf87510c4032b20c','url':'/data-sources/history.json'},{'revision':'5404a85badad8210a634ce41bb511545','url':'/favicon.svg'},{'revision':'fbe5fc5322bbd6ffda8bff4441b6bfa6','url':'/fonts/MapleMedium.otf'},{'revision':'508520242399a6b1fec65430901f4e6f','url':'/locales/de/common.json'},{'revision':'0a64739b954a93627749ffcb846fceaa','url':'/locales/en/common.json'},{'revision':'34715e25a3bcbab44f84232ce082d2ee','url':'/locales/es/common.json'},{'revision':'772a72f35589c06bdd8d9179c86459e6','url':'/locales/fr/common.json'},{'revision':'c67326edc61e0b5cf87e509ea7553466','url':'/manifest.json'},{'revision':'1254c9c72aa64724c203d26278712800','url':'/offline.html'}],skipWaiting:!0,clientsClaim:!0,navigationPreload:!0,runtimeCaching:[{matcher:e=>{let{request:t}=e;return"1"===new URL(t.url).searchParams.get("sw-bypass")},handler:new Y},{matcher:e=>{let{request:t}=e,a=new URL(t.url);return"image"===t.destination||"font"===t.destination||[".css",".js",".woff",".woff2"].some(e=>a.pathname.endsWith(e))},handler:new e_({cacheName:eq.cacheNames.assets,plugins:[{cacheKeyWillBeUsed:async e=>{let{request:t,mode:a}=e,s=eT(t.url);return s?(console.log("[SW] Using storagePath for static asset ".concat(a,":"),s.slice(-40)),new Request(s)):t},cacheWillUpdate:async e=>{let{response:t}=e;return t&&200===t.status?t:null}}]})},{matcher:e=>{let{request:t}=e;return eN(t)},handler:new e_({cacheName:eq.cacheNames.assets,plugins:[{cacheKeyWillBeUsed:async e=>{let{request:t,mode:a}=e,s=eT(t.url);if(s){let e=eP.get(s);return e?(console.log("[SW] Using storageKey for video ".concat(a,":"),e.slice(-40)),new Request(e)):(console.log("[SW] Using storagePath for video ".concat(a,":"),s.slice(-40)),new Request(s))}return t},cachedResponseWillBeUsed:async e=>{let{cachedResponse:t,request:a}=e;if(!t)return null;let s=a.headers.get("range");if(!s)return t;let r=s.match(/bytes=(\d+)-(\d*)/);if(!r)return t;let n=parseInt(r[1],10),i=r[2]?parseInt(r[2],10):void 0,c=await t.blob(),o=void 0!==i?c.slice(n,i+1):c.slice(n);return new Response(o,{status:206,statusText:"Partial Content",headers:{"Content-Type":t.headers.get("Content-Type")||"video/mp4","Content-Length":String(o.size),"Content-Range":"bytes ".concat(n,"-").concat(void 0!==i?i:c.size-1,"/").concat(c.size),"Accept-Ranges":"bytes"}})},cacheWillUpdate:async e=>{let{response:t}=e;return t&&200===t.status?t:null}}]})},{matcher:e=>{let{request:t}=e;return eD(t)},handler:new e_({cacheName:eq.cacheNames.assets,plugins:[{cacheKeyWillBeUsed:async e=>{let{request:t,mode:a}=e,s=eT(t.url);if(s){let e=eP.get(s);return e?(console.log("[SW] Using storageKey for audio ".concat(a,":"),e.slice(-40)),new Request(e)):(console.log("[SW] Using storagePath for audio ".concat(a,":"),s.slice(-40)),new Request(s))}return t},cachedResponseWillBeUsed:async e=>{let{cachedResponse:t,request:a}=e;if(!t)return null;let s=a.headers.get("range");if(!s)return t;let r=s.match(/bytes=(\d+)-(\d*)/);if(!r)return t;let n=parseInt(r[1],10),i=r[2]?parseInt(r[2],10):void 0,c=await t.blob(),o=void 0!==i?c.slice(n,i+1):c.slice(n);return new Response(o,{status:206,statusText:"Partial Content",headers:{"Content-Type":t.headers.get("Content-Type")||"audio/mpeg","Content-Length":String(o.size),"Content-Range":"bytes ".concat(n,"-").concat(void 0!==i?i:c.size-1,"/").concat(c.size),"Accept-Ranges":"bytes"}})},cacheWillUpdate:async e=>{let{response:t}=e;return t&&200===t.status?t:null}}]})},{matcher:e=>{let{url:t}=e;return t.pathname.startsWith("/api/")},handler:new X({cacheName:"api-cache",networkTimeoutSeconds:10})},{matcher:e=>{let{request:t}=e;return(e=>{let t=new URL(e.url);return(!t.pathname.startsWith("/api/")||!!t.pathname.includes("/file/download"))&&!!(eC.some(e=>t.pathname.toLowerCase().endsWith(e))||t.pathname.includes("/file/download")||t.hostname.includes("amazonaws.com")||t.hostname.includes("cloudfront.net"))})(t)&&!eN(t)&&!eD(t)},handler:new e_({cacheName:eq.cacheNames.assets,plugins:[{cacheKeyWillBeUsed:async e=>{let{request:t,mode:a}=e,s=eT(t.url);return s?(console.log("[SW] Using storagePath for dynamic asset ".concat(a,":"),s.slice(-40)),new Request(s)):t},cacheWillUpdate:async e=>{let{response:t}=e;return t&&200===t.status?t:null}}]})},...eS]});self.addEventListener("message",e=>{let{type:t,payload:a}=e.data||{};switch(t){case"REGISTER_CACHE_URL":if(null==a?void 0:a.storageKey){let e=a.presignedUrl&&eT(a.presignedUrl)||a.storageKey;eP.set(e,a.storageKey),console.log("[SW] Registered storage path for caching",{storagePath:e.slice(-50),storageKey:a.storageKey.slice(-50)})}break;case"CLEAR_URL_MAPPINGS":eP.clear(),console.log("[SW] Storage path mappings cleared");break;case"CACHE_ASSETS":Array.isArray(null==a?void 0:a.urls)&&e.waitUntil(caches.open(eq.cacheNames.assets).then(e=>Promise.all(a.urls.map(t=>fetch(t).then(a=>{if(200===a.status)return e.put(t,a)}).catch(e=>{console.warn("[SW] Failed to cache asset:",t,e)})))));break;case"CACHE_VIDEO_CHUNK":(null==a?void 0:a.url)&&(null==a?void 0:a.chunk)&&e.waitUntil(caches.open(eq.cacheNames.assets).then(e=>{let t=new Response(a.chunk,{headers:{"Content-Type":a.contentType||"video/mp4","Content-Length":String(a.chunk.byteLength)}});return e.put(a.url,t)}));break;case"CLEAR_CACHE":eP.clear(),e.waitUntil(Promise.all([caches.delete(eq.cacheNames.dynamic),caches.delete(eq.cacheNames.assets)]).then(()=>{console.log("[SW] Caches and storage path mappings cleared")}));break;case"GET_CACHE_STATUS":e.waitUntil(caches.open(eq.cacheNames.assets).then(t=>t.keys().then(t=>{let a=e.source;null==a||a.postMessage({type:"CACHE_STATUS",payload:{cachedCount:t.length,urls:t.map(e=>e.url)}})})));break;case"SKIP_WAITING":self.skipWaiting()}}),eU.addEventListeners(),console.log("[SW] Serwist service worker loaded")})();
\ No newline at end of file
diff --git a/frontend/src/components/CanvasLoadingSpinner.tsx b/frontend/src/components/CanvasLoadingSpinner.tsx
index c6c8785..ace5cad 100644
--- a/frontend/src/components/CanvasLoadingSpinner.tsx
+++ b/frontend/src/components/CanvasLoadingSpinner.tsx
@@ -24,7 +24,7 @@ interface CanvasLoadingSpinnerProps {
 
 const CanvasLoadingSpinner: React.FC<CanvasLoadingSpinnerProps> = ({
   isVisible,
-  message = 'Loading...',
+  message,
   size = 'md',
   progress,
   zIndex = 100,
@@ -50,23 +50,20 @@ const CanvasLoadingSpinner: React.FC<CanvasLoadingSpinnerProps> = ({
 
   const sizeClasses = {
     sm: 'w-8 h-8 border-2',
-    md: 'w-12 h-12 border-3',
+    md: 'w-12 h-12 border-[3px]',
     lg: 'w-16 h-16 border-4',
   };
 
   return (
     <div
-      className='absolute inset-0 flex flex-col items-center justify-center transition-opacity duration-300'
-      style={{
-        // Semi-transparent background with blur
-        // Reduced blur on mobile for better performance
-        background: 'rgba(0, 0, 0, 0.3)',
-        backdropFilter: 'blur(4px)',
-        WebkitBackdropFilter: 'blur(4px)',
-        zIndex,
-      }}
+      className='absolute inset-0 flex flex-col items-center justify-center pointer-events-none'
+      style={{ zIndex }}
     >
-      <div className='relative'>
+      {/* Spinner with subtle shadow for visibility on any background */}
+      <div
+        className='relative'
+        style={{ filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.5))' }}
+      >
         {/* Spinner ring */}
         <div
           className={`${sizeClasses[size]} rounded-full border-white/30 border-t-white animate-spin`}
@@ -75,14 +72,16 @@ const CanvasLoadingSpinner: React.FC<CanvasLoadingSpinnerProps> = ({
         {/* Progress indicator (optional) */}
         {progress !== undefined && (
           <div className='absolute inset-0 flex items-center justify-center'>
-            <span className='text-white text-xs font-medium'>
+            <span className='text-white text-xs font-medium drop-shadow-md'>
               {Math.round(progress)}%
             </span>
           </div>
         )}
       </div>
       {message && (
-        <p className='mt-3 text-white/90 text-sm font-medium'>{message}</p>
+        <p className='mt-3 text-white/90 text-sm font-medium drop-shadow-md'>
+          {message}
+        </p>
       )}
     </div>
   );
diff --git a/frontend/src/components/Constructor/CanvasBackground.tsx b/frontend/src/components/Constructor/CanvasBackground.tsx
index f9cdfba..e94f4b1 100644
--- a/frontend/src/components/Constructor/CanvasBackground.tsx
+++ b/frontend/src/components/Constructor/CanvasBackground.tsx
@@ -16,10 +16,19 @@ import React, {
 import NextImage from 'next/image';
 import { useBackgroundVideoPlayback } from '../../hooks/useBackgroundVideoPlayback';
 import PreviousBackgroundOverlay from '../PreviousBackgroundOverlay';
-import CanvasLoadingSpinner from '../CanvasLoadingSpinner';
-import { scheduleAfterPaint } from '../../lib/browserUtils';
 import { baseURLApi } from '../../config';
 
+/**
+ * Schedule a callback to run after the next browser paint.
+ * Uses double rAF pattern: first rAF schedules for next frame,
+ * second rAF ensures the frame has actually been committed.
+ */
+const scheduleAfterPaint = (callback: () => void): void => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(callback);
+  });
+};
+
 // Type for requestVideoFrameCallback (Safari 15.4+, Chrome 83+)
 // The callback receives (now: DOMHighResTimeStamp, metadata: VideoFrameCallbackMetadata)
 // but we ignore them since we only need to know the frame was painted
@@ -51,6 +60,8 @@ interface CanvasBackgroundProps {
   videoEndTime?: number | null;
   /** Original storage path for video - used for play-once tracking (not the resolved blob URL) */
   videoStoragePath?: string;
+  /** Pause video playback (e.g., during navigation to show frozen frame) */
+  pauseVideo?: boolean;
 }
 
 const CanvasBackground: React.FC<CanvasBackgroundProps> = ({
@@ -69,21 +80,33 @@ const CanvasBackground: React.FC<CanvasBackgroundProps> = ({
   videoStartTime = null,
   videoEndTime = null,
   videoStoragePath,
+  pauseVideo = false,
 }) => {
+  // During page switching with video paused, keep showing the previous video URL.
+  // This prevents black flash when the video element would remount with a new URL.
+  // The old video element stays visible (paused at frozen frame) until new page is ready.
+  const activeVideoUrl =
+    isSwitching && !isNewBgReady && pauseVideo && previousBgVideoUrl
+      ? previousBgVideoUrl
+      : backgroundVideoUrl;
+
   // Use background video playback hook for custom start/end time handling
   // Use storagePath for play-once tracking (falls back to videoUrl if not provided)
+  // Pass pauseVideo to hook for centralized playback control (fixes video playing during navigation)
   const { videoRef, shouldBlockAutoplay } = useBackgroundVideoPlayback({
-    videoUrl: backgroundVideoUrl,
+    videoUrl: activeVideoUrl,
     videoStoragePath: videoStoragePath || backgroundVideoUrl,
     autoplay: videoAutoplay,
     loop: videoLoop,
     muted: videoMuted,
     startTime: videoStartTime,
     endTime: videoEndTime,
+    paused: pauseVideo,
   });
 
-  // Block autoplay if video already played this session (when loop=false)
-  const effectiveAutoplay = videoAutoplay && !shouldBlockAutoplay;
+  // Block autoplay if: video already played this session OR externally paused
+  const effectiveAutoplay =
+    videoAutoplay && !shouldBlockAutoplay && !pauseVideo;
 
   // Video error state for fallback to proxy URL
   const [videoError, setVideoError] = useState(false);
@@ -96,6 +119,9 @@ const CanvasBackground: React.FC<CanvasBackgroundProps> = ({
     const video = videoRef.current;
     if (!backgroundVideoUrl || !video) {
       setIsVideoBuffering(false);
+      // CRITICAL: Also notify parent that buffering is done when there's no video
+      // Without this, parent's isBackgroundVideoBuffering stays stuck at true from previous page
+      onVideoBufferStateChange?.(false);
       return;
     }
 
@@ -124,13 +150,13 @@ const CanvasBackground: React.FC<CanvasBackgroundProps> = ({
 
   // Fallback to proxy URL if presigned URL fails (e.g., CORS, expiration)
   const videoSrc = useMemo(() => {
-    if (!backgroundVideoUrl) return undefined;
+    if (!activeVideoUrl) return undefined;
     if (videoError && videoStoragePath) {
       // Fallback to backend proxy (bypasses CORS issues)
       return `${baseURLApi}/file/download?privateUrl=${encodeURIComponent(videoStoragePath)}`;
     }
-    return backgroundVideoUrl;
-  }, [backgroundVideoUrl, videoStoragePath, videoError]);
+    return activeVideoUrl;
+  }, [activeVideoUrl, videoStoragePath, videoError]);
 
   // Reset error state when video URL changes
   useEffect(() => {
@@ -145,25 +171,159 @@ const CanvasBackground: React.FC<CanvasBackgroundProps> = ({
     }
   }, [videoError, videoStoragePath]);
 
-  const handleLoad = () => {
+  // Track if we've already called onBackgroundReady to avoid double calls
+  const didReportImageReadyRef = useRef(false);
+  const imageRef = useRef<HTMLImageElement>(null);
+  // Ref for NextImage wrapper to detect its internal img element
+  const nextImageWrapperRef = useRef<HTMLDivElement>(null);
+  // Track previous URL to detect changes synchronously during render
+  const prevImageUrlRef = useRef<string | undefined>(undefined);
+  // Track previous switching state to detect navigation start
+  const prevIsSwitchingRef = useRef(false);
+
+  // CRITICAL: Reset ready flag SYNCHRONOUSLY during render, before onLoad can fire.
+  // Reset when:
+  // 1. URL changes - new image needs to report ready
+  // 2. isSwitching transitions from false to true - navigation started, even if URL is the same
+  //    (handles case where two pages have the same background image)
+  //
+  // Using useEffect for this creates a race condition:
+  // 1. URL changes, component re-renders
+  // 2. For cached images, onLoad fires immediately (maybe even before React attaches handlers)
+  // 3. handleLoad checks didReportImageReadyRef which is still TRUE from previous image
+  // 4. Guard exits early, callback is skipped
+  // 5. useEffect runs AFTER render, resetting the flag too late
+  // By resetting synchronously here, we ensure the flag is false before any event handlers run.
+  const switchingStarted = isSwitching && !prevIsSwitchingRef.current;
+  if (prevImageUrlRef.current !== backgroundImageUrl || switchingStarted) {
+    didReportImageReadyRef.current = false;
+    prevImageUrlRef.current = backgroundImageUrl;
+  }
+  prevIsSwitchingRef.current = isSwitching;
+
+  const handleLoad = useCallback(() => {
+    if (didReportImageReadyRef.current) {
+      return;
+    }
+    didReportImageReadyRef.current = true;
     // Wait for paint to ensure background is actually rendered before reporting ready.
     // This prevents the transition overlay from being removed before the background is visible.
     scheduleAfterPaint(() => {
       onBackgroundReady?.();
     });
-  };
+  }, [onBackgroundReady, backgroundImageUrl]);
 
-  const handleError = () => {
+  const handleError = useCallback(() => {
+    if (didReportImageReadyRef.current) return;
+    didReportImageReadyRef.current = true;
     onBackgroundReady?.();
-  };
+  }, [onBackgroundReady]);
 
-  // Track if we've already called onBackgroundReady to avoid double calls
-  const didReportReadyRef = useRef(false);
-
-  // Reset ready flag when video URL changes
+  // Handle already-loaded images (blob URLs from preload cache)
+  // The onLoad event may not fire for images that are already in memory
   useEffect(() => {
+    const img = imageRef.current;
+    if (!backgroundImageUrl || !img || didReportImageReadyRef.current) return;
+
+    // Check if image is already loaded (common with blob URLs)
+    if (img.complete && img.naturalWidth > 0) {
+      // Use decode() to ensure image is fully decoded before reporting ready
+      if (typeof img.decode === 'function') {
+        img.decode().then(handleLoad).catch(handleLoad);
+      } else {
+        handleLoad();
+      }
+    }
+  }, [backgroundImageUrl, handleLoad]);
+
+  // Handle NextImage load detection (for non-blob URLs like presigned URLs)
+  // NextImage's onLoad may not fire for cached images, so we detect its internal img element
+  useEffect(() => {
+    // Only handle non-blob URLs (blob URLs use native img with imageRef)
+    if (
+      !backgroundImageUrl ||
+      backgroundImageUrl.startsWith('blob:') ||
+      didReportImageReadyRef.current
+    )
+      return;
+
+    const wrapper = nextImageWrapperRef.current;
+    if (!wrapper) return;
+
+    let loadCleanup: (() => void) | null = null;
+
+    // Setup load listener on the internal img element
+    const setupLoadListener = (img: HTMLImageElement) => {
+      // Use decode() to ensure image is fully decoded before reporting ready
+      // This prevents flash on first load when image needs to be fetched and decoded
+      const decodeAndReport = () => {
+        if (typeof img.decode === 'function') {
+          img.decode().then(handleLoad).catch(handleLoad);
+        } else {
+          handleLoad();
+        }
+      };
+
+      // If already loaded, decode and report
+      if (img.complete && img.naturalWidth > 0) {
+        decodeAndReport();
+        return;
+      }
+      // Not loaded yet, attach load event listener
+      const onLoad = () => decodeAndReport();
+      img.addEventListener('load', onLoad, { once: true });
+      loadCleanup = () => img.removeEventListener('load', onLoad);
+    };
+
+    // Check if NextImage's internal img element already exists
+    const existingImg = wrapper.querySelector('img');
+    if (existingImg) {
+      setupLoadListener(existingImg);
+      return () => loadCleanup?.();
+    }
+
+    // Wait for NextImage to render its internal img element using MutationObserver
+    const observer = new MutationObserver((mutations) => {
+      for (let i = 0; i < mutations.length; i++) {
+        const addedNodes = mutations[i].addedNodes;
+        for (let j = 0; j < addedNodes.length; j++) {
+          const node = addedNodes[j];
+          if (node instanceof HTMLImageElement) {
+            setupLoadListener(node);
+            observer.disconnect();
+            return;
+          }
+          if (node instanceof Element) {
+            const img = node.querySelector('img');
+            if (img) {
+              setupLoadListener(img);
+              observer.disconnect();
+              return;
+            }
+          }
+        }
+      }
+    });
+
+    observer.observe(wrapper, { childList: true, subtree: true });
+
+    return () => {
+      observer.disconnect();
+      loadCleanup?.();
+    };
+  }, [backgroundImageUrl, handleLoad]);
+
+  // Track if we've already called onBackgroundReady to avoid double calls (for video)
+  const didReportReadyRef = useRef(false);
+  // Track previous video URL to detect changes synchronously during render
+  const prevVideoUrlRef = useRef<string | undefined>(undefined);
+
+  // CRITICAL: Reset ready flag SYNCHRONOUSLY during render (same reason as image above).
+  // Also reset when switching starts, to handle pages with same video URL.
+  if (prevVideoUrlRef.current !== backgroundVideoUrl || switchingStarted) {
     didReportReadyRef.current = false;
-  }, [backgroundVideoUrl]);
+    prevVideoUrlRef.current = backgroundVideoUrl;
+  }
 
   // Handle video first frame ready using requestVideoFrameCallback
   // This ensures the video's first frame is actually painted before we report ready
@@ -188,11 +348,15 @@ const CanvasBackground: React.FC<CanvasBackgroundProps> = ({
     }, 5000);
 
     // Use requestVideoFrameCallback for precise frame-level timing (Safari 15.4+, Chrome 83+)
+    // RVFC fires when frame is decoded, but compositor may not have painted yet.
+    // Wrap in scheduleAfterPaint for consistency with image handling.
     const videoWithRVFC = video as HTMLVideoElementWithRVFC;
     if (typeof videoWithRVFC.requestVideoFrameCallback === 'function') {
       videoWithRVFC.requestVideoFrameCallback(() => {
         clearTimeout(timeout);
-        reportVideoReady();
+        scheduleAfterPaint(() => {
+          reportVideoReady();
+        });
       });
     } else {
       // Fallback: use playing event + scheduleAfterPaint
@@ -216,6 +380,10 @@ const CanvasBackground: React.FC<CanvasBackgroundProps> = ({
   // When endTime is set, we disable native loop and handle it via the hook
   const useNativeLoop = videoEndTime == null ? videoLoop : false;
 
+  // Note: pauseVideo is now handled by useBackgroundVideoPlayback hook directly.
+  // The hook centralizes all playback control, eliminating race conditions between
+  // separate effects competing to control the video element.
+
   return (
     <>
       {/* Background image - z-1 keeps it below backdrop blur layer (z-5).
@@ -233,6 +401,7 @@ const CanvasBackground: React.FC<CanvasBackgroundProps> = ({
           {backgroundImageUrl.startsWith('blob:') ? (
             // eslint-disable-next-line @next/next/no-img-element
             <img
+              ref={imageRef}
               key={`bg_image_${backgroundImageUrl}`}
               src={backgroundImageUrl}
               alt='Background'
@@ -242,18 +411,23 @@ const CanvasBackground: React.FC<CanvasBackgroundProps> = ({
               onError={handleError}
             />
           ) : (
-            <NextImage
-              key={`bg_image_${backgroundImageUrl}`}
-              src={backgroundImageUrl}
-              alt='Background'
-              fill
-              sizes='100vw'
-              className='object-contain'
-              draggable={false}
-              unoptimized
-              onLoad={handleLoad}
-              onError={handleError}
-            />
+            <div
+              ref={nextImageWrapperRef}
+              className='absolute inset-0 h-full w-full'
+            >
+              <NextImage
+                key={`bg_image_${backgroundImageUrl}`}
+                src={backgroundImageUrl}
+                alt='Background'
+                fill
+                sizes='100vw'
+                className='object-contain'
+                draggable={false}
+                unoptimized
+                onLoad={handleLoad}
+                onError={handleError}
+              />
+            </div>
           )}
         </div>
       )}
@@ -265,6 +439,7 @@ const CanvasBackground: React.FC<CanvasBackgroundProps> = ({
         videoUrl={previousBgVideoUrl}
         isSwitching={isSwitching}
         isNewBgReady={isNewBgReady}
+        paused={pauseVideo}
       />
 
       {/* Background video - z-1 keeps it below backdrop blur layer (z-5)
@@ -274,18 +449,13 @@ const CanvasBackground: React.FC<CanvasBackgroundProps> = ({
           webkit-playsinline is legacy attribute for older iOS versions.
           preload="metadata" is required for iOS Safari video initialization.
           Video fades in when ready (opacity transition from 0 to 1). */}
-      {backgroundVideoUrl && (
+      {activeVideoUrl && (
         <video
           ref={videoRef}
-          key={`bg_video_${backgroundVideoUrl}`}
+          key={`bg_video_${activeVideoUrl}`}
           className='absolute inset-0 z-1 h-full w-full object-contain'
-          style={{
-            // Fade in when video is ready
-            opacity: isVideoBuffering ? 0 : 1,
-            transition: 'opacity 300ms ease-out',
-          }}
           src={videoSrc}
-          preload='metadata'
+          preload='auto'
           autoPlay={effectiveAutoplay}
           loop={useNativeLoop}
           muted={videoMuted}
@@ -295,17 +465,6 @@ const CanvasBackground: React.FC<CanvasBackgroundProps> = ({
         />
       )}
 
-      {/* Loading spinner for video-only pages (no image fallback).
-          Shows while video is buffering, provides user feedback. */}
-      {backgroundVideoUrl && !backgroundImageUrl && isVideoBuffering && (
-        <CanvasLoadingSpinner
-          isVisible={true}
-          message='Loading video...'
-          size='md'
-          zIndex={4}
-        />
-      )}
-
       {/* Background audio */}
       {backgroundAudioUrl && (
         <audio
diff --git a/frontend/src/components/Constructor/CanvasElement.tsx b/frontend/src/components/Constructor/CanvasElement.tsx
index d9adbf3..41a9ffe 100644
--- a/frontend/src/components/Constructor/CanvasElement.tsx
+++ b/frontend/src/components/Constructor/CanvasElement.tsx
@@ -18,12 +18,12 @@ import {
 } from '../../lib/elementEffects';
 import type { CanvasElement as CanvasElementType } from '../../types/constructor';
 import type { ResolvedTransitionSettings } from '../../types/transition';
+import type { PreloadCacheProvider } from '../../hooks/video';
 
 interface CanvasElementProps {
   element: CanvasElementType;
   isSelected: boolean;
   isEditMode: boolean;
-  isDisabled?: boolean;
   onClick: () => void;
   onMouseDown?: (event: React.MouseEvent) => void;
   /** Optional URL resolver for preloaded blob URLs */
@@ -40,13 +40,14 @@ interface CanvasElementProps {
   letterboxStyles?: React.CSSProperties;
   /** Page transition settings (for slide transition cascade in carousel/gallery) */
   pageTransitionSettings?: ResolvedTransitionSettings;
+  /** Preload cache provider for video elements */
+  preloadCache?: PreloadCacheProvider;
 }
 
 const CanvasElement: React.FC<CanvasElementProps> = ({
   element,
   isSelected,
   isEditMode,
-  isDisabled = false,
   onClick,
   onMouseDown,
   resolveUrl,
@@ -54,6 +55,7 @@ const CanvasElement: React.FC<CanvasElementProps> = ({
   onCarouselButtonPositionChange,
   letterboxStyles,
   pageTransitionSettings,
+  preloadCache,
 }) => {
   // Extract effect properties from element
   const effectProperties: Partial<ElementEffectProperties> = {
@@ -91,11 +93,6 @@ const CanvasElement: React.FC<CanvasElementProps> = ({
     left: `${xClamped}%`,
     top: `${yClamped}%`,
     transform: 'translate(-50%, -50%)',
-    // Reset button defaults to let UiElementRenderer control styling
-    background: 'transparent',
-    border: 'none',
-    padding: 0,
-    margin: 0,
   };
 
   // Merge interactive effects (preview mode only)
@@ -125,14 +122,24 @@ const CanvasElement: React.FC<CanvasElementProps> = ({
     };
   }
 
+  // Handle keyboard interaction for accessibility
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onClick();
+    }
+  };
+
   return (
-    <button
-      type='button'
+    <div
+      role='button'
+      tabIndex={0}
       data-constructor-element-id={element.id}
-      className='absolute'
+      className='absolute cursor-pointer'
       style={positionStyle}
       onMouseDown={isEditMode ? onMouseDown : undefined}
       onClick={onClick}
+      onKeyDown={handleKeyDown}
       {...(!isEditMode ? eventHandlers : {})}
     >
       <UiElementRenderer
@@ -140,13 +147,13 @@ const CanvasElement: React.FC<CanvasElementProps> = ({
         resolveUrl={resolveUrl}
         isSelected={isSelected}
         isEditMode={isEditMode}
-        isDisabled={isDisabled}
         onGalleryCardClick={onGalleryCardClick}
         onCarouselButtonPositionChange={onCarouselButtonPositionChange}
         letterboxStyles={letterboxStyles}
         pageTransitionSettings={pageTransitionSettings}
+        preloadCache={preloadCache}
       />
-    </button>
+    </div>
   );
 };
 
diff --git a/frontend/src/components/Constructor/TransitionPreviewOverlay.tsx b/frontend/src/components/Constructor/TransitionPreviewOverlay.tsx
index 959c7cd..02b38fd 100644
--- a/frontend/src/components/Constructor/TransitionPreviewOverlay.tsx
+++ b/frontend/src/components/Constructor/TransitionPreviewOverlay.tsx
@@ -7,9 +7,14 @@
  *
  * Supports letterbox mode to constrain transitions within canvas bounds,
  * matching the behavior of background images and UI elements.
+ *
+ * Hide behavior:
+ * - Waits one requestAnimationFrame after isFadingOut=true
+ * - This ensures the new background is painted before hiding
+ * - Then hides instantly (no CSS transition) since last video frame = new bg
  */
 
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import CanvasLoadingSpinner from '../CanvasLoadingSpinner';
 
 interface TransitionPreviewOverlayProps {
@@ -17,12 +22,12 @@ interface TransitionPreviewOverlayProps {
   videoRef: React.RefObject<HTMLVideoElement | null>;
   /** Whether the overlay is visible */
   isActive: boolean;
-  /** Whether the video is currently buffering (used to hide video during load) */
+  /** Whether the video is currently buffering (used to show spinner) */
   isBuffering?: boolean;
+  /** Whether first video frame has been displayed (used to determine if video should be visible during buffering) */
+  isVideoReady?: boolean;
   /** Show loading spinner during buffering (default: false for backward compat) */
   showSpinner?: boolean;
-  /** Loading message for spinner */
-  spinnerMessage?: string;
   /** Letterbox styles from useCanvasScale - positions overlay within canvas bounds */
   letterboxStyles?: React.CSSProperties;
   /** Video object-fit mode (default: 'contain' to match backgrounds) */
@@ -31,45 +36,72 @@ interface TransitionPreviewOverlayProps {
   opacity?: number;
   /** Forces video element remount when changed - prevents decoder state issues with pre-created blob URLs */
   videoKey?: string;
+  /** When true, overlay will hide after one paint frame (ensures bg is painted first) */
+  isFadingOut?: boolean;
+  /** Fade-out duration in ms - kept for interface compat, not used for video transitions (instant hide) */
+  fadeOutDuration?: number;
 }
 
 const TransitionPreviewOverlay: React.FC<TransitionPreviewOverlayProps> = ({
   videoRef,
   isActive,
   isBuffering = false,
+  isVideoReady = false,
   showSpinner = false,
-  spinnerMessage = 'Preparing transition...',
   letterboxStyles,
   videoFit = 'contain',
   opacity,
   videoKey,
+  isFadingOut = false,
+  // fadeOutDuration - not used for video transitions (instant hide)
 }) => {
+  // Delay hide by one frame to ensure new background is painted
+  const [shouldHide, setShouldHide] = useState(false);
+
+  useEffect(() => {
+    if (isFadingOut) {
+      // Wait one frame to ensure new background is painted
+      const rafId = requestAnimationFrame(() => {
+        setShouldHide(true);
+      });
+      return () => cancelAnimationFrame(rafId);
+    } else {
+      setShouldHide(false);
+    }
+  }, [isFadingOut]);
+
   if (!isActive) return null;
 
-  // Container opacity: 0 while buffering to prevent black flash
-  // Video first frame = old page background, so we hide everything until ready
-  const containerOpacity = isBuffering ? 0 : (opacity ?? 1);
+  // Container opacity:
+  // - 0 during initial buffering (before first frame displayed)
+  // - 0 when shouldHide (after one-frame delay, new bg is painted)
+  // - otherwise use provided opacity or 1
+  const isInitialBuffering = isBuffering && !isVideoReady;
+  const containerOpacity = isInitialBuffering
+    ? 0
+    : shouldHide
+      ? 0
+      : (opacity ?? 1);
+
+  // Only use transition for initial buffering fade-in (150ms)
+  // No transition when hiding - instant hide since last video frame = new bg
+  const useTransition = isInitialBuffering || (!shouldHide && !isFadingOut);
 
   return (
     // Outer: full viewport, transparent background
     // Transparent ensures if Safari clears video frame when paused,
     // the new page background shows through instead of black flash
     <div className='fixed inset-0 z-50 overflow-hidden pointer-events-none'>
-      {/* Loading spinner during buffering - provides user feedback */}
+      {/* Loading spinner during buffering */}
       {isBuffering && showSpinner && (
-        <CanvasLoadingSpinner
-          isVisible={true}
-          message={spinnerMessage}
-          size='lg'
-          zIndex={60}
-        />
+        <CanvasLoadingSpinner isVisible={true} size='lg' zIndex={60} />
       )}
 
-      {/* Video container - hidden while buffering */}
+      {/* Video container - hidden while buffering or fading out */}
       <div
         style={{
           opacity: containerOpacity,
-          transition: 'opacity 150ms ease-out',
+          transition: useTransition ? 'opacity 150ms ease-out' : 'none',
         }}
       >
         {/* Inner: respects letterbox dimensions when provided */}
diff --git a/frontend/src/components/Constructor/types.ts b/frontend/src/components/Constructor/types.ts
index dbd964f..c88fadd 100644
--- a/frontend/src/components/Constructor/types.ts
+++ b/frontend/src/components/Constructor/types.ts
@@ -109,7 +109,6 @@ export interface CanvasElementProps {
   element: CanvasElement;
   isSelected: boolean;
   isEditMode: boolean;
-  isDisabled?: boolean;
   canvasElapsedSec: number;
   preloadedIconUrl: boolean;
   onClick: (element: CanvasElement) => void;
diff --git a/frontend/src/components/PreviousBackgroundOverlay.tsx b/frontend/src/components/PreviousBackgroundOverlay.tsx
index c0e2ad8..8edd7f6 100644
--- a/frontend/src/components/PreviousBackgroundOverlay.tsx
+++ b/frontend/src/components/PreviousBackgroundOverlay.tsx
@@ -1,10 +1,14 @@
 /**
  * PreviousBackgroundOverlay Component
  *
- * Shows the previous page background during page transitions
+ * Shows the previous page background IMAGE during page transitions
  * while the new background is loading.
  *
- * Used by CanvasBackground component.
+ * Renders when: isSwitching=true AND isNewBgReady=false
+ * Hides instantly when new background is ready.
+ *
+ * Note: Video backgrounds are NOT rendered here. During transitions,
+ * video is covered by TransitionPreviewOverlay at z-50.
  */
 
 import React from 'react';
@@ -12,54 +16,44 @@ import React from 'react';
 interface PreviousBackgroundOverlayProps {
   /** Previous background image URL */
   imageUrl?: string;
-  /** Previous background video URL */
+  /** Previous background video URL (kept for interface compatibility, not rendered) */
   videoUrl?: string;
   /** Whether page is currently switching */
   isSwitching?: boolean;
   /** Whether new background is ready */
   isNewBgReady?: boolean;
+  /** Whether to pause video playback (kept for interface compatibility) */
+  paused?: boolean;
   /** Additional CSS classes */
   className?: string;
+  /** Fade duration - DEPRECATED, kept for interface compat */
+  fadeDuration?: number;
 }
 
 const PreviousBackgroundOverlay: React.FC<PreviousBackgroundOverlayProps> = ({
   imageUrl,
-  videoUrl,
+  // videoUrl - not used, see docstring
   isSwitching = false,
   isNewBgReady = false,
+  // paused - not used, see docstring
   className = '',
+  // fadeDuration - deprecated, not used
 }) => {
-  // Show previous background during loading (before new bg is ready)
-  const showPreviousBackground = isSwitching && !isNewBgReady;
+  // Simple render logic: show while switching AND new bg not ready
+  const shouldRender = isSwitching && !isNewBgReady && !!imageUrl;
 
-  if (!showPreviousBackground) return null;
+  if (!shouldRender) return null;
 
   return (
-    <>
-      {/* Previous background image */}
-      {imageUrl && (
-        <div
-          className={`pointer-events-none absolute inset-0 z-2 ${className}`}
-          style={{
-            backgroundImage: `url("${imageUrl}")`,
-            backgroundSize: 'contain',
-            backgroundPosition: 'center',
-            backgroundRepeat: 'no-repeat',
-          }}
-        />
-      )}
-      {/* Previous background video */}
-      {videoUrl && (
-        <video
-          className={`absolute inset-0 z-2 h-full w-full object-contain pointer-events-none ${className}`}
-          src={videoUrl}
-          autoPlay
-          loop
-          muted
-          playsInline
-        />
-      )}
-    </>
+    <div
+      className={`pointer-events-none absolute inset-0 z-2 ${className}`}
+      style={{
+        backgroundImage: `url("${imageUrl}")`,
+        backgroundSize: 'contain',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+      }}
+    />
   );
 };
 
diff --git a/frontend/src/components/RuntimeElement.tsx b/frontend/src/components/RuntimeElement.tsx
index a9b25ef..06aa9ca 100644
--- a/frontend/src/components/RuntimeElement.tsx
+++ b/frontend/src/components/RuntimeElement.tsx
@@ -15,10 +15,9 @@ import {
   hasAnyEffects,
   type ElementEffectProperties,
 } from '../lib/elementEffects';
-import { isNavigationElementType } from '../lib/elementDefaults';
-import { isBackNavigation } from '../lib/navigationHelpers';
 import type { CanvasElement } from '../types/constructor';
 import type { ResolvedTransitionSettings } from '../types/transition';
+import type { PreloadCacheProvider } from '../hooks/video';
 
 interface RuntimeElementProps {
   element: CanvasElement;
@@ -29,10 +28,10 @@ interface RuntimeElementProps {
   onGalleryCardClick?: (cardIndex: number) => void;
   /** Letterbox styles for constraining fullscreen elements to canvas bounds */
   letterboxStyles?: React.CSSProperties;
-  /** Whether forward navigation is disabled (neighbor pages not yet preloaded) */
-  isForwardNavDisabled?: boolean;
   /** Page transition settings (for slide transition cascade in carousel/gallery) */
   pageTransitionSettings?: ResolvedTransitionSettings;
+  /** Preload cache provider for video elements */
+  preloadCache?: PreloadCacheProvider;
 }
 
 // Clamp position to canvas bounds (0-100%)
@@ -45,8 +44,8 @@ const RuntimeElement: React.FC<RuntimeElementProps> = ({
   resolveUrl,
   onGalleryCardClick,
   letterboxStyles,
-  isForwardNavDisabled = false,
   pageTransitionSettings,
+  preloadCache,
 }) => {
   // Clamp coordinates to canvas bounds
   const xPercent = clamp(element.xPercent ?? 50, 0, 100);
@@ -106,14 +105,6 @@ const RuntimeElement: React.FC<RuntimeElementProps> = ({
     positionStyle = { ...positionStyle, ...animationStyle };
   }
 
-  // Compute disabled state for navigation elements
-  // Forward navigation disabled when neighbor pages not preloaded
-  // Back navigation always enabled (previous pages are already visited)
-  const isDisabled =
-    isNavigationElementType(element.type) &&
-    !isBackNavigation(element) &&
-    isForwardNavDisabled;
-
   return (
     <div
       className='absolute cursor-pointer'
@@ -127,8 +118,8 @@ const RuntimeElement: React.FC<RuntimeElementProps> = ({
         resolveUrl={resolveUrl}
         onGalleryCardClick={onGalleryCardClick}
         letterboxStyles={letterboxStyles}
-        isDisabled={isDisabled}
         pageTransitionSettings={pageTransitionSettings}
+        preloadCache={preloadCache}
       />
     </div>
   );
diff --git a/frontend/src/components/RuntimePresentation.tsx b/frontend/src/components/RuntimePresentation.tsx
index 8a66a54..f3dfb06 100644
--- a/frontend/src/components/RuntimePresentation.tsx
+++ b/frontend/src/components/RuntimePresentation.tsx
@@ -39,12 +39,12 @@ import {
   extractPageLinksOnly,
   extractElementsForPages,
 } from '../lib/extractPageLinks';
-import { usePageSwitch } from '../hooks/usePageSwitch';
+import { usePageNavigationState } from '../hooks/usePageNavigationState';
 import { useTransitionPlayback } from '../hooks/useTransitionPlayback';
-import { useBackgroundTransition } from '../hooks/useBackgroundTransition';
-import { useBackgroundUrls } from '../hooks/useBackgroundUrls';
+import { useNetworkAware } from '../hooks/useNetworkAware';
 import { resolveAssetPlaybackUrl } from '../lib/assetUrl';
-import { isSafari, scheduleAfterPaint } from '../lib/browserUtils';
+import { downloadManager } from '../lib/offline/DownloadManager';
+import { isSafari } from '../lib/browserUtils';
 import { logger } from '../lib/logger';
 import {
   resolveNavigationTarget,
@@ -164,32 +164,23 @@ export default function RuntimePresentation({
     designHeight: currentPage?.design_height ?? undefined,
   });
 
+  // Network-aware transitions: skip video on slow networks, use CSS fade instead
+  const { shouldUseVideoTransitions, networkInfo } = useNetworkAware();
+
   const [transitionPreview, setTransitionPreview] = useState<{
     targetPageId: string;
     videoUrl: string;
     storageKey: string;
     isBack: boolean;
     reverseVideoUrl?: string;
+    reverseStorageKey?: string;
   } | null>(null);
   const [isFullscreen, setIsFullscreen] = useState(false);
-  const [isBackgroundReady, setIsBackgroundReady] = useState(true);
-  // Track when transition video has completed but we're waiting for background to load
-  const [pendingTransitionComplete, setPendingTransitionComplete] =
-    useState(false);
   const [activeGalleryCarousel, setActiveGalleryCarousel] = useState<{
     element: CanvasElement;
     initialIndex: number;
   } | null>(null);
 
-  // Safari Black Flash Prevention (video transitions only):
-  // Track the last successfully displayed background to use as a "snapshot" layer.
-  // Only shown during video transitions to prevent black flashes.
-  const [lastKnownBgUrl, setLastKnownBgUrl] = useState<string>('');
-
-  // Track background video buffering state for loading indicator
-  const [isBackgroundVideoBuffering, setIsBackgroundVideoBuffering] =
-    useState(false);
-
   const transitionVideoRef = useRef<HTMLVideoElement>(null);
   const lastInitializedPageIdRef = useRef<string | null>(null);
 
@@ -237,6 +228,9 @@ export default function RuntimePresentation({
   }, [pages, pageLinks, selectedPageId]);
 
   // Initialize preload orchestrator with transformed data
+  // STREAM-FIRST: Preloads current page + transition videos only
+  // Online: Videos stream on-demand, cache after playback (no bandwidth competition)
+  // Offline: Assets already fully downloaded via useOfflineMode.startDownload()
   const preloadOrchestrator = usePreloadOrchestrator({
     pages,
     pageLinks,
@@ -246,8 +240,15 @@ export default function RuntimePresentation({
     enabled: !isLoading && !error,
   });
 
-  // Initialize page switch hook for smooth background transitions
-  const pageSwitch = usePageSwitch({
+  // Selected page - moved early for easier access
+  const selectedPage = useMemo(
+    () => pages.find((p) => p.id === selectedPageId) || null,
+    [pages, selectedPageId],
+  );
+
+  // Unified page navigation state machine (replaces 6+ separate hooks)
+  // Uses useReducer for atomic state transitions, preventing race conditions
+  const navState = usePageNavigationState({
     preloadCache: preloadOrchestrator
       ? {
           getReadyBlobUrl: preloadOrchestrator.getReadyBlobUrl,
@@ -255,10 +256,37 @@ export default function RuntimePresentation({
           preloadedUrls: preloadOrchestrator.preloadedUrls,
         }
       : undefined,
+    transitionSettings,
   });
 
+  // Destructure for convenience (matches previous hook interfaces)
+  // showElements/showSpinner are derived from the unified state machine phase:
+  // - showElements: true when phase is 'idle' or 'fading_in'
+  // - showSpinner: true when phase is 'preparing', 'loading_bg', or 'transition_done'
+  const {
+    currentImageUrl: navCurrentBgImageUrl,
+    currentVideoUrl: navCurrentBgVideoUrl,
+    previousImageUrl: navPreviousBgImageUrl,
+    previousVideoUrl: navPreviousBgVideoUrl,
+    isSwitching: navIsSwitching,
+    isNewBgReady: navIsNewBgReady,
+    pendingTransitionComplete,
+    isFadingIn,
+    showElements: navShowElements,
+    showSpinner: navShowSpinner,
+    showTransitionVideo,
+    transitionStyle,
+    lastKnownBgUrl,
+    onBackgroundReady: navOnBackgroundReady,
+    onVideoBufferStateChange,
+    onTransitionEnded,
+    navigateToPage: navNavigateToPage,
+    resetToIdle: navResetToIdle,
+    startTransition,
+  } = navState;
+
   // Integrate useTransitionPlayback hook for smooth transitions (matches Constructor pattern)
-  const { isBuffering, phase: transitionPhase } = useTransitionPlayback({
+  const { isBuffering, isVideoReady, phase: transitionPhase } = useTransitionPlayback({
     videoRef: transitionVideoRef,
     transition: transitionPreview
       ? {
@@ -266,33 +294,39 @@ export default function RuntimePresentation({
           storageKey: transitionPreview.storageKey,
           reverseMode: transitionPreview.reverseVideoUrl ? 'separate' : 'none',
           reverseVideoUrl: transitionPreview.reverseVideoUrl,
+          reverseStorageKey: transitionPreview.reverseStorageKey, // Raw path for cache lookup
           targetPageId: transitionPreview.targetPageId,
           displayName: 'Transition',
           isBack: transitionPreview.isBack,
         }
       : null,
     onComplete: async (targetPageId, isBack) => {
+      // Resume background downloads now that transition is complete
+      downloadManager.resumeAll();
       if (targetPageId) {
         const targetPage = pages.find((p) => p.id === targetPageId);
         // Mark this page as initialized to prevent redundant effect calls
         lastInitializedPageIdRef.current = targetPageId;
-        // Use shared hook to resolve blob URLs and switch page
-        await pageSwitch.switchToPage(targetPage, () => {
-          // Use applyPageSelection for proper history management (pops on back)
-          applyPageSelection(targetPageId, isBack ?? false);
+        // Signal that transition video has ended
+        // State machine transitions to 'transition_done', waiting for background
+        onTransitionEnded();
+        // DON'T close transitionPreview here - it stays visible until background is ready
+        // The useEffect below will close it when pendingTransitionComplete becomes false
+        // Navigate to target page - state machine handles ready state
+        await navNavigateToPage(targetPage, {
+          hasTransition: false, // Already played
+          isBack: isBack ?? false,
+          onSwitched: () => {
+            applyPageSelection(targetPageId, isBack ?? false);
+          },
         });
-        setIsBackgroundReady(false);
-        // Video transition completed - last frame shows new page background
-        // Signal that we're waiting for background to load before removing overlay
-        // Overlay will be removed instantly (no fade) when isBackgroundReady becomes true
-        setPendingTransitionComplete(true);
       } else {
         // No target page - clean up and remove overlay
         const video = transitionVideoRef.current;
         video?.removeAttribute('src');
         video?.load();
         setTransitionPreview(null);
-        setPendingTransitionComplete(false);
+        navResetToIdle();
       }
     },
     features: {
@@ -309,18 +343,26 @@ export default function RuntimePresentation({
     },
   });
 
-  // Use shared background transition hook for fade-from-black effects
-  // Video transitions end instantly (last frame = new page, then overlay removed).
-  // fadeIn controls the black overlay for non-video navigation.
-  // hasActiveTransition prevents fade during video-to-background handoff.
-  const { isFadingIn, resetFadeIn, transitionStyle } = useBackgroundTransition({
-    pageSwitch,
-    fadeIn: {
-      hasActiveTransition:
-        Boolean(transitionPreview) || pendingTransitionComplete,
-    },
-    transitionSettings,
-  });
+  // Sync transition video buffering state with navigation state machine
+  // This enables unified showSpinner logic in the state machine
+  useEffect(() => {
+    const isTransitionBuffering = Boolean(transitionPreview) && isBuffering;
+    onVideoBufferStateChange(isTransitionBuffering);
+  }, [transitionPreview, isBuffering, onVideoBufferStateChange]);
+
+  // Clean up transition preview when state machine says video overlay should be hidden
+  // showTransitionVideo is true during 'transitioning', 'transition_done', and 'fading_in' phases
+  // During 'fading_in', the overlay fades out (isFadingOut=true), then removed when phase goes to 'idle'
+  useEffect(() => {
+    if (transitionPreview && !showTransitionVideo) {
+      setTransitionPreview(null);
+    }
+  }, [transitionPreview, showTransitionVideo]);
+
+  // Reset navigation state when starting a new transition
+  const resetFadeIn = useCallback(() => {
+    navResetToIdle();
+  }, [navResetToIdle]);
 
   const toggleFullscreen = useCallback(async () => {
     try {
@@ -349,11 +391,6 @@ export default function RuntimePresentation({
       document.removeEventListener('fullscreenchange', handleFullscreenChange);
   }, []);
 
-  const selectedPage = useMemo(
-    () => pages.find((p) => p.id === selectedPageId) || null,
-    [pages, selectedPageId],
-  );
-
   const pageElements = useMemo(() => {
     if (!selectedPage) return [];
 
@@ -375,84 +412,27 @@ export default function RuntimePresentation({
   useEffect(() => {
     if (selectedPage && lastInitializedPageIdRef.current !== selectedPage.id) {
       // Only initialize when backgrounds are empty (initial load)
-      // navigateToPage handles subsequent navigation by calling switchToPage directly
-      if (!pageSwitch.currentBgImageUrl && !pageSwitch.currentBgVideoUrl) {
+      if (!navCurrentBgImageUrl && !navCurrentBgVideoUrl) {
         lastInitializedPageIdRef.current = selectedPage.id;
-        pageSwitch.switchToPage(selectedPage);
+        navNavigateToPage(selectedPage);
       }
     }
   }, [
     selectedPage,
-    pageSwitch.currentBgImageUrl,
-    pageSwitch.currentBgVideoUrl,
-    pageSwitch.switchToPage,
+    navCurrentBgImageUrl,
+    navCurrentBgVideoUrl,
+    navNavigateToPage,
   ]);
 
-  // Handle background ready state for pages without any background
+  // Video transition overlay removal - clears when elements should show
+  // When phase becomes 'idle' or 'fading_in' (navShowElements=true),
+  // the transition preview is no longer needed and can be cleared
   useEffect(() => {
-    // Only mark ready immediately if there's no background media at all.
-    // For pages with image or video, CanvasBackground will call onBackgroundReady
-    // after the media's first frame is painted (using scheduleAfterPaint or requestVideoFrameCallback).
-    if (
-      !selectedPage?.background_image_url &&
-      !selectedPage?.background_video_url
-    ) {
-      setIsBackgroundReady(true);
+    if (navShowElements && transitionPreview) {
+      // Clear transition preview - overlay will be removed
+      setTransitionPreview(null);
     }
-  }, [selectedPage?.background_image_url, selectedPage?.background_video_url]);
-
-  // Video transition overlay removal - instant (no fade) when background is ready
-  // Uses scheduleAfterPaint to ensure browser has painted the new background before removing overlay
-  // Note: Double RAF doesn't work in Safari (nested RAFs can execute in same frame)
-  // CRITICAL: Must wait for BOTH isBackgroundReady AND pageSwitch.isNewBgReady
-  // - isBackgroundReady: RuntimePresentation state (image onLoad or immediate for video pages)
-  // - pageSwitch.isNewBgReady: Controls PreviousBackgroundOverlay visibility
-  // If we only check isBackgroundReady, PreviousBackgroundOverlay may still be showing
-  useEffect(() => {
-    if (
-      pendingTransitionComplete &&
-      isBackgroundReady &&
-      pageSwitch.isNewBgReady
-    ) {
-      // Wait for paint cycle to complete before removing overlay
-      // scheduleAfterPaint handles Safari's RAF quirks automatically
-      scheduleAfterPaint(() => {
-        // CRITICAL: Remove overlay from DOM FIRST, then clear video src
-        // If we clear src before removing overlay, Safari shows black frame
-        // because video.removeAttribute('src') immediately clears the frame
-        setTransitionPreview(null);
-        setPendingTransitionComplete(false);
-
-        // Clear previous background now that transition is complete
-        // This resets isSwitching state for next navigation
-        pageSwitch.clearPreviousBackground();
-
-        // Clear video src AFTER overlay is removed from DOM
-        // Use another scheduleAfterPaint to ensure React has unmounted the overlay
-        scheduleAfterPaint(() => {
-          const video = transitionVideoRef.current;
-          if (video) {
-            video.removeAttribute('src');
-            video.load();
-          }
-        });
-      });
-    }
-  }, [
-    pendingTransitionComplete,
-    isBackgroundReady,
-    pageSwitch.isNewBgReady,
-    pageSwitch.clearPreviousBackground,
-  ]);
-
-  // Safari Black Flash Prevention (video transitions only):
-  // Update lastKnownBgUrl whenever we have a valid background image.
-  // This ensures snapshot is always ready before transitions start.
-  useEffect(() => {
-    if (pageSwitch.currentBgImageUrl) {
-      setLastKnownBgUrl(pageSwitch.currentBgImageUrl);
-    }
-  }, [pageSwitch.currentBgImageUrl]);
+  }, [navShowElements, transitionPreview]);
 
   const navigateToPage = useCallback(
     async (
@@ -464,10 +444,22 @@ export default function RuntimePresentation({
       const targetPage = pages.find((p) => p.id === targetPageId);
       if (!targetPage) return;
 
-      if (transitionVideoUrl) {
+      // Check if video is already cached (use video even on slow network if cached)
+      const isTransitionCached =
+        transitionVideoUrl && preloadOrchestrator?.getReadyBlobUrl(transitionVideoUrl);
+
+      // Use video if: has transition AND (cached OR good network)
+      const useVideoTransition =
+        transitionVideoUrl && (isTransitionCached || shouldUseVideoTransitions);
+
+      if (useVideoTransition) {
         // Reset states from previous transition/navigation
         resetFadeIn();
-        setPendingTransitionComplete(false);
+        // Pause background downloads to give transition video exclusive bandwidth
+        downloadManager.pauseAll();
+        // Signal navigation state machine that video transition is starting
+        // This sets phase to 'transitioning' so spinner shows during buffering
+        startTransition(targetPageId, isBack);
         // Play transition using useTransitionPlayback hook
         setTransitionPreview({
           targetPageId,
@@ -477,36 +469,64 @@ export default function RuntimePresentation({
           reverseVideoUrl: reverseVideoUrl
             ? resolveAssetPlaybackUrl(reverseVideoUrl)
             : undefined,
+          reverseStorageKey: reverseVideoUrl, // Raw storage path for reverse video cache lookup
         });
       } else {
         // Direct navigation with fade-from-black effect:
         // Page switches instantly, black overlay fades out to reveal new page
-        setIsBackgroundReady(false);
         // Mark this page as initialized to prevent redundant effect calls
         lastInitializedPageIdRef.current = targetPageId;
 
-        await pageSwitch.switchToPage(targetPage, () => {
-          // Use applyPageSelection for proper history management (pops on back)
-          applyPageSelection(targetPageId, isBack);
+        // Log when skipping video due to slow network
+        if (transitionVideoUrl && !shouldUseVideoTransitions) {
+          logger.info(
+            '[NAVIGATION] Skipping video transition due to slow network, downloading in background',
+            {
+              effectiveType: networkInfo.effectiveType,
+              downlink: networkInfo.downlink,
+              rtt: networkInfo.rtt,
+            },
+          );
+
+          // Start background download of transition video for future use (low priority)
+          downloadManager.addJob({
+            assetId: `transition-bg-${transitionVideoUrl}`,
+            projectId: 'transition-preload',
+            url: resolveAssetPlaybackUrl(transitionVideoUrl),
+            filename: transitionVideoUrl.split('/').pop() || 'transition.mp4',
+            variantType: 'original',
+            assetType: 'video',
+            priority: 10, // Low priority - background preload
+            storageKey: transitionVideoUrl,
+          });
+        }
+
+        await navNavigateToPage(targetPage, {
+          hasTransition: false,
+          isBack,
+          onSwitched: () => {
+            applyPageSelection(targetPageId, isBack);
+          },
         });
       }
     },
-    [pages, pageSwitch, resetFadeIn, applyPageSelection],
+    [
+      pages,
+      navNavigateToPage,
+      resetFadeIn,
+      applyPageSelection,
+      startTransition,
+      shouldUseVideoTransitions,
+      networkInfo,
+      preloadOrchestrator,
+    ],
   );
 
-  // Compute whether all neighbor backgrounds are ready for instant navigation
-  const areNeighborBackgroundsReady =
-    preloadOrchestrator?.areNeighborBackgroundsReady ?? true;
+  // Page loading state from unified navigation state machine
+  // navShowSpinner: true when phase is 'preparing', 'loading_bg', or 'transition_done'
+  // navShowElements: true when phase is 'idle' or 'fading_in'
+  const areTransitionsReady = preloadOrchestrator?.areTransitionsReady ?? true;
 
-  // Compute page loading state for UI feedback
-  const isPageLoading =
-    preloadOrchestrator?.currentPhase === 'phase1_current_page';
-  const areTransitionsReady =
-    preloadOrchestrator?.areTransitionsReady ?? true;
-
-  // Compute disabled state for forward navigation elements
-  // DISABLED: Allow navigation even if neighbors not preloaded
-  const isForwardNavDisabled = false && !areNeighborBackgroundsReady;
 
   const handleElementClick = useCallback(
     (element: CanvasElement) => {
@@ -517,18 +537,6 @@ export default function RuntimePresentation({
         return;
       }
 
-      // DISABLED: Block forward navigation if neighbor backgrounds not yet preloaded
-      // Back navigation is always allowed (previous pages are already visited)
-      if (
-        false &&
-        isNavigationType(element.type) &&
-        !isBackNavigation(element) &&
-        !areNeighborBackgroundsReady
-      ) {
-        logger.info('Navigation blocked - neighbors not preloaded');
-        return;
-      }
-
       // Get navigation context from hook for history-based back navigation
       const navContext = getNavigationContext();
 
@@ -577,7 +585,6 @@ export default function RuntimePresentation({
       transitionPhase,
       isBuffering,
       getNavigationContext,
-      areNeighborBackgroundsReady,
       setCurrentElementTransitionSettings,
     ],
   );
@@ -610,15 +617,9 @@ export default function RuntimePresentation({
     [preloadOrchestrator],
   );
 
-  // Unified background URL resolution via shared hook (same as constructor)
-  // No localPaths needed since RuntimePresentation has no editing mode
-  const {
-    backgroundImageSrc: backgroundImageUrl,
-    backgroundVideoSrc: backgroundVideoUrl,
-  } = useBackgroundUrls({
-    pageSwitch,
-    resolveUrl: resolveUrlWithBlob,
-  });
+  // Background URLs come directly from navigation state (already resolved)
+  const backgroundImageUrl = navCurrentBgImageUrl;
+  const backgroundVideoUrl = navCurrentBgVideoUrl;
 
   // Background video playback settings from selected page
   const videoAutoplay = selectedPage?.background_video_autoplay ?? true;
@@ -772,57 +773,68 @@ export default function RuntimePresentation({
               <CanvasBackground
                 backgroundImageUrl={backgroundImageUrl}
                 backgroundVideoUrl={backgroundVideoUrl}
-                previousBgImageUrl={pageSwitch.previousBgImageUrl}
-                previousBgVideoUrl={pageSwitch.previousBgVideoUrl}
-                isSwitching={pageSwitch.isSwitching}
-                isNewBgReady={pageSwitch.isNewBgReady}
-                onBackgroundReady={() => {
-                  setIsBackgroundReady(true);
-                  pageSwitch.markBackgroundReady();
-                }}
-                onVideoBufferStateChange={setIsBackgroundVideoBuffering}
+                previousBgImageUrl={navPreviousBgImageUrl}
+                previousBgVideoUrl={navPreviousBgVideoUrl}
+                isSwitching={navIsSwitching}
+                isNewBgReady={navIsNewBgReady}
+                onBackgroundReady={navOnBackgroundReady}
+                onVideoBufferStateChange={onVideoBufferStateChange}
                 videoAutoplay={videoAutoplay}
                 videoLoop={videoLoop}
                 videoMuted={soundControl.isMuted}
                 videoStartTime={videoStartTime}
                 videoEndTime={videoEndTime}
                 videoStoragePath={selectedPage?.background_video_url}
+                pauseVideo={
+                  Boolean(transitionPreview) ||
+                  pendingTransitionComplete ||
+                  navIsSwitching
+                }
               />
             </div>
             {/* End page background wrapper */}
 
-            {/* Page loading spinner - shows during Phase 1 (current page loading) */}
-            {isPageLoading && (
-              <CanvasLoadingSpinner
-                isVisible={true}
-                message='Loading page...'
-                progress={preloadOrchestrator?.phaseProgress}
-                zIndex={100}
-              />
+            {/* Page loading spinner - from unified navigation state machine.
+                navShowSpinner is true when:
+                - Phase is 'preparing', 'loading_bg', 'transition_done', OR
+                - Video transition is active but buffering
+                Skip when video transition overlay is active - it has its own spinner. */}
+            {navShowSpinner && !transitionPreview && (
+              <CanvasLoadingSpinner isVisible={true} zIndex={100} />
             )}
 
             {/* Page elements wrapper - z-[46] keeps it ABOVE carousel slide (z-10) AND carousel controls (z-45).
                 UI controls (z-50) remain on top.
-                No fade animation - elements switch instantly behind the black overlay. */}
-            <div
-              data-testid='page-elements-wrapper'
-              className='absolute inset-0 z-[46]'
-            >
-              {pageElements.map((element: CanvasElement) => (
-                <RuntimeElement
-                  key={element.id}
-                  element={element}
-                  onClick={() => handleElementClick(element)}
-                  resolveUrl={resolveUrlWithBlob}
-                  onGalleryCardClick={(cardIndex) =>
-                    handleGalleryCardClick(element, cardIndex)
-                  }
-                  letterboxStyles={letterboxStyles}
-                  isForwardNavDisabled={isForwardNavDisabled}
-                  pageTransitionSettings={transitionSettings}
-                />
-              ))}
-            </div>
+                No fade animation - elements switch instantly behind the black overlay.
+                Shows when phase is 'idle' or 'fading_in' (navShowElements). */}
+            {navShowElements && (
+              <div
+                data-testid='page-elements-wrapper'
+                className='absolute inset-0 z-[46]'
+              >
+                {pageElements.map((element: CanvasElement) => (
+                  <RuntimeElement
+                    key={element.id}
+                    element={element}
+                    onClick={() => handleElementClick(element)}
+                    resolveUrl={resolveUrlWithBlob}
+                    onGalleryCardClick={(cardIndex) =>
+                      handleGalleryCardClick(element, cardIndex)
+                    }
+                    letterboxStyles={letterboxStyles}
+                    pageTransitionSettings={transitionSettings}
+                    preloadCache={
+                      preloadOrchestrator
+                        ? {
+                            getReadyBlob: preloadOrchestrator.getReadyBlob,
+                            getCachedBlobUrl: preloadOrchestrator.getCachedBlobUrl,
+                          }
+                        : undefined
+                    }
+                  />
+                ))}
+              </div>
+            )}
             {/* End page elements wrapper */}
 
             {/* Overlay for fade-through-color transition - z-[100] is ABOVE elements (z-[46]).
@@ -837,26 +849,27 @@ export default function RuntimePresentation({
 
             {/* Transition overlay - uses useTransitionPlayback hook for smooth transitions */}
             {/* Opacity is 0 during 'preparing' phase to show old page while video loads */}
-            {/* NO fade-out: video itself IS the transition (last frame = new page) */}
-            {/* Overlay removed instantly via setTransitionPreview(null) in onComplete */}
-            {transitionPreview && (
+            {/* Fades out during 'fading_in' phase when background is ready */}
+            {/* Overlay stays visible until fade completes (phase goes to 'idle') */}
+            {transitionPreview && showTransitionVideo && (
               <TransitionPreviewOverlay
                 videoKey={transitionPreview.videoUrl}
                 videoRef={transitionVideoRef}
                 isActive={true}
                 isBuffering={
-                  // Hide overlay until video first frame is painted:
+                  // Show spinner during buffering:
                   // - 'idle': React render cycle before hook effect runs
                   // - 'preparing': Video loading/buffering
-                  // - isBuffering: Waiting for first frame paint (from hook)
+                  // - isBuffering: Waiting for first frame or mid-playback buffering
                   transitionPhase === 'idle' ||
                   transitionPhase === 'preparing' ||
                   isBuffering
                 }
+                isVideoReady={isVideoReady}
                 showSpinner={true}
-                spinnerMessage='Preparing transition...'
                 letterboxStyles={letterboxStyles}
-                opacity={1}
+                isFadingOut={isFadingIn}
+                fadeOutDuration={transitionSettings.durationMs}
               />
             )}
 
diff --git a/frontend/src/components/TransitionBlackOverlay.tsx b/frontend/src/components/TransitionBlackOverlay.tsx
index b3ca8e8..40a2e13 100644
--- a/frontend/src/components/TransitionBlackOverlay.tsx
+++ b/frontend/src/components/TransitionBlackOverlay.tsx
@@ -19,7 +19,7 @@ interface TransitionBlackOverlayProps {
   isFadingIn: boolean;
   /** Transition type - only renders overlay for 'fade' type */
   transitionType?: TransitionType;
-  /** Inline styles for transition duration/easing (from useBackgroundTransition) */
+  /** Inline styles for transition duration/easing (from usePageNavigationState) */
   transitionStyle?: React.CSSProperties;
   /** Overlay color (default: #000000) */
   overlayColor?: string;
diff --git a/frontend/src/components/UiElements/UiElementRenderer.tsx b/frontend/src/components/UiElements/UiElementRenderer.tsx
index 91dfecf..d7d8b36 100644
--- a/frontend/src/components/UiElements/UiElementRenderer.tsx
+++ b/frontend/src/components/UiElements/UiElementRenderer.tsx
@@ -11,6 +11,7 @@
 import React from 'react';
 import type { CanvasElement } from '../../types/constructor';
 import type { ResolvedTransitionSettings } from '../../types/transition';
+import type { PreloadCacheProvider } from '../../hooks/video';
 import { useElementWrapperStyle } from './shared/useElementWrapperStyle';
 import {
   isNavigationElementType,
@@ -43,7 +44,6 @@ export interface UiElementRendererProps {
   // Constructor-specific props (optional)
   isSelected?: boolean;
   isEditMode?: boolean;
-  isDisabled?: boolean;
   // Gallery carousel callback
   onGalleryCardClick?: (cardIndex: number) => void;
   // Carousel-specific callback for button position changes (constructor only)
@@ -56,6 +56,8 @@ export interface UiElementRendererProps {
   letterboxStyles?: React.CSSProperties;
   // Page transition settings (for slide transition cascade in carousel/gallery)
   pageTransitionSettings?: ResolvedTransitionSettings;
+  // Preload cache provider for video elements
+  preloadCache?: PreloadCacheProvider;
 }
 
 /**
@@ -69,17 +71,16 @@ export const UiElementRenderer: React.FC<UiElementRendererProps> = ({
   resolveUrl,
   isSelected = false,
   isEditMode = false,
-  isDisabled = false,
   onGalleryCardClick,
   onCarouselButtonPositionChange,
   letterboxStyles,
   pageTransitionSettings,
+  preloadCache,
 }) => {
   const { className, style } = useElementWrapperStyle({
     element,
     isSelected,
     isEditMode,
-    isDisabled,
   });
 
   // Common props for all element types
@@ -110,7 +111,7 @@ export const UiElementRenderer: React.FC<UiElementRendererProps> = ({
     );
   }
   if (isVideoPlayerElementType(element.type)) {
-    return <VideoPlayerElement {...commonProps} />;
+    return <VideoPlayerElement {...commonProps} preloadCache={preloadCache} />;
   }
   if (isAudioPlayerElementType(element.type)) {
     return <AudioPlayerElement {...commonProps} />;
diff --git a/frontend/src/components/UiElements/elements/VideoPlayerElement.tsx b/frontend/src/components/UiElements/elements/VideoPlayerElement.tsx
index 0a04b35..7ce4186 100644
--- a/frontend/src/components/UiElements/elements/VideoPlayerElement.tsx
+++ b/frontend/src/components/UiElements/elements/VideoPlayerElement.tsx
@@ -2,28 +2,43 @@
  * VideoPlayerElement Component
  *
  * Video player element with controls.
- * Renders with unified wrapper styling + content.
+ * Uses unified video hook for consistent behavior:
+ * - Multi-tier URL resolution (blob → cached → presigned → proxy)
+ * - Safari decode error recovery
+ * - Buffering state indicator
  */
 
 import React from 'react';
 import type { CSSProperties } from 'react';
 import type { CanvasElement } from '../../../types/constructor';
-import { resolveAssetPlaybackUrl } from '../../../lib/assetUrl';
+import type { PreloadCacheProvider } from '../../../hooks/video';
+import { useVideoPlayer } from '../../../hooks/video';
 
 interface VideoPlayerElementProps {
   element: CanvasElement;
-  resolveUrl?: (url: string | undefined) => string;
+  preloadCache?: PreloadCacheProvider;
   className: string;
   style: CSSProperties;
 }
 
 const VideoPlayerElement: React.FC<VideoPlayerElementProps> = ({
   element,
-  resolveUrl,
+  preloadCache,
   className,
   style,
 }) => {
-  const resolve = resolveUrl ?? resolveAssetPlaybackUrl;
+  const {
+    videoRef,
+    resolvedUrl,
+    isBuffering,
+  } = useVideoPlayer({
+    sourceUrl: element.mediaUrl,
+    preloadCache,
+    autoplay: Boolean(element.mediaAutoplay),
+    loop: Boolean(element.mediaLoop),
+    muted: Boolean(element.mediaMuted),
+    trackBuffering: true,
+  });
 
   if (!element.mediaUrl) {
     return (
@@ -35,9 +50,16 @@ const VideoPlayerElement: React.FC<VideoPlayerElementProps> = ({
 
   return (
     <div className={className} style={style}>
+      {/* Loading spinner during buffering */}
+      {isBuffering && (
+        <div className='absolute inset-0 flex items-center justify-center bg-black/20 rounded z-10'>
+          <div className='w-8 h-8 border-2 border-white/30 border-t-white rounded-full animate-spin' />
+        </div>
+      )}
       <video
-        className='w-full h-full object-cover rounded'
-        src={resolve(element.mediaUrl)}
+        ref={videoRef}
+        className={`w-full h-full object-cover rounded ${isBuffering ? 'opacity-70' : ''}`}
+        src={resolvedUrl || ''}
         controls
         autoPlay={Boolean(element.mediaAutoplay)}
         loop={Boolean(element.mediaLoop)}
diff --git a/frontend/src/components/UiElements/shared/useElementWrapperStyle.ts b/frontend/src/components/UiElements/shared/useElementWrapperStyle.ts
index 8204bd9..de913de 100644
--- a/frontend/src/components/UiElements/shared/useElementWrapperStyle.ts
+++ b/frontend/src/components/UiElements/shared/useElementWrapperStyle.ts
@@ -27,8 +27,6 @@ interface UseElementWrapperStyleOptions {
   isSelected?: boolean;
   /** Constructor-specific: show edit mode styling */
   isEditMode?: boolean;
-  /** Constructor-specific: show disabled styling */
-  isDisabled?: boolean;
 }
 
 interface ElementWrapperStyle {
@@ -47,7 +45,6 @@ export function useElementWrapperStyle({
   element,
   isSelected = false,
   isEditMode = false,
-  isDisabled = false,
 }: UseElementWrapperStyleOptions): ElementWrapperStyle {
   return useMemo(() => {
     // Determine element characteristics
@@ -100,11 +97,7 @@ export function useElementWrapperStyle({
       // Flex centering for navigation elements (both icons and text)
       isNavigationElement ? 'flex items-center justify-center' : '',
       // Constructor-specific states (only applied when in constructor)
-      isEditMode
-        ? 'cursor-move'
-        : isDisabled
-          ? 'cursor-not-allowed opacity-50'
-          : 'cursor-pointer',
+      isEditMode ? 'cursor-move' : 'cursor-pointer',
     ]
       .filter(Boolean)
       .join(' ');
@@ -116,5 +109,5 @@ export function useElementWrapperStyle({
       className: classNames,
       style: { ...paddingStyle, ...inlineStyle },
     };
-  }, [element, isSelected, isEditMode, isDisabled]);
+  }, [element, isSelected, isEditMode]);
 }
diff --git a/frontend/src/config/preload.config.ts b/frontend/src/config/preload.config.ts
index a985b0f..7dc3545 100644
--- a/frontend/src/config/preload.config.ts
+++ b/frontend/src/config/preload.config.ts
@@ -1,27 +1,22 @@
 /**
  * Preload Configuration
- *
- * Centralized configuration for asset preloading, priority weights, and queue settings.
  */
 
 export const PRELOAD_CONFIG = {
-  // Queue settings
   maxConcurrentDownloads: 3,
   maxRetries: 3,
   retryDelayMs: 1000,
 
-  // Size thresholds
-  largeFileThreshold: 5 * 1024 * 1024, // 5MB -> use IndexedDB
-  videoChunkSize: 5 * 1024 * 1024, // 5MB chunks
+  largeFileThreshold: 5 * 1024 * 1024,
+  videoChunkSize: 5 * 1024 * 1024,
   initialVideoBufferSeconds: 5,
 
-  // Priority weights (higher = load first)
   priority: {
     currentPage: 1000,
     neighborBase: 500,
     assetType: {
-      transition: 150, // Transitions preloaded for faster start
-      image: 100, // Backgrounds load first
+      transition: 150,
+      image: 100,
       audio: 50,
       video: 30,
     } as Record<string, number>,
@@ -37,57 +32,39 @@ export const PRELOAD_CONFIG = {
     maxLinkBonus: 50,
   },
 
-  // Storage
   storage: {
     warningPercent: 80,
     criticalPercent: 95,
-    minFreeBuffer: 50 * 1024 * 1024, // 50MB
+    minFreeBuffer: 50 * 1024 * 1024,
   },
 
-  // Auto-cleanup timeouts (from hoboken pattern)
   autoRemove: {
     completedMs: 3000,
     errorMs: 10000,
   },
 
-  // Neighbor graph traversal
-  neighborGraph: {
-    maxDepth: 1, // Only preload immediate neighbors (depth 2 was causing too many requests)
-    constructorMaxDepth: 1, // Same as maxDepth for constructor preview
-  },
-
-  // Partial preload settings (online mode only)
-  // Download only first N bytes of videos/audio for faster Phase 1 completion
-  // Playback uses presigned URL directly (browser handles remaining buffering)
   partialPreload: {
     enabled: true,
-    videoMaxBytes: 5 * 1024 * 1024, // 5MB (~5 seconds of video)
-    audioMaxBytes: 512 * 1024, // 512KB (~5 seconds of audio)
-    transitionMaxBytes: 3 * 1024 * 1024, // 3MB (~3 seconds of transition video)
+    videoMaxBytes: 5 * 1024 * 1024,
+    audioMaxBytes: 512 * 1024,
+    transitionMaxBytes: 3 * 1024 * 1024,
   },
 
-  // Streaming mode settings (for progressive playback)
-  // When enabled, presigned URL is used immediately for playback
-  // Streaming ready event fires after minimum buffer downloaded
-  // Full download continues in background for caching
   streaming: {
-    enabled: true, // Enable streaming for faster first playback
-    minBufferBytes: 3 * 1024 * 1024, // 3MB minimum before signaling ready
-    videoBufferTarget: 5, // seconds of video to buffer before playback
-    audioBufferTarget: 3, // seconds of audio to buffer before playback
+    enabled: true,
+    minBufferBytes: 3 * 1024 * 1024,
+    videoBufferTarget: 5,
+    audioBufferTarget: 3,
     mobile: {
-      minBufferBytes: 2 * 1024 * 1024, // 2MB on mobile (lower memory)
+      minBufferBytes: 2 * 1024 * 1024,
     },
   },
 
-  // UI feedback settings
   ui: {
-    spinnerDelayMs: 500, // Delay before showing loading spinner (avoids flash)
+    spinnerDelayMs: 500,
   },
 
-  // Asset URL field names in element content_json (camelCase)
   assetFields: {
-    // All asset URL fields for preloading extraction
     all: [
       'iconUrl',
       'imageUrl',
@@ -108,7 +85,6 @@ export const PRELOAD_CONFIG = {
       'poster',
       'thumbnail',
     ] as const,
-    // Image-only fields for decode before page switch
     images: [
       'iconUrl',
       'imageUrl',
@@ -121,9 +97,7 @@ export const PRELOAD_CONFIG = {
       'galleryCarouselBackIconUrl',
       'src',
     ] as const,
-    // Nested array fields containing assets
     nested: ['galleryCards', 'carouselSlides', 'galleryInfoSpans'] as const,
-    // Fields within nested items that contain URLs
     nestedUrlFields: ['imageUrl', 'videoUrl', 'iconUrl'] as const,
   },
 } as const;
diff --git a/frontend/src/config/transition.config.ts b/frontend/src/config/transition.config.ts
index 5bd5f46..6601246 100644
--- a/frontend/src/config/transition.config.ts
+++ b/frontend/src/config/transition.config.ts
@@ -1,54 +1,34 @@
 /**
  * Transition Playback Configuration
- *
- * Centralized configuration for transition video playback timing.
- * These values control when the transition finishes relative to the video end
- * to prevent black frames while maximizing video playback time.
  */
 
 export const TRANSITION_CONFIG = {
-  /**
-   * Duration timer offset (milliseconds before video end)
-   * The video playback finishes this many ms before the actual video end.
-   * Used as a fallback when other detection methods fail.
-   */
   finishBeforeEndMs: {
     safari: 100,
     firefox: 100,
     default: 100,
   },
 
-  /**
-   * TimeUpdate safety buffer (seconds before video end)
-   * When timeupdate event fires with currentTime >= (duration - buffer),
-   * the transition is considered finished.
-   * Safari needs a slightly larger buffer due to less frequent timeupdate events.
-   */
   timeUpdateSafetyBuffer: {
     safari: 0.15,
     default: 0.1,
   },
 
-  /**
-   * RequestVideoFrameCallback threshold (seconds before video end)
-   * When using high-precision frame callbacks, finish this many seconds
-   * before the video end to prevent showing black/fade frames.
-   */
   rvfcThreshold: 0.1,
 
-  /**
-   * Video loading timeouts
-   */
   timeouts: {
-    loadTimeoutMs: 10000, // Max time to wait for video to load
-    playTimeoutMs: 5000, // Max time to wait for play to start
+    loadTimeoutMs: 10000,
+    playTimeoutMs: 5000,
   },
 
-  /**
-   * Retry settings
-   */
   retry: {
-    maxDecodeRetries: 1, // Safari decode error retry attempts
+    maxDecodeRetries: 1,
+  },
+
+  progressTimeout: {
+    noProgressMs: 15000,
+    checkIntervalMs: 5000,
+    mobileMultiplier: 2,
   },
 } as const;
 
diff --git a/frontend/src/context/PageNavigationContext.tsx b/frontend/src/context/PageNavigationContext.tsx
new file mode 100644
index 0000000..0dfd704
--- /dev/null
+++ b/frontend/src/context/PageNavigationContext.tsx
@@ -0,0 +1,163 @@
+/**
+ * PageNavigationContext
+ *
+ * Context provider for sharing page navigation state with child components.
+ * Wraps the usePageNavigationState hook to provide state machine access
+ * throughout the component tree without prop drilling.
+ *
+ * Usage:
+ * ```tsx
+ * // In parent (constructor.tsx or RuntimePresentation.tsx)
+ * <PageNavigationProvider preloadCache={preloadOrchestrator} transitionSettings={transitionSettings}>
+ *   <CanvasBackground />
+ *   <Elements />
+ * </PageNavigationProvider>
+ *
+ * // In child components
+ * const { phase, onBackgroundReady, isSwitching } = usePageNavigationContext();
+ * ```
+ */
+
+import React, { createContext, useContext, ReactNode, useMemo } from 'react';
+import {
+  usePageNavigationState,
+  UsePageNavigationStateOptions,
+  UsePageNavigationStateResult,
+} from '../hooks/usePageNavigationState';
+
+// ============================================================================
+// Context
+// ============================================================================
+
+const PageNavigationContext =
+  createContext<UsePageNavigationStateResult | null>(null);
+
+// ============================================================================
+// Provider
+// ============================================================================
+
+export interface PageNavigationProviderProps
+  extends UsePageNavigationStateOptions {
+  children: ReactNode;
+}
+
+/**
+ * Provider component that wraps usePageNavigationState and exposes it via context.
+ *
+ * @example
+ * ```tsx
+ * <PageNavigationProvider
+ *   preloadCache={preloadOrchestrator}
+ *   transitionSettings={transitionSettings}
+ * >
+ *   <CanvasBackground ... />
+ *   <PageElements ... />
+ * </PageNavigationProvider>
+ * ```
+ */
+export function PageNavigationProvider({
+  children,
+  ...options
+}: PageNavigationProviderProps) {
+  const navState = usePageNavigationState(options);
+
+  return (
+    <PageNavigationContext.Provider value={navState}>
+      {children}
+    </PageNavigationContext.Provider>
+  );
+}
+
+// ============================================================================
+// Hooks
+// ============================================================================
+
+/**
+ * Hook to access page navigation state from context.
+ * Must be used within a PageNavigationProvider.
+ *
+ * @throws Error if used outside of PageNavigationProvider
+ *
+ * @example
+ * ```tsx
+ * function CanvasBackground() {
+ *   const { onBackgroundReady, isSwitching, isNewBgReady } = usePageNavigationContext();
+ *
+ *   return (
+ *     <img
+ *       onLoad={onBackgroundReady}
+ *       style={{ opacity: isNewBgReady ? 1 : 0 }}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export function usePageNavigationContext(): UsePageNavigationStateResult {
+  const ctx = useContext(PageNavigationContext);
+  if (!ctx) {
+    throw new Error(
+      'usePageNavigationContext must be used within a PageNavigationProvider',
+    );
+  }
+  return ctx;
+}
+
+/**
+ * Hook to optionally access page navigation state from context.
+ * Returns null if used outside of PageNavigationProvider.
+ * Useful for components that may be used both inside and outside the provider.
+ *
+ * @example
+ * ```tsx
+ * function FlexibleComponent() {
+ *   const navState = usePageNavigationContextOptional();
+ *
+ *   if (navState) {
+ *     // Inside provider - use navigation state
+ *     return <div>Phase: {navState.phase}</div>;
+ *   }
+ *
+ *   // Outside provider - render without navigation state
+ *   return <div>Standalone mode</div>;
+ * }
+ * ```
+ */
+export function usePageNavigationContextOptional(): UsePageNavigationStateResult | null {
+  return useContext(PageNavigationContext);
+}
+
+// ============================================================================
+// Selector Hook
+// ============================================================================
+
+/**
+ * Hook to select specific parts of the navigation state.
+ * Helps with performance by allowing components to subscribe to only what they need.
+ *
+ * @example
+ * ```tsx
+ * // Only re-render when phase changes
+ * const phase = usePageNavigationSelector(state => state.phase);
+ *
+ * // Get multiple values
+ * const { isSwitching, isNewBgReady } = usePageNavigationSelector(state => ({
+ *   isSwitching: state.isSwitching,
+ *   isNewBgReady: state.isNewBgReady,
+ * }));
+ * ```
+ */
+export function usePageNavigationSelector<T>(
+  selector: (state: UsePageNavigationStateResult) => T,
+): T {
+  const ctx = usePageNavigationContext();
+  // Note: This doesn't prevent re-renders on its own since the context value changes.
+  // For true selector optimization, consider using useSyncExternalStore or a state management library.
+  // This is primarily for code organization/readability.
+  return useMemo(() => selector(ctx), [ctx, selector]);
+}
+
+// ============================================================================
+// Exports
+// ============================================================================
+
+export type { UsePageNavigationStateResult } from '../hooks/usePageNavigationState';
diff --git a/frontend/src/hooks/index.ts b/frontend/src/hooks/index.ts
index a79bba1..94e78e8 100644
--- a/frontend/src/hooks/index.ts
+++ b/frontend/src/hooks/index.ts
@@ -20,12 +20,14 @@ export type {
   UsePageNavigationOptions,
   UsePageNavigationResult,
 } from './usePageNavigation';
-export { useBackgroundTransition } from './useBackgroundTransition';
+export { usePageNavigationState } from './usePageNavigationState';
 export type {
-  FadeInConfig,
-  UseBackgroundTransitionOptions,
-  UseBackgroundTransitionResult,
-} from './useBackgroundTransition';
+  NavigationPhase,
+  NavigablePage as NavStatePage,
+  PreloadCacheProvider,
+  UsePageNavigationStateOptions,
+  UsePageNavigationStateResult,
+} from './usePageNavigationState';
 export { useBackgroundVideoPlayback } from './useBackgroundVideoPlayback';
 export type {
   UseBackgroundVideoPlaybackOptions,
@@ -66,3 +68,7 @@ export { useSlideTransition } from './useSlideTransition';
 //   import { useTransitionPreview } from '../hooks/useTransitionPreview';
 //   import { useConstructorElements } from '../hooks/useConstructorElements';
 //   import { useConstructorPageActions } from '../hooks/useConstructorPageActions';
+
+// Video primitives - for building custom video playback hooks:
+//   import { useVideoEventManager, useVideoBufferingState, ... } from './video';
+export * from './video';
diff --git a/frontend/src/hooks/useBackgroundTransition.ts b/frontend/src/hooks/useBackgroundTransition.ts
deleted file mode 100644
index b264405..0000000
--- a/frontend/src/hooks/useBackgroundTransition.ts
+++ /dev/null
@@ -1,204 +0,0 @@
-/**
- * useBackgroundTransition Hook
- *
- * Manages background transition effects when switching between pages.
- * Controls the fade-from-black overlay for smooth page transitions.
- *
- * When a page switch occurs:
- * 1. Page content switches instantly (hidden by black overlay)
- * 2. Black overlay fades out (1 → 0) revealing new page
- *
- * NOTE: Video transitions do NOT use fades - the video itself IS the transition.
- */
-
-import {
-  useEffect,
-  useLayoutEffect,
-  useState,
-  useCallback,
-  useRef,
-} from 'react';
-import { isSafari, getCrossfadeDuration } from '../lib/browserUtils';
-import type { ResolvedTransitionSettings } from '../types/transition';
-
-/**
- * Fade-in configuration for page content
- */
-export interface FadeInConfig {
-  /** Whether a transition video is currently active (disables fade-in) */
-  hasActiveTransition: boolean;
-}
-
-export interface UseBackgroundTransitionOptions {
-  /** Page switch hook instance for clearing previous background */
-  pageSwitch: {
-    clearPreviousBackground: () => void;
-    isSwitching: boolean;
-    isNewBgReady: boolean;
-    previousBgImageUrl: string;
-    previousBgVideoUrl: string;
-  };
-  /** Optional fade-in configuration for page content */
-  fadeIn?: FadeInConfig;
-  /** Optional resolved transition settings for dynamic duration/easing */
-  transitionSettings?: ResolvedTransitionSettings | null;
-}
-
-export interface UseBackgroundTransitionResult {
-  /** Whether page content is currently fading (fade-from-black in progress) */
-  isFadingIn: boolean;
-  /** Reset fade-in state (for cleanup or cancellation) */
-  resetFadeIn: () => void;
-  /** Inline style for transition duration and easing */
-  transitionStyle: React.CSSProperties;
-}
-
-/**
- * Hook for managing background transition effects.
- *
- * @example
- * const { isFadingIn, transitionStyle } = useBackgroundTransition({
- *   pageSwitch,
- *   fadeIn: {
- *     hasActiveTransition: Boolean(transitionPreview),
- *   },
- *   transitionSettings,
- * });
- *
- * // Render black overlay that fades out
- * <TransitionBlackOverlay isFadingIn={isFadingIn} transitionStyle={transitionStyle} />
- */
-export function useBackgroundTransition({
-  pageSwitch,
-  fadeIn,
-  transitionSettings,
-}: UseBackgroundTransitionOptions): UseBackgroundTransitionResult {
-  const [isFadingIn, setIsFadingIn] = useState(false);
-
-  // Track previous isSwitching state to detect transition start
-  const wasSwitchingRef = useRef(false);
-
-  // Store transitionSettings in ref to avoid stale closures
-  const transitionSettingsRef = useRef(transitionSettings);
-  transitionSettingsRef.current = transitionSettings;
-
-  // Timer ref for fade completion
-  const fadeInTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  // Track if animation was already completed
-  const fadeInCompletedRef = useRef(false);
-
-  // Track fadeIn config in ref to avoid stale closure issues
-  const fadeInRef = useRef(fadeIn);
-  fadeInRef.current = fadeIn;
-
-  /**
-   * Reset fade-in state (for cleanup or cancellation).
-   */
-  const resetFadeIn = useCallback(() => {
-    setIsFadingIn(false);
-    fadeInCompletedRef.current = false;
-    if (fadeInTimerRef.current) {
-      clearTimeout(fadeInTimerRef.current);
-      fadeInTimerRef.current = null;
-    }
-  }, []);
-
-  /**
-   * Complete fade-in animation.
-   */
-  const completeFadeIn = useCallback(() => {
-    if (fadeInCompletedRef.current) return;
-    fadeInCompletedRef.current = true;
-
-    if (fadeInTimerRef.current) {
-      clearTimeout(fadeInTimerRef.current);
-      fadeInTimerRef.current = null;
-    }
-
-    setIsFadingIn(false);
-  }, []);
-
-  /**
-   * Effect: Clear previous background overlay after fade completes (direct navigation).
-   */
-  useEffect(() => {
-    const hasActiveTransition = fadeInRef.current?.hasActiveTransition ?? false;
-
-    // Skip clearing during video transitions
-    if (hasActiveTransition) return;
-
-    if (pageSwitch.isSwitching && pageSwitch.isNewBgReady && !isFadingIn) {
-      pageSwitch.clearPreviousBackground();
-    }
-  }, [
-    pageSwitch.isSwitching,
-    pageSwitch.isNewBgReady,
-    pageSwitch.clearPreviousBackground,
-    isFadingIn,
-  ]);
-
-  /**
-   * Layout effect: Start fade-from-black when switching starts.
-   * useLayoutEffect runs before paint, ensuring overlay appears immediately.
-   */
-  useLayoutEffect(() => {
-    const currentFadeIn = fadeInRef.current;
-
-    // Skip if fadeIn config was not provided
-    if (!currentFadeIn) {
-      wasSwitchingRef.current = pageSwitch.isSwitching;
-      return;
-    }
-
-    const justStartedSwitching =
-      pageSwitch.isSwitching && !wasSwitchingRef.current;
-
-    wasSwitchingRef.current = pageSwitch.isSwitching;
-
-    // Only start fade for NON-transition navigation
-    if (justStartedSwitching && !currentFadeIn.hasActiveTransition) {
-      fadeInCompletedRef.current = false;
-
-      if (fadeInTimerRef.current) {
-        clearTimeout(fadeInTimerRef.current);
-        fadeInTimerRef.current = null;
-      }
-
-      setIsFadingIn(true);
-
-      // Timer to end fade after animation duration
-      const duration = getCrossfadeDuration(
-        transitionSettingsRef.current?.durationMs,
-      );
-      const bufferMs = isSafari() ? 100 : 50;
-
-      fadeInTimerRef.current = setTimeout(() => {
-        fadeInTimerRef.current = null;
-        completeFadeIn();
-      }, duration + bufferMs);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pageSwitch.isSwitching, completeFadeIn]);
-
-  // Cleanup timer on unmount
-  useEffect(() => {
-    return () => {
-      if (fadeInTimerRef.current) {
-        clearTimeout(fadeInTimerRef.current);
-        fadeInTimerRef.current = null;
-      }
-    };
-  }, []);
-
-  const transitionStyle: React.CSSProperties = {
-    '--transition-duration': `${transitionSettings?.durationMs ?? 700}ms`,
-    '--transition-easing': transitionSettings?.easing ?? 'ease-in-out',
-    '--overlay-color': transitionSettings?.overlayColor ?? '#000000',
-  } as React.CSSProperties;
-
-  return {
-    isFadingIn,
-    resetFadeIn,
-    transitionStyle,
-  };
-}
diff --git a/frontend/src/hooks/useBackgroundUrls.ts b/frontend/src/hooks/useBackgroundUrls.ts
deleted file mode 100644
index f7363b1..0000000
--- a/frontend/src/hooks/useBackgroundUrls.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-/**
- * useBackgroundUrls Hook
- *
- * Unified hook for resolving background display URLs.
- * Used by both constructor and RuntimePresentation to ensure
- * consistent URL resolution and timing.
- *
- * Priority:
- * 1. Local storage paths (for constructor editing) resolved via blob cache
- * 2. pageSwitch URLs (for navigation, already resolved)
- *
- * This ensures both views use the same logic for background URL resolution.
- */
-
-import { useMemo } from 'react';
-import type { UsePageSwitchResult } from './usePageSwitch';
-
-/**
- * Function type for resolving storage paths to display URLs
- */
-export type UrlResolver = (storagePath: string) => string;
-
-export interface UseBackgroundUrlsOptions {
-  /** Page switch hook result */
-  pageSwitch: Pick<
-    UsePageSwitchResult,
-    'currentBgImageUrl' | 'currentBgVideoUrl' | 'currentBgAudioUrl'
-  >;
-  /** URL resolver function (typically from preload orchestrator) */
-  resolveUrl: UrlResolver;
-  /** Local storage paths - used for constructor editing override */
-  localPaths?: {
-    imageUrl?: string;
-    videoUrl?: string;
-    audioUrl?: string;
-  };
-}
-
-export interface UseBackgroundUrlsResult {
-  /** Resolved display URL for background image */
-  backgroundImageSrc: string;
-  /** Resolved display URL for background video */
-  backgroundVideoSrc: string;
-  /** Resolved display URL for background audio */
-  backgroundAudioSrc: string;
-}
-
-/**
- * Hook for unified background URL resolution.
- *
- * @example
- * // Constructor - with local editing state
- * const { backgroundImageSrc, backgroundVideoSrc, backgroundAudioSrc } = useBackgroundUrls({
- *   pageSwitch,
- *   resolveUrl: resolveUrlWithBlob,
- *   localPaths: {
- *     imageUrl: backgroundImageUrl,
- *     videoUrl: backgroundVideoUrl,
- *     audioUrl: backgroundAudioUrl,
- *   },
- * });
- *
- * @example
- * // RuntimePresentation - navigation only
- * const { backgroundImageSrc, backgroundVideoSrc, backgroundAudioSrc } = useBackgroundUrls({
- *   pageSwitch,
- *   resolveUrl: resolveUrlWithBlob,
- * });
- */
-export function useBackgroundUrls({
-  pageSwitch,
-  resolveUrl,
-  localPaths,
-}: UseBackgroundUrlsOptions): UseBackgroundUrlsResult {
-  // Memoize resolved URLs to avoid unnecessary recalculations
-  const backgroundImageSrc = useMemo(() => {
-    // Priority: local path (editing) > pageSwitch (navigation)
-    if (localPaths?.imageUrl) {
-      return resolveUrl(localPaths.imageUrl);
-    }
-    return pageSwitch.currentBgImageUrl;
-  }, [localPaths?.imageUrl, pageSwitch.currentBgImageUrl, resolveUrl]);
-
-  const backgroundVideoSrc = useMemo(() => {
-    if (localPaths?.videoUrl) {
-      return resolveUrl(localPaths.videoUrl);
-    }
-    return pageSwitch.currentBgVideoUrl;
-  }, [localPaths?.videoUrl, pageSwitch.currentBgVideoUrl, resolveUrl]);
-
-  const backgroundAudioSrc = useMemo(() => {
-    if (localPaths?.audioUrl) {
-      return resolveUrl(localPaths.audioUrl);
-    }
-    return pageSwitch.currentBgAudioUrl;
-  }, [localPaths?.audioUrl, pageSwitch.currentBgAudioUrl, resolveUrl]);
-
-  return {
-    backgroundImageSrc,
-    backgroundVideoSrc,
-    backgroundAudioSrc,
-  };
-}
diff --git a/frontend/src/hooks/useBackgroundVideoPlayback.ts b/frontend/src/hooks/useBackgroundVideoPlayback.ts
index 3cfd54c..40c9b49 100644
--- a/frontend/src/hooks/useBackgroundVideoPlayback.ts
+++ b/frontend/src/hooks/useBackgroundVideoPlayback.ts
@@ -2,7 +2,7 @@
  * useBackgroundVideoPlayback Hook
  *
  * Manages background video playback with custom start/end times.
- * Follows patterns from useTransitionPlayback for video time control.
+ * Built on top of video primitives for consistent behavior.
  *
  * When loop is disabled, videos are tracked per-session so they only play once
  * and show the last frame on subsequent page visits (until browser refresh).
@@ -10,6 +10,7 @@
 
 import { useEffect, useRef, useCallback, type RefObject } from 'react';
 import { logger } from '../lib/logger';
+import { useVideoEventManager } from './video/useVideoEventManager';
 
 // Session-scoped tracking of videos that have finished playing (when loop=false)
 // Key: videoUrl, cleared on browser refresh
@@ -30,6 +31,8 @@ export interface UseBackgroundVideoPlaybackOptions {
   startTime?: number | null;
   /** End time in seconds (default: null = play to end) */
   endTime?: number | null;
+  /** External pause control (e.g., during page transitions). Takes precedence over autoplay. */
+  paused?: boolean;
 }
 
 export interface UseBackgroundVideoPlaybackResult {
@@ -66,6 +69,7 @@ export function useBackgroundVideoPlayback({
   muted = true,
   startTime = null,
   endTime = null,
+  paused = false,
 }: UseBackgroundVideoPlaybackOptions): UseBackgroundVideoPlaybackResult {
   const videoRef = useRef<HTMLVideoElement | null>(null);
 
@@ -76,31 +80,25 @@ export function useBackgroundVideoPlayback({
   // Block autoplay if video already played this session (only when loop=false)
   const shouldBlockAutoplay =
     !loop && trackingKey ? playedVideos.has(trackingKey) : false;
+
   // Store current values in refs for event handlers to access
   const startTimeRef = useRef(startTime);
   const endTimeRef = useRef(endTime);
   const loopRef = useRef(loop);
-  const autoplayRef = useRef(autoplay);
+  const pausedRef = useRef(paused);
+  const trackingKeyRef = useRef(trackingKey);
 
   // Update refs when values change
   useEffect(() => {
     startTimeRef.current = startTime;
-  }, [startTime]);
-
-  useEffect(() => {
     endTimeRef.current = endTime;
-  }, [endTime]);
-
-  useEffect(() => {
     loopRef.current = loop;
-  }, [loop]);
+    pausedRef.current = paused;
+    trackingKeyRef.current = trackingKey;
+  }, [startTime, endTime, loop, paused, trackingKey]);
 
-  useEffect(() => {
-    autoplayRef.current = autoplay;
-  }, [autoplay]);
-
-  // Seek to start time when specified and video is ready
-  const seekToStartTime = useCallback(() => {
+  // Seek to start time when video metadata is loaded
+  const handleLoadedMetadata = useCallback(() => {
     const video = videoRef.current;
     const st = startTimeRef.current;
     if (!video || st == null || st <= 0) return;
@@ -109,6 +107,57 @@ export function useBackgroundVideoPlayback({
     logger.info('Background video: seeking to start time', { startTime: st });
   }, []);
 
+  // Handle time update for end time enforcement
+  const handleTimeUpdate = useCallback(() => {
+    const video = videoRef.current;
+    if (!video || pausedRef.current) return;
+
+    const currentEndTime = endTimeRef.current;
+    const currentLoop = loopRef.current;
+    const currentStartTime = startTimeRef.current;
+
+    // Skip if no end time is set
+    if (currentEndTime == null) return;
+
+    // Check if we've reached or passed the end time
+    if (video.currentTime >= currentEndTime) {
+      if (currentLoop) {
+        // Loop back to start time (or beginning)
+        const loopTarget = currentStartTime ?? 0;
+        video.currentTime = loopTarget;
+        logger.info('Background video: looping back', {
+          from: currentEndTime,
+          to: loopTarget,
+        });
+      } else {
+        // Pause at end time
+        video.pause();
+        logger.info('Background video: paused at end time', {
+          endTime: currentEndTime,
+        });
+      }
+    }
+  }, []);
+
+  // Handle video ended for play-once tracking
+  const handleEnded = useCallback(() => {
+    const key = trackingKeyRef.current;
+    if (key && !loopRef.current) {
+      playedVideos.add(key);
+    }
+  }, []);
+
+  // Use video event manager for event handling
+  useVideoEventManager({
+    videoRef,
+    enabled: Boolean(videoUrl),
+    handlers: {
+      onLoadedMetadata: handleLoadedMetadata,
+      onTimeUpdate: handleTimeUpdate,
+      onEnded: handleEnded,
+    },
+  });
+
   // Handle start time changes - seek immediately when startTime changes
   useEffect(() => {
     const video = videoRef.current;
@@ -119,23 +168,19 @@ export function useBackgroundVideoPlayback({
       video.currentTime = startTime;
       logger.info('Background video: seeking to start time', { startTime });
     }
+  }, [videoUrl, startTime]);
 
-    // Set up listener for initial load (if not loaded yet)
-    const handleLoadedMetadata = () => {
-      seekToStartTime();
-    };
-
-    video.addEventListener('loadedmetadata', handleLoadedMetadata);
-    return () => {
-      video.removeEventListener('loadedmetadata', handleLoadedMetadata);
-    };
-  }, [videoUrl, startTime, seekToStartTime]);
-
-  // Handle autoplay state changes
+  // Handle autoplay state changes (respects external pause control)
   useEffect(() => {
     const video = videoRef.current;
     if (!video || !videoUrl) return;
 
+    // External pause takes precedence over autoplay
+    if (paused) {
+      video.pause();
+      return;
+    }
+
     if (autoplay) {
       video.play().catch((error) => {
         // Autoplay blocked by browser - this is expected behavior
@@ -146,46 +191,7 @@ export function useBackgroundVideoPlayback({
     } else {
       video.pause();
     }
-  }, [videoUrl, autoplay]);
-
-  // Handle end time enforcement via timeupdate
-  useEffect(() => {
-    const video = videoRef.current;
-    if (!video || !videoUrl) return;
-
-    const handleTimeUpdate = () => {
-      const currentEndTime = endTimeRef.current;
-      const currentLoop = loopRef.current;
-      const currentStartTime = startTimeRef.current;
-
-      // Skip if no end time is set
-      if (currentEndTime == null) return;
-
-      // Check if we've reached or passed the end time
-      if (video.currentTime >= currentEndTime) {
-        if (currentLoop) {
-          // Loop back to start time (or beginning)
-          const loopTarget = currentStartTime ?? 0;
-          video.currentTime = loopTarget;
-          logger.info('Background video: looping back', {
-            from: currentEndTime,
-            to: loopTarget,
-          });
-        } else {
-          // Pause at end time
-          video.pause();
-          logger.info('Background video: paused at end time', {
-            endTime: currentEndTime,
-          });
-        }
-      }
-    };
-
-    video.addEventListener('timeupdate', handleTimeUpdate);
-    return () => {
-      video.removeEventListener('timeupdate', handleTimeUpdate);
-    };
-  }, [videoUrl]);
+  }, [videoUrl, autoplay, paused]);
 
   // Handle muted state changes
   useEffect(() => {
@@ -214,13 +220,6 @@ export function useBackgroundVideoPlayback({
       }
       return;
     }
-
-    // Mark video as played when it ends
-    const handleEnded = () => {
-      playedVideos.add(trackingKey);
-    };
-    video.addEventListener('ended', handleEnded);
-    return () => video.removeEventListener('ended', handleEnded);
   }, [videoUrl, trackingKey, loop]);
 
   return { videoRef, shouldBlockAutoplay };
diff --git a/frontend/src/hooks/useNeighborGraph.ts b/frontend/src/hooks/useNeighborGraph.ts
deleted file mode 100644
index 28af188..0000000
--- a/frontend/src/hooks/useNeighborGraph.ts
+++ /dev/null
@@ -1,233 +0,0 @@
-/**
- * useNeighborGraph Hook
- *
- * Builds a navigation graph from page_links to determine which pages
- * are neighbors and should have their assets preloaded.
- *
- * Uses shared asset discovery from lib/assetCache for consistent extraction.
- */
-
-import { useMemo } from 'react';
-import { PRELOAD_CONFIG } from '../config/preload.config';
-import {
-  extractElementAssets,
-  extractPageBackgroundAssets,
-  extractTransitionAssets,
-  toPreloadAssetInfo,
-} from '../lib/assetCache';
-import type {
-  PreloadPage,
-  PreloadPageLink,
-  PreloadElement,
-  PreloadAssetInfo,
-  PreloadNeighborInfo,
-} from '../types/preload';
-
-interface UseNeighborGraphOptions {
-  pages: PreloadPage[];
-  pageLinks: PreloadPageLink[];
-  elements: PreloadElement[];
-  maxDepth?: number;
-}
-
-interface NeighborGraphResult {
-  /**
-   * Get neighboring page IDs within maxDepth hops
-   */
-  getNeighbors: (
-    currentPageId: string,
-    maxDepth?: number,
-  ) => PreloadNeighborInfo[];
-
-  /**
-   * Get all assets that should be preloaded for given pages
-   */
-  getAssetsForPages: (pageIds: string[]) => PreloadAssetInfo[];
-
-  /**
-   * Get prioritized assets for preloading based on current page
-   */
-  getPrioritizedAssets: (
-    currentPageId: string,
-    maxDepth?: number,
-  ) => PreloadAssetInfo[];
-
-  /**
-   * Raw adjacency list for debugging
-   */
-  adjacencyList: Map<string, string[]>;
-}
-
-export function useNeighborGraph(
-  options: UseNeighborGraphOptions,
-): NeighborGraphResult {
-  const {
-    pages,
-    pageLinks,
-    elements,
-    maxDepth = PRELOAD_CONFIG.neighborGraph.maxDepth,
-  } = options;
-
-  // Build adjacency list from page links
-  const adjacencyList = useMemo(() => {
-    const adj = new Map<string, string[]>();
-
-    // Initialize all pages
-    pages.forEach((page) => {
-      adj.set(page.id, []);
-    });
-
-    // Add edges from active page links
-    const activeLinks = pageLinks.filter((link) => link.is_active !== false);
-
-    activeLinks.forEach((link) => {
-      if (link.from_pageId && link.to_pageId) {
-        const neighbors = adj.get(link.from_pageId) || [];
-        if (!neighbors.includes(link.to_pageId)) {
-          neighbors.push(link.to_pageId);
-          adj.set(link.from_pageId, neighbors);
-        }
-      }
-    });
-
-    return adj;
-  }, [pages, pageLinks]);
-
-  // BFS to find neighbors within depth
-  const getNeighbors = useMemo(() => {
-    return (currentPageId: string, depth = maxDepth): PreloadNeighborInfo[] => {
-      const visited = new Set<string>();
-      const result: PreloadNeighborInfo[] = [];
-      const queue: { pageId: string; distance: number }[] = [
-        { pageId: currentPageId, distance: 0 },
-      ];
-
-      visited.add(currentPageId);
-
-      while (queue.length > 0) {
-        const item = queue.shift();
-        if (!item) break;
-        const { pageId, distance } = item;
-
-        if (distance > 0) {
-          result.push({ pageId, distance });
-        }
-
-        if (distance < depth) {
-          const neighbors = adjacencyList.get(pageId) || [];
-          for (const neighborId of neighbors) {
-            if (!visited.has(neighborId)) {
-              visited.add(neighborId);
-              queue.push({ pageId: neighborId, distance: distance + 1 });
-            }
-          }
-        }
-      }
-
-      // Sort by distance (closest first)
-      return result.sort((a, b) => a.distance - b.distance);
-    };
-  }, [adjacencyList, maxDepth]);
-
-  // Get assets for a set of pages - uses shared extraction from assetDiscovery
-  const getAssetsForPages = useMemo(() => {
-    return (pageIds: string[]): PreloadAssetInfo[] => {
-      const assets: PreloadAssetInfo[] = [];
-      const seenUrls = new Set<string>();
-
-      pageIds.forEach((pageId) => {
-        // Find the page to get its background assets
-        const page = pages.find((p) => p.id === pageId);
-        if (page) {
-          // Use shared extraction for page backgrounds
-          const bgAssets = extractPageBackgroundAssets(page);
-          bgAssets.forEach((asset) => {
-            if (!seenUrls.has(asset.originalUrl)) {
-              seenUrls.add(asset.originalUrl);
-              assets.push(toPreloadAssetInfo(asset));
-            }
-          });
-        }
-
-        // Get elements for this page and use shared extraction
-        const pageElements = elements.filter((el) => el.pageId === pageId);
-        const elementAssets = extractElementAssets(pageElements, pageId);
-        elementAssets.forEach((asset) => {
-          if (!seenUrls.has(asset.originalUrl)) {
-            seenUrls.add(asset.originalUrl);
-            assets.push(toPreloadAssetInfo(asset));
-          }
-        });
-      });
-
-      // Extract transition videos using shared extraction
-      pageIds.forEach((pageId) => {
-        const transitionAssets = extractTransitionAssets(pageLinks, pageId);
-        transitionAssets.forEach((asset) => {
-          if (!seenUrls.has(asset.originalUrl)) {
-            seenUrls.add(asset.originalUrl);
-            assets.push(toPreloadAssetInfo(asset));
-          }
-        });
-      });
-
-      return assets;
-    };
-  }, [pages, elements, pageLinks]);
-
-  // Get prioritized assets for preloading
-  const getPrioritizedAssets = useMemo(() => {
-    return (currentPageId: string, depth = maxDepth): PreloadAssetInfo[] => {
-      // Get current page assets (highest priority)
-      const currentPageAssets = getAssetsForPages([currentPageId]).map(
-        (asset) => ({
-          ...asset,
-          priority:
-            PRELOAD_CONFIG.priority.currentPage +
-            (PRELOAD_CONFIG.priority.assetType[asset.assetType] || 0),
-        }),
-      );
-
-      // Get neighbor page assets
-      const neighbors = getNeighbors(currentPageId, depth);
-      const neighborAssets: PreloadAssetInfo[] = [];
-
-      neighbors.forEach(({ pageId, distance }) => {
-        const assets = getAssetsForPages([pageId]);
-        assets.forEach((asset) => {
-          const basePriority = PRELOAD_CONFIG.priority.neighborBase / distance;
-          const typePriority =
-            PRELOAD_CONFIG.priority.assetType[asset.assetType] || 0;
-
-          neighborAssets.push({
-            ...asset,
-            priority: basePriority + typePriority,
-          });
-        });
-      });
-
-      // Combine and sort by priority (highest first)
-      const allAssets = [...currentPageAssets, ...neighborAssets];
-
-      // Deduplicate by URL, keeping highest priority
-      const urlToPriority = new Map<string, PreloadAssetInfo>();
-      allAssets.forEach((asset) => {
-        const existing = urlToPriority.get(asset.url);
-        if (!existing || asset.priority > existing.priority) {
-          urlToPriority.set(asset.url, asset);
-        }
-      });
-
-      return Array.from(urlToPriority.values()).sort(
-        (a, b) => b.priority - a.priority,
-      );
-    };
-  }, [getAssetsForPages, getNeighbors, maxDepth]);
-
-  return {
-    getNeighbors,
-    getAssetsForPages,
-    getPrioritizedAssets,
-    adjacencyList,
-  };
-}
diff --git a/frontend/src/hooks/useNetworkAware.ts b/frontend/src/hooks/useNetworkAware.ts
index 9860e37..65badb7 100644
--- a/frontend/src/hooks/useNetworkAware.ts
+++ b/frontend/src/hooks/useNetworkAware.ts
@@ -1,14 +1,12 @@
 /**
  * useNetworkAware Hook
  *
- * Monitors network conditions and adapts preloading strategy accordingly.
- * Uses the Network Information API where available.
+ * Monitors network conditions and adapts behavior accordingly.
  */
 
 import { useState, useEffect, useCallback } from 'react';
 import type { NetworkInfo } from '../types/offline';
 
-// Extend Navigator interface for Network Information API
 interface NetworkInformation extends EventTarget {
   readonly effectiveType?: 'slow-2g' | '2g' | '3g' | '4g';
   readonly downlink?: number;
@@ -25,22 +23,11 @@ interface NavigatorWithConnection extends Navigator {
 
 interface UseNetworkAwareResult {
   networkInfo: NetworkInfo;
-  /**
-   * Whether preloading should be aggressive (good connection)
-   */
   shouldPreloadAggressively: boolean;
-  /**
-   * Whether to prefer lower quality variants
-   */
   preferLowQuality: boolean;
-  /**
-   * Recommended concurrent download count based on network
-   */
   recommendedConcurrency: number;
-  /**
-   * Whether offline mode should be suggested to user
-   */
   suggestOfflineMode: boolean;
+  shouldUseVideoTransitions: boolean;
 }
 
 const getConnection = (): NetworkInformation | null => {
@@ -68,7 +55,6 @@ const getNetworkInfo = (): NetworkInfo => {
 export function useNetworkAware(): UseNetworkAwareResult {
   const [networkInfo, setNetworkInfo] = useState<NetworkInfo>(getNetworkInfo);
 
-  // Update network info on changes
   useEffect(() => {
     if (typeof window === 'undefined') return;
 
@@ -76,11 +62,9 @@ export function useNetworkAware(): UseNetworkAwareResult {
       setNetworkInfo(getNetworkInfo());
     };
 
-    // Listen for online/offline events
     window.addEventListener('online', updateNetworkInfo);
     window.addEventListener('offline', updateNetworkInfo);
 
-    // Listen for connection changes if available
     const connection = getConnection();
     if (connection) {
       connection.addEventListener('change', updateNetworkInfo);
@@ -95,36 +79,28 @@ export function useNetworkAware(): UseNetworkAwareResult {
     };
   }, []);
 
-  // Determine if preloading should be aggressive
   const shouldPreloadAggressively = useCallback((): boolean => {
     if (!networkInfo.isOnline) return false;
     if (networkInfo.saveData) return false;
-
-    // Good connection: 4g or high downlink
     if (networkInfo.effectiveType === '4g') return true;
     if (networkInfo.downlink && networkInfo.downlink >= 5) return true;
-
     return false;
   }, [networkInfo]);
 
-  // Determine if low quality variants should be preferred
   const preferLowQuality = useCallback((): boolean => {
     if (networkInfo.saveData) return true;
     if (networkInfo.effectiveType === 'slow-2g') return true;
     if (networkInfo.effectiveType === '2g') return true;
     if (networkInfo.downlink && networkInfo.downlink < 1) return true;
-
     return false;
   }, [networkInfo]);
 
-  // Calculate recommended concurrency
   const getRecommendedConcurrency = useCallback((): number => {
     if (!networkInfo.isOnline) return 0;
     if (networkInfo.saveData) return 1;
 
     switch (networkInfo.effectiveType) {
       case 'slow-2g':
-        return 1;
       case '2g':
         return 1;
       case '3g':
@@ -132,32 +108,40 @@ export function useNetworkAware(): UseNetworkAwareResult {
       case '4g':
         return 3;
       default:
-        // Fall back to downlink-based calculation
         if (networkInfo.downlink) {
           if (networkInfo.downlink < 1) return 1;
           if (networkInfo.downlink < 5) return 2;
           return 3;
         }
-        return 2; // Default
+        return 2;
     }
   }, [networkInfo]);
 
-  // Determine if offline mode should be suggested
   const suggestOfflineMode = useCallback((): boolean => {
-    // Suggest offline if on poor connection
     if (networkInfo.effectiveType === 'slow-2g') return true;
     if (networkInfo.effectiveType === '2g') return true;
     if (networkInfo.rtt && networkInfo.rtt > 500) return true;
     if (networkInfo.downlink && networkInfo.downlink < 0.5) return true;
-
     return false;
   }, [networkInfo]);
 
+  const shouldUseVideoTransitions = useCallback((): boolean => {
+    if (!networkInfo.isOnline) return false;
+    if (networkInfo.saveData) return false;
+    if (networkInfo.effectiveType === 'slow-2g') return false;
+    if (networkInfo.effectiveType === '2g') return false;
+    if (networkInfo.effectiveType === '3g') return false;
+    if (networkInfo.downlink !== undefined && networkInfo.downlink < 2) return false;
+    if (networkInfo.rtt !== undefined && networkInfo.rtt > 500) return false;
+    return true;
+  }, [networkInfo]);
+
   return {
     networkInfo,
     shouldPreloadAggressively: shouldPreloadAggressively(),
     preferLowQuality: preferLowQuality(),
     recommendedConcurrency: getRecommendedConcurrency(),
     suggestOfflineMode: suggestOfflineMode(),
+    shouldUseVideoTransitions: shouldUseVideoTransitions(),
   };
 }
diff --git a/frontend/src/hooks/usePageNavigationState.ts b/frontend/src/hooks/usePageNavigationState.ts
new file mode 100644
index 0000000..6d3f084
--- /dev/null
+++ b/frontend/src/hooks/usePageNavigationState.ts
@@ -0,0 +1,867 @@
+/**
+ * usePageNavigationState Hook
+ *
+ * Unified state machine for page navigation, replacing 6+ fragmented hooks.
+ * Uses useReducer for atomic state transitions, preventing race conditions.
+ *
+ * Consolidates:
+ * - usePageSwitch: URL resolution and switching
+ * - useBackgroundState: Background ready tracking
+ * - useBackgroundTransition: Fade-from-black effects
+ * - useTransitionCleanup: Video cleanup coordination
+ * - useBackgroundUrls: URL resolution for display
+ * - pageLoadingUtils: Loading state computation
+ *
+ * State Machine Phases:
+ * - idle: No navigation in progress, elements visible
+ * - preparing: Navigation triggered, saving previous URLs, resolving new URLs
+ * - transitioning: Video transition playing
+ * - transition_done: Video finished, waiting for background to load
+ * - loading_bg: Direct navigation (no video), waiting for background to load
+ * - fading_in: Black overlay fading out to reveal new page
+ */
+
+import { useReducer, useCallback, useRef, useEffect, useMemo } from 'react';
+import {
+  resolveAssetPlaybackUrl,
+  markPresignedUrlFailed,
+  isRelativeStoragePath,
+  isPresignedUrl,
+  buildProxyUrl,
+} from '../lib/assetUrl';
+import {
+  scheduleAfterPaint,
+  scheduleAfterPaintSafari,
+  isSafari,
+  getCrossfadeDuration,
+} from '../lib/browserUtils';
+import { logger } from '../lib/logger';
+import type { ResolvedTransitionSettings } from '../types/transition';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+/**
+ * Navigation phases as a finite state machine
+ */
+export type NavigationPhase =
+  | 'idle' // No navigation in progress
+  | 'preparing' // Resolving URLs, saving previous state
+  | 'transitioning' // Video transition playing
+  | 'transition_done' // Video finished, waiting for background
+  | 'loading_bg' // Direct navigation, waiting for background
+  | 'fading_in'; // Black overlay fading out
+
+/**
+ * Minimal page interface for navigation
+ */
+export interface NavigablePage {
+  id: string;
+  background_image_url?: string;
+  background_video_url?: string;
+  background_audio_url?: string;
+}
+
+/**
+ * Preload cache provider interface
+ */
+export interface PreloadCacheProvider {
+  getReadyBlobUrl?: (url: string) => string | null;
+  getCachedBlobUrl?: (url: string) => Promise<string | null>;
+  preloadedUrls?: Set<string>;
+}
+
+/**
+ * Internal state structure
+ */
+interface NavigationState {
+  phase: NavigationPhase;
+
+  // Current page URLs (resolved for display)
+  currentImageUrl: string;
+  currentVideoUrl: string;
+  currentAudioUrl: string;
+
+  // Previous page URLs (for overlay during transition)
+  previousImageUrl: string;
+  previousVideoUrl: string;
+
+  // Target page ID (during navigation)
+  targetPageId: string | null;
+
+  // Whether current navigation is a back navigation
+  isBackNavigation: boolean;
+
+  // Safari black flash prevention
+  lastKnownBgUrl: string;
+
+  // Video buffering state
+  isVideoBuffering: boolean;
+}
+
+/**
+ * Actions for the reducer
+ */
+type NavigationAction =
+  | {
+      type: 'START_NAVIGATION';
+      payload: {
+        hasTransition: boolean;
+        targetPageId: string | null;
+        isBack: boolean;
+      };
+    }
+  | {
+      type: 'START_TRANSITION';
+      payload: {
+        targetPageId: string | null;
+        isBack: boolean;
+      };
+    }
+  | {
+      type: 'URLS_RESOLVED';
+      payload: {
+        imageUrl: string;
+        videoUrl: string;
+        audioUrl: string;
+      };
+    }
+  | { type: 'TRANSITION_STARTED' }
+  | { type: 'TRANSITION_ENDED' }
+  | { type: 'BACKGROUND_READY' }
+  | { type: 'FADE_STARTED' }
+  | { type: 'FADE_COMPLETED' }
+  | {
+      type: 'SET_BACKGROUND_DIRECTLY';
+      payload: {
+        imageUrl: string;
+        videoUrl: string;
+        audioUrl: string;
+      };
+    }
+  | { type: 'RESET_TO_IDLE' }
+  | { type: 'SET_VIDEO_BUFFERING'; payload: boolean }
+  | { type: 'UPDATE_LAST_KNOWN_BG'; payload: string }
+  | { type: 'CLEAR_PREVIOUS_BACKGROUND' };
+
+// ============================================================================
+// Reducer
+// ============================================================================
+
+const initialState: NavigationState = {
+  phase: 'idle',
+  currentImageUrl: '',
+  currentVideoUrl: '',
+  currentAudioUrl: '',
+  previousImageUrl: '',
+  previousVideoUrl: '',
+  targetPageId: null,
+  isBackNavigation: false,
+  lastKnownBgUrl: '',
+  isVideoBuffering: false,
+};
+
+function navigationReducer(
+  state: NavigationState,
+  action: NavigationAction,
+): NavigationState {
+  // DevTools logging in development
+  if (process.env.NODE_ENV === 'development') {
+    logger.info('[NavigationState] Action:', {
+      type: action.type,
+      currentPhase: state.phase,
+      payload: 'payload' in action ? action.payload : undefined,
+    });
+  }
+
+  switch (action.type) {
+    case 'START_NAVIGATION':
+      // ATOMIC: Save previous URLs + set phase in one update
+      return {
+        ...state,
+        phase: action.payload.hasTransition ? 'transitioning' : 'loading_bg',
+        previousImageUrl: state.currentImageUrl,
+        previousVideoUrl: state.currentVideoUrl,
+        targetPageId: action.payload.targetPageId,
+        isBackNavigation: action.payload.isBack,
+      };
+
+    case 'START_TRANSITION':
+      // Video transition started (before video plays)
+      // Sets phase to 'transitioning' and saves previous URLs atomically
+      return {
+        ...state,
+        phase: 'transitioning',
+        previousImageUrl: state.currentImageUrl,
+        previousVideoUrl: state.currentVideoUrl,
+        targetPageId: action.payload.targetPageId,
+        isBackNavigation: action.payload.isBack,
+      };
+
+    case 'URLS_RESOLVED':
+      // URLs resolved, update current URLs
+      return {
+        ...state,
+        currentImageUrl: action.payload.imageUrl,
+        currentVideoUrl: action.payload.videoUrl,
+        currentAudioUrl: action.payload.audioUrl,
+      };
+
+    case 'TRANSITION_STARTED':
+      // Video transition has started playing
+      if (state.phase !== 'transitioning') return state;
+      return state; // Phase already correct, no change needed
+
+    case 'TRANSITION_ENDED':
+      // Video transition ended, wait for background
+      if (state.phase !== 'transitioning') return state;
+      return {
+        ...state,
+        phase: 'transition_done',
+      };
+
+    case 'BACKGROUND_READY':
+      // Background loaded, start fade-in (only from certain phases)
+      if (
+        state.phase !== 'transition_done' &&
+        state.phase !== 'loading_bg' &&
+        state.phase !== 'preparing'
+      ) {
+        return state;
+      }
+      return {
+        ...state,
+        phase: 'fading_in',
+      };
+
+    case 'FADE_STARTED':
+      // Fade animation started
+      if (state.phase !== 'fading_in') return state;
+      return state;
+
+    case 'FADE_COMPLETED':
+      // Fade animation completed, return to idle
+      return {
+        ...state,
+        phase: 'idle',
+        previousImageUrl: '',
+        previousVideoUrl: '',
+        targetPageId: null,
+        isBackNavigation: false,
+      };
+
+    case 'SET_BACKGROUND_DIRECTLY':
+      // Direct background update (edit mode) - bypasses navigation flow
+      return {
+        ...state,
+        phase: 'idle',
+        currentImageUrl: action.payload.imageUrl,
+        currentVideoUrl: action.payload.videoUrl,
+        currentAudioUrl: action.payload.audioUrl,
+        previousImageUrl: '',
+        previousVideoUrl: '',
+      };
+
+    case 'RESET_TO_IDLE':
+      // Force reset to idle state
+      return {
+        ...state,
+        phase: 'idle',
+        previousImageUrl: '',
+        previousVideoUrl: '',
+        targetPageId: null,
+        isBackNavigation: false,
+      };
+
+    case 'SET_VIDEO_BUFFERING':
+      return {
+        ...state,
+        isVideoBuffering: action.payload,
+      };
+
+    case 'UPDATE_LAST_KNOWN_BG':
+      // Update Safari black flash prevention snapshot
+      return {
+        ...state,
+        lastKnownBgUrl: action.payload,
+      };
+
+    case 'CLEAR_PREVIOUS_BACKGROUND':
+      return {
+        ...state,
+        previousImageUrl: '',
+        previousVideoUrl: '',
+      };
+
+    default:
+      return state;
+  }
+}
+
+// ============================================================================
+// Hook Options & Result
+// ============================================================================
+
+export interface UsePageNavigationStateOptions {
+  /** Preload cache provider for blob URL resolution */
+  preloadCache?: PreloadCacheProvider;
+  /** Fade duration in milliseconds (default: 700) */
+  fadeDurationMs?: number;
+  /** Transition settings for dynamic duration/easing */
+  transitionSettings?: ResolvedTransitionSettings | null;
+}
+
+export interface UsePageNavigationStateResult {
+  // Current state
+  phase: NavigationPhase;
+  state: NavigationState;
+
+  // Current page URLs (for display)
+  currentImageUrl: string;
+  currentVideoUrl: string;
+  currentAudioUrl: string;
+
+  // Previous page URLs (for overlay)
+  previousImageUrl: string;
+  previousVideoUrl: string;
+
+  // Safari black flash prevention
+  lastKnownBgUrl: string;
+
+  // Derived states (computed from phase)
+  isLoading: boolean;
+  showSpinner: boolean;
+  showElements: boolean;
+  showPreviousOverlay: boolean;
+  showTransitionVideo: boolean;
+  isFadingIn: boolean;
+  isSwitching: boolean;
+  isNewBgReady: boolean;
+  isBackgroundReady: boolean;
+  pendingTransitionComplete: boolean;
+
+  // Video buffering state
+  isVideoBuffering: boolean;
+
+  // Transition style for CSS
+  transitionStyle: React.CSSProperties;
+
+  // Actions
+  /** Start navigation to a new page */
+  navigateToPage: (
+    targetPage: NavigablePage | null,
+    options?: {
+      hasTransition?: boolean;
+      isBack?: boolean;
+      onSwitched?: () => void;
+    },
+  ) => Promise<void>;
+
+  /** Signal that background media is ready (call from CanvasBackground.onLoad) */
+  onBackgroundReady: () => void;
+
+  /** Signal that transition video has ended */
+  onTransitionEnded: () => void;
+
+  /** Reset background ready state (call before navigation) */
+  resetBackgroundReady: () => void;
+
+  /** Clear previous background overlay */
+  clearPreviousBackground: () => void;
+
+  /** Direct background update for edit mode (bypasses navigation flow) */
+  setBackgroundDirectly: (
+    imageUrl: string,
+    videoUrl: string,
+    audioUrl: string,
+  ) => void;
+
+  /** Reset to idle state */
+  resetToIdle: () => void;
+
+  /** Video buffering state callback */
+  onVideoBufferStateChange: (isBuffering: boolean) => void;
+
+  /** Mark new background as ready (for compatibility with usePageSwitch) */
+  markBackgroundReady: () => void;
+
+  /** Start a video transition (sets phase to 'transitioning') */
+  startTransition: (targetPageId: string | null, isBack?: boolean) => void;
+}
+
+// ============================================================================
+// Helper Functions
+// ============================================================================
+
+/**
+ * Decode an image from URL to ensure it's ready for display.
+ * Safari-specific: waits extra frame after decode to ensure pixels are painted.
+ */
+const decodeImage = (url: string): Promise<void> => {
+  return new Promise((resolve) => {
+    if (!url) {
+      resolve();
+      return;
+    }
+
+    const img = new window.Image();
+    const safariMode = isSafari();
+
+    const onReady = () => {
+      if (safariMode) {
+        scheduleAfterPaintSafari(() => resolve());
+      } else {
+        scheduleAfterPaint(() => resolve());
+      }
+    };
+
+    img.onload = () => {
+      if (typeof img.decode === 'function') {
+        img.decode().then(onReady).catch(onReady);
+      } else {
+        onReady();
+      }
+    };
+
+    img.onerror = () => onReady();
+    img.src = url;
+  });
+};
+
+/**
+ * Load and decode an image with presigned URL fallback.
+ */
+const loadImageWithFallback = (
+  url: string,
+  storageKey?: string,
+): Promise<string> => {
+  return new Promise((resolve) => {
+    const img = new window.Image();
+    const safariMode = isSafari();
+
+    const onImageReady = (srcUrl: string) => {
+      if (safariMode) {
+        scheduleAfterPaintSafari(() => resolve(srcUrl));
+      } else {
+        resolve(srcUrl);
+      }
+    };
+
+    const tryLoad = (srcUrl: string, isRetry = false) => {
+      img.src = srcUrl;
+
+      img.onload = () => {
+        if (typeof img.decode === 'function') {
+          img
+            .decode()
+            .then(() => onImageReady(srcUrl))
+            .catch(() => onImageReady(srcUrl));
+        } else {
+          onImageReady(srcUrl);
+        }
+      };
+
+      img.onerror = () => {
+        if (!isRetry && isPresignedUrl(srcUrl) && storageKey) {
+          logger.info('Image presigned URL failed, retrying with proxy', {
+            storageKey: storageKey.slice(-50),
+          });
+          markPresignedUrlFailed(storageKey);
+          const proxyUrl = buildProxyUrl(storageKey);
+          tryLoad(proxyUrl, true);
+        } else {
+          onImageReady(srcUrl);
+        }
+      };
+    };
+
+    tryLoad(url);
+  });
+};
+
+// ============================================================================
+// Main Hook
+// ============================================================================
+
+export function usePageNavigationState(
+  options: UsePageNavigationStateOptions = {},
+): UsePageNavigationStateResult {
+  const { preloadCache, transitionSettings } = options;
+  const fadeDurationMs =
+    options.fadeDurationMs ?? transitionSettings?.durationMs ?? 700;
+
+  const [state, dispatch] = useReducer(navigationReducer, initialState);
+
+  // Refs for stable callbacks
+  const preloadCacheRef = useRef(preloadCache);
+  preloadCacheRef.current = preloadCache;
+  const transitionSettingsRef = useRef(transitionSettings);
+  transitionSettingsRef.current = transitionSettings;
+
+  // Track created blob URLs for cleanup
+  const createdBlobUrlsRef = useRef<Set<string>>(new Set());
+
+  // Fade timer ref
+  const fadeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // ============================================================================
+  // URL Resolution
+  // ============================================================================
+
+  /**
+   * Resolve a storage path to a displayable URL.
+   */
+  const resolveToDisplayUrl = useCallback(
+    async (storagePath: string | undefined): Promise<string> => {
+      if (!storagePath) return '';
+
+      const cache = preloadCacheRef.current;
+
+      // 1. Try in-memory blob URL lookup (instant)
+      if (cache?.getReadyBlobUrl) {
+        const readyUrl = cache.getReadyBlobUrl(storagePath);
+        if (readyUrl) {
+          logger.info('Using ready blob URL (storage key)', {
+            storagePath: storagePath.slice(-50),
+          });
+          return readyUrl;
+        }
+      }
+
+      // 2. Try persistent cache by storage path
+      if (cache?.getCachedBlobUrl) {
+        try {
+          const blobUrl = await cache.getCachedBlobUrl(storagePath);
+          if (blobUrl) {
+            createdBlobUrlsRef.current.add(blobUrl);
+            return blobUrl;
+          }
+        } catch {
+          // Fall through
+        }
+      }
+
+      // 3. Resolve to playback URL
+      const originalUrl = resolveAssetPlaybackUrl(storagePath);
+      if (!originalUrl) return '';
+
+      // Try blob URL lookup by resolved URL
+      if (cache?.getReadyBlobUrl) {
+        const readyUrl = cache.getReadyBlobUrl(originalUrl);
+        if (readyUrl) {
+          return readyUrl;
+        }
+      }
+
+      // Try cached blob URL by resolved URL
+      if (cache?.getCachedBlobUrl) {
+        try {
+          const blobUrl = await cache.getCachedBlobUrl(originalUrl);
+          if (blobUrl) {
+            createdBlobUrlsRef.current.add(blobUrl);
+            return blobUrl;
+          }
+        } catch {
+          // Fall through
+        }
+      }
+
+      // Load with presigned URL fallback
+      const storageKey = isRelativeStoragePath(storagePath)
+        ? storagePath
+        : undefined;
+      return loadImageWithFallback(originalUrl, storageKey);
+    },
+    [],
+  );
+
+  /**
+   * Resolve video/audio URL.
+   */
+  const resolveMediaUrl = useCallback(
+    async (storagePath: string | undefined): Promise<string> => {
+      if (!storagePath) return '';
+
+      const cache = preloadCacheRef.current;
+
+      // 1. Try in-memory blob URL lookup
+      if (cache?.getReadyBlobUrl) {
+        const readyUrl = cache.getReadyBlobUrl(storagePath);
+        if (readyUrl) return readyUrl;
+      }
+
+      // 2. Try persistent cache
+      if (cache?.getCachedBlobUrl) {
+        try {
+          const blobUrl = await cache.getCachedBlobUrl(storagePath);
+          if (blobUrl) {
+            createdBlobUrlsRef.current.add(blobUrl);
+            return blobUrl;
+          }
+        } catch {
+          // Fall through
+        }
+      }
+
+      // 3. Resolve URL
+      const originalUrl = resolveAssetPlaybackUrl(storagePath);
+      if (!originalUrl) return '';
+
+      if (cache?.getReadyBlobUrl) {
+        const readyUrl = cache.getReadyBlobUrl(originalUrl);
+        if (readyUrl) return readyUrl;
+      }
+
+      if (cache?.getCachedBlobUrl) {
+        try {
+          const blobUrl = await cache.getCachedBlobUrl(originalUrl);
+          if (blobUrl) {
+            createdBlobUrlsRef.current.add(blobUrl);
+            return blobUrl;
+          }
+        } catch {
+          // Fall through
+        }
+      }
+
+      return originalUrl;
+    },
+    [],
+  );
+
+  // ============================================================================
+  // Actions
+  // ============================================================================
+
+  const navigateToPage = useCallback(
+    async (
+      targetPage: NavigablePage | null,
+      options: {
+        hasTransition?: boolean;
+        isBack?: boolean;
+        onSwitched?: () => void;
+      } = {},
+    ) => {
+      const { hasTransition = false, isBack = false, onSwitched } = options;
+
+      if (!targetPage) {
+        dispatch({ type: 'RESET_TO_IDLE' });
+        onSwitched?.();
+        return;
+      }
+
+      // Start navigation atomically
+      dispatch({
+        type: 'START_NAVIGATION',
+        payload: {
+          hasTransition,
+          targetPageId: targetPage.id,
+          isBack,
+        },
+      });
+
+      // Resolve URLs (may be async)
+      const [imageUrl, videoUrl, audioUrl] = await Promise.all([
+        resolveToDisplayUrl(targetPage.background_image_url),
+        resolveMediaUrl(targetPage.background_video_url),
+        resolveMediaUrl(targetPage.background_audio_url),
+      ]);
+
+      // Update current URLs
+      dispatch({
+        type: 'URLS_RESOLVED',
+        payload: { imageUrl, videoUrl, audioUrl },
+      });
+
+      // Notify caller
+      onSwitched?.();
+
+      // For blob URLs, decode image before marking ready
+      if (!hasTransition && (imageUrl.startsWith('blob:') || !imageUrl)) {
+        decodeImage(imageUrl).then(() => {
+          dispatch({ type: 'BACKGROUND_READY' });
+        });
+      }
+    },
+    [resolveToDisplayUrl, resolveMediaUrl],
+  );
+
+  const onBackgroundReady = useCallback(() => {
+    dispatch({ type: 'BACKGROUND_READY' });
+  }, []);
+
+  const onTransitionEnded = useCallback(() => {
+    dispatch({ type: 'TRANSITION_ENDED' });
+  }, []);
+
+  const resetBackgroundReady = useCallback(() => {
+    // This is called before navigation to reset state
+    // The actual reset happens in START_NAVIGATION
+  }, []);
+
+  const clearPreviousBackground = useCallback(() => {
+    dispatch({ type: 'CLEAR_PREVIOUS_BACKGROUND' });
+  }, []);
+
+  const setBackgroundDirectly = useCallback(
+    (imageUrl: string, videoUrl: string, audioUrl: string) => {
+      dispatch({
+        type: 'SET_BACKGROUND_DIRECTLY',
+        payload: { imageUrl, videoUrl, audioUrl },
+      });
+    },
+    [],
+  );
+
+  const resetToIdle = useCallback(() => {
+    dispatch({ type: 'RESET_TO_IDLE' });
+  }, []);
+
+  const onVideoBufferStateChange = useCallback((isBuffering: boolean) => {
+    dispatch({ type: 'SET_VIDEO_BUFFERING', payload: isBuffering });
+  }, []);
+
+  const markBackgroundReady = useCallback(() => {
+    dispatch({ type: 'BACKGROUND_READY' });
+  }, []);
+
+  const startTransition = useCallback(
+    (targetPageId: string | null, isBack = false) => {
+      dispatch({
+        type: 'START_TRANSITION',
+        payload: { targetPageId, isBack },
+      });
+    },
+    [],
+  );
+
+  // ============================================================================
+  // Effects
+  // ============================================================================
+
+  // Update lastKnownBgUrl for Safari black flash prevention
+  useEffect(() => {
+    if (state.currentImageUrl) {
+      dispatch({
+        type: 'UPDATE_LAST_KNOWN_BG',
+        payload: state.currentImageUrl,
+      });
+    }
+  }, [state.currentImageUrl]);
+
+  // Fade completion timer
+  useEffect(() => {
+    if (state.phase === 'fading_in') {
+      const duration = getCrossfadeDuration(
+        transitionSettingsRef.current?.durationMs,
+      );
+      const bufferMs = isSafari() ? 100 : 50;
+
+      fadeTimerRef.current = setTimeout(() => {
+        fadeTimerRef.current = null;
+        dispatch({ type: 'FADE_COMPLETED' });
+      }, duration + bufferMs);
+    }
+
+    return () => {
+      if (fadeTimerRef.current) {
+        clearTimeout(fadeTimerRef.current);
+        fadeTimerRef.current = null;
+      }
+    };
+  }, [state.phase]);
+
+  // ============================================================================
+  // Derived State
+  // ============================================================================
+
+  const derived = useMemo(
+    () => ({
+      isLoading: state.phase === 'preparing' || state.phase === 'loading_bg',
+      // Show spinner when:
+      // - Preparing navigation (resolving URLs)
+      // - Loading background (no video transition)
+      // - Transition video ended, waiting for background
+      // - Video transition active but buffering (video not playing yet)
+      showSpinner:
+        state.phase === 'preparing' ||
+        state.phase === 'loading_bg' ||
+        state.phase === 'transition_done' ||
+        (state.phase === 'transitioning' && state.isVideoBuffering),
+      showElements: state.phase === 'idle' || state.phase === 'fading_in',
+      showPreviousOverlay:
+        state.phase === 'loading_bg' || state.phase === 'transition_done',
+      // Keep transition video overlay visible through entire video transition flow:
+      // transitioning → transition_done → loading_bg → fading_in
+      // The overlay is only rendered when transitionPreview is set, so this won't
+      // affect direct navigation (no video transition).
+      showTransitionVideo:
+        state.phase === 'transitioning' ||
+        state.phase === 'transition_done' ||
+        state.phase === 'loading_bg' ||
+        state.phase === 'fading_in',
+      isFadingIn: state.phase === 'fading_in',
+      // Compatibility flags for existing components
+      isSwitching: state.phase !== 'idle' && state.phase !== 'fading_in',
+      isNewBgReady: state.phase === 'fading_in' || state.phase === 'idle',
+      isBackgroundReady: state.phase === 'idle' || state.phase === 'fading_in',
+      pendingTransitionComplete: state.phase === 'transition_done',
+    }),
+    [state.phase, state.isVideoBuffering],
+  );
+
+  // Transition style
+  const transitionStyle: React.CSSProperties = useMemo(
+    () =>
+      ({
+        '--transition-duration': `${transitionSettings?.durationMs ?? 700}ms`,
+        '--transition-easing': transitionSettings?.easing ?? 'ease-in-out',
+        '--overlay-color': transitionSettings?.overlayColor ?? '#000000',
+      }) as React.CSSProperties,
+    [
+      transitionSettings?.durationMs,
+      transitionSettings?.easing,
+      transitionSettings?.overlayColor,
+    ],
+  );
+
+  return {
+    // Current state
+    phase: state.phase,
+    state,
+
+    // Current page URLs
+    currentImageUrl: state.currentImageUrl,
+    currentVideoUrl: state.currentVideoUrl,
+    currentAudioUrl: state.currentAudioUrl,
+
+    // Previous page URLs
+    previousImageUrl: state.previousImageUrl,
+    previousVideoUrl: state.previousVideoUrl,
+
+    // Safari black flash prevention
+    lastKnownBgUrl: state.lastKnownBgUrl,
+
+    // Derived states
+    ...derived,
+
+    // Video buffering
+    isVideoBuffering: state.isVideoBuffering,
+
+    // Transition style
+    transitionStyle,
+
+    // Actions
+    navigateToPage,
+    onBackgroundReady,
+    onTransitionEnded,
+    resetBackgroundReady,
+    clearPreviousBackground,
+    setBackgroundDirectly,
+    resetToIdle,
+    onVideoBufferStateChange,
+    markBackgroundReady,
+    startTransition,
+  };
+}
diff --git a/frontend/src/hooks/usePageSwitch.ts b/frontend/src/hooks/usePageSwitch.ts
deleted file mode 100644
index c13f614..0000000
--- a/frontend/src/hooks/usePageSwitch.ts
+++ /dev/null
@@ -1,553 +0,0 @@
-/**
- * usePageSwitch Hook
- *
- * Unified page navigation hook that eliminates white/black flashes during page transitions.
- * Uses preloaded blob URLs when available and keeps previous background visible
- * until new one is ready to paint.
- *
- * Features:
- * - Blob URL resolution from preload cache (instant display)
- * - Presigned URL fallback (retries with proxy on CORS failure)
- * - Previous background overlay for smooth transitions
- * - Ready state management for Image onLoad coordination
- */
-
-import { useCallback, useRef, useState } from 'react';
-import {
-  resolveAssetPlaybackUrl,
-  markPresignedUrlFailed,
-  isRelativeStoragePath,
-  isPresignedUrl,
-  buildProxyUrl,
-} from '../lib/assetUrl';
-import { logger } from '../lib/logger';
-import {
-  scheduleAfterPaint,
-  scheduleAfterPaintSafari,
-  isSafari,
-} from '../lib/browserUtils';
-
-/**
- * Minimal page interface for page switching
- */
-export interface SwitchablePage {
-  id: string;
-  background_image_url?: string;
-  background_video_url?: string;
-  background_audio_url?: string;
-  // Background video playback settings
-  background_video_autoplay?: boolean;
-  background_video_loop?: boolean;
-  background_video_muted?: boolean;
-  background_video_start_time?: number | null;
-  background_video_end_time?: number | null;
-}
-
-/**
- * Preload cache provider interface
- */
-export interface PreloadCacheProvider {
-  /** Instant lookup - returns decoded blob URL ready to display (O(1)) */
-  getReadyBlobUrl?: (url: string) => string | null;
-  /** Fallback: async blob URL from cache (creates new blob URL) */
-  getCachedBlobUrl?: (url: string) => Promise<string | null>;
-  preloadedUrls?: Set<string>;
-}
-
-export interface UsePageSwitchOptions {
-  /** Preload cache provider for blob URL resolution */
-  preloadCache?: PreloadCacheProvider;
-}
-
-export interface UsePageSwitchResult {
-  /** Currently displayed background image URL */
-  currentBgImageUrl: string;
-  /** Currently displayed background video URL */
-  currentBgVideoUrl: string;
-  /** Currently displayed background audio URL */
-  currentBgAudioUrl: string;
-  /** Previous background image URL (for overlay) */
-  previousBgImageUrl: string;
-  /** Previous background video URL (for overlay during fade) */
-  previousBgVideoUrl: string;
-  /** Whether we're in the middle of a page switch */
-  isSwitching: boolean;
-  /** Whether the new background is ready to display */
-  isNewBgReady: boolean;
-  /**
-   * Switch to a new page with smooth transition.
-   * Resolves blob URLs from cache, shows previous background until new one is ready.
-   */
-  switchToPage: (
-    targetPage: SwitchablePage | null,
-    onSwitched?: () => void,
-  ) => Promise<void>;
-  /**
-   * Directly set backgrounds without transition overlay.
-   * Use for initial page load.
-   */
-  setBackgroundsDirectly: (
-    imageUrl: string,
-    videoUrl: string,
-    audioUrl: string,
-  ) => void;
-  /**
-   * Mark the new background as ready to display.
-   * Call this from Image onLoad callback.
-   */
-  markBackgroundReady: () => void;
-  /**
-   * Clear the previous background overlay.
-   * Call after transition completes or when ready to show new background.
-   */
-  clearPreviousBackground: () => void;
-}
-
-/**
- * Decode an image from URL to ensure it's ready for display.
- * Used for blob URLs that are already loaded but need decoding.
- * Returns a promise that resolves when the image is decoded.
- *
- * Safari-specific: waits extra frame after decode to ensure pixels are painted.
- */
-const decodeImage = (url: string): Promise<void> => {
-  return new Promise((resolve) => {
-    if (!url) {
-      resolve();
-      return;
-    }
-
-    const img = new window.Image();
-    const safariMode = isSafari();
-
-    const onReady = () => {
-      if (safariMode) {
-        scheduleAfterPaintSafari(() => resolve());
-      } else {
-        // For non-Safari, wait one paint frame after decode
-        scheduleAfterPaint(() => resolve());
-      }
-    };
-
-    img.onload = () => {
-      if (typeof img.decode === 'function') {
-        img.decode().then(onReady).catch(onReady); // Resolve even on decode error
-      } else {
-        onReady();
-      }
-    };
-
-    img.onerror = () => {
-      // Resolve even on error to not block navigation
-      onReady();
-    };
-
-    img.src = url;
-  });
-};
-
-/**
- * Load and decode an image with presigned URL fallback.
- * Returns the URL that successfully loaded.
- *
- * Safari-specific handling:
- * Safari's img.decode() can resolve before pixels are actually ready for painting.
- * For Safari, we add an extra frame wait after decode to ensure the image is
- * truly ready to display, preventing black flash during page transitions.
- */
-const loadImageWithFallback = (
-  url: string,
-  storageKey?: string,
-): Promise<string> => {
-  return new Promise((resolve) => {
-    const img = new window.Image();
-    const safariMode = isSafari();
-
-    const onImageReady = (srcUrl: string) => {
-      if (safariMode) {
-        // Safari: wait an extra frame after decode to ensure pixels are ready
-        scheduleAfterPaintSafari(() => resolve(srcUrl));
-      } else {
-        resolve(srcUrl);
-      }
-    };
-
-    const tryLoad = (srcUrl: string, isRetry = false) => {
-      img.src = srcUrl;
-
-      img.onload = () => {
-        if (typeof img.decode === 'function') {
-          img
-            .decode()
-            .then(() => onImageReady(srcUrl))
-            .catch(() => onImageReady(srcUrl));
-        } else {
-          onImageReady(srcUrl);
-        }
-      };
-
-      img.onerror = () => {
-        // If presigned URL failed and we have storage key, retry with proxy
-        if (!isRetry && isPresignedUrl(srcUrl) && storageKey) {
-          logger.info('Image presigned URL failed, retrying with proxy', {
-            storageKey: storageKey.slice(-50),
-          });
-          markPresignedUrlFailed(storageKey);
-          const proxyUrl = buildProxyUrl(storageKey);
-          tryLoad(proxyUrl, true);
-        } else {
-          // Give up but still resolve to not block navigation
-          onImageReady(srcUrl);
-        }
-      };
-    };
-
-    tryLoad(url);
-  });
-};
-
-/**
- * Hook for smooth page switching without white/black flashes.
- *
- * Strategy:
- * 1. When switching pages, check if target background is in preload cache
- * 2. If cached, use blob URL (instant local data)
- * 3. If not cached, load with presigned URL fallback
- * 4. Keep previous background visible until new one is ready
- *
- * @example
- * const pageSwitch = usePageSwitch({
- *   preloadCache: {
- *     getCachedBlobUrl: preloadOrchestrator?.getCachedBlobUrl,
- *     preloadedUrls: preloadOrchestrator?.preloadedUrls,
- *   },
- * });
- *
- * // Switch to a page (with transition)
- * await pageSwitch.switchToPage(targetPage, () => {
- *   setActivePageId(targetPage.id);
- * });
- *
- * // In render, show previous background overlay while switching
- * {pageSwitch.previousBgImageUrl && !pageSwitch.isNewBgReady && (
- *   <div style={{ backgroundImage: `url("${pageSwitch.previousBgImageUrl}")` }} />
- * )}
- *
- * // On Image onLoad, mark background as ready
- * <Image onLoad={() => pageSwitch.markBackgroundReady()} />
- */
-export function usePageSwitch(
-  options: UsePageSwitchOptions = {},
-): UsePageSwitchResult {
-  const { preloadCache } = options;
-
-  // Ref to track preload cache (avoids dependency issues with object identity)
-  const preloadCacheRef = useRef(preloadCache);
-  preloadCacheRef.current = preloadCache;
-
-  // Current backgrounds
-  const [currentBgImageUrl, setCurrentBgImageUrl] = useState('');
-  const [currentBgVideoUrl, setCurrentBgVideoUrl] = useState('');
-  const [currentBgAudioUrl, setCurrentBgAudioUrl] = useState('');
-
-  // Refs to track current URLs for use in callbacks (avoids dependency issues)
-  const currentBgImageUrlRef = useRef('');
-  const currentBgVideoUrlRef = useRef('');
-  const currentBgAudioUrlRef = useRef('');
-  currentBgImageUrlRef.current = currentBgImageUrl;
-  currentBgVideoUrlRef.current = currentBgVideoUrl;
-  currentBgAudioUrlRef.current = currentBgAudioUrl;
-
-  // Previous background for overlay
-  const [previousBgImageUrl, setPreviousBgImageUrl] = useState('');
-  const previousBgImageUrlRef = useRef('');
-  previousBgImageUrlRef.current = previousBgImageUrl;
-
-  const [previousBgVideoUrl, setPreviousBgVideoUrl] = useState('');
-  const previousBgVideoUrlRef = useRef('');
-  previousBgVideoUrlRef.current = previousBgVideoUrl;
-
-  // Transition state
-  const [isSwitching, setIsSwitching] = useState(false);
-  // Initialize as false to trigger fade-in animation on initial page load
-  const [isNewBgReady, setIsNewBgReady] = useState(false);
-
-  // Track blob URLs we created so we can revoke them
-  const createdBlobUrlsRef = useRef<Set<string>>(new Set());
-
-  /**
-   * Revoke blob URLs that we created to prevent memory leaks
-   */
-  const revokeBlobUrl = useCallback((url: string) => {
-    if (url.startsWith('blob:') && createdBlobUrlsRef.current.has(url)) {
-      URL.revokeObjectURL(url);
-      createdBlobUrlsRef.current.delete(url);
-    }
-  }, []);
-
-  /**
-   * Resolve a storage path to a displayable URL.
-   * Priority: 1) ready blob URL by storage path, 2) cached blob URL by storage path,
-   * 3) ready blob URL by resolved URL, 4) cached blob URL, 5) presigned URL with fallback
-   */
-  const resolveToDisplayUrl = useCallback(
-    async (storagePath: string | undefined): Promise<string> => {
-      if (!storagePath) return '';
-
-      const cache = preloadCacheRef.current;
-
-      // 1. Try in-memory storage path lookup first (instant, same session)
-      if (cache?.getReadyBlobUrl) {
-        const readyUrl = cache.getReadyBlobUrl(storagePath);
-        if (readyUrl) {
-          logger.info('Using ready blob URL (storage key)', {
-            storagePath: storagePath.slice(-50),
-          });
-          return readyUrl;
-        }
-      }
-
-      // 2. Try persistent cache by storage path (survives page refresh)
-      if (cache?.getCachedBlobUrl) {
-        try {
-          const blobUrl = await cache.getCachedBlobUrl(storagePath);
-          if (blobUrl) {
-            createdBlobUrlsRef.current.add(blobUrl);
-            logger.info('Using cached blob URL (storage key)', {
-              storagePath: storagePath.slice(-50),
-            });
-            return blobUrl;
-          }
-        } catch {
-          // Fall through to URL resolution
-        }
-      }
-
-      // 3. Resolve to playback URL and try lookup (fallback for resolved URLs)
-      const originalUrl = resolveAssetPlaybackUrl(storagePath);
-      if (!originalUrl) return '';
-
-      // Try instant blob URL lookup by resolved URL
-      if (cache?.getReadyBlobUrl) {
-        const readyUrl = cache.getReadyBlobUrl(originalUrl);
-        if (readyUrl) {
-          logger.info('Using ready blob URL', { url: originalUrl.slice(-50) });
-          return readyUrl;
-        }
-      }
-
-      // Fallback: try cached blob URL by resolved URL (check Cache API directly)
-      if (cache?.getCachedBlobUrl) {
-        try {
-          const blobUrl = await cache.getCachedBlobUrl(originalUrl);
-          if (blobUrl) {
-            createdBlobUrlsRef.current.add(blobUrl);
-            logger.info('Using cached blob URL for background', {
-              originalUrl: originalUrl.slice(-50),
-            });
-            return blobUrl;
-          }
-        } catch {
-          // Fall through
-        }
-      }
-
-      // Load with presigned URL fallback (handles CORS failures)
-      const storageKey = isRelativeStoragePath(storagePath)
-        ? storagePath
-        : undefined;
-      return loadImageWithFallback(originalUrl, storageKey);
-    },
-    [],
-  );
-
-  /**
-   * Resolve video/audio URL.
-   * Priority: 1) ready blob URL by storage path, 2) cached blob URL by storage path,
-   * 3) ready blob URL by resolved URL, 4) cached blob URL, 5) resolved URL
-   */
-  const resolveMediaUrl = useCallback(
-    async (storagePath: string | undefined): Promise<string> => {
-      if (!storagePath) return '';
-
-      const cache = preloadCacheRef.current;
-
-      // 1. Try in-memory storage path lookup first (instant, same session)
-      if (cache?.getReadyBlobUrl) {
-        const readyUrl = cache.getReadyBlobUrl(storagePath);
-        if (readyUrl) {
-          return readyUrl;
-        }
-      }
-
-      // 2. Try persistent cache by storage path (survives page refresh)
-      if (cache?.getCachedBlobUrl) {
-        try {
-          const blobUrl = await cache.getCachedBlobUrl(storagePath);
-          if (blobUrl) {
-            createdBlobUrlsRef.current.add(blobUrl);
-            return blobUrl;
-          }
-        } catch {
-          // Fall through
-        }
-      }
-
-      // 3. Resolve URL and try lookup by resolved URL
-      const originalUrl = resolveAssetPlaybackUrl(storagePath);
-      if (!originalUrl) return '';
-
-      if (cache?.getReadyBlobUrl) {
-        const readyUrl = cache.getReadyBlobUrl(originalUrl);
-        if (readyUrl) {
-          return readyUrl;
-        }
-      }
-
-      // Try cached blob URL by resolved URL (check Cache API directly)
-      if (cache?.getCachedBlobUrl) {
-        try {
-          const blobUrl = await cache.getCachedBlobUrl(originalUrl);
-          if (blobUrl) {
-            createdBlobUrlsRef.current.add(blobUrl);
-            return blobUrl;
-          }
-        } catch {
-          // Fall through
-        }
-      }
-
-      return originalUrl;
-    },
-    [],
-  );
-
-  /**
-   * Switch to a new page with smooth transition
-   */
-  const switchToPage = useCallback(
-    async (targetPage: SwitchablePage | null, onSwitched?: () => void) => {
-      if (!targetPage) {
-        setCurrentBgImageUrl('');
-        setCurrentBgVideoUrl('');
-        setCurrentBgAudioUrl('');
-        setPreviousBgImageUrl('');
-        setPreviousBgVideoUrl('');
-        setIsSwitching(false);
-        setIsNewBgReady(true);
-        onSwitched?.();
-        return;
-      }
-
-      // CRITICAL: Resolve URLs BEFORE setting isSwitching
-      // This ensures the new background is ready when the crossfade animation starts.
-      // If we set isSwitching first, the animation begins with opacity:0 but the new
-      // content isn't ready yet, causing a shorter/faster perceived animation.
-      const [imageUrl, videoUrl, audioUrl] = await Promise.all([
-        resolveToDisplayUrl(targetPage.background_image_url),
-        resolveMediaUrl(targetPage.background_video_url),
-        resolveMediaUrl(targetPage.background_audio_url),
-      ]);
-
-      // Save current backgrounds as previous for overlay (use refs to avoid dependencies)
-      if (currentBgImageUrlRef.current) {
-        setPreviousBgImageUrl(currentBgImageUrlRef.current);
-      }
-      if (currentBgVideoUrlRef.current) {
-        setPreviousBgVideoUrl(currentBgVideoUrlRef.current);
-      }
-
-      // Set new backgrounds BEFORE triggering animation
-      setCurrentBgImageUrl(imageUrl);
-      setCurrentBgVideoUrl(videoUrl);
-      setCurrentBgAudioUrl(audioUrl);
-
-      // NOW trigger the crossfade animation
-      // The new background is already set, so animation shows the actual crossfade
-      setIsSwitching(true);
-      setIsNewBgReady(false);
-
-      // Notify caller that backgrounds are set
-      onSwitched?.();
-
-      // For blob URLs, decode the image before marking ready
-      // This ensures the image is actually decoded and ready for display,
-      // matching the constructor behavior where images have a render cycle head start
-      if (imageUrl.startsWith('blob:') || !imageUrl) {
-        decodeImage(imageUrl).then(() => {
-          setIsNewBgReady(true);
-        });
-      }
-      // For remote images, wait for Image onLoad (caller should use markBackgroundReady)
-    },
-    [resolveToDisplayUrl, resolveMediaUrl],
-  );
-
-  /**
-   * Directly set backgrounds without transition overlay.
-   * Used for initial page load with fade-in animation.
-   */
-  const setBackgroundsDirectly = useCallback(
-    (imageUrl: string, videoUrl: string, audioUrl: string) => {
-      // Revoke old blob URLs (use refs to avoid dependency)
-      revokeBlobUrl(currentBgImageUrlRef.current);
-      revokeBlobUrl(currentBgVideoUrlRef.current);
-      revokeBlobUrl(currentBgAudioUrlRef.current);
-      revokeBlobUrl(previousBgImageUrlRef.current);
-
-      setCurrentBgImageUrl(imageUrl);
-      setCurrentBgVideoUrl(videoUrl);
-      setCurrentBgAudioUrl(audioUrl);
-      setPreviousBgImageUrl('');
-      setIsSwitching(false);
-
-      // Trigger fade-in animation: set not-ready then ready after paint
-      // This ensures the CSS animation triggers on initial page load
-      setIsNewBgReady(false);
-      scheduleAfterPaint(() => {
-        setIsNewBgReady(true);
-      });
-    },
-    [revokeBlobUrl],
-  );
-
-  /**
-   * Mark background as ready (call from Image onLoad)
-   */
-  const markBackgroundReady = useCallback(() => {
-    setIsNewBgReady(true);
-  }, []);
-
-  /**
-   * Clear the previous background overlay (both image and video)
-   */
-  const clearPreviousBackground = useCallback(() => {
-    const prevImageUrl = previousBgImageUrlRef.current;
-    const prevVideoUrl = previousBgVideoUrlRef.current;
-    setPreviousBgImageUrl('');
-    setPreviousBgVideoUrl('');
-    setIsSwitching(false);
-
-    // Revoke the previous blob URLs after clearing
-    if (prevImageUrl) {
-      revokeBlobUrl(prevImageUrl);
-    }
-    if (prevVideoUrl) {
-      revokeBlobUrl(prevVideoUrl);
-    }
-  }, [revokeBlobUrl]);
-
-  return {
-    currentBgImageUrl,
-    currentBgVideoUrl,
-    currentBgAudioUrl,
-    previousBgImageUrl,
-    previousBgVideoUrl,
-    isSwitching,
-    isNewBgReady,
-    switchToPage,
-    setBackgroundsDirectly,
-    markBackgroundReady,
-    clearPreviousBackground,
-  };
-}
diff --git a/frontend/src/hooks/usePreloadOrchestrator.ts b/frontend/src/hooks/usePreloadOrchestrator.ts
index 88b4fd3..8872588 100644
--- a/frontend/src/hooks/usePreloadOrchestrator.ts
+++ b/frontend/src/hooks/usePreloadOrchestrator.ts
@@ -1,13 +1,13 @@
 /**
  * usePreloadOrchestrator Hook
  *
- * Main coordinator for online mode asset preloading.
- * Manages the priority queue and orchestrates downloads based on navigation.
+ * Coordinates asset preloading based on navigation.
+ * Preloads current page assets and outgoing transition videos.
  */
 
-import { useEffect, useRef, useCallback, useState, useMemo } from 'react';
-import { useNeighborGraph } from './useNeighborGraph';
+import { useEffect, useRef, useCallback, useState } from 'react';
 import { useNetworkAware } from './useNetworkAware';
+import { extractElementAssets } from '../lib/assetCache';
 import { downloadEventBus } from '../lib/offline/DownloadEventBus';
 import { downloadManager } from '../lib/offline/DownloadManager';
 import { StorageManager } from '../lib/offline/StorageManager';
@@ -36,62 +36,44 @@ interface UsePreloadOrchestratorOptions {
   currentPageId: string | null;
   pageHistory?: string[];
   enabled?: boolean;
-  maxNeighborDepth?: number;
 }
 
 interface PreloadQueueItem {
   id: string;
   url: string;
-  storageKey?: string; // Original storage key for presigned URL cache invalidation
+  storageKey?: string;
   priority: number;
   assetType: 'image' | 'video' | 'audio' | 'transition' | 'other';
   pageId: string;
 }
 
-/** Preload phase for UI feedback */
 export type PreloadPhase =
   | 'idle'
   | 'phase1_current_page'
   | 'phase2_transitions'
-  | 'phase3_neighbors'
   | 'complete';
 
 interface UsePreloadOrchestratorResult {
   isPreloading: boolean;
   preloadedUrls: Set<string>;
   queueLength: number;
-  /** Version counter that increments when blob URLs become ready (triggers re-renders) */
   readyUrlsVersion: number;
   preloadAsset: (url: string, priority?: number) => void;
   clearQueue: () => void;
   getCachedBlobUrl: (url: string) => Promise<string | null>;
   isUrlPreloaded: (url: string) => Promise<boolean>;
-  /** Instant lookup - returns decoded blob URL or null */
   getReadyBlobUrl: (url: string) => string | null;
-  /** Instant lookup - returns raw Blob for creating fresh blob URLs (used by transitions) */
   getReadyBlob: (url: string) => Blob | null;
-  /** Whether all neighbor page backgrounds are ready for instant navigation */
-  areNeighborBackgroundsReady: boolean;
-  /** Current preload phase (for UI feedback) */
   currentPhase: PreloadPhase;
-  /** Progress within current phase (0-100) */
   phaseProgress: number;
-  /** Whether current page is ready to display */
   isCurrentPageReady: boolean;
-  /** Whether outgoing transitions are ready */
   areTransitionsReady: boolean;
 }
 
-/**
- * Generate a unique ID for preload jobs
- */
 const generateJobId = (): string => {
   return `preload-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
 };
 
-/**
- * Map asset type string to AssetType enum expected by DownloadManager
- */
 const mapAssetType = (
   assetType: 'image' | 'video' | 'audio' | 'transition' | 'other',
 ): 'image' | 'video' | 'audio' | 'transition' | 'other' => {
@@ -101,22 +83,12 @@ const mapAssetType = (
 export function usePreloadOrchestrator(
   options: UsePreloadOrchestratorOptions,
 ): UsePreloadOrchestratorResult {
-  const {
-    pages,
-    pageLinks,
-    elements,
-    currentPageId,
-    enabled = true,
-    maxNeighborDepth = 1, // Only preload immediate neighbors by default
-  } = options;
+  const { pages, pageLinks, elements, currentPageId, enabled = true } = options;
 
   const [isPreloading, setIsPreloading] = useState(false);
   const [preloadedUrls] = useState(() => new Set<string>());
   const [queueLength, setQueueLength] = useState(0);
-  // Version counter to trigger re-renders when blob URLs become ready
   const [readyUrlsVersion, setReadyUrlsVersion] = useState(0);
-
-  // Phase tracking for UI feedback
   const [currentPhase, setCurrentPhase] = useState<PreloadPhase>('idle');
   const [phaseProgress, setPhaseProgress] = useState(0);
 
@@ -125,59 +97,14 @@ export function usePreloadOrchestrator(
   const lastPreloadedPageRef = useRef<string | null>(null);
   const lastPreloadedLinksCountRef = useRef<number>(0);
 
-  // Use neighbor graph for determining what to preload
-  const neighborGraph = useNeighborGraph({
-    pages,
-    pageLinks,
-    elements,
-    maxDepth: maxNeighborDepth,
-  });
-
-  // Use network info for adaptive preloading
   const { networkInfo } = useNetworkAware();
 
-  // Compute whether all neighbor page backgrounds are ready for instant navigation
-  // Uses readyUrlsVersion to trigger re-computation when blob URLs become ready
-  const areNeighborBackgroundsReady = useMemo(() => {
-    if (!currentPageId || !enabled) return true; // Assume ready if disabled
-
-    // Use existing neighborGraph infrastructure
-    const neighbors = neighborGraph.getNeighbors(currentPageId, 1);
-    if (neighbors.length === 0) return true; // No neighbors = ready
-
-    // Check if ALL neighbor background images have READY blob URLs
-    // IMPORTANT: Use downloadManager.getReadyBlobUrl() NOT preloadedUrls.has()
-    // preloadedUrls contains URLs that are QUEUED, not URLs that are READY
-    // We need to check if the blob URL is actually available for instant display
-    return neighbors.every(({ pageId }) => {
-      const page = pages.find((p) => p.id === pageId);
-      if (!page) return true; // Page not found = skip
-
-      // If page has background image, check if blob URL is actually ready
-      if (page.background_image_url) {
-        const imageKey = extractStoragePath(page.background_image_url);
-        // Check if blob URL is ready (not just queued)
-        if (!downloadManager.getReadyBlobUrl(imageKey)) return false;
-      }
-
-      // If page has only video background (no image), it can stream - consider ready
-      // This allows navigation to video-only pages without blocking
-
-      return true;
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentPageId, enabled, neighborGraph, pages, readyUrlsVersion]);
-
-  // Subscribe to blob URL ready events from DownloadManager
   useEffect(() => {
     const unsubscribe = downloadEventBus.on(
       OFFLINE_CONFIG.events.blobUrlReady as Parameters<
         typeof downloadEventBus.on
       >[0],
       (data: BlobUrlReadyEvent) => {
-        logger.info('[PRELOAD] Blob URL ready from DownloadManager', {
-          storageKey: data.storageKey.slice(-50),
-        });
         preloadedUrls.add(data.storageKey);
         setReadyUrlsVersion((v) => v + 1);
       },
@@ -185,14 +112,12 @@ export function usePreloadOrchestrator(
     return unsubscribe;
   }, [preloadedUrls]);
 
-  // Cleanup blob URLs on unmount
   useEffect(() => {
     return () => {
       downloadManager.clearBlobUrls();
     };
   }, []);
 
-  // Process the queue using DownloadManager
   const processQueue = useCallback(async () => {
     if (isProcessingRef.current) return;
     if (!networkInfo.isOnline) return;
@@ -204,41 +129,29 @@ export function usePreloadOrchestrator(
     isProcessingRef.current = true;
     setIsPreloading(true);
 
-    // Process all items in queue
     while (queueRef.current.length > 0) {
       const item = queueRef.current.shift();
       if (!item) break;
 
       setQueueLength(queueRef.current.length);
 
-      // Get canonical storage key
       const storageKey = item.storageKey || extractStoragePath(item.url);
 
-      // Skip if already preloaded
       if (preloadedUrls.has(storageKey)) {
         continue;
       }
 
-      logger.info('[PRELOAD] Queuing with DownloadManager', {
-        url: item.url.slice(-50),
-        storageKey: storageKey.slice(-50),
-        assetType: item.assetType,
-        priority: item.priority,
-      });
-
-      // Use DownloadManager for unified download and blob URL creation
-      // DownloadManager automatically handles presigned URL → proxy fallback
       downloadManager
         .addJob({
           assetId: item.id,
-          projectId: '', // Not needed for online preload
+          projectId: '',
           url: item.url,
           filename: item.url.split('/').pop() || 'asset',
           variantType: 'original',
           assetType: mapAssetType(item.assetType),
           priority: item.priority,
           storageKey,
-          persist: false, // Don't persist for online preload (in-memory only)
+          persist: false,
         })
         .then(() => {
           if (isPresignedUrl(item.url)) {
@@ -259,12 +172,10 @@ export function usePreloadOrchestrator(
     isProcessingRef.current = false;
   }, [networkInfo.isOnline, preloadedUrls]);
 
-  // Add item to queue with priority sorting
   const addToQueue = useCallback(
     (item: PreloadQueueItem) => {
       const storageKey = item.storageKey || extractStoragePath(item.url);
 
-      // Skip if already in queue or preloaded
       if (
         preloadedUrls.has(storageKey) ||
         queueRef.current.some(
@@ -274,15 +185,6 @@ export function usePreloadOrchestrator(
         return;
       }
 
-      logger.info('[PRELOAD] Adding to queue', {
-        url: item.url.slice(-60),
-        storageKey: storageKey.slice(-50),
-        assetType: item.assetType,
-        priority: item.priority,
-        queueLength: queueRef.current.length + 1,
-      });
-
-      // Insert in priority order (higher priority first)
       const insertIndex = queueRef.current.findIndex(
         (q) => q.priority < item.priority,
       );
@@ -299,7 +201,6 @@ export function usePreloadOrchestrator(
     [preloadedUrls, processQueue],
   );
 
-  // Manual preload function
   const preloadAsset = useCallback(
     (url: string, priority = 100) => {
       addToQueue({
@@ -313,14 +214,11 @@ export function usePreloadOrchestrator(
     [addToQueue, currentPageId],
   );
 
-  // Clear queue
   const clearQueue = useCallback(() => {
     queueRef.current = [];
     setQueueLength(0);
   }, []);
 
-  // Get a cached asset as a blob URL (for video playback)
-  // StorageManager.getAsset checks both IndexedDB (large files ≥ 5MB) and Cache API (small files)
   const getCachedBlobUrl = useCallback(
     async (url: string): Promise<string | null> => {
       try {
@@ -336,33 +234,24 @@ export function usePreloadOrchestrator(
     [],
   );
 
-  // Check if URL is preloaded (in cache)
   const isUrlPreloaded = useCallback(
     async (url: string): Promise<boolean> => {
       const storageKey = extractStoragePath(url);
-      // First check in-memory set
       if (preloadedUrls.has(storageKey)) return true;
-
-      // Then check via StorageManager
       return StorageManager.hasAsset(storageKey);
     },
     [preloadedUrls],
   );
 
-  // Instant lookup - returns decoded blob URL or null (O(1) Map lookup)
-  // Uses DownloadManager's unified blob URL cache
   const getReadyBlobUrl = useCallback((url: string): string | null => {
     return downloadManager.getReadyBlobUrl(url);
   }, []);
 
-  // Instant lookup - returns raw Blob for creating fresh blob URLs (O(1) Map lookup)
-  // Used by transitions to avoid decoder state issues with pre-created blob URLs
   const getReadyBlob = useCallback((url: string): Blob | null => {
     return downloadManager.getReadyBlob(url);
   }, []);
 
   // Initialize ready blob URLs from cache for current page's assets
-  // This ensures getReadyBlobUrl works on the first render for both backgrounds and element icons
   useEffect(() => {
     if (!currentPageId) return;
 
@@ -370,14 +259,12 @@ export function usePreloadOrchestrator(
     if (!currentPage) return;
 
     const initializeFromCache = async () => {
-      // Collect background URLs
       const bgUrls = [
         currentPage.background_image_url,
         currentPage.background_video_url,
         currentPage.background_audio_url,
       ].filter(Boolean) as string[];
 
-      // Collect element asset URLs (icons, images, etc.) from current page
       const currentPageElements = elements.filter(
         (el) => el.pageId === currentPageId,
       );
@@ -390,7 +277,6 @@ export function usePreloadOrchestrator(
               ? JSON.parse(element.content_json)
               : element.content_json;
 
-          // Extract URLs from known asset fields
           const urlFields = PRELOAD_CONFIG.assetFields.all as readonly string[];
           const checkObject = (obj: Record<string, unknown>) => {
             if (!obj || typeof obj !== 'object') return;
@@ -412,20 +298,16 @@ export function usePreloadOrchestrator(
         }
       });
 
-      // Initialize all URLs from cache via DownloadManager
       const allUrls = [...bgUrls, ...elementAssetUrls];
 
       for (const storagePath of allUrls) {
         const storageKey = extractStoragePath(storagePath);
 
-        // Skip if already ready
         if (downloadManager.getReadyBlobUrl(storageKey)) continue;
 
-        // Check if cached and create blob URL if so
         const fullUrl = resolveAssetPlaybackUrl(storagePath);
         const hasAsset = await StorageManager.hasAsset(storageKey);
         if (hasAsset) {
-          // DownloadManager will create blob URL from cached asset
           await downloadManager.addJob({
             assetId: `init-${storageKey}`,
             projectId: '',
@@ -443,14 +325,12 @@ export function usePreloadOrchestrator(
     initializeFromCache();
   }, [currentPageId, pages, elements]);
 
-  // React to page changes - preload neighbors
+  // React to page changes - preload current page assets and transitions
   useEffect(() => {
     if (!enabled || !currentPageId || !networkInfo.isOnline) {
       return;
     }
 
-    // Skip if we already preloaded for this page with the same data
-    // Re-preload if pageLinks count changed (data just loaded)
     const currentLinksCount = pageLinks.length;
     const samePageAndData =
       lastPreloadedPageRef.current === currentPageId &&
@@ -462,26 +342,17 @@ export function usePreloadOrchestrator(
     lastPreloadedPageRef.current = currentPageId;
     lastPreloadedLinksCountRef.current = currentLinksCount;
 
-    logger.info('[PRELOAD] Starting preload for page', {
-      currentPageId,
-      maxNeighborDepth,
-    });
-
-    // Get prioritized assets based on current page
-    const assets = neighborGraph.getPrioritizedAssets(
-      currentPageId,
-      maxNeighborDepth,
-    );
-
-    logger.info('[PRELOAD] Found assets from neighbor graph', {
-      assetCount: assets.length,
-      assets: assets.map((a) => ({ type: a.assetType, url: a.url.slice(-50) })),
-    });
-
-    // Collect all raw storage paths that need presigning
-    const storagePaths: string[] = [];
     const currentPage = pages.find((p) => p.id === currentPageId);
 
+    // Extract current page element assets directly
+    const currentPageElements = elements.filter(
+      (el) => el.pageId === currentPageId,
+    );
+    const elementAssets = extractElementAssets(currentPageElements, currentPageId);
+
+    // Collect storage paths for presigned URL batch request
+    const storagePaths: string[] = [];
+
     if (
       currentPage?.background_image_url &&
       isRelativeStoragePath(currentPage.background_image_url)
@@ -501,60 +372,44 @@ export function usePreloadOrchestrator(
       storagePaths.push(currentPage.background_audio_url);
     }
 
-    assets.forEach((asset) => {
-      if (isRelativeStoragePath(asset.url)) {
-        storagePaths.push(asset.url);
+    elementAssets.forEach((asset) => {
+      if (isRelativeStoragePath(asset.storageKey)) {
+        storagePaths.push(asset.storageKey);
       }
     });
 
-    // Always collect neighbor background URLs for presigning
-    // This ensures instant navigation to neighbor pages
-    const neighbors = neighborGraph.getNeighbors(currentPageId, 1);
-    neighbors.forEach(({ pageId }) => {
-      const page = pages.find((p) => p.id === pageId);
-      if (
-        page?.background_image_url &&
-        isRelativeStoragePath(page.background_image_url)
-      ) {
-        storagePaths.push(page.background_image_url);
+    // Add outgoing transition video URLs (forward and reverse)
+    // Reverse videos are preloaded here so they're cached when user navigates and clicks back
+    const outgoingTransitions = pageLinks.filter(
+      (link) =>
+        link.from_pageId === currentPageId &&
+        (link.transition?.video_url || link.transition?.reverse_video_url),
+    );
+
+    outgoingTransitions.forEach((link) => {
+      const forwardVideoUrl = link.transition?.video_url;
+      const reverseVideoUrl = link.transition?.reverse_video_url;
+      if (forwardVideoUrl && isRelativeStoragePath(forwardVideoUrl)) {
+        storagePaths.push(forwardVideoUrl);
       }
-      // Always collect neighbor video URLs for smooth transitions
-      if (
-        page?.background_video_url &&
-        isRelativeStoragePath(page.background_video_url)
-      ) {
-        storagePaths.push(page.background_video_url);
-      }
-      // Also collect neighbor audio URLs
-      if (
-        page?.background_audio_url &&
-        isRelativeStoragePath(page.background_audio_url)
-      ) {
-        storagePaths.push(page.background_audio_url);
+      if (reverseVideoUrl && isRelativeStoragePath(reverseVideoUrl)) {
+        storagePaths.push(reverseVideoUrl);
       }
     });
 
-    // Batch fetch presigned URLs, then add to queue
-    // Helper to resolve URL - prefer presigned if available, else fallback to proxy
     const resolveUrl = (
       storageKey: string,
       presignedUrls: Record<string, string>,
     ): string => {
-      // Use presigned URL if available (will be tested on actual download)
       if (presignedUrls[storageKey]) {
         return presignedUrls[storageKey];
       }
-      // Fallback to resolveAssetPlaybackUrl (will use proxy)
       return resolveAssetPlaybackUrl(storageKey);
     };
 
-    // Two-phase preloading: current page first, then neighbors
-    // All assets use full download with blob URLs for reliable playback
-    // (presigned URL streaming fails on mobile Safari/Chrome)
     const addAssetsToQueue = async (
       presignedUrls: Record<string, string> = {},
     ) => {
-      // Helper to create download job
       const createDownloadJob = (
         id: string,
         storageKey: string,
@@ -568,21 +423,26 @@ export function usePreloadOrchestrator(
           ? storageKey
           : extractStoragePath(resolvedUrl);
 
-        // Skip if already preloaded
-        if (preloadedUrls.has(normalizedKey)) return null;
+        // Check if already downloaded (blob exists) or download in progress
+        if (preloadedUrls.has(normalizedKey)) {
+          // Verify the blob actually exists - if not, allow re-download
+          const existingBlob = downloadManager.getReadyBlob(normalizedKey);
+          if (existingBlob) {
+            return null; // Already cached, skip
+          }
+          // Key was in Set but blob doesn't exist - remove and re-download
+          preloadedUrls.delete(normalizedKey);
+        }
 
+        // Mark as in-progress to prevent duplicate downloads
         preloadedUrls.add(normalizedKey);
 
-        // Enable streaming for media assets (video, audio, transitions)
-        // This allows playback to start immediately using presigned URL
-        // while full download continues in background for caching
         const enableStreaming =
           PRELOAD_CONFIG.streaming.enabled &&
           (assetType === 'video' ||
             assetType === 'audio' ||
             assetType === 'transition');
 
-        // DownloadManager always creates blob URLs for reliable playback
         return downloadManager
           .addJob({
             assetId: id,
@@ -607,6 +467,8 @@ export function usePreloadOrchestrator(
             }
           })
           .catch((err) => {
+            // Download failed - remove from Set so it can be retried
+            preloadedUrls.delete(normalizedKey);
             logger.error('[PRELOAD] Download failed', {
               url: resolvedUrl.slice(-50),
               error: err?.message,
@@ -614,19 +476,14 @@ export function usePreloadOrchestrator(
           });
       };
 
-      // ═══════════════════════════════════════════════════════════════════
-      // PHASE 1: Current Page Assets (BLOCKING)
-      // Priority: Images first (small, essential), then videos (can stream)
-      // ═══════════════════════════════════════════════════════════════════
+      // Phase 1: Current Page Assets (blocking for images only)
       setCurrentPhase('phase1_current_page');
       setPhaseProgress(0);
-      logger.info('[PRELOAD] Phase 1: Loading current page backgrounds');
 
-      const phase1Jobs: Promise<void>[] = [];
+      const phase1BlockingJobs: Promise<void>[] = [];
       let phase1Total = 0;
       let phase1Completed = 0;
 
-      // Current page IMAGE background - CRITICAL (wait for this)
       if (currentPage?.background_image_url) {
         phase1Total++;
         const job = createDownloadJob(
@@ -636,7 +493,7 @@ export function usePreloadOrchestrator(
           'image',
         );
         if (job) {
-          phase1Jobs.push(
+          phase1BlockingJobs.push(
             job.then(() => {
               phase1Completed++;
               setPhaseProgress(
@@ -647,231 +504,136 @@ export function usePreloadOrchestrator(
         }
       }
 
-      // Current page VIDEO background - start download (can stream)
-      if (currentPage?.background_video_url) {
+      // Current page element images (blocking)
+      const currentPageImageAssets = elementAssets.filter(
+        (asset) => asset.assetType === 'image',
+      );
+      currentPageImageAssets.forEach((asset) => {
         phase1Total++;
         const job = createDownloadJob(
+          `elem-img-${asset.storageKey}`,
+          asset.storageKey,
+          PRELOAD_CONFIG.priority.currentPage + PRELOAD_CONFIG.priority.assetType.image,
+          'image',
+        );
+        if (job) {
+          phase1BlockingJobs.push(
+            job.then(() => {
+              phase1Completed++;
+              setPhaseProgress(
+                phase1Total > 0 ? (phase1Completed / phase1Total) * 100 : 100,
+              );
+            }),
+          );
+        }
+      });
+
+      // Non-blocking: videos and audio start downloading but don't wait
+      if (currentPage?.background_video_url) {
+        createDownloadJob(
           `bg-vid-${currentPageId}`,
           currentPage.background_video_url,
           PRELOAD_CONFIG.priority.currentPage + 150,
           'video',
         );
-        if (job) {
-          phase1Jobs.push(
-            job.then(() => {
-              phase1Completed++;
-              setPhaseProgress(
-                phase1Total > 0 ? (phase1Completed / phase1Total) * 100 : 100,
-              );
-            }),
-          );
-        }
       }
 
-      // Current page AUDIO background - start download
       if (currentPage?.background_audio_url) {
-        phase1Total++;
-        const job = createDownloadJob(
+        createDownloadJob(
           `bg-aud-${currentPageId}`,
           currentPage.background_audio_url,
           PRELOAD_CONFIG.priority.currentPage + 100,
           'audio',
         );
-        if (job) {
-          phase1Jobs.push(
-            job.then(() => {
-              phase1Completed++;
-              setPhaseProgress(
-                phase1Total > 0 ? (phase1Completed / phase1Total) * 100 : 100,
-              );
-            }),
-          );
-        }
       }
 
-      // Wait for Phase 1 to complete
-      const phase1Start = Date.now();
-      if (phase1Jobs.length > 0) {
-        logger.info('[PRELOAD] Waiting for current page assets', {
-          count: phase1Jobs.length,
-        });
-        await Promise.all(phase1Jobs);
-        logger.info('[PRELOAD] Phase 1 complete', {
-          elapsed: `${Date.now() - phase1Start}ms`,
-        });
-      } else {
-        logger.info('[PRELOAD] Phase 1 complete (no backgrounds)');
+      if (phase1BlockingJobs.length > 0) {
+        await Promise.all(phase1BlockingJobs);
       }
 
-      // ═══════════════════════════════════════════════════════════════════
-      // PHASE 2: Outgoing Transition Videos (BLOCKING)
-      // Load transitions FROM current page BEFORE neighbors
-      // ═══════════════════════════════════════════════════════════════════
+      // Phase 2: Outgoing Transition Videos (preload for instant playback)
       setCurrentPhase('phase2_transitions');
       setPhaseProgress(0);
-      logger.info('[PRELOAD] Phase 2: Loading outgoing transitions');
 
       const phase2Jobs: Promise<void>[] = [];
       let phase2Total = 0;
       let phase2Completed = 0;
 
-      // Find all transition videos from current page
-      const outgoingTransitions = pageLinks.filter(
-        (link) =>
-          link.from_pageId === currentPageId && link.transition?.video_url,
-      );
-
+      // Preload outgoing transition videos (forward + reverse)
       outgoingTransitions.forEach((link) => {
-        const transitionVideoUrl = link.transition?.video_url;
-        if (!transitionVideoUrl) return;
-        phase2Total++;
-        const job = createDownloadJob(
-          `trans-${link.from_pageId}-${link.to_pageId}`,
-          transitionVideoUrl,
-          PRELOAD_CONFIG.priority.currentPage +
-            PRELOAD_CONFIG.priority.assetType.transition,
-          'transition',
-        );
-        if (job) {
-          phase2Jobs.push(
-            job.then(() => {
-              phase2Completed++;
-              setPhaseProgress(
-                phase2Total > 0 ? (phase2Completed / phase2Total) * 100 : 100,
-              );
-            }),
+        const forwardVideoUrl = link.transition?.video_url;
+        const reverseVideoUrl = link.transition?.reverse_video_url;
+
+        // Preload forward transition video
+        if (forwardVideoUrl) {
+          phase2Total++;
+          const job = createDownloadJob(
+            `trans-fwd-${link.from_pageId}-${link.to_pageId}`,
+            forwardVideoUrl,
+            PRELOAD_CONFIG.priority.currentPage +
+              PRELOAD_CONFIG.priority.assetType.transition,
+            'transition',
           );
+          if (job) {
+            phase2Jobs.push(
+              job.then(() => {
+                phase2Completed++;
+                setPhaseProgress(
+                  phase2Total > 0 ? (phase2Completed / phase2Total) * 100 : 100,
+                );
+              }),
+            );
+          }
+        }
+
+        // Preload reverse transition video (for potential back navigation from target)
+        if (reverseVideoUrl) {
+          phase2Total++;
+          const job = createDownloadJob(
+            `trans-rev-${link.from_pageId}-${link.to_pageId}`,
+            reverseVideoUrl,
+            PRELOAD_CONFIG.priority.currentPage +
+              PRELOAD_CONFIG.priority.assetType.transition - 10,
+            'transition',
+          );
+          if (job) {
+            phase2Jobs.push(
+              job.then(() => {
+                phase2Completed++;
+                setPhaseProgress(
+                  phase2Total > 0 ? (phase2Completed / phase2Total) * 100 : 100,
+                );
+              }),
+            );
+          }
         }
       });
 
-      // Wait for Phase 2 to complete
-      const phase2Start = Date.now();
       if (phase2Jobs.length > 0) {
-        logger.info('[PRELOAD] Waiting for transition videos', {
-          count: phase2Jobs.length,
-        });
         await Promise.all(phase2Jobs);
-        logger.info('[PRELOAD] Phase 2 complete', {
-          elapsed: `${Date.now() - phase2Start}ms`,
-        });
-      } else {
-        logger.info('[PRELOAD] Phase 2 complete (no transitions)');
       }
 
-      // ═══════════════════════════════════════════════════════════════════
-      // PHASE 3: Neighbor Pages (NON-BLOCKING)
-      // Background download for smooth subsequent navigation
-      // ═══════════════════════════════════════════════════════════════════
-      setCurrentPhase('phase3_neighbors');
-      setPhaseProgress(0);
-      logger.info('[PRELOAD] Phase 3: Preloading neighbors');
-
-      // Current page element assets (non-blocking)
-      const currentPageAssets = assets.filter(
-        (asset) => asset.pageId === currentPageId,
-      );
-      currentPageAssets.forEach((asset) => {
-        createDownloadJob(
-          generateJobId(),
-          asset.url,
-          asset.priority,
-          asset.assetType,
-        );
-      });
-
-      // Neighbor page element assets
-      const neighborAssets = assets.filter(
-        (asset) => asset.pageId !== currentPageId,
-      );
-      neighborAssets.forEach((asset) => {
-        createDownloadJob(
-          generateJobId(),
-          asset.url,
-          asset.priority,
-          asset.assetType,
-        );
-      });
-
-      // Neighbor background assets
-      const neighbors = neighborGraph.getNeighbors(currentPageId, 1);
-      neighbors.forEach(({ pageId }) => {
-        const page = pages.find((p) => p.id === pageId);
-        if (page?.background_image_url) {
-          createDownloadJob(
-            `bg-img-${pageId}`,
-            page.background_image_url,
-            PRELOAD_CONFIG.priority.neighborBase + 100,
-            'image',
-          );
-        }
-        if (page?.background_video_url) {
-          createDownloadJob(
-            `bg-vid-${pageId}`,
-            page.background_video_url,
-            PRELOAD_CONFIG.priority.neighborBase + 50,
-            'video',
-          );
-        }
-        if (page?.background_audio_url) {
-          createDownloadJob(
-            `bg-aud-${pageId}`,
-            page.background_audio_url,
-            PRELOAD_CONFIG.priority.neighborBase + 30,
-            'audio',
-          );
-        }
-      });
-
-      logger.info('[PRELOAD] Phase 3: Neighbor assets queued');
       setCurrentPhase('complete');
       setPhaseProgress(100);
     };
 
-    // If there are storage paths to presign, fetch them first
     if (storagePaths.length > 0) {
-      logger.info('[PRELOAD] Fetching presigned URLs', {
-        count: storagePaths.length,
-      });
       queuePresignedUrls(storagePaths)
         .then(async () => {
-          logger.info('[PRELOAD] Presigned URLs fetched, adding to queue');
-          // Note: Don't call markPresignedUrlsVerified() here - it's called after
-          // first successful download to verify CORS is configured properly
           await addAssetsToQueue();
         })
-        .catch(async (error) => {
-          logger.error(
-            '[PRELOAD] Failed to fetch presigned URLs, falling back to proxy',
-            {
-              error: error?.message,
-            },
-          );
-          // Fallback: add to queue without presigned URLs (will use backend proxy)
+        .catch(async () => {
           await addAssetsToQueue();
         });
     } else {
-      // No storage paths to presign, add directly to queue
       addAssetsToQueue();
     }
-  }, [
-    enabled,
-    currentPageId,
-    networkInfo.isOnline,
-    neighborGraph,
-    pages,
-    pageLinks,
-    addToQueue,
-    maxNeighborDepth,
-  ]);
+  }, [enabled, currentPageId, networkInfo.isOnline, elements, pages, pageLinks]);
 
-  // Compute derived state values for UI feedback
   const isCurrentPageReady =
-    currentPhase === 'phase2_transitions' ||
-    currentPhase === 'phase3_neighbors' ||
-    currentPhase === 'complete';
+    currentPhase === 'phase2_transitions' || currentPhase === 'complete';
 
-  const areTransitionsReady =
-    currentPhase === 'phase3_neighbors' || currentPhase === 'complete';
+  const areTransitionsReady = currentPhase === 'complete';
 
   return {
     isPreloading,
@@ -884,7 +646,6 @@ export function usePreloadOrchestrator(
     isUrlPreloaded,
     getReadyBlobUrl,
     getReadyBlob,
-    areNeighborBackgroundsReady,
     currentPhase,
     phaseProgress,
     isCurrentPageReady,
diff --git a/frontend/src/hooks/useTransitionPlayback.ts b/frontend/src/hooks/useTransitionPlayback.ts
index 3ffddc6..24422a6 100644
--- a/frontend/src/hooks/useTransitionPlayback.ts
+++ b/frontend/src/hooks/useTransitionPlayback.ts
@@ -2,53 +2,45 @@
  * useTransitionPlayback Hook
  *
  * Handles video transition playback between pages.
- * For back navigation, uses pre-reversed video generated by the backend.
- * No frame-stepping - all transitions play forward.
  */
 
 import {
   useCallback,
   useEffect,
   useMemo,
+  useReducer,
   useRef,
-  useState,
   type RefObject,
 } from 'react';
-import axios from 'axios';
 import { logger } from '../lib/logger';
-import {
-  markPresignedUrlFailed,
-  resolveAssetPlaybackUrl,
-  isPresignedUrl,
-  buildProxyUrl,
-  extractStoragePath,
-} from '../lib/assetUrl';
-import { downloadManager } from '../lib/offline/DownloadManager';
 import { isSafari, isFirefox, scheduleAfterPaint } from '../lib/browserUtils';
 import { TRANSITION_CONFIG } from '../config/transition.config';
-import { PRELOAD_CONFIG } from '../config/preload.config';
+import {
+  useVideoBlobUrl,
+  useVideoTimeouts,
+  type PreloadCacheProvider,
+} from './video';
 
 export type ReverseMode = 'none' | 'separate';
 
 export interface TransitionConfig {
   videoUrl: string;
-  storageKey?: string; // Raw storage path for cache lookup
+  storageKey?: string;
   reverseMode: ReverseMode;
   reverseVideoUrl?: string;
+  /** Raw storage path for reverse video cache lookup */
+  reverseStorageKey?: string;
   durationSec?: number;
   targetPageId?: string;
   displayName?: string;
-  /** Whether this is a back navigation (for history management) */
   isBack?: boolean;
 }
 
 export interface UseTransitionPlaybackOptions {
   videoRef: RefObject<HTMLVideoElement | null>;
   transition: TransitionConfig | null;
-  /** Called when playback completes. isBack indicates if this was a back navigation. */
   onComplete: (targetPageId?: string, isBack?: boolean) => void;
   onError?: (reason: string) => void;
-
   timeouts?: {
     playbackStartMs?: number;
     durationBufferMs?: number;
@@ -63,7 +55,6 @@ export interface UseTransitionPlaybackOptions {
     preloadedUrls?: Set<string>;
     getCachedBlobUrl?: (url: string) => Promise<string | null>;
     getReadyBlobUrl?: (url: string) => string | null;
-    /** Get raw Blob for creating fresh blob URLs (avoids decoder state issues) */
     getReadyBlob?: (url: string) => Blob | null;
   };
 }
@@ -78,51 +69,83 @@ export type PlaybackPhase =
 export interface UseTransitionPlaybackResult {
   phase: PlaybackPhase;
   isBuffering: boolean;
+  /** True once first video frame has been displayed */
+  isVideoReady: boolean;
   isReversing: boolean;
   cancel: () => void;
   forceComplete: () => void;
 }
 
+interface TransitionState {
+  phase: PlaybackPhase;
+  isVideoReady: boolean;
+  isWaitingForData: boolean;
+  activeSourceKey: string | null;
+}
+
+type TransitionAction =
+  | { type: 'START_PREPARING'; sourceKey: string }
+  | { type: 'SET_PLAYING' }
+  | { type: 'SET_VIDEO_READY' }
+  | { type: 'SET_WAITING'; isWaiting: boolean }
+  | { type: 'SET_FINISHING' }
+  | { type: 'SET_COMPLETED' }
+  | { type: 'RESET' };
+
+function transitionReducer(
+  state: TransitionState,
+  action: TransitionAction,
+): TransitionState {
+  switch (action.type) {
+    case 'START_PREPARING':
+      return {
+        ...state,
+        phase: 'preparing',
+        isVideoReady: false,
+        isWaitingForData: false,
+        activeSourceKey: action.sourceKey,
+      };
+    case 'SET_PLAYING':
+      return { ...state, phase: 'playing' };
+    case 'SET_VIDEO_READY':
+      return { ...state, isVideoReady: true };
+    case 'SET_WAITING':
+      return { ...state, isWaitingForData: action.isWaiting };
+    case 'SET_FINISHING':
+      return { ...state, phase: 'finishing' };
+    case 'SET_COMPLETED':
+      return { ...state, phase: 'completed' };
+    case 'RESET':
+      return {
+        phase: 'idle',
+        isVideoReady: false,
+        isWaitingForData: false,
+        activeSourceKey: null,
+      };
+    default:
+      return state;
+  }
+}
+
+const initialState: TransitionState = {
+  phase: 'idle',
+  isVideoReady: false,
+  isWaitingForData: false,
+  activeSourceKey: null,
+};
+
 const DEFAULT_TIMEOUTS = {
   playbackStartMs: 3000,
   durationBufferMs: 200,
-  hardTimeoutMs: 45000,
 };
 
-/**
- * Get browser-specific finish offset for transition videos.
- * This is a backup timer - requestVideoFrameCallback is primary for modern browsers.
- *
- * @returns Finish offset in milliseconds before video end
- */
 const getFinishBeforeEndMs = (): number => {
   const { finishBeforeEndMs } = TRANSITION_CONFIG;
-  if (isSafari()) {
-    return finishBeforeEndMs.safari;
-  }
-  if (isFirefox()) {
-    return finishBeforeEndMs.firefox;
-  }
+  if (isSafari()) return finishBeforeEndMs.safari;
+  if (isFirefox()) return finishBeforeEndMs.firefox;
   return finishBeforeEndMs.default;
 };
 
-function shouldLoadViaBlob(url: string, useBlobUrlOption?: boolean): boolean {
-  if (useBlobUrlOption === false) return false;
-  if (useBlobUrlOption === true) return true;
-
-  try {
-    const parsedUrl = new URL(url, window.location.origin);
-    const isSameOrigin = parsedUrl.origin === window.location.origin;
-    if (!isSameOrigin) return false;
-    return (
-      parsedUrl.pathname === '/api/file/download' ||
-      parsedUrl.pathname === '/file/download'
-    );
-  } catch {
-    return false;
-  }
-}
-
 async function waitForImages(urls: string[], timeoutMs = 2000): Promise<void> {
   if (urls.length === 0) return;
 
@@ -164,99 +187,79 @@ export function useTransitionPlayback(
 
   const playbackStartMs =
     customTimeouts?.playbackStartMs ?? DEFAULT_TIMEOUTS.playbackStartMs;
-  const hardTimeoutMs =
-    customTimeouts?.hardTimeoutMs ?? DEFAULT_TIMEOUTS.hardTimeoutMs;
 
-  const [phase, setPhase] = useState<PlaybackPhase>('idle');
-  const [isVideoReady, setIsVideoReady] = useState(false);
+  const [state, dispatch] = useReducer(transitionReducer, initialState);
 
   const didFinishRef = useRef(false);
   const didStartPlaybackRef = useRef(false);
-  const activeSourceUrlRef = useRef<string | null>(null);
-  const lastLoadedBlobUrlRef = useRef<string | null>(null);
-  const lastLoadedSourceUrlRef = useRef<string | null>(null);
   const didTryDecodeRetryRef = useRef(false);
-  const currentPlayableUrlRef = useRef<string | null>(null);
-  const startWatchdogTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
-    null,
-  );
-  const finishTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const hardTimeoutTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
-    null,
-  );
+  const didSetInitialTimeRef = useRef(false);
+  const isWaitingForDataRef = useRef(false);
+  const lastProgressTimeRef = useRef<number>(0);
+  const activeSourceKeyRef = useRef<string | null>(null);
 
   const onCompleteRef = useRef(onComplete);
   const onErrorRef = useRef(onError);
   const transitionRef = useRef(transition);
   const featuresRef = useRef(features);
-  const preloadRef = useRef(preload);
 
-  // Determine which video URL to use:
-  // For back navigation with a reversed video, use reverseVideoUrl
-  // Otherwise, use the original videoUrl
+  useEffect(() => {
+    onCompleteRef.current = onComplete;
+    onErrorRef.current = onError;
+    transitionRef.current = transition;
+    featuresRef.current = features;
+  });
+
   const sourceUrl = useMemo(() => {
     if (!transition) return '';
-    if (transition.isBack) {
-      return transition.reverseVideoUrl || '';
-    }
+    if (transition.isBack) return transition.reverseVideoUrl || '';
     return transition.videoUrl;
   }, [transition]);
 
-  // Storage key for cache lookup - use reversed video key for back navigation
   const storageKey = useMemo(() => {
     if (!transition) return undefined;
-    if (transition.isBack) {
-      return transition.reverseVideoUrl || undefined;
-    }
+    // For back navigation, use reverseStorageKey (raw path) for cache lookup
+    if (transition.isBack) return transition.reverseStorageKey || undefined;
     return transition.storageKey;
   }, [transition]);
 
-  const clearTimers = useCallback(() => {
-    if (startWatchdogTimerRef.current) {
-      clearTimeout(startWatchdogTimerRef.current);
-      startWatchdogTimerRef.current = null;
-    }
-    if (finishTimerRef.current) {
-      clearTimeout(finishTimerRef.current);
-      finishTimerRef.current = null;
-    }
-    if (hardTimeoutTimerRef.current) {
-      clearTimeout(hardTimeoutTimerRef.current);
-      hardTimeoutTimerRef.current = null;
-    }
-  }, []);
+  const { setTimer, clearTimer, clearAllTimers } = useVideoTimeouts();
 
-  const revokeBlobUrl = useCallback((force = false) => {
-    if (!force || !lastLoadedBlobUrlRef.current) return;
-    URL.revokeObjectURL(lastLoadedBlobUrlRef.current);
-    lastLoadedBlobUrlRef.current = null;
-  }, []);
+  const preloadCache: PreloadCacheProvider = useMemo(
+    () => ({
+      getReadyBlob: preload?.getReadyBlob,
+      getCachedBlobUrl: preload?.getCachedBlobUrl,
+    }),
+    [preload?.getReadyBlob, preload?.getCachedBlobUrl],
+  );
+
+  const {
+    resolvedUrl,
+    isResolving,
+    revoke: revokeBlobUrl,
+  } = useVideoBlobUrl({
+    sourceUrl,
+    storageKey,
+    preloadCache,
+  });
 
   const finishPlayback = useCallback(
     async (reason: string) => {
       if (didFinishRef.current) return;
       didFinishRef.current = true;
-      activeSourceUrlRef.current = null;
-      clearTimers();
+      clearAllTimers();
 
       const video = videoRef.current;
       if (video) {
-        // Just pause - don't seek. We've already stopped at a safe frame
-        // (triggered by rvfc/timeupdate well before any black frames).
-        // Seeking is async and can cause a flash before the seek completes.
         video.pause();
       }
 
       const currentTransition = transitionRef.current;
       const currentFeatures = featuresRef.current;
 
-      logger.info('Transition playback finished', {
-        reason,
-        displayName: currentTransition?.displayName,
-        targetPageId: currentTransition?.targetPageId,
-      });
+      logger.info('[TRANSITION] Finished', { reason });
 
-      setPhase('finishing');
+      dispatch({ type: 'SET_FINISHING' });
 
       if (
         currentFeatures?.preDecodeImages &&
@@ -267,50 +270,42 @@ export function useTransitionPlayback(
           const imageUrls = currentFeatures.getTargetPageImages();
           await waitForImages(imageUrls);
         } catch {
-          // Ignore pre-decode errors
+          // Ignore
         }
       }
 
-      setPhase('completed');
+      dispatch({ type: 'SET_COMPLETED' });
       onCompleteRef.current(
         currentTransition?.targetPageId,
         currentTransition?.isBack,
       );
     },
-    [clearTimers, videoRef],
+    [clearAllTimers, videoRef],
   );
 
   const handleError = useCallback(
     (reason: string) => {
       if (didFinishRef.current) return;
-      logger.error('Transition playback error', { reason });
+      logger.error('[TRANSITION] Error', { reason });
       onErrorRef.current?.(reason);
       finishPlayback(reason);
     },
     [finishPlayback],
   );
 
-  useEffect(() => {
-    onCompleteRef.current = onComplete;
-    onErrorRef.current = onError;
-    transitionRef.current = transition;
-    featuresRef.current = features;
-    preloadRef.current = preload;
-  });
-
   const cancel = useCallback(() => {
-    if (phase === 'idle') return;
-    clearTimers();
+    if (state.phase === 'idle') return;
+    clearAllTimers();
     didFinishRef.current = true;
-    setPhase('idle');
+    dispatch({ type: 'RESET' });
     const video = videoRef.current;
     if (video) {
       video.pause();
       video.removeAttribute('src');
       video.load();
     }
-    revokeBlobUrl(true);
-  }, [phase, clearTimers, videoRef, revokeBlobUrl]);
+    revokeBlobUrl();
+  }, [state.phase, clearAllTimers, videoRef, revokeBlobUrl]);
 
   const forceComplete = useCallback(() => {
     finishPlayback('forced');
@@ -319,339 +314,68 @@ export function useTransitionPlayback(
   useEffect(() => {
     const video = videoRef.current;
     const currentTransition = transitionRef.current;
-    if (!currentTransition || !video) {
+
+    if (!currentTransition || !video || !resolvedUrl || isResolving) {
       return;
     }
 
     if (!sourceUrl) {
-      logger.info('No playable transition source, skipping playback', {
-        isBack: currentTransition.isBack,
-        targetPageId: currentTransition.targetPageId,
-      });
       void finishPlayback('missing-source');
       return;
     }
 
-    // Include isBack in the key so same video can play forward or as reversed
     const sourceKey = `${sourceUrl}|${currentTransition.isBack ? 'back' : 'forward'}`;
-    if (activeSourceUrlRef.current === sourceKey) {
-      logger.info('Skipping duplicate effect for same source', {
-        sourceUrl,
-        isBack: currentTransition.isBack,
-      });
+    if (activeSourceKeyRef.current === sourceKey) {
       return;
     }
 
-    activeSourceUrlRef.current = sourceKey;
+    activeSourceKeyRef.current = sourceKey;
+    dispatch({ type: 'START_PREPARING', sourceKey });
     didFinishRef.current = false;
     didStartPlaybackRef.current = false;
     didTryDecodeRetryRef.current = false;
-    currentPlayableUrlRef.current = null;
-    setPhase('preparing');
+    didSetInitialTimeRef.current = false;
+    isWaitingForDataRef.current = false;
+    lastProgressTimeRef.current = Date.now();
 
     const configuredDurationSec = Number(currentTransition.durationSec);
 
     const getMediaErrorDetails = () => {
       if (!video.error) return null;
       const mediaError = video.error as MediaError & { message?: string };
-      return {
-        code: mediaError.code,
-        message: mediaError.message || '',
-      };
+      return { code: mediaError.code, message: mediaError.message || '' };
     };
 
-    const logIssue = (reason: string, error?: unknown) => {
-      logger.error('Transition playback issue:', {
+    const logIssue = (reason: string) => {
+      logger.error('[TRANSITION] Issue', {
         reason,
-        src: video.currentSrc || sourceUrl,
         readyState: video.readyState,
         networkState: video.networkState,
-        duration: video.duration,
-        configuredDurationSec,
-        isBack: currentTransition.isBack,
         mediaError: getMediaErrorDetails(),
-        error: error instanceof Error ? error : { error },
       });
     };
 
     const scheduleFinishByDuration = (durationSec: number) => {
-      if (
-        !Number.isFinite(durationSec) ||
-        durationSec <= 0 ||
-        finishTimerRef.current
-      ) {
-        return;
-      }
-      // Use browser-specific offset to prevent black flash at video end
+      if (!Number.isFinite(durationSec) || durationSec <= 0) return;
       const finishBeforeEndMs = getFinishBeforeEndMs();
       const finishMs = Math.max(100, durationSec * 1000 - finishBeforeEndMs);
-      finishTimerRef.current = setTimeout(
-        () => finishPlayback('duration-timer'),
-        finishMs,
-      );
+      setTimer('finishByDuration', () => finishPlayback('duration-timer'), finishMs);
     };
 
     const attemptPlay = () => {
       video.play().catch((playError) => {
-        logIssue('play-failed', playError);
+        logIssue('play-failed');
+        logger.error('[TRANSITION] Play failed', { error: playError });
       });
     };
 
-    const resolvePlayableSource = async (): Promise<string> => {
-      const getReadyBlob = preloadRef.current?.getReadyBlob;
-      const currentStorageKey = storageKey;
-
-      // DEBUG: Disabled - network URL test showed issue is not with blob
-      // const USE_NETWORK_URL_DEBUG = true;
-
-      // 1. Try to get raw Blob and create FRESH blob URL (avoids decoder state issues)
-      // Pre-created blob URLs cause video jumping (0.2s → 3.2s) due to browser decoder caching
-      if (getReadyBlob && currentStorageKey) {
-        const blob = getReadyBlob(currentStorageKey);
-        if (blob) {
-          // Revoke previous blob URL if exists
-          if (lastLoadedBlobUrlRef.current) {
-            URL.revokeObjectURL(lastLoadedBlobUrlRef.current);
-          }
-          // Create fresh blob URL - this is synchronous and O(1)
-          const freshBlobUrl = URL.createObjectURL(blob);
-          lastLoadedBlobUrlRef.current = freshBlobUrl;
-          lastLoadedSourceUrlRef.current = sourceUrl;
-          logger.info('Created fresh blob URL from cached blob', {
-            storageKey: currentStorageKey.slice(-50),
-            blobSize: blob.size,
-            blobType: blob.type,
-          });
-          return freshBlobUrl;
-        }
-      }
-
-      // 2. Try cached blob URL by storage key (async fallback)
-      const getCachedBlobUrl = preloadRef.current?.getCachedBlobUrl;
-      if (getCachedBlobUrl && currentStorageKey) {
-        try {
-          const cachedBlobUrl = await getCachedBlobUrl(currentStorageKey);
-          if (cachedBlobUrl) {
-            logger.info('Using cached blob URL from storage key', {
-              storageKey: currentStorageKey.slice(-50),
-            });
-            lastLoadedBlobUrlRef.current = cachedBlobUrl;
-            lastLoadedSourceUrlRef.current = sourceUrl;
-            return cachedBlobUrl;
-          }
-        } catch {
-          // Fall through
-        }
-      }
-
-      // 3. Reuse cached blob URL if same source
-      if (
-        lastLoadedBlobUrlRef.current &&
-        lastLoadedSourceUrlRef.current === sourceUrl
-      ) {
-        logger.info('Reusing cached blob URL');
-        return lastLoadedBlobUrlRef.current;
-      }
-
-      if (
-        lastLoadedBlobUrlRef.current &&
-        lastLoadedSourceUrlRef.current !== sourceUrl
-      ) {
-        revokeBlobUrl(true);
-      }
-
-      const needsBlobUrl = shouldLoadViaBlob(
-        sourceUrl,
-        featuresRef.current?.useBlobUrl,
-      );
-
-      if (!needsBlobUrl) {
-        return sourceUrl;
-      }
-
-      // 4. Try raw Blob by resolved URL and create fresh blob URL
-      if (getReadyBlob) {
-        const blob = getReadyBlob(sourceUrl);
-        if (blob) {
-          if (lastLoadedBlobUrlRef.current) {
-            URL.revokeObjectURL(lastLoadedBlobUrlRef.current);
-          }
-          const freshBlobUrl = URL.createObjectURL(blob);
-          lastLoadedBlobUrlRef.current = freshBlobUrl;
-          lastLoadedSourceUrlRef.current = sourceUrl;
-          logger.info('Created fresh blob URL from resolved URL blob', {
-            url: sourceUrl.slice(-50),
-          });
-          return freshBlobUrl;
-        }
-      }
-
-      // 5. Try cached blob URL by resolved URL
-      if (getCachedBlobUrl) {
-        try {
-          const cachedBlobUrl = await getCachedBlobUrl(sourceUrl);
-          if (cachedBlobUrl) {
-            logger.info('Using preloaded blob URL from cache', {
-              isBack: currentTransition.isBack,
-            });
-            lastLoadedBlobUrlRef.current = cachedBlobUrl;
-            lastLoadedSourceUrlRef.current = sourceUrl;
-            return cachedBlobUrl;
-          }
-        } catch (cacheError) {
-          logger.warn('Cache lookup failed, falling back to streaming', {
-            cacheError,
-          });
-        }
-      }
-
-      // 6. Use presigned URL for streaming (browser handles buffering)
-      //    Start background download for caching
-      const freshUrl = currentStorageKey
-        ? resolveAssetPlaybackUrl(currentStorageKey)
-        : sourceUrl;
-
-      // If streaming is enabled, use presigned URL directly and start background download
-      if (currentStorageKey && PRELOAD_CONFIG.streaming.enabled) {
-        logger.info('Using streaming URL, starting background download', {
-          url: freshUrl.slice(0, 60),
-        });
-
-        // Start background download for caching (non-blocking)
-        downloadManager
-          .addJob({
-            assetId: `stream-${currentStorageKey}`,
-            projectId: '',
-            url: freshUrl,
-            filename: 'video.mp4',
-            variantType: 'original',
-            assetType: 'transition',
-            storageKey: currentStorageKey,
-            persist: false,
-            streamingMode: { enabled: true },
-          })
-          .catch(() => {
-            /* ignore background download errors */
-          });
-
-        // Return presigned URL for immediate playback
-        return freshUrl;
-      }
-
-      // Legacy: Fetch video as blob (when streaming disabled)
-      logger.info('Fetching video as blob', {
-        isBack: currentTransition.isBack,
-      });
-
-      const token =
-        typeof window !== 'undefined'
-          ? localStorage.getItem('token') || ''
-          : '';
-
-      const fetchVideoAsBlob = async (url: string): Promise<string> => {
-        logger.info('Fetching video from URL', {
-          url: url.slice(0, 80),
-          isPresigned: isPresignedUrl(url),
-        });
-
-        const response = await axios.get(url, {
-          responseType: 'blob',
-          headers: token ? { Authorization: `Bearer ${token}` } : undefined,
-          baseURL: '',
-        });
-
-        const blob = response.data as Blob;
-
-        if (currentStorageKey) {
-          const normalizedKey = extractStoragePath(currentStorageKey);
-          const blobUrl = await downloadManager.cacheBlob(normalizedKey, blob, {
-            assetType: 'transition',
-          });
-          lastLoadedBlobUrlRef.current = blobUrl;
-          lastLoadedSourceUrlRef.current = sourceUrl;
-          return blobUrl;
-        }
-
-        const blobUrl = URL.createObjectURL(blob);
-        lastLoadedBlobUrlRef.current = blobUrl;
-        lastLoadedSourceUrlRef.current = sourceUrl;
-        logger.info('Created blob URL for video (no caching)', {
-          blobUrl: blobUrl.substring(0, 50),
-        });
-        return blobUrl;
-      };
-
-      try {
-        return await fetchVideoAsBlob(freshUrl);
-      } catch (error) {
-        if (currentStorageKey && isPresignedUrl(freshUrl)) {
-          logger.info('Presigned URL failed, retrying with proxy', {
-            storageKey: currentStorageKey.slice(-40),
-          });
-          markPresignedUrlFailed(currentStorageKey);
-          const proxyUrl = buildProxyUrl(currentStorageKey);
-          return await fetchVideoAsBlob(proxyUrl);
-        }
-        throw error;
-      }
-    };
-
-    const loadAndPlay = async () => {
-      logger.info('loadAndPlay called', {
-        isBack: currentTransition.isBack,
-        sourceUrl,
-      });
-
-      setIsVideoReady(false); // Reset for new playback
-      didStartPlaybackRef.current = false;
-
-      if (startWatchdogTimerRef.current) {
-        clearTimeout(startWatchdogTimerRef.current);
-      }
-
-      try {
-        const playableSourceUrl = await resolvePlayableSource();
-        if (didFinishRef.current) return;
-
-        video.pause();
-        video.src = playableSourceUrl;
-        video.currentTime = 0;
-        video.load();
-        lastLoadedSourceUrlRef.current = playableSourceUrl;
-        currentPlayableUrlRef.current = playableSourceUrl;
-
-        // Debug: log video state
-        logger.info('Video state after load', {
-          src: playableSourceUrl.slice(-50),
-          currentTime: video.currentTime,
-          duration: video.duration,
-          playbackRate: video.playbackRate,
-          readyState: video.readyState,
-          paused: video.paused,
-        });
-
-        attemptPlay();
-
-        startWatchdogTimerRef.current = setTimeout(() => {
-          if (didStartPlaybackRef.current || didFinishRef.current) return;
-          logIssue('playback-start-slow');
-          attemptPlay();
-        }, playbackStartMs);
-      } catch (error) {
-        logIssue('source-prepare-failed', error);
-        handleError('source-prepare-failed');
-      }
-    };
-
     const onLoadedMetadata = () => {
       if (didFinishRef.current) return;
-      logger.info('onLoadedMetadata', {
-        duration: video.duration.toFixed(2),
-        currentTime: video.currentTime.toFixed(2),
-        videoWidth: video.videoWidth,
-        videoHeight: video.videoHeight,
-      });
-      video.currentTime = 0;
+      // Only reset to start once - prevents streaming chunks from resetting position
+      if (!didSetInitialTimeRef.current) {
+        didSetInitialTimeRef.current = true;
+        video.currentTime = 0;
+      }
       attemptPlay();
     };
 
@@ -661,69 +385,51 @@ export function useTransitionPlayback(
     };
 
     const onPlaying = () => {
-      logger.info('onPlaying fired', {
-        isBack: currentTransition.isBack,
-        didStartPlayback: didStartPlaybackRef.current,
-        didFinish: didFinishRef.current,
-      });
-
       if (didFinishRef.current) return;
 
-      didStartPlaybackRef.current = true;
-      setPhase('playing');
-
-      if (startWatchdogTimerRef.current) {
-        clearTimeout(startWatchdogTimerRef.current);
-        startWatchdogTimerRef.current = null;
+      if (isWaitingForDataRef.current) {
+        dispatch({ type: 'SET_WAITING', isWaiting: false });
+        isWaitingForDataRef.current = false;
       }
 
-      // Use requestVideoFrameCallback for precise frame-level timing (Safari 15.4+)
-      // This fires when a frame is actually sent to the compositor - no guesswork
+      didStartPlaybackRef.current = true;
+      dispatch({ type: 'SET_PLAYING' });
+      clearTimer('playbackWatchdog');
+
       if ('requestVideoFrameCallback' in video) {
         const rvfc = video.requestVideoFrameCallback.bind(video);
 
-        // First callback: frame is composited, safe to show overlay
-        rvfc((_now, _metadata) => {
+        rvfc(() => {
           if (!didFinishRef.current) {
-            setIsVideoReady(true);
+            dispatch({ type: 'SET_VIDEO_READY' });
           }
 
-          // Monitor video position to finish before end (prevents END flash)
-          // Note: rvfc fires AFTER frame is composited, so we need extra buffer
           const monitorEnd = (
-            _now2: number,
+            _now: number,
             metadata: VideoFrameCallbackMetadata,
           ) => {
             if (didFinishRef.current) return;
 
             const duration = video.duration;
             const { rvfcThreshold } = TRANSITION_CONFIG;
-            // Finish shortly before end - minimal margin for black frames
+
             if (
               Number.isFinite(duration) &&
               metadata.mediaTime >= duration - rvfcThreshold
             ) {
-              // Debug: log before finishing
-              logger.info('rvfc-end triggered', {
-                mediaTime: metadata.mediaTime.toFixed(2),
-                duration: duration.toFixed(2),
-                threshold: (duration - rvfcThreshold).toFixed(2),
-              });
               finishPlayback('rvfc-end');
               return;
             }
 
-            // Continue monitoring each frame
             rvfc(monitorEnd);
           };
 
           rvfc(monitorEnd);
         });
       } else {
-        // Fallback for older browsers without requestVideoFrameCallback
         scheduleAfterPaint(() => {
           if (!didFinishRef.current) {
-            setIsVideoReady(true);
+            dispatch({ type: 'SET_VIDEO_READY' });
           }
         });
       }
@@ -735,6 +441,7 @@ export function useTransitionPlayback(
           : Number.isFinite(mediaDurationSec) && mediaDurationSec > 0
             ? mediaDurationSec
             : NaN;
+
       if (Number.isFinite(durationSec) && durationSec > 0) {
         scheduleFinishByDuration(durationSec);
       }
@@ -744,45 +451,28 @@ export function useTransitionPlayback(
       finishPlayback('ended');
     };
 
-    // Backup handler for browsers without requestVideoFrameCallback
-    // Note: timeupdate fires infrequently (~250ms in Safari), so this is just a fallback
     const onTimeUpdate = () => {
       if (didFinishRef.current) return;
 
       const duration = video.duration;
       if (!Number.isFinite(duration)) return;
 
-      // Small buffer to let video play closer to the end
       const { timeUpdateSafetyBuffer } = TRANSITION_CONFIG;
       const safetyBuffer = isSafari()
         ? timeUpdateSafetyBuffer.safari
         : timeUpdateSafetyBuffer.default;
 
-      // Debug: log full video state to diagnose jumping
-      logger.info('onTimeUpdate', {
-        currentTime: video.currentTime.toFixed(2),
-        duration: duration.toFixed(2),
-        threshold: (duration - safetyBuffer).toFixed(2),
-        willFinish: video.currentTime >= duration - safetyBuffer,
-        readyState: video.readyState,
-        paused: video.paused,
-        ended: video.ended,
-        seeking: video.seeking,
-        playbackRate: video.playbackRate,
-      });
-
       if (video.currentTime >= duration - safetyBuffer) {
         finishPlayback('timeupdate-end');
       }
     };
 
-    const onVideoError = async () => {
+    const onVideoError = () => {
       if (didFinishRef.current) return;
       logIssue('video-error');
 
       const errorCode = video.error?.code;
       if (errorCode === 3 && !didTryDecodeRetryRef.current) {
-        logger.info('Safari video decode error, attempting reload');
         didTryDecodeRetryRef.current = true;
         video.load();
         attemptPlay();
@@ -803,23 +493,43 @@ export function useTransitionPlayback(
       logIssue('video-stalled');
     };
 
-    // Debug: track seeking
-    const onSeeking = () => {
-      logger.info('Video seeking', {
-        currentTime: video.currentTime.toFixed(2),
-        duration: video.duration.toFixed(2),
-      });
+    const onWaiting = () => {
+      if (didFinishRef.current) return;
+      dispatch({ type: 'SET_WAITING', isWaiting: true });
+      isWaitingForDataRef.current = true;
     };
 
-    const onSeeked = () => {
-      logger.info('Video seeked', {
-        currentTime: video.currentTime.toFixed(2),
-      });
+    const onProgress = () => {
+      if (didFinishRef.current) return;
+      lastProgressTimeRef.current = Date.now();
+    };
+
+    const { progressTimeout } = TRANSITION_CONFIG;
+    const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+    const actualNoProgressMs = isMobile
+      ? progressTimeout.noProgressMs * progressTimeout.mobileMultiplier
+      : progressTimeout.noProgressMs;
+
+    const checkProgress = () => {
+      if (didFinishRef.current) return;
+
+      const timeSinceProgress = Date.now() - lastProgressTimeRef.current;
+
+      if (!video.paused && !isWaitingForDataRef.current) {
+        setTimer('progressCheck', checkProgress, progressTimeout.checkIntervalMs);
+        return;
+      }
+
+      if (timeSinceProgress < actualNoProgressMs) {
+        setTimer('progressCheck', checkProgress, progressTimeout.checkIntervalMs);
+        return;
+      }
+
+      logger.error('[TRANSITION] No progress timeout');
+      handleError('no-progress-timeout');
     };
 
     video.addEventListener('loadedmetadata', onLoadedMetadata);
-    video.addEventListener('seeking', onSeeking);
-    video.addEventListener('seeked', onSeeked);
     video.addEventListener('canplay', onCanPlay);
     video.addEventListener('playing', onPlaying);
     video.addEventListener('ended', onEnded);
@@ -827,14 +537,33 @@ export function useTransitionPlayback(
     video.addEventListener('error', onVideoError);
     video.addEventListener('abort', onAbort);
     video.addEventListener('stalled', onStalled);
+    video.addEventListener('waiting', onWaiting);
+    video.addEventListener('progress', onProgress);
 
-    hardTimeoutTimerRef.current = setTimeout(() => {
-      if (didFinishRef.current) return;
-      logIssue('hard-timeout');
-      handleError('hard-timeout');
-    }, hardTimeoutMs);
+    logger.info('[TRANSITION] Starting', {
+      url: resolvedUrl.slice(-60),
+      isBack: currentTransition.isBack,
+    });
 
-    void loadAndPlay();
+    video.pause();
+    video.src = resolvedUrl;
+    video.currentTime = 0;
+    didSetInitialTimeRef.current = true; // Prevent loadedmetadata from resetting during streaming
+    video.load();
+    attemptPlay();
+
+    setTimer(
+      'playbackWatchdog',
+      () => {
+        if (!didStartPlaybackRef.current && !didFinishRef.current) {
+          logIssue('playback-start-slow');
+          attemptPlay();
+        }
+      },
+      playbackStartMs,
+    );
+
+    setTimer('progressCheck', checkProgress, progressTimeout.checkIntervalMs);
 
     return () => {
       video.removeEventListener('loadedmetadata', onLoadedMetadata);
@@ -845,39 +574,40 @@ export function useTransitionPlayback(
       video.removeEventListener('error', onVideoError);
       video.removeEventListener('abort', onAbort);
       video.removeEventListener('stalled', onStalled);
-      video.removeEventListener('seeking', onSeeking);
-      video.removeEventListener('seeked', onSeeked);
-      clearTimers();
+      video.removeEventListener('waiting', onWaiting);
+      video.removeEventListener('progress', onProgress);
+      clearAllTimers();
     };
   }, [
     sourceUrl,
-    storageKey,
-    transition?.isBack,
+    resolvedUrl,
+    isResolving,
     videoRef,
     playbackStartMs,
-    hardTimeoutMs,
-    clearTimers,
-    revokeBlobUrl,
+    setTimer,
+    clearTimer,
+    clearAllTimers,
     finishPlayback,
     handleError,
   ]);
 
   useEffect(() => {
     if (!transition) {
-      setPhase('idle');
-      setIsVideoReady(false);
-      activeSourceUrlRef.current = null;
+      dispatch({ type: 'RESET' });
       didFinishRef.current = false;
       didStartPlaybackRef.current = false;
+      activeSourceKeyRef.current = null;
     }
   }, [transition]);
 
   return {
-    phase,
-    // Show buffering until video first frame is painted (prevents START black flash)
+    phase: state.phase,
     isBuffering:
-      phase === 'preparing' || (phase === 'playing' && !isVideoReady),
-    isReversing: false, // No longer support frame-stepping reverse
+      state.phase === 'preparing' ||
+      (state.phase === 'playing' && !state.isVideoReady) ||
+      (state.phase === 'playing' && state.isWaitingForData),
+    isVideoReady: state.isVideoReady,
+    isReversing: false,
     cancel,
     forceComplete,
   };
diff --git a/frontend/src/hooks/useTransitionPreview.ts b/frontend/src/hooks/useTransitionPreview.ts
index df5e7e5..a97dc9d 100644
--- a/frontend/src/hooks/useTransitionPreview.ts
+++ b/frontend/src/hooks/useTransitionPreview.ts
@@ -7,6 +7,7 @@
 
 import { useState, useCallback, useMemo } from 'react';
 import type { TransitionPreviewState } from '../types/presentation';
+import { logger } from '../lib/logger';
 
 export type { TransitionPreviewState };
 
@@ -128,6 +129,14 @@ export function useTransitionPreview({
         isBack: direction === 'back', // Track for history management
       };
 
+      logger.info('[TRANSITION-PREVIEW] Setting preview state', {
+        videoUrl: previewState.videoUrl?.slice(-60),
+        storageKey: previewState.storageKey?.slice(-60),
+        reverseMode: previewState.reverseMode,
+        direction,
+        isBack: previewState.isBack,
+      });
+
       setPreview(previewState);
     },
     [isNavigationElementType, onError],
diff --git a/frontend/src/hooks/video/index.ts b/frontend/src/hooks/video/index.ts
new file mode 100644
index 0000000..ed464d0
--- /dev/null
+++ b/frontend/src/hooks/video/index.ts
@@ -0,0 +1,59 @@
+/**
+ * Video Hooks Module
+ *
+ * Primitive hooks for video playback management.
+ * These hooks can be composed to build various video playback scenarios.
+ */
+
+// Primitive hooks
+export {
+  useVideoEventManager,
+  type VideoEventType,
+  type VideoEventHandler,
+  type VideoEventHandlers,
+  type UseVideoEventManagerOptions,
+} from './useVideoEventManager';
+
+export {
+  useVideoBufferingState,
+  type UseVideoBufferingStateOptions,
+  type UseVideoBufferingStateResult,
+} from './useVideoBufferingState';
+
+export {
+  useVideoBlobUrl,
+  type PreloadCacheProvider,
+  type UseVideoBlobUrlOptions,
+  type UseVideoBlobUrlResult,
+} from './useVideoBlobUrl';
+
+export {
+  useVideoFirstFrame,
+  type UseVideoFirstFrameOptions,
+  type UseVideoFirstFrameResult,
+} from './useVideoFirstFrame';
+
+export {
+  useVideoErrorRecovery,
+  type UseVideoErrorRecoveryOptions,
+  type UseVideoErrorRecoveryResult,
+} from './useVideoErrorRecovery';
+
+export {
+  useVideoTimeouts,
+  type UseVideoTimeoutsResult,
+} from './useVideoTimeouts';
+
+// Composite hook
+export {
+  useVideoPlaybackCore,
+  type UseVideoPlaybackCoreOptions,
+  type UseVideoPlaybackCoreResult,
+} from './useVideoPlaybackCore';
+
+// Video player hook for UI elements
+export {
+  useVideoPlayer,
+  type UseVideoPlayerOptions,
+  type UseVideoPlayerResult,
+} from './useVideoPlayer';
diff --git a/frontend/src/hooks/video/useVideoBlobUrl.ts b/frontend/src/hooks/video/useVideoBlobUrl.ts
new file mode 100644
index 0000000..610b548
--- /dev/null
+++ b/frontend/src/hooks/video/useVideoBlobUrl.ts
@@ -0,0 +1,185 @@
+/**
+ * useVideoBlobUrl Hook
+ *
+ * Resolves video URLs with multi-tier fallback:
+ * 1. Fresh blob URL from cached Blob
+ * 2. Cached blob URL by storage key
+ * 3. Proxy URL fallback
+ */
+
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { logger } from '../../lib/logger';
+import { resolveAssetPlaybackUrl } from '../../lib/assetUrl';
+
+export interface PreloadCacheProvider {
+  getReadyBlob?: (key: string) => Blob | null;
+  getCachedBlobUrl?: (key: string) => Promise<string | null>;
+}
+
+export interface UseVideoBlobUrlOptions {
+  sourceUrl: string;
+  storageKey?: string;
+  preloadCache?: PreloadCacheProvider;
+  onResolved?: (url: string) => void;
+  onError?: (error: Error) => void;
+}
+
+export interface UseVideoBlobUrlResult {
+  resolvedUrl: string | null;
+  isResolving: boolean;
+  error: Error | null;
+  resolve: () => Promise<string>;
+  revoke: () => void;
+}
+
+export function useVideoBlobUrl({
+  sourceUrl,
+  storageKey,
+  preloadCache,
+  onResolved,
+  onError,
+}: UseVideoBlobUrlOptions): UseVideoBlobUrlResult {
+  const [resolvedUrl, setResolvedUrl] = useState<string | null>(null);
+  const [isResolving, setIsResolving] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const lastLoadedBlobUrlRef = useRef<string | null>(null);
+  const lastLoadedSourceUrlRef = useRef<string | null>(null);
+  const onResolvedRef = useRef(onResolved);
+  const onErrorRef = useRef(onError);
+
+  useEffect(() => {
+    onResolvedRef.current = onResolved;
+    onErrorRef.current = onError;
+  });
+
+  const revoke = useCallback(() => {
+    if (lastLoadedBlobUrlRef.current) {
+      URL.revokeObjectURL(lastLoadedBlobUrlRef.current);
+      lastLoadedBlobUrlRef.current = null;
+    }
+  }, []);
+
+  const resolve = useCallback(async (): Promise<string> => {
+    const { getReadyBlob, getCachedBlobUrl } = preloadCache || {};
+
+    // 1. Try raw Blob by storage key
+    if (getReadyBlob && storageKey) {
+      const blob = getReadyBlob(storageKey);
+      if (blob) {
+        revoke();
+        const freshBlobUrl = URL.createObjectURL(blob);
+        lastLoadedBlobUrlRef.current = freshBlobUrl;
+        lastLoadedSourceUrlRef.current = sourceUrl;
+        return freshBlobUrl;
+      }
+    }
+
+    // 2. Try cached blob URL by storage key
+    if (getCachedBlobUrl && storageKey) {
+      try {
+        const cachedBlobUrl = await getCachedBlobUrl(storageKey);
+        if (cachedBlobUrl) {
+          lastLoadedBlobUrlRef.current = cachedBlobUrl;
+          lastLoadedSourceUrlRef.current = sourceUrl;
+          return cachedBlobUrl;
+        }
+      } catch {
+        // Fall through
+      }
+    }
+
+    // 3. Reuse cached blob URL if same source
+    if (
+      lastLoadedBlobUrlRef.current &&
+      lastLoadedSourceUrlRef.current === sourceUrl
+    ) {
+      return lastLoadedBlobUrlRef.current;
+    }
+
+    if (lastLoadedBlobUrlRef.current) {
+      revoke();
+    }
+
+    // 4. Try raw Blob by source URL
+    if (getReadyBlob) {
+      const blob = getReadyBlob(sourceUrl);
+      if (blob) {
+        const freshBlobUrl = URL.createObjectURL(blob);
+        lastLoadedBlobUrlRef.current = freshBlobUrl;
+        lastLoadedSourceUrlRef.current = sourceUrl;
+        return freshBlobUrl;
+      }
+    }
+
+    // 5. Try cached blob URL by source URL
+    if (getCachedBlobUrl) {
+      try {
+        const cachedBlobUrl = await getCachedBlobUrl(sourceUrl);
+        if (cachedBlobUrl) {
+          lastLoadedBlobUrlRef.current = cachedBlobUrl;
+          lastLoadedSourceUrlRef.current = sourceUrl;
+          return cachedBlobUrl;
+        }
+      } catch {
+        // Fall through
+      }
+    }
+
+    // 6. Fallback to proxy URL
+    const downloadKey = storageKey || sourceUrl;
+    const proxyUrl = resolveAssetPlaybackUrl(downloadKey);
+    logger.info('[VIDEO-URL] Using proxy URL', {
+      storageKey: downloadKey.slice(-60),
+    });
+    return proxyUrl;
+  }, [sourceUrl, storageKey, preloadCache, revoke]);
+
+  useEffect(() => {
+    if (!sourceUrl) {
+      setResolvedUrl(null);
+      return;
+    }
+
+    let cancelled = false;
+    setIsResolving(true);
+    setError(null);
+
+    resolve()
+      .then((url) => {
+        if (!cancelled) {
+          setResolvedUrl(url);
+          setIsResolving(false);
+          onResolvedRef.current?.(url);
+        }
+      })
+      .catch((err) => {
+        if (!cancelled) {
+          const resolveError = err instanceof Error ? err : new Error(String(err));
+          setError(resolveError);
+          setIsResolving(false);
+          onErrorRef.current?.(resolveError);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [sourceUrl, resolve]);
+
+  useEffect(() => {
+    return () => {
+      revoke();
+    };
+  }, [revoke]);
+
+  return {
+    resolvedUrl,
+    isResolving,
+    error,
+    resolve,
+    revoke,
+  };
+}
+
+export default useVideoBlobUrl;
diff --git a/frontend/src/hooks/video/useVideoBufferingState.ts b/frontend/src/hooks/video/useVideoBufferingState.ts
new file mode 100644
index 0000000..7d91c48
--- /dev/null
+++ b/frontend/src/hooks/video/useVideoBufferingState.ts
@@ -0,0 +1,216 @@
+/**
+ * useVideoBufferingState Hook
+ *
+ * Tracks video buffering state including:
+ * - Initial buffering (waiting for canplay)
+ * - Mid-playback buffering (waiting event)
+ * - Progress-based timeout detection
+ */
+
+import { useState, useRef, useCallback, useEffect, type RefObject } from 'react';
+import { logger } from '../../lib/logger';
+import { TRANSITION_CONFIG } from '../../config/transition.config';
+
+export interface UseVideoBufferingStateOptions {
+  videoRef: RefObject<HTMLVideoElement | null>;
+  enabled?: boolean;
+  /** Custom no-progress timeout in ms (uses config default if not provided) */
+  noProgressMs?: number;
+  /** Custom check interval in ms (uses config default if not provided) */
+  checkIntervalMs?: number;
+  /** Callback when buffering state changes */
+  onBufferingChange?: (isBuffering: boolean) => void;
+  /** Callback when progress timeout occurs */
+  onProgressTimeout?: () => void;
+}
+
+export interface UseVideoBufferingStateResult {
+  /** True when video is waiting for data (initial load or mid-playback) */
+  isBuffering: boolean;
+  /** True specifically when waiting event has fired (mid-playback) */
+  isWaitingForData: boolean;
+  /** True when canplay has fired (enough data to start playing) */
+  isReady: boolean;
+  /** Reset buffering state (e.g., when loading new source) */
+  reset: () => void;
+  /** Start progress monitoring (call after video starts loading) */
+  startProgressMonitor: () => void;
+  /** Stop progress monitoring */
+  stopProgressMonitor: () => void;
+  /** Update last progress time (call on progress events) */
+  updateProgressTime: () => void;
+}
+
+/**
+ * Hook for tracking video buffering state.
+ *
+ * Handles both initial buffering (before canplay) and mid-playback
+ * buffering (when video is waiting for more data).
+ *
+ * @example
+ * const { isBuffering, isReady, startProgressMonitor } = useVideoBufferingState({
+ *   videoRef,
+ *   enabled: true,
+ *   onProgressTimeout: () => console.error('Video timed out'),
+ * });
+ */
+export function useVideoBufferingState({
+  videoRef,
+  enabled = true,
+  noProgressMs,
+  checkIntervalMs,
+  onBufferingChange,
+  onProgressTimeout,
+}: UseVideoBufferingStateOptions): UseVideoBufferingStateResult {
+  const [isReady, setIsReady] = useState(false);
+  const [isWaitingForData, setIsWaitingForData] = useState(false);
+
+  const isWaitingForDataRef = useRef(false);
+  const lastProgressTimeRef = useRef<number>(0);
+  const progressTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const isMonitoringRef = useRef(false);
+  const onProgressTimeoutRef = useRef(onProgressTimeout);
+  const onBufferingChangeRef = useRef(onBufferingChange);
+
+  // Update refs on each render
+  useEffect(() => {
+    onProgressTimeoutRef.current = onProgressTimeout;
+    onBufferingChangeRef.current = onBufferingChange;
+  });
+
+  // Calculate actual timeout values
+  const { progressTimeout } = TRANSITION_CONFIG;
+  const isMobile =
+    typeof navigator !== 'undefined' &&
+    /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+  const actualNoProgressMs =
+    noProgressMs ??
+    (isMobile
+      ? progressTimeout.noProgressMs * progressTimeout.mobileMultiplier
+      : progressTimeout.noProgressMs);
+  const actualCheckIntervalMs = checkIntervalMs ?? progressTimeout.checkIntervalMs;
+
+  const stopProgressMonitor = useCallback(() => {
+    if (progressTimeoutRef.current) {
+      clearTimeout(progressTimeoutRef.current);
+      progressTimeoutRef.current = null;
+    }
+    isMonitoringRef.current = false;
+  }, []);
+
+  const updateProgressTime = useCallback(() => {
+    lastProgressTimeRef.current = Date.now();
+  }, []);
+
+  const startProgressMonitor = useCallback(() => {
+    if (isMonitoringRef.current) return;
+    isMonitoringRef.current = true;
+    lastProgressTimeRef.current = Date.now();
+
+    const video = videoRef.current;
+
+    const checkProgress = () => {
+      if (!isMonitoringRef.current) return;
+      if (!video) return;
+
+      const timeSinceProgress = Date.now() - lastProgressTimeRef.current;
+
+      // If playing normally (not waiting), continue monitoring
+      if (!video.paused && !isWaitingForDataRef.current) {
+        progressTimeoutRef.current = setTimeout(checkProgress, actualCheckIntervalMs);
+        return;
+      }
+
+      // If waiting but received data recently, keep waiting
+      if (timeSinceProgress < actualNoProgressMs) {
+        progressTimeoutRef.current = setTimeout(checkProgress, actualCheckIntervalMs);
+        return;
+      }
+
+      // No progress for too long while waiting - timeout
+      logger.error('useVideoBufferingState: No network progress - timing out', {
+        timeSinceProgress,
+        currentTime: video.currentTime?.toFixed(2),
+        isWaiting: isWaitingForDataRef.current,
+        actualNoProgressMs,
+      });
+      onProgressTimeoutRef.current?.();
+    };
+
+    progressTimeoutRef.current = setTimeout(checkProgress, actualCheckIntervalMs);
+  }, [videoRef, actualNoProgressMs, actualCheckIntervalMs]);
+
+  const reset = useCallback(() => {
+    setIsReady(false);
+    setIsWaitingForData(false);
+    isWaitingForDataRef.current = false;
+    stopProgressMonitor();
+  }, [stopProgressMonitor]);
+
+  // Set up video event listeners
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video || !enabled) return;
+
+    const onCanPlay = () => {
+      setIsReady(true);
+    };
+
+    const onWaiting = () => {
+      const bufferedInfo =
+        video.buffered.length > 0
+          ? `${video.buffered.start(0).toFixed(2)}-${video.buffered.end(video.buffered.length - 1).toFixed(2)}`
+          : 'none';
+      logger.info('useVideoBufferingState: Video waiting for data', {
+        currentTime: video.currentTime.toFixed(2),
+        buffered: bufferedInfo,
+      });
+      setIsWaitingForData(true);
+      isWaitingForDataRef.current = true;
+    };
+
+    const onPlaying = () => {
+      // Clear waiting state when playback resumes
+      if (isWaitingForDataRef.current) {
+        logger.info('useVideoBufferingState: Resumed playback after buffering');
+        setIsWaitingForData(false);
+        isWaitingForDataRef.current = false;
+      }
+    };
+
+    const onProgress = () => {
+      updateProgressTime();
+    };
+
+    video.addEventListener('canplay', onCanPlay);
+    video.addEventListener('waiting', onWaiting);
+    video.addEventListener('playing', onPlaying);
+    video.addEventListener('progress', onProgress);
+
+    return () => {
+      video.removeEventListener('canplay', onCanPlay);
+      video.removeEventListener('waiting', onWaiting);
+      video.removeEventListener('playing', onPlaying);
+      video.removeEventListener('progress', onProgress);
+      stopProgressMonitor();
+    };
+  }, [videoRef, enabled, stopProgressMonitor, updateProgressTime]);
+
+  // Notify on buffering state change
+  const isBuffering = !isReady || isWaitingForData;
+  useEffect(() => {
+    onBufferingChangeRef.current?.(isBuffering);
+  }, [isBuffering]);
+
+  return {
+    isBuffering,
+    isWaitingForData,
+    isReady,
+    reset,
+    startProgressMonitor,
+    stopProgressMonitor,
+    updateProgressTime,
+  };
+}
+
+export default useVideoBufferingState;
diff --git a/frontend/src/hooks/video/useVideoErrorRecovery.ts b/frontend/src/hooks/video/useVideoErrorRecovery.ts
new file mode 100644
index 0000000..3c836ba
--- /dev/null
+++ b/frontend/src/hooks/video/useVideoErrorRecovery.ts
@@ -0,0 +1,174 @@
+/**
+ * useVideoErrorRecovery Hook
+ *
+ * Handles video error recovery strategies:
+ * - Safari decode error retry (error code 3)
+ * - Proxy URL fallback on presigned URL failure
+ */
+
+import { useRef, useCallback, useEffect, type RefObject } from 'react';
+import { logger } from '../../lib/logger';
+import {
+  isPresignedUrl,
+  buildProxyUrl,
+  markPresignedUrlFailed,
+} from '../../lib/assetUrl';
+import { TRANSITION_CONFIG } from '../../config/transition.config';
+import { isSafari } from '../../lib/browserUtils';
+
+export interface UseVideoErrorRecoveryOptions {
+  videoRef: RefObject<HTMLVideoElement | null>;
+  enabled?: boolean;
+  /** Storage key for proxy URL fallback */
+  storageKey?: string;
+  /** Current video source URL */
+  currentUrl?: string;
+  /** Max decode retry attempts (default from config) */
+  maxDecodeRetries?: number;
+  /** Callback to reload video with new source */
+  onRetryWithSource?: (newUrl: string) => void;
+  /** Callback when all recovery attempts fail */
+  onUnrecoverableError?: (reason: string, error?: MediaError) => void;
+}
+
+export interface UseVideoErrorRecoveryResult {
+  /** Reset error recovery state */
+  reset: () => void;
+  /** Manually handle an error (returns true if handled, false if unrecoverable) */
+  handleError: (video: HTMLVideoElement) => boolean;
+}
+
+/**
+ * Hook for handling video error recovery.
+ *
+ * Supports:
+ * - Safari decode error retry (reloading the video)
+ * - Proxy URL fallback when presigned URLs fail
+ *
+ * @example
+ * const { reset, handleError } = useVideoErrorRecovery({
+ *   videoRef,
+ *   storageKey: 'assets/video.mp4',
+ *   currentUrl: presignedUrl,
+ *   onRetryWithSource: (newUrl) => {
+ *     video.src = newUrl;
+ *     video.load();
+ *   },
+ *   onUnrecoverableError: (reason) => console.error('Video error:', reason),
+ * });
+ */
+export function useVideoErrorRecovery({
+  videoRef,
+  enabled = true,
+  storageKey,
+  currentUrl,
+  maxDecodeRetries,
+  onRetryWithSource,
+  onUnrecoverableError,
+}: UseVideoErrorRecoveryOptions): UseVideoErrorRecoveryResult {
+  const decodeRetryCountRef = useRef(0);
+  const didTryProxyRef = useRef(false);
+
+  const onRetryWithSourceRef = useRef(onRetryWithSource);
+  const onUnrecoverableErrorRef = useRef(onUnrecoverableError);
+  const storageKeyRef = useRef(storageKey);
+  const currentUrlRef = useRef(currentUrl);
+
+  const actualMaxDecodeRetries =
+    maxDecodeRetries ?? TRANSITION_CONFIG.retry.maxDecodeRetries;
+
+  useEffect(() => {
+    onRetryWithSourceRef.current = onRetryWithSource;
+    onUnrecoverableErrorRef.current = onUnrecoverableError;
+    storageKeyRef.current = storageKey;
+    currentUrlRef.current = currentUrl;
+  });
+
+  const reset = useCallback(() => {
+    decodeRetryCountRef.current = 0;
+    didTryProxyRef.current = false;
+  }, []);
+
+  const handleError = useCallback(
+    (video: HTMLVideoElement): boolean => {
+      const error = video.error;
+      if (!error) return false;
+
+      const errorCode = error.code;
+      const errorMessage = (error as MediaError & { message?: string }).message || '';
+
+      logger.error('useVideoErrorRecovery: Video error', {
+        code: errorCode,
+        message: errorMessage,
+        currentSrc: video.currentSrc?.slice(-50),
+        readyState: video.readyState,
+        networkState: video.networkState,
+      });
+
+      // Safari decode error (error code 3) - try reload
+      if (
+        isSafari() &&
+        errorCode === 3 &&
+        decodeRetryCountRef.current < actualMaxDecodeRetries
+      ) {
+        decodeRetryCountRef.current++;
+        logger.info('useVideoErrorRecovery: Safari decode error, attempting reload', {
+          attempt: decodeRetryCountRef.current,
+          maxAttempts: actualMaxDecodeRetries,
+        });
+        video.load();
+        video.play().catch(() => {
+          /* ignore play errors during recovery */
+        });
+        return true;
+      }
+
+      // Network error with presigned URL - try proxy
+      const currentStorageKey = storageKeyRef.current;
+      const url = currentUrlRef.current;
+      if (
+        currentStorageKey &&
+        url &&
+        isPresignedUrl(url) &&
+        !didTryProxyRef.current
+      ) {
+        didTryProxyRef.current = true;
+        logger.info('useVideoErrorRecovery: Presigned URL failed, retrying with proxy', {
+          storageKey: currentStorageKey.slice(-40),
+        });
+        markPresignedUrlFailed(currentStorageKey);
+        const proxyUrl = buildProxyUrl(currentStorageKey);
+        onRetryWithSourceRef.current?.(proxyUrl);
+        return true;
+      }
+
+      // Unrecoverable error
+      onUnrecoverableErrorRef.current?.('video-error', error);
+      return false;
+    },
+    [actualMaxDecodeRetries],
+  );
+
+  // Set up error event listener
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video || !enabled) return;
+
+    const onError = () => {
+      handleError(video);
+    };
+
+    video.addEventListener('error', onError);
+
+    return () => {
+      video.removeEventListener('error', onError);
+    };
+  }, [videoRef, enabled, handleError]);
+
+  return {
+    reset,
+    handleError,
+  };
+}
+
+export default useVideoErrorRecovery;
diff --git a/frontend/src/hooks/video/useVideoEventManager.ts b/frontend/src/hooks/video/useVideoEventManager.ts
new file mode 100644
index 0000000..9ee47d4
--- /dev/null
+++ b/frontend/src/hooks/video/useVideoEventManager.ts
@@ -0,0 +1,114 @@
+/**
+ * useVideoEventManager Hook
+ *
+ * Manages video element event listener setup and cleanup.
+ * Provides a declarative API for subscribing to video events.
+ */
+
+import { useEffect, type RefObject } from 'react';
+
+export type VideoEventType =
+  | 'loadedmetadata'
+  | 'loadeddata'
+  | 'canplay'
+  | 'canplaythrough'
+  | 'playing'
+  | 'pause'
+  | 'ended'
+  | 'timeupdate'
+  | 'seeking'
+  | 'seeked'
+  | 'waiting'
+  | 'progress'
+  | 'stalled'
+  | 'error'
+  | 'abort';
+
+export type VideoEventHandler = (event: Event) => void;
+
+export interface VideoEventHandlers {
+  onLoadedMetadata?: VideoEventHandler;
+  onLoadedData?: VideoEventHandler;
+  onCanPlay?: VideoEventHandler;
+  onCanPlayThrough?: VideoEventHandler;
+  onPlaying?: VideoEventHandler;
+  onPause?: VideoEventHandler;
+  onEnded?: VideoEventHandler;
+  onTimeUpdate?: VideoEventHandler;
+  onSeeking?: VideoEventHandler;
+  onSeeked?: VideoEventHandler;
+  onWaiting?: VideoEventHandler;
+  onProgress?: VideoEventHandler;
+  onStalled?: VideoEventHandler;
+  onError?: VideoEventHandler;
+  onAbort?: VideoEventHandler;
+}
+
+export interface UseVideoEventManagerOptions {
+  videoRef: RefObject<HTMLVideoElement | null>;
+  enabled?: boolean;
+  handlers: VideoEventHandlers;
+}
+
+const EVENT_MAP: Record<keyof VideoEventHandlers, VideoEventType> = {
+  onLoadedMetadata: 'loadedmetadata',
+  onLoadedData: 'loadeddata',
+  onCanPlay: 'canplay',
+  onCanPlayThrough: 'canplaythrough',
+  onPlaying: 'playing',
+  onPause: 'pause',
+  onEnded: 'ended',
+  onTimeUpdate: 'timeupdate',
+  onSeeking: 'seeking',
+  onSeeked: 'seeked',
+  onWaiting: 'waiting',
+  onProgress: 'progress',
+  onStalled: 'stalled',
+  onError: 'error',
+  onAbort: 'abort',
+};
+
+/**
+ * Hook for managing video element event listeners.
+ *
+ * @example
+ * useVideoEventManager({
+ *   videoRef,
+ *   enabled: true,
+ *   handlers: {
+ *     onPlaying: () => console.log('Video started playing'),
+ *     onWaiting: () => console.log('Video is buffering'),
+ *     onEnded: () => console.log('Video ended'),
+ *   },
+ * });
+ */
+export function useVideoEventManager({
+  videoRef,
+  enabled = true,
+  handlers,
+}: UseVideoEventManagerOptions): void {
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video || !enabled) return;
+
+    const boundHandlers: Array<[VideoEventType, VideoEventHandler]> = [];
+
+    // Set up event listeners
+    for (const [handlerKey, eventType] of Object.entries(EVENT_MAP)) {
+      const handler = handlers[handlerKey as keyof VideoEventHandlers];
+      if (handler) {
+        video.addEventListener(eventType, handler);
+        boundHandlers.push([eventType, handler]);
+      }
+    }
+
+    // Cleanup
+    return () => {
+      for (const [eventType, handler] of boundHandlers) {
+        video.removeEventListener(eventType, handler);
+      }
+    };
+  }, [videoRef, enabled, handlers]);
+}
+
+export default useVideoEventManager;
diff --git a/frontend/src/hooks/video/useVideoFirstFrame.ts b/frontend/src/hooks/video/useVideoFirstFrame.ts
new file mode 100644
index 0000000..7edcacd
--- /dev/null
+++ b/frontend/src/hooks/video/useVideoFirstFrame.ts
@@ -0,0 +1,123 @@
+/**
+ * useVideoFirstFrame Hook
+ *
+ * Detects when the first video frame is painted using:
+ * - requestVideoFrameCallback (modern browsers, Safari 15.4+)
+ * - requestAnimationFrame fallback (older browsers)
+ */
+
+import { useState, useRef, useCallback, useEffect, type RefObject } from 'react';
+import { logger } from '../../lib/logger';
+import { scheduleAfterPaint } from '../../lib/browserUtils';
+
+export interface UseVideoFirstFrameOptions {
+  videoRef: RefObject<HTMLVideoElement | null>;
+  enabled?: boolean;
+  /** Callback when first frame is painted */
+  onFirstFrame?: () => void;
+}
+
+export interface UseVideoFirstFrameResult {
+  /** True when first frame has been painted */
+  isFirstFramePainted: boolean;
+  /** Reset first frame state */
+  reset: () => void;
+}
+
+/**
+ * Hook for detecting when the first video frame is painted.
+ *
+ * Uses requestVideoFrameCallback when available (Safari 15.4+, Chrome, Firefox)
+ * for precise frame-level detection. Falls back to requestAnimationFrame
+ * with scheduleAfterPaint for older browsers.
+ *
+ * @example
+ * const { isFirstFramePainted, reset } = useVideoFirstFrame({
+ *   videoRef,
+ *   enabled: true,
+ *   onFirstFrame: () => console.log('First frame painted'),
+ * });
+ */
+export function useVideoFirstFrame({
+  videoRef,
+  enabled = true,
+  onFirstFrame,
+}: UseVideoFirstFrameOptions): UseVideoFirstFrameResult {
+  const [isFirstFramePainted, setIsFirstFramePainted] = useState(false);
+  const callbackIdRef = useRef<number | null>(null);
+  const onFirstFrameRef = useRef(onFirstFrame);
+  const didFireRef = useRef(false);
+
+  useEffect(() => {
+    onFirstFrameRef.current = onFirstFrame;
+  });
+
+  const reset = useCallback(() => {
+    setIsFirstFramePainted(false);
+    didFireRef.current = false;
+
+    // Cancel pending callback
+    if (callbackIdRef.current !== null) {
+      const video = videoRef.current;
+      if (video && 'cancelVideoFrameCallback' in video) {
+        (video as HTMLVideoElement & { cancelVideoFrameCallback: (id: number) => void })
+          .cancelVideoFrameCallback(callbackIdRef.current);
+      }
+      callbackIdRef.current = null;
+    }
+  }, [videoRef]);
+
+  // Set up first frame detection when video starts playing
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video || !enabled) return;
+
+    const handlePlaying = () => {
+      if (didFireRef.current) return;
+
+      // Use requestVideoFrameCallback for precise frame-level timing (Safari 15.4+)
+      if ('requestVideoFrameCallback' in video) {
+        const rvfc = (video as HTMLVideoElement & {
+          requestVideoFrameCallback: (
+            callback: (now: number, metadata: VideoFrameCallbackMetadata) => void
+          ) => number;
+        }).requestVideoFrameCallback.bind(video);
+
+        // First callback: frame is composited, safe to show overlay
+        callbackIdRef.current = rvfc((_now, _metadata) => {
+          if (!didFireRef.current) {
+            didFireRef.current = true;
+            setIsFirstFramePainted(true);
+            logger.info('useVideoFirstFrame: First frame painted (rvfc)');
+            onFirstFrameRef.current?.();
+          }
+          callbackIdRef.current = null;
+        });
+      } else {
+        // Fallback for older browsers without requestVideoFrameCallback
+        scheduleAfterPaint(() => {
+          if (!didFireRef.current) {
+            didFireRef.current = true;
+            setIsFirstFramePainted(true);
+            logger.info('useVideoFirstFrame: First frame painted (rAF fallback)');
+            onFirstFrameRef.current?.();
+          }
+        });
+      }
+    };
+
+    video.addEventListener('playing', handlePlaying);
+
+    return () => {
+      video.removeEventListener('playing', handlePlaying);
+      reset();
+    };
+  }, [videoRef, enabled, reset]);
+
+  return {
+    isFirstFramePainted,
+    reset,
+  };
+}
+
+export default useVideoFirstFrame;
diff --git a/frontend/src/hooks/video/useVideoPlaybackCore.ts b/frontend/src/hooks/video/useVideoPlaybackCore.ts
new file mode 100644
index 0000000..5f3abcc
--- /dev/null
+++ b/frontend/src/hooks/video/useVideoPlaybackCore.ts
@@ -0,0 +1,337 @@
+/**
+ * useVideoPlaybackCore Hook
+ *
+ * Composite hook that combines all video primitives into a unified
+ * playback controller. Used as the foundation for both transition
+ * and background video playback.
+ */
+
+import { useCallback, useEffect, useRef, useState, type RefObject } from 'react';
+import { logger } from '../../lib/logger';
+import { useVideoBlobUrl, type PreloadCacheProvider } from './useVideoBlobUrl';
+import { useVideoBufferingState } from './useVideoBufferingState';
+import { useVideoFirstFrame } from './useVideoFirstFrame';
+import { useVideoErrorRecovery } from './useVideoErrorRecovery';
+import { useVideoTimeouts } from './useVideoTimeouts';
+
+export interface UseVideoPlaybackCoreOptions {
+  videoRef: RefObject<HTMLVideoElement | null>;
+  /** Source URL or storage path */
+  sourceUrl?: string;
+  /** Storage key for cache lookup */
+  storageKey?: string;
+  /** Preload cache provider */
+  preloadCache?: PreloadCacheProvider;
+  /** Whether to autoplay when ready */
+  autoplay?: boolean;
+  /** Whether video is muted */
+  muted?: boolean;
+  /** External pause control */
+  paused?: boolean;
+  /** Timeout for playback start (ms) */
+  playbackStartTimeoutMs?: number;
+  /** Callback when video is ready (first frame painted) */
+  onReady?: () => void;
+  /** Callback on error */
+  onError?: (reason: string) => void;
+  /** Callback when buffering state changes */
+  onBufferingChange?: (isBuffering: boolean) => void;
+  /** Callback when video ends */
+  onEnded?: () => void;
+}
+
+export interface UseVideoPlaybackCoreResult {
+  /** True when first frame has been painted */
+  isReady: boolean;
+  /** True during buffering (initial load or mid-playback) */
+  isBuffering: boolean;
+  /** True specifically when waiting for network data mid-playback */
+  isWaitingForData: boolean;
+  /** Resolved playable URL */
+  resolvedUrl: string | null;
+  /** Whether URL resolution is in progress */
+  isResolving: boolean;
+  /** Start playback */
+  play: () => Promise<void>;
+  /** Pause playback */
+  pause: () => void;
+  /** Reset all state */
+  reset: () => void;
+}
+
+const DEFAULT_PLAYBACK_START_TIMEOUT_MS = 3000;
+
+/**
+ * Core video playback hook that composes all video primitives.
+ *
+ * Provides unified handling for:
+ * - Multi-tier URL resolution (blob, cached, streaming, proxy)
+ * - Buffering state detection (initial and mid-playback)
+ * - First frame detection (rvfc with fallback)
+ * - Error recovery (Safari decode error, proxy fallback)
+ * - Timer management
+ *
+ * @example
+ * const {
+ *   isReady,
+ *   isBuffering,
+ *   resolvedUrl,
+ *   play,
+ *   pause,
+ * } = useVideoPlaybackCore({
+ *   videoRef,
+ *   sourceUrl: 'assets/video.mp4',
+ *   storageKey: 'assets/video.mp4',
+ *   autoplay: true,
+ *   onReady: () => console.log('Video ready'),
+ *   onError: (reason) => console.error('Error:', reason),
+ * });
+ */
+export function useVideoPlaybackCore({
+  videoRef,
+  sourceUrl,
+  storageKey,
+  preloadCache,
+  autoplay = false,
+  muted = true,
+  paused = false,
+  playbackStartTimeoutMs = DEFAULT_PLAYBACK_START_TIMEOUT_MS,
+  onReady,
+  onError,
+  onBufferingChange,
+  onEnded,
+}: UseVideoPlaybackCoreOptions): UseVideoPlaybackCoreResult {
+  const [isSourceLoaded, setIsSourceLoaded] = useState(false);
+  const didStartPlaybackRef = useRef(false);
+  const currentSourceRef = useRef<string | null>(null);
+
+  const onReadyRef = useRef(onReady);
+  const onErrorRef = useRef(onError);
+  const onBufferingChangeRef = useRef(onBufferingChange);
+  const onEndedRef = useRef(onEnded);
+
+  useEffect(() => {
+    onReadyRef.current = onReady;
+    onErrorRef.current = onError;
+    onBufferingChangeRef.current = onBufferingChange;
+    onEndedRef.current = onEnded;
+  });
+
+  // Timer management
+  const { setTimer, clearTimer, clearAllTimers } = useVideoTimeouts();
+
+  // URL resolution
+  const {
+    resolvedUrl,
+    isResolving,
+    revoke: revokeBlobUrl,
+  } = useVideoBlobUrl({
+    sourceUrl: sourceUrl || '',
+    storageKey,
+    preloadCache,
+    onError: (error) => {
+      logger.error('useVideoPlaybackCore: URL resolution failed', { error });
+      onErrorRef.current?.('source-resolution-failed');
+    },
+  });
+
+  // Buffering state
+  const {
+    isBuffering: isBufferingFromState,
+    isWaitingForData,
+    isReady: isBufferReady,
+    reset: resetBufferingState,
+    startProgressMonitor,
+  } = useVideoBufferingState({
+    videoRef,
+    enabled: Boolean(sourceUrl),
+    onBufferingChange: (buffering) => {
+      onBufferingChangeRef.current?.(buffering);
+    },
+    onProgressTimeout: () => {
+      onErrorRef.current?.('no-progress-timeout');
+    },
+  });
+
+  // First frame detection
+  const { isFirstFramePainted, reset: resetFirstFrame } = useVideoFirstFrame({
+    videoRef,
+    enabled: Boolean(sourceUrl),
+    onFirstFrame: () => {
+      logger.info('useVideoPlaybackCore: First frame painted');
+      onReadyRef.current?.();
+    },
+  });
+
+  // Error recovery
+  const { reset: resetErrorRecovery } = useVideoErrorRecovery({
+    videoRef,
+    enabled: Boolean(sourceUrl),
+    storageKey,
+    currentUrl: resolvedUrl || undefined,
+    onRetryWithSource: (newUrl) => {
+      const video = videoRef.current;
+      if (video) {
+        video.src = newUrl;
+        video.load();
+        video.play().catch(() => {
+          /* ignore play errors during recovery */
+        });
+      }
+    },
+    onUnrecoverableError: (reason) => {
+      onErrorRef.current?.(reason);
+    },
+  });
+
+  // Combined ready state
+  const isReady = isFirstFramePainted && isBufferReady;
+  const isBuffering = !isReady || isBufferingFromState || isWaitingForData;
+
+  // Play function
+  const play = useCallback(async () => {
+    const video = videoRef.current;
+    if (!video) return;
+
+    try {
+      await video.play();
+      didStartPlaybackRef.current = true;
+      clearTimer('playbackStart');
+    } catch (playError) {
+      logger.warn('useVideoPlaybackCore: Play failed', { playError });
+    }
+  }, [videoRef, clearTimer]);
+
+  // Pause function
+  const pause = useCallback(() => {
+    const video = videoRef.current;
+    if (video) {
+      video.pause();
+    }
+  }, [videoRef]);
+
+  // Reset function
+  const reset = useCallback(() => {
+    clearAllTimers();
+    resetBufferingState();
+    resetFirstFrame();
+    resetErrorRecovery();
+    revokeBlobUrl();
+    setIsSourceLoaded(false);
+    didStartPlaybackRef.current = false;
+    currentSourceRef.current = null;
+  }, [
+    clearAllTimers,
+    resetBufferingState,
+    resetFirstFrame,
+    resetErrorRecovery,
+    revokeBlobUrl,
+  ]);
+
+  // Load and play when URL is resolved
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video || !resolvedUrl || isResolving) return;
+
+    // Skip if already loaded this source
+    if (currentSourceRef.current === resolvedUrl && isSourceLoaded) return;
+
+    logger.info('useVideoPlaybackCore: Loading video', {
+      url: resolvedUrl.slice(-50),
+      autoplay,
+      paused,
+    });
+
+    currentSourceRef.current = resolvedUrl;
+    setIsSourceLoaded(false);
+    didStartPlaybackRef.current = false;
+
+    // Set video source
+    video.src = resolvedUrl;
+    video.muted = muted;
+    video.load();
+
+    // Start progress monitoring for streaming
+    startProgressMonitor();
+
+    setIsSourceLoaded(true);
+
+    // Autoplay if not externally paused
+    if (autoplay && !paused) {
+      play();
+
+      // Set playback start watchdog
+      setTimer(
+        'playbackStart',
+        () => {
+          if (!didStartPlaybackRef.current) {
+            logger.warn('useVideoPlaybackCore: Playback start timeout, retrying');
+            play();
+          }
+        },
+        playbackStartTimeoutMs,
+      );
+    }
+  }, [
+    videoRef,
+    resolvedUrl,
+    isResolving,
+    autoplay,
+    paused,
+    muted,
+    play,
+    setTimer,
+    startProgressMonitor,
+    playbackStartTimeoutMs,
+    isSourceLoaded,
+  ]);
+
+  // Handle external pause control
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video || !isSourceLoaded) return;
+
+    if (paused) {
+      video.pause();
+    } else if (autoplay && !video.paused) {
+      // Already playing, do nothing
+    } else if (autoplay) {
+      play();
+    }
+  }, [videoRef, paused, autoplay, play, isSourceLoaded]);
+
+  // Handle video ended
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+
+    const handleEnded = () => {
+      onEndedRef.current?.();
+    };
+
+    video.addEventListener('ended', handleEnded);
+    return () => {
+      video.removeEventListener('ended', handleEnded);
+    };
+  }, [videoRef]);
+
+  // Cleanup on unmount or source change
+  useEffect(() => {
+    return () => {
+      reset();
+    };
+  }, [sourceUrl, reset]);
+
+  return {
+    isReady,
+    isBuffering,
+    isWaitingForData,
+    resolvedUrl,
+    isResolving,
+    play,
+    pause,
+    reset,
+  };
+}
+
+export default useVideoPlaybackCore;
diff --git a/frontend/src/hooks/video/useVideoPlayer.ts b/frontend/src/hooks/video/useVideoPlayer.ts
new file mode 100644
index 0000000..0ae4b67
--- /dev/null
+++ b/frontend/src/hooks/video/useVideoPlayer.ts
@@ -0,0 +1,245 @@
+/**
+ * useVideoPlayer Hook
+ *
+ * Video player hook for UI elements (VideoPlayerElement).
+ * Built on video primitives for consistent behavior:
+ * - Multi-tier URL resolution (blob → cached → presigned → proxy)
+ * - Safari decode error recovery
+ * - Optional buffering state tracking
+ *
+ * Designed for video player UI elements embedded in pages,
+ * not for transition or background videos which have their own hooks.
+ */
+
+import { useRef, useCallback, useEffect, useState, type RefObject } from 'react';
+import { logger } from '../../lib/logger';
+import { useVideoBlobUrl, type PreloadCacheProvider } from './useVideoBlobUrl';
+import { useVideoErrorRecovery } from './useVideoErrorRecovery';
+
+export interface UseVideoPlayerOptions {
+  /** Source URL or storage path */
+  sourceUrl?: string;
+  /** Storage key for cache lookup (defaults to sourceUrl) */
+  storageKey?: string;
+  /** Preload cache provider for blob URL resolution */
+  preloadCache?: PreloadCacheProvider;
+  /** Whether to autoplay */
+  autoplay?: boolean;
+  /** Whether to loop */
+  loop?: boolean;
+  /** Whether to mute */
+  muted?: boolean;
+  /** Track buffering state for loading indicator (default: false) */
+  trackBuffering?: boolean;
+  /** Callback when video starts playing */
+  onPlay?: () => void;
+  /** Callback when video pauses */
+  onPause?: () => void;
+  /** Callback when video ends */
+  onEnded?: () => void;
+  /** Callback on error */
+  onError?: (reason: string) => void;
+}
+
+export interface UseVideoPlayerResult {
+  /** Ref to attach to video element */
+  videoRef: RefObject<HTMLVideoElement | null>;
+  /** Resolved playable URL */
+  resolvedUrl: string | null;
+  /** Whether URL is being resolved */
+  isResolving: boolean;
+  /** Whether video is buffering (only tracked if trackBuffering=true) */
+  isBuffering: boolean;
+  /** Whether video has loaded and can play */
+  isReady: boolean;
+  /** Play the video */
+  play: () => Promise<void>;
+  /** Pause the video */
+  pause: () => void;
+}
+
+/**
+ * Hook for video player UI elements.
+ *
+ * Provides unified video handling with:
+ * - Multi-tier URL resolution via preload cache
+ * - Safari decode error recovery
+ * - Optional buffering state tracking
+ *
+ * @example
+ * const {
+ *   videoRef,
+ *   resolvedUrl,
+ *   isBuffering,
+ *   isReady,
+ * } = useVideoPlayer({
+ *   sourceUrl: element.mediaUrl,
+ *   preloadCache,
+ *   autoplay: element.mediaAutoplay,
+ *   loop: element.mediaLoop,
+ *   muted: element.mediaMuted,
+ *   trackBuffering: true,
+ * });
+ */
+export function useVideoPlayer({
+  sourceUrl,
+  storageKey,
+  preloadCache,
+  autoplay = false,
+  loop = false,
+  muted = true,
+  trackBuffering = false,
+  onPlay,
+  onPause,
+  onEnded,
+  onError,
+}: UseVideoPlayerOptions): UseVideoPlayerResult {
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const [isBuffering, setIsBuffering] = useState(false);
+  const [isReady, setIsReady] = useState(false);
+
+  // Refs for callbacks
+  const onPlayRef = useRef(onPlay);
+  const onPauseRef = useRef(onPause);
+  const onEndedRef = useRef(onEnded);
+  const onErrorRef = useRef(onError);
+
+  useEffect(() => {
+    onPlayRef.current = onPlay;
+    onPauseRef.current = onPause;
+    onEndedRef.current = onEnded;
+    onErrorRef.current = onError;
+  });
+
+  // URL resolution via video primitives
+  const {
+    resolvedUrl,
+    isResolving,
+    revoke: revokeBlobUrl,
+  } = useVideoBlobUrl({
+    sourceUrl: sourceUrl || '',
+    storageKey: storageKey || sourceUrl,
+    preloadCache,
+    onError: (error) => {
+      logger.error('useVideoPlayer: URL resolution failed', { error });
+      onErrorRef.current?.('source-resolution-failed');
+    },
+  });
+
+  // Error recovery (Safari decode errors, proxy fallback)
+  const { reset: resetErrorRecovery } = useVideoErrorRecovery({
+    videoRef,
+    enabled: Boolean(sourceUrl),
+    storageKey: storageKey || sourceUrl,
+    currentUrl: resolvedUrl || undefined,
+    onRetryWithSource: (newUrl) => {
+      const video = videoRef.current;
+      if (video) {
+        video.src = newUrl;
+        video.load();
+        if (autoplay) {
+          video.play().catch(() => {
+            /* ignore play errors during recovery */
+          });
+        }
+      }
+    },
+    onUnrecoverableError: (reason) => {
+      onErrorRef.current?.(reason);
+    },
+  });
+
+  // Play function
+  const play = useCallback(async () => {
+    const video = videoRef.current;
+    if (!video) return;
+
+    try {
+      await video.play();
+    } catch (playError) {
+      logger.warn('useVideoPlayer: Play failed', { playError });
+    }
+  }, []);
+
+  // Pause function
+  const pause = useCallback(() => {
+    const video = videoRef.current;
+    if (video) {
+      video.pause();
+    }
+  }, []);
+
+  // Event handlers
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video || !resolvedUrl) return;
+
+    const handleCanPlay = () => {
+      setIsReady(true);
+      if (trackBuffering) {
+        setIsBuffering(false);
+      }
+    };
+
+    const handleWaiting = () => {
+      if (trackBuffering) {
+        setIsBuffering(true);
+      }
+    };
+
+    const handlePlaying = () => {
+      if (trackBuffering) {
+        setIsBuffering(false);
+      }
+      onPlayRef.current?.();
+    };
+
+    const handlePause = () => {
+      onPauseRef.current?.();
+    };
+
+    const handleEnded = () => {
+      onEndedRef.current?.();
+    };
+
+    video.addEventListener('canplay', handleCanPlay);
+    video.addEventListener('waiting', handleWaiting);
+    video.addEventListener('playing', handlePlaying);
+    video.addEventListener('pause', handlePause);
+    video.addEventListener('ended', handleEnded);
+
+    return () => {
+      video.removeEventListener('canplay', handleCanPlay);
+      video.removeEventListener('waiting', handleWaiting);
+      video.removeEventListener('playing', handlePlaying);
+      video.removeEventListener('pause', handlePause);
+      video.removeEventListener('ended', handleEnded);
+    };
+  }, [resolvedUrl, trackBuffering]);
+
+  // Reset state when source changes
+  useEffect(() => {
+    setIsReady(false);
+    setIsBuffering(false);
+    resetErrorRecovery();
+  }, [sourceUrl, resetErrorRecovery]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      revokeBlobUrl();
+    };
+  }, [revokeBlobUrl]);
+
+  return {
+    videoRef,
+    resolvedUrl,
+    isResolving,
+    isBuffering,
+    isReady,
+    play,
+    pause,
+  };
+}
+
+export default useVideoPlayer;
diff --git a/frontend/src/hooks/video/useVideoTimeouts.ts b/frontend/src/hooks/video/useVideoTimeouts.ts
new file mode 100644
index 0000000..6d3b47f
--- /dev/null
+++ b/frontend/src/hooks/video/useVideoTimeouts.ts
@@ -0,0 +1,93 @@
+/**
+ * useVideoTimeouts Hook
+ *
+ * Manages video-related timers including:
+ * - Playback start watchdog
+ * - Finish timer (duration-based)
+ * - Custom timers
+ */
+
+import { useRef, useCallback, useEffect } from 'react';
+
+export interface UseVideoTimeoutsResult {
+  /** Set a named timer */
+  setTimer: (name: string, callback: () => void, delayMs: number) => void;
+  /** Clear a named timer */
+  clearTimer: (name: string) => void;
+  /** Clear all timers */
+  clearAllTimers: () => void;
+  /** Check if a timer is active */
+  isTimerActive: (name: string) => boolean;
+}
+
+/**
+ * Hook for managing video-related timers.
+ *
+ * Provides a clean API for setting, clearing, and tracking
+ * multiple named timers. All timers are automatically cleaned
+ * up on unmount.
+ *
+ * @example
+ * const { setTimer, clearTimer, clearAllTimers } = useVideoTimeouts();
+ *
+ * // Start playback watchdog
+ * setTimer('watchdog', () => {
+ *   console.log('Playback did not start in time');
+ * }, 3000);
+ *
+ * // Clear when playback starts
+ * clearTimer('watchdog');
+ */
+export function useVideoTimeouts(): UseVideoTimeoutsResult {
+  const timersRef = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map());
+
+  const clearTimer = useCallback((name: string) => {
+    const timer = timersRef.current.get(name);
+    if (timer) {
+      clearTimeout(timer);
+      timersRef.current.delete(name);
+    }
+  }, []);
+
+  const clearAllTimers = useCallback(() => {
+    timersRef.current.forEach((timer) => {
+      clearTimeout(timer);
+    });
+    timersRef.current.clear();
+  }, []);
+
+  const setTimer = useCallback(
+    (name: string, callback: () => void, delayMs: number) => {
+      // Clear existing timer with same name
+      clearTimer(name);
+
+      const timer = setTimeout(() => {
+        timersRef.current.delete(name);
+        callback();
+      }, delayMs);
+
+      timersRef.current.set(name, timer);
+    },
+    [clearTimer],
+  );
+
+  const isTimerActive = useCallback((name: string) => {
+    return timersRef.current.has(name);
+  }, []);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      clearAllTimers();
+    };
+  }, [clearAllTimers]);
+
+  return {
+    setTimer,
+    clearTimer,
+    clearAllTimers,
+    isTimerActive,
+  };
+}
+
+export default useVideoTimeouts;
diff --git a/frontend/src/lib/extractPageLinks.ts b/frontend/src/lib/extractPageLinks.ts
index 4218040..c476ba3 100644
--- a/frontend/src/lib/extractPageLinks.ts
+++ b/frontend/src/lib/extractPageLinks.ts
@@ -161,16 +161,26 @@ export function extractPageLinksAndElements(
       }
 
       if (resolvedTargetPageId && resolvedTargetPageId !== page.id) {
+        const hasTransitionVideo =
+          el.transitionVideoUrl && typeof el.transitionVideoUrl === 'string';
+        const hasReverseVideo =
+          el.reverseVideoUrl && typeof el.reverseVideoUrl === 'string';
+
         pageLinks.push({
           id: `synthetic-${page.id}-${el.id || preloadElements.length}`,
           from_pageId: page.id,
           to_pageId: resolvedTargetPageId,
           is_active: true,
           transition:
-            el.transitionVideoUrl && typeof el.transitionVideoUrl === 'string'
+            hasTransitionVideo || hasReverseVideo
               ? {
                   id: `transition-${el.id || preloadElements.length}`,
-                  video_url: el.transitionVideoUrl,
+                  video_url: hasTransitionVideo
+                    ? (el.transitionVideoUrl as string)
+                    : undefined,
+                  reverse_video_url: hasReverseVideo
+                    ? (el.reverseVideoUrl as string)
+                    : undefined,
                 }
               : undefined,
         });
@@ -237,16 +247,26 @@ export function extractPageLinksOnly(
       }
 
       if (resolvedTargetPageId && resolvedTargetPageId !== page.id) {
+        const hasTransitionVideo =
+          el.transitionVideoUrl && typeof el.transitionVideoUrl === 'string';
+        const hasReverseVideo =
+          el.reverseVideoUrl && typeof el.reverseVideoUrl === 'string';
+
         pageLinks.push({
           id: `synthetic-${page.id}-${el.id || Math.random().toString(36).slice(2)}`,
           from_pageId: page.id,
           to_pageId: resolvedTargetPageId,
           is_active: true,
           transition:
-            el.transitionVideoUrl && typeof el.transitionVideoUrl === 'string'
+            hasTransitionVideo || hasReverseVideo
               ? {
                   id: `transition-${el.id || Math.random().toString(36).slice(2)}`,
-                  video_url: el.transitionVideoUrl,
+                  video_url: hasTransitionVideo
+                    ? (el.transitionVideoUrl as string)
+                    : undefined,
+                  reverse_video_url: hasReverseVideo
+                    ? (el.reverseVideoUrl as string)
+                    : undefined,
                 }
               : undefined,
         });
diff --git a/frontend/src/lib/offline/DownloadManager.ts b/frontend/src/lib/offline/DownloadManager.ts
index a10bcae..3e5a409 100644
--- a/frontend/src/lib/offline/DownloadManager.ts
+++ b/frontend/src/lib/offline/DownloadManager.ts
@@ -146,8 +146,7 @@ class DownloadManagerClass {
           ? {
               enabled: true,
               minBufferBytes:
-                params.streamingMode.minBufferBytes ??
-                this.getMinBufferBytes(),
+                params.streamingMode.minBufferBytes ?? this.getMinBufferBytes(),
               streamingUrl: params.url,
               didSignalReady: false,
             }
@@ -769,9 +768,7 @@ class DownloadManagerClass {
    */
   private getMinBufferBytes(): number {
     if (this.isMobile()) {
-      return (
-        PRELOAD_CONFIG.streaming.mobile?.minBufferBytes || 2 * 1024 * 1024
-      );
+      return PRELOAD_CONFIG.streaming.mobile?.minBufferBytes || 2 * 1024 * 1024;
     }
     return PRELOAD_CONFIG.streaming.minBufferBytes;
   }
diff --git a/frontend/src/pages/constructor.tsx b/frontend/src/pages/constructor.tsx
index ec9cebd..350192c 100644
--- a/frontend/src/pages/constructor.tsx
+++ b/frontend/src/pages/constructor.tsx
@@ -1,5 +1,4 @@
 import { mdiContentSave, mdiExitToApp, mdiPlus } from '@mdi/js';
-import axios from 'axios';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import React, {
@@ -24,11 +23,9 @@ import { BackdropPortalProvider } from '../components/BackdropPortal';
 import { getPageTitle } from '../config';
 import LayoutAuthenticated from '../layouts/Authenticated';
 import { usePreloadOrchestrator } from '../hooks/usePreloadOrchestrator';
-import { usePageSwitch } from '../hooks/usePageSwitch';
+import { usePageNavigationState } from '../hooks/usePageNavigationState';
 import { usePageNavigation } from '../hooks/usePageNavigation';
 import { useTransitionPlayback } from '../hooks/useTransitionPlayback';
-import { useBackgroundTransition } from '../hooks/useBackgroundTransition';
-import { useBackgroundUrls } from '../hooks/useBackgroundUrls';
 import { useTransitionSettings } from '../hooks/useTransitionSettings';
 import { useAppDispatch, useAppSelector } from '../stores/hooks';
 import { fetch as fetchGlobalTransitionDefaults } from '../stores/global_transition_defaults/globalTransitionDefaultsSlice';
@@ -42,7 +39,9 @@ import {
   extractElementTransitionSettings,
 } from '../types/transition';
 import { logger } from '../lib/logger';
+import { isSafari } from '../lib/browserUtils';
 import { resolveAssetPlaybackUrl } from '../lib/assetUrl';
+import { downloadManager } from '../lib/offline/DownloadManager';
 import { parseJsonObject } from '../lib/parseJson';
 import {
   resolveNavigationTarget,
@@ -68,7 +67,6 @@ import type {
   CanvasElementType,
   CanvasElement,
   ConstructorSchema,
-  ConstructorAsset as ProjectAsset,
   EditorMenuItem,
   GalleryCard,
   GalleryInfoSpan,
@@ -95,7 +93,6 @@ import { useConstructorElements } from '../hooks/useConstructorElements';
 import { usePageBackground } from '../hooks/usePageBackground';
 import { useConstructorData } from '../hooks/useConstructorData';
 import { useAssetOptions } from '../hooks/useAssetOptions';
-import { useTransitionCreation } from '../hooks/useTransitionCreation';
 import { usePublishStatus } from '../hooks/usePublishStatus';
 import {
   ConstructorProvider,
@@ -104,14 +101,7 @@ import {
 } from '../context/ConstructorContext';
 import { useCanvasScale } from '../hooks/useCanvasScale';
 import { useVideoSoundControl } from '../hooks/useVideoSoundControl';
-import { CANVAS_CONFIG } from '../config/canvas.config';
-
-// Constructor helpers (extracted utilities)
-import {
-  getAssetLabel,
-  getAssetSourceValue,
-  isBackgroundImageAsset,
-} from '../lib/constructorHelpers';
+import { useNetworkAware } from '../hooks/useNetworkAware';
 
 // TourPage type is imported from '../types/entities'
 // NavigationElementType is imported from '../context/ConstructorContext'
@@ -234,6 +224,9 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
     videoUrl: backgroundVideoUrl, // Track video changes for page navigation reset
   });
 
+  // Network-aware transitions: skip video on slow networks, use CSS fade instead
+  const { shouldUseVideoTransitions, networkInfo } = useNetworkAware();
+
   // Fetch global transition defaults on mount
   useEffect(() => {
     dispatch(fetchGlobalTransitionDefaults());
@@ -288,13 +281,6 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
     elementId: string;
     initialIndex: number;
   } | null>(null);
-  // Track background ready state for smooth video transition completion
-  const [isBackgroundReady, setIsBackgroundReady] = useState(true);
-  const [pendingTransitionComplete, setPendingTransitionComplete] =
-    useState(false);
-  // Track background video buffering state for loading indicator
-  const [isBackgroundVideoBuffering, setIsBackgroundVideoBuffering] =
-    useState(false);
   // Current element transition settings (for CSS transitions when no video)
   const [
     currentElementTransitionSettings,
@@ -424,8 +410,9 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
     });
 
   // Preload orchestrator for better DX when previewing pages
-  // Preloads neighbor page assets and transition videos
-  // Uses allPagesPreloadElements (extracted in loadData) for proper neighbor preloading
+  // Preloads current page + transition videos only
+  // STREAM-FIRST: Constructor always uses online mode
+  // Transition videos stream on-demand, then cache for replay
   const preloadOrchestrator = usePreloadOrchestrator({
     pages: pages.map((p) => ({
       id: p.id,
@@ -434,29 +421,12 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
       background_audio_url: p.background_audio_url,
     })),
     pageLinks,
-    elements: allPagesPreloadElements, // Use elements from ALL pages for proper neighbor preloading
+    elements: allPagesPreloadElements,
     currentPageId: activePageId,
+    pageHistory,
     enabled: !isLoading && !!activePageId,
-    // maxNeighborDepth defaults to 1 - only preload immediate neighbors
   });
 
-  // Compute page loading state for UI feedback
-  const isPagePreloading =
-    preloadOrchestrator?.currentPhase === 'phase1_current_page';
-
-  // Page switch hook for smooth background transitions (uses blob URLs from preload cache)
-  const pageSwitch = usePageSwitch({
-    preloadCache: preloadOrchestrator
-      ? {
-          getReadyBlobUrl: preloadOrchestrator.getReadyBlobUrl,
-          getCachedBlobUrl: preloadOrchestrator.getCachedBlobUrl,
-          preloadedUrls: preloadOrchestrator.preloadedUrls,
-        }
-      : undefined,
-  });
-  // Destructure stable callback reference to avoid infinite loops in useEffect deps
-  const pageSwitchToPage = pageSwitch.switchToPage;
-
   // Resolve transition settings using cascade: element → project → global
   const transitionSettings = useTransitionSettings({
     globalDefaults: globalTransitionDefaults,
@@ -464,59 +434,53 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
     elementSettings: currentElementTransitionSettings,
   });
 
-  // Use shared background transition hook for fade-from-black effect
-  // Black overlay fades out when page switches
-  const { isFadingIn, transitionStyle } = useBackgroundTransition({
-    pageSwitch,
+  // Unified page navigation state machine (replaces 6+ separate hooks)
+  // Uses useReducer for atomic state transitions, preventing race conditions
+  const navState = usePageNavigationState({
+    preloadCache: preloadOrchestrator
+      ? {
+          getReadyBlobUrl: preloadOrchestrator.getReadyBlobUrl,
+          getCachedBlobUrl: preloadOrchestrator.getCachedBlobUrl,
+          preloadedUrls: preloadOrchestrator.preloadedUrls,
+        }
+      : undefined,
     transitionSettings,
-    fadeIn: {
-      hasActiveTransition: Boolean(transitionPreview),
-    },
   });
 
-  // Video transition overlay removal - instant (no fade) when background is ready
-  // Uses double RAF to ensure browser has painted the new background before removing overlay
-  useEffect(() => {
-    if (pendingTransitionComplete && isBackgroundReady) {
-      // Wait for paint cycle to complete before removing overlay
-      // Double RAF ensures the new background is fully rendered
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          const video = transitionVideoRef.current;
-          if (video) {
-            video.removeAttribute('src');
-            video.load();
-          }
-          closeTransitionPreview();
-          setPendingTransitionComplete(false);
-        });
-      });
-    }
-  }, [pendingTransitionComplete, isBackgroundReady, closeTransitionPreview]);
+  // Destructure for convenience (matches previous hook interfaces)
+  // showElements/showSpinner are derived from the unified state machine phase:
+  // - showElements: true when phase is 'idle' or 'fading_in'
+  // - showSpinner: true when phase is 'preparing', 'loading_bg', or 'transition_done'
+  const {
+    currentImageUrl: navCurrentBgImageUrl,
+    currentVideoUrl: navCurrentBgVideoUrl,
+    currentAudioUrl: navCurrentBgAudioUrl,
+    previousImageUrl: navPreviousBgImageUrl,
+    previousVideoUrl: navPreviousBgVideoUrl,
+    isSwitching: navIsSwitching,
+    isNewBgReady: navIsNewBgReady,
+    pendingTransitionComplete,
+    isFadingIn,
+    showElements: navShowElements,
+    showSpinner: navShowSpinner,
+    showTransitionVideo,
+    transitionStyle,
+    lastKnownBgUrl,
+    onBackgroundReady: navOnBackgroundReady,
+    onVideoBufferStateChange,
+    onTransitionEnded,
+    navigateToPage: navNavigateToPage,
+    resetToIdle: navResetToIdle,
+    startTransition,
+  } = navState;
 
-  // Handle background ready state for pages without any background
-  useEffect(() => {
-    // Only mark ready immediately if there's no background media at all.
-    // For pages with image or video, CanvasBackground will call onBackgroundReady
-    // after the media's first frame is painted (using scheduleAfterPaint or requestVideoFrameCallback).
-    if (
-      !activePage?.background_image_url &&
-      !activePage?.background_video_url
-    ) {
-      setIsBackgroundReady(true);
-    }
-  }, [activePage?.background_image_url, activePage?.background_video_url]);
-
-  // Reset pending state when starting a new transition
-  useEffect(() => {
-    if (transitionPreview) {
-      setPendingTransitionComplete(false);
-    }
-  }, [transitionPreview]);
+  // Reset navigation state when starting a new transition
+  const resetFadeIn = useCallback(() => {
+    navResetToIdle();
+  }, [navResetToIdle]);
 
   // Helper to switch pages without flash
-  // Uses usePageSwitch hook to resolve blob URLs from preload cache
-  // Also updates storage path state for editing/saving purposes
+  // Uses unified navigation state machine for blob URL resolution
   // isBack parameter indicates this is a back navigation (pops history instead of pushing)
   const switchToPage = useCallback(
     async (page: TourPage | null, isBack = false) => {
@@ -525,12 +489,8 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
         lastInitializedPageIdRef.current = page.id;
       }
 
-      // Update consolidated background state (replaces 8 separate setters)
-      updateBackgroundFromPage(page);
-
-      // Use hook to resolve and set blob URLs for display
-      // Fade-from-black starts automatically when page switches
-      await pageSwitchToPage(
+      // Use unified navigation state machine for atomic state transitions
+      await navNavigateToPage(
         page
           ? {
               id: page.id,
@@ -539,18 +499,22 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
               background_audio_url: page.background_audio_url,
             }
           : null,
-        () => {
-          if (page) {
-            // Use applyPageSelection for proper history management (pops on back)
-            applyPageSelection(page.id, isBack);
-          }
+        {
+          hasTransition: false, // No video transition for direct navigation
+          isBack,
+          onSwitched: () => {
+            if (page) {
+              // Use applyPageSelection for proper history management (pops on back)
+              applyPageSelection(page.id, isBack);
+            }
+          },
         },
       );
     },
-    [pageSwitchToPage, updateBackgroundFromPage, applyPageSelection],
+    [navNavigateToPage, applyPageSelection],
   );
 
-  const { isBuffering: isReverseBuffering } = useTransitionPlayback({
+  const { isBuffering: isTransitionBuffering, isVideoReady: isTransitionVideoReady } = useTransitionPlayback({
     videoRef: transitionVideoRef,
     transition: transitionPreview
       ? {
@@ -560,6 +524,7 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
           reverseVideoUrl: transitionPreview.reverseVideoUrl
             ? resolveAssetPlaybackUrl(transitionPreview.reverseVideoUrl)
             : undefined,
+          reverseStorageKey: transitionPreview.reverseStorageKey, // Raw path for cache lookup
           durationSec: transitionPreview.durationSec,
           targetPageId: pendingNavigationPageId || undefined,
           displayName: transitionPreview.title,
@@ -567,24 +532,26 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
         }
       : null,
     onComplete: async (targetPageId, isBack) => {
+      // Resume background downloads now that transition is complete
+      downloadManager.resumeAll();
       const video = transitionVideoRef.current;
       if (targetPageId) {
         const targetPage = pages.find((p) => p.id === targetPageId) || null;
-        // Use switchToPage which resolves blob URLs via usePageSwitch
-        // Pass isBack flag for proper history management (pops on back)
+        // Signal that transition video has ended
+        // State machine transitions to 'transition_done', waiting for background
+        onTransitionEnded();
+        // DON'T close preview here - it stays visible until background is ready
+        // The useEffect watching showTransitionVideo will close it
+        // Navigate to target page - state machine handles ready state
         await switchToPage(targetPage, isBack ?? false);
         clearSelection();
         setSelectedMenuItem('none');
         setErrorMessage('');
-        setIsBackgroundReady(false);
-        // Signal that transition video completed - wait for background to load
-        // Overlay will be removed instantly when isBackgroundReady becomes true
-        setPendingTransitionComplete(true);
       } else {
         video?.removeAttribute('src');
         video?.load();
         closeTransitionPreview();
-        setPendingTransitionComplete(false);
+        navResetToIdle();
       }
     },
     timeouts: {
@@ -593,7 +560,7 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
     },
     features: {
       useBlobUrl: true,
-      preDecodeImages: false, // We handle image loading via usePageSwitch
+      preDecodeImages: false, // We handle image loading via navigation state machine
     },
     preload: {
       preloadedUrls: preloadOrchestrator.preloadedUrls,
@@ -603,6 +570,22 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
     },
   });
 
+  // Sync transition video buffering state with navigation state machine
+  // This enables unified showSpinner logic in the state machine
+  useEffect(() => {
+    const isBuffering = Boolean(transitionPreview) && isTransitionBuffering;
+    onVideoBufferStateChange(isBuffering);
+  }, [transitionPreview, isTransitionBuffering, onVideoBufferStateChange]);
+
+  // Clean up transition preview when state machine says video overlay should be hidden
+  // showTransitionVideo is true during 'transitioning', 'transition_done', and 'fading_in' phases
+  // During 'fading_in', the overlay fades out (isFadingOut=true), then removed when phase goes to 'idle'
+  useEffect(() => {
+    if (transitionPreview && !showTransitionVideo) {
+      closeTransitionPreview();
+    }
+  }, [transitionPreview, showTransitionVideo, closeTransitionPreview]);
+
   const iconPreloadTargets = useMemo(() => {
     const preloadableTypes: CanvasElementType[] = [
       'navigation_next',
@@ -1084,12 +1067,29 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
     // If current selection is still valid, do nothing (keep current)
     // Update consolidated background state (replaces 8 separate setters)
     updateBackgroundFromPage(activePage);
+  }, [
+    activePage,
+    elementIdFromRoute,
+    uiElementDefaultsByType,
+    clearSelection,
+    selectElement,
+    setElements,
+    updateBackgroundFromPage,
+  ]);
 
-    // Resolve blob URLs via hook for display (handles initial load and route changes)
-    // Only call if this page wasn't already initialized via switchToPage function
-    if (lastInitializedPageIdRef.current !== activePage.id) {
+  // Separate effect for initial background loading (matches RuntimePresentation pattern)
+  // This effect ONLY handles initial page load when backgrounds are empty.
+  // switchToPage handles all subsequent navigation by calling navNavigateToPage directly.
+  // Keeping this separate prevents race conditions where state updates trigger
+  // this effect before activePageId has been updated via applyPageSelection.
+  useEffect(() => {
+    if (!activePage || lastInitializedPageIdRef.current === activePage.id)
+      return;
+
+    // Only initialize when backgrounds are EMPTY (initial load)
+    if (!navCurrentBgImageUrl && !navCurrentBgVideoUrl) {
       lastInitializedPageIdRef.current = activePage.id;
-      pageSwitchToPage({
+      navNavigateToPage({
         id: activePage.id,
         background_image_url: activePage.background_image_url,
         background_video_url: activePage.background_video_url,
@@ -1098,13 +1098,9 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
     }
   }, [
     activePage,
-    elementIdFromRoute,
-    uiElementDefaultsByType,
-    pageSwitchToPage,
-    clearSelection,
-    selectElement,
-    setElements,
-    updateBackgroundFromPage,
+    navCurrentBgImageUrl,
+    navCurrentBgVideoUrl,
+    navNavigateToPage,
   ]);
 
   useEffect(() => {
@@ -1206,23 +1202,15 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
     if (!isConstructorEditMode) {
       if (isNavigationElementType(element.type)) {
         // Disable navigation while transition is playing or buffering
-        if (transitionPreview || isReverseBuffering) {
+        if (transitionPreview || isTransitionBuffering) {
           return;
         }
         if (element.navDisabled) {
           return;
         }
 
-        // DISABLED: Block forward navigation if neighbor backgrounds not yet preloaded
-        // Back navigation is always allowed (previous pages are already visited)
-        if (
-          false &&
-          !isBackNavigation(element) &&
-          !preloadOrchestrator.areNeighborBackgroundsReady
-        ) {
-          logger.info('Navigation blocked - neighbors not preloaded');
-          return;
-        }
+        // Cancel any pending fade to prevent stale fade state across navigations
+        resetFadeIn();
 
         // Use shared navigation helpers
         const direction = getNavigationDirection(element);
@@ -1279,10 +1267,48 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
           setCurrentElementTransitionSettings(elementSettings);
         });
 
+        // Note: Background ready state is reset atomically by navigateToPage/switchToPage
+
         // Check if transition can be played using shared helper
-        if (!hasPlayableTransition(transitionSource, direction)) {
+        const canPlayTransition = hasPlayableTransition(transitionSource, direction);
+
+        // Check if video is already cached (use video even on slow network if cached)
+        const transitionUrl = transitionSource.transitionVideoUrl;
+        const isTransitionCached =
+          transitionUrl && preloadOrchestrator.getReadyBlobUrl(transitionUrl);
+
+        // Use video if: has playable transition AND (cached OR good network)
+        const useVideoTransition =
+          canPlayTransition && (isTransitionCached || shouldUseVideoTransitions);
+
+        if (!useVideoTransition) {
           closeTransitionPreview();
-          // Use switchToPage which resolves blob URLs via usePageSwitch (reduces flash)
+
+          // Log when skipping video due to slow network
+          if (canPlayTransition && !shouldUseVideoTransitions && transitionUrl) {
+            logger.info(
+              '[NAVIGATION] Skipping video transition due to slow network, downloading in background',
+              {
+                effectiveType: networkInfo.effectiveType,
+                downlink: networkInfo.downlink,
+                rtt: networkInfo.rtt,
+              },
+            );
+
+            // Start background download of transition video for future use (low priority)
+            downloadManager.addJob({
+              assetId: `transition-bg-${transitionUrl}`,
+              projectId: 'transition-preload',
+              url: resolveAssetPlaybackUrl(transitionUrl),
+              filename: transitionUrl.split('/').pop() || 'transition.mp4',
+              variantType: 'original',
+              assetType: 'video',
+              priority: 10, // Low priority - background preload
+              storageKey: transitionUrl,
+            });
+          }
+
+          // Use switchToPage which resolves blob URLs via navigation state machine (reduces flash)
           // Pass isBack flag for proper history management
           switchToPage(navTarget.page, navTarget.isBack).then(() => {
             clearSelection();
@@ -1292,6 +1318,18 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
           return;
         }
 
+        // Signal navigation state machine that video transition is starting
+        // This sets phase to 'transitioning' so spinner shows during buffering
+        logger.info('[TRANSITION-START] 🚀 Starting transition', {
+          targetPageId: navTarget.pageId,
+          direction,
+          isBack: navTarget.isBack,
+          transitionVideoUrl: transitionSource.transitionVideoUrl?.slice(-60),
+          reverseVideoUrl: transitionSource.reverseVideoUrl?.slice(-60),
+        });
+        // Pause background downloads to give transition video exclusive bandwidth
+        downloadManager.pauseAll();
+        startTransition(navTarget.pageId, navTarget.isBack);
         openPreviewWithTarget(transitionSource, direction, navTarget.pageId);
       }
       return;
@@ -1364,20 +1402,30 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
       element.appearDurationSec,
     );
 
-  const isElementReadyForCanvasRender = (element: CanvasElement) => {
-    const isPreloadableIconElement =
-      (isNavigationElementType(element.type) ||
-        isTooltipElementType(element.type) ||
-        isDescriptionElementType(element.type)) &&
-      Boolean(element.iconUrl);
+  // Check if a single element's icon is ready (used for individual element visibility)
+  const isElementIconReady = useCallback(
+    (element: CanvasElement) => {
+      const isPreloadableIconElement =
+        (isNavigationElementType(element.type) ||
+          isTooltipElementType(element.type) ||
+          isDescriptionElementType(element.type)) &&
+        Boolean(element.iconUrl);
 
-    if (!isPreloadableIconElement) return true;
+      if (!isPreloadableIconElement) return true;
 
-    const playbackUrl = resolveAssetPlaybackUrl(element.iconUrl);
-    if (!playbackUrl) return true;
+      const playbackUrl = resolveAssetPlaybackUrl(element.iconUrl);
+      if (!playbackUrl) return true;
 
-    return Boolean(preloadedIconUrlMap[playbackUrl]);
-  };
+      return Boolean(preloadedIconUrlMap[playbackUrl]);
+    },
+    [preloadedIconUrlMap],
+  );
+
+  // Check if ALL element icons are ready - used to show all elements together
+  // This prevents staggered element appearance where some elements show before others
+  const areAllElementIconsReady = useMemo(() => {
+    return elements.every((element) => isElementIconReady(element));
+  }, [elements, isElementIconReady]);
 
   // URL resolver that uses preloaded blob URLs when available
   // Depends on readyUrlsVersion to re-render when blob URLs become ready after preload
@@ -1400,18 +1448,44 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
 
   const canvasBackgroundStyle: React.CSSProperties = {};
 
-  // Unified background URL resolution via shared hook
-  // Priority: local paths (editing) > pageSwitch (navigation)
-  const { backgroundImageSrc, backgroundVideoSrc, backgroundAudioSrc } =
-    useBackgroundUrls({
-      pageSwitch,
-      resolveUrl: resolveUrlWithBlob,
-      localPaths: {
-        imageUrl: backgroundImageUrl,
-        videoUrl: backgroundVideoUrl,
-        audioUrl: backgroundAudioUrl,
-      },
-    });
+  // Unified background URL resolution
+  // Edit mode: use local storage paths (for immediate editing feedback)
+  // Interact mode: use nav state values (blob URLs from preload cache)
+  const backgroundImageSrc = useMemo(() => {
+    if (isConstructorEditMode && backgroundImageUrl) {
+      return resolveUrlWithBlob(backgroundImageUrl);
+    }
+    return navCurrentBgImageUrl;
+  }, [
+    isConstructorEditMode,
+    backgroundImageUrl,
+    navCurrentBgImageUrl,
+    resolveUrlWithBlob,
+  ]);
+
+  const backgroundVideoSrc = useMemo(() => {
+    if (isConstructorEditMode && backgroundVideoUrl) {
+      return resolveUrlWithBlob(backgroundVideoUrl);
+    }
+    return navCurrentBgVideoUrl;
+  }, [
+    isConstructorEditMode,
+    backgroundVideoUrl,
+    navCurrentBgVideoUrl,
+    resolveUrlWithBlob,
+  ]);
+
+  const backgroundAudioSrc = useMemo(() => {
+    if (isConstructorEditMode && backgroundAudioUrl) {
+      return resolveUrlWithBlob(backgroundAudioUrl);
+    }
+    return navCurrentBgAudioUrl;
+  }, [
+    isConstructorEditMode,
+    backgroundAudioUrl,
+    navCurrentBgAudioUrl,
+    resolveUrlWithBlob,
+  ]);
 
   const hasEditorSelection =
     isConstructorEditMode &&
@@ -1692,6 +1766,23 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
           }}
         >
           <BackdropPortalProvider>
+            {/* Safari Black Flash Prevention (video transitions only):
+                Persistent snapshot layer shown ONLY during video transitions.
+                z-[1] keeps it behind backgrounds (z-5) but above the black container. */}
+            {lastKnownBgUrl &&
+              isSafari() &&
+              (transitionPreview || pendingTransitionComplete) && (
+                <div
+                  className='absolute inset-0 z-[1] pointer-events-none'
+                  style={{
+                    backgroundImage: `url("${lastKnownBgUrl}")`,
+                    backgroundSize: 'contain',
+                    backgroundPosition: 'center',
+                    backgroundRepeat: 'no-repeat',
+                  }}
+                />
+              )}
+
             {/* Background wrapper - z-5 keeps it BELOW carousel slide (z-10).
                 Previous background overlay shows during loading.
                 Black overlay for fade effect is rendered separately at z-[100]. */}
@@ -1700,15 +1791,12 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
                 backgroundImageUrl={backgroundImageSrc}
                 backgroundVideoUrl={backgroundVideoSrc}
                 backgroundAudioUrl={backgroundAudioSrc}
-                previousBgImageUrl={pageSwitch.previousBgImageUrl}
-                previousBgVideoUrl={pageSwitch.previousBgVideoUrl}
-                isSwitching={pageSwitch.isSwitching}
-                isNewBgReady={pageSwitch.isNewBgReady}
-                onBackgroundReady={() => {
-                  pageSwitch.markBackgroundReady();
-                  setIsBackgroundReady(true);
-                }}
-                onVideoBufferStateChange={setIsBackgroundVideoBuffering}
+                previousBgImageUrl={navPreviousBgImageUrl}
+                previousBgVideoUrl={navPreviousBgVideoUrl}
+                isSwitching={navIsSwitching}
+                isNewBgReady={navIsNewBgReady}
+                onBackgroundReady={navOnBackgroundReady}
+                onVideoBufferStateChange={onVideoBufferStateChange}
                 videoAutoplay={backgroundVideoAutoplay}
                 videoLoop={backgroundVideoLoop}
                 videoMuted={soundControl.isMuted}
@@ -1717,94 +1805,92 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
                 videoStoragePath={
                   backgroundVideoUrl || activePage?.background_video_url
                 }
+                pauseVideo={
+                  Boolean(transitionPreview) ||
+                  pendingTransitionComplete ||
+                  navIsSwitching
+                }
               />
             </div>
 
-            {/* Page loading spinner - shows during Phase 1 (current page loading) */}
-            {isPagePreloading && (
-              <CanvasLoadingSpinner
-                isVisible={true}
-                message='Loading page...'
-                progress={preloadOrchestrator?.phaseProgress}
-                zIndex={100}
-              />
-            )}
+            {/* Page loading spinner - from unified navigation state machine.
+                navShowSpinner is true when:
+                - Phase is 'preparing', 'loading_bg', 'transition_done', OR
+                - Video transition is active but buffering
+                Additionally for constructor: show while element icons are loading.
+                Only show in Interact mode - Edit mode doesn't need loading indicators.
+                Skip when video transition overlay is active - it has its own spinner. */}
+            {!isConstructorEditMode &&
+              !transitionPreview &&
+              (navShowSpinner ||
+                (navShowElements && !areAllElementIconsReady)) && (
+                <CanvasLoadingSpinner isVisible={true} zIndex={100} />
+              )}
 
             {/* Elements container - z-[46] keeps it ABOVE carousel slide (z-10) AND carousel controls (z-45).
                 UI controls (z-50) remain on top.
-                No fade animation - elements switch instantly behind the black overlay. */}
-            <div className='absolute inset-0 z-[46]'>
-              {isLoading ? (
-                <div className='absolute inset-0 flex items-center justify-center'>
-                  <p className='text-sm text-gray-500'>
-                    Loading constructor...
-                  </p>
-                </div>
-              ) : pages.length === 0 ? (
-                <div className='absolute inset-0 flex items-center justify-center'>
-                  <BaseButton
-                    color='info'
-                    label={isCreatingPage ? 'Creating...' : 'Create First Page'}
-                    icon={mdiPlus}
-                    onClick={createPage}
-                    disabled={isCreatingPage}
-                  />
-                </div>
-              ) : (
-                elements.map((element) => {
-                  const shouldRender =
-                    selectedElementId === element.id ||
-                    (isElementVisibleOnCanvas(element) &&
-                      isElementReadyForCanvasRender(element));
-                  if (!shouldRender) return null;
-
-                  // Compute disabled state for navigation elements
-                  // Disabled when:
-                  // - Element explicitly disabled (navDisabled)
-                  // - Transition is playing or buffering
-                  // - DISABLED: Neighbor backgrounds not yet preloaded (forward only)
-                  const isForwardNav =
-                    isNavigationElementType(element.type) &&
-                    !isBackNavigation(element);
-                  const isNavDisabled =
-                    isNavigationElementType(element.type) &&
-                    (element.navDisabled ||
-                      Boolean(transitionPreview) ||
-                      isReverseBuffering ||
-                      (false &&
-                        isForwardNav &&
-                        !preloadOrchestrator.areNeighborBackgroundsReady));
-
-                  return (
-                    <CanvasElementComponent
-                      key={element.id}
-                      element={element}
-                      isSelected={selectedElementId === element.id}
-                      isEditMode={isConstructorEditMode}
-                      isDisabled={isNavDisabled}
-                      onClick={() => onCanvasElementClick(element)}
-                      onMouseDown={(event) =>
-                        onElementMouseDown(event, element.id)
+                No fade animation - elements switch instantly behind the black overlay.
+                Shows when phase is 'idle' or 'fading_in' (navShowElements) AND all element icons are preloaded.
+                This ensures all elements appear together (no staggered appearance).
+                Exception: Edit mode always shows elements for editing (no icon preload wait). */}
+            {(isConstructorEditMode ||
+              (navShowElements && areAllElementIconsReady)) && (
+              <div className='absolute inset-0 z-[46]'>
+                {!isLoading && pages.length === 0 ? (
+                  <div className='absolute inset-0 flex items-center justify-center'>
+                    <BaseButton
+                      color='info'
+                      label={
+                        isCreatingPage ? 'Creating...' : 'Create First Page'
                       }
-                      resolveUrl={resolveUrlWithBlob}
-                      onGalleryCardClick={(cardIndex) =>
-                        handleGalleryCardClick(element, cardIndex)
-                      }
-                      onCarouselButtonPositionChange={(button, x, y) =>
-                        handleCarouselButtonPositionChange(
-                          element.id,
-                          button,
-                          x,
-                          y,
-                        )
-                      }
-                      letterboxStyles={letterboxStyles}
-                      pageTransitionSettings={transitionSettings}
+                      icon={mdiPlus}
+                      onClick={createPage}
+                      disabled={isCreatingPage}
                     />
-                  );
-                })
-              )}
-            </div>
+                  </div>
+                ) : (
+                  elements.map((element) => {
+                    // Icon preloading is now handled at container level (areAllElementIconsReady)
+                    // Here we only check visibility based on appear delay/duration timing
+                    const shouldRender =
+                      selectedElementId === element.id ||
+                      isElementVisibleOnCanvas(element);
+                    if (!shouldRender) return null;
+
+                    return (
+                      <CanvasElementComponent
+                        key={element.id}
+                        element={element}
+                        isSelected={selectedElementId === element.id}
+                        isEditMode={isConstructorEditMode}
+                        onClick={() => onCanvasElementClick(element)}
+                        onMouseDown={(event) =>
+                          onElementMouseDown(event, element.id)
+                        }
+                        resolveUrl={resolveUrlWithBlob}
+                        onGalleryCardClick={(cardIndex) =>
+                          handleGalleryCardClick(element, cardIndex)
+                        }
+                        onCarouselButtonPositionChange={(button, x, y) =>
+                          handleCarouselButtonPositionChange(
+                            element.id,
+                            button,
+                            x,
+                            y,
+                          )
+                        }
+                        letterboxStyles={letterboxStyles}
+                        pageTransitionSettings={transitionSettings}
+                        preloadCache={{
+                          getReadyBlob: preloadOrchestrator.getReadyBlob,
+                          getCachedBlobUrl: preloadOrchestrator.getCachedBlobUrl,
+                        }}
+                      />
+                    );
+                  })
+                )}
+              </div>
+            )}
 
             {/* Overlay for fade-through-color transition - z-[100] is ABOVE elements (z-[46]).
                 This covers the elements during page transition to hide the instant switch.
@@ -1834,11 +1920,13 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
       <TransitionPreviewOverlay
         videoKey={transitionPreview?.videoUrl}
         videoRef={transitionVideoRef}
-        isActive={Boolean(transitionPreview)}
-        isBuffering={isReverseBuffering}
+        isActive={Boolean(transitionPreview) && showTransitionVideo}
+        isBuffering={isTransitionBuffering}
+        isVideoReady={isTransitionVideoReady}
         showSpinner={true}
-        spinnerMessage='Preparing transition...'
         letterboxStyles={letterboxStyles}
+        isFadingOut={isFadingIn}
+        fadeOutDuration={transitionSettings.durationMs}
       />
 
       {/* Gallery Carousel Overlay */}
diff --git a/frontend/src/sw.ts b/frontend/src/sw.ts
index d1be976..2cd4e00 100644
--- a/frontend/src/sw.ts
+++ b/frontend/src/sw.ts
@@ -14,6 +14,7 @@ import type { PrecacheEntry, SerwistGlobalConfig } from 'serwist';
 import {
   CacheFirst,
   NetworkFirst,
+  NetworkOnly,
   Serwist,
   StaleWhileRevalidate,
 } from 'serwist';
@@ -85,6 +86,12 @@ const isCacheableRequest = (request: Request): boolean => {
   return false;
 };
 
+// Check if request has sw-bypass flag (skip SW caching)
+const hasBypassFlag = (request: Request): boolean => {
+  const url = new URL(request.url);
+  return url.searchParams.get('sw-bypass') === '1';
+};
+
 // Check if request is a video
 const isVideoRequest = (request: Request): boolean => {
   const url = new URL(request.url);
@@ -171,6 +178,12 @@ const serwist = new Serwist({
   clientsClaim: true,
   navigationPreload: true,
   runtimeCaching: [
+    // BYPASS HANDLER - Must be FIRST to intercept sw-bypass=1 requests
+    // These requests go directly to network without any caching or URL transformation
+    {
+      matcher: ({ request }) => hasBypassFlag(request),
+      handler: new NetworkOnly(),
+    },
     // Static assets (images, fonts, css, js) - Cache First
     // Uses 'assets' cache to match preloading (usePreloadOrchestrator stores here)
     {
@@ -212,6 +225,7 @@ const serwist = new Serwist({
       }),
     },
     // Videos - Cache First with Range Request support and storage key mapping
+    // Note: Bypass requests are already handled by the NetworkOnly handler above
     {
       matcher: ({ request }) => isVideoRequest(request),
       handler: new CacheFirst({
@@ -289,6 +303,7 @@ const serwist = new Serwist({
       }),
     },
     // Audio - Cache First with Range Request support and storage key mapping
+    // Note: Bypass requests are already handled by the NetworkOnly handler above
     {
       matcher: ({ request }) => isAudioRequest(request),
       handler: new CacheFirst({
@@ -369,6 +384,7 @@ const serwist = new Serwist({
     },
     // Dynamic assets (other cacheable, excluding video and audio) - Cache First
     // Uses 'assets' cache to match preloading (usePreloadOrchestrator stores here)
+    // Note: Bypass requests are already handled by the NetworkOnly handler above
     {
       matcher: ({ request }) =>
         isCacheableRequest(request) &&
diff --git a/frontend/src/types/preload.ts b/frontend/src/types/preload.ts
index 3a27505..b7f5ad1 100644
--- a/frontend/src/types/preload.ts
+++ b/frontend/src/types/preload.ts
@@ -25,6 +25,7 @@ export interface PreloadPageLink {
   transition?: {
     id: string;
     video_url?: string;
+    reverse_video_url?: string;
   };
 }