/* The content remains visible when JavaScript or motion is unavailable. */
.page__blocks .layout-element.transition.transition--fade,
.page__blocks .transition.transition--fade.transition--root-hidden [data-animation-role] {
  opacity: 1;
}

.reading-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  z-index: 100;
  pointer-events: none;
  background: linear-gradient(90deg, #0096c7, #32c9bc);
  transform: scaleX(0);
  transform-origin: left;
}

.grid-card {
  transition: translate 240ms ease, box-shadow 240ms ease, outline-color 240ms ease;
  outline: 1px solid transparent;
  outline-offset: -1px;
}

.layout-element.motion-card-part {
  transition: translate 240ms ease;
}

.grid-card.motion-card-hover {
  translate: 0 -6px;
  box-shadow: 0 24px 48px -16px rgb(26 76 99 / 30%);
  outline-color: rgb(0 150 199 / 35%);
}

.layout-element.motion-card-part-hover { translate: 0 -6px; }

.grid-button,
.button {
  transition: translate 200ms ease, box-shadow 200ms ease, background-color 200ms ease, color 200ms ease;
}

.grid-button:focus-visible,
.button:focus-visible {
  outline: 3px solid #0096c7;
  outline-offset: 5px;
}

.motion-reveal.motion-pending {
  opacity: 0;
  transform: translateY(22px);
}

.motion-reveal {
  transition: opacity 620ms ease, transform 620ms cubic-bezier(.22, 1, .36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .grid-button:hover,
  .button:hover {
    translate: 0 -3px;
    box-shadow: 0 12px 26px -10px rgb(13 27 42 / 35%);
  }

  .privacy-overview { transition: box-shadow 240ms ease; }
  .privacy-overview:hover { box-shadow: 0 12px 32px -18px rgb(26 76 99 / 25%); }
}

@media (prefers-reduced-motion: no-preference) {
  .motion-intro {
    animation: prime-enter 650ms cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: var(--intro-delay, 0ms);
  }
}

@keyframes prime-enter {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .motion-reveal.motion-pending { opacity: 1; transform: none; }
  .motion-reveal,
  .grid-card,
  .layout-element.motion-card-part,
  .grid-button,
  .button,
  .privacy-overview { transition: none; }
  .motion-intro { animation: none; }
  .grid-card.motion-card-hover,
  .layout-element.motion-card-part-hover,
  .grid-button:hover,
  .button:hover { translate: none; }
  .reading-progress { display: none; }
}

@media print {
  .motion-reveal.motion-pending { opacity: 1; transform: none; }
  .motion-intro { animation: none; }
  .reading-progress { display: none; }
}