/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 22:0 Unexpected "<"
Line 29:8 Unexpected "{"
Line 29:17 Expected ":"
Line 29:24 Unexpected "{"
Line 30:18 Expected identifier but found whitespace
Line 30:20 Unexpected "{"
Line 30:29 Expected ":"
Line 31:19 Expected identifier but found whitespace
... and 110 more hidden warnings

**/
{% liquid
  assign total_scroll = 100
  assign total_scroll = total_scroll | plus: section.settings.door_scroll_vh
  assign total_scroll = total_scroll | plus: section.settings.video_hold_vh
%}

<style>
  /* =========================================================
     KROMANOX PRE-SCROLL VIDEO
     Completely self-contained.
     Does NOT depend on kromanox-custom.css.
     ========================================================= */

  #KXP-{{ section.id }} {
    --kxp-door-bg: {{ section.settings.door_background }};
    --kxp-video-bg: {{ section.settings.video_background }};

    --kxp-logo-width-desktop: {{ section.settings.logo_width_desktop }}vw;
    --kxp-logo-width-mobile: {{ section.settings.logo_width_mobile }}vw;

    --kxp-logo-y-desktop: {{ section.settings.logo_y_desktop }}vh;
    --kxp-logo-y-mobile: {{ section.settings.logo_y_mobile }}vh;

    --kxp-video-x-desktop: {{ section.settings.video_x_desktop }}%;
    --kxp-video-y-desktop: {{ section.settings.video_y_desktop }}%;

    --kxp-video-x-mobile: {{ section.settings.video_x_mobile }}%;
    --kxp-video-y-mobile: {{ section.settings.video_y_mobile }}%;

    position: relative;
    display: block;

    width: 100%;

    height: {{ total_scroll }}vh;
    height: {{ total_scroll }}svh;

    margin: 0;
    padding: 0;

    background: var(--kxp-video-bg);

    isolation: isolate;
  }


  /* =========================================================
     STICKY VIEWPORT
     ========================================================= */

  #KXP-{{ section.id }} .kxp-sticky {
    position: sticky;

    top: 0;

    width: 100%;
    height: 100vh;
    height: 100svh;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: var(--kxp-video-bg);

    z-index: 1;
  }


  /* =========================================================
     HERO VIDEO
     ========================================================= */

  #KXP-{{ section.id }} .kxp-video-wrap {
    position: absolute;

    inset: 0;

    z-index: 1;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: var(--kxp-video-bg);

    pointer-events: none;
  }


  #KXP-{{ section.id }} .kxp-video {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: cover;

    object-position:
      var(--kxp-video-x-desktop)
      var(--kxp-video-y-desktop);

    margin: 0;
    padding: 0;

    background: var(--kxp-video-bg);

    pointer-events: none;

    transform: translateZ(0);
    backface-visibility: hidden;
  }


  #KXP-{{ section.id }} .kxp-video-placeholder {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 32px;

    background: var(--kxp-video-bg);

    color: rgba(255,255,255,.55);

    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: center;

    pointer-events: none;
  }


  /* =========================================================
     DOORS
     ========================================================= */

  #KXP-{{ section.id }} .kxp-doors {
    position: absolute;

    inset: 0;

    z-index: 10;

    width: 100%;
    height: 100%;

    overflow: hidden;

    pointer-events: none;
  }


  #KXP-{{ section.id }} .kxp-door {
    position: absolute;

    top: 0;
    bottom: 0;

    width: 50%;
    height: 100%;

    overflow: hidden;

    background: var(--kxp-door-bg);

    pointer-events: none;

    transform: translate3d(0, 0, 0);

    will-change: transform;

    backface-visibility: hidden;
  }


  #KXP-{{ section.id }} .kxp-door--left {
    left: 0;
  }


  #KXP-{{ section.id }} .kxp-door--right {
    right: 0;
  }


  /* =========================================================
     FULL VIEWPORT LOGO INSIDE EACH HALF

     Both doors contain the SAME full viewport-wide logo.
     Each 50% door clips one half of it.
     ========================================================= */

  #KXP-{{ section.id }} .kxp-logo-stage {
    position: absolute;

    top: 0;

    width: 100vw;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: visible;

    pointer-events: none;
  }


  #KXP-{{ section.id }} .kxp-door--left .kxp-logo-stage {
    left: 0;
  }


  #KXP-{{ section.id }} .kxp-door--right .kxp-logo-stage {
    right: 0;
  }


  #KXP-{{ section.id }} .kxp-door-logo {
    display: block;

    width: var(--kxp-logo-width-desktop);

    max-width: 94vw;

    height: auto;

    margin: 0;
    padding: 0;

    transform:
      translate3d(
        0,
        var(--kxp-logo-y-desktop),
        0
      );

    transform-origin: center center;

    pointer-events: none;

    user-select: none;

    -webkit-user-drag: none;

    backface-visibility: hidden;
  }


  /* =========================================================
     MOBILE
     ========================================================= */

  @media screen and (max-width: 749px) {

    #KXP-{{ section.id }} .kxp-door-logo {
      width: var(--kxp-logo-width-mobile);

      transform:
        translate3d(
          0,
          var(--kxp-logo-y-mobile),
          0
        );
    }


    #KXP-{{ section.id }} .kxp-video {
      object-position:
        var(--kxp-video-x-mobile)
        var(--kxp-video-y-mobile);
    }

  }


  /* =========================================================
     REDUCED MOTION
     ========================================================= */

  @media (prefers-reduced-motion: reduce) {

    #KXP-{{ section.id }} {
      height: 100vh;
      height: 100svh;
    }


    #KXP-{{ section.id }} .kxp-door {
      display: none !important;
    }

  }
</style>


<section
  id="KXP-{{ section.id }}"
  data-kxp-root

  data-door-distance="{{ section.settings.door_scroll_vh }}"
  data-start-percent="{{ section.settings.video_start_percent }}"
  data-reset-percent="{{ section.settings.video_reset_percent }}"
>

  <div class="kxp-sticky">


    <!-- =====================================================
         HERO VIDEO
         ===================================================== -->

    <div class="kxp-video-wrap">

      {% if section.settings.hero_video != blank %}

        {{
          section.settings.hero_video
          | video_tag:
            class: 'kxp-video',
            autoplay: false,
            muted: true,
            loop: section.settings.loop_video,
            controls: false,
            playsinline: true,
            preload: 'auto'
        }}

      {% else %}

        <div class="kxp-video-placeholder">
          Select your KROMANOX hero video
        </div>

      {% endif %}

    </div>


    <!-- =====================================================
         OPENING DOORS
         ===================================================== -->

    {% if section.settings.show_doors %}

      <div
        class="kxp-doors"
        aria-hidden="true"
      >


        <!-- LEFT DOOR -->

        <div class="kxp-door kxp-door--left">

          <div class="kxp-logo-stage">

            {% if section.settings.door_logo != blank %}

              <picture>

                {% if section.settings.door_logo_mobile != blank %}

                  <source
                    media="(max-width: 749px)"
                    srcset="{{ section.settings.door_logo_mobile | image_url: width: 1400 }}"
                  >

                {% endif %}

                <img
                  class="kxp-door-logo"

                  src="{{ section.settings.door_logo | image_url: width: 2200 }}"

                  width="{{ section.settings.door_logo.width }}"
                  height="{{ section.settings.door_logo.height }}"

                  alt=""

                  aria-hidden="true"

                  loading="eager"

                  fetchpriority="high"
                >

              </picture>

            {% endif %}

          </div>

        </div>


        <!-- RIGHT DOOR -->

        <div class="kxp-door kxp-door--right">

          <div class="kxp-logo-stage">

            {% if section.settings.door_logo != blank %}

              <picture>

                {% if section.settings.door_logo_mobile != blank %}

                  <source
                    media="(max-width: 749px)"
                    srcset="{{ section.settings.door_logo_mobile | image_url: width: 1400 }}"
                  >

                {% endif %}

                <img
                  class="kxp-door-logo"

                  src="{{ section.settings.door_logo | image_url: width: 2200 }}"

                  width="{{ section.settings.door_logo.width }}"
                  height="{{ section.settings.door_logo.height }}"

                  alt=""

                  aria-hidden="true"

                  loading="eager"

                  fetchpriority="high"
                >

              </picture>

            {% endif %}

          </div>

        </div>

      </div>

    {% endif %}

  </div>

</section>


<script>
(function () {

  /*
    ==========================================================
    KROMANOX PRE-SCROLL
    No Custom Elements.
    No dependency on kromanox-custom.css.
    Safe inside Shopify Theme Editor.
    ==========================================================
  */


  var SECTION_ID =
    "KXP-{{ section.id }}";


  /* ========================================================
     HELPERS
     ======================================================== */

  function clamp(
    value,
    min,
    max
  ) {

    return Math.min(
      Math.max(
        value,
        min
      ),
      max
    );

  }


  function smoothstep(
    edge0,
    edge1,
    value
  ) {

    if (
      edge1 <= edge0
    ) {

      return (
        value >= edge1
          ? 1
          : 0
      );

    }


    var t =
      clamp(
        (
          value - edge0
        )
        /
        (
          edge1 - edge0
        ),
        0,
        1
      );


    return (
      t
      * t
      * (
        3
        - 2
        * t
      )
    );

  }


  /* ========================================================
     INIT
     ======================================================== */

  function initKromanoxPrescroll() {

    var root =
      document.getElementById(
        SECTION_ID
      );


    if (!root) {
      return;
    }


    /*
      Prevent duplicate listeners on
      the same actual DOM element.
    */

    if (
      root.dataset.kxpInitialized
      === "true"
    ) {

      return;

    }


    root.dataset.kxpInitialized =
      "true";


    var sticky =
      root.querySelector(
        ".kxp-sticky"
      );


    var leftDoor =
      root.querySelector(
        ".kxp-door--left"
      );


    var rightDoor =
      root.querySelector(
        ".kxp-door--right"
      );


    var video =
      root.querySelector(
        ".kxp-video"
      );


    if (!sticky) {
      return;
    }


    /* ======================================================
       SETTINGS
       ====================================================== */

    var doorDistanceVh =
      parseFloat(
        root.dataset.doorDistance
      );


    if (
      !Number.isFinite(
        doorDistanceVh
      )
    ) {

      doorDistanceVh =
        90;

    }


    var videoStartPercent =
      parseFloat(
        root.dataset.startPercent
      );


    if (
      !Number.isFinite(
        videoStartPercent
      )
    ) {

      videoStartPercent =
        95;

    }


    var videoStartPoint =
      clamp(
        videoStartPercent
        / 100,
        0,
        1
      );


    var resetPercent =
      parseFloat(
        root.dataset.resetPercent
      );


    if (
      !Number.isFinite(
        resetPercent
      )
    ) {

      resetPercent =
        50;

    }


    var videoResetPoint =
      clamp(
        resetPercent
        / 100,
        0,
        videoStartPoint
      );


    var reducedMotion =
      window.matchMedia(
        "(prefers-reduced-motion: reduce)"
      );


    var rafId =
      null;


    var videoHasStarted =
      false;


    /* ======================================================
       VIDEO SETUP
       ====================================================== */

    if (video) {

      video.muted =
        true;


      video.autoplay =
        false;


      video.playsInline =
        true;


      /*
        Some Safari versions need
        attributes as well as properties.
      */

      video.setAttribute(
        "muted",
        ""
      );


      video.setAttribute(
        "playsinline",
        ""
      );


      try {

        video.pause();

      } catch (error) {}


      function setVideoToStart() {

        if (
          videoHasStarted
        ) {
          return;
        }


        try {

          if (
            video.readyState >= 1
          ) {

            video.currentTime =
              0;

          }

        } catch (error) {}

      }


      if (
        video.readyState >= 1
      ) {

        setVideoToStart();

      } else {

        video.addEventListener(
          "loadedmetadata",
          setVideoToStart,
          {
            once: true
          }
        );

      }

    }


    /* ======================================================
       VIDEO PLAY
       ====================================================== */

    function startVideo() {

      if (
        !video
        ||
        videoHasStarted
        ||
        reducedMotion.matches
      ) {

        return;

      }


      videoHasStarted =
        true;


      video.muted =
        true;


      video.setAttribute(
        "muted",
        ""
      );


      video.setAttribute(
        "playsinline",
        ""
      );


      try {

        video.currentTime =
          0;

      } catch (error) {}


      var playPromise;


      try {

        playPromise =
          video.play();

      } catch (error) {

        videoHasStarted =
          false;

        return;

      }


      if (
        playPromise
        &&
        typeof playPromise.catch
        === "function"
      ) {

        playPromise.catch(
          function () {

            /*
              If autoplay policy blocks it,
              let next scroll frame retry.
            */

            videoHasStarted =
              false;

          }
        );

      }

    }


    /* ======================================================
       VIDEO RESET
       ====================================================== */

    function resetVideo() {

      if (
        !video
        ||
        !videoHasStarted
      ) {

        return;

      }


      videoHasStarted =
        false;


      try {

        video.pause();

        video.currentTime =
          0;

      } catch (error) {}

    }


    /* ======================================================
       MAIN UPDATE
       ====================================================== */

    function update() {

      var viewportHeight =
        sticky.getBoundingClientRect()
        .height;


      if (
        viewportHeight <= 0
      ) {

        return;

      }


      var rootRect =
        root.getBoundingClientRect();


      var availableScroll =
        Math.max(
          1,

          root.offsetHeight
          - viewportHeight
        );


      /*
        When root top becomes negative,
        user has scrolled through the section.
      */

      var localScroll =
        clamp(
          -rootRect.top,
          0,
          availableScroll
        );


      var openingDistancePx =
        viewportHeight
        * (
          doorDistanceVh
          / 100
        );


      var progress =
        smoothstep(
          0,
          openingDistancePx,
          localScroll
        );


      /* ====================================================
         REDUCED MOTION
         ==================================================== */

      if (
        reducedMotion.matches
      ) {

        progress =
          1;

      }


      /* ====================================================
         LEFT DOOR
         ==================================================== */

      if (
        leftDoor
      ) {

        leftDoor.style.transform =
          "translate3d("
          + (
              -100
              * progress
            )
          + "%,0,0)";

      }


      /* ====================================================
         RIGHT DOOR
         ==================================================== */

      if (
        rightDoor
      ) {

        rightDoor.style.transform =
          "translate3d("
          + (
              100
              * progress
            )
          + "%,0,0)";

      }


      /* ====================================================
         SECTION VISIBILITY
         ==================================================== */

      var visible =
        rootRect.bottom > 0
        &&
        rootRect.top
          < window.innerHeight;


      /* ====================================================
         VIDEO START
         ==================================================== */

      if (
        visible
        &&
        progress
          >= videoStartPoint
      ) {

        startVideo();

      }


      /* ====================================================
         VIDEO RESET WHEN USER CLOSES DOORS
         ==================================================== */

      if (
        progress
          <= videoResetPoint
      ) {

        resetVideo();

      }


      /* ====================================================
         PAUSE OFFSCREEN
         ==================================================== */

      if (
        video
        &&
        !visible
        &&
        !video.paused
      ) {

        try {

          video.pause();

        } catch (error) {}

      }


      /* ====================================================
         RESUME IF USER RETURNS WHILE OPEN
         ==================================================== */

      if (
        video
        &&
        visible
        &&
        progress
          >= videoStartPoint
        &&
        videoHasStarted
        &&
        video.paused
        &&
        !reducedMotion.matches
      ) {

        try {

          var resumePromise =
            video.play();


          if (
            resumePromise
            &&
            typeof resumePromise.catch
              === "function"
          ) {

            resumePromise.catch(
              function () {}
            );

          }

        } catch (error) {}

      }

    }


    /* ======================================================
       RAF
       ====================================================== */

    function requestUpdate() {

      if (
        rafId !== null
      ) {

        return;

      }


      rafId =
        window.requestAnimationFrame(
          function () {

            rafId =
              null;

            update();

          }
        );

    }


    /* ======================================================
       EVENTS
       ====================================================== */

    window.addEventListener(
      "scroll",
      requestUpdate,
      {
        passive: true
      }
    );


    window.addEventListener(
      "resize",
      requestUpdate,
      {
        passive: true
      }
    );


    if (
      reducedMotion.addEventListener
    ) {

      reducedMotion.addEventListener(
        "change",
        requestUpdate
      );

    }


    /* ======================================================
       CLEANUP FUNCTION
       ====================================================== */

    root._kxpCleanup =
      function () {

        window.removeEventListener(
          "scroll",
          requestUpdate
        );


        window.removeEventListener(
          "resize",
          requestUpdate
        );


        if (
          reducedMotion
          .removeEventListener
        ) {

          reducedMotion
          .removeEventListener(
            "change",
            requestUpdate
          );

        }


        if (
          rafId !== null
        ) {

          window.cancelAnimationFrame(
            rafId
          );

        }


        if (video) {

          try {

            video.pause();

          } catch (error) {}

        }

      };


    /*
      Force first render immediately.
    */

    update();

  }


  /* ========================================================
     NORMAL STOREFRONT
     ======================================================== */

  if (
    document.readyState
    === "loading"
  ) {

    document.addEventListener(
      "DOMContentLoaded",
      initKromanoxPrescroll,
      {
        once: true
      }
    );

  } else {

    initKromanoxPrescroll();

  }


  /* ========================================================
     SHOPIFY THEME EDITOR
     ======================================================== */

  document.addEventListener(
    "shopify:section:load",
    function () {

      /*
        Theme Editor replaces section HTML.
        Wait one frame then initialize new DOM.
      */

      window.requestAnimationFrame(
        initKromanoxPrescroll
      );

    }
  );


  document.addEventListener(
    "shopify:section:unload",
    function () {

      var root =
        document.getElementById(
          SECTION_ID
        );


      if (
        root
        &&
        typeof root._kxpCleanup
          === "function"
      ) {

        root._kxpCleanup();

      }

    }
  );

})();
</script>


{% schema %}
{
  "name": "KROMANOX Pre-Scroll Video",

  "tag": "section",

  "class": "kromanox-prescroll-video",

  "limit": 1,

  "settings": [

    {
      "type": "header",
      "content": "Hero video"
    },

    {
      "type": "video",
      "id": "hero_video",
      "label": "Hero video"
    },

    {
      "type": "checkbox",
      "id": "loop_video",
      "label": "Loop hero video",
      "default": true
    },

    {
      "type": "color",
      "id": "video_background",
      "label": "Video background",
      "default": "#111111"
    },


    {
      "type": "header",
      "content": "Video framing - desktop"
    },

    {
      "type": "range",
      "id": "video_x_desktop",
      "label": "Horizontal position",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "%",
      "default": 50
    },

    {
      "type": "range",
      "id": "video_y_desktop",
      "label": "Vertical position",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "%",
      "default": 50
    },


    {
      "type": "header",
      "content": "Video framing - mobile"
    },

    {
      "type": "range",
      "id": "video_x_mobile",
      "label": "Horizontal position",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "%",
      "default": 50
    },

    {
      "type": "range",
      "id": "video_y_mobile",
      "label": "Vertical position",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "%",
      "default": 50
    },


    {
      "type": "header",
      "content": "Opening doors"
    },

    {
      "type": "checkbox",
      "id": "show_doors",
      "label": "Show doors",
      "default": true
    },

    {
      "type": "image_picker",
      "id": "door_logo",
      "label": "Logo - desktop"
    },

    {
      "type": "image_picker",
      "id": "door_logo_mobile",
      "label": "Logo - mobile"
    },

    {
      "type": "color",
      "id": "door_background",
      "label": "Door background",
      "default": "#ffffff"
    },


    {
      "type": "header",
      "content": "Logo - desktop"
    },

    {
      "type": "range",
      "id": "logo_width_desktop",
      "label": "Logo width",
      "min": 20,
      "max": 95,
      "step": 1,
      "unit": "%",
      "default": 48
    },

    {
      "type": "range",
      "id": "logo_y_desktop",
      "label": "Vertical position",
      "min": -25,
      "max": 25,
      "step": 1,
      "unit": "vh",
      "default": 0
    },


    {
      "type": "header",
      "content": "Logo - mobile"
    },

    {
      "type": "range",
      "id": "logo_width_mobile",
      "label": "Logo width",
      "min": 30,
      "max": 95,
      "step": 1,
      "unit": "%",
      "default": 70
    },

    {
      "type": "range",
      "id": "logo_y_mobile",
      "label": "Vertical position",
      "min": -25,
      "max": 25,
      "step": 1,
      "unit": "vh",
      "default": 0
    },


    {
      "type": "header",
      "content": "Scroll"
    },

    {
      "type": "range",
      "id": "door_scroll_vh",
      "label": "Opening distance",
      "min": 40,
      "max": 180,
      "step": 5,
      "unit": "vh",
      "default": 90
    },

    {
      "type": "range",
      "id": "video_hold_vh",
      "label": "Video hold distance",
      "min": 40,
      "max": 300,
      "step": 10,
      "unit": "vh",
      "default": 120
    },

    {
      "type": "range",
      "id": "video_start_percent",
      "label": "Video start point",
      "min": 60,
      "max": 100,
      "step": 5,
      "unit": "%",
      "default": 95
    },

    {
      "type": "range",
      "id": "video_reset_percent",
      "label": "Video reset point",
      "min": 0,
      "max": 80,
      "step": 5,
      "unit": "%",
      "default": 50
    }

  ],


  "presets": [

    {
      "name": "KROMANOX Pre-Scroll Video"
    }

  ]
}
{% endschema %}