/* ==========================================================================
   Animaciones y transiciones
   - Aparición al hacer scroll (data-reveal, activado por assets/js/reveal.js)
   - Entrada del hero
   - Micro-interacciones (tarjetas, botones, header)
   Todo se desactiva con prefers-reduced-motion.
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-duration: 750ms;
}

/* Aparición al hacer scroll ---------------------------------------------- */
html.has-js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity var(--reveal-duration) var(--ease-out),
    transform var(--reveal-duration) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

html.has-js [data-reveal='left'] {
  transform: translate3d(-32px, 0, 0);
}

html.has-js [data-reveal='right'] {
  transform: translate3d(32px, 0, 0);
}

html.has-js [data-reveal='scale'] {
  transform: scale(0.94);
}

html.has-js [data-reveal='fade'] {
  transform: none;
}

html.has-js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Entrada del hero (inicio) ---------------------------------------------- */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hero-screen {
  from {
    opacity: 0;
    transform: translate3d(0, 32px, 0) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

html.has-js .hero .badge,
html.has-js .hero__title,
html.has-js .hero__lead,
html.has-js .hero .model-tabs,
html.has-js .hero__actions {
  animation: fade-up 800ms var(--ease-out) both;
}

html.has-js .hero .badge { animation-delay: 60ms; }
html.has-js .hero__title { animation-delay: 160ms; }
html.has-js .hero__lead { animation-delay: 280ms; }
html.has-js .hero .model-tabs { animation-delay: 400ms; }
html.has-js .hero .showcase { animation: hero-screen 900ms var(--ease-out) 500ms both; }
html.has-js .hero__actions { animation-delay: 720ms; }

/* Lo mismo para los encabezados de las páginas interiores */
html.has-js .detail-hero__head > *,
html.has-js .page-intro__text > *,
html.has-js .pv-hero__text > * {
  animation: fade-up 700ms var(--ease-out) both;
}

html.has-js .detail-hero__head > :nth-child(1),
html.has-js .page-intro__text > :nth-child(1),
html.has-js .pv-hero__text > :nth-child(1) { animation-delay: 60ms; }
html.has-js .detail-hero__head > :nth-child(2),
html.has-js .page-intro__text > :nth-child(2),
html.has-js .pv-hero__text > :nth-child(2) { animation-delay: 160ms; }
html.has-js .detail-hero__head > :nth-child(3),
html.has-js .page-intro__text > :nth-child(3),
html.has-js .pv-hero__text > :nth-child(3) { animation-delay: 260ms; }
html.has-js .detail-hero__head > :nth-child(4),
html.has-js .pv-hero__text > :nth-child(4) { animation-delay: 360ms; }

/* Header: sombra al desplazarse ------------------------------------------- */
.site-header {
  transition: box-shadow 300ms ease, background-color 300ms ease;
}

.site-header.is-scrolled {
  background: var(--header-a98);
  box-shadow: 0 12px 32px -12px var(--black-a50);
}

/* Menú móvil: despliegue suave */
.mobile-drawer.is-open .mobile-drawer__inner {
  animation: fade-up 350ms var(--ease-out) both;
}

/* Micro-interacciones ---------------------------------------------------- */
.model-card,
.adv-card,
.pillar,
.pillar-dark,
.variant,
.dealer,
.channel,
.specs__group {
  transition:
    transform 350ms var(--ease-out),
    box-shadow 350ms var(--ease-out),
    border-color 250ms ease;
}

.model-card:hover,
.pillar:hover,
.variant:hover,
.dealer:hover,
.channel:hover {
  transform: translateY(-4px);
}

.adv-card:hover,
.pillar-dark:hover {
  transform: translateY(-3px);
}

.btn,
.btn-quote,
.filter-chip,
.model-tab {
  transition:
    transform 200ms var(--ease-out),
    background-color 200ms ease,
    border-color 200ms ease,
    color 200ms ease,
    box-shadow 200ms ease;
}

.btn:hover,
.btn-quote:hover {
  transform: translateY(-1px);
}

.btn:active,
.btn-quote:active {
  transform: translateY(0) scale(0.98);
}

.btn .material-symbols-outlined:last-child {
  transition: transform 250ms var(--ease-out);
}

.btn:hover .material-symbols-outlined:last-child {
  transform: translateX(3px);
}

.link-map .material-symbols-outlined {
  transition: transform 250ms var(--ease-out);
}

.link-map:hover .material-symbols-outlined {
  transform: translate(2px, -2px);
}

/* Imágenes: entrada con leve zoom */
.detail-hero__visual img,
.pv-banner img {
  transition: transform 1200ms var(--ease-out);
}

.detail-hero__visual:hover img,
.pv-banner:hover img {
  transform: scale(1.03);
}

/* Métricas: contador que "sube" ligeramente al aparecer */
.metric__value {
  display: inline-block;
  transition: transform 600ms var(--ease-out);
}

[data-reveal]:not(.is-visible) .metric__value {
  transform: translateY(8px);
}

/* Acordeones: apertura suave del contenido */
.specs__group > :not(summary) {
  animation: fade-up 350ms var(--ease-out) both;
}

/* Contenido del carrusel: la barra de datos entra desde abajo */
.carousel-slide .spec-bar {
  transform: translateY(12px);
  opacity: 0;
  transition: transform 600ms var(--ease-out) 150ms, opacity 600ms ease 150ms;
}

.carousel-slide.is-active .spec-bar {
  transform: none;
  opacity: 1;
}

/* Preferencia de movimiento reducido ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.has-js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html.has-js .hero .badge,
  html.has-js .hero__title,
  html.has-js .hero__lead,
  html.has-js .hero .model-tabs,
  html.has-js .hero .showcase,
  html.has-js .hero__actions,
  html.has-js .detail-hero__head > *,
  html.has-js .page-intro__text > *,
  html.has-js .pv-hero__text > *,
  .mobile-drawer.is-open .mobile-drawer__inner,
  .specs__group > :not(summary) {
    animation: none;
  }

  .model-card:hover,
  .pillar:hover,
  .variant:hover,
  .dealer:hover,
  .channel:hover,
  .adv-card:hover,
  .pillar-dark:hover,
  .btn:hover,
  .btn-quote:hover {
    transform: none;
  }

  .carousel-slide .spec-bar {
    transform: none;
    opacity: 1;
  }
}