/* AITECH vanilla rewrite - styles that were previously in src/index.css */
:root { color-scheme: light; }

html { scroll-behavior: smooth; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; }

.blog-detail-content h1, .blog-detail-content h2, .blog-detail-content h3, .blog-detail-content h4 { font-weight: 700; color: #111827; }
.blog-detail-content p { margin: 0.9rem 0; line-height: 1.8; }
.blog-detail-content img { border-radius: 16px; margin: 1.25rem 0; }
.blog-detail-content a { text-decoration: underline; }

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Smooth scrolling + prettier scrollbars (from ref) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #9333ea; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #7c3aed; }

/* Navbar link active state */
.nav-link { color: rgba(255,255,255,.9); }
.nav-link.is-active { color: #fff; }
.nav-solid .nav-link { color: #111827; }
.nav-solid .nav-link.is-active { color: #7c3aed; }


/* -------------------------------------------------
   Hero SVG animations (works even when images are missing)
-------------------------------------------------- */
@keyframes heroDash {
  0% { stroke-dashoffset: 900; opacity: 0.45; }
  35% { opacity: 0.95; }
  100% { stroke-dashoffset: 0; opacity: 0.6; }
}
.hero-dash {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: heroDash 3.4s ease forwards;
}
.hero-dash-delay { animation-delay: .35s; }
.hero-dash-delay-2 { animation-delay: .7s; }

@keyframes heroFloat {
  0%, 100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,-10px,0); }
}
.hero-float { animation: heroFloat 4.5s ease-in-out infinite; }
.hero-float-slow { animation: heroFloat 7.5s ease-in-out infinite; }

@keyframes heroPulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(1.02); }
}
.hero-pulse { animation: heroPulse 4.8s ease-in-out infinite; }

@keyframes heroBlob {
  0%, 100% { transform: translate(0,0) scale(1); opacity: .45; }
  50% { transform: translate(16px,-10px) scale(1.05); opacity: .6; }
}
.hero-blob { animation: heroBlob 7s ease-in-out infinite; }
.hero-blob-1 { animation-delay: .2s; }
.hero-blob-2 { animation-delay: .8s; }

@keyframes heroNode {
  0%, 100% { transform: scale(1); opacity: .75; }
  50% { transform: scale(1.35); opacity: 1; }
}
.hero-node { transform-origin: center; animation: heroNode 2.8s ease-in-out infinite; }
.hero-node-2 { animation-delay: .25s; }
.hero-node-3 { animation-delay: .5s; }
.hero-node-4 { animation-delay: .75s; }
.hero-node-5 { animation-delay: 1s; }
.hero-node-6 { animation-delay: 1.25s; }