/* ==========================================================================
   NEW PORTFOLIO STYLES - David Pinheiro
   Design System with Electric Violet Accent (#8B5CF6)
   Light→Dark scroll transition
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS VARIABLES
   -------------------------------------------------------------------------- */
:root {
  /* Colors */
  --color-violet: #8B5CF6;
  --color-violet-light: #A78BFA;
  --color-violet-dark: #7C3AED;
  --color-violet-glow: rgba(139, 92, 246, 0.4);
  --color-violet-soft: rgba(139, 92, 246, 0.1);

  /* Light theme (default - for hero) */
  --bg: #FAFAFA;
  --bg-elevated: #FFFFFF;
  --bg-subtle: #F4F4F5;
  --text: #18181B;
  --text-muted: #52525B;
  --text-subtle: #71717A;
  --border: #E4E4E7;
  --border-hover: #D4D4D8;

  /* Accent */
  --accent: var(--color-violet);
  --accent-light: var(--color-violet-light);
  --accent-dark: var(--color-violet-dark);
  --accent-glow: var(--color-violet-glow);
  --accent-soft: rgba(139, 92, 246, 0.08);

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-section: clamp(4rem, 10vw, 7rem);

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Sizing */
  --container-max: 1200px;
  --sidebar-width: 40px;
  --nav-drawer-width: 280px;

  /* Effects */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 40px var(--accent-glow);

  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-theme: 500ms ease;

  /* Cohesive easing functions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --tr-fast: 0.2s var(--ease-out-expo);
  --tr-medium: 0.3s var(--ease-out-expo);
  --tr-slow: 0.5s var(--ease-out-expo);
}

/* Dark mode (triggered by scroll or manual) */
/* Dark mode (triggered by scroll or manual) */
html.scrolled-dark,
body.scrolled-dark {
  --bg: #09090B;
  --bg-elevated: #18181B;
  --bg-subtle: #27272A;
  --text: #FAFAFA;
  --text-muted: #A1A1AA;
  --text-subtle: #71717A;
  --border: #27272A;
  --border-hover: #3F3F46;
  --accent-soft: rgba(139, 92, 246, 0.18);
  --shadow-glow: 0 0 50px rgba(139, 92, 246, 0.5);
}

/* Orange mode (sunrise theme - full bright orange) */
/* Orange mode (sunrise theme - full bright orange) */
html.scrolled-orange,
body.scrolled-orange {
  --bg: #FF6A00;
  --bg-elevated: rgba(255, 255, 255, 0.2);
  --bg-subtle: rgba(255, 255, 255, 0.15);
  --text: #46146E;
  --text-muted: #5A1E8C;
  --text-subtle: #6B21A8;
  --border: rgba(70, 20, 110, 0.25);
  --border-hover: rgba(70, 20, 110, 0.4);
  --accent: #46146E;
  --accent-light: #6B21A8;
  --accent-dark: #3B1162;
  --accent-soft: rgba(70, 20, 110, 0.15);
  --accent-glow: rgba(70, 20, 110, 0.4);
  --shadow-glow: 0 8px 32px rgba(70, 20, 110, 0.25);
}

/* --------------------------------------------------------------------------
   RESET & BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-width: none;
  /* Firefox */
  /* Fallback to ensure white on load before variables/JS */
  background-color: #FAFAFA;
  background-color: var(--bg);
  transition: background-color 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

html::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Edge */
}

/* Force light mode background on mobile default to prevent dark flash */
@media (max-width: 768px) {
  html:not(.scrolled-dark):not(.scrolled-orange) {
    background-color: #FAFAFA !important;
  }
}

/* --------------------------------------------------------------------------
   MOBILE THEME STABILITY FIX
   Prevent dark mode flash on initial load by enforcing light mode CSS defaults
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  /* CRITICAL: Transparent body to show fixed background + html background (overscroll) */
  background-color: transparent !important;
  overflow-x: hidden;
  /* Disable transitions until JS confirms layout stability */
  transition: none;
}

/* Enable smooth theme transitions only after JS confirms layout stability */
html.theme-ready,
html.theme-ready body {
  transition:
    background 1.2s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 1.2s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.8s ease;
}

/* Apply CSS variable background only when in a theme state */
html.scrolled-dark,
html.scrolled-orange,
html.theme-ready {
  background-color: var(--bg);
}


/* Particles container */
#tsparticles {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Mobile: Ensure tsparticles canvas doesn't flash dark */
@media (max-width: 768px) {
  #tsparticles {
    /* Force white background behind particles on mobile */
    background-color: #FAFAFA;
  }

  html.scrolled-dark #tsparticles {
    background-color: #09090B;
  }

  html.scrolled-orange #tsparticles {
    background-color: #FF6A00;
  }
}

/* Starfield canvas (dark mode only) */
#starfield-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 0s 1s;
}


body.nav-open {
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--tr-fast);
}

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

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

ul,
ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* --------------------------------------------------------------------------
   ANIMATED GRADIENT BACKGROUND (subtle ambient glow)
   -------------------------------------------------------------------------- */
.gradient-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--bg);
  transition: background var(--transition-theme);
}

.gradient-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.25;
  animation: float 25s ease-in-out infinite;
  transition: opacity var(--transition-theme);
}

/* Light mode: very subtle blobs */
.gradient-blob--1 {
  width: 600px;
  height: 600px;
  background: linear-gradient(135deg, var(--color-violet) 0%, var(--color-violet-light) 100%);
  top: -200px;
  right: -100px;
  animation-delay: 0s;
}

.gradient-blob--2 {
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, var(--color-violet-light) 0%, #C4B5FD 100%);
  bottom: -150px;
  left: -100px;
  animation-delay: -7s;
}

.gradient-blob--3 {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, #DDD6FE 0%, var(--color-violet) 100%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: -14s;
  opacity: 0.15;
}

/* Dark mode: hide blobs for pure black background with starfield */
html.scrolled-dark .gradient-blob {
  opacity: 0;
}

html.scrolled-dark .gradient-blob--3 {
  opacity: 0;
}

@keyframes float {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  25% {
    transform: translate(30px, -30px) scale(1.05);
  }

  50% {
    transform: translate(-20px, 20px) scale(0.95);
  }

  75% {
    transform: translate(-30px, -20px) scale(1.02);
  }
}

/* Mobile: Reduce blob intensity to keep background white */
@media (max-width: 768px) {
  .gradient-bg {
    display: none !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gradient-blob {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

@media (max-width: 768px) {
  .container {
    padding: 0 var(--space-lg);
  }
}

main {
  position: relative;
  padding-left: calc(var(--sidebar-width) + var(--space-lg));
  padding-right: calc(var(--sidebar-width) + var(--space-lg));
}

@media (max-width: 768px) {
  main {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
}

/* --------------------------------------------------------------------------
   HAMBURGER MENU TOGGLE
   -------------------------------------------------------------------------- */
.menu-toggle {
  position: fixed;
  top: var(--space-lg);
  right: var(--space-lg);
  z-index: 1000;
  width: 48px;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transition:
    border-color var(--tr-fast),
    box-shadow var(--tr-fast),
    transform var(--tr-fast),
    background-color var(--transition-theme);
}

body.scrolled-dark .menu-toggle,
html.scrolled-dark .menu-toggle {
  background: rgba(24, 24, 27, 0.8);
}

.menu-toggle:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
  transform: scale(1.05);
}

.menu-toggle__bar {
  width: 20px;
  height: 2px;
  background: var(--text);
  border-radius: var(--radius-full);
  transition:
    transform var(--transition-fast),
    opacity var(--transition-fast),
    background-color var(--transition-theme);
}

/* Active state */
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* --------------------------------------------------------------------------
   NAVIGATION DRAWER - ENHANCED
   -------------------------------------------------------------------------- */
.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
  width: min(350px, 90vw);
  height: 100vh;
  padding: var(--space-2xl) var(--space-xl);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-left: 1px solid rgba(139, 92, 246, 0.1);
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.nav-drawer.is-open {
  transform: translateX(0);
}

body.scrolled-dark .nav-drawer,
html.scrolled-dark .nav-drawer {
  background: rgba(9, 9, 11, 0.92);
  border-left-color: rgba(139, 92, 246, 0.2);
}

body.scrolled-orange .nav-drawer,
html.scrolled-orange .nav-drawer {
  background: rgba(249, 115, 22, 0.95);
  border-left-color: rgba(88, 28, 135, 0.2);
}

@media (max-width: 768px) {
  .nav-drawer {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* Close button */
.nav-drawer__close {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-drawer__close:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  transform: rotate(90deg);
}

body.scrolled-orange .nav-drawer__close {
  border-color: rgba(70, 20, 110, 0.3);
  color: #46146E;
}

body.scrolled-orange .nav-drawer__close:hover {
  background: #46146E;
  border-color: #46146E;
  color: white;
}

/* Header */
.nav-drawer__header {
  margin-bottom: var(--space-2xl);
  padding-top: var(--space-xl);
}

.nav-drawer__name {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--space-xs);
}

.nav-drawer__tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-soft);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
}

body.scrolled-orange .nav-drawer__name {
  color: #46146E;
}

body.scrolled-orange .nav-drawer__tag {
  background: rgba(70, 20, 110, 0.15);
  color: #46146E;
}

/* Nav list */
.nav-drawer__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-xl) 0;
  flex: 1;
}

/* Nav items with stagger animation */
.nav-drawer__item {
  opacity: 0;
  transform: translateX(30px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
  transition-delay: calc(var(--i) * 0.08s);
}

.nav-drawer.is-open .nav-drawer__item {
  opacity: 1;
  transform: translateX(0);
}

/* Nav links */
.nav-drawer__link {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  text-decoration: none;
  color: var(--text);
  font-size: 1.15rem;
  font-weight: 500;
  position: relative;
  transition: all 0.3s ease;
}

.nav-drawer__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width var(--tr-medium);
}

.nav-drawer__link:hover {
  color: var(--accent);
  padding-left: var(--space-sm);
}

.nav-drawer__link:hover::after {
  width: 100%;
}

body.scrolled-orange .nav-drawer__link {
  color: #46146E;
}

body.scrolled-orange .nav-drawer__link:hover {
  color: #3B1162;
}

body.scrolled-orange .nav-drawer__link::after {
  background: #46146E;
}

/* Icon numbers */
.nav-drawer__icon {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
  opacity: 0.6;
  min-width: 24px;
}

body.scrolled-orange .nav-drawer__icon {
  color: #581C87;
}

/* Active state */
.nav-drawer__link.is-active {
  color: var(--accent);
}

.nav-drawer__link.is-active .nav-drawer__icon {
  opacity: 1;
}

.nav-drawer__link.is-active::after {
  width: 60%;
}

body.scrolled-orange .nav-drawer__link.is-active {
  color: #3B1162;
}

/* Pages section - GLASS EFFECT */
.nav-drawer__pages {
  margin: 0 calc(var(--space-xl) * -1) var(--space-lg);
  padding: var(--space-lg) var(--space-xl);
  background: rgba(139, 92, 246, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 0;
}

.nav-drawer__pages-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.nav-drawer__pages-label::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}

.nav-drawer__page-link {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-sm) 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: all 0.3s ease;
}

.nav-drawer__page-link::before {
  content: '→';
  font-size: 1.1rem;
  color: var(--accent);
  transition: transform 0.3s ease;
}

.nav-drawer__page-link:hover {
  color: white;
  background: var(--accent);
  border-color: var(--accent);
  transform: translateX(4px);
  box-shadow: 0 4px 15px var(--accent-glow);
}

.nav-drawer__page-link:hover::before {
  transform: translateX(4px);
}

/* Dark mode pages */
body.scrolled-dark .nav-drawer__pages {
  background: rgba(139, 92, 246, 0.1);
}

body.scrolled-dark .nav-drawer__page-link {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(139, 92, 246, 0.2);
}

body.scrolled-dark .nav-drawer__page-link:hover {
  background: var(--accent);
  border-color: var(--accent);
}

/* Orange mode pages */
body.scrolled-orange .nav-drawer__pages {
  background: rgba(70, 20, 110, 0.12);
}

body.scrolled-orange .nav-drawer__pages-label {
  color: #46146E;
}

body.scrolled-orange .nav-drawer__pages-label::before {
  background: #46146E;
}

body.scrolled-orange .nav-drawer__page-link {
  color: #46146E;
  background: rgba(255, 255, 255, 0.4);
  border-color: rgba(70, 20, 110, 0.3);
}

body.scrolled-orange .nav-drawer__page-link::before {
  color: #46146E;
}

body.scrolled-orange .nav-drawer__page-link:hover {
  color: white;
  background: #46146E;
  border-color: #46146E;
  box-shadow: 0 4px 15px rgba(70, 20, 110, 0.4);
}

/* Footer with language switcher */
.nav-drawer__footer {
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

.nav-drawer__lang {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.lang-separator {
  color: var(--text-muted);
  opacity: 0.5;
}

/* Overlay */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

.nav-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

/* Language Switch */
.lang-switch {
  display: flex;
  gap: var(--space-sm);
}

.lang-btn {
  padding: var(--space-sm) var(--space-md);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.lang-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.lang-btn[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

/* --------------------------------------------------------------------------
   SIDEBARS (dynamic visibility)
   -------------------------------------------------------------------------- */
.sidebar {
  position: fixed;
  bottom: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50px);
  transition:
    opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar--left {
  left: var(--space-xl);
}

.sidebar--right {
  right: var(--space-xl);
}

/* Sidebars appear when About section is visible */
body.sidebar-visible .sidebar {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Sidebars hide when contact section is visible - slide back up */
body.contact-visible .sidebar {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50px);
}

.sidebar__icon {
  color: var(--text-muted);
  font-size: 1.25rem;
  padding: var(--space-sm);
  transition:
    color var(--transition-fast),
    transform var(--transition-fast);
}

.sidebar__icon:hover {
  color: var(--accent);
  transform: translateY(-3px);
}

.sidebar__email {
  writing-mode: vertical-rl;
  font-size: 0.875rem;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: var(--space-md) var(--space-sm);
  transition:
    color var(--transition-fast),
    letter-spacing var(--transition-fast);
}

.sidebar__email:hover {
  color: var(--accent);
  letter-spacing: 0.08em;
}

.sidebar__line {
  width: 1px;
  height: 90px;
  background: var(--text-subtle);
}

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   TYPOGRAPHY & SECTIONS
   -------------------------------------------------------------------------- */
.section__kicker {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: var(--space-sm);
}

.section__title {
  font-size: clamp(2rem, 5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: var(--space-md);
  color: var(--text);
  transition: color var(--transition-theme);
}

.section__subtitle {
  font-size: 1.125rem;
  color: var(--text-muted);
  max-width: 600px;
  margin-bottom: var(--space-2xl);
}

/* --------------------------------------------------------------------------
   BUTTONS - FILL EFFECT ON HOVER
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.875rem 1.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 12px;
  overflow: hidden;
  transition:
    color 0.3s ease,
    transform 0.2s ease,
    box-shadow 0.3s ease,
    border-color 0s;
  z-index: 1;
  white-space: nowrap;
}

/* Pseudo-element for fill effect - diagonal from bottom-left */
.btn::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -10%;
  width: 150%;
  height: 200%;
  transform: translateX(-100%) rotate(20deg);
  transform-origin: bottom left;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.btn:hover::after {
  transform: translateX(0) rotate(0deg);
}

.btn:active {
  opacity: 0.9;
}

/* ===== PRIMARY BUTTON ===== */
.btn--primary {
  background: var(--accent);
  color: #fff;
  border: 2px solid var(--accent);
}

.btn--primary::after {
  background: #7C3AED;
}

.btn--primary:hover {
  color: #fff;
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.4);
}

/* Dark mode */
body.scrolled-dark .btn--primary {
  background: var(--accent);
  border-color: var(--accent);
}

body.scrolled-dark .btn--primary::after {
  background: #6D28D9;
}

body.scrolled-dark .btn--primary:hover {
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.5);
}

/* Orange mode */
body.scrolled-orange .btn--primary {
  background: #581C87;
  border-color: #581C87;
  color: #fff;
}

body.scrolled-orange .btn--primary::after {
  background: #3B0764;
}

body.scrolled-orange .btn--primary:hover {
  box-shadow: 0 8px 24px rgba(88, 28, 135, 0.5);
}

/* ===== SECONDARY BUTTON (OUTLINE) ===== */
.btn--secondary {
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
}

.btn--secondary::after {
  background: #FF6B2C;
}

.btn--secondary:hover {
  color: #fff;
  border-color: #FF6B2C;
  box-shadow: 0 8px 24px rgba(255, 107, 44, 0.35);
}

/* Dark mode */
body.scrolled-dark .btn--secondary {
  color: var(--accent);
  border-color: var(--accent);
}

body.scrolled-dark .btn--secondary::after {
  background: #FF6B2C;
}

body.scrolled-dark .btn--secondary:hover {
  color: #fff;
  border-color: #FF6B2C;
  box-shadow: 0 8px 24px rgba(255, 107, 44, 0.4);
}

/* Orange mode - secondary fills with orange/white */
body.scrolled-orange .btn--secondary {
  color: #46146E;
  border-color: #46146E;
  background: transparent;
}

body.scrolled-orange .btn--secondary::after {
  background: #FF6B2C;
}

body.scrolled-orange .btn--secondary:hover {
  color: #46146E;
  border-color: #FF6B2C;
  box-shadow: 0 8px 24px rgba(255, 107, 44, 0.4);
}

.btn--large {
  padding: var(--space-lg) var(--space-2xl);
  font-size: 1.125rem;
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   BADGES
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  font-size: 0.875rem;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  transition:
    background-color var(--tr-fast),
    border-color var(--tr-fast),
    color var(--tr-fast),
    transform var(--tr-fast);
}

.badge:hover {
  transform: scale(1.05);
}

.badge i {
  font-size: 0.75rem;
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   HERO SECTION
   -------------------------------------------------------------------------- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--space-4xl) 0;
}

.hero__kicker {
  font-size: 1rem;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: var(--space-lg);
}

.hero__title {
  font-size: clamp(2.5rem, 8vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-md);
}

/* Hero greeting "Hi, I'm" */
.hero__title>span:first-child {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}

/* Hero name "David Pinheiro" */
.hero__name {
  display: block;
  width: fit-content;
  position: relative;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0;
  transform: translateY(30px);
  animation: heroFadeIn 1s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards;
}

/* Gradient shine sweep effect */
.hero__name::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.8) 50%,
      transparent 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: -100% 0;
  animation: heroShine 3s ease-in-out 1.8s forwards;
}

@keyframes heroFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroShine {
  0% {
    background-position: -100% 0;
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  100% {
    background-position: 200% 0;
    opacity: 0;
  }
}

/* Subtle glow on name after animation */
.hero__name {
  text-shadow: 0 0 0 transparent;
  animation:
    heroFadeIn 1s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards,
    heroGlow 4s ease-in-out 2.5s infinite;
}

@keyframes heroGlow {

  0%,
  100% {
    filter: drop-shadow(0 0 0 transparent);
  }

  50% {
    filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.3));
  }
}

/* Dark mode glow */
body.scrolled-dark .hero__name {
  animation:
    heroFadeIn 1s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards,
    heroGlowDark 4s ease-in-out 2.5s infinite;
}

@keyframes heroGlowDark {

  0%,
  100% {
    filter: drop-shadow(0 0 0 transparent);
  }

  50% {
    filter: drop-shadow(0 0 30px rgba(139, 92, 246, 0.5));
  }
}

/* Orange mode */
body.scrolled-orange .hero__name {
  animation:
    heroFadeIn 1s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards,
    heroGlowOrange 4s ease-in-out 2.5s infinite;
}

@keyframes heroGlowOrange {

  0%,
  100% {
    filter: drop-shadow(0 0 0 transparent);
  }

  50% {
    filter: drop-shadow(0 0 20px rgba(70, 20, 110, 0.4));
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

  .hero__title>span:first-child,
  .hero__name {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .hero__name::after {
    display: none;
  }
}

.hero__tagline {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-lg);
}

/* Fix mobile jitter during text animation */
.hero__name {
  white-space: nowrap !important;
  /* Prevent line wrapping jitter */
}

@media (max-width: 768px) {

  /* Force fixed width on characters DURING animation to stop layout thrashing */
  /* Target the DATA-SCRAMBLE element, not the parent hero__name */
  [data-scramble]:not(.scramble-done) .shuffle-char:not(.space) {
    display: inline-block;
    width: 0.42em;
    /* Tighter to match 'i' and narrow chars better */
    /* Tighter, fixed width for stability */
    text-align: center;
  }
}

@media (max-width: 768px) {
  .hero__tagline {
    min-height: 3.4em;
    /* Prevent layout shift when typewriter deletes text */
  }
}

/* Typewriter Effect */
.typewriter-container {
  display: inline-block;
  min-height: 1.5em;
}

.typewriter-text {
  color: inherit;
}

.typewriter-cursor {
  color: var(--accent);
  font-weight: 300;
  animation: blink 1s infinite;
  margin-left: 2px;
}

@keyframes blink {

  0%,
  50% {
    opacity: 1;
  }

  51%,
  100% {
    opacity: 0;
  }
}

.hero__subtitle {
  font-size: 1.125rem;
  color: var(--text-muted);
  max-width: 600px;
  margin-bottom: var(--space-2xl);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* --------------------------------------------------------------------------
   ABOUT SECTION
   -------------------------------------------------------------------------- */
.about {
  padding: var(--space-section) 0;
}

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
}

@media (max-width: 900px) {
  .about__grid {
    grid-template-columns: 1fr;
  }
}

.about__content p {
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
}

.about__lead {
  font-size: 1.125rem;
  color: var(--text) !important;
  font-weight: 500;
}

.about__highlights {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.highlight-card {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.highlight-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius-md);
  font-size: 1.25rem;
  flex-shrink: 0;
}

.highlight-card__content h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.highlight-card__content p {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0;
}

/* --------------------------------------------------------------------------
   PROJECTS SECTION
   -------------------------------------------------------------------------- */
.projects {
  padding: var(--space-section) 0;
}

.projects__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
}

@media (max-width: 768px) {
  .projects__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   PROJECT CARDS - Premium Design with Mouse Tracking Glow
   ========================================================================== */

.project-card {
  --mouse-x: 50%;
  --mouse-y: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 4px 24px rgba(139, 92, 246, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Gradient border effect */
.project-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 2px;
  background: linear-gradient(135deg,
      rgba(139, 92, 246, 0.5) 0%,
      rgba(168, 85, 247, 0.3) 50%,
      rgba(139, 92, 246, 0.5) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}

.project-card:hover {
  transform: translateY(-8px);
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.15),
    0 8px 16px rgba(139, 92, 246, 0.1);
}

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

.project-card--coming-soon.aos-animate {
  opacity: 0.7;
}

.project-card--coming-soon:hover {
  opacity: 0.85;
  transform: translateY(-6px) scale(1.01);
}

/* Project Card Images */
.project-card__image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 200px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(168, 85, 247, 0.03) 100%);
  z-index: 2;
}

.project-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card:hover .project-card__image img {
  transform: scale(1.08);
}

.project-card__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,
      rgba(139, 92, 246, 0.1) 0%,
      rgba(168, 85, 247, 0.05) 100%);
}

.placeholder-icon {
  font-size: 3.5rem;
  opacity: 0.3;
  color: var(--accent);
  transition: all 0.4s ease;
}

.project-card:hover .placeholder-icon {
  opacity: 0.5;
  transform: scale(1.15);
}

/* Card Content */
.project-card__content {
  position: relative;
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Header with title + badge */
.project-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

/* Badges - Premium glass style */
.project-card__badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 5px;
  padding: 4px 10px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(168, 85, 247, 0.1) 100%);
  color: var(--accent);
  border-radius: var(--radius-full);
  border: 1px solid rgba(139, 92, 246, 0.2);
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.1);
  white-space: nowrap;
}

.project-card__badge i {
  font-size: 0.55rem;
}

.project-card__badge--award {
  background: linear-gradient(135deg,
      rgba(251, 191, 36, 0.25) 0%,
      rgba(245, 158, 11, 0.15) 100%);
  color: #B45309;
  border-color: rgba(251, 191, 36, 0.35);
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.15);
}

.project-card__badge--soon {
  background: rgba(100, 100, 120, 0.1);
  color: var(--text-muted);
  border-color: rgba(100, 100, 120, 0.2);
}

.project-card__badge--bootcamp,
.project-card__badge--published {
  background: linear-gradient(135deg,
      rgba(59, 130, 246, 0.2) 0%,
      rgba(37, 99, 235, 0.12) 100%);
  color: #1D4ED8;
  border-color: rgba(59, 130, 246, 0.3);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.12);
}

/* Title with gradient */
.project-card__title {
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0;
  background: linear-gradient(135deg, var(--text) 0%, #4a4a5a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.3s ease;
}

/* .project-card:hover .project-card__title {
  background: linear-gradient(135deg, #F97316 0%, #FB923C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
} */

/* Description */
.project-card__description {
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
  line-height: 1.7;
  font-size: 0.9rem;
  flex-grow: 1;
  /* Enforce 3 lines max for alignment */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tech Stack with glow on hover */
.project-card__stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-lg);
  min-height: 70px;
  /* Reserve space for 2 lines to align cards perfectly */
  align-content: flex-start;
}

.tech-tag {
  padding: 6px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(168, 85, 247, 0.05) 100%);
  color: var(--text-muted);
  border-radius: var(--radius-full);
  border: 1px solid rgba(139, 92, 246, 0.1);
  transition: all 0.3s ease;
}

.tech-tag:hover {
  background: linear-gradient(135deg,
      rgba(139, 92, 246, 0.15) 0%,
      rgba(168, 85, 247, 0.1) 100%);
  color: var(--accent);
  border-color: rgba(139, 92, 246, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15);
}

/* Links with animated underline */
.project-card__links,
.project-card__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(139, 92, 246, 0.1);
  margin-top: auto;
  /* Push to bottom for alignment */
}

.project-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
  position: relative;
  transition: all 0.3s ease;
}

.project-card__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), #a855f7);
  transition: width 0.3s ease;
}

.project-card__link:hover {
  color: #a855f7;
}

.project-card__link:hover::after {
  width: 100%;
}

/* Secondary link in clickable cards */
.project-card__link--secondary {
  position: relative;
  z-index: 10;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: rgba(139, 92, 246, 0.08);
  transition: all 0.3s ease;
}

.project-card__link--secondary:hover {
  background: rgba(139, 92, 246, 0.15);
  color: #a855f7;
}

.project-card__link--secondary::after {
  display: none;
}

/* Disabled CTA for coming soon projects */
.project-card__cta--disabled {
  opacity: 0.5;
}

.project-card__cta--disabled .project-card__link {
  color: var(--text-muted);
  cursor: default;
}

.project-card__cta--disabled .project-card__link::after {
  display: none;
}

/* Clickable Project Cards */
.project-card--clickable {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.project-card--clickable:hover {
  transform: translateY(-10px);
}

.project-card--clickable:focus {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* Project Card Meta (timeline, commits) */
.project-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.project-card__timeline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  padding: 4px 10px;
  background: rgba(139, 92, 246, 0.06);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(139, 92, 246, 0.1);
}

.project-card__timeline i {
  font-size: 0.65rem;
  color: var(--accent);
}

.project-card__commits {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  padding: 4px 10px;
  background: rgba(59, 130, 246, 0.06);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(59, 130, 246, 0.1);
}

.project-card__commits i {
  font-size: 0.65rem;
  color: #3b82f6;
}

/* Project Card CTA */
.project-card__cta {
  padding-top: var(--space-md);
  border-top: 1px solid rgba(139, 92, 246, 0.1);
}

.project-card__cta .project-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
  transition: all 0.3s ease;
}

.project-card__cta .project-card__link i:last-child {
  transition: transform 0.3s ease;
}

.project-card--clickable:hover .project-card__cta .project-card__link {
  color: #a855f7;
}

.project-card--clickable:hover .project-card__cta .project-card__link i:last-child {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   TECH STACK SECTION
   -------------------------------------------------------------------------- */
.techstack {
  padding: var(--space-section) 0;
}

/* Infinite Marquee */
.marquee {
  width: 100%;
  overflow: hidden;
  margin: var(--space-2xl) 0;
  padding: var(--space-xl) 0;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition:
    background-color var(--transition-theme),
    border-color var(--transition-theme);
}

.marquee__track {
  display: flex;
  width: fit-content;
  animation: marquee 30s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__content {
  display: flex;
  gap: var(--space-3xl);
  padding: 0 var(--space-xl);
}

.tech-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 80px;
}

.tech-item i {
  font-size: 2.5rem;
  line-height: 1;
  color: var(--text-muted);
  transition: color var(--transition-fast);
}

.tech-item:hover i {
  color: var(--accent);
}

.tech-item span {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
}

/* Learning Section */
.techstack__learning {
  text-align: center;
  margin-top: var(--space-2xl);
}

.techstack__learning h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
}

.techstack__learning-items {
  display: flex;
  justify-content: center;
  gap: var(--space-2xl);
}

.tech-item--learning {
  padding: var(--space-lg);
  background: var(--accent-soft);
  border-radius: var(--radius-md);
  border: 1px dashed var(--accent);
}

.tech-item--learning i {
  color: var(--accent);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   CREATIVE SECTION
   -------------------------------------------------------------------------- */
.creative {
  padding: var(--space-section) 0;
}

.creative__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
}

@media (max-width: 768px) {
  .creative__grid {
    grid-template-columns: 1fr;
  }
}

.creative-card {
  position: relative;
  min-height: 300px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.creative-card--photo {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.creative-card--music {
  background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%);
}

.creative-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 100%);
  transition: all var(--transition-normal);
}

.creative-card:hover .creative-card__overlay {
  background: linear-gradient(to top, rgba(139, 92, 246, 0.8) 0%, rgba(139, 92, 246, 0.3) 100%);
}

.creative-card__content {
  position: relative;
  z-index: 1;
  padding: var(--space-xl);
  color: white;
}

.creative-card__content i {
  font-size: 2rem;
  margin-bottom: var(--space-md);
  opacity: 0.8;
}

.creative-card__content h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.creative-card__content p {
  font-size: 0.95rem;
  opacity: 0.8;
  margin-bottom: var(--space-md);
}

.creative-card__tools {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.creative-card:hover .creative-card__tools {
  opacity: 1;
}

.tool-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: rgba(255, 255, 255, 0.85);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.tool-icon svg {
  width: 20px;
  height: 20px;
}

.tool-icon span {
  font-size: 0.65rem;
  font-weight: 500;
  white-space: nowrap;
}

.tool-icon:hover {
  color: #fff;
  transform: scale(1.05);
}

.creative-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.875rem;
  font-weight: 600;
  color: white;
  opacity: 0;
  transform: translateY(10px);
  transition: all var(--transition-fast);
}

.creative-card:hover .creative-card__cta {
  opacity: 1;
  transform: translateY(0);
}

.creative-card__link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

.creative-card__link:hover {
  color: #fff;
}

/* --------------------------------------------------------------------------
   CONTACT SECTION
   -------------------------------------------------------------------------- */
.contact {
  padding: var(--space-section) 0;
  text-align: center;
}

.contact .section__subtitle {
  margin-left: auto;
  margin-right: auto;
}

.contact__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xl);
}

.contact__info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xl);
}

.contact__info p {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--text-muted);
}

.contact__info i {
  color: var(--accent);
}

.contact__social {
  display: flex;
  gap: var(--space-lg);
}

.contact__social a {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.contact__social a:hover {
  color: white;
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.footer {
  padding: var(--space-2xl) 0;
  text-align: center;
  border-top: 1px solid var(--border);
  transition:
    border-color var(--transition-theme),
    background-color var(--transition-theme);
}

.footer p {
  color: var(--text-muted);
  font-size: 0.875rem;
}

.footer__legal {
  margin-top: var(--space-sm);
  font-size: 0.8rem !important;
  color: var(--text-subtle) !important;
}

/* --------------------------------------------------------------------------
   ORANGE THEME OVERRIDES
   -------------------------------------------------------------------------- */
/* ORANGE THEME OVERRIDES */
html.scrolled-orange,
body.scrolled-orange {
  background: #FF6A00;
  /* Ensure background-image is set on both if needed for desktop,
     but we must force body to likely be transparent or override */
}

/*
   CRITICAL: For correct mobile transparency (particles), body MUST be transparent.
   But for Desktop, we might want the gradient on body if html fails.
   Let's prioritize the "transparent body" rule generally,
   and trust html to handle the color.

   However, allow body to have the gradient IF it doesn't break particles?
   No, body gradient covers particles (z-index -1).
   So body MUST be transparent or have NO background-image.
*/
body.scrolled-orange {
  background: transparent !important;
}

/* Ensure html actually shows the gradient when body is transparent */
html.scrolled-orange {
  background: #FF6A00;
}

body.scrolled-orange .gradient-blob {
  opacity: 0.15;
}

body.scrolled-orange .gradient-blob--1 {
  background: linear-gradient(135deg, #46146E 0%, #6B21A8 100%);
}

body.scrolled-orange .gradient-blob--2 {
  background: linear-gradient(135deg, #5A1E8C 0%, #46146E 100%);
}

body.scrolled-orange .menu-toggle {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
}

body.scrolled-orange .menu-toggle__bar {
  background: #46146E;
}

body.scrolled-orange .nav-drawer {
  background: rgba(255, 160, 70, 0.95);
}

body.scrolled-orange .nav-drawer__link {
  color: #46146E;
}

body.scrolled-orange .nav-drawer__link:hover {
  background: rgba(70, 20, 110, 0.1);
}

body.scrolled-orange .sidebar__icon,
body.scrolled-orange .sidebar__email {
  color: #46146E;
}

body.scrolled-orange .sidebar__icon:hover,
body.scrolled-orange .sidebar__email:hover {
  color: #3B1162;
}

body.scrolled-orange .sidebar__line {
  background: #46146E;
}

body.scrolled-orange .highlight-card {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, 0.25);
}

body.scrolled-orange .highlight-card:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(70, 20, 110, 0.4);
}

/* Orange mode project cards - Premium styling */
body.scrolled-orange .project-card {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px);
  border-color: rgba(70, 20, 110, 0.2);
  box-shadow:
    0 4px 24px rgba(70, 20, 110, 0.1),
    0 0 20px rgba(70, 20, 110, 0.05);
}

body.scrolled-orange .project-card::before {
  background: linear-gradient(135deg,
      rgba(70, 20, 110, 0.5) 0%,
      rgba(88, 28, 135, 0.3) 50%,
      rgba(70, 20, 110, 0.4) 100%);
}

body.scrolled-orange .project-card:hover {
  background: rgba(255, 255, 255, 0.35);
  border-color: rgba(70, 20, 110, 0.4);
  box-shadow:
    0 20px 40px rgba(70, 20, 110, 0.15),
    0 8px 16px rgba(70, 20, 110, 0.1);
}

body.scrolled-orange .project-card:hover .project-card__title {
  background: linear-gradient(135deg, #3B1162 0%, #581C87 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.scrolled-orange .highlight-card__icon {
  background: rgba(70, 20, 110, 0.2);
  color: #46146E;
}

body.scrolled-orange .tech-tag {
  background: rgba(70, 20, 110, 0.15);
  color: #46146E;
  border: 1px solid rgba(70, 20, 110, 0.3);
}

body.scrolled-orange .btn--primary {
  background: #1A0530;
  color: #FFF;
  box-shadow: 0 8px 24px rgba(26, 5, 48, 0.5);
}

body.scrolled-orange .btn--primary:hover {
  background: #2D0A4E;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(26, 5, 48, 0.6);
}

body.scrolled-orange .btn--secondary {
  border-color: #46146E;
  color: #46146E;
}

body.scrolled-orange .btn--secondary:hover {
  background: rgba(70, 20, 110, 0.1);
}

body.scrolled-orange .marquee {
  background: rgba(255, 255, 255, 0.35);
  border-color: rgba(70, 20, 110, 0.3);
  box-shadow: 0 4px 20px rgba(70, 20, 110, 0.15);
}

body.scrolled-orange .tech-item i {
  color: #1A0530;
}

body.scrolled-orange .tech-item span {
  color: #1A0530;
  font-weight: 600;
}

body.scrolled-orange .tech-item--learning {
  background: rgba(70, 20, 110, 0.15);
  border-color: #46146E;
}

/* Creative cards - better visibility on orange */
body.scrolled-orange .creative-card {
  box-shadow: 0 8px 32px rgba(70, 20, 110, 0.3);
  border: 1px solid rgba(70, 20, 110, 0.2);
}

body.scrolled-orange .creative-card--photo {
  background: linear-gradient(135deg, #2d1b4e 0%, #1e1338 100%);
}

body.scrolled-orange .creative-card--music {
  background: linear-gradient(135deg, #1e1338 0%, #2d1b4e 100%);
}

body.scrolled-orange .creative-card__overlay {
  background: linear-gradient(to top, rgba(70, 20, 110, 0.9) 0%, rgba(70, 20, 110, 0.3) 100%);
}

body.scrolled-orange .creative-card:hover .creative-card__overlay {
  background: linear-gradient(to top, rgba(70, 20, 110, 0.95) 0%, rgba(70, 20, 110, 0.5) 100%);
}

body.scrolled-orange .contact__social a {
  background: rgba(255, 255, 255, 0.4);
  border-color: rgba(26, 5, 48, 0.3);
  color: #1A0530;
}

body.scrolled-orange .contact__social a:hover {
  background: #1A0530;
  color: #FFF;
  border-color: #1A0530;
}

body.scrolled-orange .footer {
  background: rgba(70, 20, 110, 0.1);
  border-color: rgba(70, 20, 110, 0.2);
}

body.scrolled-orange .badge {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(70, 20, 110, 0.3);
  color: #46146E;
}

body.scrolled-orange .badge i {
  color: #46146E;
}

body.scrolled-orange .section__kicker {
  color: #2D0A4E;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.2);
}

body.scrolled-orange .section__title,
body.scrolled-orange .section__title .word,
body.scrolled-orange .section__title .letter {
  color: #1A0530 !important;
  -webkit-text-fill-color: #1A0530 !important;
  text-shadow: none;
}

body.scrolled-orange .section__subtitle {
  color: #2D0A4E;
}

body.scrolled-orange .project-card__badge {
  background: rgba(70, 20, 110, 0.2);
  color: #46146E;
}

body.scrolled-orange .project-card__badge--award {
  background: rgba(255, 255, 255, 0.35);
  color: #7C2D12;
}

body.scrolled-orange .project-card__badge--bootcamp {
  color: white;
}

body.scrolled-orange .project-card__badge--soon {
  color: white;
}

body.scrolled-orange .project-card__title {
  background: linear-gradient(135deg, #46146E 0%, #5A1E8C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.scrolled-orange .project-card__description {
  color: #5A1E8C;
}

body.scrolled-orange .project-card__link {
  color: #46146E;
}

body.scrolled-orange .project-card__link:hover {
  color: #3B1162;
}

body.scrolled-orange .highlight-card__content h3 {
  color: #46146E;
}

body.scrolled-orange .highlight-card__content p {
  color: #5A1E8C;
}

body.scrolled-orange .techstack__learning h3 {
  color: #1A0530;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.15);
}

body.scrolled-orange .contact__info p {
  color: #1A0530;
  font-weight: 500;
}

body.scrolled-orange .contact__info i {
  color: #3B1162;
}

body.scrolled-orange .footer p {
  color: #46146E;
}

body.scrolled-orange .footer__legal {
  color: #5A1E8C !important;
}

/* Theme transition smoothing */
.section__title,
.section__kicker,
.section__subtitle,
.highlight-card,
.project-card,
.tech-tag,
.btn,
.footer,
.sidebar__icon,
.sidebar__email,
.nav-drawer,
.menu-toggle,
.marquee,
.tech-item i,
.tech-item span,
.contact__social a,
.badge,
.gradient-blob {
  transition:
    background-color 1.2s cubic-bezier(0.4, 0, 0.2, 1),
    background 1.2s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.8s ease,
    border-color 0.6s ease,
    box-shadow 0.6s ease;
}

/* --------------------------------------------------------------------------
   AOS CUSTOM - STRONGER ANIMATIONS
   -------------------------------------------------------------------------- */

/* Base easing for all AOS animations */
[data-aos] {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fade right - starts further left for more visible movement */
[data-aos="fade-right"] {
  transform: translateX(-100px);
  opacity: 0;
}

[data-aos="fade-right"].aos-animate {
  transform: translateX(0);
  opacity: 1;
}

/* Fade left - starts further right */
[data-aos="fade-left"] {
  transform: translateX(100px);
  opacity: 0;
}

[data-aos="fade-left"].aos-animate {
  transform: translateX(0);
  opacity: 1;
}

/* Fade up - starts lower */
[data-aos="fade-up"] {
  transform: translateY(60px);
  opacity: 0;
}

[data-aos="fade-up"].aos-animate {
  transform: translateY(0);
  opacity: 1;
}

/* Zoom in - more dramatic scale */
[data-aos="zoom-in"] {
  transform: scale(0.8);
  opacity: 0;
}

[data-aos="zoom-in"].aos-animate {
  transform: scale(1);
  opacity: 1;
}

/* Reduced motion - disable AOS transforms */
@media (prefers-reduced-motion: reduce) {
  [data-aos] {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   RESPONSIVE ADJUSTMENTS
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  :root {
    --space-section: 3rem;
  }

  .hero {
    min-height: auto;
    padding: var(--space-3xl) 0;
  }

  .hero__actions {
    flex-direction: column;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .btn--large {
    padding: var(--space-md) var(--space-xl);
    font-size: 1rem;
  }
}

/* --------------------------------------------------------------------------
   CARDS HOVER - SMOOTH LIFT EFFECT (Project & Creative cards)
   -------------------------------------------------------------------------- */

.project-card,
.creative-card {
  transition:
    transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    border-color 0.3s ease,
    background-color var(--transition-theme);
}

/* After AOS animation completes, enable hover lift */
.creative-card.aos-animate:hover,
.creative-card:not([data-aos]):hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
  border-color: var(--accent);
}

/* Dark mode project cards - Premium styling */
body.scrolled-dark .project-card {
  background: rgba(20, 20, 25, 0.9);
  backdrop-filter: blur(20px);
  border-color: rgba(139, 92, 246, 0.2);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(139, 92, 246, 0.08);
}

body.scrolled-dark .project-card::before {
  background: linear-gradient(135deg,
      rgba(139, 92, 246, 0.6) 0%,
      rgba(168, 85, 247, 0.3) 50%,
      rgba(139, 92, 246, 0.5) 100%);
}

body.scrolled-dark .project-card:hover {
  border-color: rgba(139, 92, 246, 0.5);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.4),
    0 8px 16px rgba(139, 92, 246, 0.15);
}

body.scrolled-dark .project-card__image {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(168, 85, 247, 0.04) 100%);
}

body.scrolled-dark .project-card__title {
  background: linear-gradient(135deg, #FAFAFA 0%, #E4E4E7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.scrolled-dark .project-card:hover .project-card__title {
  background: linear-gradient(135deg, #F97316 0%, #FB923C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.scrolled-dark .project-card__badge {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(168, 85, 247, 0.2) 100%);
  border-color: rgba(139, 92, 246, 0.4);
  color: #FFFFFF;
}

body.scrolled-dark .tech-tag {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(168, 85, 247, 0.08) 100%);
  border-color: rgba(139, 92, 246, 0.2);
  color: rgba(255, 255, 255, 0.7);
}

body.scrolled-dark .tech-tag:hover {
  background: linear-gradient(135deg,
      rgba(139, 92, 246, 0.25) 0%,
      rgba(168, 85, 247, 0.18) 100%);
  border-color: rgba(139, 92, 246, 0.4);
  color: #a855f7;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}

body.scrolled-dark .project-card__links {
  border-top-color: rgba(139, 92, 246, 0.15);
}

body.scrolled-dark .project-card__link::after {
  background: linear-gradient(90deg, #a855f7, #c084fc);
}

/* Orange mode hover */
body.scrolled-orange .creative-card.aos-animate:hover {
  box-shadow: 0 16px 32px rgba(88, 28, 135, 0.15);
  border-color: #581C87;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

  .project-card,
  .creative-card {
    transition: none;
  }

  .project-card:hover,
  .creative-card:hover {
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   TILT EFFECT - HIGHLIGHT CARDS ONLY
   -------------------------------------------------------------------------- */

.highlight-card {
  transform-style: preserve-3d;
  transition:
    border-color 0.3s ease,
    background-color var(--transition-theme);
}

.highlight-card:hover {
  border-color: var(--accent);
}

.highlight-card .js-tilt-glare {
  border-radius: inherit;
  overflow: hidden;
}

/* Light mode glare */
.highlight-card .js-tilt-glare-inner {
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.35) 0%,
      rgba(255, 255, 255, 0) 60%) !important;
}

/* Dark mode glare */
body.scrolled-dark .highlight-card .js-tilt-glare-inner {
  background: linear-gradient(135deg,
      rgba(139, 92, 246, 0.25) 0%,
      rgba(139, 92, 246, 0) 60%) !important;
}

/* Orange mode glare */
body.scrolled-orange .highlight-card .js-tilt-glare-inner {
  background: linear-gradient(135deg,
      rgba(88, 28, 135, 0.25) 0%,
      rgba(88, 28, 135, 0) 60%) !important;
}

/* Disable tilt on mobile */
@media (max-width: 768px) {
  .highlight-card {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .highlight-card {
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   TEXT REVEAL ANIMATION
   -------------------------------------------------------------------------- */

.text-reveal-ready {
  overflow: hidden;
}

.text-reveal-ready .word {
  display: inline-block;
  overflow: hidden;
}

.text-reveal-ready .letter {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
  transition:
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.6s ease;
  transition-delay: calc(var(--word-index) * 0.1s + var(--letter-index) * 0.03s);
}

/* Revealed state */
.text-reveal-ready.text-revealed .letter {
  transform: translateY(0);
  opacity: 1;
}

/* Hero title - more dramatic */
.hero__title.text-reveal-ready .letter {
  transition-delay: calc(var(--word-index) * 0.15s + var(--letter-index) * 0.04s);
}

/* Section titles - faster */
.section__title.text-reveal-ready .letter {
  transition-delay: calc(var(--word-index) * 0.08s + var(--letter-index) * 0.02s);
}

/* Fallback for reduced motion */
@media (prefers-reduced-motion: reduce) {

  .text-reveal-ready .letter,
  .text-reveal-ready .word {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

/* Glow effect on revealed text */
.hero__title.text-revealed .letter {
  text-shadow: 0 0 0 transparent;
  animation: textGlow 2s ease-out forwards;
  animation-delay: calc(var(--word-index) * 0.15s + var(--letter-index) * 0.04s + 0.5s);
}

@keyframes textGlow {
  0% {
    text-shadow: 0 0 0 transparent;
  }

  50% {
    text-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
  }

  100% {
    text-shadow: 0 0 0 transparent;
  }
}

body.scrolled-dark .hero__title.text-revealed .letter {
  animation-name: textGlowDark;
}

@keyframes textGlowDark {
  0% {
    text-shadow: 0 0 0 transparent;
  }

  50% {
    text-shadow: 0 0 30px rgba(139, 92, 246, 0.6);
  }

  100% {
    text-shadow: 0 0 0 transparent;
  }
}

body.scrolled-orange .hero__title.text-revealed .letter {
  animation-name: textGlowOrange;
}

@keyframes textGlowOrange {
  0% {
    text-shadow: 0 0 0 transparent;
  }

  50% {
    text-shadow: 0 0 20px rgba(88, 28, 135, 0.4);
  }

  100% {
    text-shadow: 0 0 0 transparent;
  }
}

/* ==========================================================================
   COSMOS STYLE ENHANCEMENTS
   ========================================================================== */

/* --------------------------------------------------------------------------
   GRADIENT TEXT
   -------------------------------------------------------------------------- */
.gradient-text {
  background: linear-gradient(135deg, #8B5CF6 0%, #F97316 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Enhanced hero name gradient - violet to orange (only the name, not "Hi, I'm") */
.hero__name {
  background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 50%, #F59E0B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Section elements in dark mode */
body.scrolled-dark .section__kicker {
  color: #A78BFA !important;
}

body.scrolled-dark .section__title,
body.scrolled-dark .section__title .word,
body.scrolled-dark .section__title .letter {
  color: #FAFAFA !important;
  -webkit-text-fill-color: #FAFAFA !important;
}

body.scrolled-dark .section__subtitle {
  color: #A1A1AA !important;
}

/* Section titles gradient in orange mode - deep violet */
body.scrolled-orange .section__title {
  background: linear-gradient(135deg, #581C87 0%, #6B21A8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------------------------
   CUSTOM SCROLLBAR WITH GLOW
   -------------------------------------------------------------------------- */
html {
  scrollbar-width: thin;
  scrollbar-color: #8B5CF6 #18181B;
}

html::-webkit-scrollbar {
  display: block;
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary, #18181B);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: var(--accent, #8B5CF6);
  border: 2px solid var(--bg-secondary, #18181B);
  border-radius: 5px;
  transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: #A78BFA;
  box-shadow:
    0 0 8px #8B5CF6,
    0 0 16px #8B5CF6,
    0 0 24px #A78BFA,
    inset 0 0 8px rgba(255, 255, 255, 0.2);
  border-color: transparent;
}

::-webkit-scrollbar-thumb:active {
  background: #7C3AED;
  box-shadow:
    0 0 12px #8B5CF6,
    0 0 20px #8B5CF6,
    inset 0 0 10px rgba(255, 255, 255, 0.3);
}

/* Orange mode scrollbar */
body.scrolled-orange::-webkit-scrollbar-thumb {
  background: #581C87;
}

body.scrolled-orange::-webkit-scrollbar-thumb:hover {
  background: #6B21A8;
  box-shadow:
    0 0 8px #581C87,
    0 0 16px #581C87,
    0 0 24px #6B21A8;
}

body.scrolled-orange {
  scrollbar-color: #581C87 #FF6A00;
}

/* --------------------------------------------------------------------------
   DARK MODE BACKGROUND - PURE BLACK FOR STARFIELD
   -------------------------------------------------------------------------- */
body.scrolled-dark {
  /* background removed to allow transparency */
}

/* Hero blob disabled for pure black starfield background */
body.scrolled-dark .hero::before {
  display: none;
}

/* --------------------------------------------------------------------------
   FLOATING PARTICLES - COSMOS STARS STYLE
   -------------------------------------------------------------------------- */
.floating-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  transition: opacity 0.8s ease;
}

.particle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  animation: floatStar var(--duration) ease-in-out infinite;
  animation-delay: var(--delay);
}

/* Tiny stars - pure white */
.particle--tiny {
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
}

/* Small stars - white with light glow */
.particle--star {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.4);
}

/* Medium glow - subtle violet */
.particle--glow {
  background: radial-gradient(circle, rgba(167, 139, 250, 0.8) 0%, transparent 70%);
  box-shadow: 0 0 6px rgba(167, 139, 250, 0.6);
}

/* Accent particles - more visible violet */
.particle--accent {
  background: radial-gradient(circle, #8B5CF6 0%, transparent 70%);
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.5);
}

@keyframes floatStar {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-20px) scale(1.2);
  }
}

/* Light mode - very subtle particles */
.particle {
  opacity: 0.1;
  transition: opacity 1s ease, background 1s ease;
}

.particle--tiny {
  opacity: 0.08;
}

.particle--star {
  opacity: 0.1;
}

.particle--glow {
  opacity: 0.08;
}

.particle--accent {
  opacity: 0.1;
}

/* Dark mode - hide CSS particles, show starfield canvas instead */
body.scrolled-dark .floating-particles {
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

body.scrolled-dark #starfield-canvas {
  opacity: 1;
  visibility: visible;
  transition: opacity 1s ease, visibility 0s 0s;
}

/* Orange mode - deep violet particles */
body.scrolled-orange .particle--glow {
  background: radial-gradient(circle, rgba(88, 28, 135, 0.8) 0%, transparent 70%);
}

body.scrolled-orange .particle--accent {
  background: radial-gradient(circle, #581C87 0%, transparent 70%);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .particle {
    animation: none;
    opacity: 0.3;
  }

  body.scrolled-dark .hero::before {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   UNIVERSAL HOVER LIFT
   -------------------------------------------------------------------------- */
.hover-lift {
  transition: all 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-2px);
  color: var(--accent);
}

/* Apply to social links, nav links, footer links */
.sidebar a,
.nav-drawer__link,
.footer a {
  transition: all 0.3s ease;
}

.sidebar a:hover,
.footer a:hover {
  transform: translateY(-2px);
}

/* Badge hover lift */
.badge {
  transition:
    background-color var(--tr-fast),
    border-color var(--tr-fast),
    color var(--tr-fast),
    transform var(--tr-fast),
    box-shadow var(--tr-fast);
}

.badge:hover {
  transform: scale(1.05) translateY(-2px);
  box-shadow: 0 4px 12px var(--accent-glow);
}

/* ===== JELLY BLOB - Invert Effect on Hover ===== */
.jelly-blob {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-radius: 100px;
  pointer-events: none;
  z-index: 9998;
  backdrop-filter: invert(100%);
  -webkit-backdrop-filter: invert(100%);
  border: 2px solid rgba(255, 255, 255, 0.9);
  will-change: transform, width, height, opacity;
  opacity: 0;
  transition: opacity 0.15s ease;
}

@media (hover: none) and (pointer: coarse) {
  .jelly-blob {
    display: none !important;
  }
}

/* ===== CUSTOM CURSOR - Grosse boule glow ===== */
.custom-cursor {
  width: 20px;
  height: 20px;
  background: radial-gradient(circle at 30% 30%, rgb(200, 160, 255) 60%, rgb(168, 85, 247) 100%);
  border-radius: 50%;
  position: fixed;
  top: -10px;
  left: -10px;
  z-index: 99999;
  pointer-events: none;
  will-change: transform;
  backface-visibility: hidden;
  box-shadow:
    0 0 15px 5px rgba(255, 255, 255, 0.32),
    0 0 35px 12px rgba(255, 255, 255, 0.16),
    0 0 60px 20px rgba(255, 255, 255, 0.08),
    0 0 80px 30px rgba(168, 85, 247, 0.13);
  transition: opacity 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

/* Orange mode */
body.scrolled-orange .custom-cursor {
  background: radial-gradient(circle at 30% 30%, rgb(255, 200, 150) 60%, rgb(249, 115, 22) 100%);
  box-shadow:
    0 0 15px 5px rgba(255, 255, 255, 0.32),
    0 0 35px 12px rgba(255, 255, 255, 0.16),
    0 0 60px 20px rgba(255, 255, 255, 0.08),
    0 0 80px 30px rgba(249, 115, 22, 0.13);
}

/* Light mode */
body:not(.scrolled-dark):not(.scrolled-orange) .custom-cursor {
  background: radial-gradient(circle at 30% 30%, rgb(220, 180, 255) 60%, rgb(168, 85, 247) 100%);
  box-shadow:
    0 0 12px 4px rgba(168, 85, 247, 0.26),
    0 0 30px 10px rgba(168, 85, 247, 0.13),
    0 0 50px 18px rgba(168, 85, 247, 0.07);
}

/* Désactiver sur mobile */
@media (hover: none) and (pointer: coarse) {
  .custom-cursor {
    display: none !important;
  }
}

/* ==========================================================================
   ANIMATED GRADIENT TEXT - Hero Name
   ========================================================================== */
.hero__name.gradient-text-animated {
  background: linear-gradient(90deg,
      #7C3AED,
      #8B5CF6,
      #A855F7,
      #C026D3,
      #D946EF,
      #EC4899,
      #F43F5E,
      #EF4444,
      #F97316,
      #FB923C,
      #F59E0B,
      #FB923C,
      #F97316,
      #EF4444,
      #F43F5E,
      #EC4899,
      #D946EF,
      #C026D3,
      #A855F7,
      #8B5CF6,
      #7C3AED) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation:
    heroFadeIn 1s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards,
    gradient-flow 3s linear 1.6s infinite !important;
  filter: saturate(1.2) brightness(1.1);
}

/* Désactiver le pseudo-élément shine */
.hero__name.gradient-text-animated::after {
  display: none !important;
}

@keyframes gradient-flow {
  0% {
    background-position: 0% center;
  }

  100% {
    background-position: 200% center;
  }
}

/* Pause on hover */
.hero__name.gradient-text-animated:hover {
  animation-play-state: paused !important;
  filter: saturate(1.4) brightness(1.2) !important;
}

/* Version pour le mode orange */
body.scrolled-orange .hero__name.gradient-text-animated {
  background: linear-gradient(90deg,
      #D97706,
      #F59E0B,
      #FBBF24,
      #F97316,
      #FB923C,
      #A855F7,
      #C084FC,
      #A855F7,
      #FB923C,
      #F97316,
      #FBBF24,
      #F59E0B,
      #D97706) !important;
  background-size: 200% 100% !important;
}

/* Version dark mode */
body.scrolled-dark .hero__name.gradient-text-animated {
  background: linear-gradient(90deg,
      #A855F7,
      #C084FC,
      #D8B4FE,
      #E879F9,
      #F0ABFC,
      #FB923C,
      #FDBA74,
      #FB923C,
      #F0ABFC,
      #E879F9,
      #D8B4FE,
      #C084FC,
      #A855F7) !important;
  background-size: 200% 100% !important;
  filter: saturate(1.3) brightness(1.2);
}

body.scrolled-dark .hero__name.gradient-text-animated:hover {
  filter: saturate(1.5) brightness(1.3) !important;
}

/* ===== SCRAMBLE TEXT EFFECT ===== */
.shuffle-char {
  display: inline-block;
  transition: transform 0.1s ease-out, opacity 0.1s ease;
  will-change: transform, opacity;
  transform-origin: center center;
}

.shuffle-char.space {
  width: 0.25em;
}

/* Partie du nom sans scramble - copie le gradient */
.hero__name .no-scramble {
  background: linear-gradient(90deg,
      #7C3AED,
      #8B5CF6,
      #A855F7) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: gradient-flow 4s linear infinite !important;
}

.shuffle-char.revealed {
  animation: char-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes char-pop {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }

  100% {
    transform: scale(1);
  }
}