Template:Rocks/styles.css

.rocks {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  overflow: visible;
}
.rocks pre {
  background-color: transparent !important;
  border: none !important;
}

/* SHARED ANIMATION BASE */
.rock {
  position: absolute;
  top: -200px;
  /* Removed fixed width/height from here */
  animation-name: rock-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* VISUAL STYLE: APPLIED ONLY WHEN NO IMAGE IS PRESENT */
.rock-shape {
  width: 48px;
  height: 48px;
  
  /* Rock shape */
  clip-path: polygon(
    12% 20%, 30% 8%, 55% 5%,
    75% 18%, 88% 45%, 80% 70%,
    60% 88%, 35% 92%, 18% 75%
  );
  
  background-color: #8c7d63;
  background-image:
    linear-gradient(130deg, rgba(255,255,255,0.22), transparent 45%),
    linear-gradient(300deg, rgba(0,0,0,0.35), transparent 55%),
    linear-gradient(210deg, #b8a98b, #8c7d63 60%, #5c4e3b),
    linear-gradient(23deg, rgba(0,0,0,0.10), transparent 80%);
  background-blend-mode: multiply;
}

/* IMAGE STYLE: APPLIED ONLY WHEN IMAGE IS PRESENT */
.rock-image {
  /* Use auto so the container shrinks/grows to fit the image shape */
  width: auto;
  height: auto;
  
  /* Ensure it never exceeds 100px */
  max-width: 100px;
}

/* Ensure the image inside scales correctly */
.rock-image img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

@keyframes rock-fall {
  to {
    transform: translateY(120vh) rotate(360deg);
  }
}

/* ANIMATION DELAYS (Targeting .rock keeps these working for both types) */
.rock:nth-child(1)  { left: 8%;  animation-duration: 14s; animation-delay: -2s; }
.rock:nth-child(2)  { left: 18%; animation-duration: 20s; animation-delay: -6s; }
.rock:nth-child(3)  { left: 26%; animation-duration: 12s; animation-delay: -3s; }
.rock:nth-child(4)  { left: 36%; animation-duration: 18s; animation-delay: -9s; }
.rock:nth-child(5)  { left: 46%; animation-duration: 16s; animation-delay: -4s; }
.rock:nth-child(6)  { left: 55%; animation-duration: 22s; animation-delay: -8s; }
.rock:nth-child(7)  { left: 63%; animation-duration: 14s; animation-delay: -5s; }
.rock:nth-child(8)  { left: 72%; animation-duration: 17s; animation-delay: -10s; }
.rock:nth-child(9)  { left: 83%; animation-duration: 19s; animation-delay: -7s; }
.rock:nth-child(10) { left: 92%; animation-duration: 24s; animation-delay: -12s; }
.rock:nth-child(11) { left: 12%; animation-duration: 16s; animation-delay: -14s; }
.rock:nth-child(12) { left: 32%; animation-duration: 26s; animation-delay: -11s; }
.rock:nth-child(13) { left: 52%; animation-duration: 14s; animation-delay: -3s; }
.rock:nth-child(14) { left: 74%; animation-duration: 20s; animation-delay: -9s; }
.rock:nth-child(15) { left: 94%; animation-duration: 17s; animation-delay: -6s; }
/* [[Category:Stylesheets]] */