Portfolio/src/index.css

@import './colors.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Font loading states */
html.fonts-loading body {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

html.fonts-loaded body,
html.fonts-fallback body {
  opacity: 1;
}

@layer base {
  :root {
    font-family: Inter, system-ui, sans-serif;
  }

  html {
    background-color: transparent !important;
  }

  body {
    @apply text-foreground antialiased;
    background-color: transparent !important;
  }
  
  #root {
    background-color: transparent !important;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-sans font-bold tracking-tight;
  }
}

@layer components {
  .container {
    @apply px-4 mx-auto max-w-7xl sm:px-6 lg:px-8;
  }

  .transition-standard {
    @apply transition-all duration-300 ease-in-out;
  }

  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  .animate-pulse-slow {
    animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
}

@layer utilities {
  .text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary via-accent to-secondary;
  }
  
  /* GPU acceleration utilities - simplified */
  .gpu-accelerated {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.3;
  }
}

@keyframes slide-right {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes slide-down {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

.animate-slide-right {
  animation: slide-right 8s linear infinite;
}

.animate-slide-down {
  animation: slide-down 8s linear infinite;
}

/* Prevent hover flickering */
* {
  -webkit-tap-highlight-color: transparent;
}

a, button {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Scrollbar Styling */
@media (pointer: fine) {
  ::-webkit-scrollbar {
    @apply w-2;
  }

  ::-webkit-scrollbar-track {
    @apply bg-muted;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-accent rounded-full hover:bg-accent-foreground transition-colors;
  }
}

/* Improved Mobile Experience */
@media (max-width: 640px) {
  h1 {
    @apply text-3xl;
  }

  h2 {
    @apply text-2xl;
  }

  .prose {
    @apply text-base space-y-6;
  }

  .prose p {
    @apply leading-relaxed;
  }

  button,
  a {
    @apply min-h-[44px] min-w-[44px];
  }
}