/* ============================================
   PORTFOLIO WEBSITE - MOON & TREES THEME
   Modern, Premium Design System
   ============================================ */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Outfit:wght@400;600;700;800&display=swap');

/* ============================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================ */
:root {
  /* Color Palette - Moon & Night Theme */
  --color-night-sky: #0a0e27;
  --color-deep-blue: #1a1f3a;
  --color-midnight: #0d1226;
  --color-purple-dark: #2d1b69;
  --color-purple-mid: #4a2d8f;
  --color-purple-light: #6b46c1;
  --color-moonlight: #e0e7ff;
  --color-silver: #c7d2fe;
  --color-star-white: #ffffff;
  --color-accent: #818cf8;
  --color-accent-bright: #a5b4fc;
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--color-purple-dark) 0%, var(--color-deep-blue) 100%);
  --gradient-hero: linear-gradient(180deg, var(--color-night-sky) 0%, var(--color-deep-blue) 50%, var(--color-purple-dark) 100%);
  --gradient-card: linear-gradient(135deg, rgba(106, 70, 193, 0.1) 0%, rgba(29, 31, 58, 0.3) 100%);
  --gradient-glow: radial-gradient(circle, rgba(129, 140, 248, 0.15) 0%, transparent 70%);
  
  /* Typography */
  --font-primary: 'Inter', sans-serif;
  --font-display: 'Outfit', sans-serif;
  
  /* Font Sizes */
  --fs-xl: 4rem;
  --fs-lg: 3rem;
  --fs-md: 2rem;
  --fs-base: 1.125rem;
  --fs-sm: 0.95rem;
  --fs-xs: 0.875rem;
  
  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
  
  /* Effects */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 30px rgba(129, 140, 248, 0.4);
  --shadow-glow-strong: 0 0 50px rgba(129, 140, 248, 0.6);
  
  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
}

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--color-moonlight);
  background: var(--color-night-sky);
  overflow-x: hidden;
  position: relative;
}

/* Animated Starry Background */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(2px 2px at 20% 30%, white, transparent),
    radial-gradient(2px 2px at 60% 70%, white, transparent),
    radial-gradient(1px 1px at 50% 50%, white, transparent),
    radial-gradient(1px 1px at 80% 10%, white, transparent),
    radial-gradient(2px 2px at 90% 60%, white, transparent),
    radial-gradient(1px 1px at 33% 75%, white, transparent),
    radial-gradient(1px 1px at 79% 90%, white, transparent);
  background-size: 200% 200%;
  background-position: 0% 0%;
  animation: twinkle 8s ease-in-out infinite;
  opacity: 0.6;
  pointer-events: none;
  z-index: 1;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-star-white);
}

h1 {
  font-size: var(--fs-xl);
  font-weight: 800;
}

h2 {
  font-size: var(--fs-lg);
  font-weight: 700;
}

h3 {
  font-size: var(--fs-md);
}

a {
  color: var(--color-accent-bright);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-moonlight);
}

/* ============================================
   NAVIGATION
   ============================================ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: var(--space-sm) var(--space-md);
  background: rgba(10, 14, 39, 0.8);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(129, 140, 248, 0.1);
  transition: all var(--transition-base);
}

.navbar.scrolled {
  background: rgba(10, 14, 39, 0.95);
  box-shadow: var(--shadow-md);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-star-white);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.nav-links {
  display: flex;
  gap: var(--space-md);
  list-style: none;
}

.nav-links a {
  font-weight: 600;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transform: translateX(-50%);
  transition: width var(--transition-base);
}

.nav-links a:hover::after {
  width: 80%;
}

.nav-links a:hover {
  color: var(--color-accent-bright);
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--gradient-hero);
  overflow: hidden;
  padding: var(--space-xl) var(--space-md);
}

/* Moon */
.moon {
  position: absolute;
  top: 10%;
  right: 15%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #e0e7ff);
  box-shadow: 
    0 0 60px rgba(255, 255, 255, 0.4),
    0 0 100px rgba(224, 231, 255, 0.3),
    inset 0 0 30px rgba(0, 0, 0, 0.1);
  animation: moonGlow 4s ease-in-out infinite;
  z-index: 2;
}

@keyframes moonGlow {
  0%, 100% {
    box-shadow: 
      0 0 60px rgba(255, 255, 255, 0.4),
      0 0 100px rgba(224, 231, 255, 0.3),
      inset 0 0 30px rgba(0, 0, 0, 0.1);
  }
  50% {
    box-shadow: 
      0 0 80px rgba(255, 255, 255, 0.6),
      0 0 120px rgba(224, 231, 255, 0.5),
      inset 0 0 30px rgba(0, 0, 0, 0.1);
  }
}

/* Trees Silhouette */
.trees {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400"><path d="M0 400 L0 250 L50 200 L30 200 L60 150 L40 150 L70 100 L50 100 L80 50 L100 100 L80 100 L110 150 L90 150 L120 200 L100 200 L150 250 L150 400 M200 400 L200 220 L240 180 L225 180 L255 140 L240 140 L265 100 L250 100 L275 60 L290 100 L275 100 L300 140 L285 140 L315 180 L300 180 L340 220 L340 400 M400 400 L400 280 L430 250 L420 250 L445 220 L435 220 L455 190 L445 190 L465 160 L475 190 L465 190 L485 220 L475 220 L500 250 L490 250 L520 280 L520 400 M600 400 L600 200 L650 150 L630 150 L665 110 L645 110 L675 70 L655 70 L685 30 L705 70 L685 70 L715 110 L695 110 L730 150 L710 150 L760 200 L760 400 M850 400 L850 260 L890 220 L875 220 L905 180 L890 180 L915 140 L900 140 L925 100 L940 140 L925 140 L950 180 L935 180 L965 220 L950 220 L990 260 L990 400 M1050 400 L1050 230 L1085 195 L1072 195 L1100 165 L1087 165 L1112 135 L1100 135 L1125 105 L1137 135 L1125 135 L1150 165 L1137 165 L1165 195 L1152 195 L1187 230 L1187 400 Z" fill="%230a0e27" opacity="0.9"/></svg>') center bottom no-repeat;
  background-size: cover;
  z-index: 3;
  pointer-events: none;
}

.hero-content {
  max-width: 800px;
  text-align: center;
  position: relative;
  z-index: 10;
  animation: fadeInUp 1s ease;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-greeting {
  font-size: var(--fs-base);
  color: var(--color-accent-bright);
  font-weight: 600;
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.hero-title {
  margin-bottom: var(--space-sm);
  background: linear-gradient(135deg, var(--color-star-white), var(--color-accent-bright));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: var(--fs-md);
  color: var(--color-silver);
  margin-bottom: var(--space-md);
  font-weight: 400;
}

.hero-description {
  font-size: var(--fs-base);
  color: var(--color-moonlight);
  margin-bottom: var(--space-lg);
  opacity: 0.9;
}

.hero-cta {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  padding: 1rem 2rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  border: none;
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn:hover::before {
  width: 300px;
  height: 300px;
}

.btn span {
  position: relative;
  z-index: 1;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-accent), var(--color-purple-light));
  color: var(--color-star-white);
  box-shadow: var(--shadow-md);
}

.btn-primary:hover {
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}

.btn-secondary {
  background: transparent;
  border: 2px solid var(--color-accent);
  color: var(--color-accent-bright);
}

.btn-secondary:hover {
  background: var(--color-accent);
  color: var(--color-star-white);
  transform: translateY(-2px);
}

/* ============================================
   SECTION STYLES
   ============================================ */
section {
  padding: var(--space-xl) var(--space-md);
  position: relative;
  z-index: 10;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.section-title {
  text-align: center;
  margin-bottom: var(--space-lg);
  position: relative;
}

.section-title h2 {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-sm);
  position: relative;
  display: inline-block;
}

.section-title h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  border-radius: var(--radius-full);
}

.section-title p {
  color: var(--color-silver);
  font-size: var(--fs-base);
  max-width: 600px;
  margin: var(--space-md) auto 0;
}

/* ============================================
   ABOUT SECTION
   ============================================ */
.about {
  background: var(--gradient-primary);
}

.about-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}

.about-text p {
  margin-bottom: var(--space-sm);
  line-height: 1.8;
  color: var(--color-moonlight);
}

.about-image {
  position: relative;
}

.about-image-wrapper {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.about-image-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-glow);
  z-index: 1;
  pointer-events: none;
}

/* ============================================
   SKILLS SECTION
   ============================================ */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.skill-card {
  background: var(--gradient-card);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(129, 140, 248, 0.2);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.skill-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-purple-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}

.skill-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-glow);
  border-color: var(--color-accent);
}

.skill-card:hover::before {
  transform: scaleX(1);
}

.skill-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-sm);
  display: block;
}

.skill-card h3 {
  margin-bottom: var(--space-xs);
  font-size: 1.25rem;
}

.skill-card p {
  color: var(--color-silver);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

/* ============================================
   PROJECTS SECTION
   ============================================ */
.projects {
  background: var(--color-deep-blue);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.project-card {
  background: var(--gradient-card);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(129, 140, 248, 0.2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-base);
  cursor: pointer;
  position: relative;
}

.project-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-glow);
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}

.project-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: var(--shadow-glow-strong);
  border-color: var(--color-accent-bright);
}

.project-card:hover::after {
  opacity: 1;
}

.project-image {
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, var(--color-purple-mid), var(--color-deep-blue));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  position: relative;
  overflow: hidden;
}

.project-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s;
}

.project-card:hover .project-image::before {
  transform: translateX(100%);
}

.project-content {
  padding: var(--space-md);
  position: relative;
  z-index: 1;
}

.project-content h3 {
  margin-bottom: var(--space-sm);
  font-size: 1.5rem;
}

.project-content p {
  color: var(--color-silver);
  margin-bottom: var(--space-md);
  line-height: 1.6;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.tag {
  padding: 0.4rem 0.8rem;
  background: rgba(129, 140, 248, 0.2);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  color: var(--color-accent-bright);
  font-weight: 600;
}

.project-links {
  display: flex;
  gap: var(--space-sm);
}

.project-link {
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: all var(--transition-fast);
}

.project-link.primary {
  background: var(--color-accent);
  color: var(--color-star-white);
}

.project-link.primary:hover {
  background: var(--color-accent-bright);
  transform: scale(1.05);
}

.project-link.secondary {
  border: 1px solid var(--color-accent);
  color: var(--color-accent-bright);
}

.project-link.secondary:hover {
  background: var(--color-accent);
  color: var(--color-star-white);
}

/* ============================================
   YOUTUBE/CONTENT SECTION
   ============================================ */
.youtube {
  background: var(--gradient-primary);
}

.youtube-content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.youtube-icon {
  font-size: 5rem;
  color: var(--color-accent-bright);
  margin-bottom: var(--space-md);
  display: inline-block;
  animation: float 3s ease-in-out infinite;
}

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

.youtube-content p {
  font-size: var(--fs-base);
  color: var(--color-moonlight);
  margin-bottom: var(--space-md);
  line-height: 1.8;
}

/* ============================================
   SOCIAL LINKS SECTION
   ============================================ */
.social-links-section {
  background: var(--color-deep-blue);
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  max-width: 800px;
  margin: var(--space-lg) auto 0;
}

.social-card {
  background: var(--gradient-card);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(129, 140, 248, 0.2);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
  transition: all var(--transition-base);
  cursor: pointer;
}

.social-card:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: var(--shadow-glow);
  border-color: var(--color-accent-bright);
}

.social-icon {
  font-size: 3rem;
  margin-bottom: var(--space-sm);
  display: block;
  transition: transform var(--transition-base);
}

.social-card:hover .social-icon {
  transform: rotate(10deg) scale(1.1);
}

.social-card h3 {
  font-size: 1.1rem;
  margin-bottom: var(--space-xs);
}

.social-card p {
  color: var(--color-silver);
  font-size: var(--fs-xs);
}

/* ============================================
   CONTACT SECTION
   ============================================ */
.contact {
  background: var(--gradient-hero);
}

.contact-content {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.contact-info {
  margin-top: var(--space-lg);
}

.contact-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  font-size: var(--fs-base);
}

.contact-icon {
  font-size: 1.5rem;
  color: var(--color-accent-bright);
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: var(--color-midnight);
  padding: var(--space-md);
  text-align: center;
  border-top: 1px solid rgba(129, 140, 248, 0.1);
}

.footer p {
  color: var(--color-silver);
  font-size: var(--fs-sm);
}

/* ============================================
   SCROLL ANIMATIONS
   ============================================ */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 768px) {
  :root {
    --fs-xl: 2.5rem;
    --fs-lg: 2rem;
    --fs-md: 1.5rem;
    --space-xl: 3rem;
  }
  
  .nav-links {
    gap: var(--space-sm);
  }
  
  .nav-links a {
    font-size: var(--fs-xs);
    padding: var(--space-xs);
  }
  
  .moon {
    width: 120px;
    height: 120px;
    top: 5%;
    right: 5%;
  }
  
  .about-content {
    grid-template-columns: 1fr;
  }
  
  .projects-grid {
    grid-template-columns: 1fr;
  }
  
  .hero-cta {
    flex-direction: column;
  }
  
  .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .nav-logo {
    font-size: 1.2rem;
  }
  
  section {
    padding: var(--space-md) var(--space-sm);
  }
  
  .skills-grid,
  .social-grid {
    grid-template-columns: 1fr;
  }
}