<!-- CMPTV MAIN DISPLAY MODULE - RESIZED TO 1125x 632 -->
<div id="cmptvMainZoneDynamic" style="
  width:100%;
  aspect-ratio:1125/632;
   position:relative;
  overflow:hidden;
  background:#000;
  font-family:Arial, Helvetica, sans-serif;
  box-sizing:border-box;
">

  <!-- Always-visible background layers -->
  <div id="cmptvBgLayerA" style="
    position:absolute;
    inset:0;
    background:
      linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(0,0,0,0.50)),
      url('https://communitymarketplace.ca/images/pagephotos/8/1206/4164f13a985c86ebdd410146.jpg') center center / cover no-repeat;
    opacity:1;
    transform:scale(1.06);
    z-index:1;
    will-change:opacity, transform, background-image, background-position;
  "></div>

  <div id="cmptvBgLayerB" style="
    position:absolute;
    inset:0;
    background:
      linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(0,0,0,0.50)),
      url('https://communitymarketplace.ca/images/pagephotos/8/1206/4139689b84da4e31786ce97e.jpg') center center / cover no-repeat;
    opacity:0;
    transform:scale(1.10);
    z-index:2;
    will-change:opacity, transform, background-image, background-position;
  "></div>

  <!-- Title -->
  <div id="cmptvMainHeadline" style="
    position:absolute;
    bottom:143px;
    left:2%;
    width:95%;
    height:40px;
    background-color:rgba(0,102,204,0.48);
    color:#fff;
    font-size:28px;
    font-weight:bold;
    text-transform:uppercase;
    padding:0 19px;
    line-height:40px;
    text-align:left;
    text-shadow:1px 1px 4px #000;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    box-sizing:border-box;
    z-index:10;
    opacity:0;
    clip-path:inset(0 100% 0 0);
    will-change:opacity, clip-path;
  ">
    <span style="position:relative; top:2px; display:block;">Loading title...</span>
  </div>

  <!-- Description -->
  <div id="cmptvMainDescription" style="
    position:absolute;
    bottom:32px;
    left:2%;
    width:95%;
    height:97px;
    min-height:97px;
    max-height:97px;
    background-color:rgba(255,255,255,0.52);
    color:#000;
    font-size:35px;
    font-weight:500;
    padding:5px 19px 5px 19px;
    line-height:41px;
    letter-spacing:-0.2px;
    overflow:hidden;
    box-sizing:border-box;
    z-index:10;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    opacity:0;
    clip-path:inset(0 100% 0 0);
    will-change:opacity, clip-path;
  ">Loading description...</div>
</div>

<script>
(function () {
  const posts = [
    {
      title: "MARKETPLACE EVENT AT LA FITNESS OSHAWA",
      desc: "Marketplace Event at LA Fitness Oshawa was a huge success and created strong community visibility for local support initiatives.",
      images: [
        "https://communitymarketplace.ca/images/pagephotos/8/1206/4164f13a985c86ebdd410146.jpg",
        "https://communitymarketplace.ca/images/pagephotos/8/1206/4139689b84da4e31786ce97e.jpg",
        "https://communitymarketplace.ca/images/pagephotos/8/1206/9890959785f3e1d236d5d41a.jpg",
        "https://communitymarketplace.ca/images/pagephotos/8/1206/708dceb9699df3549516f337.jpg"
      ]
    },
  ];

  const POST_DURATION = 15000;
  const IMAGE_OVERLAP_FADE = 520;

  /* Slower bar gradient travel */
  const TEXT_REVEAL_IN_TITLE = 2200;
  const TEXT_REVEAL_IN_DESC = 2500;
  const TEXT_REVEAL_OUT_TITLE = 1900;
  const TEXT_REVEAL_OUT_DESC = 2200;

  /* Strong bar fade */
  const TEXT_FADE_IN_TITLE = 1450;
  const TEXT_FADE_IN_DESC = 1650;
  const TEXT_FADE_OUT_TITLE = 1200;
  const TEXT_FADE_OUT_DESC = 1400;

  const bgA = document.getElementById("cmptvBgLayerA");
  const bgB = document.getElementById("cmptvBgLayerB");
  const titleBox = document.getElementById("cmptvMainHeadline");
  const titleSpan = titleBox.querySelector("span");
  const descBox = document.getElementById("cmptvMainDescription");

  let showingA = true;
  let postIndex = 0;
  let imageStepTimer = null;
  let postTimer = null;
  let motionSeed = 0;

  const motionPatterns = [
    { start: 1.14, end: 1.03, pos: "46% 48%" },
    { start: 1.03, end: 1.14, pos: "54% 52%" },
    { start: 1.12, end: 1.04, pos: "50% 42%" },
    { start: 1.04, end: 1.13, pos: "50% 58%" },
    { start: 1.13, end: 1.05, pos: "42% 50%" },
    { start: 1.05, end: 1.13, pos: "58% 50%" },
    { start: 1.15, end: 1.04, pos: "47% 45%" },
    { start: 1.04, end: 1.15, pos: "53% 55%" }
  ];

  function preloadImages() {
    const seen = {};
    posts.forEach(post => {
      (post.images || []).forEach(url => {
        if (!url || seen[url]) return;
        seen[url] = true;
        const img = new Image();
        img.src = url;
      });
    });
  }

  function truncateText(text, maxChars) {
    if (!text) return "";
    const clean = String(text).replace(/\s+/g, " ").trim();
    if (clean.length <= maxChars) return clean;
    return clean.substring(0, maxChars).replace(/\s+\S*$/, "") + "...";
  }

  function makeBg(url, pos) {
    return "linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(0,0,0,0.50)), url('" + url + "') " + pos + " / cover no-repeat";
  }

  function getVisibleLayer() {
    return showingA ? bgA : bgB;
  }

  function getHiddenLayer() {
    return showingA ? bgB : bgA;
  }

  function nextMotion() {
    const pattern = motionPatterns[motionSeed % motionPatterns.length];
    motionSeed++;
    return pattern;
  }

  function instantSetVisible(url, slotDuration) {
    const visible = getVisibleLayer();
    const hidden = getHiddenLayer();
    const motion = nextMotion();

    visible.style.transition = "none";
    visible.style.background = makeBg(url, motion.pos);
    visible.style.opacity = "1";
    visible.style.transform = "scale(" + motion.start + ")";
    void visible.offsetWidth;
    visible.style.transition = "transform " + slotDuration + "ms ease-out";
    visible.style.transform = "scale(" + motion.end + ")";

    hidden.style.transition = "none";
    hidden.style.opacity = "0";
  }

  function transitionToImage(url, slotDuration) {
    const visible = getVisibleLayer();
    const hidden = getHiddenLayer();
    const motionIn = nextMotion();
    const motionOut = nextMotion();

    hidden.style.transition = "none";
    hidden.style.background = makeBg(url, motionIn.pos);
    hidden.style.opacity = "0";
    hidden.style.transform = "scale(" + motionIn.start + ")";
    void hidden.offsetWidth;

    hidden.style.transition =
      "opacity " + IMAGE_OVERLAP_FADE + "ms ease-in-out, transform " + slotDuration + "ms ease-out";
    hidden.style.opacity = "1";
    hidden.style.transform = "scale(" + motionIn.end + ")";

    visible.style.transition =
      "opacity " + IMAGE_OVERLAP_FADE + "ms ease-in-out, transform " + slotDuration + "ms ease-out";
    visible.style.opacity = "1";
    visible.style.transform = "scale(" + motionOut.end + ")";

    setTimeout(() => {
      visible.style.transition = "none";
      visible.style.opacity = "0";
      showingA = !showingA;
    }, IMAGE_OVERLAP_FADE + 30);
  }

  function revealTextLeftToRight() {
    titleBox.style.transition = "none";
    descBox.style.transition = "none";

    titleBox.style.opacity = "0";
    descBox.style.opacity = "0";
    titleBox.style.clipPath = "inset(0 100% 0 0)";
    descBox.style.clipPath = "inset(0 100% 0 0)";
    void titleBox.offsetWidth;

    titleBox.style.transition =
      "clip-path " + TEXT_REVEAL_IN_TITLE + "ms ease-in-out, opacity " + TEXT_FADE_IN_TITLE + "ms ease-in-out";
    descBox.style.transition =
      "clip-path " + TEXT_REVEAL_IN_DESC + "ms ease-in-out, opacity " + TEXT_FADE_IN_DESC + "ms ease-in-out";

    titleBox.style.opacity = "1";
    descBox.style.opacity = "1";
    titleBox.style.clipPath = "inset(0 0 0 0)";
    descBox.style.clipPath = "inset(0 0 0 0)";
  }

  function hideTextBackToStart(cb) {
    titleBox.style.transition =
      "clip-path " + TEXT_REVEAL_OUT_TITLE + "ms ease-in-out, opacity " + TEXT_FADE_OUT_TITLE + "ms ease-in-out";
    descBox.style.transition =
      "clip-path " + TEXT_REVEAL_OUT_DESC + "ms ease-in-out, opacity " + TEXT_FADE_OUT_DESC + "ms ease-in-out";

    titleBox.style.clipPath = "inset(0 100% 0 0)";
    descBox.style.clipPath = "inset(0 100% 0 0)";
    titleBox.style.opacity = "0";
    descBox.style.opacity = "0";

    setTimeout(() => {
      if (cb) cb();
    }, TEXT_REVEAL_OUT_DESC + 140);
  }

  function setPostText(post) {
    titleSpan.textContent = truncateText(post.title || "Community Update", 90);
    descBox.textContent = truncateText(post.desc || "Latest community update.", 108);
  }

  function schedulePostImages(post) {
    if (imageStepTimer) {
      clearInterval(imageStepTimer);
      imageStepTimer = null;
    }

    const images = Array.isArray(post.images) && post.images.length ? post.images : [posts[0].images[0]];
    const count = images.length;
    const perImageSlot = POST_DURATION / count;

    instantSetVisible(images[0], perImageSlot);

    if (count === 1) return;

    let imgIndex = 0;
    imageStepTimer = setInterval(() => {
      imgIndex = (imgIndex + 1) % count;
      transitionToImage(images[imgIndex], perImageSlot);
    }, perImageSlot);
  }

  function startPost(idx, isInitial) {
    const post = posts[idx];
    if (!post) return;

    if (isInitial) {
      setPostText(post);
      schedulePostImages(post);
      setTimeout(revealTextLeftToRight, 240);
    } else {
      hideTextBackToStart(() => {
        setPostText(post);
        schedulePostImages(post);
        setTimeout(revealTextLeftToRight, 320);
      });
    }
  }

  function nextPost() {
    postIndex = (postIndex + 1) % posts.length;
    startPost(postIndex, false);
  }

  preloadImages();
  startPost(postIndex, true);
  postTimer = setInterval(nextPost, POST_DURATION);
})();
</script>