.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: auto;
      min-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-2xs);
      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;
      }
    }
  }

  &.light-asset {
    .jump-link-anchor {
      .jump-link-badge {
        background: var(--s2a-color-transparent-black-64);
        backdrop-filter: blur(4px);
      }

      &:hover .jump-link-badge {
        background: var(--s2a-color-transparent-black-80);
      }

      &:focus-visible .jump-link-badge {
        background: var(--s2a-color-transparent-black-64);
      }

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

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

.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;
      }
    }
  }

  &.parallax-garage-door-reveal:has(.rich-content.merch-moment) {
    .foreground {
      animation-range: cover -10% cover 90%;

      p.body-lg a {
        scroll-margin-bottom: calc(100vh - 200px);
      }
    }
  }

  &:has(.rich-content.merch-moment) {
    display: grid;
    grid-template-rows: auto auto;
    box-sizing: border-box;
    height: auto;

    .rich-content.merch-moment {
      grid-row: 1;
    }

    p:has(span[is="inline-price"]) {
      font-weight: var(--s2a-font-weight-adobe-clean-bold);
    }

    &.has-background .section-background {

      &,
      & > * {
        position: relative;
        inset: unset;
      }

      img {
        width: 100%;
        height: auto;
        aspect-ratio: 375 / 434;
        object-fit: cover;
        object-position: center top;
        animation: unset;
      }
    }
  }

  &.dark:has(.rich-content.merch-moment) {
    background: var(--s2a-color-gray-1000);
  }
}

.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(.rich-content.hero) {
  --rc-hero-overlay: linear-gradient(180deg, var(--s2a-color-gray-1000) 10.13%, var(--s2a-color-transparent-black-00) 70.89%, var(--s2a-color-transparent-black-00) 75.53%, var(--s2a-color-gray-1000) 95%);
}

.section.has-background:has(.rich-content.hero) .section-background picture::after {
  content: '';
  position: absolute;
  background: var(--rc-hero-overlay);
  inset: 0;
}

.section:not(.has-background):has(.rich-content.hero) {
  background: var(--rc-hero-overlay), var(--s2a-color-background-default);
}

.section:has(.rich-content.jump-link.hero) {
  --rc-hero-overlay: linear-gradient(180deg, var(--s2a-color-transparent-black-80) -0.02%, var(--s2a-color-transparent-black-48) 39.99%, var(--s2a-color-transparent-black-24) 59.99%, var(--s2a-color-transparent-black-80) 100%);
  height: auto;
  min-height: 584px;
}

.rich-content.hero .hero-overlay-source {
  display: none;
}

@media (width >= 768px) {
  .section:has(.rich-content.merch-moment).has-background .section-background img {
    width: 100%;
    margin-inline: auto;
    aspect-ratio: unset;
    display: block;
  }

  .section:has(.rich-content.jump-link.hero) {
    --rc-hero-overlay: 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.media),
  .section.parallax-video-garage-door:has(.rich-content.media),
  .section.parallax-video-garage-door:has(.rich-content.media) ~ .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,
  .rich-content.indent {
    margin-inline-start: var(--s2a-spacing-md);
    margin-block-end: calc(var(--s2a-spacing-lg) - var(--grid-gutter));
  }

  .rich-content.indent {
    margin-block-end: 0;
  }
}

@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) {
  .section:has(.rich-content.merch-moment).has-background .section-background img {
    width: 100%;
    height: auto;
  }

  .rich-content.jump-link.hero {
    padding-block-start: var(--s2a-layout-xl);
  }
}

@media (width >= 1440px) {
  .section:has(.rich-content.merch-moment).has-background .section-background img {
    max-width: 1612px;
  }

  .section.bento {
    .rich-content.grid-full-width,
    .rich-content.indent {
      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.media {
  background: var(--s2a-color-background-inverse);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2a-spacing-lg);
  padding-block: calc(var(--rc-media-spacing-top, var(--s2a-spacing-4xl)) + var(--rc-pull-offset)) var(--rc-media-spacing-bottom, var(--s2a-spacing-4xl));
  overflow: clip;
  --grid-margin-width: 0px; /* Keep unit for calc */

  @media (width >= 768px) {
    --grid-margin-width: var(--grid-margin-width-base);
  }

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

  img {
    border-radius: var(--s2a-border-radius-24);
  }

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

    p {
      margin: 0;
    }

    .video-container,
    picture {
      display: block;
      width: 100%;
      border-radius: var(--s2a-border-radius-24);
      overflow: hidden;
      transform-origin: center bottom;
    }

    .video-container {
      border: 9px solid var(--s2a-color-transparent-white-04);
      background: var(--s2a-color-transparent-white-04);
      backdrop-filter: blur(var(--s2a-blur-md));

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

    picture img {
      display: block;
      width: 100%;
      height: auto;
      object-fit: cover;
    }

    @media (width >= 768px) {
      .video-container video,
      picture img {
        height: 100%;
      }
    }

    .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;
  }

  &.glass-border .media-cell :is(picture, .video-container) {
    --glass-frame-width: 4px;
    --glass-stroke: 0.6px;
    --glass-fill: rgb(255 255 255 / 5%);
    box-sizing: border-box;
    border: var(--s2a-border-width-2) solid var(--s2a-color-transparent-white-24);
    padding: var(--glass-frame-width);
    background: var(--glass-fill);
    background-clip: padding-box;
    box-shadow: inset 0 0 0 var(--glass-stroke) var(--glass-fill);
    border-radius: var(--s2a-border-radius-8);
    backdrop-filter: blur(var(--s2a-blur-md));
    overflow: hidden;

    @media (width >= 768px) {
      --glass-frame-width: 6.5px;
      --glass-stroke: 1px;
      box-sizing: unset;
    }

    @media (width >= 1024px) {
      border-radius: var(--s2a-border-radius-16);
    }

    @media (width >= 1280px) {
      --glass-frame-width: 7.4px;
      --glass-stroke: 1.2px;
    }

    @media (width >= 1440px) {
      --glass-frame-width: 9.4px;
      --glass-stroke: 1.6px;
    }

    :is(img, video) {
      max-width: 100%;
      border-radius: var(--s2a-border-radius-4);

      @media (width >= 1024px) {
        border-radius: var(--s2a-border-radius-8);
      }
    }
  }
}

@media (width >= 768px) {
  .rich-content.media {
    padding-block: var(--rc-media-spacing-top, var(--s2a-layout-sm)) var(--rc-media-spacing-bottom, var(--s2a-layout-sm));

    img {
      max-width: unset;
    }

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

      .video-container,
      picture {
        margin-inline: unset;
        aspect-ratio: 16 / 9;
        width: 100%;
      }

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

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

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

      &:not(:has(~ .rich-content.media.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.media {
      background: transparent;
    }
  }
}

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

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

@keyframes stack-title-stagger {
  0% {
    opacity: 0;
    transform: translate(0, var(--parallax-translate-y));
  }

  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes stack-title-card-match {
  100% { translate: 0 calc(-1 * var(--title-catchup)); }
}

@media (width < 768px) {
  .section.bento.stack-mobile:where(.bento-stack-ready) > .rich-content {
    --parallax-translate-y: -60px;
    --scrollport-h: min(var(--phone-h), 100svh);
    --cards-release-offset: max(0px, calc(var(--scrollport-h) - var(--card-front-y) - var(--card-height)));
    --title-release-offset: max(0px, calc(var(--scrollport-h) - var(--stack-pin-top) - var(--title-height)));
    --title-catchup: calc(var(--card-front-y) + var(--card-height) - var(--stack-pin-top) - var(--title-height));

    position: sticky;
    top: var(--stack-pin-top);
    z-index: 1;
    margin: 0;
    line-height: 1;
    will-change: opacity, transform, translate;
    animation:
      stack-title-stagger var(--parallax-easing) both,
      stack-title-card-match var(--parallax-easing) both;
    animation-timeline: --stack-title-vt, --section-vt;
    animation-range: cover 0% cover 30%, exit var(--cards-release-offset) exit var(--title-release-offset);
  }
}

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

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

@media (width >= 1024px) {
  .rich-content.media {
    gap: var(--s2a-spacing-3xl);
    padding-block: var(--rc-media-spacing-top, var(--s2a-layout-lg)) var(--rc-media-spacing-bottom, var(--s2a-layout-lg));
  }

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

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

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

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

@supports not (animation-timeline: view()) {
  @media (width < 768px) {
    .section.bento.stack-mobile > .rich-content {
      position: static;
      transform: none;
      opacity: 1;
      animation: none;
    }
  }
}

@media (prefers-reduced-motion: reduce) and (width < 768px) {
  .section.bento.stack-mobile > .rich-content {
    position: static;
    transform: none;
    opacity: 1;
    animation: none;
  }
}

@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.media) {
      z-index: 2;
    }

    .section.parallax-video-garage-door:has(.rich-content.media) {
      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.media :is(.cta-area, .media-cell .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.media {
      timeline-scope: --rc-video-enter;
    }

    .section.parallax-video-garage-door .rich-content.media .media-cell :is(.video-container, picture) {
      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.media) {
        animation-range: entry 0% entry 70%, exit 50% exit 90%;
      }
    }

    /* Mobile video is full-width at a fixed size — no scale-in-on-scroll,
       so the CTA that rides the same timeline stays put too. */
    @media (width < 768px) {
      .section.parallax-video-garage-door .rich-content.media {
        :is(.cta-area, .media-cell .action-area) :is(a, button),
        .media-cell :is(.video-container, picture) {
          animation: none;
        }
      }
    }
  }
}