/* Keep the original column strips; expose clouds only through yellow regions. */
.sitebg1, #layout.sitebg1 {
 background-image:linear-gradient(to right,#fff 0 1px,transparent 1px 793px,#000 793px 794px,#fff 794px 1601px,#b7eafd 1601px 1602px,#fff 1602px),url('/images/layout/clouds-tile-20261006.png');
 background-size:1980px 1px,320px 320px;
 background-position:top center,top center;
 background-repeat:repeat-y,repeat;
 background-color:#f4b005;
}
.sitebg2, #layout.sitebg2 {
 background-image:linear-gradient(to right,transparent 0 795px,#000 795px 796px,#fff 796px 1600px,#b7eafd 1600px),url('/images/layout/clouds-tile-20261006.png');
 background-size:1601px 1px,320px 320px;
 background-position:top center,top center;
 background-repeat:repeat-y,repeat;
 background-color:#f4b005;
}
#advertisement {
 background-image:url('/images/layout/clouds-tile-20261006.png');
 background-size:320px 320px;
 background-repeat:repeat;
 background-position:top center;
}
#logo {
 background-image:url('/images/layout/naruto-portrait-20261006.png'),url('/images/layout/clouds-tile-20261006.png');
 background-size:auto 217px,320px 320px;
 background-position:top right,top center;
 background-repeat:no-repeat,repeat;
 background-color:#f7b200;
}

/* Move one whole tile per cycle so the repeat joins without a jump.
   Only cloud layers move; column masks and the Naruto portrait stay fixed.
   Limit paint updates to 12 per second on these large backgrounds. */
@keyframes site-clouds-drift {
 from { background-position:top center,50% 0; }
 to { background-position:top center,calc(50% + 320px) 0; }
}
@keyframes site-logo-clouds-drift {
 from { background-position:top right,50% 0; }
 to { background-position:top right,calc(50% + 320px) 0; }
}
@keyframes site-ad-clouds-drift {
 from { background-position:50% 0; }
 to { background-position:calc(50% + 320px) 0; }
}
@media (prefers-reduced-motion: no-preference) {
 .sitebg1, #layout.sitebg1, .sitebg2, #layout.sitebg2 {
  animation:site-clouds-drift 160s steps(1920,end) infinite;
 }
 #logo { animation:site-logo-clouds-drift 160s steps(1920,end) infinite; }
 #advertisement { animation:site-ad-clouds-drift 160s steps(1920,end) infinite; }
}