@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

:root {
  --color-bg: #0d0d26;
  --color-nav: #131523;
  --color-text: #e0e0e0;
  --color-text-sm: #a0a0a0;
  --color-panel: #1c1e3a;
  --color-prof: #5dfafa;
  --color-acad: #a084fc;
  --color-accent: #5dfafa;
}

html { scroll-behavior: smooth; overflow-x: hidden; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background: var(--color-bg); color: var(--color-text); line-height: 1.6; overflow-x: hidden; }

/* Navigation */
nav { background: var(--color-nav); padding: 1rem 2rem; position: relative; z-index: 1000;}
.nav-container { display: flex; justify-content: space-between; align-items: center; }
.logo { color: var(--color-prof); font-size: 1.5rem; font-weight: bold; }
.nav-links { list-style: none; display: flex; gap: 2rem; }
.nav-links a { color: var(--color-text); text-decoration: none; transition: color .3s; }
.nav-links a:hover { color: var(--color-prof); }

/* --- FIX 1: Restored Fixed Nav for Subpages --- */
.technical-details-page nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}
.technical-details-page { 
  padding-top: 75px; 
}
/* --------------------------------------------- */

/* Hero */
.hero { 
  position: relative; 
  min-height: calc(100vh - 75px); /* This makes the void fill the screen! */
  padding: 3rem 1rem; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  overflow: hidden; 
}
#hero-background-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.hero-content { position: relative; z-index: 1; width: 100%; max-width: 1400px; }

/* --- FIX 2: Added minmax to prevent text crushing --- */
.hero-main { display: grid; grid-template-columns: 1fr minmax(300px, 580px); gap: 2rem; align-items: center; }
/* ---------------------------------------------------- */

.hero-left { text-align: left; padding: 0.5rem 0; position: relative; z-index: 9999; }
.hero-name { 
  font-size: 3.5rem; /* Much bigger */
  margin-bottom: 0.5rem; 
  font-weight: 700; 
  line-height: 1.1; 
}
.hero-title { 
  font-size: 1.4rem; 
  color: var(--color-prof); /* Makes the subtitle pop */
  margin-bottom: 1rem; 
}
.hero-desc { 
  font-size: 1.15rem; 
  margin-bottom: 1.8rem; 
  max-width: 55ch; 
  line-height: 1.6; 
}

/* Hero Social Links */
.hero-socials { 
  display: flex; 
  gap: 1.2rem; 
  margin-bottom: 0.8rem; 
}
.social-link { 
  display: inline-flex; 
  align-items: center; 
  gap: 0.4rem; 
  color: var(--color-prof); 
  text-decoration: none; 
  font-size: 0.95rem; 
  font-weight: 600; 
  transition: color 0.2s ease, transform 0.2s ease; 
}
.social-link:hover { 
  color: var(--color-text); 
  transform: translateY(-2px); 
}

/* Make the buttons slightly larger to match the new text */
.hero-cta .button { 
  font-size: 1.05rem; 
  padding: 0.7rem 1.2rem; 
}
.hero-right { background: rgba(28,30,58,0.9); padding: 0.75rem; border-radius: 8px; border-left: 4px solid var(--color-accent); width: 100%; }

.button { 
  display: inline-block; 
  padding: 0.55rem 0.9rem; 
  border-radius: 6px; 
  text-decoration: none; 
  font-weight: 600; 
  background: var(--color-prof); 
  color: var(--color-bg) !important; /* Force dark text */
  -webkit-text-fill-color: var(--color-bg); /* Protect against iOS overrides */
  transition: transform 0.2s, box-shadow 0.2s; 
}
.button:hover { transform: scale(1.08); box-shadow: 0 8px 16px rgba(93, 250, 250, 0.3); }
.button.secondary { 
  background: transparent; 
  color: var(--color-text) !important; /* Force light text */
  -webkit-text-fill-color: var(--color-text); /* Protect against iOS overrides */
  border: 1px solid rgba(255,255,255,0.06); 
}
.button.secondary:hover { background: rgba(93, 250, 250, 0.1); border-color: rgba(93, 250, 250, 0.3); }

/* Carousel */
/* --- FIX 3: Restored position relative so arrows stay inside --- */
.mini-carousel { text-align: center; position: relative; }
/* --------------------------------------------------------------- */
.carousel-track { width: 100%; height: 380px; position: relative; overflow: hidden; border-radius: 12px; margin: 0 auto; }
.carousel-item { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 0.6rem; opacity: 0; transform: scale(.98); transition: opacity .28s, transform .28s; }
.carousel-item.active { opacity: 1; transform: none; }
.carousel-media { 
  width: 100%; 
  height: calc(100% - 56px); 
  object-fit: contain; /* Changed from cover to prevent cropping! */
  border-radius: 10px; 
  background: #000000; /* Pure black hides any letterboxing smoothly */
}
.carousel-caption { margin-top: 16px; color: var(--color-text-sm); font-size: 0.85rem; text-align: center; }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); border: none; color: var(--color-text); padding: 0.5rem 0.8rem; font-size: 1.5rem; border-radius: 6px; cursor: pointer; z-index: 10; }
.carousel-btn.prev { left: 12px; }
.carousel-btn.next { right: 12px; }
.carousel-btn:hover { background: rgba(255,255,255,0.2); }
.carousel-indicators { display: flex; gap: 8px; margin-top: 8px; justify-content: center; }
.indicator { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.12); border: none; cursor: pointer; }
.indicator.active { background: var(--color-prof); }

/* Scroll Down */
.scroll-down { margin-top: 1.5rem; display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.scroll-down span { width: 2px; height: 36px; background: var(--color-prof); margin-bottom: 0.5rem; animation: bounce 2s infinite; }
.scroll-down p { color: var(--color-prof); font-size: 0.85rem; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* Projects */
#projects { padding: 2rem 1rem; }
#projects h3, #background h3 { font-size: 2rem; color: var(--color-accent); text-align: center; margin-bottom: 2.5rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; max-width: 1200px; margin: 0 auto; }
.project-card { background: var(--color-panel); border-radius: 8px; padding: 1rem; display: flex; flex-direction: column; box-shadow: 0 5px 15px rgba(0,0,0,0.5); border-left: 4px solid var(--color-prof); min-height: 550px; transition: transform 0.3s; cursor: pointer; }
.project-card:hover { transform: translateY(-8px); box-shadow: 0 12px 30px rgba(93, 250, 250, 0.2); }
.project-card h4 { color: var(--color-prof); margin-bottom: 1rem; font-size: 1.15rem; }
.project-visual, .slideshow-container { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 6px; overflow: hidden; position: relative; margin-bottom: 1rem;}
.project-visual video, .slide video { width: 100%; height: 100%; object-fit: cover; }
.project-description h5 { margin: 1rem 0 0.5rem; color: var(--color-text); font-size: 1rem; }
.project-description p, .project-description li { color: var(--color-text-sm); font-size: 0.9rem; line-height: 1.5; }
.project-description ul { padding-left: 1.2rem; }
.project-links { margin-top: auto; padding-top: 1rem; display: flex; gap: 1rem; }
.project-links a { color: var(--color-prof); text-decoration: none; padding: 0.5rem 1rem; border: 1px solid var(--color-prof); border-radius: 4px; transition: 0.2s; }
.project-links a:hover { background-color: var(--color-prof); color: var(--color-bg); }

/* Slideshow Controls */
.prev, .next { cursor: pointer; position: absolute; top: 50%; padding: 16px; margin-top: -22px; color: white; background-color: rgba(0,0,0,0.3); border-radius: 3px; font-weight: bold;}
.next { right: 0; }
.prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); }
.disabled-nav { opacity: 0.2; pointer-events: none; }
.fade { animation: fade 0.5s; }
@keyframes fade { from {opacity: .4} to {opacity: 1} }

/* Background */
#background { padding: 2rem 1rem 3rem; }
.background-columns { display: flex; flex-direction: column; gap: 2rem; max-width: 1200px; margin: 0 auto; }
@media (min-width: 992px) {
  .background-columns { flex-direction: row; }
  .background-columns .background-section { flex: 1 1 calc(50% - 1rem); }
}
.background-section h4 { font-size: 1.3rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--color-panel); padding-bottom: 0.5rem; }
.entry { margin-bottom: 2rem; }
.entry .content { background: var(--color-panel); border-radius: 8px; padding: 1rem; border-left: 4px solid transparent; transition: transform 0.2s; }
.entry .content:hover { transform: translateY(-4px); }
.entry.professional .content { border-left-color: var(--color-prof); }
.entry.academic .content { border-left-color: var(--color-acad); }
.entry h5 { color: var(--color-text); font-size: 1.1rem; }
.entry-subtitle, .entry-location, .date { font-size: 0.9rem; color: var(--color-text-sm); }
.entry-location { font-style: italic; margin-bottom: 0.5rem; display: block; }
.entry ul { padding-left: 1.2rem; margin-top: 0.5rem; }
.entry li { color: var(--color-text-sm); font-size: 0.95rem; margin-bottom: 0.4rem; }

/* Technical Details Page */
#technical-details { padding: 4rem 1rem; }
#technical-details .container { max-width: 960px; margin: 0 auto; background: var(--color-panel); padding: 2rem; border-radius: 8px; border-left: 4px solid var(--color-accent); }
.video-figure { margin: 2rem 0; border-radius: 6px; overflow: hidden; width: 100%; aspect-ratio: 16/9; }
.video-figure video { width: 100%; height: 100%; object-fit: cover; }
.gif-gallery { display: flex; flex-direction: column; gap: 2.5rem; margin: 2.5rem 0; }
.gif-figure { background: var(--color-bg); border-radius: 10px; padding: 1.5rem; max-width: 700px; margin: 0 auto; width: 100%; }
.gif-figure img, .gif-figure video { width: 100%; border-radius: 6px; margin-bottom: 1rem; }
.gif-figure figcaption { color: var(--color-text); font-size: 1rem; }
.gif-figure figcaption strong { color: var(--color-prof); display: block; margin-bottom: 0.5rem; }

/* Footer */
footer { padding: 2rem 1rem; text-align: center; background: var(--color-nav); border-top: 1px solid var(--color-panel); color: var(--color-text-sm); }

/* Mobile Navigation */
.menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; z-index: 1100; }
.menu-toggle span { display: block; width: 25px; height: 3px; background-color: var(--color-text); margin: 5px 0; transition: 0.3s; }

@media (max-width: 900px) {
  .hero-main { grid-template-columns: 1fr; }
  .hero-name { font-size: 2.2rem; }
  .hero-title { font-size: 1.1rem; }
  .hero-desc { font-size: 1rem; }
  .carousel-track { max-width: 400px; height: 300px; }
  .menu-toggle { display: block; }
  .nav-links { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(19, 21, 35, 0.98); flex-direction: column; align-items: center; justify-content: center; transform: translateX(100%); transition: 0.3s; z-index: 1050; }
  nav.nav-active .nav-links { transform: translateX(0); }
  nav.nav-active .menu-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  nav.nav-active .menu-toggle span:nth-child(2) { opacity: 0; }
  nav.nav-active .menu-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}