/* ==========================================================================
   hero-logo-transition.css — Animación "el logo del hero vuela al header"
   ==========================================================================
   Hoja de estilos EXCLUSIVA de index.html. No modifica ni depende de
   ningún selector de components.css ni de utilities.css — mismo criterio
   ya establecido en el proyecto para cronologiaISA.css, venta-animaciones.css,
   sectores-carousel.css y servicios-galeria.css: componente encapsulado,
   sin tocar CSS compartido, y NO se enlaza en el resto de las páginas.

   Comportamiento:
   1) #header-logo (el logo chico del menú) empieza invisible.
   2) Mientras #hero-logo (el logo grande del hero) esté visible en
      pantalla, #header-logo se mantiene oculto.
   3) Al hacer scroll y que #hero-logo desaparezca de la vista (se cubre
      bajo el header fijo), el script propio (al final de index.html) crea
      un clon temporal del logo y lo anima desde la posición/tamaño exactos
      de #hero-logo hasta la posición/tamaño exactos de #header-logo.
   4) Al terminar esa animación, el clon se elimina y #header-logo se
      vuelve visible (fade-in), completando la ilusión de que "es el mismo
      logo" el que llegó ahí.
   ========================================================================== */

#header-logo{
  opacity: 0;
  transition: opacity .35s ease;
}
#header-logo.is-visible{
  opacity: 1;
}

/* Clon volador: creado y destruido por JS, nunca vive en el HTML estático. */
.logo-flying-clone{
  position: fixed;
  z-index: 100;
  margin: 0;
  pointer-events: none;
  will-change: top, left, width, height;
  transition:
    top .6s cubic-bezier(.65,0,.35,1),
    left .6s cubic-bezier(.65,0,.35,1),
    width .6s cubic-bezier(.65,0,.35,1),
    height .6s cubic-bezier(.65,0,.35,1);
}

@media (prefers-reduced-motion: reduce){
  #header-logo{ transition-duration: .01ms !important; }
  .logo-flying-clone{ transition-duration: .01ms !important; }
}