/* ============================================================================
   VF-MOTION — la sección del fundador entra en escena, no aparece
   ----------------------------------------------------------------------------
   Reporte de Edwin (26-ago): esta sección "no termina de encantar" comparada
   con el resto del pulido. Diagnóstico: era la única del sitio donde casi todo
   aparecía PLANO — solo el bloque de texto tenía el reveal genérico del home;
   el video, la firma y el CTA final no entraban con nada.

   Cuatro gestos, cada uno con un porqué:
     1. TACHADO SEMÁNTICO: una línea dorada se dibuja sobre "se deprecian".
        El tachado ES la depreciación — la animación repite el argumento.
     2. CASCADA: texto → video → firma → CTA, 120ms entre grupos. La sección
        se lee en el orden en que se cuenta.
     3. EL PLAY RESPIRA: anillo dorado en pulso lento. El video del fundador
        es el activo de confianza del sitio; el botón invita, no grita.
     4. FIRMA: una línea dorada corta crece sobre el nombre. Gesto editorial.

   A PRUEBA DE FALLOS: los estados iniciales (opacity:0) viven bajo
   html.vfm-ready, clase que agrega el propio JS al arrancar. Sin JS no hay
   clase → todo visible desde el primer pixel. Con reduced-motion el JS marca
   la sección como entrada de inmediato y el pulso se apaga por media query.
   Se anima transform y opacity únicamente (GPU), nunca layout.
   ============================================================================ */

/* ── 1 · Cascada de entrada ────────────────────────────────────────── */

html.vfm-ready .vfm-rise {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .7s cubic-bezier(.22, 1, .36, 1),
    transform .7s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--vfm-i, 0) * 120ms);
}

/* El video además se asienta: entra apenas más chico y crece a su tamaño.
   Nunca desde scale(0) — nada real aparece de la nada. */
html.vfm-ready .vfm-rise.vfm-media {
  transform: translateY(22px) scale(.985);
}

html.vfm-ready .vfm-in .vfm-rise {
  opacity: 1;
  transform: none;
}

/* ── 2 · Tachado semántico sobre "se deprecian" ────────────────────── */

.vfm-dep {
  position: relative;
  text-decoration: none;   /* la línea la dibujamos nosotros */
  white-space: nowrap;     /* el tachado no puede partirse en dos renglones */
}

.vfm-dep::after {
  content: "";
  position: absolute;
  left: -1%;
  right: -1%;
  top: 52%;
  height: .055em;
  background: #D9A441;
  border-radius: 2px;
  transform: scaleX(1);           /* sin JS: tachado visible, quieto */
  transform-origin: left center;
  pointer-events: none;
}

/* Con JS: la línea nace en cero y se dibuja de izquierda a derecha cuando la
   sección entra, DESPUÉS de que el texto ya se leyó (retraso .55s). La curva
   fuerte de in-out le da el golpe de "plumazo". */
html.vfm-ready .vfm-dep::after {
  transform: scaleX(0);
  transition: transform .55s cubic-bezier(.77, 0, .175, 1) .55s;
}

html.vfm-ready .vfm-in .vfm-dep::after {
  transform: scaleX(1);
}

/* ── 3 · El botón de play respira ──────────────────────────────────── */

.vfm-play-halo {
  position: relative;
}

.vfm-play-halo::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 2px solid rgba(217, 164, 65, .85);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

/* El pulso arranca solo cuando la sección ya entró: un anillo latiendo en
   una sección que aún no se ve es trabajo tirado. 2.8s: respiración, no
   parpadeo. */
.vfm-in .vfm-play-halo::after {
  animation: vfmHalo 2.8s cubic-bezier(.22, 1, .36, 1) infinite;
}

@keyframes vfmHalo {
  0%   { opacity: .8; transform: scale(1); }
  70%  { opacity: 0;  transform: scale(1.45); }
  100% { opacity: 0;  transform: scale(1.45); }
}

/* ── 4 · Línea de firma sobre el nombre ────────────────────────────── */

.vfm-firma::before {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  background: #D9A441;
  margin: 0 auto 14px;
  transform: scaleX(1);           /* sin JS: visible */
}

html.vfm-ready .vfm-firma::before {
  transform: scaleX(0);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1) .6s;
}

html.vfm-ready .vfm-in .vfm-firma::before {
  transform: scaleX(1);
}

/* ── Movimiento reducido: se conserva el contenido, se quita el viaje ── */

@media (prefers-reduced-motion: reduce) {
  html.vfm-ready .vfm-rise,
  html.vfm-ready .vfm-rise.vfm-media {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html.vfm-ready .vfm-dep::after,
  html.vfm-ready .vfm-firma::before {
    transform: scaleX(1);
    transition: none;
  }
  .vfm-in .vfm-play-halo::after {
    animation: none;
  }
}