/* ADT Scissor Effect - styles (namespaced) */
:root{
  --adtsc-angle: 8deg;
  --adtsc-height: 100vh;
  --adtsc-left:  #0f0f0f;
  --adtsc-right: #b10016;
}
.adtsc{
  position: relative;
  min-height: calc(var(--adtsc-height) + 40vh);
  background: #0b0b0b;
}
.adtsc__pin{
  position: relative;
  height: var(--adtsc-height);
  overflow: hidden;
}
.adtsc__scene{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  z-index: 0;
}
.adtsc__bg, .adtsc__bg img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.adtsc__copy{
  position: relative; z-index: 1; text-align: center; color: #fff;
  padding: 2rem;
}
.adtsc__copy h2{
  font-family: "Returns", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: clamp(2rem, 5vw, 6rem);
  letter-spacing: .5px; margin: 0 0 .5rem 0;
}
.adtsc__copy p{ font-size: clamp(1rem, 1.3vw, 1.4rem); opacity: .9; margin: 0; }

.adtsc__blade{
  position: absolute; inset: 0;
  will-change: clip-path, transform;
  backface-visibility: hidden;
  transform: translateZ(0) skewY(var(--adtsc-angle));
  pointer-events: none;
}
.adtsc__blade--left  { background: var(--adtsc-left);  z-index: 2; }
.adtsc__blade--right { background: var(--adtsc-right); z-index: 3; }

/* initial diagonal seam */
.adtsc__blade--left{
  clip-path: polygon(0 0, 50% 0, calc(50% - 1px) 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}
.adtsc__blade--right{
  clip-path: polygon(50% 0, 100% 0, 100% 100%, calc(50% + 1px) 100%);
  -webkit-clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .adtsc__blade{
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%);
    transform: none;
  }
}