/* ============================================================
   Home page: moon + zodiac ring, instant Moon sign form, three ways to begin.
   All classes start with "zd-" so they don't clash with existing styles.
   Load on the home page only.
   Fonts used: Cormorant Garamond (headings) and Nunito (body).
   ============================================================ */

/* 星空はページ全体の背景です。半透明のヘッダーとフッターにも、星が透けて見えます。 */
.page-home {
  background-color:#0c0e28;
  background-image:url("../images/home/starfield-1920.jpg");
  background-image:image-set(url("../images/home/starfield-1920.webp") type("image/webp"),url("../images/home/starfield-1920.jpg") type("image/jpeg"));
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.zd-stage {
  padding:35px clamp(16px,5vw,80px) 28px;
  flex:1 0 auto;
}
.zd-inner {
  width:100%;
  max-width:1080px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  align-items:center;
  gap:32px;
  padding-bottom:28px;
}
.zd-moonwrap {
  position:relative;
  width:100%;
  max-width:414px;
  aspect-ratio:1/1;
  margin:0 auto;
}
.zd-ring {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.zd-ring-inner { animation:zd-spin 240s linear infinite; }   /* zodiac signs */
.zd-ring-outer { animation:zd-spin 480s linear infinite; }   /* planets: half the speed */
.zd-moon {
  position:absolute;
  left:15%;
  top:15%;
  width:70%;
  height:70%;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 0 60px rgba(240,214,143,.25);
}
@keyframes zd-spin { to { transform:rotate(360deg); } }

.zd-intro {
  font-family:Nunito,'Segoe UI',system-ui,sans-serif;
  min-width:0;
}
.zd-eyebrow {
  margin:0;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#d6b468;
}
.zd-tagline {
  margin:2px 0 0;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic;
  font-weight:500;
  font-size:clamp(16px,1.6vw,19px);
  color:#b4aed0;
}
.zd-title {
  margin:4px 0 6px;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:600;
  font-size:clamp(28px,3.4vw,38px);
  line-height:1.1;
  color:#ece8f7;
  text-wrap:balance;
}
.zd-lead {
  margin:0 0 12px;
  max-width:52ch;
  font-size:14px;
  line-height:1.5;
  color:#b4aed0;
}
.zd-card {
  background:rgba(13,11,34,.62);
  border:1px solid rgba(214,180,104,.35);
  border-radius:14px;
  padding:16px;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.zd-form {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.zd-field { display:grid; gap:4px; align-content:start; min-width:0; }
.zd-field-full { grid-column:1/-1; }
.zd-field > label {
  font-size:13px;
  color:#b4aed0;
}
.zd-form .date-fields { grid-template-columns:1.25fr 1.5fr 1fr; gap:6px; }
.zd-form .time-fields { gap:8px; }
.zd-form select,
.zd-form input[type="text"] { padding-top:8px; padding-bottom:8px; min-width:0; }
.zd-form select { padding-left:10px; padding-right:28px; background-position:right 8px center; }
.zd-check {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:2px;
  font-size:13px;
  color:#ece8f7;
  cursor:pointer;
}
.zd-check input { width:18px; height:18px; margin:0; accent-color:#d6b468; cursor:pointer; }
.zd-go {
  grid-column:1/-1;
  background:#d6b468;
  color:#1a1630;
  border:0;
  border-radius:999px;
  padding:10px 20px;
  font:700 16px Nunito,'Segoe UI',system-ui,sans-serif;
  cursor:pointer;
}
.zd-go:hover { background:#f0d68f; }
.zd-go:disabled { opacity:.6; cursor:progress; }
.zd-error {
  margin:10px 0 0;
  font-size:14px;
  color:#ff8a8a;
}
.zd-result {
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(214,180,104,.35);
}
.zd-result[hidden], .zd-error[hidden] { display:none; }
.zd-glyph {
  font-size:40px;
  line-height:1;
  color:#f0d68f;
  font-family:'Segoe UI Symbol','Noto Sans Symbols 2','Noto Sans Symbols','Apple Symbols',serif;
}
.zd-result-title {
  margin:0;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:22px;
  color:#ece8f7;
}
.zd-result-text { margin:2px 0 0; font-size:14px; color:#b4aed0; }
.zd-result-text a { color:#f0d68f; font-weight:600; }

/* ---- Three ways to begin ---- */
.zd-ways {
  width:100%;
  max-width:1080px;
  margin:0 auto;
  font-family:Nunito,'Segoe UI',system-ui,sans-serif;
}
.zd-ways-title {
  margin:12px 0 4px;
  text-align:center;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:30px;
  color:#ece8f7;
}
.zd-ways-sub { margin:0 0 20px; text-align:center; color:#b4aed0; }
.zd-ways-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.zd-way {
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:16px;
  background:rgba(13,11,34,.62);
  border:1px solid rgba(214,180,104,.35);
  border-radius:14px;
  text-decoration:none;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  transition:border-color .2s, transform .2s;
}
.zd-way:hover { border-color:#f0d68f; transform:translateY(-2px); }
.zd-way:focus-visible { outline:2px solid #f3e3b5; outline-offset:2px; }
.zd-way svg { width:44px; height:44px; }
.zd-way-k { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#d6b468; }
.zd-way-title { font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; font-size:24px; line-height:1.2; color:#ece8f7; }
.zd-way-desc { font-size:14px; color:#b4aed0; }
.zd-way-more { margin-top:auto; padding-top:6px; font-size:14px; font-weight:600; color:#f0d68f; }
.zd-more-links {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px 28px;
  margin:28px 0 0;
  font-size:14px;
}
.zd-more-links a { color:#b4aed0; text-decoration:none; }
.zd-more-links a:hover { color:#f0d68f; }

@media (max-width: 820px) {
  .zd-inner { grid-template-columns:1fr; gap:16px; }
  .zd-moonwrap { max-width:300px; }
  .zd-ways-grid { grid-template-columns:1fr; }
  .zd-form { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .zd-ring-inner, .zd-ring-outer { animation:none; }
  .zd-way { transition:none; }
}

@media (max-width: 760px) {
  .page-home {
    background-image:url("../images/home/starfield-1920.jpg");
    background-image:image-set(url("../images/home/starfield-1080.webp") type("image/webp"),url("../images/home/starfield-1920.jpg") type("image/jpeg"));
  }
}