Reveal Cover \u2013 Desktop Lens + Mobile<\/title>\n\n<style>\n html,\n body {\n margin: 0;\n padding: 0;\n width: 100%;\n min-width: 100%;\n height: 100vh;\n height: 100dvh;\n overflow: hidden;\n background: #3e5c76;\n }\n\n html,\n body,\n #page-container,\n #et-main-area,\n .et-l,\n .et_pb_section,\n .et_pb_row,\n .et_pb_column,\n .et_pb_module,\n .reveal-bleed {\n background-color: #3e5c76 !important;\n }\n\n body::before {\n content: \"\";\n position: fixed;\n inset: 0;\n background: #3e5c76;\n z-index: -1;\n pointer-events: none;\n }\n\n body #main-header,\n body #top-header,\n body .et-l--header,\n body #main-footer,\n body .et-l--footer {\n display: none !important;\n }\n\n body #page-container {\n margin: 0 !important;\n padding: 0 !important;\n width: 100% !important;\n min-width: 100% !important;\n height: 100vh !important;\n height: 100dvh !important;\n background: #3e5c76 !important;\n }\n\n .reveal-bleed {\n position: fixed;\n inset: 0;\n width: 100%;\n min-width: 100%;\n height: 100vh;\n height: 100dvh;\n margin: 0 !important;\n padding: 0 !important;\n overflow: hidden;\n background: #3e5c76 !important;\n z-index: 1;\n\n \/* flood-fill any exposed side gutters *\/\n box-shadow: 0 0 0 200vmax #3e5c76;\n clip-path: inset(0 -200vmax);\n }\n\n .reveal-wrap {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n --r: 220px;\n --x: 50%;\n --y: 50%;\n --feather: 18px;\n --ringW: 3px;\n background: #3e5c76;\n }\n\n .reveal-wrap > img,\n .reveal-wrap > video {\n position: absolute;\n inset: 0;\n width: 100% !important;\n height: 100% !important;\n display: block;\n object-fit: cover !important;\n object-position: center center !important;\n background: #3e5c76;\n }\n\n \/* DESKTOP ONLY *\/\n @media (min-width: 970px) {\n .reveal-desktop {\n display: block !important;\n cursor: none;\n }\n\n .reveal-mobile {\n display: none !important;\n }\n }\n\n .reveal-btn {\n position: absolute;\n right: 24px;\n bottom: 24px;\n z-index: 20;\n width: 60px;\n height: 60px;\n border: none;\n border-radius: 999px;\n background: #fff;\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);\n cursor: pointer;\n opacity: 0;\n transform: translateY(8px);\n pointer-events: none;\n transition: opacity 0.35s ease, transform 0.35s ease;\n }\n\n .reveal-btn.show {\n opacity: 1;\n transform: translateY(0);\n pointer-events: auto;\n }\n\n .reveal-btn::before {\n content: \"\";\n position: absolute;\n inset: 0;\n margin: auto;\n width: 22px;\n height: 22px;\n background-repeat: no-repeat;\n background-position: center;\n background-size: 22px 22px;\n background-image: url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24'><path d='M5 12h12M13 6l6 6-6 6' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'\/><\/svg>\");\n }\n\n .reveal-desktop .reveal-front {\n pointer-events: none;\n -webkit-mask-image: radial-gradient(\n circle var(--r) at var(--x) var(--y),\n rgba(0, 0, 0, 0) calc(var(--r) - var(--feather)),\n rgba(0, 0, 0, 0) var(--r),\n rgba(255, 255, 255, 1) calc(var(--r) + var(--feather))\n );\n mask-image: radial-gradient(\n circle var(--r) at var(--x) var(--y),\n rgba(0, 0, 0, 0) calc(var(--r) - var(--feather)),\n rgba(0, 0, 0, 0) var(--r),\n rgba(255, 255, 255, 1) calc(var(--r) + var(--feather))\n );\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n transition: -webkit-mask-image 0.05s linear, mask-image 0.05s linear, opacity 0.35s ease;\n }\n\n .reveal-desktop:not(.active) .reveal-front {\n -webkit-mask-image: none;\n mask-image: none;\n }\n\n .reveal-desktop.active::after {\n content: \"\";\n position: absolute;\n inset: 0;\n pointer-events: none;\n background: radial-gradient(\n circle var(--r) at var(--x) var(--y),\n rgba(0, 0, 0, 0) calc(var(--r) - var(--ringW)),\n rgba(255, 255, 255, 0.35) calc(var(--r) - var(--ringW)),\n rgba(255, 255, 255, 0.35) calc(var(--r) + var(--ringW)),\n rgba(0, 0, 0, 0) calc(var(--r) + var(--ringW) + 0.1px)\n );\n }\n\n .cosmic-overlay {\n position: fixed;\n inset: 0;\n width: 100%;\n min-width: 100%;\n height: 100vh;\n height: 100dvh;\n z-index: 9999;\n display: none;\n overflow: hidden;\n background: #3e5c76 url('https:\/\/www.reai.com.my\/stagingclean\/wp-content\/uploads\/2026\/02\/LKY-NEW-LOGO-HEROPAGE-1.png') center center \/ cover no-repeat;\n }\n\n .cosmic-overlay.show {\n display: block;\n }\n\n .divs {\n position: fixed;\n width: 50%;\n height: 100%;\n z-index: 5;\n background-color: #3e5c76;\n transition: 1.6s all cubic-bezier(.22, .85, .32, 1);\n }\n\n #left {\n left: 0;\n border-right: 8px solid #3e5c76;\n }\n\n #right {\n right: 0;\n border-left: 8px solid #3e5c76;\n }\n\n :root {\n --circle-size-desktop: 96px;\n --circle-size-mobile: 72px;\n --circle-logo-scale: 1.15;\n }\n\n #circle {\n position: absolute;\n top: 50%;\n left: 50%;\n z-index: 6;\n display: grid;\n place-items: center;\n overflow: hidden;\n width: var(--circle-size-desktop);\n height: var(--circle-size-desktop);\n margin: calc(-1 * var(--circle-size-desktop) \/ 2) 0 0 calc(-1 * var(--circle-size-desktop) \/ 2);\n border-radius: 100%;\n background-color: #3e5c76;\n box-shadow: 0 0 28px rgba(0, 0, 0, 0.4);\n transition: left 1.6s cubic-bezier(.22, .85, .32, 1), transform 1.6s cubic-bezier(.22, .85, .32, 1);\n }\n\n .circle-logo {\n width: 100%;\n height: 100%;\n object-fit: contain;\n transform: scale(var(--circle-logo-scale));\n }\n\n .cosmic-overlay.anim-start #circle {\n left: 100%;\n transform: rotateZ(180deg);\n }\n\n .cosmic-overlay.anim-start #left,\n .cosmic-overlay.anim-start #right {\n width: 0;\n }\n\n .et_pb_section,\n .et_pb_row,\n .et_pb_column,\n .et_pb_module {\n margin: 0 !important;\n padding: 0 !important;\n border: 0 !important;\n }\n\n@media (max-width: 969px) {\n .reveal-desktop {\n display: none !important;\n }\n\n .reveal-mobile {\n display: block !important;\n overflow: hidden !important;\n background: #3e5c76 !important;\n }\n\n .reveal-mobile .reveal-back {\n display: none !important;\n }\n\n .reveal-mobile .reveal-front {\n width: 100% !important;\n height: 100% !important;\n object-fit: cover !important;\n object-position: center center !important;\n transform: scale(1.14) !important;\n transform-origin: center center !important;\n background: #3e5c76 !important;\n }\n\n .reveal-mobile .reveal-btn,\n .reai .reveal-mobile .reveal-btn {\n position: fixed !important;\n right: calc(16px + env(safe-area-inset-right)) !important;\n bottom: calc(16px + env(safe-area-inset-bottom)) !important;\n width: 60px !important;\n height: 60px !important;\n z-index: 2147483647 !important;\n background: #fff !important;\n border-radius: 999px !important;\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;\n }\n\n .cosmic-overlay {\n background-color: #3e5c76 !important;\n background-image: url('https:\/\/www.reai.com.my\/stagingclean\/wp-content\/uploads\/2026\/02\/LKY-MOBILE.png') !important;\n background-position: center center !important;\n background-repeat: no-repeat !important;\n background-size: cover !important;\n }\n\n #circle {\n width: var(--circle-size-mobile);\n height: var(--circle-size-mobile);\n margin: calc(-1 * var(--circle-size-mobile) \/ 2) 0 0 calc(-1 * var(--circle-size-mobile) \/ 2);\n }\n}\n\n @supports not (mask-image: radial-gradient(circle 50px at 50% 50%, transparent, black)) {\n .reveal-desktop .reveal-front {\n transition: opacity 0.3s ease;\n }\n\n .reveal-desktop:hover .reveal-front {\n opacity: 0;\n }\n }\n<\/style>\n<\/head>\n<body>\n\n <div class=\"reveal-bleed\">\n<div class=\"reveal-wrap reveal-desktop\" data-radius=\"120\" style=\"--r:120px;\">\n <img decoding=\"async\" class=\"reveal-back\" src=\"https:\/\/www.reai.com.my\/stagingclean\/wp-content\/uploads\/2026\/02\/LKY-NEW-LOGO-HEROPAGE-1.png\" alt=\"Behind image (desktop)\">\n <video\n class=\"reveal-front\"\n src=\"https:\/\/www.reai.com.my\/stagingclean\/wp-content\/uploads\/2026\/02\/lky_hero_GIF-1.mp4\"\n autoplay muted loop playsinline preload=\"auto\"\n poster=\"https:\/\/www.reai.com.my\/stagingclean\/wp-content\/uploads\/2026\/02\/LKY-NEW-LOGO-HEROPAGE-1.png\">\n <\/video>\n <button class=\"reveal-btn\" type=\"button\" aria-label=\"Next\"><\/button>\n <\/div>\n\n <div class=\"reveal-wrap reveal-mobile\" data-radius=\"120\" style=\"--r:120px;\">\n <img decoding=\"async\" class=\"reveal-back\" src=\"https:\/\/www.reai.com.my\/stagingclean\/wp-content\/uploads\/2026\/02\/LKY-MOBILE.png\" alt=\"Behind image (mobile)\">\n <video\n class=\"reveal-front\"\n src=\"https:\/\/www.reai.com.my\/stagingclean\/wp-content\/uploads\/2026\/02\/mobile_LKY.mp4\"\n autoplay muted loop playsinline preload=\"auto\"\n poster=\"https:\/\/www.reai.com.my\/stagingclean\/wp-content\/uploads\/2026\/02\/LKY-MOBILE.png\">\n <\/video>\n <button class=\"reveal-btn\" type=\"button\" aria-label=\"Next\"><\/button>\n <\/div>\n\n <div class=\"cosmic-overlay\" aria-hidden=\"true\">\n <a id=\"circle\" href=\"javascript:void(0)\" aria-label=\"Open\">\n <img decoding=\"async\" class=\"circle-logo\" src=\"https:\/\/www.reai.com.my\/stagingclean\/wp-content\/uploads\/2026\/02\/HERO-PAGE-BUTTON.png\" alt=\"LKY Logo\">\n <\/a>\n <div class=\"divs\" id=\"left\"><\/div>\n <div class=\"divs\" id=\"right\"><\/div>\n <\/div>\n<\/div>\n \n <script>\n \/* Robust mobile 100vh: keeps hero full-screen on iOS as URL bar hides\/shows *\/\n (function(){\n function setVH(){\n const vh = window.innerHeight * 0.01;\n document.documentElement.style.setProperty('--vh', vh + 'px');\n }\n setVH();\n window.addEventListener('resize', setVH);\n window.addEventListener('orientationchange', setVH);\n })();\n <\/script>\n\n<script>\n(function () {\n const desktopWrap = document.querySelector('.reveal-desktop');\n if (!desktopWrap) return;\n\n function sizeLens() {\n const vw = window.innerWidth || document.documentElement.clientWidth;\n const vh = window.innerHeight || document.documentElement.clientHeight;\n const basis = Math.min(vw, vh);\n const aspect = vw \/ vh;\n\nlet minR = 250;\nlet maxR = 400;\nlet factor = 0.16;\n\nif (aspect < 1.7) {\n minR = 110;\n maxR = 220;\n factor = 0.14;\n}\n\nif (aspect < 1.5) {\n minR = 95;\n maxR = 190;\n factor = 0.12;\n}\n\n const r = Math.round(Math.max(minR, Math.min(maxR, basis * factor)));\n desktopWrap.style.setProperty('--r', r + 'px');\n }\n\n sizeLens();\n window.addEventListener('resize', sizeLens);\n})();\n<\/script>\n\n <script>\n (function(){\n const NEXT_URL = \"https:\/\/www.lkyco.com.my\/website2026\/main-page\/\";\n const DESKTOP_ANIM_MS = 1600;\n const MOBILE_ANIM_MS = 1400;\n const DESKTOP_SHOW_DELAY = 800;\n const MOBILE_SHOW_DELAY = 3000;\n\n const wraps = Array.from(document.querySelectorAll('.reveal-wrap'));\n\n wraps.forEach(wrap=>{\n const isMobile = wrap.classList.contains('reveal-mobile');\n const btn = wrap.querySelector('.reveal-btn');\n const front = wrap.querySelector('.reveal-front');\n const back = wrap.querySelector('.reveal-back');\n\n if (btn){\n setTimeout(()=>{ btn.classList.add('show'); }, isMobile ? MOBILE_SHOW_DELAY : DESKTOP_SHOW_DELAY);\n }\n\n if (!isMobile){\n const move = (x,y)=>{\n const rect = wrap.getBoundingClientRect();\n const xPct = ((x-rect.left)\/rect.width)*100;\n const yPct = ((y-rect.top)\/rect.height)*100;\n wrap.style.setProperty('--x', Math.max(0,Math.min(100,xPct))+'%');\n wrap.style.setProperty('--y', Math.max(0,Math.min(100,yPct))+'%');\n };\n wrap.addEventListener('mouseenter', e=>{ wrap.classList.add('active'); move(e.clientX,e.clientY); });\n wrap.addEventListener('mousemove', e=> move(e.clientX,e.clientY));\n wrap.addEventListener('mouseleave', ()=> wrap.classList.remove('active'));\n }\n\n if (front && front.tagName === 'VIDEO') {\n try { front.muted = true; front.playsInline = true; front.loop = true; front.play().catch(()=>{}); } catch(e){}\n }\n\n const goNext = ()=>{\n if (btn) btn.classList.remove('show');\n wrap.classList.remove('active');\n\n if (front){ front.style.transition = 'opacity .35s ease'; front.style.opacity = '0'; }\n if (back){ back.style.transition = 'opacity .35s ease'; back.style.opacity = '0'; }\n\n const overlay = document.querySelector('.cosmic-overlay');\n if (!overlay) { window.location.href = NEXT_URL; return; }\n\n overlay.classList.add('show');\n\n requestAnimationFrame(()=>{\n overlay.classList.add('anim-start');\n setTimeout(()=>{ window.location.href = NEXT_URL; }, isMobile ? MOBILE_ANIM_MS : DESKTOP_ANIM_MS);\n });\n };\n\n if (btn){\n btn.addEventListener('click', goNext, {passive:true});\n btn.addEventListener('touchstart', goNext, {passive:true});\n btn.addEventListener('keydown', e=>{ if (e.key === 'Enter' || e.key === ' ') goNext(); });\n }\n });\n })();\n <\/script>\n\n<\/body>\n<\/html><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-185","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.lkyco.com.my\/website2026\/wp-json\/wp\/v2\/pages\/185","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lkyco.com.my\/website2026\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.lkyco.com.my\/website2026\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.lkyco.com.my\/website2026\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lkyco.com.my\/website2026\/wp-json\/wp\/v2\/comments?post=185"}],"version-history":[{"count":6,"href":"https:\/\/www.lkyco.com.my\/website2026\/wp-json\/wp\/v2\/pages\/185\/revisions"}],"predecessor-version":[{"id":596,"href":"https:\/\/www.lkyco.com.my\/website2026\/wp-json\/wp\/v2\/pages\/185\/revisions\/596"}],"wp:attachment":[{"href":"https:\/\/www.lkyco.com.my\/website2026\/wp-json\/wp\/v2\/media?parent=185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\n\n \n \n Reveal Cover \u2013 Desktop Lens + Mobile<\/title>\n\n<style>\n html,\n body {\n margin: 0;\n padding: 0;\n width: 100%;\n min-width: 100%;\n height: 100vh;\n height: 100dvh;\n overflow: hidden;\n background: #3e5c76;\n }\n\n html,\n body,\n #page-container,\n #et-main-area,\n .et-l,\n .et_pb_section,\n .et_pb_row,\n .et_pb_column,\n .et_pb_module,\n .reveal-bleed {\n background-color: #3e5c76 !important;\n }\n\n body::before {\n content: \"\";\n position: fixed;\n inset: 0;\n background: #3e5c76;\n z-index: -1;\n pointer-events: none;\n }\n\n body #main-header,\n body #top-header,\n body .et-l--header,\n body #main-footer,\n body .et-l--footer {\n display: none !important;\n }\n\n body #page-container {\n margin: 0 !important;\n padding: 0 !important;\n width: 100% !important;\n min-width: 100% !important;\n height: 100vh !important;\n height: 100dvh !important;\n background: #3e5c76 !important;\n }\n\n .reveal-bleed {\n position: fixed;\n inset: 0;\n width: 100%;\n min-width: 100%;\n height: 100vh;\n height: 100dvh;\n margin: 0 !important;\n padding: 0 !important;\n overflow: hidden;\n background: #3e5c76 !important;\n z-index: 1;\n\n \/* flood-fill any exposed side gutters *\/\n box-shadow: 0 0 0 200vmax #3e5c76;\n clip-path: inset(0 -200vmax);\n }\n\n .reveal-wrap {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n --r: 220px;\n --x: 50%;\n --y: 50%;\n --feather: 18px;\n --ringW: 3px;\n background: #3e5c76;\n }\n\n .reveal-wrap > img,\n .reveal-wrap > video {\n position: absolute;\n inset: 0;\n width: 100% !important;\n height: 100% !important;\n display: block;\n object-fit: cover !important;\n object-position: center center !important;\n background: #3e5c76;\n }\n\n \/* DESKTOP ONLY *\/\n @media (min-width: 970px) {\n .reveal-desktop {\n display: block !important;\n cursor: none;\n }\n\n .reveal-mobile {\n display: none !important;\n }\n }\n\n .reveal-btn {\n position: absolute;\n right: 24px;\n bottom: 24px;\n z-index: 20;\n width: 60px;\n height: 60px;\n border: none;\n border-radius: 999px;\n background: #fff;\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);\n cursor: pointer;\n opacity: 0;\n transform: translateY(8px);\n pointer-events: none;\n transition: opacity 0.35s ease, transform 0.35s ease;\n }\n\n .reveal-btn.show {\n opacity: 1;\n transform: translateY(0);\n pointer-events: auto;\n }\n\n .reveal-btn::before {\n content: \"\";\n position: absolute;\n inset: 0;\n margin: auto;\n width: 22px;\n height: 22px;\n background-repeat: no-repeat;\n background-position: center;\n background-size: 22px 22px;\n background-image: url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24'><path d='M5 12h12M13 6l6 6-6 6' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'\/><\/svg>\");\n }\n\n .reveal-desktop .reveal-front {\n pointer-events: none;\n -webkit-mask-image: radial-gradient(\n circle var(--r) at var(--x) var(--y),\n rgba(0, 0, 0, 0) calc(var(--r) - var(--feather)),\n rgba(0, 0, 0, 0) var(--r),\n rgba(255, 255, 255, 1) calc(var(--r) + var(--feather))\n );\n mask-image: radial-gradient(\n circle var(--r) at var(--x) var(--y),\n rgba(0, 0, 0, 0) calc(var(--r) - var(--feather)),\n rgba(0, 0, 0, 0) var(--r),\n rgba(255, 255, 255, 1) calc(var(--r) + var(--feather))\n );\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n transition: -webkit-mask-image 0.05s linear, mask-image 0.05s linear, opacity 0.35s ease;\n }\n\n .reveal-desktop:not(.active) .reveal-front {\n -webkit-mask-image: none;\n mask-image: none;\n }\n\n .reveal-desktop.active::after {\n content: \"\";\n position: absolute;\n inset: 0;\n pointer-events: none;\n background: radial-gradient(\n circle var(--r) at var(--x) var(--y),\n rgba(0, 0, 0, 0) calc(var(--r) - var(--ringW)),\n rgba(255, 255, 255, 0.35) calc(var(--r) - var(--ringW)),\n rgba(255, 255, 255, 0.35) calc(var(--r) + var(--ringW)),\n rgba(0, 0, 0, 0) calc(var(--r) + var(--ringW) + 0.1px)\n );\n }\n\n .cosmic-overlay {\n position: fixed;\n inset: 0;\n width: 100%;\n min-width: 100%;\n height: 100vh;\n height: 100dvh;\n z-index: 9999;\n display: none;\n overflow: hidden;\n background: #3e5c76 url('https:\/\/www.reai.com.my\/stagingclean\/wp-content\/uploads\/2026\/02\/LKY-NEW-LOGO-HEROPAGE-1.png') center center \/ cover no-repeat;\n }\n\n .cosmic-overlay.show {\n display: block;\n }\n\n .divs {\n position: fixed;\n width: 50%;\n height: 100%;\n z-index: 5;\n background-color: #3e5c76;\n transition: 1.6s all cubic-bezier(.22, .85, .32, 1);\n }\n\n #left {\n left: 0;\n border-right: 8px solid #3e5c76;\n }\n\n #right {\n right: 0;\n border-left: 8px solid #3e5c76;\n }\n\n :root {\n --circle-size-desktop: 96px;\n --circle-size-mobile: 72px;\n --circle-logo-scale: 1.15;\n }\n\n #circle {\n position: absolute;\n top: 50%;\n left: 50%;\n z-index: 6;\n display: grid;\n place-items: center;\n overflow: hidden;\n width: var(--circle-size-desktop);\n height: var(--circle-size-desktop);\n margin: calc(-1 * var(--circle-size-desktop) \/ 2) 0 0 calc(-1 * var(--circle-size-desktop) \/ 2);\n border-radius: 100%;\n background-color: #3e5c76;\n box-shadow: 0 0 28px rgba(0, 0, 0, 0.4);\n transition: left 1.6s cubic-bezier(.22, .85, .32, 1), transform 1.6s cubic-bezier(.22, .85, .32, 1);\n }\n\n .circle-logo {\n width: 100%;\n height: 100%;\n object-fit: contain;\n transform: scale(var(--circle-logo-scale));\n }\n\n .cosmic-overlay.anim-start #circle {\n left: 100%;\n transform: rotateZ(180deg);\n }\n\n .cosmic-overlay.anim-start #left,\n .cosmic-overlay.anim-start #right {\n width: 0;\n }\n\n .et_pb_section,\n .et_pb_row,\n .et_pb_column,\n .et_pb_module {\n margin: 0 !important;\n padding: 0 !important;\n border: 0 !important;\n }\n\n@media (max-width: 969px) {\n .reveal-desktop {\n display: none !important;\n }\n\n .reveal-mobile {\n display: block !important;\n overflow: hidden !important;\n background: #3e5c76 !important;\n }\n\n .reveal-mobile .reveal-back {\n display: none !important;\n }\n\n .reveal-mobile .reveal-front {\n width: 100% !important;\n height: 100% !important;\n object-fit: cover !important;\n object-position: center center !important;\n transform: scale(1.14) !important;\n transform-origin: center center !important;\n background: #3e5c76 !important;\n }\n\n .reveal-mobile .reveal-btn,\n .reai .reveal-mobile .reveal-btn {\n position: fixed !important;\n right: calc(16px + env(safe-area-inset-right)) !important;\n bottom: calc(16px + env(safe-area-inset-bottom)) !important;\n width: 60px !important;\n height: 60px !important;\n z-index: 2147483647 !important;\n background: #fff !important;\n border-radius: 999px !important;\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;\n }\n\n .cosmic-overlay {\n background-color: #3e5c76 !important;\n background-image: url('https:\/\/www.reai.com.my\/stagingclean\/wp-content\/uploads\/2026\/02\/LKY-MOBILE.png') !important;\n background-position: center center !important;\n background-repeat: no-repeat !important;\n background-size: cover !important;\n }\n\n #circle {\n width: var(--circle-size-mobile);\n height: var(--circle-size-mobile);\n margin: calc(-1 * var(--circle-size-mobile) \/ 2) 0 0 calc(-1 * var(--circle-size-mobile) \/ 2);\n }\n}\n\n @supports not (mask-image: radial-gradient(circle 50px at 50% 50%, transparent, black)) {\n .reveal-desktop .reveal-front {\n transition: opacity 0.3s ease;\n }\n\n .reveal-desktop:hover .reveal-front {\n opacity: 0;\n }\n }\n<\/style>\n<\/head>\n<body>\n\n <div class=\"reveal-bleed\">\n<div class=\"reveal-wrap reveal-desktop\" data-radius=\"120\" style=\"--r:120px;\">\n <img decoding=\"async\" class=\"reveal-back\" src=\"https:\/\/www.reai.com.my\/stagingclean\/wp-content\/uploads\/2026\/02\/LKY-NEW-LOGO-HEROPAGE-1.png\" alt=\"Behind image (desktop)\">\n <video\n class=\"reveal-front\"\n src=\"https:\/\/www.reai.com.my\/stagingclean\/wp-content\/uploads\/2026\/02\/lky_hero_GIF-1.mp4\"\n autoplay muted loop playsinline preload=\"auto\"\n poster=\"https:\/\/www.reai.com.my\/stagingclean\/wp-content\/uploads\/2026\/02\/LKY-NEW-LOGO-HEROPAGE-1.png\">\n <\/video>\n <button class=\"reveal-btn\" type=\"button\" aria-label=\"Next\"><\/button>\n <\/div>\n\n <div class=\"reveal-wrap reveal-mobile\" data-radius=\"120\" style=\"--r:120px;\">\n <img decoding=\"async\" class=\"reveal-back\" src=\"https:\/\/www.reai.com.my\/stagingclean\/wp-content\/uploads\/2026\/02\/LKY-MOBILE.png\" alt=\"Behind image (mobile)\">\n <video\n class=\"reveal-front\"\n src=\"https:\/\/www.reai.com.my\/stagingclean\/wp-content\/uploads\/2026\/02\/mobile_LKY.mp4\"\n autoplay muted loop playsinline preload=\"auto\"\n poster=\"https:\/\/www.reai.com.my\/stagingclean\/wp-content\/uploads\/2026\/02\/LKY-MOBILE.png\">\n <\/video>\n <button class=\"reveal-btn\" type=\"button\" aria-label=\"Next\"><\/button>\n <\/div>\n\n <div class=\"cosmic-overlay\" aria-hidden=\"true\">\n <a id=\"circle\" href=\"javascript:void(0)\" aria-label=\"Open\">\n <img decoding=\"async\" class=\"circle-logo\" src=\"https:\/\/www.reai.com.my\/stagingclean\/wp-content\/uploads\/2026\/02\/HERO-PAGE-BUTTON.png\" alt=\"LKY Logo\">\n <\/a>\n <div class=\"divs\" id=\"left\"><\/div>\n <div class=\"divs\" id=\"right\"><\/div>\n <\/div>\n<\/div>\n \n <script>\n \/* Robust mobile 100vh: keeps hero full-screen on iOS as URL bar hides\/shows *\/\n (function(){\n function setVH(){\n const vh = window.innerHeight * 0.01;\n document.documentElement.style.setProperty('--vh', vh + 'px');\n }\n setVH();\n window.addEventListener('resize', setVH);\n window.addEventListener('orientationchange', setVH);\n })();\n <\/script>\n\n<script>\n(function () {\n const desktopWrap = document.querySelector('.reveal-desktop');\n if (!desktopWrap) return;\n\n function sizeLens() {\n const vw = window.innerWidth || document.documentElement.clientWidth;\n const vh = window.innerHeight || document.documentElement.clientHeight;\n const basis = Math.min(vw, vh);\n const aspect = vw \/ vh;\n\nlet minR = 250;\nlet maxR = 400;\nlet factor = 0.16;\n\nif (aspect < 1.7) {\n minR = 110;\n maxR = 220;\n factor = 0.14;\n}\n\nif (aspect < 1.5) {\n minR = 95;\n maxR = 190;\n factor = 0.12;\n}\n\n const r = Math.round(Math.max(minR, Math.min(maxR, basis * factor)));\n desktopWrap.style.setProperty('--r', r + 'px');\n }\n\n sizeLens();\n window.addEventListener('resize', sizeLens);\n})();\n<\/script>\n\n <script>\n (function(){\n const NEXT_URL = \"https:\/\/www.lkyco.com.my\/website2026\/main-page\/\";\n const DESKTOP_ANIM_MS = 1600;\n const MOBILE_ANIM_MS = 1400;\n const DESKTOP_SHOW_DELAY = 800;\n const MOBILE_SHOW_DELAY = 3000;\n\n const wraps = Array.from(document.querySelectorAll('.reveal-wrap'));\n\n wraps.forEach(wrap=>{\n const isMobile = wrap.classList.contains('reveal-mobile');\n const btn = wrap.querySelector('.reveal-btn');\n const front = wrap.querySelector('.reveal-front');\n const back = wrap.querySelector('.reveal-back');\n\n if (btn){\n setTimeout(()=>{ btn.classList.add('show'); }, isMobile ? MOBILE_SHOW_DELAY : DESKTOP_SHOW_DELAY);\n }\n\n if (!isMobile){\n const move = (x,y)=>{\n const rect = wrap.getBoundingClientRect();\n const xPct = ((x-rect.left)\/rect.width)*100;\n const yPct = ((y-rect.top)\/rect.height)*100;\n wrap.style.setProperty('--x', Math.max(0,Math.min(100,xPct))+'%');\n wrap.style.setProperty('--y', Math.max(0,Math.min(100,yPct))+'%');\n };\n wrap.addEventListener('mouseenter', e=>{ wrap.classList.add('active'); move(e.clientX,e.clientY); });\n wrap.addEventListener('mousemove', e=> move(e.clientX,e.clientY));\n wrap.addEventListener('mouseleave', ()=> wrap.classList.remove('active'));\n }\n\n if (front && front.tagName === 'VIDEO') {\n try { front.muted = true; front.playsInline = true; front.loop = true; front.play().catch(()=>{}); } catch(e){}\n }\n\n const goNext = ()=>{\n if (btn) btn.classList.remove('show');\n wrap.classList.remove('active');\n\n if (front){ front.style.transition = 'opacity .35s ease'; front.style.opacity = '0'; }\n if (back){ back.style.transition = 'opacity .35s ease'; back.style.opacity = '0'; }\n\n const overlay = document.querySelector('.cosmic-overlay');\n if (!overlay) { window.location.href = NEXT_URL; return; }\n\n overlay.classList.add('show');\n\n requestAnimationFrame(()=>{\n overlay.classList.add('anim-start');\n setTimeout(()=>{ window.location.href = NEXT_URL; }, isMobile ? MOBILE_ANIM_MS : DESKTOP_ANIM_MS);\n });\n };\n\n if (btn){\n btn.addEventListener('click', goNext, {passive:true});\n btn.addEventListener('touchstart', goNext, {passive:true});\n btn.addEventListener('keydown', e=>{ if (e.key === 'Enter' || e.key === ' ') goNext(); });\n }\n });\n })();\n <\/script>\n\n<\/body>\n<\/html><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-185","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.lkyco.com.my\/website2026\/wp-json\/wp\/v2\/pages\/185","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lkyco.com.my\/website2026\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.lkyco.com.my\/website2026\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.lkyco.com.my\/website2026\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lkyco.com.my\/website2026\/wp-json\/wp\/v2\/comments?post=185"}],"version-history":[{"count":6,"href":"https:\/\/www.lkyco.com.my\/website2026\/wp-json\/wp\/v2\/pages\/185\/revisions"}],"predecessor-version":[{"id":596,"href":"https:\/\/www.lkyco.com.my\/website2026\/wp-json\/wp\/v2\/pages\/185\/revisions\/596"}],"wp:attachment":[{"href":"https:\/\/www.lkyco.com.my\/website2026\/wp-json\/wp\/v2\/media?parent=185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}