/* ===== CSS VARIABLES & THEME ===== */
:root {
  --radius: 0.65rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.276 0.0724 272.14);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.4061 0.0664 257.73);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.4061 0.0664 257.73);
  --primary: oklch(0.63 0.18 264);
  --primary-foreground: oklch(0.9705 0.014182281549934384 254.60420257827008);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.967 0.001 286.375);
  --muted-foreground: oklch(0.552 0.016 285.938);
  --accent: oklch(0.967 0.001 286.375);
  --accent-foreground: oklch(0.21 0.006 285.885);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.92 0.004 286.32);
  --input: oklch(0.92 0.004 286.32);
  --ring: oklch(0.623 0.214 259.815);
}

/* Dark mode color overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --background: oklch(0.141 0.005 285.823);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.21 0.006 285.885);
    --card-foreground: oklch(0.705 0.015 286.067);
    --popover: oklch(0.21 0.006 285.885);
    --popover-foreground: oklch(0.705 0.015 286.067);
    --primary: oklch(0.63 0.18 264);
    --primary-foreground: oklch(0.9705 0.014182281549934384 254.60420257827008);
    --secondary: oklch(0.274 0.006 286.033);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.274 0.006 286.033);
    --muted-foreground: oklch(0.705 0.015 286.067);
    --accent: oklch(0.274 0.006 286.033);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.704 0.191 22.216);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.488 0.243 264.376);
  }

  /* Desaturate hero image in dark mode */
  .hero-image {
    filter: grayscale(0.5);
  }
}

/* ===== RESET & BASE STYLES ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6em;
  color: var(--foreground);
  background-color: var(--muted);
  overflow-x: hidden;
}

/* ===== LAYOUT COMPONENTS ===== */
/* Hero section covering viewport until hello section starts */
.hero {
  width: 100dvw;
  height: 80dvh;
}

/* Sticky layered scrolling layout */
.hello {
  position: sticky;
  margin-top: 60dvh;
  top: 4rem;
  min-height: 80dvh;
}

.about {
  position: sticky;
  margin-top: -30dvh;
  top: 8rem;
  min-height: 90dvh;
}

@media (max-width: 768px) {
  .hello {
    margin-top: 60dvh;
  }
}

@media (max-width: 480px) {
  .hello {
    margin-top: 60dvh;
  }
}

/* ===== COMPONENT-SPECIFIC EFFECTS ===== */
/* SVG animated underline for hero title */
.hello-title .underline {
  color: var(--primary);
  opacity: 0;
  animation: drawUnderline 0.5s ease-out 0.5s forwards;
}

/* Button hover animation */
.hello-button:hover {
  opacity: 0.9;
  transform: translateY(-0.1rem);
}

/* ===== ANIMATIONS & KEYFRAMES ===== */
.fadeInUp {
  animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes drawUnderline {
  from {
    opacity: 0;
    stroke-dasharray: 0 200;
  }

  to {
    opacity: 1;
    stroke-dasharray: 200 0;
  }
}

/* ===== UTILITY CLASSES ===== */
/* Missing Tachyons utilities */
.object-fit-cover {
  object-fit: cover;
}

.object-center {
  object-position: center;
}

.bottom--1 {
  bottom: -0.25rem;
}

.grayscale {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.grayscale:hover {
  filter: grayscale(0%);
}

/* Theme-based color utilities */
.bg-card {
  background-color: var(--card);
}

.bg-muted {
  background-color: var(--muted);
}

.bg-secondary {
  background-color: var(--secondary);
}

.text-foreground {
  color: var(--foreground);
}

.text-card-foreground {
  color: var(--card-foreground);
}

.text-muted-foreground {
  color: var(--muted-foreground);
}

.border {
  border: 1px solid var(--border);
}

.border-border {
  border-color: var(--border);
}

/* ===== TYPOGRAPHY CLASSES ===== */
.typography-h1 {
  font-size: 2.25rem;
  /* text-4xl equivalent */
  font-weight: 800;
  /* font-extrabold */
  letter-spacing: -0.025em;
  /* tracking-tight */
  line-height: 1.1;
}

.typography-h2 {
  font-size: 1.875rem;
  /* text-3xl equivalent */
  font-weight: 600;
  /* font-semibold */
  letter-spacing: -0.025em;
  /* tracking-tight */
  line-height: 1.2;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
}

.typography-lead {
  font-size: 1.25rem;
  /* text-xl equivalent */
  color: var(--muted-foreground);
  line-height: 1.6;
}

.typography-body {
  font-size: 1.125rem;
  /* text-lg equivalent */
  line-height: 1.75;
  /* leading-7 equivalent */
  color: var(--card-foreground);
}

/* Mobile and desktop typography scaling */
@media (max-width: 768px) {
  .typography-h1 {
    font-size: 2rem;
    /* Smaller on mobile */
  }

  .typography-h2 {
    font-size: 1.5rem;
    /* Smaller on mobile */
  }

  .typography-lead {
    font-size: 1.125rem;
    /* Slightly smaller on mobile */
  }
}

@media (min-width: 64em) {

  /* lg breakpoint */
  .typography-h1 {
    font-size: 3rem;
    /* lg:text-5xl equivalent */
  }

  .typography-h2 {
    font-size: 2.25rem;
    /* Larger on desktop */
  }
}

/* ===== FONT FACES ===== */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}