{"id":5691,"date":"2026-02-05T16:35:14","date_gmt":"2026-02-05T16:35:14","guid":{"rendered":"https:\/\/lyndleadershipconference.com\/?page_id=5691"},"modified":"2026-02-27T03:17:02","modified_gmt":"2026-02-27T03:17:02","slug":"gsap-timeline","status":"publish","type":"page","link":"https:\/\/lyndleadershipconference.com\/?page_id=5691","title":{"rendered":"Skyline Hero"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5691\" class=\"elementor elementor-5691\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2aba395 e-flex e-con-boxed e-con e-parent\" data-id=\"2aba395\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c5a7bab elementor-widget elementor-widget-html\" data-id=\"c5a7bab\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\n     FUTURE FORWARD: HERO POSTER + HEAVY GLITCH (site-matching)\r\n     Paste into an HTML block. Uses your uploaded image.\r\n     ========================================================= -->\r\n<section class=\"ff-poster ff-poster--heavy\" aria-label=\"Future Forward animated poster\">\r\n  <!-- Base image -->\r\n  <div class=\"ff-poster__bg\"\r\n       style=\"--ff-img:url('https:\/\/lyndleadershipconference.com\/wp-content\/uploads\/2026\/02\/ChatGPT-Image-Feb-5-2026-10_17_36-AM.jpg');\">\r\n  <\/div>\r\n\r\n  <!-- Heavy glitch stack (same vibe as site bg) -->\r\n  <div class=\"ff-poster__grid\" aria-hidden=\"true\"><\/div>\r\n  <div class=\"ff-poster__orbs\" aria-hidden=\"true\"><\/div>\r\n\r\n  <div class=\"ff-poster__glitch\" aria-hidden=\"true\"><\/div>\r\n  <div class=\"ff-poster__glitch2\" aria-hidden=\"true\"><\/div>\r\n  <div class=\"ff-poster__noise\" aria-hidden=\"true\"><\/div>\r\n\r\n  <div class=\"ff-poster__vignette\" aria-hidden=\"true\"><\/div>\r\n\r\n  <!-- Stars \/ particles -->\r\n  <canvas class=\"ff-poster__stars\" aria-hidden=\"true\"><\/canvas>\r\n<\/section>\r\n\r\n<style>\r\n  :root{\r\n    --c-grid:  rgba(80,190,255,0.10);\r\n    --c-glow:  rgba(120,225,255,0.18);\r\n    --c-tear:  rgba(120,225,255,0.22);\r\n    --bg-deep-1: rgba(3,10,24,1);\r\n    --bg-deep-2: rgba(8,18,40,1);\r\n  }\r\n\r\n  .ff-poster{\r\n    position:relative;\r\n    width:100%;\r\n    max-width:1200px;\r\n    margin:0 auto;\r\n    aspect-ratio: 4 \/ 3;\r\n    border-radius:18px;\r\n    overflow:hidden;\r\n    background:\r\n      radial-gradient(1400px 900px at 50% 0%, rgba(120,225,255,0.10), rgba(0,0,0,0) 60%),\r\n      linear-gradient(180deg, var(--bg-deep-2), var(--bg-deep-1));\r\n    box-shadow: 0 18px 60px rgba(0,0,0,.55);\r\n    isolation:isolate;\r\n  }\r\n\r\n  \/* Base image *\/\r\n  .ff-poster__bg{\r\n    position:absolute; inset:0;\r\n    background-image: var(--ff-img);\r\n    background-size: cover;\r\n    background-position: center;\r\n    transform: scale(1.04);\r\n    will-change: transform, filter;\r\n    filter: saturate(1.05) contrast(1.05);\r\n    animation: ffPosterBreathe 7.5s ease-in-out infinite;\r\n    z-index:1;\r\n  }\r\n\r\n  @keyframes ffPosterBreathe{\r\n    0%,100%{ transform: scale(1.04) translateY(0); filter:saturate(1.05) contrast(1.05) brightness(1.00); }\r\n    50%    { transform: scale(1.065) translateY(-3px); filter:saturate(1.12) contrast(1.08) brightness(1.03); }\r\n  }\r\n\r\n  \/* Layers *\/\r\n  .ff-poster__grid,\r\n  .ff-poster__orbs,\r\n  .ff-poster__glitch,\r\n  .ff-poster__glitch2,\r\n  .ff-poster__noise,\r\n  .ff-poster__vignette,\r\n  .ff-poster__stars{\r\n    position:absolute; inset:0;\r\n    pointer-events:none;\r\n  }\r\n\r\n  \/* ================= GRID (like site bg) ================= *\/\r\n  .ff-poster__grid{\r\n    inset:-20%;\r\n    opacity:.35;\r\n    background-image:\r\n      linear-gradient(to right, var(--c-grid) 1px, transparent 1px),\r\n      linear-gradient(to bottom, var(--c-grid) 1px, transparent 1px);\r\n    background-size: 26px 26px;\r\n    animation: ffGridDrift 20s linear infinite;\r\n    mix-blend-mode: screen;\r\n    z-index:2;\r\n  }\r\n\r\n  @keyframes ffGridDrift{\r\n    0%   { transform: translate3d(0,0,0); }\r\n    100% { transform: translate3d(26px, 26px, 0); }\r\n  }\r\n\r\n  \/* ================= ORBS ================= *\/\r\n  .ff-poster__orbs{\r\n    inset:-10%;\r\n    filter: blur(22px);\r\n    opacity: .75;\r\n    background:\r\n      radial-gradient(380px 380px at 18% 35%, rgba(11,92,255,0.22), rgba(0,0,0,0) 60%),\r\n      radial-gradient(520px 520px at 70% 25%, rgba(120,225,255,0.18), rgba(0,0,0,0) 62%),\r\n      radial-gradient(460px 460px at 78% 78%, rgba(80,190,255,0.16), rgba(0,0,0,0) 60%),\r\n      radial-gradient(520px 520px at 28% 82%, rgba(120,225,255,0.14), rgba(0,0,0,0) 62%);\r\n    animation: ffOrbsFloat 12s ease-in-out infinite alternate;\r\n    z-index:3;\r\n  }\r\n\r\n  @keyframes ffOrbsFloat{\r\n    0%   { transform: translate3d(-22px, 14px, 0) scale(1); }\r\n    50%  { transform: translate3d(16px, -18px, 0) scale(1.04); }\r\n    100% { transform: translate3d(22px, 18px, 0) scale(1.02); }\r\n  }\r\n\r\n  \/* ================= HEAVY GLITCH (scan\/tear bars) ================= *\/\r\n  .ff-poster__glitch{\r\n    inset:-10%;\r\n    background:\r\n      repeating-linear-gradient(\r\n        to bottom,\r\n        rgba(0,0,0,0) 0px,\r\n        rgba(0,0,0,0) 22px,\r\n        var(--c-tear) 23px,\r\n        var(--c-tear) 27px,\r\n        rgba(0,0,0,0) 28px,\r\n        rgba(0,0,0,0) 60px\r\n      ),\r\n      repeating-linear-gradient(\r\n        to bottom,\r\n        rgba(255,255,255,0) 0px,\r\n        rgba(255,255,255,0) 2px,\r\n        rgba(120,225,255,0.08) 3px,\r\n        rgba(255,255,255,0) 4px\r\n      );\r\n    mix-blend-mode: screen;\r\n    opacity: 0.38;\r\n    transform: translate3d(0,-120%,0);\r\n    animation:\r\n      ffScanHeavy 3.8s linear infinite,\r\n      ffTwitch 0.9s steps(2,end) infinite;\r\n    filter: saturate(1.18) contrast(1.08);\r\n    z-index:6;\r\n  }\r\n\r\n  @keyframes ffScanHeavy{\r\n    0%   { transform: translate3d(0,-120%,0); }\r\n    100% { transform: translate3d(0,120%,0); }\r\n  }\r\n  @keyframes ffTwitch{\r\n    0%   { filter: saturate(1.1) contrast(1.05); }\r\n    50%  { filter: saturate(1.35) contrast(1.15); }\r\n    100% { filter: saturate(1.1) contrast(1.05); }\r\n  }\r\n\r\n  \/* ================= RGB split \/ flash ================= *\/\r\n  .ff-poster__glitch2{\r\n    background:\r\n      radial-gradient(900px 420px at 60% 20%, rgba(11,92,255,0.18), rgba(0,0,0,0) 60%),\r\n      radial-gradient(700px 360px at 30% 65%, rgba(120,225,255,0.14), rgba(0,0,0,0) 62%);\r\n    mix-blend-mode: screen;\r\n    opacity: 0;\r\n    filter: blur(1px);\r\n    z-index:7;\r\n  }\r\n\r\n  \/* ================= NOISE ================= *\/\r\n  .ff-poster__noise{\r\n    opacity: 0.14;\r\n    mix-blend-mode: overlay;\r\n    background-image:\r\n      url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.65'\/%3E%3C\/svg%3E\");\r\n    background-size: 260px 260px;\r\n    animation: ffNoiseMove 0.7s steps(2,end) infinite;\r\n    z-index:8;\r\n  }\r\n\r\n  @keyframes ffNoiseMove{\r\n    0%   { transform: translate3d(0,0,0); }\r\n    25%  { transform: translate3d(-10px,6px,0); }\r\n    50%  { transform: translate3d(9px,-7px,0); }\r\n    75%  { transform: translate3d(-8px,-9px,0); }\r\n    100% { transform: translate3d(0,0,0); }\r\n  }\r\n\r\n  \/* ================= VIGNETTE ================= *\/\r\n  .ff-poster__vignette{\r\n    background:\r\n      radial-gradient(1200px 700px at 50% 20%, rgba(0,0,0,0), rgba(0,0,0,0.30) 70%),\r\n      radial-gradient(1200px 900px at 50% 100%, rgba(0,0,0,0.08), rgba(0,0,0,0.62) 80%);\r\n    z-index:9;\r\n  }\r\n\r\n  \/* Stars canvas *\/\r\n  .ff-poster__stars{\r\n    z-index:4;\r\n    opacity:.55;\r\n    mix-blend-mode: screen;\r\n  }\r\n\r\n  \/* Burst state (same as site bg concept) *\/\r\n  .ff-poster.ff-glitch-burst .ff-poster__glitch{\r\n    opacity: 0.62;\r\n    animation-duration: 2.6s, 0.4s;\r\n  }\r\n  .ff-poster.ff-glitch-burst .ff-poster__glitch2{\r\n    opacity: 0.75;\r\n    animation: ffRgbBurst 320ms steps(2,end) 1;\r\n  }\r\n  @keyframes ffRgbBurst{\r\n    0%   { transform: translate3d(-10px,2px,0); }\r\n    40%  { transform: translate3d(12px,-3px,0); }\r\n    100% { transform: translate3d(0,0,0); }\r\n  }\r\n\r\n  @media (max-width:768px){\r\n    .ff-poster{ border-radius:14px; }\r\n    .ff-poster__grid{ opacity:.28; }\r\n    .ff-poster__noise{ opacity:.12; }\r\n  }\r\n\r\n  @media (prefers-reduced-motion: reduce){\r\n    .ff-poster__bg,\r\n    .ff-poster__grid,\r\n    .ff-poster__orbs,\r\n    .ff-poster__glitch,\r\n    .ff-poster__noise { animation:none !important; }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n  (function(){\r\n    const posters = document.querySelectorAll('.ff-poster.ff-poster--heavy');\r\n    const el = posters[posters.length - 1];\r\n    if(!el) return;\r\n\r\n    const bg = el.querySelector('.ff-poster__bg');\r\n    const grid = el.querySelector('.ff-poster__grid');\r\n    const orbs = el.querySelector('.ff-poster__orbs');\r\n\r\n    \/* ===== Stars canvas ===== *\/\r\n    const canvas = el.querySelector('.ff-poster__stars');\r\n    const ctx = canvas.getContext('2d', { alpha:true });\r\n\r\n    let w,h,dpr,stars,t=0;\r\n    const STAR_COUNT = 110;\r\n\r\n    function resize(){\r\n      dpr = Math.min(window.devicePixelRatio || 1, 2);\r\n      w = el.clientWidth; h = el.clientHeight;\r\n      canvas.width = Math.floor(w*dpr);\r\n      canvas.height = Math.floor(h*dpr);\r\n      canvas.style.width = w+'px';\r\n      canvas.style.height = h+'px';\r\n      ctx.setTransform(dpr,0,0,dpr,0,0);\r\n\r\n      stars = Array.from({length: STAR_COUNT}, () => {\r\n        const yBias = Math.pow(Math.random(), 1.6);\r\n        return {\r\n          x: Math.random()*w,\r\n          y: yBias*(h*0.78),\r\n          r: 0.6 + Math.random()*1.6,\r\n          tw: 2 + Math.random()*6,\r\n          p: Math.random()*Math.PI*2\r\n        };\r\n      });\r\n    }\r\n\r\n    function draw(){\r\n      t += 1\/60;\r\n      ctx.clearRect(0,0,w,h);\r\n\r\n      \/\/ faint sky glow\r\n      const g = ctx.createRadialGradient(w*0.5, h*0.58, 0, w*0.5, h*0.58, Math.max(w,h));\r\n      g.addColorStop(0, 'rgba(120,255,255,0.06)');\r\n      g.addColorStop(0.55,'rgba(0,0,0,0)');\r\n      g.addColorStop(1, 'rgba(0,0,0,0.25)');\r\n      ctx.fillStyle=g;\r\n      ctx.fillRect(0,0,w,h);\r\n\r\n      for(const s of stars){\r\n        const twinkle = 0.35 + 0.65*(0.5+0.5*Math.sin(t*(1\/s.tw)+s.p));\r\n        ctx.beginPath();\r\n        ctx.arc(s.x,s.y,s.r*twinkle,0,Math.PI*2);\r\n        ctx.fillStyle = `rgba(210,245,255,${0.33*twinkle})`;\r\n        ctx.fill();\r\n      }\r\n      requestAnimationFrame(draw);\r\n    }\r\n\r\n    resize();\r\n    draw();\r\n    window.addEventListener('resize', resize, { passive:true });\r\n\r\n    \/* ===== Mouse parallax (like bg code) ===== *\/\r\n    let raf=null, tx=0, ty=0;\r\n    function onMove(e){\r\n      const r = el.getBoundingClientRect();\r\n      const x = (e.clientX - r.left)\/r.width - 0.5;\r\n      const y = (e.clientY - r.top)\/r.height - 0.5;\r\n      tx = x; ty = y;\r\n      if(raf) return;\r\n      raf = requestAnimationFrame(()=>{\r\n        \/\/ image moves the least (keeps it premium)\r\n        bg.style.transform   = `scale(1.06) translate3d(${tx*10}px, ${ty*8}px, 0)`;\r\n        orbs.style.transform = `translate3d(${tx*24}px, ${ty*18}px, 0)`;\r\n        grid.style.transform = `translate3d(${tx*12}px, ${ty*10}px, 0)`;\r\n        raf=null;\r\n      });\r\n    }\r\n    el.addEventListener('mousemove', onMove, { passive:true });\r\n\r\n    \/* ===== Random heavy glitch bursts ===== *\/\r\n    function scheduleBurst(){\r\n      const delay = 5000 + Math.random()*9000;\r\n      setTimeout(()=>{\r\n        el.classList.add('ff-glitch-burst');\r\n\r\n        \/\/ quick image \u201cRGB nudge\u201d during burst\r\n        bg.style.filter = 'saturate(1.18) contrast(1.10) drop-shadow(2px 0 0 rgba(120,255,255,.25)) drop-shadow(-2px 0 0 rgba(190,120,255,.18))';\r\n        setTimeout(()=>{ bg.style.filter=''; }, 260);\r\n\r\n        setTimeout(()=> el.classList.remove('ff-glitch-burst'), 300 + Math.random()*220);\r\n        scheduleBurst();\r\n      }, delay);\r\n    }\r\n    scheduleBurst();\r\n  })();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-5691","page","type-page","status-publish","hentry"],"aioseo_notices":[],"featured_image_src":null,"featured_image_src_square":null,"_links":{"self":[{"href":"https:\/\/lyndleadershipconference.com\/index.php?rest_route=\/wp\/v2\/pages\/5691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lyndleadershipconference.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lyndleadershipconference.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lyndleadershipconference.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/lyndleadershipconference.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5691"}],"version-history":[{"count":0,"href":"https:\/\/lyndleadershipconference.com\/index.php?rest_route=\/wp\/v2\/pages\/5691\/revisions"}],"wp:attachment":[{"href":"https:\/\/lyndleadershipconference.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}