/* Interactive background — aurora nebula (home + dashboard) */
.eis-interactive-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(ellipse 120% 80% at 50% -10%, color-mix(in srgb, var(--eis-bg-primary, #451745) 12%, transparent) 0%, transparent 55%),
        radial-gradient(ellipse 90% 70% at 100% 100%, color-mix(in srgb, var(--eis-bg-accent, #ffc50d) 8%, transparent) 0%, transparent 50%),
        linear-gradient(165deg, #f8f6fc 0%, #f0ebf5 42%, #faf8f2 100%);
}

.eis-interactive-bg__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 2;
}

.eis-interactive-bg__aurora {
    position: absolute;
    inset: -25%;
    z-index: 0;
    filter: blur(60px);
    opacity: 0.85;
    animation: eisAuroraShift 28s ease-in-out infinite alternate;
}

.eis-interactive-bg__orb {
    position: absolute;
    border-radius: 50%;
    mix-blend-mode: multiply;
    animation: eisOrbFloat 18s ease-in-out infinite;
}

.eis-interactive-bg__orb--1 {
    width: min(52vw, 520px);
    height: min(52vw, 520px);
    top: 8%;
    left: -8%;
    background: radial-gradient(circle, color-mix(in srgb, var(--eis-bg-primary, #451745) 55%, transparent) 0%, transparent 70%);
    animation-duration: 22s;
}

.eis-interactive-bg__orb--2 {
    width: min(44vw, 440px);
    height: min(44vw, 440px);
    bottom: 5%;
    right: -6%;
    background: radial-gradient(circle, color-mix(in srgb, var(--eis-bg-accent, #ffc50d) 50%, transparent) 0%, transparent 72%);
    animation-duration: 26s;
    animation-delay: -6s;
}

.eis-interactive-bg__orb--3 {
    width: min(36vw, 360px);
    height: min(36vw, 360px);
    top: 42%;
    left: 38%;
    background: radial-gradient(circle, color-mix(in srgb, var(--eis-bg-secondary, #612861) 45%, transparent) 0%, transparent 70%);
    animation-duration: 20s;
    animation-delay: -12s;
}

.eis-interactive-bg__mesh {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.35;
    background:
        radial-gradient(ellipse 50% 40% at 15% 25%, color-mix(in srgb, var(--eis-bg-accent, #ffc50d) 14%, transparent) 0%, transparent 58%),
        radial-gradient(ellipse 45% 38% at 85% 70%, color-mix(in srgb, var(--eis-bg-primary, #451745) 12%, transparent) 0%, transparent 55%);
    animation: eisBgMeshDrift 32s ease-in-out infinite alternate;
}

.eis-interactive-bg__grain {
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}

@keyframes eisBgMeshDrift {
    0%   { transform: translate(0, 0) scale(1); opacity: 0.32; }
    100% { transform: translate(2%, 1.2%) scale(1.05); opacity: 0.42; }
}

@keyframes eisAuroraShift {
    0%   { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(3%, 2%) rotate(2deg); }
}

@keyframes eisOrbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(2.5%, -2%) scale(1.04); }
    66%      { transform: translate(-2%, 2.5%) scale(0.98); }
}

/* Home landing */
.home-page-bg.eis-interactive-bg {
    position: absolute;
    background: transparent;
}

.home-page-bg .eis-interactive-bg__canvas {
    opacity: 1;
}

.home-page {
    --eis-bg-primary: var(--hp-primary, #451745);
    --eis-bg-accent: var(--hp-accent-glow, #ffc50d);
    --eis-bg-secondary: var(--hp-secondary, #612861);
}

.home-page > *:not(.home-page-bg) {
    position: relative;
    z-index: 1;
}

/* Dashboard layout */
body.eis-dashboard-bg {
    background: #f4f2f8;
}

body.eis-dashboard-bg #layout-wrapper {
    position: relative;
    z-index: 1;
    min-height: 100vh;
}

body.eis-dashboard-bg .eis-interactive-bg {
    --eis-bg-primary: var(--sys-primary, #451745);
    --eis-bg-accent: var(--sys-accent, #ffc50d);
    --eis-bg-secondary: var(--sys-secondary, #612861);
}

body.eis-dashboard-bg .eis-interactive-bg__canvas {
    opacity: 0.88;
}

body.eis-dashboard-bg .eis-interactive-bg__aurora {
    opacity: 0.55;
    filter: blur(72px);
}

body.eis-dashboard-bg .main-content {
    background: transparent;
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.eis-dashboard-bg .page-content {
    background: transparent;
    flex: 1 0 auto;
    padding-bottom: calc(1.25rem / 2) !important;
}

body.eis-dashboard-bg .footer {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto !important;
    margin-top: auto;
    flex-shrink: 0;
}

html[data-theme-mode="dark"] body.eis-dashboard-bg {
    background: #12141c;
}

html[data-theme-mode="dark"] .eis-interactive-bg {
    background:
        radial-gradient(ellipse 100% 70% at 50% 0%, color-mix(in srgb, var(--eis-bg-primary, #451745) 22%, transparent) 0%, transparent 55%),
        linear-gradient(165deg, #0f1118 0%, #151821 50%, #12141c 100%);
}

html[data-theme-mode="dark"] .eis-interactive-bg__orb {
    mix-blend-mode: screen;
    opacity: 0.7;
}

html[data-theme-mode="dark"] body.eis-dashboard-bg .eis-interactive-bg__canvas {
    opacity: 0.72;
}

html[data-theme-mode="dark"] body.eis-dashboard-bg .eis-interactive-bg__mesh {
    opacity: 0.28;
}

html[data-theme-mode="dark"] .eis-interactive-bg__grain {
    opacity: 0.05;
}

@media (prefers-reduced-motion: reduce) {
    .eis-interactive-bg__mesh,
    .eis-interactive-bg__aurora,
    .eis-interactive-bg__orb {
        animation: none;
    }
}

@media (max-width: 767.98px) {
    body.eis-dashboard-bg .eis-interactive-bg__canvas {
        opacity: 0.65;
    }

    .eis-interactive-bg__aurora {
        filter: blur(48px);
        opacity: 0.45;
    }
}