/* ============================================================================
   theme-home — Home Welcoming. Spirit: sunrise, family table, gentle joy.
   Signature: gold-200, peach-200, cream-200, butter.  Motion: golden motes.
   Pages: /, /connect/, /subscribe/
   ========================================================================== */
[data-theme="theme-home"] {
  --page-bg: var(--cream-200);
  --page-accent: var(--gold-400);
  --page-accent-2: var(--peach-300);
  --hero-from: var(--gold-100);
  --hero-to: var(--peach-200);
}

/* Sunrise hero with drifting golden motes (performant, CSS-only) */
[data-theme="theme-home"] .cinematic-hero {
  background: radial-gradient(120% 120% at 50% -10%, var(--butter) 0%, var(--gold-100) 35%, var(--peach-200) 100%);
}
[data-theme="theme-home"] .cinematic-hero::before,
[data-theme="theme-home"] .cinematic-hero::after {
  content: ""; position: absolute; inset: -20%; z-index: 1; pointer-events: none;
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--gold-300) 70%, transparent) 0 1.6px, transparent 2px),
    radial-gradient(circle, color-mix(in srgb, var(--butter) 80%, transparent) 0 1.2px, transparent 2px);
  background-size: 120px 120px, 170px 170px;
  background-position: 0 0, 40px 60px;
  opacity: 0.5;
  animation: cah-drift 26s linear infinite alternate;
}
[data-theme="theme-home"] .cinematic-hero::after { animation-duration: 38s; opacity: 0.35; background-size: 200px 200px, 150px 150px; }

/* Verse-of-the-day card sits on a grace gradient */
[data-theme="theme-home"] .vod-section { background: var(--grad-grace); }
[data-theme="theme-home"] .mosaic-section { background: var(--grad-noon); }

/* Hymn of the day */
.hotd { padding: var(--s-7) var(--margin); background: radial-gradient(120% 120% at 50% 0%, var(--gold-100), var(--peach-100) 70%, var(--cream-200)); }
.hotd__inner { max-width: 640px; margin-inline: auto; text-align: center; }
.hotd__kicker { font-family: var(--ff-mono); font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--gold-400); margin-bottom: var(--s-2); }
.hotd__title { font-family: var(--ff-serif); font-size: var(--fs-headline); margin: 0 0 var(--s-3); color: var(--ink); }
.hotd__verse { font-family: var(--ff-serif); font-style: italic; font-size: var(--fs-scripture); color: var(--ink); border: 0; margin: 0 0 var(--s-4); }
.hotd__verse cite { display: block; font-family: var(--ff-sans); font-style: normal; font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--gold-400); margin-top: var(--s-2); }
.hotd__play {
  display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer;
  font-family: var(--ff-sans); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.04em;
  color: var(--ink); background: var(--gold-400); border: 0; border-radius: var(--r-pill);
  padding: var(--s-3) var(--s-5); box-shadow: var(--sh-soft);
  transition: transform var(--dur-fast) var(--ease-calm), background var(--dur-fast) var(--ease-calm);
}
.hotd__play:hover { background: var(--gold-300); transform: translateY(-2px); }
.hotd__audio, #hotd-audio { width: 100%; max-width: 420px; margin-top: var(--s-3); }
.hotd__note { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: var(--s-3); }
.hotd__note a { color: var(--gold-400); }