personal-website/src/styles/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@keyframes accordion-down {
  from { height: 0; }
  to { height: var(--radix-accordion-content-height); }
}
@keyframes accordion-up {
  from { height: var(--radix-accordion-content-height); }
  to { height: 0; }
}
@keyframes collapsible-down {
  from { height: 0; }
  to { height: var(--radix-collapsible-content-height); }
}
@keyframes collapsible-up {
  from { height: var(--radix-collapsible-content-height); }
  to { height: 0; }
}
@keyframes slide-in-from-left {
  from { transform: translateX(-100%); }
}
@keyframes slide-in-from-right {
  from { transform: translateX(100%); }
}
@keyframes slide-in-from-top {
  from { transform: translateY(-100%); }
}
@keyframes slide-in-from-bottom {
  from { transform: translateY(100%); }
}
@keyframes slide-out-to-left {
  to { transform: translateX(-100%); }
}
@keyframes slide-out-to-right {
  to { transform: translateX(100%); }
}
@keyframes slide-out-to-top {
  to { transform: translateY(-100%); }
}
@keyframes slide-out-to-bottom {
  to { transform: translateY(100%); }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.625rem;
    --chart-1: 222.2 47.4% 11.2%;
    --chart-2: 210 40% 44%;
    --chart-3: 210 40% 57.6%;
    --chart-4: 182 40% 76.5%;
    --chart-5: 340 75% 55%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.9 100% 50%;
    --chart-1: 217.2 91.2% 59%;
    --chart-2: 160 84% 39%;
    --chart-3: 30 80% 50%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up { animation: fade-in-up 0.5s ease-out both; }
.animate-fade-in-up-delay-1 { animation: fade-in-up 0.5s ease-out 0.1s both; }
.animate-fade-in-up-delay-2 { animation: fade-in-up 0.5s ease-out 0.2s both; }
.animate-fade-in-up-delay-3 { animation: fade-in-up 0.5s ease-out 0.3s both; }
.animate-fade-in-up-delay-4 { animation: fade-in-up 0.5s ease-out 0.4s both; }

@keyframes blob {
  0%, 100% { transform: scale(1) translate(0px, 0px); }
  25%  { transform: scale(1.08) translate(40px, -30px); }
  50%  { transform: scale(0.94) translate(-25px, 50px); }
  75%  { transform: scale(1.04) translate(35px, 30px); }
}

.animate-blob { animation: blob 9s ease-in-out infinite; }