{"id":1712,"date":"2026-07-03T13:22:39","date_gmt":"2026-07-03T13:22:39","guid":{"rendered":"https:\/\/distinctiverepetition.com\/?page_id=1712"},"modified":"2026-07-17T16:46:47","modified_gmt":"2026-07-17T16:46:47","slug":"homepage-consectutive","status":"publish","type":"page","link":"https:\/\/distinctiverepetition.com\/","title":{"rendered":"Homepage 2026"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/distinctiverepetition.com\/?page_id=1712\" target=\"_blank\" rel=\"noreferrer noopener\"><\/a><\/p>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* ================= VIDEO BACKGROUND ================= *\/\n\n.desktop-video {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  object-fit: cover;\n  z-index: -999999;\n  pointer-events: none;\n}\n\n\/* MOBILE STAGE *\/\n\n.mobile-stage {\n  position: fixed;\n  inset: 0;\n  z-index: -999999;\n  pointer-events: none;\n}\n\n\/* MOBILE MEDIA LAYERS *\/\n\n#mobileGif,\n#mobileVideo {\n  position: fixed;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: none;\n  pointer-events: none;\n}\n\n\/* ACTIVE STATES *\/\n\n#mobileGif.active {\n  display: block;\n  z-index: -999999;\n}\n\n#mobileVideo.active {\n  display: block;\n  z-index: -999999;\n}\n\n\n\/* ================= UI ================= *\/\n\n.media-counter {\n  position: fixed;\n  bottom: 20px;\n  left: 40px;\n  z-index: -999;\n  font-size: 1rem;\n  font-family: inherit;\n  line-height: 1.5;\n}\n\n.media-back,\n.media-arrow {\n  position: fixed;\n  bottom: 20px;\n  z-index: -999;\n  font-family: inherit;\n  font-size: 1.5rem;\n  line-height: 1;\n  text-decoration: none;\n  color: inherit;\n  padding: 0 6px;\n}\n\n\n\/* ================= DESKTOP BREAKPOINTS ================= *\/\n\n@media (min-width: 1024px) {\n\n  .media-counter {\n    left: 60px;\n  }\n\n  .media-back {\n    right: 95px;\n  }\n\n  .media-arrow {\n    right: 75px;\n  }\n\n}\n\n\n@media (min-width: 1440px) {\n\n  .media-counter {\n    left: 135px;\n  }\n\n  .media-back {\n    right: 135px;\n  }\n\n  .media-arrow {\n    right: 115px;\n  }\n\n}\n\n\n@media (min-width: 1920px) {\n\n  .media-counter {\n    left: 160px;\n  }\n\n  .media-back {\n    right: 160px;\n  }\n\n  .media-arrow {\n    right: 140px;\n  }\n\n}\n\n\n\/* ================= MOBILE ================= *\/\n\n@media (max-width: 768px) {\n\n  .media-counter {\n    left: 50%;\n    transform: translateX(-50%);\n    text-align: center;\n  }\n\n\n  .media-back {\n    left: 20px;\n    right: auto;\n  }\n\n\n  .media-arrow {\n    right: 20px;\n    left: auto;\n  }\n\n\n  a.media-back,\n  a.media-arrow {\n    -webkit-tap-highlight-color: transparent;\n    color: #fff;\n  }\n\n}\n\n\n\/* ================= INVISIBLE HOTSPOTS ================= *\/\n\n.video-hotspot {\n  position: fixed;\n  top: 0;\n  z-index: 999999;\n  display: block;\n  background: transparent;\n  border: none;\n  text-decoration: none;\n}\n\n\n\/* LEFT HOTSPOT - HALF SCREEN *\/\n\n.hotspot-left {\n  left: 0;\n  width: 50vw;\n  height: 100px;\n}\n\n\n\/* RIGHT HOTSPOT - FLUSH RIGHT, 50PX WIDE *\/\n\n.hotspot-right {\n  right: 0;\n  width: 50px;\n  height: 100px;\n}\n\n\n\/* MOBILE HOTSPOT SIZING *\/\n\n@media (max-width: 768px) {\n\n  .hotspot-left {\n    width: 50vw;\n    height: 50px;\n  }\n\n\n  .hotspot-right {\n    right: 0;\n    width: 100px;\n    height: 50px;\n  }\n\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\n  const isDesktop = window.innerWidth >= 768;\n\n  const desktopVideos = [\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/01\/DR_AA_Sequence_V6.mp4\",\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/01\/DR_DT_V7.mp4\",\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/06\/DR_DT_V8.mp4\",\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_DT_V9.mp4\",\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_DT_V10.mp4\"\n  ];\n\n  const mobileVideos = [\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_MB_V20.mp4\",\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_MB_V21.mp4\",\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_MB_V22.mp4\",\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_MB_V8-1.mp4\",\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_MB_V11.mp4\",\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_MB_V17.mp4\",\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_MB_V18.mp4\",\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_MB_V15.mp4\",\n\"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/06\/DR_MB_V6.mp4\",\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_MB_V16.mp4\",\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_MB_V13-copy.mp4\",\n\"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_AA_MB_V2.mp4\",\n\"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_MB_V16-1.mp4\",\n\"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_MB_V5.mp4\",\n\"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/01\/DR_AA_MB_V2.mp4\"\n  ];\n\n  const mobileGIFs = [\n\"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_MB_V20_1.gif\",\n\"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_MB_V21.gif\",\n\"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_MB_V22.gif\",\n\"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_MB.gif\",\n\"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_MB_V17.gif\",\n\"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_MB_V18.gif\",\n\"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_MB_V15.gif\",\n\"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_MB_V16.gif\",\n\"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_MB_V13.gif\",\n\"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_MB_V16-1.gif\",\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/01\/DR_MB_Gif_1.gif\",\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/01\/DR_MB_Gif_2.gif\",\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/01\/DR_MB_Gif_3.gif\",\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/01\/DR_MB_Gif_4.gif\",\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/01\/DR_MB_Gif_5.gif\",\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/06\/DR_MB_Gif_6.gif\"\n  ];\n\n  let index = 0;\n\n  const counter = document.getElementById(\"mediaCounter\");\n  const nextBtn = document.getElementById(\"mediaArrow\");\n  const backBtn = document.getElementById(\"mediaBack\");\n\n\n  function updateCounter(total) {\n    if (!counter) return;\n    counter.textContent = `${index + 1} \/ ${total}`;\n  }\n\n\n  function enableLoop(video) {\n\n    if (!video || video.dataset.loopReady) return;\n\n    video.dataset.loopReady = \"true\";\n\n    video.addEventListener(\"ended\", function () {\n      video.currentTime = 0;\n      video.play().catch(() => {});\n    });\n\n  }\n\n\n  function resetMobileLayers() {\n\n    const video = document.getElementById(\"mobileVideo\");\n    const gif = document.getElementById(\"mobileGif\");\n\n    if (!video || !gif) return;\n\n    video.pause();\n\n    video.removeAttribute(\"src\");\n\n    video.classList.remove(\"active\");\n    gif.classList.remove(\"active\");\n\n  }\n\n\n  function loadDesktop(i) {\n\n    const video = document.getElementById(\"desktopVideo\");\n\n    if (!video) return;\n\n    const total = desktopVideos.length;\n\n    enableLoop(video);\n\n    video.src = desktopVideos[i % total];\n\n    video.play().catch(() => {});\n\n    updateCounter(total);\n\n  }\n\n\n  function loadMobile(i) {\n\n    const video = document.getElementById(\"mobileVideo\");\n    const gif = document.getElementById(\"mobileGif\");\n\n    if (!video || !gif) return;\n\n    resetMobileLayers();\n\n    const total = mobileVideos.length;\n\n\n    \/\/ Keep GIF loaded but do not display it initially\n    gif.src = mobileGIFs[i % mobileGIFs.length];\n\n\n    enableLoop(video);\n\n\n    video.src = mobileVideos[i % mobileVideos.length];\n\n\n    video.play()\n      .then(() => {\n\n        video.classList.add(\"active\");\n        gif.classList.remove(\"active\");\n\n      })\n      .catch(() => {\n\n        \/\/ Only use GIF if video actually fails\n\n        video.classList.remove(\"active\");\n        gif.classList.add(\"active\");\n\n      });\n\n\n    updateCounter(total);\n\n  }\n\n\n  function load(i) {\n\n    isDesktop ? loadDesktop(i) : loadMobile(i);\n\n  }\n\n\n  function next() {\n\n    const total = isDesktop\n      ? desktopVideos.length\n      : mobileVideos.length;\n\n    index = (index + 1) % total;\n\n    load(index);\n\n  }\n\n\n  function prev() {\n\n    const total = isDesktop\n      ? desktopVideos.length\n      : mobileVideos.length;\n\n    index = (index - 1 + total) % total;\n\n    load(index);\n\n  }\n\n\n  load(index);\n\n\n  nextBtn?.addEventListener(\"click\", e => {\n    e.preventDefault();\n    next();\n  });\n\n\n  backBtn?.addEventListener(\"click\", e => {\n    e.preventDefault();\n    prev();\n  });\n\n\n});\n<\/script>\n\n<div id=\"mediaCounter\" class=\"media-counter\"><\/div>\n\n<a href=\"#\" id=\"mediaBack\" class=\"media-back\">\u2190<\/a>\n<a href=\"#\" id=\"mediaArrow\" class=\"media-arrow\">\u2192<\/a>\n\n<video id=\"desktopVideo\" class=\"desktop-video\" muted=\"\" playsinline=\"\" webkit-playsinline=\"\" autoplay=\"\" preload=\"auto\" disablepictureinpicture=\"\">\n<\/video>\n\n<div class=\"mobile-stage\">\n  <img id=\"mobileGif\" class=\"mobile-gif\" alt=\"\">\n\n  <video id=\"mobileVideo\" muted=\"\" playsinline=\"\" webkit-playsinline=\"\" autoplay=\"\" preload=\"auto\" disablepictureinpicture=\"\">\n  <\/video>\n<\/div>\n\n<a class=\"video-hotspot hotspot-left\" href=\"https:\/\/distinctiverepetition.com\/\" aria-label=\"Left menu\"><\/a>\n\n<a class=\"video-hotspot hotspot-right\" href=\"https:\/\/distinctiverepetition.com\/?page_id=2\" aria-label=\"Right menu\"><\/a>\n","protected":false},"excerpt":{"rendered":"<p>\u2190 \u2192<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1712","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/distinctiverepetition.com\/index.php?rest_route=\/wp\/v2\/pages\/1712","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/distinctiverepetition.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/distinctiverepetition.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/distinctiverepetition.com\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/distinctiverepetition.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1712"}],"version-history":[{"count":0,"href":"https:\/\/distinctiverepetition.com\/index.php?rest_route=\/wp\/v2\/pages\/1712\/revisions"}],"wp:attachment":[{"href":"https:\/\/distinctiverepetition.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1712"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}