/* Spotted eagle rays, seen from above. Built by rays.js.
   .ray glides across the screen, .bob drifts it up and down, and each wing beats on a hinge
   at the body (with a lagging wingtip) in real 3D, so the wings foreshorten as they lift. */
.ray { position: absolute; top: var(--y); left: 0; width: var(--size); opacity: var(--o, 1); filter: var(--f, none); pointer-events: none; animation: ray-glide var(--d) linear var(--delay) infinite; }
.ray.left { animation-name: ray-glide-left; }
.ray .bob { animation: ray-bob 6s ease-in-out var(--bobd, 0s) infinite alternate; }
.ray .rb { position: relative; width: 100%; aspect-ratio: 200 / 220; transform: rotate(90deg); perspective: calc(var(--size) * 2.6); }
.ray.left .rb { transform: rotate(-90deg); }

.ray .core { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ray .wing { position: absolute; top: 0; height: 100%; width: 42%; transform-style: preserve-3d; animation: ray-beat var(--beat) ease-in-out var(--phase) infinite; }
.ray .wing.l { left: 0; transform-origin: 100% 50%; --dir: 1; }
.ray .wing.r { right: 0; transform-origin: 0 50%; --dir: -1; }
.ray .wing .in, .ray .tip { position: absolute; top: 0; height: 100%; width: 52.381%; }
.ray .wing.l .in { left: 47.619%; }
.ray .wing.r .in { left: 0; }
.ray .tip { animation: ray-tip var(--beat) ease-in-out calc(var(--phase) + var(--beat) * .14) infinite; }
.ray .wing.l .tip { left: 0; transform-origin: 95.45% 50%; }
.ray .wing.r .tip { left: 47.619%; transform-origin: 4.55% 50%; }
.ray .wing svg { display: block; width: 100%; height: 100%; overflow: visible; animation: ray-shine var(--beat) ease-in-out var(--phase) infinite; }

@keyframes ray-glide { from { transform: translateX(-40vw); } to { transform: translateX(140vw); } }
@keyframes ray-glide-left { from { transform: translateX(140vw); } to { transform: translateX(-40vw); } }
@keyframes ray-bob { from { transform: translateY(-22px) rotate(-3deg); } to { transform: translateY(26px) rotate(3deg); } }
@keyframes ray-beat { 0%, 100% { transform: rotateY(calc(var(--dir) * -26deg)); } 50% { transform: rotateY(calc(var(--dir) * 48deg)); } }
@keyframes ray-tip { 0%, 100% { transform: rotateY(calc(var(--dir) * -22deg)); } 50% { transform: rotateY(calc(var(--dir) * 34deg)); } }
@keyframes ray-shine { 0%, 100% { filter: brightness(.86); } 50% { filter: brightness(1.3); } }

@media (prefers-reduced-motion: reduce) {
  .ray, .ray *, .ray .wing svg { animation: none !important; }
  .ray.still { transform: translateX(var(--x0)); }
}