/* Shape Dividers — utilities & presets */
.sd{
  position:relative;
  overflow:visible;
  isolation:isolate;
  --sd-edge-current: var(--sd-edge-h, var(--sd-edge-base, 120px));
  --sd-mask-image: none;
}
.sd-clip-top{ transform: scaleY(-1); }
.sd-clip-top > *{ transform: scaleY(-1); } /* re-flip content */
.sd-mask.sd-clip-top{ transform:none; }
.sd-mask.sd-clip-top > *{ transform:none; }

:root{
  --sd-edge-base: 120px;
  --sd-edge-h: 120px;
}

@media (max-width: 1024px){
  .sd{ --sd-edge-current: var(--sd-edge-h-tablet, var(--sd-edge-current)); }
}

@media (max-width: 768px){
  :root{ --sd-edge-h: 80px; }
  .sd{ --sd-edge-current: var(--sd-edge-h-mobile, var(--sd-edge-current)); }
}

/* Helper for content that might need z-index */
.sd-inner{ position: relative; z-index: 1; }
.sd-stack-next{ margin-bottom: calc(var(--sd-edge-current, var(--sd-edge-base, 120px)) * -1); }

@supports (mix-blend-mode: destination-out) {
  /* Mask-based dividers */
  .sd-mask{
    position: relative;
    isolation: isolate;
  }

  .sd-mask > *{
    position: relative;
    z-index: 1;
  }

  .sd-mask::before,
  .sd-mask::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    pointer-events:none;
    display:none;
    background-color:#000;
    mix-blend-mode:destination-out;
    z-index:2;
    -webkit-mask-image: var(--sd-mask-image);
    mask-image: var(--sd-mask-image);
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
  }

  .sd-mask.sd-clip-bottom::after{
    display:block;
    bottom: calc(-1 * var(--sd-edge-current));
    height: calc(var(--sd-edge-current) + 2px);
    background-position: center bottom;
  }

  .sd-mask.sd-clip-top::before{
    display:block;
    top: calc(-1 * var(--sd-edge-current));
    height: calc(var(--sd-edge-current) + 2px);
    background-position: center top;
    transform: scaleY(-1);
    transform-origin: 50% 0;
  }

  .sd-mask.sd-clip-top.sd-clip-bottom::before,
  .sd-mask.sd-clip-top.sd-clip-bottom::after{
    display:block;
  }
}

/* --- Presets (starter set) --- */
/* Torn – Light */
.sd-torn-light{
  clip-path: polygon(
    0% 0%,100% 0%,
    100% calc(100% - var(--sd-edge-current)),
    95% calc(100% - var(--sd-edge-current) + 6px),
    85% calc(100% - var(--sd-edge-current) + 2px),
    75% calc(100% - var(--sd-edge-current) + 8px),
    65% calc(100% - var(--sd-edge-current) + 3px),
    55% calc(100% - var(--sd-edge-current) + 9px),
    45% calc(100% - var(--sd-edge-current) + 4px),
    35% calc(100% - var(--sd-edge-current) + 7px),
    25% calc(100% - var(--sd-edge-current) + 3px),
    15% calc(100% - var(--sd-edge-current) + 8px),
    0%  calc(100% - var(--sd-edge-current))
  );
}

/* Torn – Medium */
.sd-torn-medium{
  clip-path: polygon(
    0% 0%,100% 0%,
    100% calc(100% - var(--sd-edge-current)),
    97% calc(100% - var(--sd-edge-current) + 10px),
    92% calc(100% - var(--sd-edge-current) + 2px),
    86% calc(100% - var(--sd-edge-current) + 12px),
    78% calc(100% - var(--sd-edge-current) + 4px),
    71% calc(100% - var(--sd-edge-current) + 14px),
    63% calc(100% - var(--sd-edge-current) + 6px),
    56% calc(100% - var(--sd-edge-current) + 16px),
    48% calc(100% - var(--sd-edge-current) + 6px),
    41% calc(100% - var(--sd-edge-current) + 15px),
    33% calc(100% - var(--sd-edge-current) + 5px),
    26% calc(100% - var(--sd-edge-current) + 12px),
    18% calc(100% - var(--sd-edge-current) + 2px),
    11% calc(100% - var(--sd-edge-current) + 10px),
    0%  calc(100% - var(--sd-edge-current))
  );
}

/* Torn – Heavy */
.sd-torn-heavy{
  clip-path: polygon(
    0% 0%,100% 0%,
    100% calc(100% - var(--sd-edge-current)),
    98% calc(100% - var(--sd-edge-current) + 18px),
    92% calc(100% - var(--sd-edge-current) + 8px),
    84% calc(100% - var(--sd-edge-current) + 22px),
    74% calc(100% - var(--sd-edge-current) + 10px),
    64% calc(100% - var(--sd-edge-current) + 24px),
    54% calc(100% - var(--sd-edge-current) + 12px),
    44% calc(100% - var(--sd-edge-current) + 22px),
    34% calc(100% - var(--sd-edge-current) + 10px),
    24% calc(100% - var(--sd-edge-current) + 20px),
    14% calc(100% - var(--sd-edge-current) + 8px),
    0%  calc(100% - var(--sd-edge-current))
  );
}

/* Wave – Soft */
.sd-wave-soft{
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% calc(100% - var(--sd-edge-current)),
    90% calc(100% - var(--sd-edge-current) + 10px),
    80% calc(100% - var(--sd-edge-current) + 6px),
    70% calc(100% - var(--sd-edge-current) + 1px),
    60% calc(100% - var(--sd-edge-current) - 6px),
    50% calc(100% - var(--sd-edge-current) - 10px),
    40% calc(100% - var(--sd-edge-current) - 6px),
    30% calc(100% - var(--sd-edge-current) - 1px),
    20% calc(100% - var(--sd-edge-current) + 6px),
    10% calc(100% - var(--sd-edge-current) + 10px),
    0%  calc(100% - var(--sd-edge-current))
  );
}

/* Wave – Steep */
.sd-wave-steep{
  clip-path: polygon(
    0% 0%,100% 0%,
    100% calc(100% - var(--sd-edge-current)),
    85% calc(100% - var(--sd-edge-current) + 18px),
    70% calc(100% - var(--sd-edge-current) + 4px),
    55% calc(100% - var(--sd-edge-current) - 12px),
    40% calc(100% - var(--sd-edge-current) - 18px),
    25% calc(100% - var(--sd-edge-current) - 4px),
    10% calc(100% - var(--sd-edge-current) + 12px),
    0%  calc(100% - var(--sd-edge-current))
  );
}

/* Double Wave */
.sd-double-wave{
  clip-path: polygon(
    0% 0%,100% 0%,
    100% calc(100% - var(--sd-edge-current)),
    90% calc(100% - var(--sd-edge-current) + 8px),
    80% calc(100% - var(--sd-edge-current) - 4px),
    70% calc(100% - var(--sd-edge-current) - 10px),
    60% calc(100% - var(--sd-edge-current) - 2px),
    50% calc(100% - var(--sd-edge-current) + 10px),
    40% calc(100% - var(--sd-edge-current) - 2px),
    30% calc(100% - var(--sd-edge-current) - 10px),
    20% calc(100% - var(--sd-edge-current) - 4px),
    10% calc(100% - var(--sd-edge-current) + 8px),
    0%  calc(100% - var(--sd-edge-current))
  );
}

/* Angle */
.sd-angle{
  clip-path: polygon(0% 0%,100% 0%,100% calc(100% - var(--sd-edge-current)/2),0% 100%);
}

/* Zigzag – Soft */
.sd-zigzag-soft{
  clip-path: polygon(
    0% 0%,100% 0%,
    100% calc(100% - var(--sd-edge-current)),
    90% 100%,80% calc(100% - var(--sd-edge-current)),
    70% 100%,60% calc(100% - var(--sd-edge-current)),
    50% 100%,40% calc(100% - var(--sd-edge-current)),
    30% 100%,20% calc(100% - var(--sd-edge-current)),
    10% 100%,0%  calc(100% - var(--sd-edge-current))
  );
}

/* Zigzag – Hard */
.sd-zigzag-hard{
  clip-path: polygon(
    0% 0%,100% 0%,
    100% calc(100% - var(--sd-edge-current)),
    95% 100%,85% calc(100% - var(--sd-edge-current)),
    75% 100%,65% calc(100% - var(--sd-edge-current)),
    55% 100%,45% calc(100% - var(--sd-edge-current)),
    35% 100%,25% calc(100% - var(--sd-edge-current)),
    15% 100%,5%  calc(100% - var(--sd-edge-current)),
    0%  calc(100% - var(--sd-edge-current))
  );
}

/* Scallop */
.sd-scallop{
  clip-path: ellipse(55% 20% at 50% calc(100% - var(--sd-edge-current)));
  /* Fallback look if ellipse not enough: consider polygon scallop points */
}

/* Cloud (soft bumps) */
.sd-cloud{
  clip-path: polygon(
    0% 0%,100% 0%,
    100% calc(100% - var(--sd-edge-current)),
    92% calc(100% - var(--sd-edge-current) + 8px),
    84% calc(100% - var(--sd-edge-current) - 2px),
    76% calc(100% - var(--sd-edge-current) + 12px),
    68% calc(100% - var(--sd-edge-current) - 4px),
    60% calc(100% - var(--sd-edge-current) + 10px),
    52% calc(100% - var(--sd-edge-current) - 2px),
    44% calc(100% - var(--sd-edge-current) + 12px),
    36% calc(100% - var(--sd-edge-current) - 4px),
    28% calc(100% - var(--sd-edge-current) + 10px),
    20% calc(100% - var(--sd-edge-current) - 2px),
    12% calc(100% - var(--sd-edge-current) + 12px),
    0%  calc(100% - var(--sd-edge-current))
  );
}

/* Ridge (mountain) */
.sd-ridge{
  clip-path: polygon(
    0% 0%,100% 0%,
    100% calc(100% - var(--sd-edge-current)),
    85% calc(100% - var(--sd-edge-current) - 8px),
    70% calc(100% - var(--sd-edge-current) + 6px),
    55% calc(100% - var(--sd-edge-current) - 12px),
    40% calc(100% - var(--sd-edge-current) + 10px),
    25% calc(100% - var(--sd-edge-current) - 6px),
    10% calc(100% - var(--sd-edge-current) + 8px),
    0%  calc(100% - var(--sd-edge-current))
  );
}

/* Mask preset bindings */
.sd-brush-rip{
  --sd-mask-image: url('../assets/masks/brush-rip.svg');
}

.sd-paper-tear{
  --sd-mask-image: url('../assets/masks/paper-tear.png');
}

.sd-grunge-4{
  --sd-mask-image: url('../assets/masks/grunge-4.svg');
}

.sd-grunge-5{
  --sd-mask-image: url('../assets/masks/grunge-5.svg');
}

.sd-grunge-2{
  --sd-mask-image: url('../assets/masks/grunge-2.svg');
}

.sd-grunge-3{
  --sd-mask-image: url('../assets/masks/grunge-3.svg');
}

.sd-grunge-1{
  --sd-mask-image: url('../assets/masks/grunge-1.svg');
}

.sd-rugged-7{
  --sd-mask-image: url('../assets/masks/rugged-7.svg');
}

.sd-texture-layer4{
  --sd-mask-image: url('../assets/masks/texture-layer4.svg');
}

.sd-rugged-6{
  --sd-mask-image: url('../assets/masks/rugged-6.svg');
}

.sd-rugged-4{
  --sd-mask-image: url('../assets/masks/rugged-4.svg');
}

.sd-rugged-5{
  --sd-mask-image: url('../assets/masks/rugged-5.svg');
}

.sd-rugged-1{
  --sd-mask-image: url('../assets/masks/rugged-1.svg');
}

.sd-texture-layer3{
  --sd-mask-image: url('../assets/masks/texture-layer3.svg');
}

.sd-texture-layer2{
  --sd-mask-image: url('../assets/masks/texture-layer2.svg');
}

.sd-rugged-2{
  --sd-mask-image: url('../assets/masks/rugged-2.svg');
}

.sd-texture-layer1{
  --sd-mask-image: url('../assets/masks/texture-layer1.svg');
}

.sd-rugged-3{
  --sd-mask-image: url('../assets/masks/rugged-3.svg');
}

.sd-paper-texture{
  --sd-mask-image: url('../assets/masks/paper-texture.svg');
}