/* CENATECH: interaction for the two existing marks outside the header.
   Move the complete SVG / CMS image. The shared #brandmark stays untouched. */
.system-core .system-mark,
.footer-logo .logo-mark {
  transform-origin: 50% 50%;
  transition: transform 320ms cubic-bezier(.2, .7, .2, 1);
}

/* One short greeting on entry; the mark then rests until interaction ends. */
@keyframes cenatech-mark-greeting {
  0% {
    transform: translateY(0) rotate(0) scale(1);
  }
  38% {
    transform: translateY(-5px) rotate(-5deg) scale(1.06);
  }
  70% {
    transform: translateY(-2px) rotate(2deg) scale(1.035);
  }
  100% {
    transform: translateY(-2px) rotate(0) scale(1.025);
  }
}

.system-core:focus-within .system-mark,
.footer-logo:focus-within .logo-mark {
  transform: translateY(-2px) scale(1.025);
  animation: cenatech-mark-greeting 680ms ease-out 1;
}

/* Touch browsers do not receive a sticky hover animation. */
@media (hover: hover) and (pointer: fine) {
  .system-core:hover .system-mark,
  .footer-logo:hover .logo-mark {
    transform: translateY(-2px) scale(1.025);
    animation: cenatech-mark-greeting 680ms ease-out 1;
  }
}

.footer-logo:active .logo-mark {
  animation: none;
  transform: translateY(1px) scale(.97);
}

@media (prefers-reduced-motion: reduce) {
  .system-core .system-mark,
  .footer-logo .logo-mark {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

@media print {
  .system-core .system-mark,
  .footer-logo .logo-mark {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}