/* =====================================================================
   pages/home-theme.css — attractive background colours (public site)
   Only affects pages with <body class="site"> (home, login, join, plan).
   Change the colours in :root below to try other looks.
   ===================================================================== */
body.site {
  --bg-plum-1: #22060a;
  --bg-plum-2: #470e18;
  --bg-plum-3: #731827;
  --bg-wine-1: #270a0f;
  --bg-wine-2: #5c1424;
  --bg-gold: #e4b53a;
  --bg-cream: #fff8ec;
  --bg-champagne: #f6e7c8;

  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(228, 181, 58, .16), transparent 60%),
    radial-gradient(900px 500px at 110% 20%, rgba(115, 24, 39, .14), transparent 60%),
    linear-gradient(180deg, #fbf6ec 0%, #f8f3f4 100%);
  background-attachment: fixed;
}

/* Hero: deeper royal plum → gold glow behind the banner photo */
body.site .hero {
  background: linear-gradient(135deg, var(--bg-plum-1), var(--bg-plum-2) 55%, #572029);
}

/* Income calculator: warm cream with soft gold corners */
body.site #income-calc {
  background:
    radial-gradient(600px 300px at 0% 0%, rgba(228, 181, 58, .22), transparent 70%),
    radial-gradient(600px 300px at 100% 100%, rgba(115, 24, 39, .16), transparent 70%),
    linear-gradient(180deg, var(--bg-cream), #f4efe2);
}

/* Showroom window: rich wine-red velvet with a moving gold shimmer */
body.site .showcase-intro {
  background:
    radial-gradient(700px 400px at 85% 10%, rgba(228, 181, 58, .22), transparent 65%),
    radial-gradient(600px 400px at 0% 100%, rgba(132, 38, 54, .45), transparent 65%),
    linear-gradient(135deg, var(--bg-wine-1), var(--bg-wine-2) 50%, #360e14);
  background-size: 140% 140%, 140% 140%, 100% 100%;
  animation: bg-drift 16s ease-in-out infinite alternate;
}

/* Gold / Silver / Diamond + about: champagne with a light gold sheen */
body.site .home-block {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .55) 0%, transparent 40%),
    linear-gradient(180deg, var(--bg-champagne), #fdf6e6 60%, #f6eff0);
}

/* Gold coin quotation: deep teal-royal plum top, cream bottom */
body.site .coin-quote-block {
  background:
    radial-gradient(500px 260px at 90% 0%, rgba(228, 181, 58, .3), transparent 70%),
    linear-gradient(180deg, #200409 0%, #560f1b 42%, #f6e7c8 42%, #fff9ee 100%);
}

/* How SSS Fashion earns: fresh mint with colour blobs */
body.site .earn-block {
  background:
    radial-gradient(500px 300px at 5% 15%, rgba(79, 140, 255, .12), transparent 70%),
    radial-gradient(500px 300px at 95% 30%, rgba(244, 119, 140, .12), transparent 70%),
    radial-gradient(600px 300px at 50% 100%, rgba(60, 196, 124, .16), transparent 70%),
    linear-gradient(180deg, #f7edef, #fdfbfb 45%, #f2e4e6);
}

/* Jewellery sections — each metal gets its own mood */
body.site .treasury#gold {
  background:
    linear-gradient(90deg, #b8893a, var(--bg-gold), #b8893a) 0 0 / 100% 6px no-repeat,
    radial-gradient(800px 400px at 100% 0%, rgba(228, 181, 58, .25), transparent 65%),
    linear-gradient(180deg, #fff6e2, #f7e6c2);
}
body.site .treasury#silver {
  background:
    linear-gradient(90deg, #8d9aa7, #e9eef3, #8d9aa7) 0 0 / 100% 6px no-repeat,
    radial-gradient(800px 400px at 0% 0%, rgba(160, 180, 200, .3), transparent 65%),
    linear-gradient(180deg, #f6f8fb, #e4eaf0);
}
body.site .treasury#diamond {
  background:
    linear-gradient(90deg, #6fb8e8, #e6f6ff, #6fb8e8) 0 0 / 100% 6px no-repeat,
    radial-gradient(800px 400px at 100% 100%, rgba(143, 211, 255, .3), transparent 65%),
    radial-gradient(600px 300px at 0% 0%, rgba(248, 167, 181, .18), transparent 65%),
    linear-gradient(180deg, #f5fbff, #e6f1fb);
}

/* Showrooms: royal plum gradient, light text on top */
body.site #showrooms {
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(228, 181, 58, .25), transparent 70%),
    linear-gradient(135deg, var(--bg-plum-1), var(--bg-plum-2) 60%, var(--bg-plum-3));
  background-size: 140% 140%, 100% 100%;
  animation: bg-drift 18s ease-in-out infinite alternate;
}
body.site #showrooms .section-head h2 { color: #fff7e2; }

/* Footer: dark royal plum with a thin gold top line */
body.site .site-footer {
  background:
    linear-gradient(90deg, transparent, var(--bg-gold), transparent) 0 0 / 100% 2px no-repeat,
    linear-gradient(180deg, #2b090f, #190407);
}

@keyframes bg-drift {
  from { background-position: 0% 0%, 100% 100%, 0 0; }
  to   { background-position: 100% 60%, 0% 40%, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  body.site .showcase-intro,
  body.site #showrooms { animation: none; }
}

/* Gold kicker text on the dark sections */
body.site .showcase-intro .section-head .kicker,
body.site #showrooms .section-head .kicker {
  background-image: linear-gradient(90deg, #c6902a, #ffe7a3, #e4b53a, #ffe7a3, #c6902a);
}