{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }

  .color-scheme-{{ section.id }}.color-custom {
    --color-background: {{ section.settings.custom_colors_background.red }}, {{ section.settings.custom_colors_background.green }}, {{ section.settings.custom_colors_background.blue }};
    --gradient-background: {% if section.settings.custom_gradient_background != blank %}{{ section.settings.custom_gradient_background }}{% else %}{{ section.settings.custom_colors_background }}{% endif %};
    --color-foreground: {{ section.settings.custom_colors_text.red }}, {{ section.settings.custom_colors_text.green }}, {{ section.settings.custom_colors_text.blue }};
  }

  .transformation-container-{{ section.id }} * { margin: 0; padding: 0; box-sizing: border-box; }
  .transformation-container-{{ section.id }} {
    background: {{ section.settings.background_color }};
    min-height: auto; display: block;
    overflow: hidden; position: relative;
    margin: 0; padding: 0;
  }
  .transformation-wrapper-{{ section.id }} { width: 100%; max-width: 100%; padding: 0 20px; margin: 0; }

  .transformation-slider-{{ section.id }} { 
    position: relative; 
    width: 100%; 
    height: {{ section.settings.slider_height }}px; 
    background: transparent;
    overflow: hidden; 
    --step: calc({{ section.settings.item_width }}px + {{ section.settings.item_gap }}px);
  }
  
  .transformation-side-{{ section.id }} { position: absolute; width: 50%; height: 100%; overflow: hidden; }
  .transformation-before-{{ section.id }} { left: 0; background: transparent; }
  .transformation-after-{{ section.id }} { right: 0; background: transparent; }

  .transformation-divider-{{ section.id }} { 
    position: absolute !important; 
    left: 50% !important; 
    top: 20% !important; 
    width: {{ section.settings.divider_width }}px !important; 
    height: 60% !important;
    background: {{ section.settings.divider_color }} !important; 
    transform: translateX(-50%) !important;
    z-index: 1000 !important; 
    box-shadow: 0 0 20px {{ section.settings.divider_color }} !important;
    display: block !important;
    opacity: 1 !important;
  }

  .transformation-label-{{ section.id }} { 
    position: absolute; 
    top: 20px; 
    padding: 10px 30px; 
    border-radius: {{ section.settings.label_border_radius }}px; 
    color: white; 
    font-weight: bold; 
    font-size: {{ section.settings.label_font_size }}px;
    text-transform: {{ section.settings.label_text_transform }}; 
    letter-spacing: 2px; 
    z-index: 5; 
  }
  .transformation-label-before-{{ section.id }} { 
    left: 30px; 
    background: {{ section.settings.before_label_color }}; 
  }
  .transformation-label-after-{{ section.id }} { 
    right: 30px; 
    background: {{ section.settings.after_label_color }}; 
  }

  .transformation-track-{{ section.id }} { 
    display: flex; 
    position: absolute; 
    top: 50%; 
    left: 0; 
    gap: {{ section.settings.item_gap }}px; 
    animation-timing-function: linear; 
    animation-iteration-count: infinite; 
    transform: translate(-50%, -50%); 
  }
  
  .transformation-before-{{ section.id }} .transformation-track-{{ section.id }} { 
    animation: transformationFlowRight-{{ section.id }} {{ section.settings.animation_speed }}s linear infinite; 
  }
  .transformation-after-{{ section.id }} .transformation-track-{{ section.id }} { 
    animation: transformationFlowRight-{{ section.id }} {{ section.settings.animation_speed }}s linear infinite; 
  }
  
  @keyframes transformationFlowRight-{{ section.id }} { 
    0% { transform: translate(-50%, -50%); } 
    100% { transform: translate(0, -50%); } 
  }

  .transformation-item-{{ section.id }} { 
    flex-shrink: 0; 
    width: {{ section.settings.item_width }}px; 
    height: {{ section.settings.item_width }}px; 
    border-radius: {{ section.settings.item_border_radius }}px; 
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); 
    transition: transform 0.3s ease; 
    position: relative; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 3em; 
    color: white; 
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3); 
  }
  
  .transformation-item-{{ section.id }}:hover { 
    transform: scale({{ section.settings.hover_scale }}); 
  }
  
  .transformation-item-{{ section.id }} img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    position: absolute; 
    top: 0; 
    left: 0; 
  }
  
  .transformation-before-{{ section.id }} .transformation-item-{{ section.id }} { 
    background: {{ section.settings.before_gradient_background }}; 
  }
  .transformation-after-{{ section.id }} .transformation-item-{{ section.id }} { 
    background: {{ section.settings.after_gradient_background }}; 
  }

  @media (max-width: 768px) {
    .transformation-slider-{{ section.id }} { 
      height: {{ section.settings.mobile_slider_height }}px; 
      --step: calc(({{ section.settings.item_width }}px * 0.75) + {{ section.settings.item_gap }}px); 
    }
    .transformation-item-{{ section.id }} { 
      width: calc({{ section.settings.item_width }}px * 0.75); 
      height: calc({{ section.settings.item_width }}px * 0.75); 
    }
    .transformation-label-{{ section.id }} { 
      font-size: {{ section.settings.mobile_label_font_size }}px; 
      padding: 8px 20px; 
    }
  }
{%- endstyle -%}

<div class="isolate{% unless section.settings.full_width %} page-width{% endunless %} content-for-grouping animate-section animate--hidden {{ section.settings.visibility }}">
<div class='animate-item animate-item--child index-0'>
  {% if section.settings.display_id %}
    <copy-button class="section-id-btn button" data-content="#shopify-section-{{ section.id }}" data-success="false">
      <span class="copy-text">Click to copy section ID</span>
      <span class="copy-success">ID copied successfully!</span>
    </copy-button>
  {% endif %}
  
  <div class="transformation-slider content-container color-{{ section.settings.color_scheme }} color-scheme-{{ section.id }} gradient{% if section.settings.full_width %} transformation-slider--full-width content-container--full-width{% endif %} section-{{ section.id }}-padding">
    <div class="transformation-container-{{ section.id }}">
      <div class="transformation-wrapper-{{ section.id }}">
        <div class="transformation-slider-{{ section.id }}">
          
          <!-- Before Section -->
          <div class="transformation-side-{{ section.id }} animate-item transformation-before-{{ section.id }}">
            <div class="transformation-label-{{ section.id }} transformation-label-before-{{ section.id }}">
              {{ section.settings.before_label }}
            </div>
            <div class="transformation-track-{{ section.id }} animate-item">
              {% assign before_images = section.blocks | where: 'type', 'before_image' %}
              {% for block in before_images %}
                <div class="transformation-item-{{ section.id }}" {{ block.shopify_attributes }}>
                  {% if block.settings.image != blank %}
                    <img src="{{ block.settings.image | img_url: '400x' }}" 
                         alt="{{ block.settings.image.alt | default: 'Before image' }}" 
                         loading="lazy">
                  {% else %}
                    <span>{{ block.settings.fallback_text | default: 'Before' }}</span>
                  {% endif %}
                </div>
              {% endfor %}
              
              <!-- Duplicate images for seamless loop -->
              {% for block in before_images %}
                <div class="transformation-item-{{ section.id }}">
                  {% if block.settings.image != blank %}
                    <img src="{{ block.settings.image | img_url: '400x' }}" 
                         alt="{{ block.settings.image.alt | default: 'Before image repeat' }}" 
                         loading="lazy">
                  {% else %}
                    <span>{{ block.settings.fallback_text | default: 'Before' }}</span>
                  {% endif %}
                </div>
              {% endfor %}
            </div>
          </div>

          <!-- Divider -->
          <div class="transformation-divider-{{ section.id }} animate-item"></div>

          <!-- After Section -->
          <div class="transformation-side-{{ section.id }} animate-item transformation-after-{{ section.id }}">
            <div class="transformation-label-{{ section.id }} transformation-label-after-{{ section.id }}">
              {{ section.settings.after_label }}
            </div>
            <div class="transformation-track-{{ section.id }} animate-item">
              {% assign after_images = section.blocks | where: 'type', 'after_image' %}
              {% for block in after_images %}
                <div class="transformation-item-{{ section.id }}" {{ block.shopify_attributes }}>
                  {% if block.settings.image != blank %}
                    <img src="{{ block.settings.image | img_url: '400x' }}" 
                         alt="{{ block.settings.image.alt | default: 'After image' }}" 
                         loading="lazy">
                  {% else %}
                    <span>{{ block.settings.fallback_text | default: 'After' }}</span>
                  {% endif %}
                </div>
              {% endfor %}
              
              <!-- Duplicate images for seamless loop -->
              {% for block in after_images %}
                <div class="transformation-item-{{ section.id }}">
                  {% if block.settings.image != blank %}
                    <img src="{{ block.settings.image | img_url: '400x' }}" 
                         alt="{{ block.settings.image.alt | default: 'After image repeat' }}" 
                         loading="lazy">
                  {% else %}
                    <span>{{ block.settings.fallback_text | default: 'After' }}</span>
                  {% endif %}
                </div>
              {% endfor %}
            </div>
          </div>
          
        </div>
      </div>
    </div>
  </div>
</div>
</div>

{% schema %}
{
  "name": "Before/after auto slider",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "checkbox",
      "id": "display_id",
      "label": "Display section ID",
      "info": "ID is used in the Sections group section to merge 2 sections. ID can also be put inside any button link and the button will scroll to this section.",
      "default": false
    },
    {
      "type": "select",
      "id": "visibility",
      "options": [
        {
          "value": "desktop-hidden",
          "label": "Mobile only"
        },
        {
          "value": "mobile-hidden",
          "label": "Desktop only"
        },
        {
          "value": "always-display",
          "label": "All devices"
        }
      ],
      "label": "Display on",
      "default": "always-display"
    },
    {
      "type": "checkbox",
      "id": "full_width",
      "default": true,
      "label": "Full width"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "Accent 1"
        },
        {
          "value": "accent-2",
          "label": "Accent 2"
        },
        {
          "value": "background-1",
          "label": "Background 1"
        },
        {
          "value": "background-2",
          "label": "Background 2"
        },
        {
          "value": "inverse",
          "label": "Inverse"
        },
        {
          "value": "custom",
          "label": "Custom"
        }
      ],
      "default": "background-1",
      "label": "Color scheme",
      "info": "Custom color scheme is edited at the bottom of section settings."
    },

    {
      "type": "header",
      "content": "Slider Settings"
    },
    {
      "type": "color",
      "id": "background_color",
      "default": "#FFF4F4",
      "label": "Background color"
    },
    {
      "type": "text",
      "id": "before_label",
      "default": "Before",
      "label": "Before label"
    },
    {
      "type": "text",
      "id": "after_label",
      "default": "After",
      "label": "After label"
    },
    {
      "type": "range",
      "id": "slider_height",
      "min": 300,
      "max": 600,
      "step": 20,
      "unit": "px",
      "label": "Slider height (desktop)",
      "default": 400
    },
    {
      "type": "range",
      "id": "mobile_slider_height",
      "min": 260,
      "max": 500,
      "step": 20,
      "unit": "px",
      "label": "Slider height (mobile)",
      "default": 300
    },
    {
      "type": "range",
      "id": "item_width",
      "min": 150,
      "max": 300,
      "step": 10,
      "unit": "px",
      "label": "Item width",
      "default": 200
    },
    {
      "type": "range",
      "id": "item_gap",
      "min": 10,
      "max": 40,
      "step": 5,
      "unit": "px",
      "label": "Gap between items",
      "default": 20
    },
    {
      "type": "range",
      "id": "item_border_radius",
      "min": 0,
      "max": 30,
      "step": 1,
      "unit": "px",
      "label": "Item border radius",
      "default": 15
    },
    {
      "type": "range",
      "id": "animation_speed",
      "min": 10,
      "max": 40,
      "step": 2,
      "unit": "s",
      "label": "Animation speed",
      "default": 20
    },
    {
      "type": "range",
      "id": "hover_scale",
      "min": 1.0,
      "max": 1.2,
      "step": 0.1,
      "label": "Hover scale",
      "default": 1.1
    },
    {
      "type": "header",
      "content": "Divider Settings"
    },
    {
      "type": "color",
      "id": "divider_color",
      "default": "#8E1919",
      "label": "Divider color"
    },
    {
      "type": "range",
      "id": "divider_width",
      "min": 2,
      "max": 8,
      "step": 1,
      "unit": "px",
      "label": "Divider width",
      "default": 4
    },
    {
      "type": "header",
      "content": "Label Settings"
    },
    {
      "type": "color",
      "id": "before_label_color",
      "default": "#8E1919",
      "label": "Before label background"
    },
    {
      "type": "color",
      "id": "after_label_color",
      "default": "#8E1919",
      "label": "After label background"
    },
    {
      "type": "select",
      "id": "label_text_transform",
      "label": "Label text style",
      "options": [
        {
          "value": "uppercase",
          "label": "Uppercase"
        },
        {
          "value": "capitalize",
          "label": "Capitalize"
        },
        {
          "value": "none",
          "label": "Regular"
        }
      ],
      "default": "uppercase"
    },
    {
      "type": "range",
      "id": "label_border_radius",
      "min": 0,
      "max": 50,
      "step": 1,
      "unit": "px",
      "label": "Label border radius",
      "default": 25
    },
    {
      "type": "range",
      "id": "label_font_size",
      "min": 14,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Label font size (desktop)",
      "default": 18
    },
    {
      "type": "range",
      "id": "mobile_label_font_size",
      "min": 12,
      "max": 18,
      "step": 1,
      "unit": "px",
      "label": "Label font size (mobile)",
      "default": 14
    },
    {
      "type": "header",
      "content": "Gradient Backgrounds"
    },
    {
      "type": "color_background",
      "id": "before_gradient_background",
      "label": "Before items gradient",
      "default": "linear-gradient(135deg, #fccb90 0%, #d57eeb 100%)"
    },
    {
      "type": "color_background",
      "id": "after_gradient_background",
      "label": "After items gradient",
      "default": "linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%)"
    },
    {
      "type": "header",
      "content": "Section Padding"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding bottom",
      "default": 36
    },
    {
      "type": "header",
      "content": "Custom color scheme",
      "info": "Applied if Color scheme setting is set to Custom."
    },
    {
      "type": "color",
      "id": "custom_colors_background",
      "default": "#FFFFFF",
      "label": "Background color"
    },
    {
      "type": "color_background",
      "id": "custom_gradient_background",
      "label": "Gradient background",
      "info": "If added, replaces Background color when applicable."
    },

    {
      "type": "color",
      "id": "custom_colors_text",
      "default": "#2E2A39",
      "label": "Text"
    }
  ],
  "blocks": [
    {
      "type": "before_image",
      "name": "Before Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Before image"
        },
        {
          "type": "text",
          "id": "fallback_text",
          "label": "Fallback text",
          "default": "Before",
          "info": "Displayed when no image is uploaded"
        }
      ]
    },
    {
      "type": "after_image",
      "name": "After Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "After image"
        },
        {
          "type": "text",
          "id": "fallback_text",
          "label": "Fallback text",
          "default": "After",
          "info": "Displayed when no image is uploaded"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Before/after auto slider",
      "category": "Content",
      "blocks": [
        {
          "type": "before_image"
        },
        {
          "type": "before_image"
        },
        {
          "type": "before_image"
        },
        {
          "type": "after_image"
        },
        {
          "type": "after_image"
        },
        {
          "type": "after_image"
        }
      ]
    }
  ]
}
{% endschema %}