/* Critical above-the-fold styles */
* {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Prevent layout shift for font loading with font-display: swap */
.font-inika {
  font-family: "Inika", Georgia, serif;
  font-display: swap;
}

.font-hind {
  font-family: "Hind", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-display: swap;
}

/* Loading skeleton to prevent layout shifts */
.loading-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

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

/* Reserve space for main layout */
#root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Prevent cumulative layout shift for images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Reserve space for lazy-loaded content */
.aspect-square { aspect-ratio: 1; }
.aspect-video { aspect-ratio: 16/9; }

/* Critical navbar styles to prevent layout shift */
nav {
  position: relative;
  z-index: 50;
}

/* Prevent invisible text during font load */
.font-loading {
  visibility: hidden;
}

.fonts-loaded .font-loading {
  visibility: visible;
}