/* ========================================
   NEO-BRUTALISM PORTFOLIO — Custom Styles
   ======================================== */

/* --- Scrollbar --- */
::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
  background: #000;
}
::-webkit-scrollbar-thumb {
  background: #f2df0d;
  border: 2px solid #000;
}

/* --- Smooth Scroll --- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Space Grotesk', sans-serif;
  background-color: #ffffff;
  background-image: radial-gradient(#e5e5e5 1px, transparent 1px);
  background-size: 24px 24px;
}

/* --- Neo-Brutalism Utilities --- */
.neo-border {
  border: 4px solid #000000;
}

.neo-border-thin {
  border: 2px solid #000000;
}

.neo-border-3 {
  border: 3px solid #000000;
}

/* --- Dark Section Overrides --- */
.section-dark {
  background-color: #121212;
  color: #ffffff;
  background-image: none;
}

.section-dark .neo-border {
  border-color: #f2df0d;
}

.section-dark .neo-border-3 {
  border-color: #f2df0d;
}

/* --- Button Effects --- */
.neo-button-hover {
  transition: all 0.15s ease-in-out;
}

.neo-button-hover:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px 0px #000000;
}

.neo-button-hover:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px 0px #000000;
}

.neo-button-dark:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px 0px #f2df0d;
}

.neo-button-dark:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px 0px #f2df0d;
}

/* --- Card Hover Effects --- */
.neo-card-hover {
  transition: all 0.2s ease-in-out;
}

.neo-card-hover:hover {
  transform: translate(4px, 4px);
  box-shadow: 2px 2px 0px 0px #000000;
}

/* --- Section Transition --- */
.section-transition {
  transition: background-color 0.3s ease;
}

/* --- Timeline --- */
.timeline-line {
  width: 4px;
  background: #f2df0d;
}

/* --- Chart/SVG --- */
.grid-line {
  stroke: #374151;
  stroke-dasharray: 4;
}

/* --- Section Heading Line --- */
.heading-line {
  height: 4px;
  flex-grow: 1;
  background: #000000;
}

.section-dark .heading-line {
  background: #f2df0d;
}

/* --- Headline Stroke --- */
.headline-stroke {
  -webkit-text-stroke: 2px black;
}

/* --- Loader Animation (optional) --- */
@keyframes neo-pulse {
  0%, 100% { box-shadow: 4px 4px 0px 0px #f2df0d; }
  50% { box-shadow: 8px 8px 0px 0px #f2df0d; }
}

/* --- Scroll indicator --- */
@keyframes bounce-down {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

.scroll-indicator {
  animation: bounce-down 2s infinite;
}

/* --- Mobile Menu --- */
.mobile-menu {
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}

.mobile-menu.open {
  transform: translateX(0);
}