/** Shopify CDN: Minification failed

Line 16:0 Unexpected "<"
Line 134:0 Unexpected "<"
Line 136:1 Expected identifier but found "%"
Line 148:0 Unexpected "<"
Line 156:5 Expected identifier but found "%"
Line 157:4 Unexpected "<"
Line 158:7 Expected identifier but found "%"
Line 159:8 Unexpected "<"
Line 159:44 Unexpected "{"
Line 159:53 Expected ":"
... and 35 more hidden warnings

**/
<style>

.nd-work-section .nd-bg-image,
.nd-work-section .nd-bg-overlay {
  display: block !important;
}
.nd-bg-image {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  background-image: var(--nd-bg-image);
  
}
.nd-bg-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0, 0, 0, var(--nd-overlay));
}
.nd-section-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 860px;
  padding: 80px 40px 100px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--nd-text-color);
}
.nd-section-heading { margin-bottom: 60px; }
.nd-section-heading h2 {
  font-size: clamp(32px, 5vw, 60px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, sans-serif;
  color: var(--nd-text-color);
}
.nd-section-heading p {
  margin-top: 14px;
  font-size: 12px;
  opacity: 1;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, sans-serif;
  color: var(--nd-text-color);
}
.nd-progress-section { width: 100%; }
.nd-progress-item { margin-bottom: 0; }
.nd-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 9px;
  padding-top: 22px;
}
.nd-progress-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, sans-serif;
}
.nd-progress-value {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  min-width: 52px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, sans-serif;
}
.nd-progress-track {
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, var(--nd-bar-start), var(--nd-bar-end));
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}
.nd-progress-bar {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  transition: none;
}
.nd-progress-bar.nd-animate {
  transition: width 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nd-divider { width: 100%; height: 1px; background: rgba(255,255,255,0.15); }
@media (max-width: 768px) {
  .nd-section-content { 
    padding: 50px 24px 50px; 
  }
  .nd-section-heading {
     margin-bottom: 40px; 
  }
  .nd-work-section {
    min-height: auto;
  }
  .nd-section-heading {
    margin-bottom: 10px;
  }
  .nd-progress-header {
    padding-top: 20px;
  }
} 
@media (max-width: 767px) {
  .nd-bg-image {
    
    background-image: var(--nd-bg-image-mb);
    
  }
}
</style>

{%- liquid
  assign bar_start = section.settings.bar_start_color
  assign bar_end = section.settings.bar_end_color
  assign text_col = section.settings.text_color
  assign overlay = section.settings.overlay_darkness | divided_by: 100.0
  if section.settings.background_image != blank
    assign bg_url = section.settings.background_image | image_url: width: 1800
  else
    assign bg_url = 'https://www.thenomadesk.com/cdn/shop/files/Prod_IMG_V1.png?v=1769026365'
  endif
-%}

<section class="nd-work-section" id="ndWorkSection-{{ section.id }}">

  <div class="nd-bg-image" style="background-image: url('{{ bg_url }}');"></div>

  <div class="nd-bg-overlay" style="background: linear-gradient(to bottom, rgba(10,14,16,{{ overlay | times: 0.5 }}) 0%, rgba(10,14,16,{{ overlay | times: 0.85 }}) 55%, rgba(10,14,16,{{ overlay }}) 100%);"></div>

  <div class="nd-section-content">

    {% if section.settings.heading != blank or section.settings.subheading != blank %}
    <div class="nd-section-heading">
      {% if section.settings.heading != blank %}
        <h2 style="color: {{ text_col }};">{{ section.settings.heading }}</h2>
      {% endif %}
      {% if section.settings.subheading != blank %}
        <p style="color: {{ text_col }};">{{ section.settings.subheading }}</p>
      {% endif %}
    </div>
    {% endif %}

    <div class="nd-progress-section" id="ndProgressSection-{{ section.id }}">
      {% for block in section.blocks %}
        {% if block.type == 'stat' %}
          <div class="nd-progress-item" data-value="{{ block.settings.value }}" {{ block.shopify_attributes }}>
            <div class="nd-progress-header">
              <span class="nd-progress-label" style="color: {{ text_col }};">{{ block.settings.label }}</span>
              <span class="nd-progress-value" style="color: {{ text_col }};">0%</span>
            </div>
            <div class="nd-progress-track">
              <div class="nd-progress-bar" style="background: linear-gradient(to right, {{ bar_start }} 0%, {{ bar_end }} 100%);"></div>
            </div>
          </div>
          {% unless forloop.last %}<div class="nd-divider"></div>{% endunless %}
        {% endif %}
      {% endfor %}
    </div>

  </div>
</section>

<script>
(function() {
  var progressSection = document.getElementById('ndProgressSection-{{ section.id }}');
  if (!progressSection) return;
  var animated = false;

  function animateCountUp(el, target, duration) {
    var start = performance.now();
    function tick(now) {
      var p = Math.min((now - start) / duration, 1);
      var eased = 1 - Math.pow(1 - p, 3);
      el.textContent = Math.round(eased * target) + '%';
      if (p < 1) requestAnimationFrame(tick);
    }
    requestAnimationFrame(tick);
  }

  function triggerAnimation() {
    if (animated) return;
    animated = true;
    var items = progressSection.querySelectorAll('.nd-progress-item');
    items.forEach(function(item, i) {
      var target = parseInt(item.dataset.value);
      var bar = item.querySelector('.nd-progress-bar');
      var valueEl = item.querySelector('.nd-progress-value');
      setTimeout(function() {
        bar.classList.add('nd-animate');
        bar.style.width = target + '%';
        animateCountUp(valueEl, target, 1400);
      }, i * 130);
    });
  }

  if ('IntersectionObserver' in window) {
    var observer = new IntersectionObserver(function(entries) {
      if (entries[0].isIntersecting) { triggerAnimation(); observer.disconnect(); }
    }, { threshold: 0.25 });
    observer.observe(progressSection);
  } else {
    triggerAnimation();
  }
})();
</script>

{% schema %}
{
  "name": "Progress Bars",
  "tag": "section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Work Properly. Anywhere."
    },
    {
      "type": "text",
      "id": "subheading",
      "label": "Subheading",
      "default": "Because when your setup works properly, so do you."
    },
    {
      "type": "header",
      "content": "Background"
    },
    {
      "type": "image_picker",
      "id": "background_image",
      "label": "Background image",
      "info": "Recommended: 1800px wide. Leave blank to use the default product image."
    },
    {
      "type": "range",
      "id": "overlay_darkness",
      "label": "Overlay darkness",
      "min": 0,
      "max": 100,
      "step": 5,
      "default": 70,
      "unit": "%"
    },
    {
      "type": "header",
      "content": "Colours"
    },
    {
      "type": "color",
      "id": "bar_start_color",
      "label": "Bar start colour",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "bar_end_color",
      "label": "Bar end colour",
      "default": "#122026"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text colour",
      "default": "#f5f3ef"
    }
  ],
  "blocks": [
    {
      "type": "stat",
      "name": "Stat",
      "settings": [
        {
          "type": "text",
          "id": "label",
          "label": "Label",
          "default": "Performance"
        },
        {
          "type": "range",
          "id": "value",
          "label": "Percentage value",
          "min": 0,
          "max": 100,
          "step": 1,
          "default": 92,
          "unit": "%"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Progress Bars",
      "blocks": [
        { "type": "stat", "settings": { "label": "Work Speed", "value": 92 } },
        { "type": "stat", "settings": { "label": "All Day Comfort", "value": 95 } },
        { "type": "stat", "settings": { "label": "Setup Simplicity", "value": 100 } },
        { "type": "stat", "settings": { "label": "Portability", "value": 96 } }
      ]
    }
  ]
}
{% endschema %}