/* Hero glow and animations  */

.textile-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.6;
  pointer-events: none;
}

.textile-animation svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text-glow {
  text-shadow: 0 0 20px rgba(0, 229, 255, 0.4);
}

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

@keyframes heroReveal {
  0% {
    opacity: 0;
    filter: blur(16px);
    transform: translateY(40px) translateZ(0);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) translateZ(0);
  }
}

.hero-anim {
  opacity: 0;
  animation: heroReveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: opacity, transform, filter;
}

.hero-anim-1 {
  animation-delay: 0.1s;
}
.hero-anim-2 {
  animation-delay: 0.3s;
}
.hero-anim-3 {
  animation-delay: 0.5s;
}
.hero-anim-4 {
  animation-delay: 0.7s;
}

/* ------------------------------------------------------------------- */