{"id":2213,"date":"2026-06-29T08:24:43","date_gmt":"2026-06-29T08:24:43","guid":{"rendered":"https:\/\/waterwave.site\/?page_id=2213"},"modified":"2026-06-29T16:33:55","modified_gmt":"2026-06-29T16:33:55","slug":"liquid-tilt","status":"publish","type":"page","link":"https:\/\/waterwave.site\/ar\/","title":{"rendered":"LIQUID TILT"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"2213\" class=\"elementor elementor-2213\" data-elementor-settings=\"{&quot;ha_cmc_init_switcher&quot;:&quot;no&quot;}\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-73bcf31 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"73bcf31\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4449e07\" data-id=\"4449e07\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2c640a2 elementor-widget elementor-widget-html\" data-id=\"2c640a2\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div class=\"ww-liquid-page\">\r\n  <div id=\"ww-physics-water\"><\/div>\r\n\r\n  <main class=\"ww-center\">\r\n    <img decoding=\"async\"\r\n      class=\"ww-logo\"\r\n      src=\"https:\/\/waterwave.site\/wp-content\/uploads\/2026\/06\/image_2026-06-24_125727339-e1782298685543.png\"\r\n      alt=\"Waterwave Logo\"\r\n    \/>\r\n\r\n    <div class=\"ww-title\">SELECT REGION<\/div>\r\n\r\n    <div class=\"ww-actions\">\r\n     <a class=\"ww-country\" href=\"https:\/\/waterwave.site\/ar\/saudi\/\">\r\n  <span class=\"ww-flag\">\ud83c\uddf8\ud83c\udde6<\/span>\r\n  <span>SAUDI ARABIA<\/span>\r\n<\/a>\r\n\r\n<a class=\"ww-country\" href=\"https:\/\/waterwave.site\/ar\/home\/\">\r\n  <span class=\"ww-flag\">\ud83c\uddf1\ud83c\udde7<\/span>\r\n  <span>LEBANON<\/span>\r\n<\/a>\r\n    <\/div>\r\n\r\n    <button class=\"ww-motion-btn\" type=\"button\">Enable Motion Effect<\/button>\r\n  <\/main>\r\n\r\n  <div class=\"ww-transition-water\"><\/div>\r\n<\/div>\r\n\r\n<style>\r\nhtml,\r\nbody {\r\n  margin: 0 !important;\r\n  padding: 0 !important;\r\n  overflow: hidden !important;\r\n  width: 100% !important;\r\n  height: 100% !important;\r\n}\r\n\r\n.ww-liquid-page {\r\n  position: fixed;\r\n  inset: 0;\r\n  width: 100vw;\r\n  height: 100vh;\r\n  height: 100dvh;\r\n  overflow: hidden;\r\n  background: radial-gradient(circle at 50% 18%, #ffffff 0%, #e9faff 42%, #c9f0ff 100%);\r\n  font-family: Arial, Helvetica, sans-serif;\r\n}\r\n\r\n#ww-physics-water {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 1;\r\n  overflow: hidden;\r\n}\r\n\r\n#ww-physics-water canvas {\r\n  width: 100% !important;\r\n  height: 100% !important;\r\n  display: block;\r\n}\r\n\r\n.ww-center {\r\n  position: absolute;\r\n  z-index: 5;\r\n  top: 42%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n  width: min(760px, 92vw);\r\n  text-align: center;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  pointer-events: auto;\r\n}\r\n\r\n.ww-logo {\r\n  display: block;\r\n  width: clamp(340px, 36vw, 570px);\r\n  max-width: 90vw;\r\n  height: auto;\r\n  margin: 0 auto 34px;\r\n  object-fit: contain;\r\n  filter: drop-shadow(0 14px 26px rgba(0, 84, 170, .18));\r\n}\r\n\r\n.ww-title {\r\n  display: inline-flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  margin: 0 auto 28px;\r\n  padding: 14px 40px;\r\n  border-radius: 999px;\r\n  background: linear-gradient(135deg, #006fc4, #13b7f3);\r\n  color: #fff;\r\n  font-size: clamp(20px, 2vw, 31px);\r\n  font-weight: 800;\r\n  letter-spacing: 8px;\r\n  line-height: 1;\r\n  white-space: nowrap;\r\n  box-shadow: 0 18px 42px rgba(0, 120, 200, .26);\r\n}\r\n\r\n.ww-actions {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 22px;\r\n  width: 100%;\r\n}\r\n\r\n.ww-country {\r\n  display: inline-flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\nflex-direction: row;\r\n  width: 210px;\r\n  min-height: 58px;\r\n  border-radius: 12px;\r\n  background: linear-gradient(135deg, #1fc4f6, #0077c8);\r\n  color: #fff !important;\r\n  text-decoration: none !important;\r\n  font-size: 15px;\r\n  font-weight: 800;\r\n  letter-spacing: 1px;\r\n  box-shadow: 0 18px 38px rgba(0, 118, 200, .25);\r\n  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;\r\n}\r\n\r\n.ww-country:hover {\r\n  transform: translateY(-4px);\r\n  filter: brightness(1.05);\r\n  box-shadow: 0 25px 50px rgba(0, 118, 200, .35);\r\n}\r\n\r\n.ww-motion-btn {\r\n  display: none;\r\n  margin-top: 24px;\r\n  padding: 9px 22px;\r\n  border-radius: 999px;\r\n  border: 1px solid rgba(0, 111, 196, .38);\r\n  background: rgba(255,255,255,.58);\r\n  color: #006fc4;\r\n  font-size: 13px;\r\n  font-weight: 700;\r\n  cursor: pointer;\r\n  backdrop-filter: blur(10px);\r\n}\r\n\r\n.ww-motion-btn.is-on {\r\n  background: rgba(0,111,196,.14);\r\n  color: #005da8;\r\n}\r\n\r\n\/* DESKTOP WATER: light movement, no physics, no lag, no white circle *\/\r\n.ww-desktop-static-water {\r\n  position: absolute;\r\n  left: -3%;\r\n  bottom: -1%;\r\n  width: 106%;\r\n  height: 31%;\r\n  z-index: 1;\r\n  overflow: hidden;\r\n  border-radius: 42% 42% 0 0;\r\n  background: linear-gradient(\r\n    180deg,\r\n    rgba(105,230,255,.94) 0%,\r\n    rgba(0,145,225,.97) 48%,\r\n    rgba(0,60,170,.98) 100%\r\n  );\r\n  animation: wwDesktopWaterMove 6.5s ease-in-out infinite;\r\n  will-change: transform;\r\n}\r\n\r\n.ww-desktop-static-water::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  left: -25%;\r\n  top: -38px;\r\n  width: 150%;\r\n  height: 76px;\r\n  border-radius: 50%;\r\n  background: linear-gradient(\r\n    90deg,\r\n    rgba(255,255,255,.10),\r\n    rgba(255,255,255,.24),\r\n    rgba(255,255,255,.10)\r\n  );\r\n  animation: wwDesktopWaveMove 5.5s ease-in-out infinite;\r\n  will-change: transform;\r\n}\r\n\r\n.ww-desktop-static-water::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  left: -30%;\r\n  top: -20px;\r\n  width: 160%;\r\n  height: 52px;\r\n  border-radius: 50%;\r\n  background: rgba(255,255,255,.10);\r\n  animation: wwDesktopWaveMoveTwo 7.5s ease-in-out infinite;\r\n  will-change: transform;\r\n}\r\n\r\n@keyframes wwDesktopWaterMove {\r\n  0%, 100% {\r\n    transform: translate3d(0, 0, 0) rotate(0deg);\r\n  }\r\n\r\n  50% {\r\n    transform: translate3d(18px, -3px, 0) rotate(.45deg);\r\n  }\r\n}\r\n\r\n@keyframes wwDesktopWaveMove {\r\n  0%, 100% {\r\n    transform: translate3d(-24px, 0, 0);\r\n  }\r\n\r\n  50% {\r\n    transform: translate3d(52px, 0, 0);\r\n  }\r\n}\r\n\r\n@keyframes wwDesktopWaveMoveTwo {\r\n  0%, 100% {\r\n    transform: translate3d(44px, 0, 0);\r\n  }\r\n\r\n  50% {\r\n    transform: translate3d(-58px, 0, 0);\r\n  }\r\n}\r\n\r\n\/* PAGE CLICK TRANSITION *\/\r\n.ww-transition-water {\r\n  position: fixed;\r\n  left: -25vw;\r\n  right: -25vw;\r\n  bottom: -135vh;\r\n  height: 135vh;\r\n  z-index: 20;\r\n  background:\r\n    radial-gradient(circle at 35% 9%, rgba(255,255,255,.42) 0 7%, transparent 8%),\r\n    linear-gradient(180deg, #63ddff 0%, #00a3ec 38%, #0059bc 100%);\r\n  border-radius: 48% 48% 0 0;\r\n  transition: bottom .9s cubic-bezier(.65,0,.2,1), border-radius .9s cubic-bezier(.65,0,.2,1);\r\n  pointer-events: none;\r\n}\r\n\r\n.ww-transition-water.is-rising {\r\n  bottom: 0;\r\n  border-radius: 0;\r\n}\r\n\r\n.ww-center.is-leaving {\r\n  animation: wwLeave .62s ease forwards;\r\n}\r\n\r\n@keyframes wwLeave {\r\n  to {\r\n    opacity: 0;\r\n    transform: translate(-50%, -62%) scale(.96);\r\n  }\r\n}\r\n\r\n\/* PHONE LAYOUT *\/\r\n@media (max-width: 767px) {\r\n  .ww-center {\r\n    top: 41%;\r\n    width: 92vw;\r\n  }\r\n\r\n  .ww-logo {\r\n    width: min(340px, 88vw);\r\n    margin-bottom: 34px;\r\n  }\r\n\r\n  .ww-title {\r\n    font-size: 20px;\r\n    letter-spacing: 5px;\r\n    padding: 12px 24px;\r\n    margin-bottom: 26px;\r\n  }\r\n\r\n  .ww-actions {\r\n    flex-direction: column;\r\n    gap: 15px;\r\n  }\r\n\r\n  .ww-country {\r\n    width: min(285px, 82vw);\r\n    min-height: 58px;\r\n    font-size: 15px;\r\n  }\r\n\r\n  .ww-motion-btn {\r\n    display: inline-block;\r\n    margin-top: 22px;\r\n    font-size: 12px;\r\n    padding: 8px 18px;\r\n  }\r\n}\r\n\r\n.ww-phone-device .ww-center {\r\n  top: 41%;\r\n  width: 92vw;\r\n}\r\n\r\n.ww-phone-device .ww-logo {\r\n  width: min(340px, 88vw);\r\n  margin-bottom: 34px;\r\n}\r\n\r\n.ww-phone-device .ww-title {\r\n  font-size: 20px;\r\n  letter-spacing: 5px;\r\n  padding: 12px 24px;\r\n  margin-bottom: 26px;\r\n}\r\n\r\n.ww-phone-device .ww-actions {\r\n  flex-direction: column;\r\n  gap: 15px;\r\n}\r\n\r\n.ww-phone-device .ww-country {\r\n  width: min(285px, 82vw);\r\n  min-height: 58px;\r\n  font-size: 15px;\r\n}\r\n\r\n.ww-phone-device .ww-motion-btn {\r\n  display: inline-block;\r\n  margin-top: 22px;\r\n  font-size: 12px;\r\n  padding: 8px 18px;\r\n}\r\n\/* DESKTOP ONLY - stronger visible wave movement, phone untouched *\/\r\n@media (hover: hover) and (pointer: fine) {\r\n  .ww-desktop-static-water {\r\n    left: -6% !important;\r\n    bottom: -2% !important;\r\n    width: 112% !important;\r\n    height: 32% !important;\r\n    animation: wwDesktopWaterMoveStronger 4.8s ease-in-out infinite !important;\r\n    will-change: transform !important;\r\n  }\r\n\r\n  .ww-desktop-static-water::before {\r\n    left: -35% !important;\r\n    top: -42px !important;\r\n    width: 170% !important;\r\n    height: 82px !important;\r\n    background: linear-gradient(\r\n      90deg,\r\n      rgba(255,255,255,.08),\r\n      rgba(255,255,255,.22),\r\n      rgba(255,255,255,.08)\r\n    ) !important;\r\n    animation: wwDesktopWaveMoveStronger 3.8s ease-in-out infinite !important;\r\n    will-change: transform !important;\r\n  }\r\n\r\n  .ww-desktop-static-water::after {\r\n    left: -40% !important;\r\n    top: -18px !important;\r\n    width: 180% !important;\r\n    height: 58px !important;\r\n    background: rgba(255,255,255,.11) !important;\r\n    animation: wwDesktopWaveMoveStrongerTwo 5.2s ease-in-out infinite !important;\r\n    will-change: transform !important;\r\n  }\r\n}\r\n\r\n@keyframes wwDesktopWaterMoveStronger {\r\n  0%, 100% {\r\n    transform: translate3d(-12px, 0, 0) rotate(-0.35deg);\r\n  }\r\n\r\n  50% {\r\n    transform: translate3d(32px, -5px, 0) rotate(0.75deg);\r\n  }\r\n}\r\n\r\n@keyframes wwDesktopWaveMoveStronger {\r\n  0%, 100% {\r\n    transform: translate3d(-90px, 0, 0);\r\n  }\r\n\r\n  50% {\r\n    transform: translate3d(95px, 0, 0);\r\n  }\r\n}\r\n\r\n@keyframes wwDesktopWaveMoveStrongerTwo {\r\n  0%, 100% {\r\n    transform: translate3d(85px, 0, 0);\r\n  }\r\n\r\n  50% {\r\n    transform: translate3d(-100px, 0, 0);\r\n  }\r\n}\r\n.ww-flag {\r\n  font-size: 1.15em;\r\n  line-height: 1;\r\n  display: inline-flex;\r\n  align-items: center;\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function () {\r\n  const container = document.getElementById(\"ww-physics-water\");\r\n  const center = document.querySelector(\".ww-center\");\r\n  const transitionWater = document.querySelector(\".ww-transition-water\");\r\n  const links = document.querySelectorAll(\".ww-country\");\r\n  const motionBtn = document.querySelector(\".ww-motion-btn\");\r\n\r\n  let engine;\r\n  let world;\r\n  let render;\r\n  let runner;\r\n  let particles = [];\r\n  let width = window.innerWidth;\r\n  let height = window.innerHeight;\r\n\r\n  let motionActive = false;\r\n  let motionListenerStarted = false;\r\n\r\n  let liquidCanvas = null;\r\n  let liquidCtx = null;\r\n\r\n  const WATER_AMOUNT = 0.30;\r\n\r\n  function isPhone() {\r\n    const ua = navigator.userAgent || \"\";\r\n    return \/iPhone|iPad|iPod|Android\/i.test(ua);\r\n  }\r\n\r\n  function loadMatter() {\r\n    return new Promise(function (resolve, reject) {\r\n      if (window.Matter) {\r\n        resolve();\r\n        return;\r\n      }\r\n\r\n      const script = document.createElement(\"script\");\r\n      script.src = \"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/matter-js\/0.19.0\/matter.min.js\";\r\n      script.onload = resolve;\r\n      script.onerror = reject;\r\n      document.head.appendChild(script);\r\n    });\r\n  }\r\n\r\n  function createDesktopStaticWater() {\r\n    container.innerHTML = '<div class=\"ww-desktop-static-water\"><\/div>';\r\n  }\r\n\r\n  function particleCount() {\r\n    return 190;\r\n  }\r\n\r\n  function particleRadius() {\r\n    return 7;\r\n  }\r\n\r\n  function setMotionButtonText() {\r\n    if (!motionBtn) return;\r\n\r\n    if (motionActive) {\r\n      motionBtn.textContent = \"Disable Motion Effect\";\r\n      motionBtn.classList.add(\"is-on\");\r\n    } else {\r\n      motionBtn.textContent = \"Enable Motion Effect\";\r\n      motionBtn.classList.remove(\"is-on\");\r\n    }\r\n  }\r\n\r\n  function resetGravityDown() {\r\n    if (!engine || !window.Matter) return;\r\n\r\n    engine.gravity.x = 0;\r\n    engine.gravity.y = 1;\r\n    engine.gravity.scale = 0.0022;\r\n\r\n    for (const p of particles) {\r\n      Matter.Body.setVelocity(p, {\r\n        x: p.velocity.x * 0.12,\r\n        y: p.velocity.y * 0.12\r\n      });\r\n\r\n      Matter.Body.setAngularVelocity(p, 0);\r\n    }\r\n  }\r\n\r\n  function destroyPhysics() {\r\n    if (!window.Matter) {\r\n      container.innerHTML = \"\";\r\n      return;\r\n    }\r\n\r\n    if (render) {\r\n      Matter.Render.stop(render);\r\n    }\r\n\r\n    if (runner) {\r\n      Matter.Runner.stop(runner);\r\n    }\r\n\r\n    if (world) {\r\n      Matter.World.clear(world, false);\r\n    }\r\n\r\n    if (engine) {\r\n      Matter.Engine.clear(engine);\r\n    }\r\n\r\n    if (render && render.canvas) {\r\n      render.canvas.remove();\r\n    }\r\n\r\n    engine = null;\r\n    world = null;\r\n    render = null;\r\n    runner = null;\r\n    particles = [];\r\n    liquidCanvas = null;\r\n    liquidCtx = null;\r\n    container.innerHTML = \"\";\r\n  }\r\n\r\n  function createWalls() {\r\n    const thickness = 140;\r\n\r\n    const wallOptions = {\r\n      isStatic: true,\r\n      render: { visible: false },\r\n      friction: 0,\r\n      restitution: 0.05\r\n    };\r\n\r\n    const floor = Matter.Bodies.rectangle(\r\n      width \/ 2,\r\n      height + thickness \/ 2,\r\n      width + thickness * 2,\r\n      thickness,\r\n      wallOptions\r\n    );\r\n\r\n    const ceiling = Matter.Bodies.rectangle(\r\n      width \/ 2,\r\n      -thickness \/ 2,\r\n      width + thickness * 2,\r\n      thickness,\r\n      wallOptions\r\n    );\r\n\r\n    const left = Matter.Bodies.rectangle(\r\n      -thickness \/ 2,\r\n      height \/ 2,\r\n      thickness,\r\n      height + thickness * 2,\r\n      wallOptions\r\n    );\r\n\r\n    const right = Matter.Bodies.rectangle(\r\n      width + thickness \/ 2,\r\n      height \/ 2,\r\n      thickness,\r\n      height + thickness * 2,\r\n      wallOptions\r\n    );\r\n\r\n    Matter.World.add(world, [floor, ceiling, left, right]);\r\n  }\r\n\r\n  function createWaterParticles() {\r\n    particles = [];\r\n\r\n    const count = particleCount();\r\n    const r = particleRadius();\r\n\r\n    const cols = Math.floor(width \/ (r * 1.65));\r\n    const startY = height - height * WATER_AMOUNT;\r\n    const startX = r * 2;\r\n\r\n    for (let i = 0; i < count; i++) {\r\n      const col = i % cols;\r\n      const row = Math.floor(i \/ cols);\r\n\r\n      const x = startX + col * r * 1.65;\r\n      const y = startY + row * r * 1.65;\r\n\r\n      const particle = Matter.Bodies.circle(x, y, r, {\r\n        restitution: 0.02,\r\n        friction: 0.01,\r\n        frictionAir: 0.030,\r\n        density: 0.0024,\r\n        render: {\r\n          visible: false\r\n        }\r\n      });\r\n\r\n      particles.push(particle);\r\n    }\r\n\r\n    Matter.World.add(world, particles);\r\n  }\r\n\r\n  function drawLiquidOverlay() {\r\n    if (!render || !render.context) return;\r\n\r\n    const ctx = render.context;\r\n    const r = particleRadius();\r\n\r\n    if (!liquidCanvas || liquidCanvas.width !== width || liquidCanvas.height !== height) {\r\n      liquidCanvas = document.createElement(\"canvas\");\r\n      liquidCanvas.width = width;\r\n      liquidCanvas.height = height;\r\n      liquidCtx = liquidCanvas.getContext(\"2d\");\r\n    }\r\n\r\n    liquidCtx.clearRect(0, 0, width, height);\r\n\r\n    liquidCtx.save();\r\n    liquidCtx.filter = \"blur(15px)\";\r\n\r\n    for (const p of particles) {\r\n      const speed = Math.sqrt(p.velocity.x * p.velocity.x + p.velocity.y * p.velocity.y);\r\n      const stretch = Math.min(2.0, 1 + speed * 0.14);\r\n      const angle = Math.atan2(p.velocity.y, p.velocity.x);\r\n\r\n      liquidCtx.beginPath();\r\n      liquidCtx.ellipse(\r\n        p.position.x,\r\n        p.position.y,\r\n        r * 3.3 * stretch,\r\n        r * 2.9,\r\n        angle,\r\n        0,\r\n        Math.PI * 2\r\n      );\r\n\r\n      liquidCtx.fillStyle = \"rgba(0, 156, 225, 0.95)\";\r\n      liquidCtx.fill();\r\n    }\r\n\r\n    liquidCtx.restore();\r\n\r\n    ctx.save();\r\n\r\n    ctx.globalCompositeOperation = \"source-over\";\r\n    ctx.drawImage(liquidCanvas, 0, 0, width, height);\r\n\r\n    const waterGradient = ctx.createLinearGradient(0, 0, 0, height);\r\n    waterGradient.addColorStop(0, \"rgba(105, 230, 255, 0.30)\");\r\n    waterGradient.addColorStop(0.45, \"rgba(0, 145, 225, 0.30)\");\r\n    waterGradient.addColorStop(1, \"rgba(0, 55, 165, 0.42)\");\r\n\r\n    ctx.globalCompositeOperation = \"source-atop\";\r\n    ctx.fillStyle = waterGradient;\r\n    ctx.fillRect(0, 0, width, height);\r\n\r\n    ctx.globalCompositeOperation = \"screen\";\r\n\r\n    for (let i = 0; i < 34; i++) {\r\n      const p = particles[(i * 13) % particles.length];\r\n      if (!p) continue;\r\n\r\n      ctx.beginPath();\r\n      ctx.arc(\r\n        p.position.x + Math.sin(Date.now() * 0.0012 + i) * 7,\r\n        p.position.y + Math.cos(Date.now() * 0.001 + i) * 5,\r\n        1.5 + (i % 4),\r\n        0,\r\n        Math.PI * 2\r\n      );\r\n\r\n      ctx.strokeStyle = \"rgba(255,255,255,0.22)\";\r\n      ctx.lineWidth = 1;\r\n      ctx.stroke();\r\n    }\r\n\r\n    for (let i = 0; i < 26; i++) {\r\n      const p = particles[(i * 17) % particles.length];\r\n      if (!p) continue;\r\n\r\n      ctx.beginPath();\r\n      ctx.arc(\r\n        p.position.x + Math.sin(Date.now() * 0.001 + i) * 5,\r\n        p.position.y - 4,\r\n        2 + (i % 3),\r\n        0,\r\n        Math.PI * 2\r\n      );\r\n\r\n      ctx.strokeStyle = \"rgba(255,255,255,0.18)\";\r\n      ctx.lineWidth = 1;\r\n      ctx.stroke();\r\n    }\r\n\r\n    ctx.globalCompositeOperation = \"source-over\";\r\n\r\n    ctx.strokeStyle = \"rgba(255,255,255,0.35)\";\r\n    ctx.lineWidth = 2;\r\n    ctx.strokeRect(1, 1, width - 2, height - 2);\r\n\r\n    ctx.strokeStyle = \"rgba(0,110,190,0.16)\";\r\n    ctx.lineWidth = 5;\r\n    ctx.strokeRect(3, 3, width - 6, height - 6);\r\n\r\n    ctx.restore();\r\n  }\r\n\r\n  function createPhonePhysics() {\r\n    width = window.innerWidth;\r\n    height = window.innerHeight;\r\n\r\n    container.innerHTML = \"\";\r\n\r\n    engine = Matter.Engine.create();\r\n\r\n    engine.gravity.x = 0;\r\n    engine.gravity.y = 1;\r\n    engine.gravity.scale = 0.0022;\r\n\r\n    world = engine.world;\r\n\r\n    render = Matter.Render.create({\r\n      element: container,\r\n      engine: engine,\r\n      options: {\r\n        width: width,\r\n        height: height,\r\n        wireframes: false,\r\n        background: \"transparent\",\r\n        pixelRatio: Math.min(window.devicePixelRatio || 1, 2)\r\n      }\r\n    });\r\n\r\n    runner = Matter.Runner.create();\r\n\r\n    createWalls();\r\n    createWaterParticles();\r\n\r\n    Matter.Render.run(render);\r\n    Matter.Runner.run(runner, engine);\r\n\r\n    Matter.Events.on(render, \"afterRender\", drawLiquidOverlay);\r\n  }\r\n\r\n  async function requestMotion() {\r\n    let allowed = true;\r\n\r\n    if (\r\n      typeof DeviceMotionEvent !== \"undefined\" &&\r\n      typeof DeviceMotionEvent.requestPermission === \"function\"\r\n    ) {\r\n      try {\r\n        const result = await DeviceMotionEvent.requestPermission();\r\n        allowed = result === \"granted\";\r\n      } catch (e) {\r\n        allowed = false;\r\n      }\r\n    }\r\n\r\n    return allowed;\r\n  }\r\n\r\n function startPhoneMotionListener() {\r\n  if (motionListenerStarted) return;\r\n  motionListenerStarted = true;\r\n\r\n  const isAndroid = \/Android\/i.test(navigator.userAgent || \"\");\r\n\r\n  function clamp(value, min, max) {\r\n    return Math.max(min, Math.min(max, value));\r\n  }\r\n\r\n  window.addEventListener(\"devicemotion\", function (event) {\r\n    if (!motionActive || !event.accelerationIncludingGravity || !engine) return;\r\n\r\n    const acc = event.accelerationIncludingGravity;\r\n\r\n    const x = acc.x || 0;\r\n    const y = acc.y || 0;\r\n\r\n    \/*\r\n      iPhone stays the same.\r\n      Android gets corrected because some Android phones report Y gravity opposite.\r\n    *\/\r\n   let gravityX = isAndroid ? -x \/ 9.8 : x \/ 9.8;\r\n    let gravityY = isAndroid ? y \/ 9.8 : -y \/ 9.8;\r\n\r\n    gravityX = clamp(gravityX, -1.2, 1.2);\r\n    gravityY = clamp(gravityY, -1.2, 1.2);\r\n\r\n    engine.gravity.x = gravityX;\r\n    engine.gravity.y = gravityY;\r\n    engine.gravity.scale = 0.0032;\r\n  }, true);\r\n}\r\n\r\n  if (motionBtn) {\r\n    motionBtn.addEventListener(\"click\", async function () {\r\n      if (!isPhone()) return;\r\n\r\n      if (motionActive) {\r\n        motionActive = false;\r\n        setMotionButtonText();\r\n        resetGravityDown();\r\n        return;\r\n      }\r\n\r\n      const allowed = await requestMotion();\r\n\r\n      if (!allowed) {\r\n        motionActive = false;\r\n        setMotionButtonText();\r\n        resetGravityDown();\r\n        return;\r\n      }\r\n\r\n      motionActive = true;\r\n      setMotionButtonText();\r\n      startPhoneMotionListener();\r\n    });\r\n  }\r\n\r\n  links.forEach(function (link) {\r\n    link.addEventListener(\"click\", function (e) {\r\n      const target = link.getAttribute(\"href\");\r\n\r\n      if (!target || target === \"#\" || target.includes(\"PASTE_\")) {\r\n        e.preventDefault();\r\n        return;\r\n      }\r\n\r\n      e.preventDefault();\r\n\r\n      transitionWater.classList.add(\"is-rising\");\r\n      center.classList.add(\"is-leaving\");\r\n\r\n      setTimeout(function () {\r\n        window.location.href = target;\r\n      }, 880);\r\n    });\r\n  });\r\n\r\n  async function startPage() {\r\n    destroyPhysics();\r\n\r\n    if (isPhone()) {\r\n      document.documentElement.classList.add(\"ww-phone-device\");\r\n\r\n      try {\r\n        await loadMatter();\r\n        createPhonePhysics();\r\n        motionActive = false;\r\n        setMotionButtonText();\r\n        resetGravityDown();\r\n      } catch (e) {\r\n        createDesktopStaticWater();\r\n      }\r\n    } else {\r\n      document.documentElement.classList.remove(\"ww-phone-device\");\r\n      createDesktopStaticWater();\r\n    }\r\n  }\r\n\r\n  startPage();\r\n\r\n  let resizeTimer;\r\n  window.addEventListener(\"resize\", function () {\r\n    clearTimeout(resizeTimer);\r\n\r\n    resizeTimer = setTimeout(function () {\r\n      startPage();\r\n    }, 300);\r\n  });\r\n})();\r\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>SELECT REGION \ud83c\uddf8\ud83c\udde6 SAUDI ARABIA \ud83c\uddf1\ud83c\udde7 LEBANON Enable Motion Effect<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2213","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>LIQUID TILT - waterwave<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/waterwave.site\/ar\/\" \/>\n<meta property=\"og:locale\" content=\"ar_AR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"LIQUID TILT - waterwave\" \/>\n<meta property=\"og:description\" content=\"SELECT REGION \ud83c\uddf8\ud83c\udde6 SAUDI ARABIA \ud83c\uddf1\ud83c\udde7 LEBANON Enable Motion Effect\" \/>\n<meta property=\"og:url\" content=\"https:\/\/waterwave.site\/ar\/\" \/>\n<meta property=\"og:site_name\" content=\"waterwave\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-29T16:33:55+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0648\u0642\u062a \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u064f\u0642\u062f\u0651\u0631\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u062f\u0642\u064a\u0642\u0629 \u0648\u0627\u062d\u062f\u0629\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/waterwave.site\/\",\"url\":\"https:\/\/waterwave.site\/\",\"name\":\"LIQUID TILT - waterwave\",\"isPartOf\":{\"@id\":\"https:\/\/waterwave.site\/#website\"},\"datePublished\":\"2026-06-29T08:24:43+00:00\",\"dateModified\":\"2026-06-29T16:33:55+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/waterwave.site\/#breadcrumb\"},\"inLanguage\":\"ar\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/waterwave.site\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/waterwave.site\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/waterwave.site\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"LIQUID TILT\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/waterwave.site\/#website\",\"url\":\"https:\/\/waterwave.site\/\",\"name\":\"waterwave\",\"description\":\"Water pumps\",\"publisher\":{\"@id\":\"https:\/\/waterwave.site\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/waterwave.site\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ar\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/waterwave.site\/#organization\",\"name\":\"waterwave\",\"url\":\"https:\/\/waterwave.site\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ar\",\"@id\":\"https:\/\/waterwave.site\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/waterwave.site\/wp-content\/uploads\/2022\/11\/cropped-water-wave-logo-1536x651-1-1.png\",\"contentUrl\":\"https:\/\/waterwave.site\/wp-content\/uploads\/2022\/11\/cropped-water-wave-logo-1536x651-1-1.png\",\"width\":180,\"height\":62,\"caption\":\"waterwave\"},\"image\":{\"@id\":\"https:\/\/waterwave.site\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"LIQUID TILT - waterwave","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/waterwave.site\/ar\/","og_locale":"ar_AR","og_type":"article","og_title":"LIQUID TILT - waterwave","og_description":"SELECT REGION \ud83c\uddf8\ud83c\udde6 SAUDI ARABIA \ud83c\uddf1\ud83c\udde7 LEBANON Enable Motion Effect","og_url":"https:\/\/waterwave.site\/ar\/","og_site_name":"waterwave","article_modified_time":"2026-06-29T16:33:55+00:00","twitter_card":"summary_large_image","twitter_misc":{"\u0648\u0642\u062a \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u064f\u0642\u062f\u0651\u0631":"\u062f\u0642\u064a\u0642\u0629 \u0648\u0627\u062d\u062f\u0629"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/waterwave.site\/","url":"https:\/\/waterwave.site\/","name":"LIQUID TILT - waterwave","isPartOf":{"@id":"https:\/\/waterwave.site\/#website"},"datePublished":"2026-06-29T08:24:43+00:00","dateModified":"2026-06-29T16:33:55+00:00","breadcrumb":{"@id":"https:\/\/waterwave.site\/#breadcrumb"},"inLanguage":"ar","potentialAction":[{"@type":"ReadAction","target":["https:\/\/waterwave.site\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/waterwave.site\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/waterwave.site\/"},{"@type":"ListItem","position":2,"name":"LIQUID TILT"}]},{"@type":"WebSite","@id":"https:\/\/waterwave.site\/#website","url":"https:\/\/waterwave.site\/","name":"waterwave","description":"Water pumps","publisher":{"@id":"https:\/\/waterwave.site\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/waterwave.site\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ar"},{"@type":"Organization","@id":"https:\/\/waterwave.site\/#organization","name":"waterwave","url":"https:\/\/waterwave.site\/","logo":{"@type":"ImageObject","inLanguage":"ar","@id":"https:\/\/waterwave.site\/#\/schema\/logo\/image\/","url":"https:\/\/waterwave.site\/wp-content\/uploads\/2022\/11\/cropped-water-wave-logo-1536x651-1-1.png","contentUrl":"https:\/\/waterwave.site\/wp-content\/uploads\/2022\/11\/cropped-water-wave-logo-1536x651-1-1.png","width":180,"height":62,"caption":"waterwave"},"image":{"@id":"https:\/\/waterwave.site\/#\/schema\/logo\/image\/"}}]}},"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/waterwave.site\/ar\/wp-json\/wp\/v2\/pages\/2213","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/waterwave.site\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/waterwave.site\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/waterwave.site\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/waterwave.site\/ar\/wp-json\/wp\/v2\/comments?post=2213"}],"version-history":[{"count":61,"href":"https:\/\/waterwave.site\/ar\/wp-json\/wp\/v2\/pages\/2213\/revisions"}],"predecessor-version":[{"id":2282,"href":"https:\/\/waterwave.site\/ar\/wp-json\/wp\/v2\/pages\/2213\/revisions\/2282"}],"wp:attachment":[{"href":"https:\/\/waterwave.site\/ar\/wp-json\/wp\/v2\/media?parent=2213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}