/* =========================================
   GLOBAL
========================================= */

.main-wrapper {
  opacity: 0;
  visibility: hidden;
}


/* =========================================
   INITIAL STATES
========================================= */

.title--tag,
.heading--80,
.progress--bottom .max--718,
.image-wrapper.is--progress1,
.image-wrapper.is--progress2,
.stamp {
  visibility: hidden;
}


/* =========================================
   SVG SUBTITLE
========================================= */

.sub--title {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;

  color: inherit;

  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 40%,
    rgba(0, 0, 0, 0.95) 44%,
    rgba(0, 0, 0, 0.75) 48%,
    rgba(0, 0, 0, 0.35) 52%,
    transparent 57%
  );

  mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 40%,
    rgba(0, 0, 0, 0.95) 44%,
    rgba(0, 0, 0, 0.75) 48%,
    rgba(0, 0, 0, 0.35) 52%,
    transparent 57%
  );

  -webkit-mask-size: 240% 100%;
  mask-size: 240% 100%;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;

  will-change:
    -webkit-mask-position,
    mask-position;
}

.sub--title path {
  fill: currentColor;
}


/* =========================================
   IMAGES
========================================= */

.image-wrapper.is--progress1,
.image-wrapper.is--progress2 {
  overflow: hidden;
}

.image-wrapper.is--progress1 img,
.image-wrapper.is--progress2 img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transform: scale(1.06);

  will-change: transform;
}


/* =========================================
   PERFORMANCE
========================================= */

.title--tag,
.heading--80,
.progress--bottom .max--718,
.stamp {
  will-change: transform, opacity;
}


/* =========================================
   WEBFLOW EDITOR
========================================= */

.w-editor .main-wrapper {
  opacity: 1 !important;
  visibility: visible !important;
}

.w-editor .title--tag,
.w-editor .heading--80,
.w-editor .progress--bottom .max--718,
.w-editor .image-wrapper.is--progress1,
.w-editor .image-wrapper.is--progress2,
.w-editor .stamp {
  visibility: visible !important;
  opacity: 1 !important;
}

.w-editor .sub--title {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}