/* Vanto — Custom Styles (beyond Tailwind utilities) */

/* Self-hosted fonts — DSGVO compliant, no external requests */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/Inter-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
}

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

/* Selection color */
::selection {
  background-color: #2563EB;
  color: #FAFAFA;
}

/* Terminal syntax highlighting */
.token-tag { color: #F472B6; }
.token-attr { color: #A78BFA; }
.token-value { color: #34D399; }
.token-text { color: #D1D5DB; }
.token-comment { color: #4B5563; }
.token-bracket { color: #6B7280; }
.token-property { color: #67E8F9; }
.token-css-value { color: #FBBF24; }
.token-selector { color: #F472B6; }

/* Terminal cursor blink */
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

#terminal-cursor {
  animation: cursor-blink 0.8s ease-in-out infinite;
}

/* Lighthouse score counter */
@keyframes score-glow {
  0%, 100% { text-shadow: 0 0 8px rgba(52, 211, 153, 0.3); }
  50% { text-shadow: 0 0 16px rgba(52, 211, 153, 0.6); }
}

.score-active {
  animation: score-glow 2s ease-in-out infinite;
}

/* Scroll-triggered fade in */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #terminal-cursor { animation: none; opacity: 1; }
  .score-active { animation: none; }
  .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}