.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.typewriter-cursor::after {
  content: '|';
  animation: blink 1s step-end infinite;
}

.organic-shape {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

.organic-transition {
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

.organic-fade {
  animation: fade-in 1.2s ease-out both;
}

.hover-lift {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-8px);
}

.bg-mesh {
  background-color: #fbf9f5;
  background-image:
    radial-gradient(at 0% 0%, rgba(163, 173, 133, 0.08) 0, transparent 50%),
    radial-gradient(at 100% 100%, rgba(88, 99, 48, 0.08) 0, transparent 50%);
}

@keyframes blink {
  from,
  to {
    color: transparent;
  }

  50% {
    color: currentColor;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}