/*
 * Kreiswolke Maintenance Agent Toolkit — Coming Soon splash styles.
 *
 * Enqueued via wp_enqueue_style on the standalone splash page (rendered on
 * template_redirect). All three background modes (blobs / image / gradient)
 * are included here; only the active mode's elements exist per render, so the
 * other selectors are inert. Per-render colors are injected as inline CSS
 * custom properties (--base / --c1 …) on the elements at output time, not here.
 */

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
body { min-height: 100vh; color: #ffffff; overflow: hidden; }

.wpma-cs-bg {
    position: fixed;
    inset: 0;
    background: var(--base, #08101C);
    overflow: hidden;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wpma-cs-wrap {
    position: relative;
    z-index: 2;
    max-width: 600px;
    padding: 2rem;
    text-align: center;
}
.wpma-cs-logo { max-width: 200px; max-height: 100px; margin: 0 auto 2rem; display: block; }
.wpma-cs-headline { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; line-height: 1.2; text-shadow: 0 2px 12px rgba(0,0,0,0.35); }
.wpma-cs-body { font-size: 1.125rem; line-height: 1.6; opacity: 0.92; }
.wpma-cs-body a { color: inherit; text-decoration: underline; }
.wpma-cs-body p { margin-bottom: 0.75rem; }
.wpma-cs-body p:last-child { margin-bottom: 0; }

/* Mesh-gradient (blobs) mode: 8 soft radial blobs cycle through 3 colors via
 * :nth-child(3n+1/2/3). A single 30px container blur smooths the whole
 * mesh into a continuous color field (cheaper + cleaner than blurring
 * each blob individually). color-mix() gives each blob a soft falloff
 * from saturated center to transparent edge. Two simple keyframes
 * (meshA / meshB) drift each blob ~6-8vw/vh; cycle times are all
 * irrational-feeling so the composite never repeats visibly. */
.wpma-cs-bg__blur {
    position: absolute;
    inset: 0;
    filter: blur(30px);
}
.wpma-cs-bg__blob {
    position: absolute;
    top: var(--top);
    left: var(--left);
    width: var(--size);
    height: var(--size);
    opacity: 0.9;
    pointer-events: none;
    will-change: transform;
    animation: var(--kf) var(--dur) ease-in-out infinite;
}
.wpma-cs-bg__blob:nth-child(3n+1) {
    background: radial-gradient(circle, var(--c1) 0%, color-mix(in srgb, var(--c1) 80%, transparent) 30%, transparent 70%);
}
.wpma-cs-bg__blob:nth-child(3n+2) {
    background: radial-gradient(circle, var(--c2) 0%, color-mix(in srgb, var(--c2) 80%, transparent) 30%, transparent 70%);
}
.wpma-cs-bg__blob:nth-child(3n) {
    background: radial-gradient(circle, var(--c3) 0%, color-mix(in srgb, var(--c3) 80%, transparent) 30%, transparent 70%);
}
@keyframes wpma-cs-meshA {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(8vw, 6vh); }
}
@keyframes wpma-cs-meshB {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(-6vw, -8vh); }
}
@media (prefers-reduced-motion: reduce) {
    .wpma-cs-bg__blob { animation: none; }
}

/* Image mode */
.wpma-cs-bg__image { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; }
.wpma-cs-bg__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.20); z-index: 1; }

/* Gradient mode */
.wpma-cs-bg__gradient { position: absolute; inset: 0; z-index: 0; }

@media (max-width: 600px) {
    .wpma-cs-headline { font-size: 1.75rem; }
    .wpma-cs-body { font-size: 1rem; }
    .wpma-cs-logo { max-width: 150px; max-height: 75px; margin-bottom: 1.5rem; }
    .wpma-cs-wrap { padding: 1.5rem; }
}