/* DARK: 満天の星（::before）＋天の川風グロー（::after） */
.logo-title::before,
.logo-title::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
/* 星グループA（速い・強くチカチカ） */
.logo-title::before {
  background-image:
    radial-gradient(1.4px 1.4px at 6% 18%, #fff5c2 99%, transparent),
    radial-gradient(1.8px 1.8px at 22% 30%, #fff5c2 99%, transparent),
    radial-gradient(1.2px 1.2px at 38% 12%, #fff 99%, transparent),
    radial-gradient(1.6px 1.6px at 56% 28%, #fff5c2 99%, transparent),
    radial-gradient(1.3px 1.3px at 70% 8%, #fff 99%, transparent),
    radial-gradient(1.5px 1.5px at 86% 35%, #fff5c2 99%, transparent),
    radial-gradient(1.1px 1.1px at 97% 20%, #fff 99%, transparent);
  background-repeat: no-repeat;
  animation: skyTwinkleA 1.8s steps(2, end) infinite;
}
/* 星グループB（遅い・別タイミング）+ 微かな天の川 */
.logo-title::after {
  background-image:
    radial-gradient(ellipse 60% 30% at 50% 30%, rgba(180,210,255,0.10), transparent 70%),
    radial-gradient(1px 1px at 14% 65%, #fff 99%, transparent),
    radial-gradient(1px 1px at 30% 80%, #fff 99%, transparent),
    radial-gradient(1px 1px at 47% 55%, #cce4ff 99%, transparent),
    radial-gradient(1px 1px at 63% 72%, #fff 99%, transparent),
    radial-gradient(1px 1px at 78% 50%, #cce4ff 99%, transparent),
    radial-gradient(1px 1px at 92% 75%, #fff 99%, transparent);
  background-repeat: no-repeat;
  animation: skyTwinkleB 2.7s ease-in-out infinite;
  animation-delay: 0.6s;
}
@keyframes skyTwinkleA {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}
@keyframes skyTwinkleB {
  0%, 100% { opacity: 0.4; }
  35%      { opacity: 1; }
  70%      { opacity: 0.5; }
}

/* LIGHT: 青空＋ふんわり雲 */
:root[data-theme="light"] .logo-title {
  background: linear-gradient(180deg, #7ec6ff 0%, #b7e1ff 55%, #e3f3ff 100%);
}
:root[data-theme="light"] .logo-title::before {
  background-image:
    radial-gradient(ellipse 28px 7px at 10% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 22px 6px at 38% 60%, rgba(255,255,255,0.85), rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 32px 8px at 70% 25%, rgba(255,255,255,0.9), rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 20px 6px at 92% 55%, rgba(255,255,255,0.8), rgba(255,255,255,0) 70%);
  background-repeat: no-repeat;
  /* 左右にゆったり揺れる */
  animation: cloudSway 12s ease-in-out infinite alternate;
}
:root[data-theme="light"] .logo-title::after {
  background: none;
  animation: none;
}
@keyframes cloudSway {
  from { background-position: -25px 0, 30px 0, -20px 0, 25px 0; }
  to   { background-position:  25px 0, -30px 0, 20px 0, -25px 0; }
}

/* タイトル本体を pseudo より前面に */
.logo-title > * {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .logo-title::before,
  .logo-title::after { animation: none; }
}

.logo-title a {
  display: inline-block
}

.site-logo {
  width: 100%;
  max-width: 280px;
  height: auto;
  object-fit: contain;
  margin: 0;
  border-radius: 0 !important;
}

@media(max-width:480px) {
  .site-logo {
    max-width: 75%
  }
}