{"id":168,"date":"2026-02-25T20:10:04","date_gmt":"2026-02-25T20:10:04","guid":{"rendered":"https:\/\/grossenoix.com\/?page_id=168"},"modified":"2026-02-25T22:21:55","modified_gmt":"2026-02-25T22:21:55","slug":"homecode","status":"publish","type":"page","link":"https:\/\/grossenoix.com\/index.php\/homecode\/","title":{"rendered":"homecode"},"content":{"rendered":"\n\t<div id=\"gap-559109962\" class=\"gap-element clearfix\" style=\"display:block; height:auto;\">\n\t\t\n<style>\n#gap-559109962 {\n  padding-top: 60px;\n}\n<\/style>\n\t<\/div>\n\t\n\n\n\n<!doctype html>\n<html lang=\"fr\">\n<head>\n  <meta charset=\"utf-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" \/>\n  <title>TTRADE \u2014 UNIVERSE<\/title>\n\n  <style>\n    :root{\n      --bg:#fff;\n      --txt:#000;\n      --muted:rgba(0,0,0,.72);\n      --line:rgba(0,0,0,.10);\n\n      --pad: clamp(16px, 2.6vw, 44px);\n      --radius: 18px;\n\n      --btn: rgba(0,0,0,.06);\n      --btnb: rgba(0,0,0,.14);\n\n      --navH: 0px;\n      --topGap: clamp(20px, 2.6vw, 44px);\n\n      --dockAR: 2 \/ 3;\n\n      --wrapMax: 1180px;\n      --dockMax: 720px;\n\n      color-scheme: light;\n    }\n\n    *{box-sizing:border-box;}\n    html,body{height:100%;}\n    body{\n      margin:0;\n      font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;\n      background:var(--bg);\n      color:var(--txt);\n      overflow-x:hidden;\n      scroll-snap-type: y proximity;\n    }\n    a{color:inherit}\n    html { scroll-behavior: smooth; }\n    @media (prefers-reduced-motion: reduce){ html { scroll-behavior: auto; } }\n\n    .section{\n      scroll-snap-align: start;\n      scroll-snap-stop: normal;\n      position:relative;\n      min-height:100vh;\n      isolation:isolate;\n      border-bottom:1px solid var(--line);\n\n      padding: var(--pad);\n\n      display:flex;\n      align-items:stretch;\n      justify-content:center;\n    }\n\n    .wrap{\n      width: min(100%, var(--wrapMax));\n      margin-inline:auto;\n\n      display:grid;\n      gap: clamp(14px, 2.2vw, 28px);\n\n      grid-template-columns: 1fr;\n      grid-template-rows: auto auto;\n      align-items:start;\n      justify-items:center;\n\n      min-height: calc(100vh - (var(--pad) * 2));\n    }\n\n    @media (min-width: 980px){\n      .wrap{\n        grid-template-columns: 1fr 1fr;\n        grid-template-rows: 1fr;\n        align-items:center;\n        justify-items:center;\n      }\n    }\n\n    \/* \u2705 Hero spacing under nav *\/\n    #hero .content{\n      padding-top: calc(var(--navH) + var(--topGap));\n    }\n\n    \/* \u2705 HERO: bottom-align only *\/\n    #hero .wrap{\n      grid-template-columns: 1fr;\n      grid-template-rows: 1fr;          \/* single cell *\/\n      align-items: end;                 \/* bottom inside wrap *\/\n      justify-items: center;\n    }\n    #hero .content{\n      grid-column: 1;\n      grid-row: 1;\n      align-self: end;                  \/* bottom *\/\n      padding-top: calc(var(--navH) + var(--topGap));\n      padding-bottom: clamp(16px, 2.2vw, 28px); \/* small breathing room *\/\n    }\n\n    .bgVideo{\n      position:absolute;\n      inset:0;\n      width:100%;\n      height:100%;\n      object-fit:cover;\n      z-index:-3;\n      opacity:.58;\n      filter: saturate(1.04) contrast(1.04);\n      transform: translate3d(0,0,0);\n    }\n\n    .overlay{\n      position:absolute;\n      inset:0;\n      z-index:-2;\n      background:\n        radial-gradient(1200px 600px at 25% 20%, rgba(255,255,255,.10), rgba(255,255,255,.78)),\n        linear-gradient(to top, rgba(255,255,255,.92), rgba(255,255,255,.30));\n      pointer-events:none;\n    }\n\n    #fx{\n      position:fixed;\n      inset:0;\n      width:100%;\n      height:100%;\n      pointer-events:none;\n      z-index:999;\n    }\n\n    .mediaDock{\n      grid-column: 1;\n      grid-row: 1;\n\n      width: 100%;\n      max-width: min(92vw, var(--dockMax));\n      aspect-ratio: var(--dockAR);\n      max-height: min(74vh, 860px);\n\n      margin-top: calc(var(--navH) + 10px);\n\n      background: transparent;\n      border: 0;\n      border-radius: 0;\n      overflow: hidden;\n\n      position: relative;\n      align-self: center;\n      justify-self: center;\n    }\n\n    @media (min-width: 980px){\n      .mediaDock{\n        grid-column: 2;\n        grid-row: 1;\n        margin-top: 0;\n\n        height: min(calc(100vh - (var(--pad) * 2)), 860px);\n        width: auto;\n        aspect-ratio: var(--dockAR);\n        max-width: min(42vw, var(--dockMax));\n        max-height: min(calc(100vh - (var(--pad) * 2)), 860px);\n\n        align-self: center;\n        justify-self: center;\n      }\n    }\n\n    .dockLayer{\n      position:absolute;\n      inset:0;\n      width:100%;\n      height:100%;\n      object-fit: contain;\n      object-position: center;\n      opacity:0;\n      transform: scale(1.01);\n      transition: opacity 520ms ease, transform 920ms ease;\n    }\n    .dockLayer.isOn{\n      opacity:1;\n      transform: scale(1);\n    }\n\n    .content{\n      grid-column: 1;\n      grid-row: 2;\n\n      width: 100%;\n      max-width: 900px;\n\n      justify-self:center;\n      align-self:center;\n\n      text-align:center;\n      padding-bottom: calc(var(--pad) * 0.6);\n    }\n\n    @media (min-width: 980px){\n      .content{\n        grid-column: 1;\n        grid-row: 1;\n        padding-right: 0;\n      }\n    }\n\n    .kicker{\n      letter-spacing:.14em;\n      text-transform:uppercase;\n      font-size: 12px;\n      color: rgba(0,0,0,.70);\n      margin:0 0 12px;\n    }\n    h1,h2{\n      margin:0 0 10px;\n      letter-spacing:-0.03em;\n      line-height:1.06;\n    }\n    h1{font-size: clamp(34px, 4.3vw, 66px);}\n    h2{font-size: clamp(28px, 3.2vw, 48px);}\n    p{\n      margin: 0 0 18px;\n      max-width: 62ch;\n      line-height:1.55;\n      color: var(--muted);\n      font-size: clamp(15px, 1.2vw, 18px);\n      margin-inline:auto;\n    }\n\n    .btnRow{\n      display:flex;\n      gap:10px;\n      flex-wrap:wrap;\n      margin-top: 14px;\n      justify-content:center;\n    }\n    .btn{\n      display:inline-flex;\n      align-items:center;\n      gap:10px;\n      padding: 10px 14px;\n      border-radius: 999px;\n      text-decoration:none;\n      border:1px solid var(--btnb);\n      background: var(--btn);\n      backdrop-filter: blur(10px);\n      -webkit-backdrop-filter: blur(10px);\n      font-size: 14px;\n      letter-spacing:.02em;\n    }\n    .btn:hover{border-color:rgba(0,0,0,.34)}\n    .dot{\n      width:8px;height:8px;border-radius:50%;\n      background: rgba(0,0,0,.70);\n      display:inline-block;\n    }\n\n    .nav{\n      position:fixed;\n      z-index:10;\n\n      display:flex;\n      gap:8px;\n      padding:8px;\n      border-radius: 999px;\n      border:1px solid rgba(0,0,0,.18);\n      background: rgba(255,255,255,.78);\n      backdrop-filter: blur(10px);\n      -webkit-backdrop-filter: blur(10px);\n\n      left:50%;\n      top: 12px;\n      transform: translateX(-50%);\n\n      max-width: calc(100vw - 24px);\n      overflow:auto;\n      -webkit-overflow-scrolling: touch;\n      scrollbar-width:none;\n    }\n    .nav::-webkit-scrollbar{display:none;}\n\n    .nav a{\n      opacity:.68;\n      text-decoration:none;\n      padding:8px 10px;\n      border-radius: 999px;\n      font-size: 13px;\n      letter-spacing:.02em;\n      border: 1px solid transparent;\n      white-space:nowrap;\n    }\n    .nav a.isActive{\n      opacity:1;\n      border-color: rgba(0,0,0,.22);\n      background: rgba(0,0,0,.08);\n    }\n\n    .section.footer{ min-height: 72vh; }\n    .footerGrid{\n      display:grid;\n      grid-template-columns: 1fr 1fr;\n      gap: clamp(18px, 3vw, 36px);\n      margin-top: 18px;\n\n      max-width: 880px;\n      margin-inline:auto;\n    }\n    @media (max-width: 980px){\n      .footerGrid{ grid-template-columns: 1fr; }\n    }\n    .footCard{\n      border: 1px solid rgba(0,0,0,.12);\n      border-radius: var(--radius);\n      background: rgba(0,0,0,.04);\n      backdrop-filter: blur(10px);\n      -webkit-backdrop-filter: blur(10px);\n      padding: 16px 16px;\n      text-align:center;\n    }\n    .footLabel{\n      font-size: 12px;\n      letter-spacing:.14em;\n      text-transform: uppercase;\n      color: rgba(0,0,0,.55);\n      margin: 0 0 10px;\n    }\n    .footLinks{\n      display:flex;\n      flex-wrap:wrap;\n      gap:10px;\n      justify-content:center;\n    }\n    .footSmall{\n      margin-top: 14px;\n      font-size: 12px;\n      color: rgba(0,0,0,.55);\n      text-align:center;\n    }\n\n    @media (prefers-reduced-motion: reduce){\n      .dockLayer{transition:none;}\n    }\n  <\/style>\n<\/head>\n\n<body>\n  <canvas id=\"fx\"><\/canvas>\n\n  <div class=\"nav\" aria-label=\"Sections\">\n    <a href=\"#hero\" data-nav=\"hero\">Intro<\/a>\n    <a href=\"#bull\" data-nav=\"bull\">Bull<\/a>\n    <a href=\"#bear\" data-nav=\"bear\">Bear<\/a>\n    <a href=\"#volatile\" data-nav=\"volatile\">Volatile<\/a>\n    <a href=\"#liquidity-pool\" data-nav=\"liquidity-pool\">LiquidPool<\/a>\n  <\/div>\n\n  <!-- HERO (NO DOCK, BOTTOM-ALIGNED CONTENT) -->\n  <section class=\"section\" id=\"hero\"\n    data-bg='[\n      {\"type\":\"video\",\"src\":\"https:\/\/grossenoix.com\/wp-content\/uploads\/2026\/02\/UNIVERSE-COLLECTION-eclipse-moon.mp4\"}\n    ]'\n  >\n    <video class=\"bgVideo\" muted loop playsinline preload=\"metadata\"><\/video>\n    <div class=\"overlay\"><\/div>\n\n    <div class=\"wrap\">\n      <div class=\"content\">\n        <p class=\"kicker\">\/\/ Introducing<\/p>\n        <h1>TTRADE UNIVERSE<\/h1>\n        <p>Built For The EveryDay Traders<\/p>\n        <div class=\"btnRow\">\n          <a class=\"btn\" href=\"#bull\"><span class=\"dot\"><\/span> Next<\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- BULL -->\n  <section class=\"section\" id=\"bull\"\n    data-bg='[\n      {\"type\":\"video\",\"src\":\"https:\/\/grossenoix.com\/wp-content\/uploads\/2026\/02\/Firefly-Use-the-provided-isolated-bull-and-eclipse-moon-image-as-the-base-and-opening-frame.-Animate-1.mp4\"}\n    ]'\n    data-dock='[\n      {\"type\":\"image\",\"src\":\"https:\/\/grossenoix.com\/wp-content\/uploads\/2026\/02\/TEE02_BEAR.png\"},\n      {\"type\":\"image\",\"src\":\"https:\/\/grossenoix.com\/wp-content\/uploads\/2026\/02\/TEE02_BEAR.png\"}\n    ]'\n  >\n    <video class=\"bgVideo\" muted loop playsinline preload=\"metadata\"><\/video>\n    <div class=\"overlay\"><\/div>\n\n    <div class=\"wrap\">\n      <div class=\"mediaDock\" aria-label=\"Data-doc media\">\n        <img class=\"dockLayer isOn\" data-layer=\"1\" alt=\"\" \/>\n        <img class=\"dockLayer\" data-layer=\"2\" alt=\"\" \/>\n        <video class=\"dockLayer\" data-layer=\"v\" muted loop playsinline preload=\"metadata\"><\/video>\n      <\/div>\n\n      <div class=\"content\">\n        <h1>Bull<\/h1>\n        <p>Upward structure \/\/ Controlled force<\/p>\n        <div class=\"btnRow\">\n          <a class=\"btn\" href=\"#bear\"><span class=\"dot\"><\/span> Next<\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- BEAR -->\n  <section class=\"section\" id=\"bear\"\n    data-bg='[\n      {\"type\":\"video\",\"src\":\"https:\/\/grossenoix.com\/wp-content\/uploads\/2026\/02\/Firefly-Usbear01e-the-provided-UNIVERSE-COLLECTION-eclipse-moon-logo-image-as-the-ONLY-visual-source.__Bac.mp4\"}\n    ]'\n    data-dock='[\n      {\"type\":\"image\",\"src\":\"https:\/\/grossenoix.com\/wp-content\/uploads\/2026\/02\/TEE01_BEAR.png\"},\n      {\"type\":\"image\",\"src\":\"https:\/\/grossenoix.com\/wp-content\/uploads\/2026\/02\/TEE02_BEAR.png\"}\n    ]'\n  >\n    <video class=\"bgVideo\" muted loop playsinline preload=\"metadata\"><\/video>\n    <div class=\"overlay\"><\/div>\n\n    <div class=\"wrap\">\n      <div class=\"mediaDock\" aria-label=\"Data-doc media\">\n        <img class=\"dockLayer isOn\" data-layer=\"1\" alt=\"\" \/>\n        <img class=\"dockLayer\" data-layer=\"2\" alt=\"\" \/>\n        <video class=\"dockLayer\" data-layer=\"v\" muted loop playsinline preload=\"metadata\"><\/video>\n      <\/div>\n\n      <div class=\"content\">\n        <h2>Bear<\/h2>\n        <p>Downward pressure \/\/ Calculated control.<\/p>\n        <div class=\"btnRow\">\n          <a class=\"btn\" href=\"#volatile\"><span class=\"dot\"><\/span> Next<\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- VOLATILE -->\n  <section class=\"section\" id=\"volatile\"\n    data-bg='[\n      {\"type\":\"video\",\"src\":\"https:\/\/grossenoix.com\/wp-content\/uploads\/2026\/02\/UNIVERSE-COLLECTION-eclipse-moon.mp4\"}\n    ]'\n    data-dock='[\n      {\"type\":\"image\",\"src\":\"https:\/\/grossenoix.com\/wp-content\/uploads\/2026\/02\/ALLOVER-1.png\"}\n    ]'\n  >\n    <video class=\"bgVideo\" muted loop playsinline preload=\"metadata\"><\/video>\n    <div class=\"overlay\"><\/div>\n\n    <div class=\"wrap\">\n      <div class=\"mediaDock\" aria-label=\"Data-doc media\">\n        <img class=\"dockLayer isOn\" data-layer=\"1\" alt=\"\" \/>\n        <img class=\"dockLayer\" data-layer=\"2\" alt=\"\" \/>\n        <video class=\"dockLayer\" data-layer=\"v\" muted loop playsinline preload=\"metadata\"><\/video>\n      <\/div>\n\n      <div class=\"content\">\n        <h2>Volatile<\/h2>\n        <p>Unstable conditions \/\/ Limited Times Offer<\/p>\n        <div class=\"btnRow\">\n          <a class=\"btn\" href=\"#liquidity-pool\"><span class=\"dot\"><\/span> Next<\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- LIQUIDITY POOL -->\n  <section class=\"section\" id=\"liquidity-pool\"\n    data-bg='[\n      {\"type\":\"video\",\"src\":\"https:\/\/grossenoix.com\/wp-content\/uploads\/2026\/02\/UNIVERSE-COLLECTION-eclipse-moon.mp4\"}\n    ]'\n    data-dock='[\n      {\"type\":\"image\",\"src\":\"https:\/\/grossenoix.com\/wp-content\/uploads\/2026\/02\/SNAKE.png\"}\n    ]'\n  >\n    <video class=\"bgVideo\" muted loop playsinline preload=\"metadata\"><\/video>\n    <div class=\"overlay\"><\/div>\n\n    <div class=\"wrap\">\n      <div class=\"mediaDock\" aria-label=\"Data-doc media\">\n        <img class=\"dockLayer isOn\" data-layer=\"1\" alt=\"\" \/>\n        <img class=\"dockLayer\" data-layer=\"2\" alt=\"\" \/>\n        <video class=\"dockLayer\" data-layer=\"v\" muted loop playsinline preload=\"metadata\"><\/video>\n      <\/div>\n\n      <div class=\"content\">\n        <h2>Liquidity Pool<\/h2>\n        <p>A shared structure that delivers depth and execution.<\/p>\n        <div class=\"btnRow\">\n          <a class=\"btn\" href=\"#footer\"><span class=\"dot\"><\/span> Next<\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- FOOTER -->\n  <section class=\"section footer\" id=\"footer\"\n    data-bg='[\n      {\"type\":\"video\",\"src\":\"https:\/\/grossenoix.com\/wp-content\/uploads\/2026\/02\/UNIVERSE-COLLECTION-eclipse-moon.mp4\"}\n    ]'\n    data-dock='[\n      {\"type\":\"image\",\"src\":\"https:\/\/grossenoix.com\/wp-content\/uploads\/2026\/02\/000.png\"},\n      {\"type\":\"image\",\"src\":\"https:\/\/grossenoix.com\/wp-content\/uploads\/2026\/02\/000.png\"}\n    ]'\n  >\n    <video class=\"bgVideo\" muted loop playsinline preload=\"metadata\"><\/video>\n    <div class=\"overlay\"><\/div>\n\n    <div class=\"wrap\">\n      <div class=\"mediaDock\" aria-label=\"Data-doc media\">\n        <img class=\"dockLayer isOn\" data-layer=\"1\" alt=\"\" \/>\n        <img class=\"dockLayer\" data-layer=\"2\" alt=\"\" \/>\n        <video class=\"dockLayer\" data-layer=\"v\" muted loop playsinline preload=\"metadata\"><\/video>\n      <\/div>\n\n      <div class=\"content\">\n        <p class=\"kicker\">\/\/ TTRADE<\/p>\n        <h2>Universe<\/h2>\n        <p>A structured closing block engineered<\/p>\n\n        <div class=\"footerGrid\">\n          <div class=\"footCard\">\n            <p class=\"footLabel\">Navigation<\/p>\n            <div class=\"footLinks\">\n              <a class=\"btn\" href=\"#hero\"><span class=\"dot\"><\/span> Universe<\/a>\n              <a class=\"btn\" href=\"#bull\"><span class=\"dot\"><\/span> Bull<\/a>\n              <a class=\"btn\" href=\"#bear\"><span class=\"dot\"><\/span> Bear<\/a>\n              <a class=\"btn\" href=\"#volatile\"><span class=\"dot\"><\/span> Volatile<\/a>\n              <a class=\"btn\" href=\"#liquidity-pool\"><span class=\"dot\"><\/span> Liquidity Pool<\/a>\n            <\/div>\n          <\/div>\n\n          <div class=\"footCard\">\n            <p class=\"footLabel\">Signals<\/p>\n            <p style=\"margin:0; color: var(--muted); line-height:1.55;\">\n              Built For The EveryDay Traders \/\/ structured, controlled and maximised.\n            <\/p>\n            <div class=\"btnRow\" style=\"margin-top:12px;\">\n              <a class=\"btn\" href=\"#hero\"><span class=\"dot\"><\/span> Back to top<\/a>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"footSmall\">\u00a9 2026 TTRADE \u2014 TTRADE UNIVERSE<\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n<script>\n(() => {\n  const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n  \/* ==========================\n     \u2705 Fullscreen RANDOM DISSOLVE (intense)\n     ========================== *\/\n  const fx = document.getElementById('fx');\n  const ctx = fx.getContext('2d', { alpha: true });\n\n  const DPR = () => Math.max(1, Math.min(2, window.devicePixelRatio || 1));\n  const fitFX = () => {\n    const dpr = DPR();\n    fx.width = Math.floor(window.innerWidth * dpr);\n    fx.height = Math.floor(window.innerHeight * dpr);\n    fx.style.width = window.innerWidth + 'px';\n    fx.style.height = window.innerHeight + 'px';\n    ctx.setTransform(dpr,0,0,dpr,0,0);\n  };\n  window.addEventListener('resize', fitFX, { passive:true });\n  fitFX();\n\n  let dissolveRAF = null;\n  let tiles = [];\n  let t0 = 0;\n\n  const rand = (a,b) => a + Math.random() * (b - a);\n\n  const buildTiles = () => {\n    tiles.length = 0;\n    const W = window.innerWidth;\n    const H = window.innerHeight;\n\n    const target = Math.floor((W * H) \/ 4200);\n    let n = Math.max(520, Math.min(1800, target));\n\n    for (let i=0;i<n;i++){\n      const s = rand(10, 38);\n      tiles.push({\n        x: rand(-s, W),\n        y: rand(-s, H),\n        s,\n        d: rand(0, 260),\n        life: rand(220, 520),\n        a: 1,\n      });\n    }\n\n    const bigCount = Math.floor(rand(24, 46));\n    for (let i=0;i<bigCount;i++){\n      const w = rand(120, 360);\n      const h = rand(90, 260);\n      tiles.push({\n        x: rand(-w*0.2, W - w*0.2),\n        y: rand(-h*0.2, H - h*0.2),\n        s: null,\n        w, h,\n        d: rand(0, 220),\n        life: rand(260, 620),\n        a: 1,\n      });\n    }\n  };\n\n  const paintFrame = (ms) => {\n    const W = window.innerWidth;\n    const H = window.innerHeight;\n    ctx.clearRect(0,0,W,H);\n\n    const elapsed = ms - t0;\n    const veil = Math.max(0, 1 - (elapsed \/ 220));\n    if (veil > 0){\n      ctx.globalAlpha = veil * 0.20;\n      ctx.fillStyle = '#000';\n      ctx.fillRect(0,0,W,H);\n      ctx.globalAlpha = 1;\n    }\n\n    let alive = 0;\n    for (let i=0;i<tiles.length;i++){\n      const p = tiles[i];\n      const local = elapsed - p.d;\n      if (local <= 0){\n        p.a = 1;\n        alive++;\n      } else {\n        const k = 1 - (local \/ p.life);\n        p.a = Math.max(0, k);\n        if (p.a > 0) alive++;\n      }\n\n      if (p.a <= 0) continue;\n\n      const a = Math.pow(p.a, 1.6) * rand(0.55, 0.95);\n      ctx.globalAlpha = a;\n      ctx.fillStyle = 'rgba(0,0,0,0.92)';\n\n      if (p.s != null){\n        ctx.fillRect(p.x, p.y, p.s, p.s);\n      } else {\n        ctx.fillRect(p.x, p.y, p.w, p.h);\n      }\n      ctx.globalAlpha = 1;\n    }\n\n    ctx.globalAlpha = 0.06;\n    for (let i=0;i<140;i++){\n      const s = rand(18, 60);\n      ctx.fillStyle = 'rgba(0,0,0,0.6)';\n      ctx.fillRect(rand(0,W), rand(0,H), s, 1);\n    }\n    ctx.globalAlpha = 1;\n\n    if (alive > 0){\n      dissolveRAF = requestAnimationFrame(paintFrame);\n    } else {\n      ctx.clearRect(0,0,W,H);\n      cancelAnimationFrame(dissolveRAF);\n      dissolveRAF = null;\n    }\n  };\n\n  const runDissolve = () => {\n    if (prefersReduced) return;\n    buildTiles();\n    t0 = performance.now();\n    if (!dissolveRAF) dissolveRAF = requestAnimationFrame(paintFrame);\n  };\n\n  \/* ==========================\n     \u2705 Media + nav logic\n     ========================== *\/\n  const sections = Array.from(document.querySelectorAll('.section'));\n  const navLinks = Array.from(document.querySelectorAll('.nav a[data-nav]'));\n  const navEl = document.querySelector('.nav');\n\n  const setNavHeightVar = () => {\n    if (!navEl) return;\n    const h = Math.ceil(navEl.getBoundingClientRect().height);\n    document.documentElement.style.setProperty('--navH', `${h + 14}px`);\n  };\n  window.addEventListener('resize', setNavHeightVar, { passive: true });\n  setNavHeightVar();\n\n  const bindSmoothAnchors = () => {\n    const internal = Array.from(document.querySelectorAll('a[href^=\"#\"]'));\n    internal.forEach(a => {\n      a.addEventListener('click', (ev) => {\n        const id = a.getAttribute('href');\n        const el = document.querySelector(id);\n        if (!el) return;\n        ev.preventDefault();\n        el.scrollIntoView({ behavior: prefersReduced ? 'auto' : 'smooth', block:'start' });\n        history.replaceState(null,'',id);\n      });\n    });\n  };\n\n  const setNavActive = (id) => {\n    navLinks.forEach(a => a.classList.toggle('isActive', a.dataset.nav === id));\n  };\n\n  const safeParse = (json, fallback=[]) => {\n    try { return JSON.parse(json || '[]'); } catch { return fallback; }\n  };\n\n  const setup = (sec) => {\n    const bgV = sec.querySelector('video.bgVideo');\n\n    const img1 = sec.querySelector('.dockLayer[data-layer=\"1\"]');\n    const img2 = sec.querySelector('.dockLayer[data-layer=\"2\"]');\n    const vid  = sec.querySelector('.dockLayer[data-layer=\"v\"]');\n\n    const bgList   = safeParse(sec.dataset.bg);\n    const dockList = safeParse(sec.dataset.dock);\n\n    const st = {\n      sec,\n      active:false,\n      bgList, bgIndex:0, bgTimer:null, bgV,\n      dockList, dockIndex:0, dockTimer:null,\n      img1, img2, vid,\n      showing:1,\n      hasDock: !!(img1 && img2 && vid)\n    };\n\n    if (st.hasDock && dockList.length){\n      const first = dockList[0];\n      if (first?.type === 'image'){\n        img1.src = first.src;\n        img1.classList.add('isOn');\n        img2.classList.remove('isOn');\n        vid.classList.remove('isOn');\n        vid.pause(); vid.removeAttribute('src'); vid.load();\n      } else if (first?.type === 'video'){\n        img1.classList.remove('isOn');\n        img2.classList.remove('isOn');\n        vid.src = first.src;\n        vid.classList.add('isOn');\n      }\n    }\n\n    return st;\n  };\n\n  const states = sections.map(setup);\n\n  const applyBG = (st, item) => {\n    if (!item) return;\n    if (item.type === 'video'){\n      if (st.bgV.src !== item.src) st.bgV.src = item.src;\n      st.bgV.play().catch(()=>{});\n    }\n  };\n\n  const applyDock = (st, item) => {\n    if (!st.hasDock) return;\n    if (!item) return;\n\n    const stopVid = () => {\n      st.vid.pause();\n      st.vid.currentTime = 0;\n      st.vid.removeAttribute('src');\n      st.vid.load();\n      st.vid.classList.remove('isOn');\n    };\n\n    if (item.type === 'video'){\n      st.img1.classList.remove('isOn');\n      st.img2.classList.remove('isOn');\n      st.vid.src = item.src;\n      st.vid.classList.add('isOn');\n      st.vid.play().catch(()=>{});\n      return;\n    }\n\n    stopVid();\n\n    st.showing = (st.showing === 1) ? 2 : 1;\n    const on  = (st.showing === 1) ? st.img1 : st.img2;\n    const off = (st.showing === 1) ? st.img2 : st.img1;\n\n    on.src = item.src;\n    on.classList.add('isOn');\n    off.classList.remove('isOn');\n  };\n\n  const stopTimers = (st) => {\n    if (st.bgTimer) { clearInterval(st.bgTimer); st.bgTimer = null; }\n    if (st.dockTimer) { clearInterval(st.dockTimer); st.dockTimer = null; }\n  };\n\n  const startPlaylists = (st) => {\n    stopTimers(st);\n\n    if (!prefersReduced && st.bgList.length > 1){\n      st.bgTimer = setInterval(() => {\n        if (!st.active) return;\n        st.bgIndex = (st.bgIndex + 1) % st.bgList.length;\n        applyBG(st, st.bgList[st.bgIndex]);\n      }, 12000);\n    }\n\n    if (!prefersReduced && st.hasDock && st.dockList.length > 1){\n      st.dockTimer = setInterval(() => {\n        if (!st.active) return;\n        st.dockIndex = (st.dockIndex + 1) % st.dockList.length;\n        applyDock(st, st.dockList[st.dockIndex]);\n      }, 7000);\n    }\n  };\n\n  const activate = (st) => {\n    st.active = true;\n    runDissolve();\n\n    applyBG(st, st.bgList[st.bgIndex] || st.bgList[0]);\n\n    if (st.hasDock){\n      applyDock(st, st.dockList[st.dockIndex] || st.dockList[0]);\n    }\n\n    startPlaylists(st);\n  };\n\n  const deactivate = (st) => {\n    st.active = false;\n    stopTimers(st);\n\n    st.bgV.pause();\n    st.bgV.currentTime = 0;\n\n    if (st.hasDock){\n      st.vid.pause();\n      st.vid.currentTime = 0;\n    }\n  };\n\n  const obs = new IntersectionObserver((entries) => {\n    entries.forEach(e => {\n      const st = states.find(s => s.sec === e.target);\n      if (!st) return;\n\n      if (e.isIntersecting && e.intersectionRatio >= 0.58) {\n        states.forEach(s => { if (s !== st) deactivate(s); });\n        activate(st);\n        setNavActive(st.sec.id);\n      }\n    });\n  }, { threshold: [0.35, 0.58, 0.78] });\n\n  sections.forEach(s => obs.observe(s));\n  bindSmoothAnchors();\n\n  const first = states[0];\n  activate(first);\n  setNavActive(first.sec.id);\n})();\n<\/script>\n\n<\/body>\n<\/html>\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-blank-landingpage.php","meta":{"footnotes":""},"class_list":["post-168","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/pages\/168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/comments?post=168"}],"version-history":[{"count":7,"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/pages\/168\/revisions"}],"predecessor-version":[{"id":175,"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/pages\/168\/revisions\/175"}],"wp:attachment":[{"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/media?parent=168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}