/* Brand vector watermark: twelve waving petals with a stationary centre. */
body:not(.wl) #main .rd-brand { position: relative; overflow: hidden; }
body:not(.wl) #main .rd-brand > .rd-wrap,
body:not(.wl) #main .rd-brand-grid { position: static; }
body:not(.wl) #main .rd-brand .rd-brand-water { display: none; }
body:not(.wl) #main .rd-brand-mark::before { content: none; }
body:not(.wl) #main .rd-brand-grid > .rd-brand-mark {
  position: absolute; left: 0; top: 50%;
  width: clamp(420px, 42vw, 720px); max-width: none;
  height: auto; aspect-ratio: 1;
  transform: translate(-50%, -50%); opacity: .58;
  pointer-events: none; z-index: 0;
}
body:not(.wl) #main .rd-brand-mark .rd-lotus-vector {
  display: block; width: 100%; height: auto; overflow: visible;
}
body:not(.wl) #main .rd-lotus-vector-petal {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  fill: #145e7a;
  animation: rd-lotus-vector-wave 4.2s ease-in-out var(--wave-delay, 0s) infinite;
}
body:not(.wl) #main .rd-brand-grid > .rd-brand-mark + div {
  position: relative; grid-column: 2; z-index: 1;
}
@keyframes rd-lotus-vector-wave {
  0%,100% { transform: rotate(-5deg) scaleY(.92); fill: #145e7a; }
  50% { transform: rotate(5deg) scaleY(1.12); fill: #087fa3; }
}
@media (max-width: 1024px) {
  body:not(.wl) #main .rd-brand-grid > .rd-brand-mark + div { grid-column: 1; }
  body:not(.wl) #main .rd-brand-grid > .rd-brand-mark { opacity: .2; }
}
@media (max-width: 768px) {
  body:not(.wl) #main .rd-brand-grid { grid-template-columns: minmax(0,1fr); }
  body:not(.wl) #main .rd-brand-grid > .rd-brand-mark {
    width: 360px; height: auto; grid-column: auto; grid-row: auto;
    transform: translate(-50%, -50%);
  }
  body:not(.wl) #main .rd-brand-grid > .rd-brand-mark + div > :first-child {
    grid-column: 1 / -1;
  }
}
@media (prefers-reduced-motion: reduce) {
  body:not(.wl) #main .rd-lotus-vector-petal { animation: none; }
}

/* Footer watermark uses the same accessible vector animation as the brand section. */
footer .rd-footer-water {
  display: grid;
  place-items: center;
}
footer .rd-footer-water .rd-lotus-vector {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
footer .rd-footer-water .rd-lotus-vector-petal {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  fill: #65aeca;
  animation: rd-lotus-vector-wave 4.2s ease-in-out var(--wave-delay, 0s) infinite;
}
@media (prefers-reduced-motion: reduce) {
  footer .rd-footer-water .rd-lotus-vector-petal { animation: none; }
}
