/* ─── Keyframes ───────────────────────────── */

@keyframes portraitEntrance {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes heroTextEntrance {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes typing {
  from { max-width: 0; }
  to   { max-width: 100%; }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes blink {
  0%,50%       { border-color: var(--ink); }
  50.01%,100%  { border-color: transparent; }
}

.typewriter {
  max-width: 0;
  border-right: 0 solid var(--ink);
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: auto;
  align-self: flex-start;
}
.typewriter.active {
  animation:
    typing var(--typing-duration, 2s) steps(var(--chars, 8), end) var(--typing-delay, 0s) forwards,
    blink var(--cursor-blink, 0.8s) step-end infinite calc(var(--typing-duration, 2s) + var(--typing-delay, 0s));
  border-right-width: 3px;
  word-break: break-word;
}
.typewriter.no-cursor.active {
  border-right-width: 0;
  animation: typing var(--typing-duration, 2s) steps(var(--chars, 8), end) var(--typing-delay, 0s) forwards;
}
.fade-in {
  opacity: 0;
  animation: fadeIn 2s ease forwards;
}

/* ─── Mobile ──────────────────────────────── */