/* Only the logo mark/image moves, never the Header or Hero text/layout. */
[data-logo-motion] { --logo-duration: 2.4s; --logo-iterations: 1; }
[data-logo-motion-speed="slow"] { --logo-duration: 4s; }
[data-logo-motion-speed="fast"] { --logo-duration: 1.4s; }
[data-logo-motion-repeat="loop"] { --logo-iterations: infinite; }
[data-logo-motion]:not([data-logo-motion="none"]) {
  animation-duration: var(--logo-duration);
  animation-iteration-count: var(--logo-iterations);
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  transform-origin: center;
}
[data-logo-motion="fade"] { animation-name: hero-logo-fade; }
[data-logo-motion="zoom"] { animation-name: hero-logo-zoom; }
[data-logo-motion="spin"] { animation-name: hero-logo-spin; }
[data-logo-motion="float"] { animation-name: hero-logo-float; }
[data-logo-motion="shine"] { position: relative; overflow: hidden; isolation: isolate; }
[data-logo-motion="shine"]::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  animation: hero-logo-shine var(--logo-duration) ease-in-out var(--logo-iterations) both;
}
@keyframes hero-logo-fade { 0% { opacity: .15; } 45%,100% { opacity: 1; } }
@keyframes hero-logo-zoom { 0% { opacity: .2; transform: scale(.9); } 60%,100% { opacity: 1; transform: scale(1); } }
@keyframes hero-logo-spin { 0% { transform: rotate(-360deg) scale(.7); } 65%,100% { transform: rotate(0) scale(1); } }
@keyframes hero-logo-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes hero-logo-shine { 0%,15% { transform: translateX(-110%); opacity: 0; } 30% { opacity: 1; } 65%,100% { transform: translateX(110%); opacity: 0; } }
.hero-motion-preview { min-height: 136px; padding: 20px; display: grid; place-items: center; background: #0f1226; border-radius: 12px; color: #fff; overflow: hidden; }
.hero-motion-preview-mark { position: relative; display: grid; place-items: center; width: 120px; height: 90px; font: 800 32px system-ui; }
.hero-motion-preview-mark img { max-width: 100%; max-height: 90px; object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
  [data-logo-motion], [data-logo-motion]::after { animation: none !important; transform: none !important; opacity: 1 !important; }
  [data-logo-motion="shine"]::after { display: none; }
}