/* ============================================
   PREMIUM DESIGN UPGRADE — 15 Improvements
   Sources: MotionSites, mblode, dhananjaym182, Dammyjay93
   ============================================ */

/* ============================================
   #5 — SEMANTIC COLOR TOKENS (surface hierarchy)
   ============================================ */
:root {
  --surface-0: #050505;
  --surface-1: #0a0a0a;
  --surface-2: #111111;
  --surface-3: #1a1a1a;
  --accent: #e63946;
  --accent-subtle: rgba(230, 57, 70, 0.08);
  --accent-muted: rgba(230, 57, 70, 0.15);
  --text-primary: #ffffff;
  --text-secondary: #b0b0b0;
  --text-muted: #888888;

  /* #4 — 4PX SPACING GRID */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* #9 — SHADOW ELEVATION SYSTEM */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 20px rgba(230, 57, 70, 0.05);

  /* #7 — BORDER RADIUS SCALE */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* #13 — TRANSITION TIMING SCALE */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-normal: 250ms;
  --dur-slow: 400ms;
  --dur-slower: 600ms;
}

/* ============================================
   #1 — GLASSMORPHISM PILL NAVBAR
   ============================================ */
#navbar.scrolled {
  background: rgba(10, 10, 10, 0.6) !important;
  backdrop-filter: blur(20px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
  border: 1px solid rgba(230, 57, 70, 0.08) !important;
  border-radius: var(--radius-full) !important;
  margin: 12px 24px !important;
  width: calc(100% - 48px) !important;
  left: 0 !important;
  padding: 12px 32px !important;
  box-shadow: var(--shadow-md) !important;
}

/* ============================================
   #2 — GRADIENT TEXT ON "THOMAS"
   ============================================ */
.title-accent {
  background: linear-gradient(135deg, #e63946 0%, #ff1744 50%, #e63946 100%) !important;
  background-size: 200% auto;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: gradientShift 4s ease infinite !important;
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

/* ============================================
   #3 — ANIMATED GRADIENT MESH BACKGROUND
   ============================================ */
#hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 40% 50% at 20% 50%, rgba(230, 57, 70, 0.06), transparent),
    radial-gradient(ellipse 30% 40% at 80% 30%, rgba(139, 0, 0, 0.05), transparent),
    radial-gradient(ellipse 50% 60% at 60% 80%, rgba(255, 107, 53, 0.03), transparent);
  animation: meshDrift 20s ease-in-out infinite alternate;
}
@keyframes meshDrift {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-20px, 10px) scale(1.02); }
  66% { transform: translate(15px, -15px) scale(0.98); }
  100% { transform: translate(-10px, 5px) scale(1.01); }
}

/* ============================================
   #6 — BADGE PILL (Social Proof in Hero)
   ============================================ */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: var(--accent-subtle);
  border: 1px solid rgba(230, 57, 70, 0.2);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-secondary);
  letter-spacing: 1px;
  margin-bottom: 20px;
  animation: badgeFloat 3s ease-in-out infinite;
}
.hero-badge::before {
  content: '✦';
  color: var(--accent);
}
@keyframes badgeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* ============================================
   #7 — SPOTLIGHT HOVER ON CARDS
   ============================================ */
.project-card,
.github-card,
.cert-card,
.skill-category {
  position: relative;
  overflow: hidden;
}
.project-card::before,
.github-card::before {
  content: '';
  position: absolute;
  top: var(--mouse-y, 50%);
  left: var(--mouse-x, 50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(230, 57, 70, 0.08), transparent 60%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-default);
  pointer-events: none;
  z-index: 0;
}
.project-card:hover::before,
.github-card:hover::before {
  opacity: 1;
}

/* ============================================
   #10 — LIQUID GLASS PRESENTER PANEL
   ============================================ */
#aron-presenter {
  background: rgba(5, 5, 5, 0.7) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
}
#presenter-stage {
  background: rgba(15, 15, 15, 0.5);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(230, 57, 70, 0.08);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
}

/* ============================================
   #12 — TYPE WEIGHT CONTRAST
   ============================================ */
.section-title {
  font-weight: 900 !important;
}
.project-title,
.github-card-title,
.cert-name {
  font-weight: 700 !important;
}
.narrative-text,
.project-desc,
.github-card-desc,
.exp-description {
  font-weight: 400 !important;
}
.section-number,
.project-number,
.tech-tag,
.cert-issuer,
.project-date {
  font-weight: 500 !important;
}

/* ============================================
   #11 — REDUCED MOTION FALLBACK
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-content { animation: none !important; }
  #three-canvas { display: none; }
  .title-accent { animation: none !important; }
}

/* ============================================
   #13 — CONSISTENT TRANSITION TIMING
   ============================================ */
.nav-link,
.btn-primary,
.project-card,
.github-card,
.cert-card,
.skill-item,
.contact-card,
.stat-card {
  transition-timing-function: var(--ease-default) !important;
  transition-duration: var(--dur-slow) !important;
}

/* ============================================
   #8 — STAGGERED REVEAL CURVE (exponential)
   Applied via JS — this is the base style
   ============================================ */
.stagger-item {
  opacity: 0;
  transform: translateY(20px);
}
.stagger-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   LENIS SMOOTH SCROLL STYLES
   ============================================ */
html.lenis, html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}

/* Velocity-based scroll effects */
body.scrolling-fast .section-title {
  letter-spacing: 8px;
  transition: letter-spacing 0.3s var(--ease-out);
}
body.scrolling-fast #three-canvas {
  filter: blur(1px);
  transition: filter 0.2s;
}
body:not(.scrolling-fast) #three-canvas {
  filter: blur(0);
  transition: filter 0.5s;
}