/* ============================================================
   STYLES.CSS — Portfolio + Admin
   ============================================================ */

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: background-color 0.4s ease, color 0.4s ease;
    -webkit-font-smoothing: antialiased;
}
.font-mono { font-family: 'JetBrains Mono', monospace; }

/* ── M3 Color Tokens ──────────────────────────────────────── */
:root {
    --m3-primary: 103, 80, 164;
    --m3-on-primary: 255, 255, 255;
    --m3-surface: 254, 247, 255;
    --m3-on-surface: 29, 27, 32;
    --m3-secondary: 98, 91, 113;
    --m3-surface-container: 247, 242, 250;
    --m3-surface-container-high: 236, 230, 240;
    --m3-outline: 121, 116, 126;
    --m3-accent: 147, 125, 209;
}
.dark {
    --m3-primary: 208, 188, 255;
    --m3-on-primary: 56, 30, 114;
    --m3-surface: 8, 7, 10;
    --m3-on-surface: 230, 224, 233;
    --m3-secondary: 204, 194, 220;
    --m3-surface-container: 18, 16, 22;
    --m3-surface-container-high: 24, 22, 30;
    --m3-outline: 45, 43, 50;
    --m3-accent: 187, 164, 255;
}

/* ── Cards ────────────────────────────────────────────────── */
.card-modern {
    background: rgb(var(--m3-surface-container));
    border: 1px solid rgba(var(--m3-on-surface), 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-modern:hover {
    border-color: rgba(var(--m3-primary), 0.2);
    background: rgb(var(--m3-surface-container-high));
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 20px 40px -15px rgba(0,0,0,0.2), 0 0 0 1px rgba(var(--m3-primary), 0.08);
}

/* ── Project Card specific hover ─────────────────────────── */
.project-card {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, border-color 0.3s ease;
}
.project-card:hover {
    transform: translateY(-8px) scale(1.015);
    box-shadow:
        0 24px 48px -12px rgba(var(--m3-primary), 0.15),
        0 0 0 1px rgba(var(--m3-primary), 0.12);
    border-color: rgba(var(--m3-primary), 0.25) !important;
}
.project-card:active {
    transform: translateY(-2px) scale(1.005);
}

/* ── Project Modal ────────────────────────────────────────── */
#project-modal {
    transition: opacity 0.25s ease;
}
#project-modal:not(.hidden) { opacity: 1; }
#project-modal.hidden { opacity: 0; pointer-events: none; }

.modal-sheet {
    transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.25s ease;
    transform: translateY(40px);
    opacity: 0;
}
#project-modal.modal-visible .modal-sheet {
    transform: translateY(0);
    opacity: 1;
}

/* ── Skeleton / Loader ────────────────────────────────────── */
#page-skeleton {
    transition: opacity 0.4s ease;
}

/* ── Filter Pills ─────────────────────────────────────────── */
.filter-btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.filter-btn:hover { transform: translateY(-1px); }
.filter-btn:active { transform: translateY(0); }

/* ── Fade-in on scroll ────────────────────────────────────── */
.fade-in-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: rgb(var(--m3-surface)); }
::-webkit-scrollbar-thumb {
    background: rgb(var(--m3-outline));
    border-radius: 8px;
    border: 2px solid rgb(var(--m3-surface));
}
::-webkit-scrollbar-thumb:hover { background: rgb(var(--m3-primary)); }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* ── Material Symbols ─────────────────────────────────────── */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-family: 'Material Symbols Outlined';
    font-size: 24px;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

/* ── Animations ───────────────────────────────────────────── */
@keyframes bounce {
    0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1); }
    50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1); }
}
.animate-bounce { animation: bounce 1s infinite; }

@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }

/* ── Perspective ──────────────────────────────────────────── */
.perspective-1000 { perspective: 1000px; }

/* ── Admin Input Focus Ring ───────────────────────────────── */
.admin-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgb(var(--m3-primary));
}

/* ── Glass ────────────────────────────────────────────────── */
.glass {
    background: rgba(var(--m3-surface-container), 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(var(--m3-on-surface), 0.08);
}