/* 
  This file defines the color theme and custom animations for the portfolio.
  It uses CSS Custom Properties (variables) that are automatically
  used by the Tailwind CSS framework loaded from the CDN.
*/

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.25 0 0);
  --card: oklch(0.98 0 0);
  --card-foreground: oklch(0.3 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.25 0 0);
  --primary: oklch(0.55 0.15 200); /* A nice cyan/blue */
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.95 0.03 200); /* A very light blue/gray for secondary elements */
  --secondary-foreground: oklch(0.25 0 0);
  --muted: oklch(0.96 0 0);
  --muted-foreground: oklch(0.45 0 0);
  --accent: oklch(0.96 0.03 200); /* Similar to secondary, for hover effects */
  --accent-foreground: oklch(0.25 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.9 0 0);
  --input: oklch(0.98 0 0);
  --ring: oklch(0.55 0.15 200);
  --radius: 0.75rem; /* This corresponds to Tailwind's rounded-xl */
}

/* Base styles */
body {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Text wrapping utilities */
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }

/* Scroll Animation Styles */
.scroll-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scroll-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delay Utilities */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-500 { transition-delay: 500ms; }

/* Dynamic Header Shadow on Scroll */
header.scrolled {
  border-bottom-color: transparent;
  box-shadow: 0 4px 20px -2px oklch(0.55 0.15 200 / 0.15);
}

/* Glowing Border Effect for Cards */
.glow-card {
  position: relative;
  transition: transform 0.3s ease-out;
}

.glow-card::before {
  content: "";
  position: absolute;
  inset: -2px; 
  z-index: -1;
  border-radius: calc(var(--radius) + 2px);
  
  /* Conic gradient using colors from your hero image/theme */
  background: conic-gradient(
    from 180deg at 50% 50%,
    #a3e635 0deg, /* Lime Green */
    var(--primary) 120deg,
    #a3e635 360deg
  );
  
  filter: blur(14px);
  
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.glow-card:hover {
  transform: translateY(-4px); /* Lift the card slightly */
}

.glow-card:hover::before {
  opacity: 0.6; /* Fade the glow in */
}