/* Blob animations for background */
.blob {
  position: absolute;
  background-color: rgba(248, 113, 113, 0.4); /* red-400 with opacity */
  border-radius: 50%;
  filter: blur(60px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.blob-1 {
  width: 40vw;
  height: 40vw;
  left: 30%;
  top: 40%;
  animation: blob-float-1 25s ease-in-out infinite alternate;
}

.blob-2 {
  width: 45vw;
  height: 45vw;
  left: 70%;
  top: 60%;
  animation: blob-float-2 30s ease-in-out infinite alternate;
}

@keyframes blob-float-1 {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  33% { transform: translate(-40%, -60%) rotate(15deg); }
  66% { transform: translate(-60%, -40%) rotate(-15deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg); }
}

@keyframes blob-float-2 {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  33% { transform: translate(-60%, -40%) rotate(-10deg); }
  66% { transform: translate(-40%, -60%) rotate(10deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg); }
}

/* Animation for new entries in history */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out forwards;
}

/* Animation for removing old entries */
@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; transform: translateY(10px); }
}

.animate-fade-out {
  animation: fade-out 0.5s ease-out forwards;
}

/* Typewriter animation */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes backspace {
  from { width: 100% }
  to { width: 0 }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #64748b }
}

/* Typewriter effect */
.typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid transparent;
  width: 0;
  animation: 
    typing 2.5s steps(40, end) forwards,
    blink-caret 0.75s step-end infinite;
}

.typewriter::after {
  content: '';
  display: inline-block;
  width: 0;
}

.typewriter.typed {
  border-right-color: #64748b;
}

.typewriter.deleting {
  animation: 
    backspace 1.5s steps(40, end) forwards,
    blink-caret 0.75s step-end infinite;
}

.fade-out {
  animation: fade-out 1.5s ease-out forwards;
}