/*
 * Vaneoo · Landing para administraciones · Animaciones
 *
 * Sistema de movimiento:
 *  - Cada bloque entra UNA sola vez al aparecer en pantalla (no se repite al subir).
 *  - Solo se animan opacity, translate, scale, rotate y clip-path: van por GPU y no mueven el layout.
 *  - Todo lo que empieza oculto depende de la clase .va-anim en <html>. Esa clase solo la pone
 *    el script del <head> si el usuario NO ha pedido "reducir movimiento" en su sistema,
 *    y se retira sola si js/animaciones.js no arranca en 3 s. Sin JS, la página se ve completa.
 */

:root {
  --va-ease: cubic-bezier(0.22, 1, 0.36, 1);      /* salida suave (expo-out): base de todo */
  --va-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* rebote corto: solo iconos y pastillas */
}

/* ---------- Entradas: estado inicial ---------- */
.va-anim [data-anim] {
  opacity: 0;
  transition-property: opacity, translate, scale, rotate, clip-path;
  transition-duration: 0.7s, 1s, 1s, 1.1s, 1.2s;
  transition-timing-function: var(--va-ease);
  transition-delay: var(--d, 0ms);
}

/* Sube 28 px y aparece: textos, tarjetas, filas */
.va-anim [data-anim="up"] { translate: 0 28px; }

/* Sube más y crece un 3 %: piezas grandes (navegador de la portada, formulario) */
.va-anim [data-anim="rise"] { translate: 0 44px; scale: 0.97; }

/* Aparece con un pequeño rebote: iconos, vehículos, pastillas */
.va-anim [data-anim="pop"] {
  scale: 0.72;
  transition-duration: 0.5s, 0.8s, 0.8s, 0.8s, 0.8s;
  transition-timing-function: var(--va-ease), var(--va-ease), var(--va-spring), var(--va-ease), var(--va-ease);
}

/* Móviles y fichas: suben y se enderezan */
.va-anim [data-anim="phone"] { translate: 0 64px; rotate: 4deg; }

/* Capturas grandes: se destapan de abajo arriba */
.va-anim [data-anim="image"] {
  translate: 0 24px;
  clip-path: inset(16% 0 0 0 round var(--va-r, 28px));
}

/* Solo aparece (pie de página, leyendas sobre imagen) */
.va-anim [data-anim="fade"] { }

/* Titulares: el bloque no se mueve, entran sus palabras una a una */
.va-anim [data-anim="words"] { opacity: 1; }

/* ---------- Entradas: estado final ---------- */
.va-anim [data-anim].is-in { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; }
.va-anim [data-anim="image"].is-in { clip-path: inset(0 0 0 0 round var(--va-r, 28px)); }
.va-anim [data-anim="image"].is-done { clip-path: none; }

/* ---------- Titulares palabra a palabra ---------- */
.va-anim [data-anim="words"] .va-w {
  display: inline-block;
  opacity: 0;
  translate: 0 0.42em;
  transition: opacity 0.6s var(--va-ease), translate 0.95s var(--va-ease);
  transition-delay: calc(var(--d, 0ms) + var(--wi, 0) * 30ms);
}
.va-anim h1[data-anim="words"] .va-w { transition-delay: calc(var(--d, 0ms) + var(--wi, 0) * 55ms); }
.va-anim [data-anim="words"].is-in .va-w { opacity: 1; translate: 0 0; }

/* ---------- "Lo de siempre": el tachado se dibuja de izquierda a derecha ---------- */
.va-strike {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 56%;
  background-size: 0% 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.8s var(--va-ease);
  transition-delay: calc(var(--d, 0ms) + 380ms);
}
.is-in .va-strike { background-size: 100% 2px; }

/* ---------- Checks de las listas: se dibujan como a mano ---------- */
.va-anim .va-check {
  stroke-dasharray: 1;
  stroke-dashoffset: -1;
  opacity: 0;
  transition: stroke-dashoffset 0.55s var(--va-ease), opacity 0.2s linear;
  transition-delay: calc(var(--d, 0ms) + 260ms);
}
.va-anim .va-check.va-fwd { stroke-dashoffset: 1; }
.va-anim .is-in .va-check { stroke-dashoffset: 0; opacity: 1; }

/* Para bloques que ya estaban por encima de la pantalla al cargar (recarga a mitad de página) */
.va-instant, .va-instant * { transition: none !important; }

/* ---------- Bota de "Busca tu municipio": flota despacio ---------- */
@media (prefers-reduced-motion: no-preference) {
  .va-float { animation: va-float 6s ease-in-out infinite; }
}
@keyframes va-float {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-12px) rotate(1.5deg); }
}

/* ---------- Parallax suave en las dos capturas panorámicas (Málaga y región) ----------
   Va con scroll-driven animations de CSS: sin JS y sin coste en el hilo principal.
   Donde el navegador no lo soporta, la imagen queda fija. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-parallax] {
      scale: 1.12;
      animation: va-parallax linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes va-parallax {
  from { translate: 0 -5%; }
  to { translate: 0 5%; }
}

/* ---------- Cabecera fija con barra de progreso (solo escritorio ancho) ---------- */
.va-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: #141412;
  transform: scaleX(0);
  transform-origin: 0 50%;
}
section[id], [id="ayudas"] { scroll-margin-top: 104px; }
@media (min-width: 1280px) {
  .va-header.is-scrolled { box-shadow: 0px 2px 5px 1.5px #0000001b; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- Microinteracciones ---------- */
.va-btn { transition: transform 0.3s var(--va-ease), box-shadow 0.3s var(--va-ease), filter 0.3s; }
.va-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(20, 20, 18, 0.45); filter: saturate(1.05); }
.va-wa-ring .va-btn:hover { transform: none; box-shadow: none; filter: none; }
.va-btn:active { transform: translateY(0) scale(0.98); transition-duration: 0.1s; }
.va-btn svg:last-child:not(:first-child) { transition: transform 0.3s var(--va-ease); }
.va-btn:hover svg:last-child:not(:first-child) { transform: translateX(4px); }

.va-nav a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 0.35s var(--va-ease);
}
.va-nav a:hover { background-size: 100% 2px; color: #141412; }

.adm-page :focus-visible {
  outline: 3px solid var(--color-brand-primary);
  outline-offset: 3px;
}

.va-vehicle img { transition: transform 0.45s var(--va-spring); }
.va-vehicle:hover img { transform: translateY(-6px) scale(1.06); }

/* En móvil, recorridos más cortos */
@media (max-width: 640px) {
  .va-anim [data-anim="up"] { translate: 0 18px; }
  .va-anim [data-anim="rise"] { translate: 0 28px; }
  .va-anim [data-anim="phone"] { translate: 0 40px; rotate: 3deg; }
  .va-anim [data-anim].is-in { translate: 0 0; }
}