.u5m-cta-row {
  padding: var(--section-padding-medium);
  margin: var(--section-margin-none);

  .center {
    display: flex;
    flex-direction: row;
    gap: 50px;
    justify-content: space-between;

    &:not(.top-aligned):not(.bottom-aligned) {
      align-items: center;
    }

    &.top-aligned {
      align-items: flex-start;
    }

    &.center-aligned {
      align-items: center;
    }

    &.bottom-aligned {
      align-items: flex-end;
    }

    .intro-content {
      .heading {
        &:has(span) {
          display: flex;
          flex-direction: column;
        }
        span {
          -webkit-text-stroke-width: 2px;
          -webkit-text-stroke-color: var(--orange-1);
          -webkit-text-fill-color: transparent;
        }
      }
    }

    .media {
      max-width: 580px;
      width: 100%;
      box-shadow: var(--shadow1);

      &.is-image {
        img {
          width: 100%;
          height: auto;
          border-radius: var(--border3);
        }
      }

      &.is-video {
        border-radius: var(--border3);
        overflow: hidden;
      }

      &.is-none {}
    }
  }
}

/****************************************/
/* ********** media queries ********** */
/**************************************/

/* tablet */
@media (max-width: 1024px) {
  .u5m-cta-row {
    .center:not(.media-none) {
      align-items: flex-start;
    }
  }
}

/* tablet mid */
@media (max-width: 991px) {
  .u5m-cta-row {
    .center:not(.media-none) {
      flex-direction: column;

      .media {
        max-width: 100%;
      }
    }
  }
}

/****************************************/
/* ********* cta reveal variant ******* */
/**************************************/

.u5m-cta-row.cta-reveal {
  display: grid;
  padding: 0;

  .cta-reveal-layer {
    grid-row: 1;
    grid-column: 1;
    padding: var(--section-padding-medium);
  }

  .reveal-layer {
    pointer-events: none;
    display: flex;
    flex-direction: column;
    width: 100%;
    animation: cta-triangle-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% contain 100%;

    .center {
      flex: 1;
      display: flex;
      flex-direction: row;
      gap: 50px;
      justify-content: space-between;
      align-items: center;
    }

    .intro-content {
      .eyebrow,
      .heading,
      .description,
      p,
      .intro-content-upper a:not([class*="btn"]) {
        color: inherit;
        -webkit-text-fill-color: inherit;
        -webkit-text-stroke-width: 0;
      }

      .heading span {
        -webkit-text-stroke-color: white;
        -webkit-text-fill-color: transparent;
      }
    }

  }
}

@keyframes cta-triangle-reveal {
  0%   { clip-path: polygon(0% 100%, 50% 100%, 100% 100%, 100% 100%, 0% 100%); }
  50%  { clip-path: polygon(0% 100%, 50%   0%, 100% 100%, 100% 100%, 0% 100%); }
  100% { clip-path: polygon(0%   0%, 50%   0%, 100%   0%, 100% 100%, 0% 100%); }
}

/* curved mountain peak — progressive enhancement for browsers that support shape() */
/* sides are straight lines; control points lie on the line extensions for smooth joins */
@keyframes cta-triangle-reveal-curved {
  0% {
    clip-path: shape(from 0% 100%, line to 44% 100%, curve to 56% 100% with 48% 100% / 52% 100%, line to 100% 100%, line to 100% 100%, line to 0% 100%, close);
  }
  50% {
    clip-path: shape(from 0% 100%, line to 44% 13%, curve to 56% 13% with 48% 4% / 52% 4%, line to 100% 100%, line to 100% 100%, line to 0% 100%, close);
  }
  100% {
    clip-path: shape(from 0% 0%, line to 44% 0%, curve to 56% 0% with 48% 0% / 52% 0%, line to 100% 0%, line to 100% 100%, line to 0% 100%, close);
  }
}

@supports (clip-path: shape(from 0% 0%, close)) {
  .u5m-cta-row.cta-reveal .reveal-layer {
    animation-name: cta-triangle-reveal-curved;
  }
}

/* wider, gentler curve on narrow viewports — completes fill earlier while scrolling */
@media (max-width: 767px) {
  .u5m-cta-row.cta-reveal .reveal-layer {
    animation-name: cta-triangle-reveal-mobile;
    animation-range: entry -10% cover 55%;
  }
}

@keyframes cta-triangle-reveal-mobile {
  0%   { clip-path: polygon(0% 100%, 50% 100%, 100% 100%, 100% 100%, 0% 100%); }
  30%  { clip-path: polygon(0% 100%, 28% 25%, 72% 25%, 100% 100%, 100% 100%, 0% 100%); }
  65%,
  100% { clip-path: polygon(0%   0%, 50%   0%, 100%   0%, 100% 100%, 0% 100%); }
}

@keyframes cta-triangle-reveal-curved-mobile {
  0% {
    clip-path: shape(from 0% 100%, line to 28% 100%, curve to 72% 100% with 38% 100% / 62% 100%, line to 100% 100%, line to 100% 100%, line to 0% 100%, close);
  }
  30% {
    clip-path: shape(from 0% 100%, line to 28% 25%, curve to 72% 25% with 38% 15% / 62% 15%, line to 100% 100%, line to 100% 100%, line to 0% 100%, close);
  }
  65%,
  100% {
    clip-path: shape(from 0% 0%, line to 28% 0%, curve to 72% 0% with 38% 0% / 62% 0%, line to 100% 0%, line to 100% 100%, line to 0% 100%, close);
  }
}

@supports (clip-path: shape(from 0% 0%, close)) {
  @media (max-width: 767px) {
    .u5m-cta-row.cta-reveal .reveal-layer {
      animation-name: cta-triangle-reveal-curved-mobile;
    }
  }
}