/* ─── Ken Burns Background ─────────────────────────────────────────── */

/* Body-Hintergrund transparent machen damit das Bild durchkommt */
body.bg-home,
body.bg-auth,
body.bg-dashboard,
body.bg-jobs {
    background-color: transparent;
}

html {
    background-color: #03091e; /* Fallback hinter allem */
}

.page-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.page-bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    animation: kenburns 20s ease-in-out infinite;
    will-change: transform;
}

/* Gradient fallback (visible until/if no image loads) */
.page-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
}

/* Dunkles Overlay für Lesbarkeit */
.page-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(5, 12, 35, 0.55);
    z-index: 1;
}

/* Stärkeres Overlay auf Seiten mit viel Content */
body.bg-jobs .page-bg::after,
body.bg-dashboard .page-bg::after {
    background: rgba(5, 12, 35, 0.72);
}

/* ─── Glassmorphism Content-Bereiche ──────────────────────────────── */

/* Jobs: sections bekommen echten Glaseffekt */
body.bg-jobs .jobs-section {
    background: rgba(10, 20, 50, 0.65) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Dashboard: sidebar + cards */
body.bg-dashboard #dashboard_sidebar {
    background: rgba(10, 20, 50, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body.bg-dashboard .app-card {
    background: rgba(10, 20, 50, 0.6) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Auth: Formular-Box */
body.bg-auth #main_form {
    background: rgba(8, 15, 40, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
}

/* ─── Ken Burns keyframes ──────────────────────────────────────────── */

@keyframes kenburns {
    0%   { transform: scale(1.00); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1.00); }
}

/* ─── Per-page gradient fallbacks ─────────────────────────────────── */

/* Home — deep space blue to midnight */
body.bg-home .page-bg::before {
    background:
        radial-gradient(ellipse 80% 60% at 30% 40%, #1a3a6e 0%, transparent 60%),
        radial-gradient(ellipse 60% 80% at 75% 70%, #0d2050 0%, transparent 55%),
        linear-gradient(160deg, #06102a 0%, #0a1b3d 50%, #03091e 100%);
}

/* Auth pages — dark indigo with gold glow */
body.bg-auth .page-bg::before {
    background:
        radial-gradient(ellipse 70% 50% at 60% 30%, #1e1a4a 0%, transparent 60%),
        radial-gradient(ellipse 50% 70% at 25% 75%, #2a1a0a 0%, transparent 50%),
        linear-gradient(135deg, #07061f 0%, #0e1435 55%, #1a0e2e 100%);
}

/* Dashboard — warm amber meets cool tech */
body.bg-dashboard .page-bg::before {
    background:
        radial-gradient(ellipse 80% 50% at 20% 60%, #1a2a4a 0%, transparent 55%),
        radial-gradient(ellipse 60% 60% at 80% 20%, #2a1e08 0%, transparent 50%),
        linear-gradient(150deg, #080e22 0%, #0f1d3a 60%, #1a1205 100%);
}

/* Jobs — dusk purple/orange corporate */
body.bg-jobs .page-bg::before {
    background:
        radial-gradient(ellipse 70% 60% at 50% 20%, #1a0e2e 0%, transparent 60%),
        radial-gradient(ellipse 80% 50% at 10% 80%, #0d1a35 0%, transparent 55%),
        linear-gradient(160deg, #0a051e 0%, #100a28 50%, #05101e 100%);
}