/* ============================================================
   Animaciones inspiradas en boutique.expertech.es
   - Marquee infinito horizontal (definido en styles.css)
   - Reveal on-scroll
   - Reveal por palabras del titular hero
   - Sutiles flotaciones/transiciones
   ============================================================ */

/* Reveal on scroll: aplica .in-view por JS */
.reveal{
  opacity:0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.22,.61,.36,1),
              transform .9s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal.in-view{opacity:1;transform:none}

/* Reveal con delay escalonado */
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.18s}
.reveal.d3{transition-delay:.28s}
.reveal.d4{transition-delay:.38s}
.reveal.d5{transition-delay:.48s}

/* Reveal lateral */
.reveal-x{
  opacity:0; transform: translateX(40px);
  transition: opacity 1s ease, transform 1s cubic-bezier(.22,.61,.36,1);
}
.reveal-x.in-view{opacity:1;transform:none}

/* Reveal de líneas del titular: animación tipo "máscara" */
.reveal-text > span{
  display:block; overflow:hidden; position:relative;
}
.reveal-text > span > span,
.reveal-text > span em{
  display:inline-block;
  transform: translateY(110%);
  transition: transform 1s cubic-bezier(.22,.61,.36,1);
}
.reveal-text.in-view > span > span,
.reveal-text.in-view > span em{
  transform: translateY(0);
}
.reveal-text > span:nth-child(2) > *{transition-delay:.18s}
.reveal-text > span:nth-child(3) > *{transition-delay:.36s}

/* Hero img con leve "ken burns" */
.hero__media img{
  animation: ken-burns 18s ease-in-out infinite alternate;
}
@keyframes ken-burns{
  from{transform:scale(1.02) translateX(0)}
  to  {transform:scale(1.08) translateX(-1.2%)}
}

/* Floating bloom para CTAs */
@keyframes float-soft{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}

/* Shimmer marfil para tarjetas destacadas */
@keyframes ivory-shimmer{
  0%{background-position:-300px 0}
  100%{background-position:300px 0}
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-x,.reveal-text > span > span,.reveal-text > span em{
    transition:none !important; opacity:1 !important; transform:none !important;
  }
  .marquee__track,.hero__media img{animation:none !important}
}