/* De doorlopende sfeerlussen. De getimede animaties staan in GSAP; zie de regel in de README. */

/* #region Vlag in rust: het doek wappert */
/* Gegenereerd door tools/flag-wave-frames.js, niet met de hand aanpassen. */
[data-role="flag"].idle-wave-css #wimpel {
  animation: flagWave 2.4s linear infinite;
}
@keyframes flagWave {
  0% { d: path("M24 18.5C25.98 18.5 27.96 18.9 29.93 19.1C31.91 19.3 33.89 19.13 35.87 18.5C37.84 17.87 39.82 16.9 41.8 16.7C41.8 21.03 41.8 25.37 41.8 29.7C39.82 29.9 37.84 30.87 35.87 31.5C33.89 32.13 31.91 32.3 29.93 32.1C27.96 31.9 25.98 31.5 24 31.5Z"); }
  12.5% { d: path("M24 18.5C26 18.36 27.99 18.56 29.99 18.92C31.99 19.29 33.99 19.65 35.98 19.35C37.98 19.05 39.98 18.04 41.98 17.23C41.98 21.56 41.98 25.89 41.98 30.23C39.98 31.04 37.98 32.05 35.98 32.35C33.99 32.65 31.99 32.29 29.99 31.92C27.99 31.56 26 31.36 24 31.5Z"); }
  25% { d: path("M24 18.5C26.04 18.3 28.09 18.19 30.13 18.5C32.18 18.81 34.22 19.5 36.27 19.7C38.31 19.9 40.36 19.44 42.4 18.5C42.4 22.83 42.4 27.17 42.4 31.5C40.36 32.44 38.31 32.9 36.27 32.7C34.22 32.5 32.18 31.81 30.13 31.5C28.09 31.19 26.04 31.3 24 31.5Z"); }
  37.5% { d: path("M24 18.5C26.09 18.36 28.18 18 30.27 18.08C32.37 18.16 34.46 18.76 36.55 19.35C38.64 19.93 40.73 20.3 42.82 19.77C42.82 24.11 42.82 28.44 42.82 32.77C40.73 33.3 38.64 32.93 36.55 32.35C34.46 31.76 32.37 31.16 30.27 31.08C28.18 31 26.09 31.36 24 31.5Z"); }
  50% { d: path("M24 18.5C26.11 18.5 28.22 18.1 30.33 17.9C32.44 17.7 34.56 17.87 36.67 18.5C38.78 19.13 40.89 20.1 43 20.3C43 24.63 43 28.97 43 33.3C40.89 33.1 38.78 32.13 36.67 31.5C34.56 30.87 32.44 30.7 30.33 30.9C28.22 31.1 26.11 31.5 24 31.5Z"); }
  62.5% { d: path("M24 18.5C26.09 18.64 28.18 18.44 30.27 18.08C32.37 17.71 34.46 17.35 36.55 17.65C38.64 17.95 40.73 18.96 42.82 19.77C42.82 24.11 42.82 28.44 42.82 32.77C40.73 31.96 38.64 30.95 36.55 30.65C34.46 30.35 32.37 30.71 30.27 31.08C28.18 31.44 26.09 31.64 24 31.5Z"); }
  75% { d: path("M24 18.5C26.04 18.7 28.09 18.81 30.13 18.5C32.18 18.19 34.22 17.5 36.27 17.3C38.31 17.1 40.36 17.56 42.4 18.5C42.4 22.83 42.4 27.17 42.4 31.5C40.36 30.56 38.31 30.1 36.27 30.3C34.22 30.5 32.18 31.19 30.13 31.5C28.09 31.81 26.04 31.7 24 31.5Z"); }
  87.5% { d: path("M24 18.5C26 18.64 27.99 19 29.99 18.92C31.99 18.84 33.99 18.24 35.98 17.65C37.98 17.07 39.98 16.7 41.98 17.23C41.98 21.56 41.98 25.89 41.98 30.23C39.98 29.7 37.98 30.07 35.98 30.65C33.99 31.24 31.99 31.84 29.99 31.92C27.99 32 26 31.64 24 31.5Z"); }
  100% { d: path("M24 18.5C25.98 18.5 27.96 18.9 29.93 19.1C31.91 19.3 33.89 19.13 35.87 18.5C37.84 17.87 39.82 16.9 41.8 16.7C41.8 21.03 41.8 25.37 41.8 29.7C39.82 29.9 37.84 30.87 35.87 31.5C33.89 32.13 31.91 32.3 29.93 32.1C27.96 31.9 25.98 31.5 24 31.5Z"); }
}
/* Safari kent de CSS-eigenschap d niet: daar klappert het doek in perspectief om de mastzijde. */
@supports not (d: path("M0 0")) {
  [data-role="flag"].idle-wave-css #wimpel {
    transform-box: fill-box;
    transform-origin: left center;
    animation: flagWaveFallback 5s ease-in-out infinite;
  }
}
@keyframes flagWaveFallback {
  0%, 100% { transform: perspective(130px) rotateY(-12deg); }
  45%      { transform: perspective(130px) rotateY(20deg); }
}
@media (prefers-reduced-motion: reduce) {
  [data-role="flag"].idle-wave-css #wimpel { animation: none; }
}
/* #endregion Vlag in rust */

/* #region Personage in rust: ademhalen */
/* Op char-idle, niet op char-body: daar zet GSAP de squash en de loop-veer. Het nulpunt van de groep zijn de voeten. */
[data-role="char-idle"].idle-breathing-css {
  transform-box: view-box;
  transform-origin: 0 0;
  animation: characterIdleBreathing 2.6s ease-in-out infinite;
}
@keyframes characterIdleBreathing {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(0.99, 1.025); }
}
@media (prefers-reduced-motion: reduce) {
  [data-role="char-idle"].idle-breathing-css { animation: none; }
}
/* #endregion Personage in rust */

/* #region Gras in rust: de props wiegen */
/* Op een eigen groep, niet op de prop zelf: daar zet GSAP het ritselen bij een landing. */
[data-role="prop-sway"].prop-sway-css {
  transform-box: view-box;
  transform-origin: 0 0;
  animation-name: propSway;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes propSway {
  from { transform: rotate(calc(var(--prop-sway-degrees, 1.5deg) * -1)); }
  to   { transform: rotate(var(--prop-sway-degrees, 1.5deg)); }
}
@media (prefers-reduced-motion: reduce) {
  [data-role="prop-sway"].prop-sway-css { animation: none; }
}
/* #endregion Gras in rust */

/* #region Lucht in rust: de wolken drijven */
/* Elke wolk heen en weer met de wind mee; afstand, duur en beginfase komen per wolk als inline stijl mee. */
[data-role="cloud-drift"].cloud-drift-css {
  animation-name: cloudDrift;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes cloudDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--cloud-drift-distance, 6px)); }
}
@media (prefers-reduced-motion: reduce) {
  [data-role="cloud-drift"].cloud-drift-css { animation: none; }
}
/* #endregion Lucht in rust */