@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Lenis Recommended Root Styles */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

@layer base {
    :root {
        --background: 0 0% 100%;
        --foreground: 0 0% 3.9%;
        --card: 0 0% 100%;
        --card-foreground: 0 0% 3.9%;
        --popover: 0 0% 100%;
        --popover-foreground: 0 0% 3.9%;
        --primary: 0 72.2% 50.6%;
        --primary-foreground: 0 85.7% 97.3%;
        --secondary: 0 0% 96.1%;
        --secondary-foreground: 0 0% 9%;
        --muted: 0 0% 96.1%;
        --muted-foreground: 0 0% 45.1%;
        --accent: 0 0% 96.1%;
        --accent-foreground: 0 0% 9%;
        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 0 0% 98%;
        --border: 0 0% 89.8%;
        --input: 0 0% 89.8%;
        --ring: 0 72.2% 50.6%;
        --radius: 0.5rem;
        --chart-1: 12 76% 61%;
        --chart-2: 173 58% 39%;
        --chart-3: 197 37% 24%;
        --chart-4: 43 74% 66%;
        --chart-5: 27 87% 67%;
    }

    .dark {
        --background: 0 0% 3.9%;
        --foreground: 0 0% 98%;
        --card: 0 0% 3.9%;
        --card-foreground: 0 0% 98%;
        --popover: 0 0% 3.9%;
        --popover-foreground: 0 0% 98%;
        --primary: 0 72.2% 50.6%;
        --primary-foreground: 0 85.7% 97.3%;
        --secondary: 0 0% 14.9%;
        --secondary-foreground: 0 0% 98%;
        --muted: 0 0% 14.9%;
        --muted-foreground: 0 0% 63.9%;
        --accent: 0 0% 14.9%;
        --accent-foreground: 0 0% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 0 0% 98%;
        --border: 0 0% 14.9%;
        --input: 0 0% 14.9%;
        --ring: 0 72.2% 50.6%;
        --chart-1: 220 70% 50%;
        --chart-2: 160 60% 45%;
        --chart-3: 30 80% 55%;
        --chart-4: 280 65% 60%;
        --chart-5: 340 75% 55%;
    }
}

@layer utilities {
    .animate-float {
        animation: float var(--animate-float-duration, 6s) ease-in-out infinite;
    }

    .animate-fade-in-up {
        animation: fadeInUp var(--animate-fade-duration, 0.8s) cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .animate-scale-in {
        animation: scaleIn var(--animate-scale-duration, 0.5s) cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .delay-100 {
        animation-delay: 100ms;
    }

    .delay-200 {
        animation-delay: 200ms;
    }

    .delay-300 {
        animation-delay: 300ms;
    }

    .delay-400 {
        animation-delay: 400ms;
    }

    .delay-500 {
        animation-delay: 500ms;
    }

    .glassmorphism {
        background: rgba(var(--background), 0.7);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(var(--border), 0.5);
    }
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

html {
    scroll-behavior: smooth;
}

* {
    border-color: hsl(var(--border));
}

body {
    font-family: 'Inter', sans-serif;
    position: relative;
    z-index: 0;
    overflow-x: hidden;
    background-color: hsl(var(--background)) !important;
    color: hsl(var(--foreground)) !important;
}

/* Wope Glow & Global Scroll Fixes */
body>.flex,
main {
    background-color: transparent !important;
    overflow: visible !important;
}

/* Wope-Style Interactive Card Spotlight Glow */
.bg-card,
.project-card {
    position: relative;
    overflow: hidden;
}

.bg-card::before,
.project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            hsl(var(--primary) / 0.08),
            transparent 40%);
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.bg-card:hover::before,
.project-card:hover::before {
    opacity: 1;
}

/* Base Content Z-Index adjustment so spotlight sits behind text */
.bg-card>*,
.project-card>* {
    position: relative;
    z-index: 1;
}

/* Wope.com Inspired Ambient Glowing Background */
body::before,
body::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 0.15;
    filter: blur(120px);
    transition: background 1s ease;
}

body::before {
    background: radial-gradient(circle at 15% 50%, hsl(var(--primary)), transparent 60%);
    animation: driftBackground 20s infinite alternate linear;
}

body::after {
    background: radial-gradient(circle at 85% 30%, hsl(var(--accent)), transparent 60%);
    animation: driftBackground 25s infinite alternate-reverse linear;
}

@keyframes driftBackground {
    0% {
        transform: scale(1) translate(0, 0);
    }

    50% {
        transform: scale(1.1) translate(5%, 5%);
    }

    100% {
        transform: scale(0.9) translate(-5%, -5%);
    }
}

/* LAYOUT / BACKGROUNDS */
.bg-gray-50,
.bg-gray-950,
.bg-gray-900,
.bg-white {
    background-color: hsl(var(--background)) !important;
}

.dark .dark\:bg-gray-950,
.dark .dark\:bg-gray-900 {
    background-color: hsl(var(--background)) !important;
}

aside#main-sidebar {
    background-color: hsl(var(--background)) !important;
    border-right: 1px solid hsl(var(--border)) !important;
}

.lg\:hidden.flex.items-center {
    background-color: hsl(var(--background)) !important;
    border-bottom: 1px solid hsl(var(--border)) !important;
}

/* CARDS */
.p-6.bg-white.rounded-xl,
.dark .p-6.dark\:bg-gray-900.rounded-xl {
    background-color: hsl(var(--card)) !important;
    color: hsl(var(--card-foreground)) !important;
    border: 1px solid hsl(var(--border)) !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    border-radius: var(--radius) !important;
}

.card {
    background-color: hsl(var(--card)) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    color: hsl(var(--card-foreground));
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* TEXT */
.text-gray-900,
.dark .dark\:text-white {
    color: hsl(var(--foreground)) !important;
}

.text-gray-500,
.dark .dark\:text-gray-400 {
    color: hsl(var(--muted-foreground)) !important;
}

/* BORDERS */
.border-gray-100,
.dark .dark\:border-gray-800,
.border-e,
.border-b,
.border-t {
    border-color: hsl(var(--border)) !important;
}

/* SIDEBAR LINKS */
#main-sidebar a {
    border-radius: var(--radius);
    transition: background-color 0.2s, color 0.2s;
    font-size: 0.875rem;
    font-weight: 500;
}

#main-sidebar a i {
    opacity: 1 !important;
    color: hsl(var(--muted-foreground));
}

/* Active Nav Links */
#main-sidebar a.bg-red-100,
.dark #main-sidebar a.dark\:bg-red-900 {
    background-color: hsl(var(--accent)) !important;
    color: hsl(var(--accent-foreground)) !important;
}

#main-sidebar a.bg-red-100 i,
.dark #main-sidebar a.dark\:bg-red-900 i {
    color: hsl(var(--accent-foreground)) !important;
}

/* Hover Nav Links */
#main-sidebar a:hover {
    background-color: hsl(var(--accent)) !important;
    color: hsl(var(--accent-foreground)) !important;
}

#main-sidebar a:hover i {
    color: hsl(var(--accent-foreground)) !important;
}

/* LOGO in Sidebar & Header */
.bg-gray-100.text-xs.font-bold,
.dark .dark\:bg-gray-800.text-red-400,
.bg-blue-600.text-white {
    background-color: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
    border-radius: 0.3rem;
    /* equivalent to rounded block */
    box-shadow: none !important;
}

/* BUTTONS */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    font-weight: 500;
    font-size: 0.875rem;
    text-decoration: none;
    transition: background-color 0.2s;
    border: none;
    cursor: pointer;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.btn-primary:hover {
    opacity: 0.9;
}

/* Hover effects disabled */
.hover\:-translate-y-1:hover {
    transform: none !important;
}

.hover\:shadow-xl:hover {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

/* TABLE OVERRIDES */
.table {
    width: 100%;
    border-collapse: collapse;
    color: hsl(var(--foreground));
    font-size: 0.875rem;
}

.table th {
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid hsl(var(--border));
    color: hsl(var(--muted-foreground));
    font-weight: 500;
}

.table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid hsl(var(--border));
}

/* LOGS CARD (from index.ejs) */
a.block.bg-gray-800.border-l-4 {
    background-color: hsl(var(--card)) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-left-width: 4px !important;
    border-left-color: hsl(var(--primary)) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

a.block.bg-gray-800.border-l-4:hover {
    background-color: hsl(var(--accent)) !important;
}

/* ICONS in Cards (Overview) */
.bg-red-100,
.dark .dark\:bg-red-900\/30,
.bg-gray-700 {
    background-color: hsl(var(--secondary)) !important;
    color: hsl(var(--secondary-foreground)) !important;
    border-radius: var(--radius);
}

.text-red-600,
.dark .dark\:text-red-400 {
    color: hsl(var(--foreground)) !important;
}

/* Disable group-hover transitions on title to match Shadcn neutrality */
.group-hover\:text-red-600:hover,
.dark .group-hover\:dark\:text-red-400:hover {
    color: hsl(var(--foreground)) !important;
}

/* =========================================
   ANIMATIONS & MICRO-INTERACTIONS (Shuttle.zip Style)
   ========================================= */

/* Smooth Card Hover Scaling */
.p-6.bg-white.rounded-xl,
.dark .p-6.dark\:bg-gray-900.rounded-xl,
a.block.bg-gray-800.border-l-4 {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease !important;
    will-change: transform, box-shadow;
}

.p-6.bg-white.rounded-xl:hover,
.dark .p-6.dark\:bg-gray-900.rounded-xl:hover,
a.block.bg-gray-800.border-l-4:hover {
    transform: translateY(-2px) scale(1.01) !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1), 0 0 15px -3px rgba(239, 68, 68, 0.1) !important;
    /* Soft Red Glow */
    border-color: hsl(var(--border));
}

.p-6.bg-white.rounded-xl:active,
.dark .p-6.dark\:bg-gray-900.rounded-xl:active,
a.block.bg-gray-800.border-l-4:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
}

/* Base keyframes for entrance */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Initial state before animation triggers */
.opacity-0-translate-y {
    opacity: 0;
    transform: translateY(20px);
}

/* Trigger class added by JS Observer */
.animate-fade-in-up {
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Stagger Animation Delays */
.delay-100 {
    animation-delay: 100ms;
}

.delay-200 {
    animation-delay: 200ms;
}

.delay-300 {
    animation-delay: 300ms;
}

.delay-400 {
    animation-delay: 400ms;
}

.delay-500 {
    animation-delay: 500ms;
}

/* Enhanced Sidebar Item Transitions */
#main-sidebar a {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#main-sidebar a:active {
    transform: scale(0.95);
}

/* Tooltips in sidebar (lg:group-hover) */
.invisible.absolute.start-full {
    background-color: hsl(var(--popover)) !important;
    color: hsl(var(--popover-foreground)) !important;
    border: 1px solid hsl(var(--border)) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) !important;
    border-radius: var(--radius);
    padding: 0.25rem 0.5rem;
}