/*
 * xircuit-depth.css
 * Glassmorphism, depth shadows, hero gradients, and accent tile classes.
 * Extracted from Figma AI Fitness Health App UI Kit (CQxGMARZYba6tbvp7O5Giw).
 *
 * Usage
 * -----
 * .x-glass           — frosted-glass card surface
 * .x-elevated        — multi-layer floating shadow
 * .x-tilt            — perspective tilt on hover (stat tiles)
 * .x-hero-gradient   — full-bleed aubergine radial + linear hero
 * .x-tile-{name}     — accent tile backgrounds (yellow / coral / mint / orange / lavender)
 * .x-soft-bg         — muted lavender section background
 * .x-footer          — subtle divider above the site footer
 */

/* ── Glassmorphism — frosted card on top of any background ─────────────────── */
.x-glass {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 20px;
}

.mud-theme-dark .x-glass {
    background: rgba(26, 18, 51, 0.55);
    border-color: rgba(167, 139, 250, 0.18);
}

/* ── Multi-layer drop shadow for "floating" cards ───────────────────────────── */
.x-elevated {
    box-shadow:
        0 1px 3px  rgba(15,  9, 38, 0.06),
        0 8px 24px -8px  rgba(42, 31, 69, 0.16),
        0 24px 48px -16px rgba(42, 31, 69, 0.12);
}

.mud-theme-dark .x-elevated {
    box-shadow:
        0 1px 3px  rgba(0, 0, 0, 0.40),
        0 8px 24px -8px  rgba(0, 0, 0, 0.50),
        0 24px 48px -16px rgba(0, 0, 0, 0.60);
}

/* ── Tilt-on-hover for stat tiles ───────────────────────────────────────────── */
.x-tilt {
    transition:
        transform  200ms cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
    transform-style: preserve-3d;
    will-change: transform;
}

.x-tilt:hover {
    transform: perspective(800px) translateY(-2px) rotateX(2deg);
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .x-tilt,
    .x-tilt:hover {
        transition: none;
        transform: none;
    }
}

/* ── Hero gradient backgrounds (aubergine → deep purple) ────────────────────── */
.x-hero-gradient {
    background:
        radial-gradient(ellipse at top left,  rgba(167, 139, 250, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(251, 113, 133, 0.14) 0%, transparent 55%),
        linear-gradient(135deg, #2A1F45 0%, #1A1233 100%);
    color: #F5F1E8;
    border-radius: 20px;
}

/* ── Accent stat-tile backgrounds (Figma-inspired) ─────────────────────────── */
.x-tile-yellow {
    background: linear-gradient(135deg, #FDE68A 0%, #FCD34D 100%);
    color: #2A1F45;
}

.x-tile-coral {
    background: linear-gradient(135deg, #FCA5A5 0%, #F87171 100%);
    color: #1A1233;
}

.x-tile-mint {
    background: linear-gradient(135deg, #A7F3D0 0%, #6EE7B7 100%);
    color: #1A1233;
}

.x-tile-orange {
    background: linear-gradient(135deg, #FED7AA 0%, #FB923C 100%);
    color: #1A1233;
}

.x-tile-lavender {
    background: linear-gradient(135deg, #DDD6FE 0%, #A78BFA 100%);
    color: #1A1233;
}

/* Text-variant MudButtons and MudLinks inside a light-coloured tile (yellow /
   coral / mint / orange / lavender) must inherit the tile's dark text colour
   instead of MudBlazor's default primary/white. Without this override, an
   "Open" / "View" Text-variant button renders with theme-default colour
   (which can be a low-contrast greyish-white on coral / yellow / mint
   tiles, especially in light mode) and becomes nearly unreadable. */
[class*="x-tile-"] .mud-button-text,
[class*="x-tile-"] .mud-button-text .mud-button-label,
[class*="x-tile-"] .mud-button-text .mud-icon-root,
[class*="x-tile-"] a.mud-link {
    color: inherit;
}

/* ── Soft section background for muted areas ────────────────────────────────── */
.x-soft-bg {
    background: rgba(167, 139, 250, 0.06);
    border-radius: 24px;
}

.mud-theme-dark .x-soft-bg {
    background: rgba(255, 255, 255, 0.04);
}

/* ── Site footer divider ────────────────────────────────────────────────────── */
.x-footer {
    border-top: 1px solid rgba(167, 139, 250, 0.15);
}

.mud-theme-dark .x-footer {
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* ── Logo: invert on dark aubergine appbar ──────────────────────────────────── */
/* The Xircuit SVG uses multi-colour brand fills that are unreadable on a dark
   aubergine surface. In dark mode we render the logo as pure white via inversion. */
.mud-theme-dark .brand-logo {
    filter: brightness(0) invert(1);
}