/* Shared by the isolated motion lab and every public page. */
:root {
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-heading-distance: 24px;
  --motion-text-distance: 16px;
  --motion-card-distance: 32px;
  --motion-heading-duration: 480ms;
  --motion-text-duration: 380ms;
  --motion-card-duration: 460ms;
  --motion-stagger: 45ms;
}

/* Touch entrances settle independently of flick momentum; stacked items
 * have almost no stagger. Narrow windows receive the same compact profile. */
@media (pointer: coarse), (max-width: 720px) {
  :root {
    --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --motion-heading-distance: 12px;
    --motion-text-distance: 8px;
    --motion-card-distance: 14px;
    --motion-heading-duration: 300ms;
    --motion-text-duration: 240ms;
    --motion-card-duration: 280ms;
    --motion-stagger: 15ms;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
  .utility { view-transition-name: utility; }
  .nav { view-transition-name: nav; }
  ::view-transition-group(nav),
  ::view-transition-group(utility) {
    animation-duration: 0s;
  }
  ::view-transition-old(nav), ::view-transition-old(utility) { animation: none; opacity: 0; }
  ::view-transition-new(nav), ::view-transition-new(utility) { animation: none; mix-blend-mode: normal; }

  [data-motion] {
    --motion-distance: var(--motion-card-distance);
    --motion-duration: var(--motion-card-duration);
    --motion-opacity: 0.25;
  }
  [data-motion="heading"] {
    --motion-distance: var(--motion-heading-distance);
    --motion-duration: var(--motion-heading-duration);
    --motion-opacity: 0.35;
  }
  [data-motion="text"] {
    --motion-distance: var(--motion-text-distance);
    --motion-duration: var(--motion-text-duration);
    --motion-opacity: 0.55;
  }
  [data-motion-state="pending"] {
    opacity: var(--motion-opacity);
    transform: translateY(var(--motion-distance));
  }
  [data-motion-state="entering"] {
    animation: content-in var(--motion-duration) var(--motion-ease)
      calc(var(--motion-order, 0) * var(--motion-stagger)) both;
  }
  /* Keyboard focus and open disclosures must always be usable immediately. */
  [data-motion]:focus-within {
    opacity: 1;
    transform: none;
    animation: none;
  }

  @supports (animation-timeline: view()) {
    .tl-step:not(:last-child)::after {
      display: block;
      background: var(--white);
      transform-origin: top;
      animation: tl-fill linear both;
      animation-timeline: view();
      animation-range: contain 0% contain 100%;
    }
    .tl-node {
      animation: tl-on linear both;
      animation-timeline: view();
      animation-range: cover 35% cover 45%;
    }
    .hero-mark img {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  html { scroll-behavior: smooth; }
}

@keyframes content-in {
  from {
    opacity: var(--motion-opacity);
    transform: translateY(var(--motion-distance));
  }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes tl-fill {
  from { transform: scaleY(0); }
}
@keyframes tl-on {
  to { background: var(--white); border-color: var(--white); color: var(--black); }
}
@keyframes drift {
  to { transform: translateY(-6%); opacity: 0.65; }
}

/* Desktop studies, integrated as optional enhancements. Text is never masked. */
@media (prefers-reduced-motion: no-preference) and (pointer: fine) and (min-width: 721px) {
  [data-photo-state="settling"] img {
    animation: photo-settle 850ms var(--motion-ease) both;
  }
  ::view-transition-group(product-photo) {
    animation-duration: 650ms;
    animation-timing-function: var(--motion-ease);
  }
  ::view-transition-old(product-photo) { animation: none; opacity: 0; }
  ::view-transition-new(product-photo) { animation: none; mix-blend-mode: normal; height: 100%; object-fit: cover; }
  html[data-shared-navigation]::view-transition-old(root) { animation: story-out 110ms linear both; }
  html[data-shared-navigation]::view-transition-new(root) { animation: story-in 180ms ease-out 220ms both; }
}

.motion-link::after, .rows a::after, .ngroup a::after {
  transition: transform 160ms var(--motion-ease), opacity 160ms linear;
}
.motion-link::after { content: ' →'; display: inline-block; opacity: .7; margin-left: 8px; }
.rows a { position: relative; padding-right: 40px; }
.rows a::after { content: '→'; position: absolute; right: 6px; top: 24px; opacity: .7; }
.rows a, .ngroup a {
  background: linear-gradient(currentColor,currentColor) left bottom / 0% 1px no-repeat;
  transition: background-size 180ms var(--motion-ease);
}
@media (hover: hover) and (pointer: fine) {
  .motion-link:hover::after, .rows a:hover::after, .ngroup a:hover::after { transform: translateX(6px); opacity: 1; }
  .rows a:hover, .ngroup a:hover { background-size: 100% 1px; }
}
.motion-link:focus-visible::after, .rows a:focus-visible::after, .ngroup a:focus-visible::after { transform: translateX(6px); opacity: 1; }
.rows a:focus-visible, .ngroup a:focus-visible { background-size: 100% 1px; }
@media (prefers-reduced-motion: reduce) {
  .motion-link::after, .rows a::after, .ngroup a::after, .rows a, .ngroup a { transition: none; }
}
@keyframes photo-settle { from { transform: scale(1.025); } to { transform: scale(1); } }
@keyframes story-out { to { opacity: 0; } }
@keyframes story-in { from { opacity: 0; } to { opacity: 1; } }