/* ====================================================================
   星座星盤「星座宇宙」首屏主視覺 .ax-hero(2026-10-28)
   取代水墨橫卷;只有 theme-astro 頁會引入(resources/views/reading/_astro-hero.blade.php)。
   色票跟 astro-cosmos.css 同值:靛夜 #0c0f1e/#161d38、星光金 #d4b46a/#e8d2a0、極光青 #4bcfbe。
   靜態檔、免 build,?v= 跟檔案修改時間走。
   ==================================================================== */

.ax-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 1.25rem;
  background:
    radial-gradient(70% 60% at 50% 46%, rgba(246, 206, 128, .13), transparent 70%),
    radial-gradient(55% 55% at 6% 102%, rgba(75, 207, 190, .2), transparent 72%),
    radial-gradient(50% 50% at 98% -2%, rgba(129, 120, 214, .22), transparent 72%),
    radial-gradient(120% 95% at 50% 30%, #262d5a 0%, #161c3d 46%, #0a0d1d 100%);
  box-shadow: 0 0 0 1px rgba(212, 180, 106, .5), 0 30px 60px -30px rgba(3, 5, 14, .85);
}
.ax-hero::after {
  content: "";
  position: absolute;
  inset: .45rem;
  border: 1px solid rgba(212, 180, 106, .26);
  border-radius: .95rem;
  pointer-events: none;
  z-index: 3;
}

/* 背景星座連線 + 星點 */
.ax-sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.ax-const line { stroke: #e8d2a0; stroke-opacity: .3; stroke-width: 1.3; stroke-linecap: round; }
.ax-cstar circle { fill: #f6ead0; }
.ax-cstar .tw { animation: ax-twinkle 4.8s ease-in-out infinite; }
@keyframes ax-twinkle { 50% { opacity: .35; } }
.ax-dust {
  position: absolute; inset: 0; z-index: -1; opacity: .75; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff9 50%, transparent 51%), radial-gradient(1px 1px at 32% 72%, #fff6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 12%, #fffb 50%, transparent 51%), radial-gradient(1px 1px at 78% 64%, #fff7 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 30%, #fff6 50%, transparent 51%), radial-gradient(1.5px 1.5px at 22% 90%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 46% 44%, #fff5 50%, transparent 51%), radial-gradient(1px 1px at 70% 88%, #fff6 50%, transparent 51%);
  background-size: 210px 170px;
}

/* 2.5D:黃道環躺下慢轉、赤道斜穿 */
.ax-stage { position: absolute; inset: 0; perspective: 820px; perspective-origin: 50% 8%; }
.ax-stage::before { /* 燈到盤心的一道光 */
  content: ""; position: absolute; left: 50%; top: 17%; width: 1px; height: 44%;
  background: linear-gradient(rgba(246, 206, 128, .75), rgba(246, 206, 128, .05));
}
.ax-halo {
  position: absolute; left: 50%; top: 62%; width: 82%; height: 62%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(246, 206, 128, .26), rgba(246, 206, 128, .07) 60%, transparent);
}
.ax-plane { position: absolute; left: 50%; top: 62%; width: 58%; aspect-ratio: 1; }
.ax-plane > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.ax-ecliptic { transform: translate(-50%, -50%) rotateX(63deg); }
.ax-equator { width: 64%; transform: translate(-50%, -50%) rotateZ(-23.4deg) rotateX(66deg); }
.ax-wheel { filter: drop-shadow(0 16px 14px rgba(0, 0, 0, .45)); animation: ax-spin 150s linear infinite; }
.ax-orbit { animation: ax-spin 40s linear infinite; }
.ax-sunbead { fill: #fff2d0; filter: drop-shadow(0 0 4px #f6ce80); }
.ax-moonbead { fill: #dfe1ed; opacity: .85; }
@keyframes ax-spin { to { transform: rotate(-360deg); } }

.ax-lamp { position: absolute; left: 50%; top: 7%; width: 7%; max-width: 2.6rem; aspect-ratio: 1; transform: translateX(-50%); animation: ax-bob 5s ease-in-out infinite; }
.ax-lamp span {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff7e2 0%, #f3d08c 45%, #c98a3a 100%);
  box-shadow: 0 0 20px 7px rgba(246, 206, 128, .5), 0 0 56px 18px rgba(246, 206, 128, .2);
}
@keyframes ax-bob { 50% { translate: 0 -5px; } }

.ax-tag {
  position: absolute; display: inline-flex; align-items: center; gap: .3rem;
  padding: .18rem .62rem .18rem .45rem; border-radius: 999px;
  font-size: .75rem; font-weight: 700; letter-spacing: .1em; line-height: 1.5; white-space: nowrap; color: #f3e6c4;
  background: rgba(16, 20, 44, .82); border: 1px solid rgba(212, 180, 106, .58);
  animation: ax-bob 6s ease-in-out infinite;
}
.ax-tag svg { width: .95rem; height: .95rem; fill: none; stroke: #e8d2a0; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ax-tag-1 { left: 7%; top: 24%; }
.ax-tag-2 { right: 6%; top: 38%; animation-delay: -2s; }
.ax-tag-3 { left: 11%; bottom: 9%; animation-delay: -4s; }

/* 手機:窗口矮一點,星盤略大 */
@media (max-width: 639px) {
  .ax-hero { aspect-ratio: 2 / 1; border-radius: 1rem; }
  .ax-hero::after { inset: .35rem; border-radius: .75rem; }
  .ax-plane { width: 58%; top: 60%; }
  .ax-equator { width: 66%; }
  .ax-lamp { top: 6%; width: 8%; }
  .ax-stage::before { top: 19%; height: 40%; }
  .ax-tag { font-size: .6875rem; padding: .12rem .5rem .12rem .38rem; letter-spacing: .06em; }
  .ax-tag svg { width: .8rem; height: .8rem; }
  .ax-tag-1 { left: 5%; top: 20%; }
  .ax-tag-2 { right: 4%; top: 36%; }
  .ax-tag-3 { left: 7%; bottom: 10%; }
}

/* 填寫頁首屏:平板寬度維持「左圖右字」兩欄(原本的規則只認 .xd-cover-scroll);≥1280 由 wide-layout 收成左欄 */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .xd-start-head:has(.ax-hero) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); text-align: left; }
  .xd-start-head:has(.ax-hero) .hx-kicker { justify-content: flex-start; }
}
@media (min-width: 1280px) {
  .xd-svc-aside .ax-hero { max-width: 34rem; }
}

/* 命書扉頁:置中、比填寫頁小 */
.ax-hero.is-reading { max-width: 26rem; margin: 0 auto 1.4rem; }
@media (max-width: 639px) { .ax-hero.is-reading { max-width: 100%; margin-bottom: 1.1rem; } }

@media (prefers-reduced-motion: reduce) {
  .ax-wheel, .ax-orbit, .ax-lamp, .ax-tag, .ax-cstar .tw { animation: none; }
}