/* =============================================================
   MCPSpace · High-Fidelity Claymorphism stylesheet
   Companion to Tailwind utilities — defines the things that
   don't fit cleanly into the JIT (multi-layer shadows, blobs,
   keyframes, custom scrollbar, gradient text, etc.)
   ============================================================= */

/* ---- Tokens (mirrors the Tailwind theme extension) ---------- */
:root {
    --clay-canvas:      #F4F1FA;
    --clay-foreground:  #332F3A;
    --clay-muted:       #635F69;
    --clay-card-bg:     #FFFFFF;
    --clay-input-bg:    #EFEBF5;
    --clay-accent:      #7C3AED;
    --clay-accent-soft: #A78BFA;
    --clay-accent-alt:  #DB2777;
    --clay-blue:        #0EA5E9;
    --clay-emerald:     #10B981;
    --clay-amber:       #F59E0B;
    --clay-shadow:      #CDC6D9;
    --clay-shadow-soft: rgba(160, 150, 180, 0.2);
    --clay-shadow-deep: rgba(139, 92, 246, 0.3);
}

/* ---- Reset-y base ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

body {
    margin: 0;
    font-family: 'DM Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background-color: var(--clay-canvas);
    color: var(--clay-foreground);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

button { font: inherit; cursor: pointer; }

/* ---- The 4-layer shadow stacks ------------------------------ */
.shadow-clay-deep {
    box-shadow:
        30px 30px 60px var(--clay-shadow),
        -30px -30px 60px #ffffff,
        inset 10px 10px 20px rgba(139, 92, 246, 0.05),
        inset -10px -10px 20px rgba(255, 255, 255, 0.8);
}

.shadow-clay-card {
    box-shadow:
        16px 16px 32px var(--clay-shadow-soft),
        -10px -10px 24px rgba(255, 255, 255, 0.9),
        inset 6px 6px 12px rgba(139, 92, 246, 0.03),
        inset -6px -6px 12px rgba(255, 255, 255, 1);
}

.shadow-clay-card-hover {
    box-shadow:
        22px 22px 44px rgba(160, 150, 180, 0.28),
        -14px -14px 32px rgba(255, 255, 255, 1),
        inset 6px 6px 12px rgba(139, 92, 246, 0.04),
        inset -6px -6px 12px rgba(255, 255, 255, 1);
}

.shadow-clay-button {
    box-shadow:
        12px 12px 24px var(--clay-shadow-deep),
        -8px -8px 16px rgba(255, 255, 255, 0.4),
        inset 4px 4px 8px rgba(255, 255, 255, 0.4),
        inset -4px -4px 8px rgba(0, 0, 0, 0.1);
}

.shadow-clay-button-hover {
    box-shadow:
        18px 18px 32px rgba(139, 92, 246, 0.45),
        -10px -10px 20px rgba(255, 255, 255, 0.5),
        inset 4px 4px 8px rgba(255, 255, 255, 0.5),
        inset -4px -4px 8px rgba(0, 0, 0, 0.12);
}

.shadow-clay-pressed {
    box-shadow:
        inset 10px 10px 20px #d9d4e3,
        inset -10px -10px 20px #ffffff;
}

.shadow-clay-pill {
    box-shadow:
        8px 8px 16px rgba(160, 150, 180, 0.18),
        -6px -6px 14px rgba(255, 255, 255, 0.95),
        inset 3px 3px 6px rgba(255, 255, 255, 1),
        inset -3px -3px 6px rgba(139, 92, 246, 0.05);
}

/* ---- Gradient text (only for text-5xl+) -------------------- */
.clay-text-gradient {
    background: linear-gradient(135deg,
        var(--clay-foreground) 0%,
        var(--clay-foreground) 25%,
        var(--clay-accent) 60%,
        var(--clay-accent-alt) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---- Tame Tailwind's backdrop-blur on weaker devices --------
   Stacks of `backdrop-blur-xl` (24px) on dozens of cards is the
   #1 way to peg the GPU. 8px reads identically against our blobs
   while costing a fraction of the paint time. ---------------- */
.backdrop-blur-xl,
.backdrop-blur-2xl {
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
}
.backdrop-blur-md  {
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
}

/* ---- Floating background blobs ----------------------------- */
.clay-blobs {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -10;
}
.clay-blob {
    position: absolute;
    border-radius: 9999px;
    filter: blur(60px);
    opacity: 0.45;
    will-change: transform;
    /* Promote to its own GPU layer so the heavy filter doesn't repaint the page. */
    transform: translate3d(0, 0, 0);
}
.clay-blob.size-lg { width: 50vh; height: 50vh; }
.clay-blob.size-md { width: 38vh; height: 38vh; }
@media (max-width: 640px) {
    .clay-blob { filter: blur(40px); opacity: 0.35; }
    .clay-blob.size-lg, .clay-blob.size-md { width: 40vh; height: 40vh; }
}

@keyframes clay-float {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50%      { transform: translate3d(0, -22px, 0) rotate(2deg); }
}
@keyframes clay-float-delayed {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50%      { transform: translate3d(0, -16px, 0) rotate(-2deg); }
}
@keyframes clay-float-slow {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50%      { transform: translate3d(0, -32px, 0) rotate(5deg); }
}
@keyframes clay-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.03); }
}

.animate-clay-float          { animation: clay-float 8s ease-in-out infinite; }
.animate-clay-float-delayed  { animation: clay-float-delayed 10s ease-in-out infinite; animation-delay: 2s; }
.animate-clay-float-slow     { animation: clay-float-slow 12s ease-in-out infinite; animation-delay: 4s; }
.animate-clay-breathe        { animation: clay-breathe 6s ease-in-out infinite; }

/* ---- Squish on click --------------------------------------- */
.clay-squish:active {
    transform: scale(0.92);
    transition: transform 0.08s ease-out;
}

/* ---- Custom scrollbar -------------------------------------- */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #C4B5FD, #A78BFA);
    border-radius: 9999px;
    border: 3px solid var(--clay-canvas);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #A78BFA, #7C3AED); }

/* ---- Selection --------------------------------------------- */
::selection { background: rgba(124, 58, 237, 0.18); color: var(--clay-foreground); }

/* ---- Mobile bottom nav (hidden on md+) --------------------- */
.clay-bottom-nav {
    position: fixed;
    bottom: 14px;
    left: 14px;
    right: 14px;
    z-index: 50;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow:
        16px 16px 32px rgba(160, 150, 180, 0.25),
        -10px -10px 24px rgba(255, 255, 255, 0.9),
        inset 4px 4px 8px rgba(255, 255, 255, 1),
        inset -4px -4px 8px rgba(139, 92, 246, 0.04);
    padding: 6px;
}

/* ---- Code block -------------------------------------------- */
.clay-code {
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    background: #1F1B2E;
    color: #E9E4F4;
    border-radius: 20px;
    padding: 20px 22px;
    overflow-x: auto;
    box-shadow:
        inset 8px 8px 16px rgba(0, 0, 0, 0.25),
        inset -4px -4px 12px rgba(124, 58, 237, 0.08);
}
.clay-code .hl { color: #C4B5FD; }
.clay-code .str { color: #FBCFE8; }
.clay-code .num { color: #FCD34D; }

/* ---- Star rating ------------------------------------------- */
.clay-stars { display: inline-flex; gap: 2px; }
.clay-stars svg { width: 1em; height: 1em; }

/* ---- Reduced motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}