/* AP Marketing Digital V4.2 — retoques de movimiento sobre Gencyo original.
   No reemplaza la hoja original; conserva tarjetas, scroll y animaciones GSAP. */

/* El zoom + blur de las tarjetas originales se mantiene, con transiciones
   de flecha más visibles incluso si el puntero personalizado está encima. */
.ap-theme .project-section .project-block .image-block .arrow-icon {
  transition:opacity .35s ease,transform .48s cubic-bezier(.18,.9,.23,1),visibility .35s ease,background-color .3s ease;
  background-color:#FFFF00;
  box-shadow:0 8px 26px rgba(6,20,55,.24);
}
.ap-theme .project-section .project-block .image-block .arrow-icon img {
  transition:transform .45s ease;
}
.ap-theme .project-section .project-block .inner-block:hover .image-block .arrow-icon img,
.ap-theme .project-section .project-block .inner-block:focus-within .image-block .arrow-icon img {
  transform:rotate(-35deg);
}
.ap-theme .project-section .project-block .inner-block:focus-within .image-block .arrow-icon {
  opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);
}
.ap-theme .project-section .project-block .inner-block:focus-within .image-block .hover-img:first-child {
  transform:translateX(0) scaleX(1);opacity:1;filter:blur(0);
}
.ap-theme .project-section .project-block .inner-block:focus-within .image-block .hover-img:nth-child(2) {
  transform:translateX(-50%) scaleX(2);opacity:0;filter:blur(10px);
}

/* Selección de fases: scroll y hover actualizan la fase activa, como referencia. */
.ap-theme .work-process-section .working-block-one .inner-block .step {
  transition:background-color .36s ease,color .36s ease,transform .36s ease,box-shadow .36s ease;
}
.ap-theme .work-process-section .working-block-one .inner-block.active .step {
  color:#091126; background:#FFFF00;box-shadow:0 7px 21px rgba(255,255,0,.17);
  transform:translateX(-3px);
}
.ap-theme .work-process-section .working-block-one .inner-block.active .content-box .line::before {
  background:#FFFF00;box-shadow:0 0 11px rgba(255,255,0,.45);
}

/* Revelado progresivo de las letras del titular de la sección de vídeo.
   Sólo se aplica cuando JS preparó los spans para no ocultar contenido si falla. */
.ap-theme .video-section .ap-letter-reveal .ap-word{display:inline-block;white-space:nowrap}
.ap-theme .video-section .ap-letter-reveal .ap-letter{display:inline-block;will-change:transform,opacity}
.ap-theme .video-section .ap-letter-reveal.ap-reveal-ready .ap-letter {opacity:0}
.ap-theme .video-section .ap-letter-reveal.ap-reveal-ready.ap-revealing .ap-letter{
  animation:ap-letter-rise .75s cubic-bezier(.22,.75,.2,1) both;
  animation-delay:var(--ap-stagger,0ms);
}
@keyframes ap-letter-rise {
  from {opacity:0;transform:translate3d(37px,7px,0) rotateY(9deg)}
  to {opacity:1;transform:translate3d(0,0,0) rotateY(0deg)}
}
@media (prefers-reduced-motion:reduce){
  .ap-theme:not(.ap-motion-opted-in) .video-section .ap-letter-reveal .ap-letter {opacity:1!important;animation:none!important;transform:none!important}
  .ap-theme:not(.ap-motion-opted-in) .work-process-section .working-block-one .inner-block.active .step {transform:none}
  .ap-theme.ap-motion-opted-in .video-section .ap-letter-reveal.ap-revealing .ap-letter {animation-duration:.75s!important}
}