@layer motion {
  [data-reveal]:not(.is-armed) .section__head,
  [data-reveal]:not(.is-armed) .grid--cards > *,
  [data-reveal]:not(.is-armed) .bento > *,
  [data-reveal]:not(.is-armed) .split-sticky__head,
  [data-reveal]:not(.is-armed) .split-sticky__stack > .card,
  [data-reveal]:not(.is-armed) .split-sticky__stack > .eyebrow,
  [data-reveal]:not(.is-armed) .cta-banner,
  [data-reveal]:not(.is-armed) .inline-video,
  [data-reveal]:not(.is-armed) .marquee,
  [data-reveal]:not(.is-armed) .deliverable,
  [data-reveal]:not(.is-armed) .accordion__row,
  [data-reveal]:not(.is-armed) .lead-block,
  [data-reveal]:not(.is-armed) .gallery,
  [data-reveal]:not(.is-armed) .prose,
  [data-reveal]:not(.is-armed).hero .hero__copy > *,
  [data-reveal]:not(.is-armed).hero .hero__media,
  [data-reveal]:not(.is-armed).footer .footer__inner > *,
  [data-reveal]:not(.is-armed).reader-title .container > *,
  .hero--slider:not(.is-ready) .hero__slide.is-active .hero__copy > *,
  [data-reveal-item]:not(.is-in) {
    opacity: 0;
    transform: translateY(1.75rem);
    transition:
      opacity var(--dur-4) var(--ease-out),
      transform var(--dur-4) var(--ease-out);
    transition-delay: calc(var(--i, 0) * var(--stagger));
  }

  [data-reveal-item].is-in {
    opacity: 1;
    transform: none;
  }

  @media (hover: hover) and (pointer: fine) {
    [data-reveal-item].is-in.card:hover {
      transform: translateY(-2px);
    }
  }

  [data-reveal-item] .card__media img,
  [data-reveal-item] .card__media .media-ph,
  [data-reveal-item].hero__media img,
  [data-reveal-item] .deliverable__media img {
    transform: scale(1.06);
    transition: transform var(--dur-5) var(--ease-out);
    transition-delay: calc(var(--i, 0) * var(--stagger));
  }

  [data-reveal-item].is-in .card__media img,
  [data-reveal-item].is-in .card__media .media-ph,
  [data-reveal-item].is-in.hero__media img,
  [data-reveal-item].is-in .deliverable__media img {
    transform: none;
  }

  .marquee {
    overflow: hidden;
  }

  .marquee__track {
    display: flex;
    gap: var(--sp-10);
    width: max-content;
    animation: marquee-x 40s linear infinite;
  }

  .marquee:hover .marquee__track,
  .marquee:focus-within .marquee__track {
    animation-play-state: paused;
  }

  .hero--slider .hero__slide {
    opacity: 0;
    transition: opacity var(--dur-5) var(--ease-out);
  }

  .hero--slider .hero__slide.is-active {
    opacity: 1;
  }

  .hero--slider .hero__slide.is-active .hero__media img {
    animation: media-drift 8s var(--ease-out) both;
  }

  @media (hover: none), (pointer: coarse) {
    .hero--slider .hero__slide.is-active .hero__media img {
      animation: none;
    }
  }

  .gallery__slide {
    opacity: 0;
    transition: opacity var(--dur-5) var(--ease-out);
  }

  .gallery__slide.is-active {
    opacity: 1;
  }

  .hero__dot[aria-current="true"]::after,
  .gallery__dot[aria-current="true"]::after {
    transform: scaleX(1.6);
    transform-origin: center;
    transition: transform var(--dur-3) var(--ease-standard), background-color var(--dur-2) var(--ease-standard);
  }

  [data-category] {
    transition:
      opacity var(--dur-3) var(--ease-standard),
      transform var(--dur-3) var(--ease-standard);
  }

  [data-category].is-filtered-out {
    opacity: 0;
    transform: scale(0.98);
    pointer-events: none;
  }

  .modal-scrim {
    opacity: 0;
    transition: opacity var(--dur-2) var(--ease-standard);
  }

  .modal-scrim.is-open {
    opacity: 1;
  }

  .modal-panel {
    opacity: 0;
    transform: scale(0.98);
    box-shadow: var(--shadow-3);
    transition:
      opacity var(--dur-3) var(--ease-standard),
      transform var(--dur-3) var(--ease-standard);
  }

  .modal-panel.is-open {
    opacity: 1;
    transform: none;
  }

  .menu {
    transform: translateY(-0.75rem);
    transition:
      opacity var(--dur-3) var(--ease-standard),
      visibility var(--dur-3) var(--ease-standard),
      transform var(--dur-3) var(--ease-out);
  }

  .menu.is-open {
    transform: none;
  }

  @media (hover: hover) and (pointer: fine) {
    .hero__arrow,
    .gallery__arrow {
      transition: transform var(--dur-2) var(--ease-standard), background-color var(--dur-2) var(--ease-standard);
    }

    .hero__arrow--prev:hover,
    .gallery__arrow--prev:hover {
      transform: translateY(-50%) translateX(-3px);
    }

    .hero__arrow--next:hover,
    .gallery__arrow--next:hover {
      transform: translateY(-50%) translateX(3px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    [data-reveal],
    [data-reveal] .section__head,
    [data-reveal] .grid--cards > *,
    [data-reveal] .hero__copy > *,
    [data-reveal] .hero__media,
    [data-reveal] .footer__inner > *,
    .hero--slider .hero__copy > *,
    [data-reveal-item],
    [data-reveal-item]:not(.is-in) {
      opacity: 1;
      transform: none;
      transition: none;
    }

    [data-reveal-item] .card__media img,
    [data-reveal-item] .card__media .media-ph,
    [data-reveal-item].hero__media img,
    [data-reveal-item] .deliverable__media img {
      transform: none;
      transition: none;
    }

    .marquee__track {
      animation: none;
    }

    .hero--slider .hero__slide.is-active .hero__media img {
      animation: none;
    }

    .header,
    .header--hidden,
    .menu,
    .menu__nav a,
    .card,
    .card__media img,
    .card__media .media-ph,
    .hero--slider .hero__slide,
    .gallery__slide,
    .modal-panel,
    .accordion__mark::before,
    .accordion__mark::after,
    [data-category] {
      transform: none !important;
      translate: none !important;
    }

    .accordion__panel {
      transition: none;
    }

    .widget__btn {
      animation: none;
    }

    .menu,
    .menu__nav a {
      transition: none;
      transform: none;
      opacity: 1;
    }
  }
}

@keyframes marquee-x {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes widget-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 45%, transparent);
  }
  70% {
    box-shadow: 0 0 0 10px transparent;
  }
}

@keyframes media-drift {
  from {
    transform: scale(1.06);
  }
  to {
    transform: scale(1);
  }
}