/* The cyber dinosaur lives inside the reusable project-icon slot. */
.cyborg-scene {
  --cyborg-cycle: 5.6s;
  --cyborg-eye-x: 88.457%;
  --cyborg-eye-y: 26.785%;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: layout paint;
}
.cyborg-actor {
  position: absolute;
  left: 5%;
  bottom: 2%;
  width: 82%;
  aspect-ratio: 1;
  transform-origin: 63% 91%;
}
.cyborg-sprite { display: block; width: 100%; height: 100%; object-fit: contain; }
.cyborg-eye-charge,
.cyborg-eye-core,
.cyborg-beam {
  position: absolute;
  left: var(--cyborg-eye-x);
  top: var(--cyborg-eye-y);
}
.cyborg-eye-charge {
  width: 14%;
  aspect-ratio: 1;
  border: 1px solid #ed505d;
  border-radius: 50%;
  background: radial-gradient(circle, #ff889f80, #f5415b24 48%, transparent 70%);
  transform: translate(-50%, -50%) scale(.3);
  opacity: 0;
}
.cyborg-eye-core {
  width: 2.4%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #ee4b62;
}
.cyborg-beam {
  width: 88%;
  height: 6px;
  margin-top: -3px;
  border-radius: 0 50% 50% 0;
  background: linear-gradient(90deg, #fff4ed, #ff526d 18%, #ed345ae0 65%, #ed345a00);
  box-shadow: 0 0 8px 1px #f1416250;
  transform-origin: left center;
  transform: scaleX(0);
  visibility: hidden;
  opacity: 0;
}
.cyborg-beam::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  right: 7%;
  height: 2px;
  border-radius: inherit;
  background: linear-gradient(90deg, white, #fff2d9 60%, transparent);
}
.cyborg-scene.is-active .cyborg-actor { animation: cyborg-recoil var(--cyborg-cycle) linear infinite; }
.cyborg-scene.is-active .cyborg-eye-charge { animation: cyborg-charge var(--cyborg-cycle) linear infinite; }
.cyborg-scene.is-active .cyborg-eye-core { animation: cyborg-core var(--cyborg-cycle) linear infinite; }
.cyborg-scene.is-active .cyborg-beam { animation: cyborg-shot var(--cyborg-cycle) linear infinite; }

@keyframes cyborg-recoil {
  0%, 15%, 28%, 50%, 100% { transform: none; }
  20% { transform: translateY(-1px); }
  32% { transform: translateX(1px); }
  35% { transform: translateX(-2px); }
  42% { transform: translateX(-1px); }
}
@keyframes cyborg-charge {
  0%, 15%, 49%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  22% { opacity: .35; transform: translate(-50%, -50%) scale(.8); }
  31% { opacity: .9; transform: translate(-50%, -50%) scale(1.1); }
  34% { opacity: .9; transform: translate(-50%, -50%) scale(.55); }
  42% { opacity: .45; transform: translate(-50%, -50%) scale(.8); }
}
@keyframes cyborg-core {
  0%, 15%, 50%, 100% { background: #ee4b62; box-shadow: none; }
  31%, 42% { background: #fff5df; box-shadow: 0 0 7px 3px #f74564a0; }
}
/* One soft charge and one sustained shot; a long rest between cycles. */
@keyframes cyborg-shot {
  0%, 31%, 45%, 100% { visibility: hidden; opacity: 0; transform: scaleX(0); }
  32% { visibility: visible; opacity: .85; transform: scaleX(.2); }
  35%, 41% { visibility: visible; opacity: 1; transform: scaleX(1); }
  44% { visibility: visible; opacity: 0; transform: scaleX(1); }
}
@media (max-width: 760px) {
  .cyborg-beam { height: 4px; margin-top: -2px; box-shadow: 0 0 5px #f1416250; }
  .cyborg-beam::after { top: 1px; height: 1.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .cyborg-scene * { animation: none !important; }
  .cyborg-eye-charge, .cyborg-beam { display: none; }
}