/* ===================================
   Yannick Steinmann — Design System
   Terminal meets human. Dark-first.
   =================================== */

/* ===================================
   Base
   =================================== */
html {
  scroll-behavior: smooth;
  /* 112.5% = 18px base on default browsers. Respects user preferences —
     if someone sets their browser to 20px, this becomes 22.5px.
     All Tailwind classes use rem, so everything scales proportionally. */
  font-size: 112.5%;
}

body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ===================================
   Blinking cursor animation
   =================================== */
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.cursor {
  animation: blink 1s step-end infinite;
  color: #F59E0B;
  font-weight: 400;
}

/* ===================================
   Link underline animation
   =================================== */
.link-underline {
  position: relative;
  text-decoration: none;
}

.link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1.5px;
  background-color: #F59E0B;
  transition: width 0.3s ease;
}

.link-underline:hover::after {
  width: 100%;
}

/* ===================================
   Fade-in on scroll animation
   =================================== */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

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

/* Stagger children */
.fade-in:nth-child(2) { transition-delay: 0.1s; }
.fade-in:nth-child(3) { transition-delay: 0.2s; }
.fade-in:nth-child(4) { transition-delay: 0.3s; }

/* ===================================
   Profile image glow
   =================================== */
.profile-glow {
  box-shadow: 0 0 60px rgba(245, 158, 11, 0.12), 0 0 120px rgba(245, 158, 11, 0.06);
}

/* ===================================
   Card hover effects
   =================================== */
.card {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
  border-color: rgba(245, 158, 11, 0.3);
  box-shadow: 0 4px 24px rgba(245, 158, 11, 0.06);
}

/* ===================================
   Section label (terminal style)
   =================================== */
.section-label {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #F59E0B;
}

/* ===================================
   Selection styling
   =================================== */
::selection {
  background-color: rgba(245, 158, 11, 0.2);
  color: inherit;
}

/* ===================================
   Focus styles
   =================================== */
:focus-visible {
  outline: 2px solid #F59E0B;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===================================
   Scrollbar styling
   =================================== */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

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

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

/* Light mode scrollbar */
:is(.light) ::-webkit-scrollbar-thumb {
  background: #ccc;
}

:is(.light) ::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}

/* ===================================
   Status badges
   =================================== */
.badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  letter-spacing: 0.03em;
}

.badge-live {
  background-color: rgba(34, 197, 94, 0.1);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.badge-building {
  background-color: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.badge-soon {
  background-color: rgba(115, 115, 115, 0.1);
  color: #737373;
  border: 1px solid rgba(115, 115, 115, 0.2);
}

/* ===================================
   Gradient text — subtle amber-to-gold shimmer
   Used on key headings and interactive elements
   =================================== */
.gradient-text {
  background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 40%, #FCD34D 60%, #F59E0B 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 8s ease infinite;
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Gradient on hover — for links and interactive elements */
.gradient-hover {
  transition: all 0.3s ease;
}

.gradient-hover:hover {
  background: linear-gradient(135deg, #F59E0B, #FBBF24, #FCD34D);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Subtle gradient border glow on cards */
.card:hover {
  border-image: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(252, 211, 77, 0.15), rgba(245, 158, 11, 0.3)) 1;
}

/* ===================================
   Nav active state
   =================================== */
.nav-link {
  position: relative;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: #F59E0B;
}

/* ===================================
   Print styles
   =================================== */
@media print {
  nav, #theme-toggle, #mobile-menu-btn {
    display: none !important;
  }

  body {
    background: white !important;
    color: black !important;
  }

  .fade-in {
    opacity: 1 !important;
    transform: none !important;
  }

  section {
    break-inside: avoid;
  }

  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: #666;
  }
}