/* =====================================================================
   RP physics backdrop – shared across public pages.
   See docs/rp-physics-theme.md.

   Usage (Razor):   <partial name="_RpCosmos" model="light" />
                    <partial name="_RpCosmos" model="dark" />
                    <partial name="_RpCosmos" model="dark local" />   (inside a .rp-cosmos-host section)

   --light : brand-coloured elements for white page backgrounds
   --dark  : white elements for dark (indigo) backgrounds
   --local : absolute inside a section instead of fixed over the page
   ===================================================================== */

.rp-cosmos {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    --rpc-ring: rgba(255,255,255,.10);
    --rpc-ring-2: rgba(255,255,255,.07);
    --rpc-ring-3: rgba(255,255,255,.05);
    --rpc-dot: #ffffff;
    --rpc-dot-glow: rgba(255,255,255,.45);
    --rpc-formula: rgba(255,255,255,.10);
    --rpc-grid: rgba(255,255,255,.16);
    --rpc-glow-1: rgba(132,118,255,.38);
    --rpc-glow-2: rgba(122,49,144,.28);
    background:
        radial-gradient(720px 520px at 12% 8%, var(--rpc-glow-1), transparent 65%),
        radial-gradient(640px 480px at 88% 92%, var(--rpc-glow-2), transparent 65%),
        radial-gradient(var(--rpc-grid) 1px, transparent 1.6px) 0 0 / 30px 30px;
}

/* Brand-coloured variant for white pages */
.rp-cosmos--light {
    --rpc-ring: rgba(56,60,148,.14);
    --rpc-ring-2: rgba(56,60,148,.10);
    --rpc-ring-3: rgba(56,60,148,.07);
    --rpc-dot: #383c94;
    --rpc-dot-glow: rgba(56,60,148,.35);
    --rpc-formula: rgba(56,60,148,.09);
    --rpc-grid: rgba(56,60,148,.10);
    --rpc-glow-1: rgba(56,60,148,.10);
    --rpc-glow-2: rgba(122,49,144,.08);
}

/* Section-scoped variant (absolute inside a .rp-cosmos-host) */
.rp-cosmos--local {
    position: absolute;
    z-index: 0;
    background:
        radial-gradient(520px 320px at 85% 20%, var(--rpc-glow-1), transparent 65%),
        radial-gradient(var(--rpc-grid) 1px, transparent 1.6px) 0 0 / 26px 26px;
}

.rp-cosmos-host {
    position: relative;
    overflow: hidden;
}

    .rp-cosmos-host > :not(.rp-cosmos) {
        position: relative;
        z-index: 1;
    }

/* Orbit rings */
.rp-cosmos__ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid var(--rpc-ring);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: rp-orbit 28s linear infinite; /* ring rotation = speed of the glowing dot */
}

    .rp-cosmos__ring::before {
        content: "";
        position: absolute;
        top: -5px;
        left: 50%;
        width: 9px;
        height: 9px;
        margin-left: -4.5px;
        border-radius: 50%;
        background: var(--rpc-dot);
        opacity: .55;
        box-shadow: 0 0 14px 3px var(--rpc-dot-glow);
    }

.rp-cosmos__ring--1 {
    width: 68vmax;
    height: 68vmax;
}

.rp-cosmos__ring--2 {
    width: 94vmax;
    height: 94vmax;
    animation-duration: 42s;
    animation-direction: reverse;
    border-color: var(--rpc-ring-2);
}

.rp-cosmos__ring--3 {
    width: 122vmax;
    height: 122vmax;
    animation-duration: 60s;
    border-color: var(--rpc-ring-3);
}

.rp-cosmos--local .rp-cosmos__ring {
    left: 86%;
}

.rp-cosmos--local .rp-cosmos__ring--1 {
    width: 520px;
    height: 520px;
}

.rp-cosmos--local .rp-cosmos__ring--2 {
    width: 780px;
    height: 780px;
}

.rp-cosmos--local .rp-cosmos__ring--3 {
    width: 1040px;
    height: 1040px;
}

/* Floating formulas */
.rp-cosmos__formula {
    position: absolute;
    font-family: "Cambria", "Georgia", "Times New Roman", serif;
    font-style: italic;
    font-size: 34px;
    color: var(--rpc-formula);
    white-space: nowrap;
    animation: rp-float 9s ease-in-out infinite;
}

.rp-cosmos__formula--1 {
    top: 10%;
    left: 6%;
    font-size: 44px;
}

.rp-cosmos__formula--2 {
    top: 22%;
    right: 7%;
    animation-delay: -3s;
}

.rp-cosmos__formula--3 {
    bottom: 18%;
    left: 8%;
    animation-delay: -5s;
}

.rp-cosmos__formula--4 {
    bottom: 10%;
    right: 6%;
    font-size: 30px;
    animation-delay: -7s;
}

.rp-cosmos--local .rp-cosmos__formula {
    font-size: 26px;
}

.rp-cosmos--local .rp-cosmos__formula--1 {
    top: 14%;
    left: 4%;
    font-size: 34px;
}

.rp-cosmos--local .rp-cosmos__formula--2 {
    top: auto;
    bottom: 12%;
    right: 4%;
}

.rp-cosmos--local .rp-cosmos__formula--3,
.rp-cosmos--local .rp-cosmos__formula--4 {
    display: none;
}

@keyframes rp-orbit {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes rp-float {
    0%, 100% {
        transform: translateY(0) rotate(-4deg);
    }

    50% {
        transform: translateY(-14px) rotate(-2deg);
    }
}

/* White-canvas pages: let the fixed backdrop show through the page wrapper.
   Put class "rp-canvas-light" on <html>. */
html.rp-canvas-light {
    background: #fff;
}

    html.rp-canvas-light body,
    html.rp-canvas-light .body,
    html.rp-canvas-light .main {
        background: transparent !important;
    }

@media (max-width: 767px) {
    .rp-cosmos__formula {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rp-cosmos__ring,
    .rp-cosmos__formula {
        animation: none;
    }
}