.akjs-photo-motion-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.akjs-photo-motion-layer > .akjs-photo-motion-image {
    display: block; width: 100%; height: 100%; max-width: none; margin: 0; border: 0;
    object-fit: cover; object-position: center; transform-origin: center;
    animation-duration: var(--akjs-photo-duration,24s);
    animation-timing-function: ease-in-out; animation-iteration-count: infinite;
    animation-direction: alternate; animation-fill-mode: both;
    animation-play-state: var(--akjs-photo-play-state,paused);
}
.akjs-photo-motion-layer[data-effect="zoom-in"] > img { animation-name: akjs-photo-zoom-in; }
.akjs-photo-motion-layer[data-effect="zoom-out"] > img { animation-name: akjs-photo-zoom-out; }
.akjs-photo-motion-layer[data-effect="pan-right"] > img { animation-name: akjs-photo-pan-right; }
.akjs-photo-motion-layer[data-effect="pan-left"] > img { animation-name: akjs-photo-pan-left; }
.akjs-photo-motion-layer[data-effect="pan-down"] > img { animation-name: akjs-photo-pan-down; }
.akjs-photo-motion-layer[data-effect="pan-up"] > img { animation-name: akjs-photo-pan-up; }
.akjs-photo-motion-layer[data-effect="diagonal-down-right"] > img { animation-name: akjs-photo-diagonal-down-right; }
.akjs-photo-motion-layer[data-effect="diagonal-down-left"] > img { animation-name: akjs-photo-diagonal-down-left; }
.akjs-photo-motion-layer[data-effect="diagonal-up-right"] > img { animation-name: akjs-photo-diagonal-up-right; }
.akjs-photo-motion-layer[data-effect="diagonal-up-left"] > img { animation-name: akjs-photo-diagonal-up-left; }
@keyframes akjs-photo-zoom-in { from { transform: scale(1); } to { transform: scale(1.1); } }
@keyframes akjs-photo-zoom-out { from { transform: scale(1.1); } to { transform: scale(1); } }
/* 12% overscan covers the 3% pan on each edge, including diagonal motion. */
@keyframes akjs-photo-pan-right { from { transform: translate3d(-3%,0,0) scale(1.12); } to { transform: translate3d(3%,0,0) scale(1.12); } }
@keyframes akjs-photo-pan-left { from { transform: translate3d(3%,0,0) scale(1.12); } to { transform: translate3d(-3%,0,0) scale(1.12); } }
@keyframes akjs-photo-pan-down { from { transform: translate3d(0,-3%,0) scale(1.12); } to { transform: translate3d(0,3%,0) scale(1.12); } }
@keyframes akjs-photo-pan-up { from { transform: translate3d(0,3%,0) scale(1.12); } to { transform: translate3d(0,-3%,0) scale(1.12); } }
@keyframes akjs-photo-diagonal-down-right { from { transform: translate3d(-3%,-3%,0) scale(1.12); } to { transform: translate3d(3%,3%,0) scale(1.12); } }
@keyframes akjs-photo-diagonal-down-left { from { transform: translate3d(3%,-3%,0) scale(1.12); } to { transform: translate3d(-3%,3%,0) scale(1.12); } }
@keyframes akjs-photo-diagonal-up-right { from { transform: translate3d(-3%,3%,0) scale(1.12); } to { transform: translate3d(3%,-3%,0) scale(1.12); } }
@keyframes akjs-photo-diagonal-up-left { from { transform: translate3d(3%,3%,0) scale(1.12); } to { transform: translate3d(-3%,-3%,0) scale(1.12); } }

.akjs-photo-preview { position: relative; width: min(100%,560px); aspect-ratio: 16/7; min-height: 150px; background: #edf1f7; border: 1px solid #aab7cb; border-radius: 8px; overflow: hidden; }
.akjs-photo-preview-label { position: absolute; bottom: 12px; left: 12px; padding: 8px 12px; background: #ffffff; color: #002776; font-size: 13px; border-radius: 4px; pointer-events: none; }
body > header.akjs-has-header-photo-motion { position: relative; isolation: isolate; z-index: 1; }
body > header.akjs-has-header-photo-motion > .akjs-photo-motion-layer { z-index: 0; }
body > header.akjs-has-header-photo-motion > :is(.topbar,.nav-box,.header-text-wrapper) { position: relative; z-index: 2; }
body > header.akjs-has-header-photo-motion > .background-filter { z-index: 1; pointer-events: none; }
body > header.akjs-has-header-photo-motion .akjs-header-photo-toggle {
    position: absolute; bottom: 0.75rem; left: 1rem; z-index: 3;
    font: inherit; font-size: 0.8rem; line-height: 1.5; min-height: 2rem;
    background: var(--akjs-photo-control-bg,#002776); color: var(--akjs-photo-control-text,#ffffff);
    padding: 0.3rem 0.5rem; border: 1px solid currentColor; border-radius: 0.375rem; cursor: pointer;
}
body > header.akjs-has-header-photo-motion .akjs-header-photo-toggle:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }
body > header.akjs-has-header-photo-motion .akjs-header-photo-toggle[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
    .akjs-photo-motion-layer > .akjs-photo-motion-image { animation: none !important; transform: none !important; }
}