/* AskOut – main styles (animations & utilities) */

html {
  scroll-behavior: smooth;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

@keyframes morphing-blob {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
}

@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-50px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(50px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.text-change {
  display: inline;
  position: relative;
}

.text-change span {
  display: inline-block;
  position: relative;
  text-align: left;
}

.text-change span::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 0;
  height: 100%;
  width: 2px;
  background-color: currentColor;
  animation: blink 1s infinite;
  transition: right 0.05s ease;
}

.text-change span.typing::after,
.text-change span.deleting::after {
  animation: none;
  opacity: 1;
  right: -2px;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.animate-float { animation: float 6s ease-in-out infinite; }
.morphing-blob { animation: morphing-blob 8s ease-in-out infinite; }
.animate-slide-in-left { animation: slide-in-left 1s ease-out; }
.animate-slide-in-right { animation: slide-in-right 1s ease-out; }
.animate-fade-in { animation: fade-in 1s ease-out; }
.animate-scale-in { animation: scale-in 1s ease-out; }
.animate-spin-slow { animation: spin-slow 8s linear infinite; }

.interactive-hover { transition: all 0.3s ease; }
.interactive-hover:hover { transform: translateY(-2px); }
.card-3d { transition: transform 0.3s ease; }

.overflow-x-auto::-webkit-scrollbar {
  display: none;
}

@media (max-width: 1329px) {
  main {
    overflow-x: clip;
  }
}