@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero::after,
  .engine-card::before,
  .contribution::after,
  .equity::before,
  .fashion-shot::before {
    content: "";
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease-out;
  }

  .hero::after {
    inset: 0;
    z-index: 0;
    background: radial-gradient(390px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), #ff2f9119, transparent 75%);
  }

  .engine-card::before,
  .contribution::after,
  .equity::before {
    inset: 0;
    z-index: 0;
    background: radial-gradient(330px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), #ff2f9128, transparent 72%);
  }

  .fashion-shot::before {
    inset: 0;
    z-index: 1;
    background: radial-gradient(250px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), #ff2f9135, transparent 75%);
  }

  .hero.pointer-engaged::after,
  .engine-card.pointer-engaged::before,
  .contribution.pointer-engaged::after,
  .equity.pointer-engaged::before,
  .fashion-shot.pointer-engaged::before {
    opacity: 1;
  }

  .engine-card,
  .contribution,
  .equity {
    isolation: isolate;
  }

  .engine-card > *,
  .contribution > *,
  .equity > * {
    z-index: 1;
  }

  .contribution-index {
    position: relative;
  }

  .engine-card.reveal.visible,
  .contribution.reveal.visible {
    transition: transform .3s cubic-bezier(.2, .7, .2, 1), opacity .7s ease-out, background .35s, box-shadow .35s;
  }

  .engine-card.reveal.visible.pointer-engaged,
  .contribution.reveal.visible.pointer-engaged {
    transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-3px);
    transition-duration: .16s;
    will-change: transform;
  }

  .fashion-shot.pointer-engaged img {
    transform: translate3d(var(--photo-x, 0px), var(--photo-y, 0px), 0) scale(1.08);
  }

  .fashion-shot figcaption {
    z-index: 2;
    transition: transform .35s ease-out;
  }

  .fashion-shot.pointer-engaged figcaption {
    transform: translateY(-4px);
  }

  .timeline-item .timeline-side,
  .timeline-item .timeline-copy h3 {
    transition: color .28s ease-out, transform .28s ease-out;
  }

  .timeline-item:hover .timeline-side {
    color: #ff2f91;
    transform: translateX(4px);
  }

  .timeline-item:hover .timeline-copy h3 {
    color: #ff8dc4;
  }

  .timeline-item:hover .timeline-node {
    background: #ff2f91;
    border-color: #ff2f91;
    box-shadow: 0 0 0 7px #ff2f9122, 0 0 22px #ff2f91a0;
  }

  .header-link span,
  .unlock-button svg,
  .scroll-cue .scroll-icon,
  .engine-card .card-arrow {
    transition: transform .25s cubic-bezier(.2, .7, .2, 1), color .25s, opacity .3s;
  }

  .header-link span {
    display: inline-block;
  }

  .header-link:hover span,
  .header-link:focus-visible span,
  .engine-card:hover .card-arrow,
  .engine-card:focus-visible .card-arrow {
    transform: translate(3px, -3px);
  }

  .unlock-button:hover svg,
  .unlock-button:focus-visible svg {
    transform: rotate(-10deg) translateY(-2px);
  }

  .scroll-cue:hover .scroll-icon,
  .scroll-cue:focus-visible .scroll-icon {
    transform: translateY(4px);
  }
}