/**
 * Built-in Metricly animated dark wallpaper
 * Aurora orbs, sweeping beams, drifting grid, soft particles.
 */

.metricly-wallpaper {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background: #000;
    z-index: 0;
}

.metricly-wallpaper--fixed {
    position: fixed;
}

.metricly-wallpaper__base {
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(120% 80% at 50% -20%, rgba(56, 189, 248, 0.22), transparent 55%),
        radial-gradient(90% 60% at 100% 100%, rgba(250, 250, 250, 0.07), transparent 50%),
        radial-gradient(70% 50% at 0% 80%, rgba(113, 113, 122, 0.18), transparent 45%),
        #000;
    animation: metricly-wallpaper-base-pulse 12s ease-in-out infinite alternate;
}

.metricly-wallpaper__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    will-change: transform, opacity;
}

.metricly-wallpaper__orb--a {
    width: min(68vmax, 820px);
    height: min(68vmax, 820px);
    top: -22%;
    left: 18%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.62) 0%, transparent 68%);
    animation: metricly-wallpaper-drift-a 14s ease-in-out infinite;
}

.metricly-wallpaper__orb--b {
    width: min(56vmax, 640px);
    height: min(56vmax, 640px);
    right: -16%;
    bottom: -12%;
    background: radial-gradient(circle, rgba(161, 161, 170, 0.48) 0%, transparent 70%);
    animation: metricly-wallpaper-drift-b 17s ease-in-out infinite;
}

.metricly-wallpaper__orb--c {
    width: min(48vmax, 560px);
    height: min(48vmax, 560px);
    left: -14%;
    bottom: 12%;
    background: radial-gradient(circle, rgba(250, 250, 250, 0.2) 0%, transparent 72%);
    animation: metricly-wallpaper-drift-c 11s ease-in-out infinite;
}

.metricly-wallpaper__orb--d {
    width: min(36vmax, 420px);
    height: min(36vmax, 420px);
    top: 28%;
    right: 18%;
    background: radial-gradient(circle, rgba(125, 211, 252, 0.45) 0%, transparent 70%);
    animation: metricly-wallpaper-drift-d 9s ease-in-out infinite;
}

.metricly-wallpaper__beam {
    position: absolute;
    width: 140%;
    height: 28%;
    left: -20%;
    filter: blur(40px);
    mix-blend-mode: screen;
    opacity: 0.35;
    will-change: transform, opacity;
}

.metricly-wallpaper__beam--a {
    top: 8%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(56, 189, 248, 0.22) 42%,
        rgba(250, 250, 250, 0.12) 50%,
        rgba(56, 189, 248, 0.18) 58%,
        transparent 100%
    );
    animation: metricly-wallpaper-beam-a 10s ease-in-out infinite;
}

.metricly-wallpaper__beam--b {
    bottom: 6%;
    height: 22%;
    background: linear-gradient(
        80deg,
        transparent 0%,
        rgba(161, 161, 170, 0.18) 40%,
        rgba(255, 255, 255, 0.1) 52%,
        rgba(113, 113, 122, 0.16) 64%,
        transparent 100%
    );
    animation: metricly-wallpaper-beam-b 13s ease-in-out infinite;
}

.metricly-wallpaper__sheen {
    position: absolute;
    inset: -30%;
    background: linear-gradient(
        118deg,
        transparent 30%,
        rgba(255, 255, 255, 0.07) 48%,
        transparent 66%
    );
    animation: metricly-wallpaper-sheen 8s ease-in-out infinite;
    mix-blend-mode: screen;
}

.metricly-wallpaper__grid {
    position: absolute;
    inset: -20%;
    width: 140%;
    height: 140%;
    opacity: 0.34;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, #000 15%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, #000 15%, transparent 78%);
    animation: metricly-wallpaper-grid-pan 24s linear infinite;
}

.metricly-wallpaper__particles {
    position: absolute;
    inset: 0;
    opacity: 0.85;
    background-image:
        radial-gradient(1.5px 1.5px at 12% 22%, rgba(255, 255, 255, 0.55), transparent),
        radial-gradient(1.5px 1.5px at 28% 68%, rgba(125, 211, 252, 0.5), transparent),
        radial-gradient(2px 2px at 46% 18%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1.5px 1.5px at 62% 74%, rgba(255, 255, 255, 0.45), transparent),
        radial-gradient(2px 2px at 78% 34%, rgba(56, 189, 248, 0.55), transparent),
        radial-gradient(1.5px 1.5px at 88% 58%, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(1.5px 1.5px at 18% 48%, rgba(161, 161, 170, 0.5), transparent),
        radial-gradient(2px 2px at 54% 52%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1.5px 1.5px at 72% 12%, rgba(125, 211, 252, 0.45), transparent),
        radial-gradient(1.5px 1.5px at 36% 86%, rgba(255, 255, 255, 0.4), transparent);
    background-size: 100% 100%;
    animation: metricly-wallpaper-particles 16s ease-in-out infinite;
}

.metricly-wallpaper__vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 90% 70% at 50% 45%, transparent 28%, rgba(0, 0, 0, 0.58) 100%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.28) 0%, transparent 16%, transparent 78%, rgba(0, 0, 0, 0.5) 100%);
}

@keyframes metricly-wallpaper-base-pulse {
    0% { transform: scale(1) translate(0, 0); filter: brightness(0.95); }
    100% { transform: scale(1.08) translate(-2%, 1%); filter: brightness(1.12); }
}

@keyframes metricly-wallpaper-drift-a {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.55; }
    25% { transform: translate(14%, 10%) scale(1.18); opacity: 0.9; }
    50% { transform: translate(-6%, 16%) scale(0.92); opacity: 0.5; }
    75% { transform: translate(10%, -8%) scale(1.12); opacity: 0.8; }
}

@keyframes metricly-wallpaper-drift-b {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
    30% { transform: translate(-16%, -12%) scale(1.22); opacity: 0.85; }
    60% { transform: translate(10%, -18%) scale(0.9); opacity: 0.4; }
}

@keyframes metricly-wallpaper-drift-c {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.45; }
    40% { transform: translate(18%, -14%) scale(1.25); opacity: 0.75; }
    70% { transform: translate(-10%, 8%) scale(0.88); opacity: 0.35; }
}

@keyframes metricly-wallpaper-drift-d {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
    50% { transform: translate(-20%, 14%) scale(1.35); opacity: 0.85; }
}

@keyframes metricly-wallpaper-beam-a {
    0%, 100% { transform: translateX(-18%) rotate(-6deg); opacity: 0.2; }
    50% { transform: translateX(18%) rotate(4deg); opacity: 0.55; }
}

@keyframes metricly-wallpaper-beam-b {
    0%, 100% { transform: translateX(16%) rotate(5deg); opacity: 0.15; }
    50% { transform: translateX(-20%) rotate(-3deg); opacity: 0.45; }
}

@keyframes metricly-wallpaper-sheen {
    0%, 100% { transform: translateX(-18%) rotate(-2deg); opacity: 0.25; }
    50% { transform: translateX(18%) rotate(4deg); opacity: 0.8; }
}

@keyframes metricly-wallpaper-grid-pan {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-56px, -56px); }
}

@keyframes metricly-wallpaper-particles {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.55; }
    35% { transform: translateY(-3%) scale(1.04); opacity: 0.95; }
    70% { transform: translateY(2%) scale(0.98); opacity: 0.65; }
}

@media (prefers-reduced-motion: reduce) {
    .metricly-wallpaper__base,
    .metricly-wallpaper__orb,
    .metricly-wallpaper__beam,
    .metricly-wallpaper__sheen,
    .metricly-wallpaper__grid,
    .metricly-wallpaper__particles {
        animation: none !important;
    }
}

/*
 * Mobile / touch: animated wallpaper with large CSS blurs + blend modes
 * causes scroll stutter. Use a static, lighter shell instead.
 */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
    .metricly-wallpaper {
        contain: paint;
        transform: translateZ(0);
    }

    .metricly-wallpaper__orb--c,
    .metricly-wallpaper__orb--d,
    .metricly-wallpaper__beam,
    .metricly-wallpaper__sheen,
    .metricly-wallpaper__grid,
    .metricly-wallpaper__particles {
        display: none !important;
    }

    .metricly-wallpaper__base,
    .metricly-wallpaper__orb,
    .metricly-wallpaper__beam,
    .metricly-wallpaper__sheen,
    .metricly-wallpaper__grid,
    .metricly-wallpaper__particles {
        animation: none !important;
        will-change: auto !important;
        filter: none !important;
        mix-blend-mode: normal !important;
    }

    .metricly-wallpaper__orb--a,
    .metricly-wallpaper__orb--b {
        /* Soft edges via gradient only — no live blur filter */
        opacity: 0.7;
        transform: none;
    }

    .metricly-wallpaper__base {
        inset: 0;
        transform: none;
        filter: none;
    }
}

/* Page-level animated wallpaper sits under chrome */
body.has-animated-bg .metricly-wallpaper--fixed,
body.has-animated-bg > .metricly-wallpaper {
    z-index: 0;
}

.dashboard-wallpaper-overlay {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.3;
}

/* Hub / entity page layers */
.hub-bg-layer .metricly-wallpaper {
    z-index: 0;
}

.hub-bg-layer.has-animated-default .metricly-wallpaper {
    opacity: 1;
    transition: opacity 0.45s ease;
}

.hub-bg-layer.has-animated-default.is-showing-image .metricly-wallpaper {
    opacity: 0.22;
}

.hub-bg-layer .hub-bg-image {
    z-index: 1;
}

.hub-bg-layer .hub-bg-image.on-top {
    z-index: 2;
}

/* Admin preview thumbnail */
.metricly-wallpaper--preview {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 180px;
    border-radius: inherit;
}

.metricly-wallpaper--preview .metricly-wallpaper__orb {
    filter: blur(48px);
}

.metricly-wallpaper--preview .metricly-wallpaper__beam {
    filter: blur(24px);
}