{"id":844,"date":"2025-09-12T14:03:13","date_gmt":"2025-09-12T12:03:13","guid":{"rendered":"https:\/\/dev.oceanvisuals.net\/?page_id=844"},"modified":"2025-09-15T11:58:24","modified_gmt":"2025-09-15T09:58:24","slug":"home","status":"publish","type":"page","link":"https:\/\/dev.oceanvisuals.net\/?page_id=844","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"844\" class=\"elementor elementor-844\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8e3cf28 e-con-full fullpage e-flex e-con e-parent\" data-id=\"8e3cf28\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-a429751 e-con-full section e-flex e-con e-child\" data-id=\"a429751\" data-element_type=\"container\" data-e-type=\"container\" id=\"section-1\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7be1296 elementor-widget elementor-widget-heading\" data-id=\"7be1296\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Section  1<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8ff198a elementor-widget elementor-widget-html\" data-id=\"8ff198a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \ud83c\udfa5 Hero Wrapper with Slide-Up -->\n<div id=\"hero-wrapper\">\n  <video autoplay muted playsinline preload=\"auto\" id=\"hero-video\">\n    <!-- Replace the URL below with your Media Library file URL -->\n    <source src=\"https:\/\/dev.oceanvisuals.net\/wp-content\/uploads\/2025\/09\/Hero_Animation_Rough_Color.mp4\"video\/mp4\">\n  <\/video>\n<\/div>\n\n<style>\n\/* Hero wrapper fills the viewport *\/\n#hero-wrapper {\n  position: relative;\n  width: 100%;\n  height: 100vh;\n  overflow: hidden;\n  z-index: 1;\n  transition: transform 1s ease-in-out; \/* slide effect *\/\n}\n\n\/* Slide it up when class is added *\/\n#hero-wrapper.slide-up {\n  transform: translateY(-100%);\n}\n\n\/* Video fills the wrapper *\/\n#hero-video {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n  display: block;\n}\n<\/style>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n  const video = document.getElementById(\"hero-video\");\n  const wrapper = document.getElementById(\"hero-wrapper\");\n\n  if (video && wrapper) {\n    video.addEventListener(\"ended\", function () {\n      wrapper.classList.add(\"slide-up\");\n    });\n  }\n});\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f5d2a25 e-con-full section e-flex e-con e-child\" data-id=\"f5d2a25\" data-element_type=\"container\" data-e-type=\"container\" id=\"section-2\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-00252e7 elementor-widget elementor-widget-heading\" data-id=\"00252e7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Section  2<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-eed6520 e-con-full section e-flex e-con e-child\" data-id=\"eed6520\" data-element_type=\"container\" data-e-type=\"container\" id=\"section-3\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8d8f1dc elementor-widget elementor-widget-heading\" data-id=\"8d8f1dc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Section  3<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8f13ce2 e-con-full section e-flex e-con e-child\" data-id=\"8f13ce2\" data-element_type=\"container\" data-e-type=\"container\" id=\"section-4\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-185a02f elementor-widget elementor-widget-heading\" data-id=\"185a02f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Section  4<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ad1d575 e-con-full section e-flex e-con e-child\" data-id=\"ad1d575\" data-element_type=\"container\" data-e-type=\"container\" id=\"section-5\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9d4ea2d elementor-widget elementor-widget-heading\" data-id=\"9d4ea2d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Section  5<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4b10d50 e-con-full section e-flex e-con e-child\" data-id=\"4b10d50\" data-element_type=\"container\" data-e-type=\"container\" id=\"section-6\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-751b27e elementor-widget elementor-widget-heading\" data-id=\"751b27e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Section  6<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b61beb2 e-con-full section e-flex e-con e-child\" data-id=\"b61beb2\" data-element_type=\"container\" data-e-type=\"container\" id=\"section-7\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-790d934 elementor-widget elementor-widget-heading\" data-id=\"790d934\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Section 7<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-43243f7 e-flex e-con-boxed e-con e-parent\" data-id=\"43243f7\" 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-eebbe41 elementor-widget elementor-widget-html\" data-id=\"eebbe41\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\nhtml, body {\n  height: 100%;\n  margin: 0;\n  scroll-behavior: smooth;\n  scroll-snap-type: y mandatory;\n  overflow-y: scroll;\n}\n\n\/* Snap all sections with IDs like section-1, section-2 \u2026 *\/\n[id^=\"section-\"] {\n  scroll-snap-align: start;\n  min-height: 100vh;\n}\n<\/style>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a6ee858 elementor-widget elementor-widget-html\" data-id=\"a6ee858\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n  const sections = document.querySelectorAll('[id^=\"section-\"]');\n  const htmlEl = document.documentElement;\n  let isScrolling = false;\n  let startY = 0;\n\n  function getCurrentSectionIndex() {\n    let index = 0, minDist = Infinity;\n    sections.forEach((sec, i) => {\n      const dist = Math.abs(sec.getBoundingClientRect().top);\n      if (dist < minDist) { minDist = dist; index = i; }\n    });\n    return index;\n  }\n\n  function scrollToSection(index) {\n    if (index < 0 || index >= sections.length) return;\n    isScrolling = true;\n    htmlEl.classList.add('js-scrolling');           \/\/ disable CSS snap\n    sections[index].scrollIntoView({ behavior: \"smooth\" });\n    \/\/ unlock after the smooth scroll finishes\n    setTimeout(() => {\n      isScrolling = false;\n      htmlEl.classList.remove('js-scrolling');      \/\/ re-enable CSS snap\n    }, 800);\n  }\n\n  \/\/ Mouse wheel (one section per notch)\n  window.addEventListener(\"wheel\", (e) => {\n    \/\/ Stop native scrolling so it doesn't double-trigger\n    e.preventDefault();\n    if (isScrolling) return;\n    const idx = getCurrentSectionIndex();\n    if (e.deltaY > 0) scrollToSection(idx + 1);\n    else              scrollToSection(idx - 1);\n  }, { passive: false });\n\n  \/\/ Keyboard arrows\n  window.addEventListener(\"keydown\", (e) => {\n    if (isScrolling) return;\n    const idx = getCurrentSectionIndex();\n    if (e.key === \"ArrowDown\") { e.preventDefault(); scrollToSection(idx + 1); }\n    if (e.key === \"ArrowUp\")   { e.preventDefault(); scrollToSection(idx - 1); }\n  });\n\n  \/\/ Touch swipe (mobile)\n  window.addEventListener(\"touchstart\", (e) => {\n    startY = e.touches[0].clientY;\n  }, { passive: true });\n\n  window.addEventListener(\"touchmove\", (e) => {\n    \/\/ While animating, block native scrolling\n    if (isScrolling) e.preventDefault();\n  }, { passive: false });\n\n  window.addEventListener(\"touchend\", (e) => {\n    const endY = e.changedTouches[0].clientY;\n    const diff = startY - endY;\n    if (isScrolling || Math.abs(diff) < 50) return; \/\/ ignore tiny swipes\n    const idx = getCurrentSectionIndex();\n    if (diff > 0) scrollToSection(idx + 1); \/\/ swipe up \u2192 next\n    else          scrollToSection(idx - 1); \/\/ swipe down \u2192 prev\n  }, { passive: true });\n});\n<\/script>\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":"<p>Section 1<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-844","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dev.oceanvisuals.net\/index.php?rest_route=\/wp\/v2\/pages\/844","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev.oceanvisuals.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dev.oceanvisuals.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dev.oceanvisuals.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.oceanvisuals.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=844"}],"version-history":[{"count":152,"href":"https:\/\/dev.oceanvisuals.net\/index.php?rest_route=\/wp\/v2\/pages\/844\/revisions"}],"predecessor-version":[{"id":1088,"href":"https:\/\/dev.oceanvisuals.net\/index.php?rest_route=\/wp\/v2\/pages\/844\/revisions\/1088"}],"wp:attachment":[{"href":"https:\/\/dev.oceanvisuals.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=844"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}