/* ============================================
   Custom Styles — Robby Aliasa Akbar Portfolio
   ============================================ */

/* ---------- Scrollbar (Webkit) ---------- */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #FAFAF7;
}

::-webkit-scrollbar-thumb {
  background: #D4D4D4;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #A3A3A3;
}

/* ---------- Reveal Animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Nav Link Active ---------- */
.nav-link.active {
  color: #D70000;
  position: relative;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #D70000;
}

/* ---------- Selection ---------- */
::selection {
  background: #CCFF00;
  color: #111111;
}

/* ---------- Chart (Experiment Visualization) ---------- */
.chart-card {
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.chart-svg {
  width: 100%;
  height: auto;
  display: block;
}

.chart-dot {
  cursor: pointer;
  transition: r 0.2s ease, stroke-width 0.2s ease;
}

.chart-dot:hover {
  r: 8;
  stroke-width: 3;
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .nav-link::after,
  a,
  button {
    transition: none;
  }
}