.rich-content {
  --content-gap: var(--s2a-spacing-8);

  position: relative;
  box-sizing: border-box;

  &.center {
    text-align: center;
  }

  &.hero {
    height: 640px;
  }

  &.dark {
    background-color: unset;
  }

  .foreground .content {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: var(--content-gap);
    position: relative;
    z-index: 2;

    [class*="body-"]:not(.action-area) {
      max-width: 680px;
    }

    .eyebrow:has(picture) {
      color: var(--s2a-color-content-knockout);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--s2a-spacing-xs);

      picture, img {
        width: 24px;
        height: 24px;
      }
    }
  }

  &.center .foreground .content {
    align-items: center;
  }

  .action-area {
    margin-top: calc(var(--s2a-spacing-24) - var(--content-gap));
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--content-gap);
  }

  &.left-split .action-area {
    align-items: center;

    .con-button.transparent {
      text-decoration: underline;
    }
  }

  &.jump-link {
    color: var(--s2a-color-content-knockout);
    z-index: 1;
    padding-block-start: var(--s2a-layout-sm);
    padding-block-end: var(--s2a-spacing-4xl);

    &.hero {
      height: 584px;
      display: flex;
      flex-direction: column;
      padding-inline: 0;
      padding-block-start: var(--s2a-spacing-4xl);
    }

    .foreground {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .foreground .content {
      padding-inline: var(--s2a-spacing-lg);

      .heading-2,
      .eyebrow {
        max-width: 656px;
      }
    }

    .eyebrow {
      color: var(--s2a-color-content-knockout);
    }

    .eyebrow:has(picture, img) {
      display: flex;
      align-items: center;
      gap: var(--s2a-spacing-xs);

      picture,
      img {
        width: 24px;
        height: 24px;
      }
    }

    .jump-links {
      margin-top: auto;
      padding-inline: var(--s2a-spacing-lg);

      ul {
        display: flex;
        flex-direction: column;
        gap: var(--s2a-spacing-md);
        align-items: flex-start;
        list-style: none;
        margin: 0;
        padding: 0;
      }
    }

    .jump-link-anchor {
      display: flex;
      gap: var(--s2a-spacing-xs);
      align-items: center;
      text-decoration: none;
      color: var(--s2a-color-content-knockout);

      &:hover .jump-link-badge {
        background: var(--s2a-color-transparent-white-16);
        backdrop-filter: blur(4px);
      }

      &:focus-visible .jump-link-badge {
        backdrop-filter: blur(4px);
        background: var(--s2a-color-transparent-white-32);
      }

      &:active .jump-link-badge {
        background: var(--s2a-color-background-default);

        &::after {
          background-color: var(--s2a-color-content-default);
        }
      }
    }

    .jump-link-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border-radius: var(--s2a-border-radius-xs);
      background: var(--s2a-color-transparent-white-32);
      border: 1px solid var(--s2a-color-transparent-white-24);
      transition: background-color 0.2s ease, color 0.2s ease;
      flex-shrink: 0;
      color: var(--s2a-color-content-knockout);

      &::after {
        content: '';
        display: block;
        width: 12px;
        height: 12px;
        background-color: currentColor;
        mask-image: url('./assets/arrow.svg');
        mask-repeat: no-repeat;
        mask-size: contain;
      }
    }
  }
}

.section {
  &:has(.rich-content.hero) {
    box-sizing: border-box;
    height: 640px;

    &.has-background .section-background {
      max-width: 100vw;
      margin: 0 auto;
      z-index: 1;

      img {
        object-position: top center;
      }
    }
  }
}

.section.bento .rich-content.grid-full-width {
  margin-block-end: calc(var(--s2a-spacing-lg) - var(--grid-gutter));
}

.section.bento .rich-content.grid-full-width ~ .rich-content.grid-full-width {
  margin-inline-start: 0;
  margin-block-end: 0;
}

.section.has-background:has(.rich-content.hero) .section-background picture::after {
  content: '';
  position: absolute;
  background: linear-gradient(180deg, #000 10.13%, var(--s2a-color-transparent-black-00) 70.89%, var(--s2a-color-transparent-black-00) 75.53%, #000 95%);
  inset: 0;
  z-index: 1;
}

.section:not(.has-background):has(.rich-content.hero) {
  background: linear-gradient(180deg, #000 10.13%, var(--s2a-color-transparent-black-00) 70.89%, var(--s2a-color-transparent-black-00) 75.53%, #000 95%), var(--s2a-color-background-default);
}

.section:has(.rich-content.jump-link.hero) {
  height: 584px;
}

.section.has-background:has(.rich-content.jump-link.hero) .section-background picture::after {
  background: linear-gradient(180deg, var(--s2a-color-transparent-black-80) -0.02%, var(--s2a-color-transparent-black-50) 39.99%, var(--s2a-color-transparent-black-20) 59.99%, var(--s2a-color-transparent-black-80) 100%);
}

.section:not(.has-background):has(.rich-content.jump-link.hero) {
  background: linear-gradient(180deg, var(--s2a-color-transparent-black-80) 0%, var(--s2a-color-transparent-black-00) 39%, var(--s2a-color-transparent-black-00) 74%, var(--s2a-color-transparent-black-80) 100%), var(--s2a-color-background-default);
}

@media (width >= 768px) {
  .section.has-background:has(.rich-content.jump-link.hero) .section-background picture::after {
    background: linear-gradient(180deg, var(--s2a-color-transparent-black-80) -0.02%, var(--s2a-color-transparent-black-00) 39.45%, var(--s2a-color-transparent-black-00) 74.49%, var(--s2a-color-transparent-black-80) 100%);
  }

  .section:has(+ .section.parallax-video-garage-door .rich-content.video),
  .section.parallax-video-garage-door:has(.rich-content.video),
  .section.parallax-video-garage-door:has(.rich-content.video) ~ .section {
    --rc-sweep-offset: 230px;
  }

  .rich-content.narrow .content [class*="heading-"]:not(.action-area) {
    max-width: 680px;
  }

  .rich-content.narrow-xs .content [class*="heading-"]:not(.action-area) {
    max-width: 560px;
  }

  .rich-content .content [class*="body-"]:not(.action-area) {
    min-width: 560px;
    width: calc((100% / var(--grid-columns)) * 8);
  }

  .rich-content.narrow .content [class*="body-"]:not(.action-area),
  .rich-content.narrow-xs .content [class*="body-"]:not(.action-area) {
    max-width: 415px;
    min-width: initial;
  }

  .section:has(.rich-content.jump-link.hero) {
    height: auto;
  }

  .rich-content.jump-link {
    padding-block-start: var(--s2a-layout-md);
    padding-block-end: var(--s2a-spacing-4xl);

    &.hero {
      height: 580px;
      padding-block-start: var(--s2a-layout-sm);
    }

    .foreground .content,
    .jump-links { padding-inline: var(--s2a-spacing-xl); }

    .foreground .content {
      .heading-2,
      .eyebrow { max-width: 530px; }
    }

    .jump-links ul {
      flex-direction: row;
      gap: var(--s2a-spacing-xl);
      align-items: center;
    }
  }

  .section.bento .rich-content.grid-full-width {
    margin-inline-start: var(--s2a-spacing-xs);
    margin-block-end: calc(var(--s2a-spacing-lg) - var(--grid-gutter));
  }
}

@media (width >= 1024px) {
  .section:has(.rich-content.hero) {
    height: 1040px;
  }

  .rich-content {
    &.hero {
      height: 1040px;

      &.max-width-8 .foreground {
        --grid-content-width: var(--grid-width-8);
      }

      &.max-width-10 .foreground {
        --grid-content-width: var(--grid-width-10);
      }
    }

    &.left-split .foreground .content {
      display: table;
      width: 100%;

      > :not(.action-area):not(:first-child) {
        margin-block-start: var(--content-gap);
      }

      .action-area {
        display: table-cell;
        vertical-align: middle;
        width: 1%;
        white-space: nowrap;
        padding-inline-start: var(--s2a-layout-sm);

        > :not(:first-child) {
          margin-inline-start: var(--content-gap);
        }
      }
    }

    &.jump-link {
      padding-block-start: var(--s2a-layout-lg);
      padding-block-end: var(--s2a-layout-sm);

      &.hero {
        height: 814px;
      }

      .foreground .content,
      .jump-links { padding-inline: var(--s2a-spacing-2xl); }

      .foreground .content {
        padding-block-start: 0;

        .heading-2,
        .eyebrow { max-width: 656px; }
      }
    }
  }
}

@media (width >= 1280px) {
  .rich-content.jump-link.hero {
    padding-block-start: var(--s2a-layout-xl);
  }
}

@media (width >= 1440px) {
  .section.bento {
    .rich-content.grid-full-width {
      margin-inline-start: var(--s2a-spacing-md);
      margin-block-end: calc(var(--s2a-spacing-2xl) - var(--grid-gutter));
    }
  }

  .rich-content.narrow .content [class*="heading-"]:not(.action-area) {
    max-width: 800px;
  }

  .rich-content.narrow-xs .content [class*="heading-"]:not(.action-area) {
    max-width: 660px;
  }

  .rich-content.narrow .content [class*="body-"]:not(.action-area),
  .rich-content.narrow-xs .content [class*="body-"]:not(.action-area) {
    max-width: 515px;
  }
}

@media (width >= 1920px) {
  .section.has-background:has(.rich-content.hero) .section-background img {
    object-position: unset;
  }

  .section:has(.rich-content.jump-link.hero) {
    height: 1085px;
  }

  .rich-content.jump-link.hero {
    height: 1085px;
    padding-inline: var(--grid-padding);

    .foreground .content,
    .jump-links { padding-inline: 0; }
  }
}

.rich-content.video {
  background: var(--s2a-color-background-inverse);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2a-spacing-lg);
  padding-top: calc(var(--s2a-layout-sm) + var(--rc-pull-offset));
  padding-bottom: var(--s2a-layout-lg);
  overflow: clip;

  .action-area {
    margin-top: 0;
  }

  img {
    border-radius: var(--s2a-border-radius-24);
    border: 9px solid var(--s2a-color-transparent-white-04);
    max-width: 214px;
  }

  .media {
    position: relative;
    z-index: 1;
    width: 100%;

    p {
      margin: 0;
    }

    .video-container {
      position: relative;
      box-sizing: border-box;
      max-width: 214px;
      margin-inline: auto;
      aspect-ratio: 9 / 16;
      border-radius: var(--s2a-border-radius-24);
      border: 9px solid var(--s2a-color-transparent-white-04);
      background: var(--s2a-color-transparent-white-04);
      backdrop-filter: blur(var(--s2a-blur-md));
      overflow: hidden;
      transform-origin: center bottom;
      width: 100%;

      video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        outline: none;
      }
    }

    .action-area {
      display: flex;
      justify-content: center;
      margin-top: var(--s2a-spacing-lg);

      &.dark {
        background-color: unset;
      }
    }
  }

  .cta-area {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
  }

  .action-area.dark {
    background-color: unset;
  }
}

@media (width >= 768px) {
  .rich-content.video {
    img {
      max-width: unset;
    }

    .media {
      padding-inline: unset;
      max-width: var(--grid-width-10);

      .video-container {
        max-width: unset;
        margin-inline: unset;
        aspect-ratio: 16 / 9;

        video {
          height: auto;
        }
      }

      .action-area {
        margin-top: var(--s2a-spacing-xl);
      }
    }
  }
}

.section:has(.rich-content.video) {
  background: var(--s2a-color-background-inverse);

  &.has-background {
    .section-background {
      overflow: hidden;

      &:not(:has(~ .rich-content.video.no-overlay)) {
        img {
          filter: blur(var(--s2a-blur-md));
          transform: scale(1.08);
        }

        &::after {
          content: '';
          position: absolute;
          inset: 0;
          background: var(--s2a-color-transparent-black-48);
        }
      }
    }

    .rich-content.video {
      background: transparent;
    }
  }
}

@property --rc-pull-offset {
  syntax: '<length>';
  inherits: true;
  initial-value: 80px;
}

@property --rc-sweep-offset {
  syntax: '<length>';
  inherits: true;
  initial-value: 200px;
}

/* mobile */
.section:has(+ .section.parallax-video-garage-door .rich-content.video),
.section.parallax-video-garage-door:has(.rich-content.video),
.section.parallax-video-garage-door:has(.rich-content.video) ~ .section {
  --rc-pull-offset: 80px;
  --rc-sweep-offset: 200px;
  --rc-sweep-peek: var(--s2a-border-radius-lg);
  --rc-video-enter-scale: 1.15;
  --rc-video-enter-y: 30px;
}

@media (width >= 768px) {
  .section:has(+ .section.parallax-video-garage-door .rich-content.video),
  .section.parallax-video-garage-door:has(.rich-content.video),
  .section.parallax-video-garage-door:has(.rich-content.video) ~ .section {
    --rc-video-enter-y: 15vh;
  }
}

@media (width >= 1024px) {
  .rich-content.video {
    gap: var(--s2a-spacing-xl);
  }

  .rich-content.video img {
    max-width: 1200px; 
    margin: 0 auto;
  }

  .rich-content.video .media .video-container { 
    max-width: 1200px; 
    margin: 0 auto;
  }

  .section:has(+ .section.parallax-video-garage-door .rich-content.video),
  .section.parallax-video-garage-door:has(.rich-content.video),
  .section.parallax-video-garage-door:has(.rich-content.video) ~ .section {
    --rc-pull-offset: 120px;
    --rc-sweep-offset: 200px;
  }
}

@media (width >= 1920px) {
  .section:has(+ .section.parallax-video-garage-door .rich-content.video),
  .section.parallax-video-garage-door:has(.rich-content.video),
  .section.parallax-video-garage-door:has(.rich-content.video) ~ .section {
    --rc-pull-offset: 70px;
    --rc-sweep-offset: 280px;
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes rc-video-top-door {
      from { transform: translateY(-20vh); }
      to { transform: translateY(0); }
    }

    @keyframes rc-video-exit {
      from { transform: translateY(0); }
      to { transform: translateY(20vh); }
    }

    @keyframes rc-video-enter {
      from { transform: scale(var(--rc-video-enter-scale)) translateY(var(--rc-video-enter-y)); }
      to { transform: scale(1) translateY(0); }
    }

    @keyframes rc-video-cta-follow-mobile {
      from { transform: translateY(14vh); }
      to { transform: translateY(0); }
    }

    .section:has(+ .section.parallax-video-garage-door .rich-content.video) {
      z-index: 2;
    }

    .section.parallax-video-garage-door:has(.rich-content.video) {
      overflow: clip;
      animation: rc-video-top-door ease-out both, rc-video-exit ease-out both;
      animation-timeline: view(), view();
      animation-range: entry 0% entry 70%, exit 40% exit 90%;
      animation-composition: replace, add;
    }

    .section.parallax-video-garage-door .rich-content.video :is(.cta-area, .media .action-area) :is(a, button) {
      animation: rc-video-cta-follow-mobile linear both;
      animation-duration: auto;
      animation-timeline: --rc-video-enter;
      animation-range: entry 0% exit 0%;
      scroll-margin-top: calc(100vh - 200px);
    }

    .section.parallax-video-garage-door .rich-content.video {
      timeline-scope: --rc-video-enter;
    }

    .section.parallax-video-garage-door .rich-content.video img,
    .section.parallax-video-garage-door .rich-content.video .video-container {
      view-timeline-name: --rc-video-enter;
      view-timeline-axis: block;
      animation: rc-video-enter linear both;
      animation-duration: auto;
      animation-timeline: --rc-video-enter;
      animation-range: entry 0% exit 0%;
    }

    @media (width >= 1440px) {
      .section.parallax-video-garage-door:has(.rich-content.video) {
        animation-range: entry 0% entry 70%, exit 50% exit 90%;
      }
    }
  }
}