/* Distortion Slider — fullscreen WebGL image, outlined title swiper,
   bottom-left description + counter (Gronn showcase port). */

.distortion-slider{
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #0f1010;
}

.distortion-slider .dst-canvas{
  position: absolute;
  inset: 0;
  z-index: 1;
}

.distortion-slider .dst-canvas canvas{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Full-bleed darkening layer over the WebGL image, under the titles. One
   opacity per slider (set in the widget's Style tab), so the media can be
   dimmed for legibility without touching the shader. */
.distortion-slider .dst-overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #000;
  opacity: 0;
  pointer-events: none;
}

.distortion-slider .dst-blur{
  position: absolute;
  left: 0;
  top: 0;
  width: 35%;
  height: 100%;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  z-index: 2;
  pointer-events: none;
}

/* Split layout (reference index.html): the media doesn't fill the screen —
   the left side stays the section's background colour and the WebGL canvas
   (plus its overlay) is pinned to the right. Width comes from the widget's
   "Media Width" control; the blur strip is dropped so the left is flat. */
.distortion-slider.is-split{
  background: #000;
}

.distortion-slider.is-split .dst-canvas,
.distortion-slider.is-split .dst-overlay{
  left: auto;
  right: 0;
  width: 64%;
}

.distortion-slider.is-split .dst-blur{
  display: none;
}

.distortion-slider .dst-swiper{
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
}

.distortion-slider .dst-swiper .swiper-slide{
  display: flex;
  align-items: center;
  width: fit-content !important;
  /* Full-height column so the whole slide area is hoverable (matches the
     reference: pointing anywhere in a slide activates that portfolio item,
     not only the title glyphs). 80px side padding matches the reference's
     centered slider, which sets how many titles fit on screen at once. */
  height: 100%;
  padding: 0 80px;
  cursor: pointer;
}

.distortion-slider .dst-text{
  font-family: 'Urbanist';
  font-size: 80px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff;
  text-decoration: none;
  user-select: none;
  transition: color .3s ease-in-out;
}

.distortion-slider .dst-text.active{
  transition: color 1s cubic-bezier(0.87, 0, 0.13, 1);
  color: #fff;
}

.distortion-slider .dst-footer{
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0 0 60px 60px;
  z-index: 4;
  color: #fff;
}

.distortion-slider .dst-category{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: .6;
  margin-bottom: 14px;
}

.distortion-slider .dst-description{
  font-size: 14px;
  font-weight: 500;
  line-height: 26px;
  width: 320px;
  margin-bottom: 40px;
}

.distortion-slider .dst-counter{
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
}

.distortion-slider .dst-counter-number{
  display: inline-block;
}

.distortion-slider .dst-counter-total{
  opacity: .5;
}

.distortion-slider .dst-images{
  display: none;
}

@media screen and (max-width: 1024px) {

  .distortion-slider .dst-text{
    font-size: 56px;
  }

  .distortion-slider .dst-swiper .swiper-slide{
    padding: 0 40px;
  }

  .distortion-slider .dst-footer{
    padding: 0 0 45px 45px;
  }
}

@media screen and (max-width: 580px) {

  .distortion-slider .dst-blur{
    width: 0;
  }

  .distortion-slider .dst-text{
    font-size: 40px;
    white-space: normal;
    text-align: center;
  }

  .distortion-slider .dst-swiper .swiper-slide{
    justify-content: center;
    padding: 0 24px;
  }

  .distortion-slider .dst-footer{
    padding: 0 24px 30px 24px;
  }

  .distortion-slider .dst-description{
    width: 100%;
    margin-bottom: 24px;
  }
}