/* =========================================================
   OTAKU SENPAI VERSE — Animations Layer
   Keyframes globais reutilizados por componentes e GSAP.
   ========================================================= */

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

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

@keyframes hairGlow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.1); }
}

@keyframes loadBar {
  to { width: 100%; }
}

@keyframes scrollX {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 93, 143, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(255, 93, 143, 0); }
}

/* SPRINT 002 — indicador de scroll do hero */
@keyframes scrollHint {
  0%   { transform: translateY(0);   opacity: 1; }
  70%  { opacity: 0.4; }
  100% { transform: translateY(14px); opacity: 0; }
}

.animate-scroll-hint {
  animation: scrollHint 1.8s ease-in-out infinite;
}

/* ---------------------------------------------------------
   Scroll reveal (controlado via JS: classe .in adicionada
   por IntersectionObserver em main.js)
   --------------------------------------------------------- */
.reveal-up {
  opacity: 0;
  transform: translateY(32px);
  filter: blur(6px);
  transition: opacity 0.9s var(--ease-standard),
              transform 0.9s var(--ease-standard),
              filter 0.9s var(--ease-standard);
}

.reveal-up.in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.marquee-track {
  display: flex;
  white-space: nowrap;
  animation: scrollX 30s linear infinite;
}

.marquee-mask {
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.blink {
  animation: blink 4s ease-in-out infinite;
}

.hair-glow {
  animation: hairGlow 2.6s ease-in-out infinite;
}