/* ==========================================================================
   BLACK VERSIONS — animations.css
   Keyframes bv* copiados del sistema de Claude Design, mas las clases de
   revelado por scroll que aplica main.js.
   ========================================================================== */

/* ==========================================================================
   1. KEYFRAMES
   ========================================================================== */

/* Reveal de linea de texto: sube desde fuera de su propia caja (mascara) */
@keyframes bvrise {
  from {
    opacity: 0;
    transform: translateY(115%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Rotacion lenta del starburst */
@keyframes bvspin {
  to {
    transform: rotate(360deg);
  }
}

/* Scanline vertical que recorre el hero */
@keyframes bvsweep {
  0% {
    transform: translateY(-20vh);
    opacity: 0;
  }
  12% {
    opacity: 0.55;
  }
  88% {
    opacity: 0.55;
  }
  100% {
    transform: translateY(120vh);
    opacity: 0;
  }
}

/* Scanline lenta a nivel de seccion */
@keyframes bvscanslow {
  0% {
    transform: translateY(-10%);
    opacity: 0;
  }
  15% {
    opacity: 0.4;
  }
  85% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(110%);
    opacity: 0;
  }
}

/* Marquee horizontal: el track lleva el contenido duplicado */
@keyframes bvmarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Marquee vertical del rail izquierdo */
@keyframes bvvert {
  from {
    transform: rotate(180deg) translateY(-50%);
  }
  to {
    transform: rotate(180deg) translateY(0);
  }
}

/* Flotacion sutil */
@keyframes bvfloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}

/* Pulso de los nodos sueltos del hero */
@keyframes bvpulse {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.25);
  }
}

/* Textura de grano */
@keyframes bvgrain {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-3%, 2%);
  }
  50% {
    transform: translate(2%, -3%);
  }
  75% {
    transform: translate(-2%, -2%);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* Linea del eyebrow del hero creciendo hasta 44px */
@keyframes bvwidth {
  from {
    width: 0;
  }
  to {
    width: 44px;
  }
}

/* ==========================================================================
   2. ENTRADA DEL HERO (sin observer: corre al cargar)
   ========================================================================== */

/* Cada linea del h1 va envuelta en una mascara con overflow hidden */
.rise-line {
  display: block;
  overflow: hidden;
}

.rise-line > span {
  display: block;
  animation: bvrise 1.1s cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.rise-line:nth-child(1) > span {
  animation-delay: 0.25s;
}
.rise-line:nth-child(2) > span {
  animation-delay: 0.38s;
}
.rise-line:nth-child(3) > span {
  animation-delay: 0.51s;
}
.rise-line:nth-child(4) > span {
  animation-delay: 0.64s;
}

/* Eyebrow del hero: la linea crece y el texto sube */
.eyebrow--hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
  overflow: hidden;
}

.eyebrow--hero::before {
  width: 0;
  margin-bottom: 0;
  animation: bvwidth 1s var(--ease) 0.1s both;
}

.eyebrow--hero span {
  white-space: nowrap;
  animation: bvrise 0.9s var(--ease) 0.18s both;
}

/* ==========================================================================
   3. REVELADO POR SCROLL
   main.js anade .vis cuando el elemento entra en pantalla y escalona el
   transition-delay entre hermanos.
   ========================================================================== */

.rv {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--t-reveal) var(--ease),
    transform var(--t-reveal) var(--ease);
}

/* Las tarjetas entran con una leve rotacion en perspectiva */
.rv--card {
  transform: perspective(900px) translateY(26px) rotateX(5deg);
  transform-origin: 50% 100%;
}

.rv.vis {
  opacity: 1;
  transform: none;
}

/* Revelado por mascara: el bloque se descubre de arriba a abajo */
.rv-mask {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.15s var(--ease-mask);
}

.rv-mask.vis {
  clip-path: inset(0 0 0 0);
}

/* ==========================================================================
   4. EFECTOS APLICADOS
   ========================================================================== */

/* Grano de pelicula sobre toda la pagina (lo inyecta effects.js) */
.grain {
  position: fixed;
  inset: -50%;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  animation: bvgrain 1.1s steps(4) infinite;
}

/* Scanline horizontal del hero */
.sweep-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--b-55), transparent);
  animation: bvsweep 11s linear infinite;
}

/* Scanline lenta de seccion */
.scanline {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 160px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.03), transparent);
  animation: bvscanslow 16s linear infinite;
}

.float {
  animation: bvfloat 6s ease-in-out infinite;
}

.pulse {
  animation: bvpulse 4.5s ease-in-out infinite;
}

/* ==========================================================================
   5. PREFERS-REDUCED-MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .rv,
  .rv--card {
    opacity: 1;
    transform: none;
  }

  .rv-mask {
    clip-path: none;
  }

  /* Las lineas del h1 viven dentro de una mascara: sin animacion hay que
     devolverlas a su sitio o quedan fuera de la caja y no se ven. */
  .rise-line > span,
  .eyebrow--hero span {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .eyebrow--hero::before {
    width: 44px;
    animation: none;
  }

  .grain,
  .sweep-line,
  .scanline {
    display: none;
  }
}