/* base-animations.css
   Moved from inline <style> in base.html
*/

/* Fade in down */
@keyframes fade-in-down {
  0% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-down {
  animation: fade-in-down 0.8s ease-out forwards;
}

/* Simple delay helpers */
.animate-delay-200 { animation-delay: 0.2s; }
.animate-delay-400 { animation-delay: 0.4s; }

/* (Optional) Gradient animation if you want animated header bg
   — add class "animate-gradient" which you already use on header.
*/
@keyframes gradient-pan {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.animate-gradient {
  background-size: 200% 200%;
  animation: gradient-pan 8s ease infinite;
}

/* Hero rotating word */
.hero-locked-phrase {
  display: inline-flex;
  align-items: baseline;
  column-gap: 0.35em;
  white-space: nowrap;
}

.hero-rotating-line {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  column-gap: 0.25em;
}

.hero-rotating-wrapper {
  display: inline-grid;
  position: relative;
  justify-items: center;
}

.hero-rotating-wrapper::after {
  content: attr(data-widest);
  grid-area: 1 / 1;
  padding: 0 0.15em;
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
}

.hero-rotating-word {
  grid-area: 1 / 1;
  display: inline-block;
  padding: 0 0.15em;
  text-align: center;
}

.hero-progress-word {
  display: inline-block;
}

@media (max-width: 640px) {
  .hero-locked-phrase,
  .hero-rotating-line {
    white-space: normal;
    flex-wrap: wrap;
    row-gap: 0.2em;
  }
}

.hero-rotating-word--in {
  animation: hero-word-in 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.hero-rotating-word--out {
  animation: hero-word-out 0.24s ease forwards;
}

@keyframes hero-word-in {
  0% {
    opacity: 0;
    transform: translateY(-0.6em) scale(1.04);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes hero-word-out {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translateY(0.4em) scale(0.96);
    filter: blur(4px);
  }
}