.container {
  position: relative;
  text-align: center;
}

.text {
  font-size: 8rem;
  color: #001f63;
  letter-spacing: 4px;
  position: relative;
  white-space: nowrap;
}

/* Ink effect */
.text::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 0, 0, 0.18), transparent 35%),
    radial-gradient(circle at 80% 40%, rgba(0, 0, 0, 0.12), transparent 35%),
    radial-gradient(circle at 50% 80%, rgba(0, 0, 0, 0.08), transparent 30%);
  mix-blend-mode: multiply;
  opacity: 0.45;
  pointer-events: none;
  animation: inkMove 5s ease-in-out infinite alternate;
}

@keyframes inkMove {
  from {
    transform: translateX(-3px) translateY(2px);
  }
  to {
    transform: translateX(3px) translateY(-2px);
  }
}

.cursor {
  display: inline-block;
  width: 4px;
  height: 90px;
  background: #001f63;
  margin-left: 8px;
  animation: blink 0.8s infinite;
  vertical-align: middle;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* Ink splash background */
.ink-bg {
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(
    circle,
    rgba(0, 31, 99, 0.08) 0%,
    transparent 70%
  );
  filter: blur(20px);
  z-index: -1;
  animation: floatInk 8s ease-in-out infinite alternate;
}

@keyframes floatInk {
  from {
    transform: scale(1) rotate(0deg);
  }
  to {
    transform: scale(1.1) rotate(10deg);
  }
}

@media (max-width: 768px) {
  .text {
    font-size: 4rem;
  }

  .cursor {
    height: 45px;
  }
}