/* Fries sit ABOVE body background and BELOW #root (all UI / header) */

.fries-rain {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.fries-rain__fry {
  position: absolute;
  top: -14vh;
  left: 0;
  width: var(--fry-w, 10px);
  height: var(--fry-h, 42px);
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      #fff8d0 0%,
      #ffc72c 30%,
      #f0a500 60%,
      #d4781a 100%
    );
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.5),
    inset -1px 0 0 rgba(120, 60, 0, 0.22),
    0 3px 10px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translate3d(var(--fry-x, 50vw), -15vh, 0) rotate(var(--fry-rot, 12deg));
  animation:
    fries-fall var(--fry-dur, 12s) linear var(--fry-delay, 0s) infinite,
    fries-wobble var(--fry-wobble, 2.8s) ease-in-out var(--fry-delay, 0s) infinite;
  will-change: transform, opacity;
  filter: drop-shadow(0 2px 3px rgba(60, 20, 0, 0.25));
}

.fries-rain__fry::before {
  content: "";
  position: absolute;
  left: 18%;
  top: 8%;
  width: 28%;
  height: 55%;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 0)
  );
}

.fries-rain__fry--fat {
  border-radius: 10px;
}

@keyframes fries-fall {
  0% {
    transform: translate3d(var(--fry-x, 50vw), -15vh, 0)
      rotate(var(--fry-rot, 12deg));
    opacity: 0;
  }
  6% {
    opacity: var(--fry-opacity, 0.7);
  }
  50% {
    transform: translate3d(
        calc(var(--fry-x, 50vw) + var(--fry-drift, 40px) * 0.55),
        50vh,
        0
      )
      rotate(calc(var(--fry-rot, 12deg) + var(--fry-spin, 180deg) * 0.5));
    opacity: var(--fry-opacity, 0.7);
  }
  94% {
    opacity: var(--fry-opacity, 0.7);
  }
  100% {
    transform: translate3d(
        calc(var(--fry-x, 50vw) + var(--fry-drift, 40px)),
        115vh,
        0
      )
      rotate(calc(var(--fry-rot, 12deg) + var(--fry-spin, 180deg)));
    opacity: 0;
  }
}

@keyframes fries-wobble {
  0%,
  100% {
    margin-left: 0;
  }
  50% {
    margin-left: var(--fry-wobble-x, 10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fries-rain__fry {
    animation: none;
    opacity: 0.2;
    top: auto;
  }
}