.motion-intro{display:flex;align-items:flex-start;gap:11px;padding:14px;background:#fff8f3;border:1px solid #f5e5d9;border-radius:10px}
.motion-spark{color:#ee7651;background:#fff0e2;width:29px;height:29px;flex-shrink:0;display:grid;place-items:center;border-radius:8px;font-size:18px}
.motion-intro strong{font-size:12px;font-weight:600;color:#665044}.motion-intro p{margin:4px 0 0;color:#8a7970;font-size:11px;line-height:1.7}
.motion-select-ready{display:none}.motion-picker{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(116px,1fr));gap:8px!important;width:100%;min-width:0}
.motion-picker{grid-template-columns:repeat(auto-fit,minmax(116px,1fr))}
.motion-picker .opt{min-width:0;cursor:pointer}.motion-picker .opt .face{padding:6px;display:flex;flex-direction:column;height:100%;border-radius:9px;background:#fff;box-shadow:0 0 0 1px #e1e6ee;color:#414956}
.motion-picker .opt input:checked+.face{background:#fffaf6;box-shadow:0 0 0 1.5px #ef7654;color:#dc5b39}
.motion-picker .opt input:focus-visible+.face{outline:2px solid #ef7654;outline-offset:3px}
.motion-example{display:flex;align-items:center;justify-content:center;height:76px;position:relative;overflow:hidden;border-radius:6px;background:#272b34;background-image:linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px);background-size:15px 15px;margin-bottom:8px;isolation:isolate}
.motion-sample-label{position:absolute;top:6px;left:7px;color:#7f899a;font:6px var(--f-mono);letter-spacing:.7px}
.motion-object{font:650 13px var(--f-sans);color:#fff;white-space:nowrap;transform-origin:center;display:block;will-change:transform,opacity}
.motion-choice-title{font-size:10px;font-weight:600;line-height:1.45;padding:0 3px 4px;white-space:normal}.motion-choice-desc{font-size:8px;color:#99a0ac;padding:0 3px 4px;line-height:1.5;white-space:normal}
.motion-price{background:#fff1e6;border:1px solid #ffcdaf;border-radius:6px;min-width:67px;padding:7px 11px;box-shadow:0 3px 8px #0002;color:#b65731;display:grid;gap:2px;text-align:left}
.motion-price small{font-size:6px;letter-spacing:.6px;color:#bc8b74}.motion-price b{font-size:17px;line-height:1.1}
.motion-picker .opt:is(:hover,:focus-within) .motion-object,.motion-picker .opt input:checked+.face .motion-object{animation-duration:2.7s;animation-iteration-count:infinite;animation-timing-function:linear}
.motion-picker .opt:is(:hover,:focus-within) [data-motion=przenikanie] .motion-object,.motion-picker .opt input:checked+.face [data-motion=przenikanie] .motion-object{animation-name:motion-demo-fade}
.motion-picker .opt:is(:hover,:focus-within) [data-motion=wjazd_dol] .motion-object,.motion-picker .opt input:checked+.face [data-motion=wjazd_dol] .motion-object{animation-name:motion-demo-up}
.motion-picker .opt:is(:hover,:focus-within) [data-motion=wjazd_bok] .motion-object,.motion-picker .opt input:checked+.face [data-motion=wjazd_bok] .motion-object{animation-name:motion-demo-side}
.motion-picker .opt:is(:hover,:focus-within) [data-motion=pop] .motion-object,.motion-picker .opt input:checked+.face [data-motion=pop] .motion-object{animation-name:motion-demo-pop}
@keyframes motion-demo-fade{0%,12%{opacity:0}20%,82%{opacity:1}94%,100%{opacity:0}}
@keyframes motion-demo-up{0%,12%{transform:translateY(14px);opacity:0}13%{opacity:1}22%,82%{transform:translateY(0);opacity:1}94%,100%{opacity:0}}
@keyframes motion-demo-side{0%,12%{transform:translateX(-22px);opacity:0}13%{opacity:1}22%,82%{transform:translateX(0);opacity:1}94%,100%{opacity:0}}
@keyframes motion-demo-pop{0%,12%{transform:scale(.82);opacity:0}13%{opacity:1}19%,82%{transform:scale(1);opacity:1}94%,100%{opacity:0}}
.motion-graphics-settings{display:grid;gap:18px}.motion-editor-section{display:grid;gap:12px;border-bottom:1px solid #e9edf3;padding-bottom:20px;margin-bottom:20px;scroll-margin-top:90px}
.motion-editor-heading{display:flex;flex-wrap:wrap;align-items:center;gap:7px;justify-content:space-between}.motion-editor-heading strong{font-size:12px;font-weight:600}.motion-editor-heading>span{font-size:10px;color:#959daa}
.motion-play{justify-self:start;gap:8px}.motion-play>span{color:#e9704d;font-size:11px}.motion-editor-section .hint{margin:0}
.screen video.caption-preview{z-index:4;object-fit:contain}.motion-editor-section .motion-picker{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1200px){.motion-editor-section .motion-picker{grid-template-columns:repeat(auto-fit,minmax(116px,1fr))}}
@media(max-width:560px){.motion-picker,.motion-editor-section .motion-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.motion-example{height:82px}.motion-choice-title{font-size:11px}.motion-choice-desc{font-size:9px}.motion-intro p{font-size:11px}.motion-play{width:100%;font-size:11px}.motion-editor-heading strong{font-size:13px}.motion-picker .motion-sample-label{font-size:7px}}
@media(prefers-reduced-motion:reduce){.motion-picker .motion-object{animation:none!important;will-change:auto}}

/* Ruch kadru: zdjęcie porusza się pod stabilnym tekstem, osobno od motion napisów. */
.camera-field{margin-top:18px}.camera-picker{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.motion-camera{height:132px;background:#272b34}.motion-camera-scene{position:absolute;inset:0;background:url('img/gastro.jpg') center 45%/cover;will-change:transform}
.motion-camera-next{background-image:url('img/fitness.jpg');transform:translateX(100%)}
.motion-camera-caption{position:absolute;bottom:10px;left:5px;right:5px;font-size:8px;font-weight:600;text-align:center;color:white;text-shadow:0 1px 3px #000;background:#171a2080;padding:4px;border-radius:3px}
.motion-camera .motion-sample-label{z-index:1;color:white;background:#171a2080;padding:3px;border-radius:2px}
.camera-picker .opt:is(:hover,:focus-within) [data-camera=plynny] .motion-camera-scene:first-child,.camera-picker .opt input:checked+.face [data-camera=plynny] .motion-camera-scene:first-child{animation:camera-demo-zoom 5.5s ease-in-out infinite}
.camera-picker .opt:is(:hover,:focus-within) [data-camera=dynamiczny] .motion-camera-scene:first-child,.camera-picker .opt input:checked+.face [data-camera=dynamiczny] .motion-camera-scene:first-child{animation:camera-demo-out 5.5s ease-in-out infinite}
.camera-picker .opt:is(:hover,:focus-within) [data-camera=dynamiczny] .motion-camera-next,.camera-picker .opt input:checked+.face [data-camera=dynamiczny] .motion-camera-next{animation:camera-demo-in 5.5s ease-in-out infinite}
@keyframes camera-demo-zoom{0%,8%{transform:scale(1)}82%,100%{transform:scale(1.06)}}
@keyframes camera-demo-out{0%,8%{transform:scale(1)}45%{transform:scale(1.22)}53%,100%{transform:translateX(-110%) scale(1.10)}}
@keyframes camera-demo-in{0%,45%{transform:translateX(100%) scale(1)}53%{transform:translateX(0) scale(1)}90%,100%{transform:translateX(0) scale(1.22)}}
@media(max-width:560px){.camera-picker{grid-template-columns:1fr!important}.motion-camera{height:152px}.motion-camera-caption{font-size:10px}}
@media(prefers-reduced-motion:reduce){.camera-picker .motion-camera-scene{animation:none!important;will-change:auto}}

.transition-picker{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.transition-picker .opt:is(:hover,:focus-within) [data-camera=dynamiczny] .motion-camera-scene:first-child,.transition-picker .opt input:checked+.face [data-camera=dynamiczny] .motion-camera-scene:first-child{animation:transition-out 4s linear infinite}
.transition-picker .opt:is(:hover,:focus-within) [data-camera=dynamiczny] .motion-camera-next,.transition-picker .opt input:checked+.face [data-camera=dynamiczny] .motion-camera-next{animation:transition-in 4s linear infinite}
@keyframes transition-out{0%,42%{transform:translateX(0)}50%,100%{transform:translateX(-100%)}}
@keyframes transition-in{0%,42%{transform:translateX(100%)}50%,100%{transform:translateX(0)}}
@media(max-width:560px){.transition-picker{grid-template-columns:1fr!important}}
@media(prefers-reduced-motion:reduce){.transition-picker .motion-camera-scene{animation:none!important}}

/* Przykład zbliżenia nie udaje osobno wybieranego przejścia między plikami. */
.camera-picker [data-camera=dynamiczny] .motion-camera-next{display:none}
.camera-picker .opt:is(:hover,:focus-within) [data-camera=dynamiczny] .motion-camera-scene:first-child,.camera-picker .opt input:checked+.face [data-camera=dynamiczny] .motion-camera-scene:first-child{animation:camera-demo-accent 5.5s ease-in-out infinite}
@keyframes camera-demo-accent{0%,8%{transform:scale(1)}60%{transform:scale(1.10)}65%,100%{transform:scale(1.22)}}
@media(prefers-reduced-motion:reduce){.camera-picker .motion-camera-scene{animation:none!important}}