/* Shared editorial motion for the inner pages. The page is fully readable without JS. */
@media (prefers-reduced-motion: no-preference) {
  .jm-enabled .jm-title,
  .jm-enabled .jm-kicker,
  .jm-enabled .jm-copy,
  .jm-enabled .jm-visual,
  .jm-enabled .jm-cascade-item {
    transition-timing-function: cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--jm-delay, 0ms);
    will-change: opacity, translate;
  }

  .jm-enabled .jm-title {
    transition-property: opacity, translate, clip-path;
    transition-duration: .8s, 1.05s, 1.05s;
  }
  .jm-enabled .jm-title:not(.is-revealed) {
    opacity: 0;
    translate: 0 38px;
    clip-path: inset(0 0 16% 0);
  }
  .jm-enabled .jm-title.is-revealed {
    opacity: 1;
    translate: none;
    clip-path: inset(0);
  }
  .jm-enabled .jm-title em {
    transition: opacity .8s cubic-bezier(.22, 1, .36, 1) .2s;
  }
  .jm-enabled .jm-title:not(.is-revealed) em { opacity: .25; }

  .jm-enabled .jm-kicker {
    transition-property: opacity, translate;
    transition-duration: .7s, .85s;
  }
  .jm-enabled .jm-kicker:not(.is-revealed) {
    opacity: 0;
    translate: -16px 0;
  }
  .jm-enabled .jm-kicker.is-revealed { opacity: 1; translate: none; }

  .jm-enabled .jm-copy {
    transition-property: opacity, translate;
    transition-duration: .8s, .95s;
  }
  .jm-enabled .jm-copy:not(.is-revealed) {
    opacity: 0;
    translate: 0 19px;
  }
  .jm-enabled .jm-copy.is-revealed { opacity: 1; translate: none; }

  .jm-enabled .jm-visual {
    transition-property: opacity, translate, scale, clip-path;
    transition-duration: .85s, 1.2s, 1.2s, 1.1s;
  }
  .jm-enabled .jm-visual:not(.is-revealed) {
    opacity: 0;
    translate: 0 23px;
    scale: .985;
    clip-path: inset(0 0 12% 0);
  }
  .jm-enabled .jm-visual.is-revealed {
    opacity: 1;
    translate: none;
    scale: none;
    clip-path: inset(0);
  }

  .jm-enabled .jm-cascade-item {
    transition-property: opacity, translate;
    transition-duration: .7s, .85s;
  }
  .jm-enabled .jm-cascade-item:not(a):not(button):not(.is-revealed) {
    opacity: 0;
    translate: 0 21px;
  }
  .jm-enabled .jm-cascade-item:not(a):not(button).is-revealed { opacity: 1; translate: none; }
  .jm-enabled :is(a, button).jm-cascade-item { transition-property: opacity; }
  .jm-enabled :is(a, button).jm-cascade-item:not(.is-revealed) { opacity: 0; }
  .jm-enabled :is(a, button).jm-cascade-item.is-revealed { opacity: 1; }

  .jm-enabled[data-motion-page="event"] .jm-visual:not(.is-revealed),
  .jm-enabled[data-motion-page="realisations"] .jm-visual:not(.is-revealed) {
    translate: 25px 0;
    scale: .99;
    clip-path: inset(0 8% 0 0);
  }
  .jm-enabled[data-motion-page="data"] .jm-visual:not(.is-revealed) {
    translate: 0 16px;
    clip-path: inset(8% 0 0 0);
  }
  .jm-enabled[data-motion-page="brio"] .jm-visual:not(.is-revealed) {
    scale: 1.025;
    clip-path: inset(0 0 6% 0);
  }

  .jm-enabled .jm-pinned::before {
    content: "";
    display: block;
    position: sticky;
    top: 72px;
    z-index: 22;
    height: 2px;
    margin-bottom: -2px;
    pointer-events: none;
    background: linear-gradient(to right, var(--jm-progress-color, #151718) 0 var(--jm-progress, 0%), transparent var(--jm-progress, 0%) 100%);
  }
  .jm-enabled .cp-day { --jm-progress-color: #f7f6f2; }
  .jm-enabled .bs-chain { --jm-progress-color: #f7f6f2; }
}

@media (max-width: 800px) {
  .jm-enabled .jm-pinned::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .jm-enabled .jm-title,
  .jm-enabled .jm-kicker,
  .jm-enabled .jm-copy,
  .jm-enabled .jm-visual,
  .jm-enabled .jm-cascade-item {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .jm-enabled .jm-pinned::before { display: none; }
}