/**
 * Movimiento compartido V3/V4 (pruebas, 21-oct-2026). Solo con
 * ?estilo=suave-acento o ?estilo=definitiva (html.html.twig).
 */

/* =====================================================================
 * MOVIMIENTO de las versiones 3 (suave-acento) y 4 (definitiva).
 * Criterio emil-design-eng, 21-oct. Lo activa js/wa-movimiento.js.
 *    - Solo transform y opacity; curvas propias; nada infinito.
 *    - Hover solo con ratón (hover: hover y pointer: fine).
 *    - Aparición al hacer scroll: la pone js/estilo-acento.js, y SOLO a lo
 *      que está por debajo de la primera pantalla (lo de arriba nunca se
 *      oculta: ni parpadeo, ni LCP, ni CLS). Sin JS no se oculta nada.
 *    - prefers-reduced-motion: sin desplazamientos (todo visible).
 * ===================================================================== */
html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] {
  --ac-out: cubic-bezier(.23, 1, .32, 1);
  --ac-in-out: cubic-bezier(.77, 0, .175, 1);
}

/* 4.1 Aparición al entrar en pantalla (escalonada 60 ms entre hermanos). */
html:is(.estilo-acento, .estilo-def).ac-mov .ac-pre {
  opacity: 0;
  transform: translateY(14px);
}

html:is(.estilo-acento, .estilo-def).ac-mov .ac-pre.ac-visto {
  opacity: 1;
  transform: none;
  transition:
    opacity 420ms var(--ac-out) calc(var(--ac-i, 0) * 60ms),
    transform 520ms var(--ac-out) calc(var(--ac-i, 0) * 60ms);
}

/* 4.2 Barras de puntuación: se llenan de izquierda a derecha al verlas. */
html:is(.estilo-acento, .estilo-def).ac-mov .wa-est__barra.ac-barra > span {
  transform: scaleX(0);
  transform-origin: left center;
}

html:is(.estilo-acento, .estilo-def).ac-mov .wa-est__barra.ac-barra.ac-visto > span {
  transform: scaleX(1);
  transition: transform 800ms var(--ac-in-out) calc(var(--ac-i, 0) * 50ms);
}

/* 4.3 Hover (solo ratón): las tarjetas se elevan 2 px, el logo crece un
 *     pelo, la flecha del CTA se adelanta y el dorsal se desliza. */
@media (hover: hover) and (pointer: fine) {
  html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] :is(.wa-rk-card, .wa-cmp__fila, .wa-fila, .wa-caja, .wac-bono, .wac-prono, .wac-banner, .wa-dest, .wa-est__bono, .wbs-listing-card, .wbs-prono-card, .blog-card, .bookmaker-card) {
    transition: transform 200ms var(--ac-out), box-shadow 200ms var(--ac-out), border-color 200ms ease;
  }

  html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] :is(.wa-rk-card, .wa-cmp__fila, .wa-fila, .wa-caja, .wac-bono, .wac-prono, .wac-banner, .wa-dest, .wa-est__bono, .wbs-listing-card, .wbs-prono-card, .blog-card, .bookmaker-card):hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(3, 61, 77, .10);
  }

  html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] :is(.wa-rk-card, .wa-fila, .wa-caja, .wac-bono) :is(.wa-logo, .wac-bono__marca) img {
    transition: transform 240ms var(--ac-out);
  }

  html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] :is(.wa-rk-card, .wa-fila, .wa-caja, .wac-bono):hover :is(.wa-logo, .wac-bono__marca) img {
    transform: scale(1.04);
  }

  html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] :is(.wa-rk-pos, .wa-cmp__pos) {
    transition: transform 200ms var(--ac-out);
  }

  html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] :is(.wa-rk-card, .wa-cmp__fila):hover :is(.wa-rk-pos, .wa-cmp__pos) {
    transform: translateX(3px);
  }

  /* Flecha o icono final del CTA. */
  html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] :is(.wa-ticket__cta, .wa-btn, .wa-est__cta, .wac-btn, .wac-bono__cta, .btn-success) :is(svg, i):last-child {
    transition: transform 180ms var(--ac-out);
  }

  html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] :is(.wa-ticket, .wa-btn, .wa-est__cta, .wac-btn, .wac-bono__cta, .btn-success):hover :is(svg, i):last-child {
    transform: translateX(3px);
  }

  /* Top 10 del lateral y chips de intención. */
  html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] :is(.wa-lat__item, .wa-int__chip) {
    transition: transform 180ms var(--ac-out), border-color 180ms ease;
  }

  html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-lat__item:hover {
    transform: translateX(3px);
  }

  html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-int__chip:hover {
    transform: translateY(-1px);
  }
}

/* 4.4 Pulsar: respuesta inmediata (también en móvil). */
html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] :is(.wa-ticket__cta, .wa-btn, .wa-est__cta, .wac-btn, .wac-bono__cta, .btn-success, .wa-rk-fbtn, .wa-est__btn-sec, .wa-int__chip) {
  transition: transform 140ms var(--ac-out), background-color 160ms ease, color 160ms ease;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] :is(.wa-ticket__cta, .wa-btn, .wa-est__cta, .wac-btn, .wac-bono__cta, .btn-success, .wa-rk-fbtn, .wa-est__btn-sec, .wa-int__chip):active {
  transform: scale(.97);
}

/* 4.5 Ficha del ranking (escritorio): entra con un leve desliz; el chevron
 *     gira. En móvil la ficha ya tiene su propio cajón. */
@media (min-width: 768px) {
  html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-ficha:not([hidden]) {
    transition: opacity 220ms var(--ac-out), transform 260ms var(--ac-out);
  }

  @starting-style {
    html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-ficha:not([hidden]) {
      opacity: 0;
      transform: translateY(-6px);
    }
  }
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-rk-fbtn svg {
  transition: transform 200ms var(--ac-out);
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-rk-fbtn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* 4.6 CTA de la cabecera de reseña/bono: UN destello al cargar (una sola
 *     vez, no en bucle) para llevar la vista al bono. */
html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-est--f .wa-est__hero .wa-est__cta {
  position: relative;
  overflow: hidden;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-est--f .wa-est__hero .wa-est__cta::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .45) 50%, transparent 100%);
  pointer-events: none;
  transform: translateX(-120%) skewX(-16deg);
  animation: ac-destello 900ms var(--ac-in-out) 900ms 1 both;
}

@keyframes ac-destello {
  to {
    transform: translateX(320%) skewX(-16deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:is(.estilo-acento, .estilo-def).ac-mov .ac-pre,
  html:is(.estilo-acento, .estilo-def).ac-mov .wa-est__barra.ac-barra > span {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-est--f .wa-est__hero .wa-est__cta::after {
    animation: none;
    display: none;
  }

  html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] * {
    transition-duration: 0s !important;
  }
}

/* V4: tarjetas rectas y sin sombras (regla de la V4): al pasar el ratón,
   en vez de sombra, la línea se oscurece. */
@media (hover: hover) and (pointer: fine) {
  html.estilo-def[data-estilo="suave-emil"] :is(.wa-rk-card, .wa-cmp__fila, .wa-fila, .wa-caja, .wac-bono, .wac-prono, .wac-banner, .wa-dest, .wa-est__bono, .wbs-listing-card, .wbs-prono-card, .blog-card, .bookmaker-card):hover {
    border-color: #8f999e !important;
  }
}