/* Theme Configuration */
:root {
  --transition-duration: 0.2s;
}

/* Prevent layout shifts */
body {
  min-height: 100vh;
}

/* Smooth theme transitions - only for colors, not layout */
body,
header,
.backdrop-radial,
button,
a,
section {
  transition: background-color var(--transition-duration) ease,
              border-color var(--transition-duration) ease,
              color var(--transition-duration) ease !important;
}

/* Light theme */
body.light-theme {
  background-color: #ffffff !important;
  color: #171717 !important;
}

/* Light theme - Header */
body.light-theme header {
  background-color: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Light theme - Backdrop */
body.light-theme .backdrop-radial {
  background: radial-gradient(1200px 400px at 50% 0%, rgba(59,130,246,0.04), rgba(16,185,129,0.02) 50%, transparent 70%) !important;
}

/* Light theme - Text colors */
body.light-theme .text-neutral-200,
body.light-theme .text-neutral-300,
body.light-theme .text-neutral-400 {
  color: #525252 !important;
}

body.light-theme h1,
body.light-theme h2,
body.light-theme h3,
body.light-theme .text-white {
  color: #0a0a0a !important;
}

/* Light theme - Borders */
body.light-theme .border-white\/5,
body.light-theme .border-white\/10 {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Light theme - Backgrounds */
body.light-theme .bg-neutral-900 {
  background-color: #f5f5f5 !important;
}

body.light-theme .bg-neutral-900\/60 {
  background-color: rgba(245, 245, 245, 0.6) !important;
}

body.light-theme .bg-neutral-950 {
  background-color: #ffffff !important;
}

/* Light theme - Hover states */
body.light-theme a:hover,
body.light-theme button:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

/* Light theme - Selection */
body.light-theme ::selection {
  background-color: #e5e5e5 !important;
  color: #0a0a0a !important;
}

/* Light theme - Email button */
body.light-theme a[href^="mailto"] {
  background-color: #0a0a0a !important;
  color: #ffffff !important;
}

body.light-theme a[href^="mailto"]:hover {
  background-color: #262626 !important;
}

/* Light theme - Cards and panels */
body.light-theme .bg-white\/\[0\.02\],
body.light-theme .bg-white\/\[0\.03\] {
  background-color: rgba(0, 0, 0, 0.02) !important;
}

/* Light theme - Pixel Art Collection label */
body.light-theme .bg-neutral-900\/90 {
  background-color: rgba(245, 245, 245, 0.95) !important;
}

/* Light theme - 3D Model container backgrounds */
body.light-theme .bg-neutral-950\/60 {
  background-color: rgba(250, 250, 250, 0.8) !important;
}

/* Light theme - Gradients */
body.light-theme .bg-gradient-to-tr.from-emerald-500\/10 {
  background-image: linear-gradient(to top right, rgba(16, 185, 129, 0.03), rgba(59, 130, 246, 0.02), rgba(16, 185, 129, 0.03)) !important;
}

/* Light theme - Video carousel gradients - keep dark for contrast */
body.light-theme .bg-gradient-to-t.from-neutral-950 {
  background-image: linear-gradient(to top, rgba(10, 10, 10, 0.98), rgba(10, 10, 10, 0.85), rgba(10, 10, 10, 0.60), transparent) !important;
}

/* Light theme - Video carousel text stays white */
body.light-theme #video-carousel h4.text-white,
body.light-theme #video-carousel p.text-white {
  color: #ffffff !important;
}

/* Light theme - Hero cards keep dark gradient and white/grey text */
body.light-theme .hero-card-gradient {
  background-image: linear-gradient(to top, rgba(10, 10, 10, 0.98), rgba(10, 10, 10, 0.85), transparent) !important;
}

body.light-theme .hero-card-title {
  color: #ffffff !important;
}

body.light-theme .hero-card-description {
  color: #d4d4d4 !important;
}

/* Light theme - Timeline bullets should be grey not black */
body.light-theme .bg-white.rounded-full {
  background-color: #737373 !important;
}

/* Prevent transitions on page load */
body.preload * {
  transition: none !important;
}

/* Performance optimizations for CLS */
#image-slider-container {
  min-height: 400px;
}

#model-viewer-container {
  min-height: 600px;
}

/* Reserve space for main content sections to prevent CLS */
#main-content {
  min-height: 100vh;
}

/* Reserve space for each major section */
section {
  min-height: 200px;
}

/* Prevent layout shift for images */
img {
  content-visibility: auto;
}

/* Explicit aspect ratios for image containers */
.aspect-\[4\/3\] {
  aspect-ratio: 4 / 3;
}

.aspect-\[3\/4\] {
  aspect-ratio: 3 / 4;
}

.aspect-\[16\/9\] {
  aspect-ratio: 16 / 9;
}

/* Ensure images don't cause layout shift */
img[loading="lazy"] {
  min-height: 100px; /* Reserve minimum space */
}

/* Skeleton loading for components */
.component-loading {
  min-height: 400px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Reserve space for lazy-loaded content */
@media (max-width: 600px) {
  #image-slider-container {
    min-height: 250px;
  }
  #model-viewer-container {
    min-height: 400px;
  }
}

@media (min-width: 601px) and (max-width: 1024px) {
  #image-slider-container {
    min-height: 320px;
  }
  #model-viewer-container {
    min-height: 500px;
  }
}