html {
  scrollbar-width: thin;
  scrollbar-color: var(--y-palette-slate) #f3f3f0;
}

html::-webkit-scrollbar { width: 6px; }
html::-webkit-scrollbar-track { background: #f3f3f0; }
html::-webkit-scrollbar-thumb { border-radius: 0; background: var(--y-palette-slate); }

/*
 * Editorial title entrance
 * Character clips create a continuous bottom-to-top reveal without changing
 * the heading's typography, size, letter spacing, or section layout.
 */
.motion_title {
  --title-duration: 820ms;
  --title-stagger: 24ms;
  --title-distance: 14px;
}

.motion_char_clip {
  display: inline-block;
  overflow: hidden;
  box-sizing: content-box;
  vertical-align: bottom;
  padding: .14em .06em .18em;
  margin: -.14em -.06em -.18em;
}

/* About uses the same reveal principle with a differently named inner span. */

.motion_char_space {
  display: inline-block;
  width: .26em;
}

.motion_char {
  display: inline-block;
  transform: translate3d(0, 0, 0);
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

html.is_motion_ready .motion_title:not(.is_inview) .motion_char {
  transform: translate3d(0, var(--title-distance), 0);
  opacity: .97;
}

html.is_motion_ready .motion_title.is_inview .motion_char {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  transition:
    transform var(--title-duration) cubic-bezier(.16, 1, .3, 1),
    opacity 520ms ease-out;
  transition-delay: calc(var(--char-index) * var(--title-stagger));
}

/* Article copy follows the title instead of popping up separately. */
.motion_article {
  will-change: transform, opacity, filter;
}

html.is_motion_ready .motion_article:not(.is_inview) {
  transform: translate3d(0, 16px, 0);
  opacity: 0;
  filter: blur(3px);
}

html.is_motion_ready .motion_article.is_inview {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  filter: blur(0);
  transition:
    transform 820ms cubic-bezier(.16, 1, .3, 1),
    opacity 700ms ease-out,
    filter 760ms ease-out;
  transition-delay: var(--article-delay, 150ms);
}

/* Existing restrained product/depth interactions. */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  .products_card .products_card_media img {
    transform: scale(1);
    transform-origin: 50% 50%;
    transition: transform 600ms cubic-bezier(.22, 1, .36, 1), opacity 420ms cubic-bezier(.22, 1, .36, 1);
  }
  .products_card:hover .products_card_media img { transform: scale(1.018); }
}

@media (max-width: 768px) {
  .motion_title {
    --title-duration: 720ms;
    --title-stagger: 18ms;
  }

  html.is_motion_ready .motion_article:not(.is_inview) {
    transform: translate3d(0, 12px, 0);
    filter: blur(2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion_char,
  .motion_article {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}

/* Proof cards: one restrained sequential entrance after the section title starts. */
.motion_proof_item {
  will-change: transform, opacity, filter;
}

html.is_motion_ready .proof:not(.is_inview) .motion_proof_item {
  transform: translate3d(0, 18px, 0);
  opacity: 0;
  filter: blur(2px);
}

html.is_motion_ready .proof.is_inview .motion_proof_item {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  filter: blur(0);
  transition:
    transform 780ms cubic-bezier(.16, 1, .3, 1),
    opacity 620ms ease-out,
    filter 700ms ease-out;
  transition-delay: calc(280ms + (var(--proof-index, 0) * 105ms));
}

@media (max-width: 768px) {
  html.is_motion_ready .proof:not(.is_inview) .motion_proof_item {
    transform: none;
    opacity: 1;
    filter: none;
  }

  html.is_motion_ready .proof.is_inview .motion_proof_item {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion_proof_item {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}

/* Scroll-linked masked image parallax: intentionally restrained for a calm editorial feel. */
.scroll_parallax_frame {
  overflow: hidden;
}

.scroll_parallax_media {
  transform: translate3d(0, var(--scroll-parallax-y, 0px), 0) scale(var(--scroll-parallax-scale, 1));
  transform-origin: center center;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .scroll_parallax_media {
    transform: none !important;
    will-change: auto;
  }
}

/* Keep the entrance and hover lift on one transform so they never overwrite each other. */
html.is_motion_ready .proof.is_inview .proof_card {
  transform: translate3d(0, var(--proof-lift, 0px), 0);
  transition-property: transform, opacity, filter;
  transition-duration: 560ms, 520ms, 520ms;
  transition-timing-function: cubic-bezier(.22, 1, .36, 1), ease, ease;
  transition-delay: 0ms;
}

html.is_motion_ready .proof.is_inview .proof_number,
html.is_motion_ready .proof.is_inview .proof_text {
  transition: transform 560ms cubic-bezier(.22, 1, .36, 1), opacity 280ms ease;
}

@media (prefers-reduced-motion: reduce) {
  html.is_motion_ready .proof.is_inview .proof_card:hover .proof_number,
  html.is_motion_ready .proof.is_inview .proof_card:hover .proof_text,
  html.is_motion_ready .proof.is_inview .proof_card:focus-visible .proof_number,
  html.is_motion_ready .proof.is_inview .proof_card:focus-visible .proof_text {
    transform: none;
  }
}