<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Poseidon Web</title>
    
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
      integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
      crossorigin="anonymous"></script>
  
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
      integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous">
      </script>
  
    <div id="loading-background" class="">
      <video src="videos/preload_new.mp4" poster="images/preload_poster.jpg" id="videoPreload" autoplay loop muted playsinline></video>
      <div id="faderVideo"></div>
      <img src="POSEIDON.png" id="poseidonText" alt="">
  
      <div id="parentBar" class="o0 o1">
        <!-- este es la barra de carga -->
        <div id="barLoading"></div>
        <p>Loading</p>
      </div>
      
      <div id="exploreButton">
        <div class="blurEffect" id="exploreBG"></div>
        <div id="borderExplorer"></div>
        <p id="" class="">EXPLORE</p>
      </div>

      <p id="continueNotAudio" class="o0 d-none">CONTINUE WITHOUT AUDIO</p>
      
    </div>
</head>
<body style="width: 100vw; height: 100vh; overflow: hidden;">
    <script type="importmap">
        {
          "imports": {
            "three": "https://unpkg.com/three@0.160.1/build/three.module.js",
            "three/examples/jsm/": "https://unpkg.com/three@0.160.1/examples/jsm/",
            "@tweenjs/tween.js": "https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.esm.js",
            "stats": "https://cdnjs.cloudflare.com/ajax/libs/stats.js/r17/Stats.min.js"
          }
        }
    </script>

    <div id="app" class="FullFrame d-none">
        <div id="home" class="FullFrame">
            <video src="videos/home.mp4" class="fullVideo vid_show" id="vid_home1" autoplay loop muted playsinline preload="auto"></video>
            <video src="videos/home_2.mp4" class="fullVideo vid_show vid_hide" id="vid_home2" muted playsinline preload="auto"></video>
            <video src="videos/home_3.mp4" class="fullVideo vid_show vid_hide" id="vid_home3" loop muted playsinline preload="auto"></video>
            <video src="videos/home_4.mp4" class="fullVideo vid_show vid_hide" id="vid_home4" muted playsinline preload="auto"></video>
            <video src="videos/t_start_products.mp4" class="fullVideo vid_show vid_hide" id="vid_home5" muted playsinline preload="auto"></video>
        </div>

        <div id="selectionProducts" class="FullFrame d-none">
            <video src="videos/transition_toProducts.mp4" class="fullVideo vid_show vid_hide" id="vid_sp0" muted playsinline preload="auto"></video>
            <video src="videos/products_selector.mp4" class="fullVideo vid_show vid_hide" id="vid_sp1" loop muted playsinline preload="auto"></video>
            <video src="videos/t_selector_home.mp4" class="fullVideo vid_show vid_hide" id="vid_sp2" muted playsinline preload="auto"></video>
            <div id="airSelector"></div>
            <div id="water_selector"></div>


            
            <div id="waterdata" class="datasp o0 nointeractable">
                <div class="boxblur">
                    <div class="boxblurbg"></div>
                    <div class="boxblurfg"></div>
                    <img src="images/watericon.png" class="nointeractable" alt="">
                </div>
                <img src="images/Group 73.png" id="arrowsp1" alt="">
                <p>Water</p>
            </div>

            <div id="airdata"  class="datasp o0 nointeractable">
                <div class="boxblur">
                    <div class="boxblurbg"></div>
                    <div class="boxblurfg"></div>
                    <img src="images/akar-icons_air.png" class="nointeractable" alt="">
                </div>
                <img src="images/Group 73.png" id="arrowsp2" alt="">
                <p>Air</p>
            </div>
        </div>
 
        <div id="airzone" class="FullFrame d-none">
            <video src="videos/air_transition_0.mp4" class="fullVideo vid_show vid_hide saturateNormal" id="vid_air0" muted playsinline preload="auto"></video>
            <video src="videos/air_loop.mp4" class="fullVideo vid_show vid_hide" id="vid_air1" loop muted playsinline preload="auto"></video>
            <video src="videos/nubes_front2.mp4" class="cloudVideo2 vid_show vid_hide nointeractable" id="vid_air_cloudsb" loop muted playsinline preload="auto"></video> 
            <video src="videos/nubes_front.mp4" class="cloudVideo vid_show vid_hide nointeractable" id="vid_air_clouds" loop muted playsinline preload="auto"></video>
            <video src="videos/air_transition_1.mp4" class="fullVideo vid_show vid_hide saturateNormal " id="vid_air2" loop muted playsinline preload="auto"></video>
            <video src="videos/air_loop_2.mp4" class="fullVideo vid_show vid_hide" id="vid_air3" loop muted playsinline preload="auto"></video>
            <video src="videos/air_transition_1.mp4" class="fullVideo vid_show2 vid_hide" id="vid_clouds" loop muted playsinline preload="auto"></video>
            <video src="videos/air_transition_2.mp4" class="fullVideo vid_show vid_hide saturateNormal " id="vid_air4"  muted playsinline preload="auto"></video>
            <video src="videos/air_transition_2.mp4" class="fullVideo vid_show2 vid_hide z7 saturateNormal " id="vid_air4b"  muted playsinline preload="auto"></video>
            <video src="videos/air_transition_3.mp4" class="fullVideo vid_show vid_hide saturateNormal " id="vid_air5"  muted playsinline preload="auto"></video>
            <div id="allAirProdcuts" class="FullFrame d-none o0">
                <div id="infoAir">
                    <div class="blurEffect" id="infoAirBg"></div>
                    <div class="blurEffect" id="infoAirline"></div>
                    <img src="images/akar-icons_air.png" id="airsymbol">
                    <h2 id="namefilterair">Filter 1</h2>
                    <p id="descfilterair">Lorem ipsum dolor sit amet, consectetur adipisc elit, consectetur et lorem ipsum dolor et same.</p>
                    
                    <select  id="selectProduct" class="d-none">
                        <option value="0">Guardian angel</option>
                    </select>
                </div>
    
                <div id="buttonLearnMore" class="">
                    <div class="blurEffect" id="btnLMBg"></div>
                    <div class="" id="btnLMborder"></div>
                    <p>Learn more</p>
                </div>

                <div id="bottomPagAir">
                    <div id="pagleft" class="d-none">
                        01
                    </div>
                    
                    <img src="images/air_pag_c.png" alt="" id="pagcenter">

                    <div id="pagrigth">
                        02
                    </div>
                </div>
    
                <div id="paginationAir">
                    <div class="activepag paginationbox" id="pagparent1">
                        <div class="bgblurpag"></div>
                        <div class="borderpag"></div>
                        <p id="pagbox1">01</p>
                    </div>
                    <div class="paginationbox secondarypag" id="pagparent2">
                        <div class="bgblurpag"></div>
                        <div class="borderpag"></div>
                        <p id="pagbox2">02</p>
                    </div>
                    <div class="paginationbox secondarypag d-none" id="pagparent3">
                        <div class="bgblurpag"></div>
                        <div class="borderpag"></div>
                        <p id="pagbox3">03</p>
                    </div>
                </div>
            </div>

            <div id="detailair" class="FullFrame d-none o0 z7">
                <!-- <img src="images/refe/air_detail2.png" class="refe d-none" alt=""> -->
                
                <div id="detailairbox">
                    <div id="airdetailicon">
                        <div id="airdetailiconbg"></div>
                        <div id="airdetailiconnfg"></div>
                        <img src="images/akar-icons_air.png" alt="">
                    </div>

                    <h2 id="tittleAirDetail">FILTER MODEL X173</h2>
                    <p id="descAirDetail">Corem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur tempus urna at turpis condimentum lobortis.</p>
                    <h3 id="detailairfeatures">Features</h3>
                    <ul id="listFeaturesAir">
                        <li>Corem ipsum dolor sit amet</li>
                        <li>Corem ipsum dolor sit amet</li>
                        <li>Corem ipsum dolor sit amet</li>
                        <li>Corem ipsum dolor sit amet</li>
                    </ul>

                   
                    <img src="images/detailarrow.png" id="detailarrow" alt="">
                </div>
            </div>

           
        </div>

        <div id="waterzone" class="FullFrame d-none">
            <video src="videos/water_transition_1.mp4" class="fullVideo vid_show vid_hide" id="vid_water0" muted playsinline preload="auto"></video>
            <video src="videos/water_loop1.mp4" class="fullVideo vid_show vid_hide" id="vid_water1" loop muted playsinline preload="auto"></video>
            <video src="videos/water_to_detail.mp4" class="fullVideo vid_show vid_hide" id="vid_water2" loop muted playsinline preload="auto"></video>
            <video src="videos/water_detail_loop.mp4" class="fullVideo vid_show vid_hide" id="vid_water3" loop muted playsinline preload="auto"></video>
            <video src="videos/water_detail_back.mp4" class="fullVideo vid_show vid_hide" id="vid_water4" loop muted playsinline preload="auto"></video>
            <video src="videos/water_back_producs.mp4" class="fullVideo vid_show vid_hide" id="vid_water5"  muted playsinline preload="auto"></video>

            

            <div id="allWaterProdcuts" class="FullFrame d-none o0">
                
                <div id="paginationWater">
                    <div class="activepag paginationbox" id="pagparent1w">
                        <div class="bgblurpag"></div>
                        <div class="borderpag"></div>
                        <p id="pagbox1w">01</p>
                    </div>
                    <div class="paginationbox secondarypag" id="pagparent2w">
                        <div class="bgblurpag"></div>
                        <div class="borderpag"></div>
                        <p id="pagbox2w">02</p>
                    </div>
                    <div class="paginationbox secondarypag d-none" id="pagparent3w">
                        <div class="bgblurpag"></div>
                        <div class="borderpag"></div>
                        <p id="pagbox3w">03</p>
                    </div>
                </div>

                <!-- <img src="images/refe/water_refe.png" class="refe d-none" alt=""> -->
                <div id="infoWater">
                    <div class="blurEffect" id="infoWaterBg"></div>
                    <div class="blurEffect" id="infoWaterline"></div>
                    <img src="images/watericon.png" id="watersymbol">
                    <h2 id="namefilterWater">Filter 1</h2>
                    <p id="descfilterWater">Lorem ipsum dolor sit amet, consectetur adipisc elit, consectetur et lorem ipsum dolor et same.</p>
                    
                    <div class="custom-select o0 d-none" id="selectvariantw">
                        <div class="select-selected" id="selectVariantwBtn">
                            <span id="selectedVariantText"></span>
                            <img src="images/arrow_select.png" class="select-arrow" alt="arrow">
                        </div>
                        <div class="select-options d-none" id="boxvariants">
                            <div class="option" data-value="0"></div>
                        </div>
                    </div>

                </div>
    
                <div id="buttonLearnMore2" class="">
                    <div class="blurEffect" id="btnLMBg2"></div>
                    <div class="" id="btnLMborder2"></div>
                    <p>Learn more</p>
                </div>

                <div id="bottomPagWater">
                    <div id="pagleft2" class="d-none">
                        01
                    </div>
                    
                    <img src="images/air_pag_c.png" alt="" id="pagcenter">

                    <div id="pagrigth2">
                        02
                    </div>
                </div>
    
                
            </div>

            <div id="detailwater" class="FullFrame d-none o0 .z7">
                <!-- <img src="images/refe/water2_refe.png" class="refe d-none" alt=""> -->

                <div id="detailwaterbox">
                    <div id="waterdetailicon">
                        <div id="waterdetailiconbg"></div>
                        <div id="waterdetailiconnfg"></div>
                        <img src="images/watericon.png" alt="">
                    </div>
    
                    <img src="images/detailarrow.png" id="detailarrow2" alt="">
                    <h2 id="tittleWaterDetail">FILTER MODEL X173</h2>
                    <p id="descWaterDetail">Corem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur tempus urna at turpis condimentum lobortis.</p>
                    <h3 id="detailWaterfeatures">Features</h3>
                    <ul id="listFeaturesWater">
                        <li>Corem ipsum dolor sit amet</li>
                        <li>Corem ipsum dolor sit amet</li>
                        <li>Corem ipsum dolor sit amet</li>
                        <li>Corem ipsum dolor sit amet</li>
                    </ul>
    
                    
                </div>
            </div>

           
        </div>

        <div id="aboutzone" class="FullFrame d-none">
            <video src="videos/about/home_to_about.mp4" class="fullVideo vid_show vid_hide" id="vid_about1" muted playsinline preload="auto"></video>
            <video src="videos/about/product_to_about.mp4" class="fullVideo vid_show vid_hide" id="vid_about2" muted playsinline preload="auto"></video>
            <video src="videos/about/about_loop.mp4" class="fullVideo vid_show vid_hide" id="vid_about3" loop muted playsinline preload="auto"></video>
            <video src="videos/about/about_to_home.mp4" class="fullVideo vid_show vid_hide" id="vid_about4" muted playsinline preload="auto"></video>
            <video src="videos/about/about_to_product.mp4" class="fullVideo vid_show vid_hide" id="vid_about5" muted playsinline preload="auto"></video>

            <!-- <img src="images/refe/aboutrefe.png" class="refe d-none" alt=""> -->

            <div id="aboutparent" class="FullFrame d-none o0">
                <div id="aboutbox">

                    <div id="abouticon">
                        <div id="abouticonbg"></div>
                        <div id="abouticonfg"></div>
                        <img src="images/isotipo.png" alt="">
                    </div>

                    <h2 id="tittleabout">ABOUT US</h2>
                    <p id="descabout">Founded in 2021, Poseidon Solutions stands as a beacon of excellence and innovation in water and air purification. With a combined wealth of decades of experience, we don’t just keep up with industry standards—we set them. Our cutting-edge technology, relentless commitment to quality, and deep understanding of environmental health drive us to deliver nothing less than the best for our clients. From homes to businesses, we’ve dedicated ourselves to transforming the way you experience the essentials of life: clean air and pure water.</p>
                   
                    <img src="images/detailarrow.png" id="detailarrow3" alt="">
                </div>

                <div id="infoabout">
                    <div class="blurEffect" id="infoaboutBg"></div>
                    <div class="blurEffect" id="infoaboutline"></div>
                    <img src="images/isotipo.png" id="aboutsymbol">
                    <h2 id="boxaboutittle">Our mission</h2>
                    <p id="descboxabou">To empower every household and business with the cleanest, healthiest water and air possible. We’re not only purifying environments; we’re enhancing lives</p>
                    
                    <div id="pointsAbout">
                        <div class="ciclrAbout circleactive" info="mision"></div>
                        <div class="ciclrAbout" info="promise"></div>
                        <div class="ciclrAbout" info="expertise"></div>
                    </div>

                </div>   
            </div>
        </div>

        <canvas id="canvas3d" class="FullFrame maskairProduct nointeractable"></canvas>
    </div>



    <p id="infoconsola"></p>
    
    <div id="ux" class="FullFrame nointeractable d-none">
        <div id="frameHero" class="normalZoom FullFrame">
            <img src="images/frame_up_L.png" class="frame_section" id="frame_sl" alt="">
            <img src="images/frame_up_r.png" class="frame_section" id="frame_sr" alt="">
            <img src="images/frame_btm_L.png" class="frame_section" id="frame_bl" alt="">
            <img src="images/frame_btm_R.png" class="frame_section" id="frame_br" alt="">
            <img src="images/frame_btm_center.png" class="frame_section" id="frame_bc" alt="">
            <img src="images/arrow_home.svg" id="arrow_home" alt="">
        </div>

        

        <div id="alwaysOnTop" class="FullFrame">
            <p id="toplogo">POSEIDON</p>
            <img src="images/isotipo.png" id="isotipo" class="nointeractable o0 o1" alt="">
            <img src="images/scroll.png" id="scrollSimbol" class="nointeractable"  alt="">
            <img src="images/scroll_pc.png" id="scrollSimbol2" class="nointeractable"  alt="">
            <img src="images/backbtn.png" id="backbtn" alt="" class="o0 d-none interactable z9">
            <div id="buttonAbout" class="d-none o0 interactable">
                <div class="blurEffect" id="btnAboutBg"></div>
                <p id="textBtnUp">About us</p>
            </div>

            <div id="buttoncontact1" class="d-none o0 interactable contactbtn">
                <div class="blurEffect" id="btnAboutBg2"></div>
                <p id="textBtnUp2">Contact us</p>
                <img src="images/isotipo.png" class="nointeractable" alt="">
            </div>

            <div id="buttonAudio" class="d-none o0 interactable">
                <div class="blurEffect" id="btnAboutBg"></div>
                <canvas id="barMusic"></canvas>
                <p>Audio</p>
            </div>
            <p id="infoBottom" class="o0 o1 infoClickeable">DISCOVER NOW</p>
            <p id="infoBottomAir" class="o0 d-none">AIR FILTERS</p>
            <p id="infoBottomWater" class="o0 d-none">Water FILTERS</p>

            <div id="contactDetailAir" class="o0 interactable contactbtn d-none">
                <div class="blurEffect" id="btndetailAirBg"></div>
                <div class="blurEffect" id="btndetailAirborder"></div>
                <p>CONTACT NOW</p>
            </div>

            <div id="contactDetailWater" class="o0 interactable contactbtn d-none">
                <div class="blurEffect" id="btndetailWaterBg"></div>
                <div class="blurEffect" id="btndetailWaterborder"></div>
                <p>CONTACT NOW</p>
            </div>


        </div>
    </div>

    
    <!-- vertical not allowed -->
    <div class="verticalmobile">
        <div class="box">
          <h2>Please rotate your mobile</h2>
          <img src="rotated.gif" alt="">
        </div>
    </div>

    <script src="loader.js"></script>
    <audio id="backgroundAudio" src="PoseidonSound.mp3" loop class="d-none"></audio>

    <script src="manage.js"></script>
    <script src="audiomgr.js"></script>
    
    <script src="manage3d.js" type="module"></script>
</body>
</html>