/* Motion-only tokens. Do not put layout, typography or content rules in this module. */
[data-motion-enabled="1"] {
  --motion-ease: cubic-bezier(0.25, 1, 0.5, 1);
  --motion-duration: 1800ms;
  --motion-photo-duration: 3200ms;
  --motion-curtain-duration: 2100ms;
  --motion-distance: 40px;
  --motion-stagger: 240ms;
  --motion-camera-scale: 1.12;
  --motion-hold: 320ms;
}
[data-motion-pace="quick"] {
  --motion-duration: 460ms;
  --motion-photo-duration: 760ms;
  --motion-curtain-duration: 600ms;
  --motion-distance: 10px;
  --motion-stagger: 60ms;
  --motion-camera-scale: 1.035;
  --motion-hold: 0ms;
}

@media (prefers-reduced-motion: no-preference) {
  /* Title stays opaque, readable and part of the first paint. */
  .motion-ready [data-motion="title"].motion-playing {
    animation: esser-title var(--motion-duration) var(--motion-ease);
  }
  .motion-ready [data-motion="title"].motion-playing strong {
    animation: esser-emphasis var(--motion-duration) var(--motion-ease) both;
    animation-delay: var(--motion-hold);
  }
  .motion-ready [data-motion="lead"].motion-playing {
    animation: esser-support var(--motion-duration) var(--motion-ease) both;
    animation-delay: var(--motion-hold);
  }
  .motion-ready [data-motion="step"] { position: relative; }
  .motion-ready [data-motion="step"].motion-playing > * {
    animation: esser-step var(--motion-duration) var(--motion-ease) both;
    animation-delay: calc(var(--motion-order, 0) * var(--motion-stagger));
  }
  .motion-ready [data-motion="step"].motion-playing > div {
    animation-delay: calc(var(--motion-order, 0) * var(--motion-stagger) + var(--motion-stagger));
  }
  .motion-ready [data-motion="step"].motion-playing::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px;
    height: 1px;
    background: var(--gold-500);
    pointer-events: none;
    transform-origin: left;
    animation: esser-rule var(--motion-duration) var(--motion-ease) both;
    animation-delay: calc(var(--motion-order, 0) * var(--motion-stagger));
  }
  .motion-ready [data-motion="photo"],
  .motion-ready [data-motion="hero-photo"] {
    position: relative;
    overflow: hidden;
  }
  /* Use ::before: ::after belongs to the photograph's existing contrast overlay. */
  .motion-ready [data-motion="photo"].motion-playing::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background: var(--forest-700);
    pointer-events: none;
    transform-origin: right;
    animation: esser-curtain var(--motion-curtain-duration) var(--motion-ease) both;
  }
  .motion-ready [data-motion="photo"].motion-playing > img,
  .motion-ready [data-motion="hero-photo"].motion-playing > img {
    animation: esser-camera var(--motion-photo-duration) var(--motion-ease) both;
  }
  .motion-ready [data-motion="hero-photo"].motion-playing > figcaption {
    animation: esser-support var(--motion-duration) var(--motion-ease) both;
    animation-delay: calc(var(--motion-hold) * 2);
  }
  .motion-ready [data-motion="photo"].motion-playing > .atlas__mark {
    animation: esser-support var(--motion-duration) var(--motion-ease) both;
    animation-delay: calc(var(--motion-hold) * 2);
  }
  .motion-ready [data-motion="photo"].motion-playing > .atlas__mark--b {
    animation-delay: calc(var(--motion-hold) * 3);
  }
  .motion-ready [data-motion="photo"].motion-playing > .atlas__mark--c {
    animation-delay: calc(var(--motion-hold) * 4);
  }
  .motion-buttons-ready .button:not(.is-disabled) > span[aria-hidden="true"] {
    display: inline-block;
    transition: transform 280ms cubic-bezier(0.25, 1, 0.5, 1);
  }
  .motion-buttons-ready .button:not(.is-disabled):focus-visible > span[aria-hidden="true"] {
    transform: translate(2px, -2px);
  }
  .motion-buttons-ready .button:not(.is-disabled):active {
    transform: translateY(1px);
  }
  @media (hover: hover) {
    .motion-buttons-ready .button:not(.is-disabled):hover > span[aria-hidden="true"] {
      transform: translate(2px, -2px);
    }
  }
  @media (max-width: 63.999rem) {
    [data-motion-enabled="1"] {
      --motion-duration: 1400ms;
      --motion-photo-duration: 2600ms;
      --motion-curtain-duration: 1700ms;
      --motion-distance: 24px;
      --motion-stagger: 180ms;
      --motion-camera-scale: 1.065;
      --motion-hold: 240ms;
    }
    [data-motion-pace="quick"] {
      --motion-duration: 340ms;
      --motion-photo-duration: 650ms;
      --motion-curtain-duration: 480ms;
      --motion-distance: 5px;
      --motion-stagger: 40ms;
      --motion-camera-scale: 1.025;
      --motion-hold: 0ms;
    }
  }
}

@keyframes esser-title {
  from { transform: translateY(var(--motion-distance)); }
  to { transform: none; }
}
@keyframes esser-camera {
  from { transform: scale(var(--motion-camera-scale)); }
  to { transform: scale(1); }
}
@keyframes esser-emphasis {
  from { opacity: 0.3; }
  to { opacity: 1; }
}
@keyframes esser-support {
  from { transform: translateY(calc(var(--motion-distance) * 0.6)); opacity: 0.45; }
  to { transform: none; opacity: 1; }
}
@keyframes esser-step {
  from { transform: translateY(var(--motion-distance)); opacity: 0.25; }
  to { transform: none; opacity: 1; }
}
@keyframes esser-rule {
  from { transform: scaleX(0); opacity: 1; }
  65% { opacity: 1; }
  to { transform: scaleX(1); opacity: 0; }
}
@keyframes esser-curtain {
  0%, 15% { transform: translateX(0); }
  100% { transform: translateX(101%); }
}

/* Preference changes take effect immediately, including an entrance already running. */
@media (prefers-reduced-motion: reduce), (forced-colors: active), print {
  [data-motion] { animation: none !important; transform: none !important; }
  [data-motion] > * { animation: none !important; opacity: 1 !important; transform: none !important; }
  [data-motion]::before { content: none !important; }
  [data-motion="step"]::after { content: none !important; }
}