/* ==========================================================================
   CHETAN KUMAR N K — CINEMATIC AI PORTFOLIO DESIGN SYSTEM
   Theme: Obsidian / Deep Burgundy / Crimson / Neon Magenta / Frosted Glass
   ========================================================================== */

:root {
  --bg-obsidian: #07070a;
  --bg-obsidian-subtle: #0d0d14;
  --bg-card: rgba(16, 16, 24, 0.7);
  --bg-card-hover: rgba(25, 25, 38, 0.85);
  
  --crimson: #e62e4c;
  --crimson-light: #ff4766;
  --crimson-glow: rgba(230, 46, 76, 0.35);
  
  --magenta: #d946ef;
  --magenta-light: #f472b6;
  --magenta-glow: rgba(217, 70, 239, 0.3);
  
  --burgundy: #1a0812;
  
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-subtle: #64748b;
  
  --border-glass: rgba(255, 255, 255, 0.08);
  --border-glass-hover: rgba(255, 71, 102, 0.35);
  
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* Base Reset & Smoothness */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg-obsidian);
  color: var(--text-main);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--bg-obsidian);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Typography Utility Classes */
.font-outfit { font-family: var(--font-heading); }
.font-sans { font-family: var(--font-body); }
.font-mono { font-family: var(--font-mono); }

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: var(--bg-obsidian);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--crimson);
}

.custom-scrollbar::-webkit-scrollbar {
  width: 5px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(230, 46, 76, 0.3);
  border-radius: 9999px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--crimson-light);
}

/* Custom Cursor (Desktop Only) */
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background: #ffffff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.08s ease-out, opacity 0.2s ease;
  box-shadow: 0 0 10px #ffffff, 0 0 20px var(--crimson-light);
}

.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(255, 71, 102, 0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.cursor-hover .cursor-ring {
  width: 56px;
  height: 56px;
  border-color: var(--magenta-light);
  background: rgba(217, 70, 239, 0.1);
}

@media (pointer: coarse), (hover: none) {
  .cursor-dot, .cursor-ring {
    display: none !important;
  }
}

/* Video Background Layering & Face Centering */
#video-bg-container {
  background-color: var(--bg-obsidian);
}

#bg-video-sharp {
  object-fit: cover;
  object-position: center 12%; /* Keep face and upper body prominently visible */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}

#bg-video-blur {
  object-fit: cover;
  object-position: center 20%;
}

@media (max-width: 768px) {
  #bg-video-sharp {
    object-position: center 8%;
  }
}

@media (min-width: 1440px) {
  #bg-video-sharp {
    object-position: center 10%;
  }
}

/* Dynamic Scroll Dimming for Readability */
body.scrolled-past-hero #bg-video-sharp {
  opacity: 0.35;
  filter: brightness(0.7) blur(2px);
}

body.scrolled-past-hero #bg-video-blur {
  opacity: 0.3;
}

body.scrolled-past-hero #hero-gradient-overlay {
  opacity: 0.95;
}

.text-glow {
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.2), 0 0 60px rgba(230, 46, 76, 0.35);
}

.shadow-glow {
  box-shadow: 0 0 25px rgba(230, 46, 76, 0.35), 0 0 50px rgba(217, 70, 239, 0.2);
}

/* Glassmorphism Styles */
.nav-glass {
  background: rgba(10, 10, 15, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.glass-card {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.glass-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-glass-hover);
  box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.7), 0 0 30px -10px var(--crimson-glow);
}

/* Navigation Links */
.nav-link {
  position: relative;
  transition: all 0.2s ease;
}

.nav-link:hover, .nav-link.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.nav-link.active {
  color: var(--crimson-light);
  border: 1px solid rgba(230, 46, 76, 0.3);
}

/* Skill Tags */
.skill-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s ease;
}

.skill-tag:hover {
  background: rgba(230, 46, 76, 0.15);
  border-color: rgba(230, 46, 76, 0.4);
  color: #ffffff;
  transform: translateY(-2px);
}

/* Tech Filter Buttons */
.tech-filter-btn {
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.25s ease;
}

.tech-filter-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.tech-filter-btn.active {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(230, 46, 76, 0.3), rgba(217, 70, 239, 0.3));
  border-color: var(--crimson);
  box-shadow: 0 0 15px var(--crimson-glow);
}

/* Preset Buttons for Cover Letter */
.preset-btn {
  padding: 0.45rem 0.75rem;
  border-radius: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.preset-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.07);
}

.preset-btn.active {
  color: #ffffff;
  background: rgba(230, 46, 76, 0.2);
  border-color: var(--crimson);
}

/* Growth Timeline Nodes */
.growth-node {
  position: relative;
  padding: 1.25rem;
  border-radius: 1.25rem;
  background: rgba(16, 16, 24, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s ease;
}

.growth-node:hover {
  border-color: rgba(230, 46, 76, 0.4);
  background: rgba(25, 25, 38, 0.8);
  transform: translateY(-4px);
}

/* Interactive Architecture Diagrams */
.arch-flow {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(7, 7, 10, 0.6);
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

@media (min-width: 768px) {
  .arch-flow-horizontal {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }
}

.arch-node {
  flex: 1;
  padding: 0.65rem 0.85rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #e2e8f0;
  transition: all 0.2s ease;
  position: relative;
}

.arch-node:hover {
  background: rgba(230, 46, 76, 0.15);
  border-color: var(--crimson);
  color: #ffffff;
}

.arch-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--crimson-light);
  font-size: 0.85rem;
  opacity: 0.7;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleUp {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

.animate-scale-up {
  animation: scaleUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Reduced Motion Optimization */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}