/* Aktuelles / News: scroll-in animation for the project blocks.
   The hidden start state only applies once js/news-reveal.js has set .js-reveal on <html>;
   without JavaScript (or with reduced motion) everything stays visible. */
@media (prefers-reduced-motion: no-preference) {
  html.js-reveal #news { overflow-x: clip; }
  html.js-reveal #news .nr-block .content-left,
  html.js-reveal #news .nr-block .news-media {
    opacity: 0;
  }
  html.js-reveal #news .nr-block .news-media { overflow: hidden; }
  html.js-reveal #news .nr-block .news-graphic {
    transform: scale(1.05);
  }
  /* Odd blocks: image from the right, text from the left */
  html.js-reveal #news .nr-block.nr-odd .news-media { transform: translateX(60px); }
  html.js-reveal #news .nr-block.nr-odd .content-left { transform: translateX(-40px); }
  /* Even blocks: image from the left, text from the right */
  html.js-reveal #news .nr-block.nr-even .news-media { transform: translateX(-60px); }
  html.js-reveal #news .nr-block.nr-even .content-left { transform: translateX(40px); }

  /* Mobile: only fade up from below, no sideways movement */
  @media screen and (max-width: 767px) {
    html.js-reveal #news .nr-block.nr-odd .news-media,
    html.js-reveal #news .nr-block.nr-odd .content-left,
    html.js-reveal #news .nr-block.nr-even .news-media,
    html.js-reveal #news .nr-block.nr-even .content-left { transform: translateY(24px); }
  }

  /* Revealed (transitions only run on the way in, so the start state is set instantly) */
  html.js-reveal #news .nr-block.nr-in .content-left,
  html.js-reveal #news .nr-block.nr-in .news-media {
    opacity: 1;
    transform: none;
    transition: opacity .7s ease-out, transform .7s ease-out;
  }
  html.js-reveal #news .nr-block.nr-in .content-left { transition-delay: .15s; }
  html.js-reveal #news .nr-block.nr-in .news-graphic {
    transform: none;
    transition: transform 1.2s ease-out;
  }
}