/* A moving highlight stays on the frame; locked artwork keeps its grey filter. */
@property --anodos-frame-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.family-card:nth-child(1){--frame-light:#9bff67;--frame-glow:#75ec4766;--frame-tint:#80df4866;--frame-delay:0s}
.family-card:nth-child(2){--frame-light:#57cdff;--frame-glow:#39afff66;--frame-tint:#459ce666;--frame-delay:-1.2s}
.family-card:nth-child(3){--frame-light:#ffae43;--frame-glow:#ff8a3266;--frame-tint:#ed8e3d66;--frame-delay:-2.4s}
.family-card:nth-child(4){--frame-light:#da8bff;--frame-glow:#b65cff66;--frame-tint:#af6ee666;--frame-delay:-3.6s}
.family-card .card-preview{
  position:relative;
  isolation:isolate;
  overflow:visible;
  border:1px solid var(--frame-tint);
  border-radius:10px;
  box-shadow:0 0 9px var(--frame-glow),inset 0 0 7px var(--frame-glow);
}
.family-card .card-preview::after{
  content:'';
  position:absolute;
  inset:-2px;
  z-index:2;
  padding:2px;
  border-radius:11px;
  pointer-events:none;
  background:conic-gradient(from var(--anodos-frame-angle),transparent 0deg 235deg,var(--frame-tint) 272deg,var(--frame-light) 322deg,#fff6df 338deg,var(--frame-light) 346deg,transparent 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  animation:anodos-frame-orbit 5.2s linear infinite;
  animation-delay:var(--frame-delay);
}
.family-card .card-preview:hover,.family-card .card-preview:focus-visible{
  box-shadow:0 0 15px var(--frame-glow),inset 0 0 10px var(--frame-glow);
}
@keyframes anodos-frame-orbit{from{--anodos-frame-angle:0deg}to{--anodos-frame-angle:360deg}}
@media(prefers-reduced-motion:reduce){
  .family-card .card-preview::after{animation:none;--anodos-frame-angle:35deg}
}
@media print{.family-card .card-preview::after{display:none}.family-card .card-preview{box-shadow:none}}