/* ============================================
   BEETUANNGHIA - Tailwind CSS Custom Overrides
   Only styles that Tailwind can't handle inline
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* --- Nav Link Underline Animation --- */
.navbar__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.navbar__link:hover::after,
.navbar__link.active::after {
  width: 100%;
}

/* --- Hero Greeting Line --- */
.hero__greeting::before {
  content: '';
  width: 40px;
  height: 2px;
  background: #888;
}
.dark .hero__greeting::before {
  background: #666;
}

/* --- Project Card Shimmer Effect --- */
.project-card__preview::after {
  content: '';
  position: absolute;
  inset: -120% auto auto -50%;
  width: 65%;
  height: 320%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transform: rotate(22deg);
  transition: transform 0.9s ease;
  pointer-events: none;
}
.dark .project-card__preview::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
}
.project-card:hover .project-card__preview::after {
  transform: translateX(180%) rotate(22deg);
}

/* --- Hamburger Animation --- */
.nav-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* --- Scroll Fade-In --- */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Icon Float --- */
@keyframes icon-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.icon-float {
  animation: icon-float 3.4s ease-in-out infinite;
}

/* --- Preview Modal --- */
.preview-modal {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.preview-modal.open {
  opacity: 1;
  pointer-events: auto;
}
.preview-modal__dialog {
  transform: translateY(14px) scale(0.98);
  transition: transform 0.28s ease;
}
.preview-modal.open .preview-modal__dialog {
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .icon-float { animation: none; }
  .fade-in, .project-card__preview::after, .preview-modal, .preview-modal__dialog {
    transition: none;
  }
}