/* Motion is an enhancement: only JavaScript-armed content can be concealed. */
.motion-target {
    --motion-duration: 900ms;
    --motion-delay: 0ms;
    --motion-ease: cubic-bezier(.16, 1, .3, 1);
    --motion-distance: 26px;
    --motion-image-scale: 1.12;
    --motion-card-distance: 64px;
    --motion-card-angle: 12deg;
    --motion-panel-distance: 36px;
    --motion-side: 1;
    --motion-panel-clip: inset(0 100% 0 0);
    --motion-heading-bottom: 0px;
    --motion-word-angle: 3deg;
}

.motion-target.motion-armed:not(.is-revealed) {
    opacity: 0;
    translate: 0 var(--motion-distance);
}
.motion-target.motion-armed.is-revealed {
    animation: jtp-motion-rise var(--motion-duration) var(--motion-ease) var(--motion-delay) both;
}

/* Native word wrapping is retained; only the ink moves within each mask. */
.motion-word-wrap { display: inline-block; overflow: hidden; vertical-align: bottom; padding-block: .12em; margin-block: -.12em; }
.motion-word { display: inline-block; transform-origin: left bottom; }
.motion-target.motion-title.motion-armed {
    opacity: 1; translate: none; scale: none; rotate: none; filter: none; clip-path: none; animation: none;
}
.motion-title.motion-armed:not(.is-revealed) .motion-word {
    opacity: 0; translate: 0 115%; rotate: var(--motion-word-angle); filter: blur(3px);
}
.motion-title.motion-armed.is-revealed .motion-word {
    animation: jtp-motion-word var(--motion-duration) var(--motion-ease) calc(var(--motion-delay) + min(var(--word-order, 0), 7) * 55ms) both;
}
.motion-title .title-dot { display: inline-block; }
.motion-title.motion-armed:not(.is-revealed) .title-dot { opacity: 0; scale: .4; }
.motion-title.motion-armed.is-revealed .title-dot {
    animation: jtp-motion-dot 360ms var(--motion-ease) calc(var(--motion-delay) + 650ms) both;
}

/* Pending targets keep unclipped geometry for IntersectionObserver.
   Masks start only inside the reveal keyframes, after the target is unobserved. */
/* Heading wipes and a brand-colored ink stroke share one finish time. */
.motion-target.motion-heading.motion-armed:not(.is-revealed) {
    opacity: 0; translate: 0 20px; clip-path: none;
}
.motion-target.motion-heading.motion-armed.is-revealed { animation-name: jtp-motion-heading; }
.section-heading.motion-heading { position: relative; --motion-heading-bottom: -18px; }
.section-heading.motion-heading::after {
    content: ""; position: absolute; left: 0; bottom: -13px; width: 64px; height: 3px;
    border-radius: 2px; background: var(--brand); pointer-events: none; transform-origin: left center;
}
.kmk-section .section-heading.motion-heading::after { background: var(--accent); }
.section-heading.motion-heading.motion-armed:not(.is-revealed)::after { scale: 0 1; }
.section-heading.motion-heading.motion-armed.is-revealed::after {
    animation: jtp-motion-ink var(--motion-duration) var(--motion-ease) var(--motion-delay) both;
}

/* The photograph is revealed, leaving its positioned container untouched. */
.motion-target.motion-image.motion-armed:not(.is-revealed) {
    opacity: 0; translate: none; scale: var(--motion-image-scale); clip-path: none;
}
.motion-target.motion-image.motion-armed.is-revealed { animation-name: jtp-motion-image; }
.motion-target.motion-surface.motion-armed:not(.is-revealed) {
    opacity: 0; translate: none; clip-path: none;
}
.motion-target.motion-surface.motion-armed.is-revealed { animation-name: jtp-motion-surface; }

/* Individual transforms compose with existing hover and pointer effects. */
.services-grid, .kemitraan-grid, .related-grid { perspective: 1400px; }
.motion-card { transform-origin: center bottom; }
.motion-target.motion-card.motion-armed:not(.is-revealed) {
    opacity: 0; translate: 0 var(--motion-card-distance); scale: .92; rotate: x var(--motion-card-angle);
}
.motion-target.motion-card.motion-armed.is-revealed { animation-name: jtp-motion-card; }
.motion-target.motion-gallery.motion-armed:not(.is-revealed) {
    opacity: 0; translate: none; clip-path: none;
}
.motion-target.motion-gallery.motion-armed.is-revealed { animation-name: jtp-motion-gallery; }
.motion-target.motion-panel.motion-armed:not(.is-revealed) {
    opacity: 0; translate: calc(var(--motion-side) * var(--motion-panel-distance)) 0;
    clip-path: none;
}
.motion-target.motion-panel.motion-armed.is-revealed { animation-name: jtp-motion-panel; }
.motion-panel.motion-armed.is-revealed .about-symbol svg :is(path, circle) {
    stroke-dasharray: 180; animation: jtp-motion-draw 800ms var(--motion-ease) var(--motion-delay) both;
}

/* Header, contact buttons, and logo strips remain in their original geometry. */
.motion-target.motion-fade.motion-armed { translate: none; scale: none; rotate: none; clip-path: none; filter: none; }
.motion-target.motion-fade.motion-armed.is-revealed { animation-name: jtp-motion-fade; }

@keyframes jtp-motion-rise {
    from { opacity: 0; translate: 0 var(--motion-distance); }
    to { opacity: 1; translate: 0 0; }
}
@keyframes jtp-motion-word {
    from { opacity: 0; translate: 0 115%; rotate: var(--motion-word-angle); filter: blur(3px); }
    50% { opacity: 1; }
    to { opacity: 1; translate: 0 0; rotate: 0deg; filter: blur(0); }
}
@keyframes jtp-motion-dot {
    from { opacity: 0; scale: .4; }
    to { opacity: 1; scale: 1; }
}
@keyframes jtp-motion-heading {
    from { opacity: 1; translate: 0 20px; clip-path: inset(0 0 100% 0); }
    to { opacity: 1; translate: 0 0; clip-path: inset(-4px -4px var(--motion-heading-bottom) -4px); }
}
@keyframes jtp-motion-ink {
    0%, 22% { scale: 0 1; }
    to { scale: 1 1; }
}
@keyframes jtp-motion-image {
    from { opacity: 1; scale: var(--motion-image-scale); translate: none; clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); }
    42% { clip-path: polygon(0 47%, 100% 29%, 100% 100%, 0 100%); }
    to { opacity: 1; scale: 1; translate: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes jtp-motion-surface {
    from { opacity: 1; translate: none; clip-path: inset(0 100% 0 0); }
    to { opacity: 1; translate: none; clip-path: inset(0); }
}
@keyframes jtp-motion-card {
    from { opacity: 0; translate: 0 var(--motion-card-distance); scale: .92; rotate: x var(--motion-card-angle); }
    72% { opacity: 1; translate: 0 -5px; scale: 1.008; rotate: x -1deg; }
    to { opacity: 1; translate: 0 0; scale: 1; rotate: x 0deg; }
}
@keyframes jtp-motion-gallery {
    from { opacity: 0; translate: none; clip-path: inset(46% 0 46% 0 round 12px); }
    35% { opacity: 1; }
    to { opacity: 1; translate: none; clip-path: inset(0 round 12px); }
}
@keyframes jtp-motion-panel {
    from { opacity: 0; translate: calc(var(--motion-side) * var(--motion-panel-distance)) 0; clip-path: var(--motion-panel-clip); }
    35% { opacity: 1; }
    to { opacity: 1; translate: 0 0; clip-path: inset(0); }
}
@keyframes jtp-motion-draw {
    from { stroke-dashoffset: 180; }
    to { stroke-dashoffset: 0; }
}
@keyframes jtp-motion-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 960px) {
    .motion-target { --motion-panel-distance: 16px; --motion-card-distance: 46px; --motion-card-angle: 9deg; }
}
@media (max-width: 700px) {
    .motion-target { --motion-distance: 16px; --motion-image-scale: 1.045; --motion-card-distance: 32px; --motion-card-angle: 7deg; --motion-panel-distance: 12px; --motion-word-angle: 1.5deg; }
    .section-heading.motion-heading::after { width: 44px; height: 2px; }
}

/* Keyboard navigation can never land in a concealed or moving context. */
.motion-target.motion-armed:focus-within,
.motion-target.motion-armed:focus-within :is(.motion-word, .motion-word-wrap, .title-dot),
.section-heading.motion-heading.motion-armed:focus-within::after {
    opacity: 1 !important; translate: none !important; scale: none !important; rotate: none !important;
    filter: none !important; clip-path: none !important; animation: none !important;
}
.motion-panel.motion-armed:focus-within .about-symbol svg :is(path, circle) {
    stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important;
}
@media (prefers-reduced-motion: reduce), print {
    .motion-target, .motion-word, .motion-word-wrap, .motion-title .title-dot, .section-heading.motion-heading::after {
        opacity: 1 !important; translate: none !important; scale: none !important; rotate: none !important;
        filter: none !important; clip-path: none !important; animation: none !important;
    }
    .motion-panel .about-symbol svg :is(path, circle) {
        stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important;
    }
}