/* ==========================================================================
   Animaciones — keyframes, scroll-reveal, transiciones y estados hover
   ========================================================================== */

/* ---------- Keyframes ---------- */

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.7); }
}

@keyframes cue-run {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

@keyframes route-drive {
  0%   { left: 0;    opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

@keyframes sheen {
  from { transform: translateX(-110%); }
  to   { transform: translateX(110%); }
}

/* ---------- Animaciones continuas ---------- */

.kicker__dot,
.hud__val--live::before {
  animation: pulse 2.4s var(--ease-in-out) infinite;
}

.scroll-cue__line::after {
  animation: cue-run 2.2s var(--ease-in-out) infinite;
}

.route__truck {
  animation: route-drive 3.6s linear infinite;
}

.route__line:nth-of-type(4) .route__truck { animation-delay: 1.2s; }
.route__line:nth-of-type(6) .route__truck { animation-delay: 2.4s; }

/* ---------- Entrada del hero ---------- */

.hero [data-reveal] {
  animation: rise-in var(--dur-slow) var(--ease) both;
}

.hero [data-reveal]:nth-child(1) { animation-delay: 0.15s; }
.hero [data-reveal]:nth-child(2) { animation-delay: 0.3s; }
.hero [data-reveal]:nth-child(3) { animation-delay: 0.45s; }
.hero [data-reveal]:nth-child(4) { animation-delay: 0.6s; }
.hero [data-reveal]:nth-child(5) { animation-delay: 0.75s; }

.hud {
  animation: rise-in var(--dur-slow) var(--ease) 1s both;
}

/* ---------- Scroll-reveal (interactions.js añade .is-visible) ---------- */

.js main :not(.hero__inner) > [data-reveal],
.js .clients [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s var(--ease),
    transform 0.9s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}

.js main [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Transiciones base ---------- */

.nav,
.nav__menu {
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    visibility var(--dur);
}

.nav__toggle-line {
  transition: transform var(--dur) var(--ease), top var(--dur) var(--ease);
}

.nav.is-open .nav__toggle-line:first-of-type {
  top: 21px;
  transform: rotate(45deg);
}

.nav.is-open .nav__toggle-line:last-of-type {
  top: 21px;
  transform: rotate(-45deg);
}

.btn,
.card,
.zone,
.client,
.value,
.step__glyph,
.field__input,
.accordion__icon,
.accordion__icon::before,
.accordion__icon::after,
.contact__link,
.inline-link,
.footer__list a,
.footer__top,
.brand__mark {
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    background-size var(--dur) var(--ease),
    color var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}

.accordion__panel {
  transition: grid-template-rows var(--dur) var(--ease);
}

/* Selector de tema: la luna se convierte en sol */
.theme-toggle {
  transition:
    transform var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.theme-toggle__icon {
  transition:
    transform 0.7s var(--ease),
    box-shadow 0.7s var(--ease),
    background-color 0.7s var(--ease);
}

.theme-toggle__icon::after {
  transition:
    transform 0.7s var(--ease),
    opacity 0.5s var(--ease);
}

/* Cambio de tema: los colores se funden en lugar de saltar.
   interactions.js añade .theme-switching durante el cambio. */
.theme-switching body,
.theme-switching .nav,
.theme-switching .nav__menu,
.theme-switching .scene-veil,
.theme-switching .clients,
.theme-switching .card,
.theme-switching .zone,
.theme-switching .form,
.theme-switching .field__input,
.theme-switching .footer,
.theme-switching .hud,
.theme-switching .btn--ghost {
  transition:
    background-color 0.8s var(--ease-in-out),
    color 0.8s var(--ease-in-out),
    border-color 0.8s var(--ease-in-out),
    box-shadow 0.8s var(--ease-in-out) !important;
}

.toast {
  transition:
    transform 0.6s var(--ease),
    opacity 0.6s var(--ease);
}

.btn__arrow {
  transition: transform var(--dur) var(--ease);
}

.card::before {
  transition: opacity var(--dur) var(--ease);
}

.steps::after {
  transition: transform 0.25s linear;
}

/* ---------- Hovers ---------- */

@media (hover: hover) {
  .nav__links a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--wine-light);
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: transform var(--dur) var(--ease);
  }

  .nav__links a:hover {
    color: var(--cream);
  }

  .nav__links a:hover::after,
  .nav__links a.is-active::after {
    transform: scaleX(1);
    transform-origin: 0 50%;
  }

  .theme-toggle:hover {
    transform: translateY(-2px);
    border-color: currentColor;
    box-shadow: 0 0 26px -6px var(--blue-glow);
  }

  .theme-toggle:hover .theme-toggle__icon {
    transform: rotate(-35deg);
  }

  :root[data-theme='light'] .theme-toggle:hover {
    box-shadow: 0 0 26px -6px var(--wine-glow);
  }

  :root[data-theme='light'] .theme-toggle:hover .theme-toggle__icon {
    transform: scale(0.62) rotate(45deg);
  }

  .brand:hover .brand__mark {
    transform: translateX(4px);
  }

  .btn:hover {
    transform: translateY(-2px);
  }

  .btn--wine:hover {
    background: var(--wine-light);
    box-shadow: 0 22px 48px -16px var(--wine-glow), 0 0 0 1px var(--wine-light);
  }

  .btn--wine:hover::before {
    animation: sheen 0.9s var(--ease) both;
  }

  .btn:hover .btn__arrow {
    transform: translateX(4px);
  }

  .btn--ghost:hover {
    border-color: var(--blue-light);
    box-shadow: 0 0 30px -6px var(--blue-glow);
  }

  .card:hover,
  .zone:hover {
    transform: translateY(-6px);
    border-color: var(--line-strong);
    box-shadow: var(--shadow-lift);
  }

  .card:hover::before {
    opacity: 1;
  }

  .zone--home:hover {
    border-color: var(--wine-light);
    box-shadow: 0 30px 70px -28px var(--wine-glow), 0 0 0 1px var(--line-wine);
  }

  .client:hover {
    background: var(--surface-hi);
  }

  .client:hover .client__glyph {
    opacity: 1;
  }

  .step:hover .step__glyph {
    transform: translateY(-4px);
    border-color: var(--blue-light);
    box-shadow: 0 0 30px -4px var(--blue-glow);
  }

  .value:hover {
    background: var(--surface);
  }

  .accordion__trigger:hover .accordion__icon {
    transform: translateY(-2px);
    border-color: var(--blue-light);
    box-shadow: 0 0 20px -4px var(--blue-glow);
  }

  .contact__link:hover,
  .inline-link:hover {
    background-size: 0 1px;
    background-position: 100% 100%;
  }

  .footer__list a:hover,
  .footer__top:hover {
    color: var(--cream);
  }
}

/* Desplazamiento suave solo si el usuario no pidió reducir movimiento */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js main :not(.hero__inner) > [data-reveal],
  .js .clients [data-reveal] {
    opacity: 1;
    transform: none;
  }
}