/* ==========================================================================
   Obsidian Indigo Digital - Portfolio Design System & Custom Cursor Effects
   ========================================================================== */

:root {
  /* Color Tokens */
  --bg-background: #0d0f10;
  --bg-surface: #111415;
  --bg-surface-dim: #111415;
  --bg-surface-bright: #373a3b;
  --bg-surface-lowest: #0a0c0d;
  --bg-surface-low: #151819;
  --bg-surface-container: #1b1e1f;
  --bg-surface-high: #242728;
  --bg-surface-highest: #2e3132;

  --color-primary: #6366f1;
  --color-primary-bright: #8083ff;
  --color-primary-dark: #001076;
  --color-primary-indigo: #001DDC;
  --color-primary-gradient: linear-gradient(135deg, #001076 0%, #001DDC 100%);
  --color-primary-gradient-hover: linear-gradient(135deg, #001494 0%, #1a33ff 100%);

  --color-on-surface: #e1e3e4;
  --color-on-surface-variant: #c7c4d7;
  --color-outline: #908fa0;
  --color-outline-variant: rgba(70, 69, 84, 0.4);

  /* Fonts */
  --font-display: 'Urbanist', 'Inter', sans-serif;
  --font-body: 'Urbanist', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Spacing */
  --container-max: 1280px;
  --section-gap: 140px;
  --gutter: 24px;

  /* Mouse spotlight position */
  --mouse-x: 50%;
  --mouse-y: 50%;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-background);
}
::-webkit-scrollbar-thumb {
  background: #242728;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #001DDC;
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg-background);
  color: var(--color-on-surface);
  font-family: var(--font-body);
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* ==========================================================================
   Custom Futuristic Glowing Mouse Cursor
   ========================================================================== */
#custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  background-color: #8083ff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.9);
  transition: transform 0.15s ease-out, background-color 0.2s ease, width 0.2s ease, height 0.2s ease;
  will-change: transform;
}

#custom-cursor-follower {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(0, 29, 220, 0.6);
  background-color: rgba(0, 29, 220, 0.08);
  backdrop-filter: blur(2px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), height 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, background-color 0.3s ease;
  will-change: transform;
}

/* Cursor Hover Active State */
#custom-cursor.cursor-active {
  width: 16px;
  height: 16px;
  background-color: #001DDC;
  box-shadow: 0 0 24px rgba(0, 29, 220, 1);
}

#custom-cursor-follower.cursor-active {
  width: 54px;
  height: 54px;
  border-color: rgba(128, 131, 255, 0.9);
  background-color: rgba(0, 29, 220, 0.2);
}

/* Hide default cursor on fine pointers if custom cursor is active */
@media (pointer: fine) {
  body {
    cursor: default;
  }
}

/* ==========================================================================
   Spotlight Cursor Effect
   ========================================================================== */
.spotlight-card {
  position: relative;
  background: rgba(27, 30, 31, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.spotlight-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: radial-gradient(
    600px circle at var(--mouse-x) var(--mouse-y),
    rgba(99, 102, 241, 0.25),
    transparent 40%
  );
  border-radius: inherit;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.spotlight-card:hover::before {
  opacity: 1;
}

.spotlight-card > * {
  position: relative;
  z-index: 1;
}

/* Glassmorphism Headers & Cards */
.glass-header {
  background: rgba(13, 15, 16, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.glass-card {
  background: rgba(27, 30, 31, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
  background: rgba(36, 39, 40, 0.85);
  border-color: rgba(0, 29, 220, 0.5);
  box-shadow: 0 14px 40px -10px rgba(0, 29, 220, 0.3);
  transform: translateY(-4px);
}

.glass-pill {
  background: rgba(46, 49, 50, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* 3D Tilt Card Container */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out;
}

/* Grid Background Line Pattern */
.bg-grid-pattern {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

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

.animate-fade-in-up {
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Floating Retention Bar Animation */
#floating-retention {
  transform: translateY(120px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  pointer-events: none;
}

#floating-retention.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Portfolio Filter Transition */
.portfolio-item {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio-item.hidden-item {
  display: none;
  opacity: 0;
  transform: scale(0.95);
}

/* Active Nav State */
nav a.active-link {
  color: var(--color-on-surface);
  position: relative;
}

nav a.active-link::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-primary-gradient);
  border-radius: 2px;
}

/* Modal styling */
.modal-backdrop {
  background: rgba(9, 11, 12, 0.85);
  backdrop-filter: blur(16px);
}