html body .cafe-directory-page .cafe-night-sky {
  border: 1px solid #d9e1da;
  border-radius: 8px;
  background-color: #eef1ee;
  background-image: linear-gradient(135deg, rgba(255,255,255,.76), transparent 58%), repeating-linear-gradient(132deg, rgba(98,116,103,.035) 0 1px, transparent 1px 14px), linear-gradient(145deg, #f2f4f1 5%, #e6ebe7 56%, #eff1ee 100%);
  box-shadow: 0 9px 24px rgba(47,60,50,.08);
  animation: cafe-main-art-drift 18s ease-in-out infinite alternate;
}

html body .cafe-directory-page .cafe-night-sky::before {
  top: 28%;
  left: -25%;
  width: 150%;
  height: 42%;
  background: linear-gradient(95deg, transparent 10%, rgba(255,255,255,.16) 45%, rgba(255,255,255,.52) 58%, transparent 88%);
  animation: cafe-main-ribbon 12s ease-in-out infinite alternate;
}

html body .cafe-directory-page .cafe-night-moon {
  color: #75847a;
  text-shadow: 0 0 12px rgba(255,255,255,.76);
  animation: cafe-main-moon 5s ease-in-out infinite alternate;
}

html body .cafe-directory-page .cafe-night-caption span {
  color: #68736b;
  text-shadow: none;
}

html body .cafe-directory-page .cafe-night-caption strong {
  color: #34463a;
  text-shadow: none;
}

html body .cafe-directory-page .cafe-night-star {
  background: #718178;
  box-shadow: 0 0 0 2px rgba(113,129,120,.08);
  animation: cafe-main-star 3.8s ease-in-out infinite;
}

html body .cafe-directory-page .cafe-night-constellation-line {
  background: linear-gradient(90deg, transparent, rgba(104,125,110,.36), transparent);
  opacity: .3;
  animation: cafe-main-connect 11s ease-in-out infinite;
}

html body .cafe-directory-page .cafe-night-constellation-point {
  background: #75877a;
  box-shadow: 0 0 0 3px rgba(117,135,122,.08);
  animation: cafe-main-point 5.4s ease-in-out infinite;
}

html body .cafe-directory-page .cafe-night-shooting-star {
  background: linear-gradient(90deg, transparent, rgba(118,139,123,.36) 58%, #84968a);
  filter: none;
  animation: cafe-main-comet 12s ease-out infinite;
}

@keyframes cafe-main-art-drift {
  from { transform: translateY(0); }
  to { transform: translateY(-3px); }
}

@keyframes cafe-main-ribbon {
  from { transform: translateX(-2%) rotate(-24deg); opacity: .55; }
  to { transform: translateX(3%) rotate(-20deg); opacity: 1; }
}

@keyframes cafe-main-moon {
  from { opacity: .74; transform: rotate(-18deg) translateY(1px); }
  to { opacity: 1; transform: rotate(-14deg) translateY(-2px); }
}

@keyframes cafe-main-star {
  0%, 100% { opacity: .38; transform: scale(.85); }
  50% { opacity: .85; transform: scale(1.18); }
}

@keyframes cafe-main-connect {
  0%, 100% { opacity: .2; }
  50% { opacity: .48; }
}

@keyframes cafe-main-point {
  0%, 100% { opacity: .55; transform: scale(.9); }
  50% { opacity: .95; transform: scale(1.12); }
}

@keyframes cafe-main-comet {
  0%, 74%, 100% { opacity: 0; transform: translate3d(0,0,0) rotate(42deg) scaleX(.15); }
  8% { opacity: .48; }
  20% { opacity: .34; transform: translate3d(38px,42px,0) rotate(42deg) scaleX(.8); }
  30% { opacity: 0; transform: translate3d(55px,61px,0) rotate(42deg) scaleX(.2); }
}

@media (prefers-reduced-motion: reduce) {
  html body .cafe-directory-page .cafe-night-sky,
  html body .cafe-directory-page .cafe-night-sky::before,
  html body .cafe-directory-page .cafe-night-moon,
  html body .cafe-directory-page .cafe-night-star,
  html body .cafe-directory-page .cafe-night-constellation-line,
  html body .cafe-directory-page .cafe-night-constellation-point,
  html body .cafe-directory-page .cafe-night-shooting-star {
    animation: none;
  }
}