/* CSS Customizations & Micro-Animations */

@layer utilities {
  html {
    scroll-behavior: smooth;
  }

  /* Custom Scrollbar */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-track {
    background: #090d16;
  }
  ::-webkit-scrollbar-thumb {
    background: #1e293b;
    border-radius: 9999px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #334155;
  }
}

/* Navlink Active State */
.navlink.active {
  color: #4ade80 !important;
  background-color: rgba(30, 41, 59, 0.8) !important;
}

.navlink.active span:first-child {
  transform: scale(1.15);
}

/* Checklist Checked State */
.vitem.checked {
  border-color: rgba(34, 197, 94, 0.35) !important;
  background-color: rgba(15, 23, 42, 0.95) !important;
}

.vitem.checked label span:first-child {
  text-decoration: line-through;
  color: #64748b !important;
}

/* Terminal Line Typing */
.term-line {
  line-height: 1.5;
}

.cursor-blink {
  display: inline-block;
  width: 8px;
  height: 15px;
  background-color: #4ade80;
  vertical-align: middle;
  animation: blink 1s steps(2, start) infinite;
}

@keyframes blink {
  to {
    visibility: hidden;
  }
}

/* Toast Notifications */
.toast-msg {
  animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}