Text Scroll Section

{% if section.settings.enabled %}

<style>
  @keyframes ts-darkbold-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  @keyframes ts-darkbold-right {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
  }
  .ts-darkbold-wrapper {
    overflow: hidden;
    box-sizing: border-box;
  }
  .ts-darkbold-track {
    display: inline-flex;
    white-space: nowrap;
  }
  .ts-darkbold-track span {
    display: inline-block;
    letter-spacing: 0.02em;
  }
  .ts-darkbold-wrapper {
    background: {{ section.settings.bg_color }};
    position: relative;
  }
  .ts-darkbold-wrapper::before,
  .ts-darkbold-wrapper::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 8%;
    z-index: 2;
    pointer-events: none;
  }
  .ts-darkbold-wrapper::before { left: 0;  background: linear-gradient(to right,  {{ section.settings.bg_color }}, transparent); }
  .ts-darkbold-wrapper::after  { right: 0; background: linear-gradient(to left, {{ section.settings.bg_color }}, transparent); }
  .ts-darkbold-row { overflow: hidden; padding: 24px 0; }
  .ts-darkbold-row1 { margin-bottom: -20px; }
  .ts-darkbold-row1 .ts-darkbold-inner { transform: rotate(-7deg) scaleX(1.15); }
  .ts-darkbold-row2 .ts-darkbold-inner { transform: rotate(4deg)  scaleX(1.1);  }
  .ts-darkbold-row1 .ts-darkbold-track { animation: ts-darkbold-left calc({{ section.settings.speed }}s * 1.15) linear infinite; opacity: 0.15; }
  .ts-darkbold-row2 .ts-darkbold-track { animation: ts-darkbold-left  {{ section.settings.speed }}s             linear infinite; }
  .ts-darkbold-track span {
    color: {{ section.settings.text_color }};
    font-size: {{ section.settings.font_size }}px;
    font-weight: 900;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
</style>

<div class="ts-darkbold-wrapper">
  {% capture scroll_text1 %}{% for i in (1..10) %}{{ section.settings.text }} {{ section.settings.separator }} {% endfor %}{% endcapture %}
  {% capture scroll_text2 %}{% for i in (1..10) %}{{ section.settings.text2 }} {{ section.settings.separator2 }} {% endfor %}{% endcapture %}
  <div class="ts-darkbold-row ts-darkbold-row1">
    <div class="ts-darkbold-inner">
      <div class="ts-darkbold-track"><span>{{ scroll_text1 }}{{ scroll_text1 }}</span></div>
    </div>
  </div>
  <div class="ts-darkbold-row ts-darkbold-row2">
    <div class="ts-darkbold-inner">
      <div class="ts-darkbold-track"><span>{{ scroll_text2 }}{{ scroll_text2 }}</span></div>
    </div>
  </div>
</div>

{% endif %}

{% schema %}
{
  "name": "Text Scroll — Dark Bold",
  "tag": "section",
  "class": "ts-darkbold-section",
  "settings": [
    { "type": "checkbox", "id": "enabled", "label": "Aktiv", "default": true },
    { "type": "text",  "id": "text",      "label": "Scroll-Text",        "default": "SUMMER SALE" },
    { "type": "text",  "id": "separator", "label": "Trennzeichen",        "default": "★" },
    { "type": "range", "id": "speed",     "label": "Geschwindigkeit (s)", "min": 8, "max": 60, "step": 1, "default": 25 },
    { "type": "text",  "id": "text2",      "label": "Text Reihe 2",       "default": "NEW COLLECTION" },
    { "type": "text",  "id": "separator2", "label": "Trennzeichen Reihe 2","default": "◆" },
    { "type": "color", "id": "bg_color",   "label": "Hintergrundfarbe",   "default": "#0a0a0a" },
    { "type": "color", "id": "text_color", "label": "Textfarbe",           "default": "#ffffff" },
    { "type": "range", "id": "font_size",  "label": "Schriftgröße (px)",  "min": 28, "max": 88, "step": 4, "default": 56 }
  ],
  "presets": [{ "name": "Text Scroll — Dark Bold" }]
}
{% endschema %}