/* Motion belongs to the decorative DNA layers, never to the page content.
   Individual transforms preserve each watermark's existing rotation and placement. */
@media screen and (prefers-reduced-motion: no-preference){
  body:not(.verification-page)::before,
  body:not(.verification-page)::after,
  .hero::before,
  .home-showcase::after,
  footer::before{
    animation:dna-float 18s ease-in-out infinite;
    transform-origin:50% 50%;
  }
  body:not(.verification-page)::after{
    animation-duration:23s;
    animation-delay:-9s;
    animation-direction:reverse;
  }
  .hero::before{animation-duration:16s;animation-delay:-5s}
  .home-showcase::after{animation-duration:21s;animation-delay:-12s}
  footer::before{animation-duration:20s;animation-delay:-7s}

  body.verification-page::before{
    inset:-4%;
    transform-origin:50% 50%;
    animation:dna-night-drift 22s ease-in-out infinite,
              dna-night-glow 9s ease-in-out infinite;
  }
}

@keyframes dna-float{
  0%,100%{translate:0 0;scale:1;rotate:0deg}
  30%{translate:8px -12px;scale:1.025;rotate:1.5deg}
  65%{translate:-7px 10px;scale:.99;rotate:-1.5deg}
}
@keyframes dna-night-drift{
  0%,100%{transform:translate3d(0,0,0) scale(1.015)}
  35%{transform:translate3d(-.8%,-1%,0) scale(1.035)}
  70%{transform:translate3d(.7%,.7%,0) scale(1.02)}
}
@keyframes dna-night-glow{
  0%,100%{opacity:.88}
  50%{opacity:1}
}

/* Honor the device's reduced-motion preference, including changes while open. */
@media (prefers-reduced-motion: reduce){
  body::before,body::after,.hero::before,.home-showcase::after,footer::before{
    animation:none;
  }
}