/* AstroTheme — home page only (index.html): hero, horoscope feature cards,
   "today at a glance" list. Loaded after base.css. */

/* ── Hero ────────────────────────────────────────────────────────────────── */
/* Full-width warm gradient; soft glows keep wide screens from looking empty. */
.as-hero { position: relative; overflow: hidden;
  background:
    radial-gradient(900px 420px at 78% 40%, rgba(255, 214, 160, .55), transparent 70%),
    radial-gradient(700px 400px at 100% 100%, rgba(214, 190, 235, .55), transparent 70%),
    linear-gradient(115deg, #fdf2e3 0%, #fbe9d4 40%, #f6dfd3 70%, #e9d5e6 100%);
  border-radius: 0 0 50% 50% / 0 0 26px 26px; }
/* Copy left, artwork right — the art has its own column, so the headline
   never runs over it. */
.as-hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 24px;
  max-width: var(--as-wrap); margin: 0 auto; padding: 36px 16px 52px 40px; }
/* Square artwork, faded out on every side (radial mask) so it melts into the
   hero gradient instead of ending in a hard rectangle at any screen width. */
.as-hero-art { position: relative; order: 2; width: 100%; max-width: 470px; aspect-ratio: 1; justify-self: end;
  background: url('../../../img/themes/AstroTheme/hero-wheel.webp') center / cover no-repeat;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }
.as-hero-copy { position: relative; z-index: 2; }

/* ── Animated chakra (overlay on the hero picture) ──────────────────────── */
/* Frosted band hiding the picture's own zodiac ring (r 184–341 of the 878px
   picture, centred at 363,394 → these % of the square box). */
.as-chakra-veil { position: absolute; left: 2.5%; top: 5.35%; width: 77.7%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 249, 240, .78) 60%, rgba(250, 238, 226, .72) 100%);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  -webkit-mask-image: radial-gradient(closest-side, transparent 53.5%, #000 54.5%, #000 99%, transparent 100%);
  mask-image: radial-gradient(closest-side, transparent 53.5%, #000 54.5%, #000 99%, transparent 100%); }
.as-chakra { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.as-chakra-ring, .as-chakra-orbit, .as-chakra-glow, .as-chakra-sparkle { transform-box: view-box; }
.as-chakra-ring { transform-origin: 363px 394px; animation: as-chakra-spin 90s linear infinite; }
.as-chakra-orbit { transform-origin: 363px 394px; animation: as-chakra-spin 45s linear infinite reverse; }
.as-chakra-line { fill: none; stroke: #c98a1e; stroke-width: 1.4; opacity: .75; }
.as-chakra-line-bold { stroke-width: 2.6; opacity: .9; }
.as-chakra-tick { fill: #c98a1e; opacity: .8; }
.as-chakra-dash { fill: none; stroke: #d99a2b; stroke-width: 2; stroke-dasharray: 2 10; stroke-linecap: round; }
.as-chakra-orbit-star { fill: #e0a63a; }
/* Each sign counter-rotates around its own centre, so it stays upright while the wheel turns. */
.as-chakra-upright { transform-box: fill-box; transform-origin: center; animation: as-chakra-spin 90s linear infinite reverse; }
.as-chakra-glyph { fill: #2a3266; font: 46px 'Segoe UI Symbol', 'Noto Sans Symbols', 'Noto Sans Symbols 2', 'DejaVu Sans', serif;
  text-anchor: middle; dominant-baseline: central; }
.as-chakra-glow { fill: none; stroke: #ffc35a; stroke-width: 16; transform-origin: 363px 394px;
  animation: as-chakra-pulse 4s ease-in-out infinite alternate; }
.as-chakra-sparkle { fill: #f3c160; transform-origin: center; transform-box: fill-box;
  animation: as-chakra-twinkle 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes as-chakra-spin { to { transform: rotate(360deg); } }
@keyframes as-chakra-pulse { from { opacity: .25; } to { opacity: .85; } }
@keyframes as-chakra-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .as-chakra-ring, .as-chakra-orbit, .as-chakra-upright, .as-chakra-glow, .as-chakra-sparkle { animation: none; }
}
.as-hero h1 { font-family: var(--as-display); font-weight: 700; font-size: clamp(36px, 4.8vw, 54px); line-height: 1.02; margin: 12px 0 16px; letter-spacing: -.3px; }
.as-hero-lead { font-size: 16.5px; max-width: 440px; line-height: 1.45; margin: 0; }
.as-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.as-hero-note { font-size: 13px; color: var(--as-muted); margin: 14px 0 0; }

/* ── Daily / Yearly / Love feature cards ─────────────────────────────────── */
.as-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.as-feature { position: relative; overflow: hidden; border-radius: var(--as-radius); padding: 20px 22px 22px 28px; min-height: 235px; }
.as-feature-deco { position: absolute; right: 0; top: 0; height: 100%; width: 36%; background-size: cover; background-position: right top; opacity: .95;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%); mask-image: linear-gradient(90deg, transparent, #000 50%); }
.as-feature > :not(.as-feature-deco) { position: relative; }
.as-feature-ico { height: 56px; width: auto; margin: 0 0 14px -6px; }
.as-feature h3 { font-size: 21px; margin-bottom: 6px; }
.as-feature p { font-size: 14px; line-height: 1.45; max-width: 200px; margin: 0 0 16px; }

.as-feature-daily { background: linear-gradient(120deg, #fdf1df, #fbe6d6 60%, #f4dbe0); }
.as-feature-daily .as-feature-deco { background-image: url('../../../img/themes/AstroTheme/deco-daily.webp'); }
.as-feature-daily .as-btn-outline { border-color: #e2a855; color: #9a5d0a; }
.as-feature-yearly { background: linear-gradient(120deg, #efeefd, #e7e5fb 60%, #e1e3f7); }
.as-feature-yearly .as-feature-deco { background-image: url('../../../img/themes/AstroTheme/deco-yearly.webp'); }
.as-feature-yearly .as-btn-outline { border-color: #6a6fd8; color: #2f3290; }
.as-feature-love { background: linear-gradient(120deg, #fde9ea, #fbdedf 60%, #f5cdd4); }
.as-feature-love .as-feature-deco { background-image: url('../../../img/themes/AstroTheme/deco-love.webp'); }
.as-feature-love .as-btn-outline { border-color: #e46a7e; color: #b4223f; }

/* ── Today at a glance ───────────────────────────────────────────────────── */
.as-glance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 14px; margin-top: 14px; }
.as-glance-row { display: flex; align-items: center; gap: 10px; background: var(--as-surface); border: 1px solid var(--as-line); border-radius: 10px;
  padding: 6px 12px; text-decoration: none; color: var(--as-text); }
.as-glance-row:hover { border-color: var(--as-gold); }
.as-glance-name { font-weight: 600; color: var(--as-ink); }
.as-glance-mood { font-size: 13px; color: var(--as-muted); margin-left: auto; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .as-feature-grid { grid-template-columns: 1fr 1fr; }
  .as-hero-inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); padding-left: 16px; }
  .as-glance { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .as-hero { border-radius: 0 0 50% 50% / 0 0 16px 16px; }
  .as-hero-inner { grid-template-columns: 1fr; padding: 28px 16px 36px; gap: 8px; }
  .as-hero-art { max-width: 340px; justify-self: center; }
  .as-feature-grid, .as-glance { grid-template-columns: 1fr; }
}