/* ============================================================ Page background layer + animated effects. .card-bg-layer is a fixed full-screen layer that sits ABOVE the body's base background (solid color / gradient / image) but BELOW the card content. Overlay/pattern are injected per-card as inline CSS; animated effects are opt-in via data-bg-effect. Visuals apply ALWAYS; only motion is dropped for reduced-motion. WHY z-index:0 (not -1): the paints an OPAQUE base background (theme color, plus the per-card gradient/image emitted on `body`). A z-index:-1 descendant is painted BEHIND that body background, so the overlay/pattern/animated effect were completely invisible. The layer must paint above the body background, so it uses z-index:0 and the page content is lifted to z-index:1 via `.card-content-root`. ============================================================ */ .card-bg-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-repeat: repeat; } /* Page content sits above the background layer. _CardLayout wraps @RenderBody() in this element so cards/buttons render on top of the overlay/pattern/animated effect (which live on .card-bg-layer). */ .card-content-root { position: relative; z-index: 1; } /* ── Aurora — slow shifting color clouds ─────────────────────── */ .card-bg-layer[data-bg-effect="aurora"] { background: radial-gradient(40% 50% at 20% 30%, rgba(109, 93, 252, 0.45), transparent 60%), radial-gradient(45% 55% at 80% 25%, rgba(200, 80, 192, 0.40), transparent 60%), radial-gradient(50% 60% at 50% 85%, rgba(67, 233, 123, 0.30), transparent 60%); background-size: 200% 200%; animation: bg-aurora 18s ease-in-out infinite; } @keyframes bg-aurora { 0%, 100% { background-position: 0% 0%, 100% 0%, 50% 100%; } 50% { background-position: 30% 40%, 70% 30%, 40% 70%; } } /* ── Gradient motion — full-screen moving gradient ───────────── */ .card-bg-layer[data-bg-effect="gradient"] { background: linear-gradient(125deg, rgba(99,102,241,.35), rgba(236,72,153,.30), rgba(59,130,246,.35)); background-size: 300% 300%; animation: bg-gradient 16s ease infinite; } @keyframes bg-gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ── Tiny stars — twinkling dot field ────────────────────────── */ .card-bg-layer[data-bg-effect="stars"] { background-image: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.9), transparent), radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.8), transparent), radial-gradient(1.5px 1.5px at 40% 80%, rgba(255,255,255,.85), transparent), radial-gradient(1px 1px at 85% 20%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 55% 45%, rgba(255,255,255,.75), transparent); background-size: 220px 220px; animation: bg-twinkle 4s ease-in-out infinite; } @keyframes bg-twinkle { 0%,100% { opacity: .55; } 50% { opacity: 1; } } /* ── Glow — soft drifting brand-colored light ────────────────── */ .card-bg-layer[data-bg-effect="glow"] { background: radial-gradient(35% 40% at 50% 40%, rgba(var(--t-primary-rgb, 91,19,236), 0.30), transparent 65%); animation: bg-glow 9s ease-in-out infinite; } @keyframes bg-glow { 0%, 100% { transform: translate(-6%, -4%) scale(1); opacity: .8; } 50% { transform: translate(6%, 4%) scale(1.15); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .card-bg-layer[data-bg-effect] { animation: none !important; } }