/* =========================================================================
   Cosmic Modern — polish layer on top of kundli-theme.css
   Adds: animated background canvas placement, glassmorphism surfaces,
   refined gradients/buttons, and gentle micro-interactions.
   Loaded AFTER kundli-theme.css and app.css so it can refine them.
   ========================================================================= */

:root {
    --glass-bg: rgba(255, 255, 255, 0.78);
    --glass-border: rgba(218, 165, 32, 0.35);
    --glass-blur: 12px;
    --radius-lg: 18px;
    --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Animated background canvas: fixed, behind all content --- */
.cosmic-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    display: block;
}

/* Let the animated layer show through: keep the cream base but lighten the
   heavy static radial gradients that previously sat on the body. */
body {
    background-color: var(--background-primary);
    background-image:
        radial-gradient(circle at 18% 30%, rgba(218, 165, 32, 0.06) 0%, transparent 55%),
        radial-gradient(circle at 85% 75%, rgba(106, 13, 173, 0.05) 0%, transparent 55%);
    background-attachment: fixed;
}

/* --- Glassmorphism cards --- */
.card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 30px rgba(139, 69, 19, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform 0.35s var(--ease-smooth), box-shadow 0.35s var(--ease-smooth);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(139, 69, 19, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.card-header {
    background: linear-gradient(135deg, rgba(218, 165, 32, 0.16), rgba(255, 107, 53, 0.10));
    border-bottom: 1px solid var(--glass-border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    font-family: var(--font-primary);
    letter-spacing: 0.2px;
}

/* --- Header: keep the cosmic gradient, add a slow living shimmer --- */
.app-header {
    background: linear-gradient(120deg, #191970, #6A0DAD, #FF6B35, #191970);
    background-size: 300% 300%;
    animation: cosmicShift 24s ease infinite;
}

@keyframes cosmicShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- Navigation polish --- */
.navbar {
    background: rgba(255, 248, 220, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--glass-border);
}

.nav-link {
    transition: all 0.3s var(--ease-smooth);
}

.nav-link:hover,
.nav-link.active {
    box-shadow: 0 6px 16px rgba(139, 69, 19, 0.25);
}

/* --- Buttons: gradient + glow on the primary action --- */
.btn-primary {
    background: var(--gradient-sunset);
    border: none;
    box-shadow: 0 4px 14px rgba(255, 107, 53, 0.28);
    transition: transform 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth), filter 0.3s var(--ease-smooth);
}

.btn-primary:hover,
.btn-primary:focus {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 8px 22px rgba(255, 107, 53, 0.42);
}

/* --- Content entrance micro-interaction --- */
.content {
    animation: fadeUp 0.5s var(--ease-smooth) both;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Footer: glassy --- */
footer {
    background: rgba(245, 245, 220, 0.7) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* --- Dark "cosmic" theme support (MAUI toggle uses [data-theme="cosmic"]) --- */
[data-theme="cosmic"] {
    --glass-bg: rgba(20, 20, 45, 0.55);
    --glass-border: rgba(218, 165, 32, 0.30);
}

[data-theme="cosmic"] body {
    background-color: #0c0c1a;
}

[data-theme="cosmic"] .navbar {
    background: rgba(15, 15, 35, 0.6);
}

[data-theme="cosmic"] footer {
    background: rgba(12, 12, 26, 0.65) !important;
}

/* --- Accessibility: honour reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
    .app-header { animation: none; }
    .content { animation: none; }
    .card,
    .card:hover,
    .btn-primary:hover,
    .nav-link:hover { transition: none; transform: none; }
}

/* --- Mobile: lighten blur (cheaper) and reduce hover transforms --- */
@media (max-width: 768px) {
    .card { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}