/*
 * Gita Main site-wide background contract
 *
 * Main owns this contract. Lite is an independent website with its own
 * background source and deployment lifecycle.
 */

@import url('/shared/site-shell/contract.css?v=2-home-cover-light-text');

:root {
  --gita-theme-bg-base: #080a0f;
  --gita-theme-bg-warm: rgba(255, 104, 57, .10);
  --gita-theme-bg-gold: rgba(245, 158, 11, .07);
  --gita-theme-bg-cool: rgba(6, 182, 212, .055);
  --gita-theme-bg-rose: rgba(236, 72, 153, .07);
  --gita-theme-bg-flow: rgba(117, 231, 255, .04);
}

html[data-theme="dark"] {
  --gita-theme-bg-base: linear-gradient(148deg, #080a0f 0%, #120b11 45%, #081017 100%);
  --gita-theme-bg-warm: rgba(255, 104, 57, .105);
  --gita-theme-bg-gold: rgba(245, 158, 11, .075);
  --gita-theme-bg-cool: rgba(6, 182, 212, .06);
  --gita-theme-bg-rose: rgba(236, 72, 153, .075);
  --gita-theme-bg-flow: rgba(117, 231, 255, .045);
}

html[data-theme="light"] {
  --gita-theme-bg-base: linear-gradient(148deg, #fffaf7 0%, #ffffff 46%, #f4f8fc 100%);
  --gita-theme-bg-warm: rgba(245, 158, 11, .055);
  --gita-theme-bg-gold: rgba(189, 122, 8, .045);
  --gita-theme-bg-cool: rgba(8, 145, 178, .045);
  --gita-theme-bg-rose: rgba(225, 29, 72, .045);
  --gita-theme-bg-flow: rgba(14, 116, 144, .028);
}

html.gita-theme-bg {
  min-height: 100%;
  background: var(--gita-theme-bg-base) !important;
}

body.gita-theme-bg {
  position: relative;
  isolation: isolate;
  min-height: 100%;
  background: transparent !important;
  background-image: none !important;
}

/* Inner-page shells own their cards, not the whole canvas. Keeping these
   layout wrappers transparent lets the same light/dark music atmosphere show
   through on Events, Profile, Tickets, Transactions, and Activity. */
body.gita-theme-bg .app-shell,
body.gita-theme-bg .app-main,
body.gita-theme-bg .app-content,
body.rdm-home-page .rdm-footer {
  background: transparent !important;
  background-image: none !important;
}

body.rdm-home-page {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Route styles often scope their canvas to html[data-theme] plus a page class.
   Keep the shared canvas authoritative so those older page backgrounds cannot
   sit above or duplicate this layer. */
html[data-theme][data-theme] body.gita-theme-bg {
  background: transparent !important;
  background-image: none !important;
}

/* The layer is a real, shared canvas element rather than a body pseudo-layer,
   so route-specific overlays and checkout/profile pseudo-elements keep their
   own jobs without duplicating the page background. */
.gita-theme-bg-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 72% 42% at 100% 4%, var(--gita-theme-bg-warm), transparent 68%),
    radial-gradient(ellipse 58% 42% at 0% 34%, var(--gita-theme-bg-gold), transparent 74%),
    radial-gradient(ellipse 72% 44% at 72% 96%, var(--gita-theme-bg-cool), transparent 76%),
    var(--gita-theme-bg-base);
}

/* Main's CSS music atmosphere is the only page background. Do not let the
   former raster home backgrounds or route-local atmosphere layers duplicate
   or cover it. */
body.rdm-home-page .rdm-home-content::before,
body.rdm-home-page .rdm-home-content::after,
body.rdm-home-page::before,
body.rdm-home-page::after {
  background-image: none !important;
  background-color: transparent !important;
  opacity: 0 !important;
  filter: none !important;
  transform: none !important;
}

.gita-theme-bg-layer::before,
.gita-theme-bg-layer::after {
  content: "";
  position: absolute;
  inset: -12% -8%;
  pointer-events: none;
  transform: rotate(-4deg) scale(1.08);
}

.gita-theme-bg-layer::before {
  background:
    linear-gradient(148deg, transparent 0 26%, var(--gita-theme-bg-flow) 40%, transparent 58%),
    linear-gradient(166deg, transparent 0 52%, var(--gita-theme-bg-gold) 66%, transparent 82%),
    radial-gradient(ellipse 56% 18% at 78% 16%, var(--gita-theme-bg-warm), transparent 78%);
  opacity: .72;
  mix-blend-mode: screen;
}

.gita-theme-bg-layer::after {
  background:
    linear-gradient(126deg, transparent 0 27%, var(--gita-theme-bg-rose) 39%, transparent 57%),
    linear-gradient(158deg, transparent 0 48%, var(--gita-theme-bg-cool) 63%, transparent 78%),
    radial-gradient(ellipse 48% 22% at 22% 78%, var(--gita-theme-bg-cool), transparent 78%);
  opacity: .58;
  mix-blend-mode: screen;
  transform: rotate(3deg) scale(1.12);
}

html[data-theme="light"] .gita-theme-bg-layer::before,
html[data-theme="light"] .gita-theme-bg-layer::after {
  mix-blend-mode: multiply;
}

html[data-theme="light"] .gita-theme-bg-layer::before {
  opacity: .52;
}

html[data-theme="light"] .gita-theme-bg-layer::after {
  opacity: .38;
}

/* Home used to add a second page-sized atmosphere. Let the shared canvas own
   that responsibility so home and inner pages stay visually consistent. */
html[data-theme][data-theme] body.rdm-home-page .rdm-home-content::before,
html[data-theme][data-theme] body.rdm-home-page .rdm-home-content::after {
  background: none !important;
  opacity: 0 !important;
  filter: none !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .gita-theme-bg-layer::before,
  .gita-theme-bg-layer::after { filter: none; }
}