/* karm.dev — Intro animation v2 (typing reveal) */

.intro-v2 {
  position: fixed; inset: 0;
  z-index: 9999;
  background: var(--bg-1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  transition: opacity 0.55s ease-in;
}
.intro-v2--fade { opacity: 0; pointer-events: none; }

.intro-v2__stage {
  display: flex;
  align-items: center;
  gap: 18px;
}

.intro-v2__mark {
  animation: markIn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  display: inline-flex;
}
@keyframes markIn {
  0%   { opacity: 0; transform: scale(0.5) rotate(-4deg); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

.intro-v2__k-path {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: kDraw 0.65s 0.25s cubic-bezier(0.6, 0, 0.3, 1) forwards;
}
@keyframes kDraw {
  to { stroke-dashoffset: 0; }
}

.intro-v2__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 72px;
  line-height: 1;
  letter-spacing: -2.5px;
  color: var(--fg-1);
  display: inline-flex;
  align-items: baseline;
  min-height: 72px;
}
html[data-theme="dark"] .intro-v2__wordmark { color: #F8FAFC; }

.intro-v2__char {
  display: inline-block;
  animation: charDrop 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.intro-v2__char.intro-v2__dot { color: var(--accent); }
@keyframes charDrop {
  0%   { opacity: 0; transform: translateY(-8px) scale(0.85); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.intro-v2__caret {
  display: inline-block;
  width: 5px;
  height: 58px;
  background: var(--accent);
  margin-left: 4px;
  align-self: center;
  animation: caretBlink 0.6s steps(2) infinite;
}
@keyframes caretBlink { 50% { opacity: 0.25; } }

.intro-v2__sub {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-3);
  letter-spacing: 0.5px;
  display: flex;
  gap: 10px;
  align-items: center;
  opacity: 0;
  animation: subIn 0.4s 0.9s ease-out forwards;
}
.intro-v2__sub-prompt { color: var(--accent); }
@keyframes subIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 0.85; transform: translateY(0); }
}

@media (max-width: 640px) {
  .intro-v2__wordmark { font-size: 48px; min-height: 48px; }
  .intro-v2__caret { height: 40px; }
  .intro-v2__mark svg { width: 80px; height: 80px; }
}