/* ============================================= */
/* Global Styles (Used on All Pages)             */
/* ============================================= */

body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc;
    color: #1f2937;
}

::-webkit-scrollbar { 
    width: 8px; 
}
::-webkit-scrollbar-track { 
    background: #f1f1f1; 
}
::-webkit-scrollbar-thumb { 
    background: #075985; 
    border-radius: 4px; 
}
::-webkit-scrollbar-thumb:hover { 
    background: #0369a1; 
}

/* ============================================= */
/* Styles for Main Portfolio Page                */
/* ============================================= */

.section-title {
    @apply text-3xl md:text-5xl font-bold mb-10 text-sky-800 text-center md:text-left;
}
.section-title::after {
    content: '';
    @apply block bg-sky-600 mt-2 mx-auto md:ml-0; 
    width: 70px; 
    height: 5px; 
}

.nav-link {
    @apply px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:bg-sky-100 hover:text-sky-700 transition-colors duration-300;
}
.nav-link.active {
    @apply bg-sky-600 text-white hover:bg-sky-700;
}

.project-card, .achievement-card { 
    @apply bg-white p-6 rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2;
}

.skill-tag {
    @apply bg-sky-100 text-sky-800 px-3 py-1 rounded-full text-sm font-medium transition-all duration-300 hover:bg-sky-200 hover:scale-105;
}

.btn-base {
    @apply font-bold py-3 px-6 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 ease-in-out transform hover:-translate-y-1 inline-block;
}
.btn-primary { 
    @apply btn-base bg-sky-600 hover:bg-sky-700 text-white;
}
.btn-secondary {
    @apply btn-base bg-white/90 hover:bg-white text-sky-700 border border-sky-200;
}

.btn-solid {
    appearance: none; -webkit-appearance: none; -moz-appearance: none; display: inline-block; 
    font-weight: 700; padding-top: 0.75rem; padding-bottom: 0.75rem; padding-left: 1.5rem;  padding-right: 1.5rem;  
    border-radius: 0.5rem; color: white; background-color: #2563EB; border: 1px solid #1D4ED8; 
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); 
    transition-property: background-color, border-color, box-shadow, transform; 
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; 
    transform: translateY(0px); cursor: pointer; text-align: center;
}
.btn-solid:hover {
    background-color: #1D4ED8; border-color: #1E40AF; 
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); 
    transform: translateY(-0.25rem); 
}
.form-input {
    @apply w-full px-4 py-3 rounded-lg border border-gray-300 bg-gray-50 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-transparent transition-all duration-300;
}
#home {
    background: linear-gradient(-45deg, #0284c7, #06b6d4, #3b82f6, #0ea5e9); background-size: 400% 400%;
    animation: gradientBG 15s ease infinite; position: relative; overflow: hidden; 
}
#interactive-hero-canvas {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; 
}
.hero-content-container { position: relative; z-index: 2; }
@keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.hero-content { animation: float 6s ease-in-out infinite; }
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } }
.text-shadow { text-shadow: 1px 1px 3px rgba(0,0,0,0.3); }
.timeline-item { @apply relative border-l-2 border-sky-200 pl-10 pb-10; }
.timeline-item:last-child { @apply pb-0; }
.timeline-dot { @apply absolute -left-[11px] top-1 w-5 h-5 bg-sky-600 rounded-full border-4 border-white; }
:root { --gap: 2rem; --duration: 40s; --scroll-start: 0; --scroll-end: calc(-100% - var(--gap)); }
.marquee { display: flex; overflow: hidden; user-select: none; gap: var(--gap); mask-image: linear-gradient( to right, hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 15%, hsl(0 0% 0% / 1) 85%, hsl(0 0% 0% / 0) ); }
.marquee__group { flex-shrink: 0; display: flex; align-items: center; justify-content: space-around; gap: var(--gap); min-width: 100%; animation: scroll-x var(--duration) linear infinite; }
.marquee:hover .marquee__group { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marquee__group { animation-play-state: paused; } }
.marquee__group img { height: 3rem; width: auto; object-fit: contain; filter: grayscale(0%); transition: filter 0.3s; }
.marquee__group img:hover { filter: grayscale(100%); animation-play-state: paused; }
@keyframes scroll-x { from { transform: translateX(var(--scroll-start)); } to { transform: translateX(var(--scroll-end)); } }
.achievement-card:hover { filter: grayscale(100%); }

/* ======================================================== */
/* Styles for Project Canvases & Project Detail Pages       */
/* ======================================================== */

/* --- CORRECTED LOGIC --- */

/* 1. Base style for all 3D canvases */
.project-3d-canvas {
    width: 100%;
    cursor: grab;
    display: block; 
}

/* 2. Style for the small canvases inside project cards on the MAIN page */
.project-card .project-3d-canvas {
    height: 300px; 
    border-radius: 0.5rem;
    background-color: #e0f2fe;
    position: relative;
}

/* 3. Style for the large canvas container on the DETAIL page */
.project-3d-canvas-container {
    width: 100%;
    height: 60vh;
    min-height: 500px;
    border-radius: 0.75rem;
    background-color: #e0f2fe;
    position: relative;
}

/* 4. This makes the canvas inside the large container fill its parent */
.project-3d-canvas-container .project-3d-canvas {
    height: 100%;
}


/* Styles for the article text on the detail page */
.prose h2 { @apply text-3xl font-bold text-sky-800 mb-4 mt-12 border-b-2 border-sky-100 pb-2; }
.prose h3 { @apply text-2xl font-semibold text-sky-700 mt-8 mb-3; }
.prose p, .prose li { @apply text-lg leading-relaxed; }
.prose strong { @apply text-slate-800; }

/* Styles for the image galleries on the detail page */
.gallery-grid { @apply grid grid-cols-1 md:grid-cols-3 gap-6 items-start; }
.gallery-item img { @apply rounded-lg shadow-md w-full h-full object-cover aspect-[4/3]; }
.gallery-item p { @apply text-center text-sm text-gray-600 mt-2; }