.magic-scene{--rider-size:145px}.magic-scene .gallery-frame[data-gallery-panel="1"]{position:relative;isolation:isolate}.magic-rider{display:block;position:absolute;left:calc(100% - var(--rider-size) - 6px);bottom:6px;width:var(--rider-size);height:var(--rider-size);pointer-events:none;z-index:1;filter:drop-shadow(0 3px 2px #273e5630)}.magic-sprite-viewport{display:block;position:relative;width:100%;height:100%;overflow:hidden;pointer-events:none;background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important}.magic-scene .magic-riding-sheet{position:absolute!important;top:0!important;left:0!important;display:block!important;width:400%!important;height:200%!important;max-width:none!important;max-height:none!important;object-fit:fill!important;aspect-ratio:auto!important;background:transparent!important;border:0!important;border-radius:0!important;margin:0!important;padding:0!important;transform:translate(0,0);pointer-events:none}.magic-scene.is-magic-playing .magic-rider{animation:magic-ride-route 5.2s linear 1 both}.magic-scene.is-magic-playing .magic-riding-sheet{animation:magic-gallop 1.04s steps(1,end) 5 both}.magic-scene:is(.is-magic-paused,.is-magic-offscreen) :is(.magic-rider,.magic-riding-sheet){animation-play-state:paused!important}.magic-scene.is-magic-hidden .magic-rider{display:none}.magic-scene-controls{background:#f4edff;border:1px solid #ded0ee;border-radius:15px;margin:12px 0 0;padding:12px;color:#075474}.magic-scene-label{display:block;font-weight:800;font-size:12px;margin-bottom:8px}.magic-scene-controls>div{display:flex;flex-wrap:wrap;gap:7px}.magic-scene-controls button{font:700 12px/1.4 system-ui;min-height:44px;padding:9px 11px;border:1px solid #8e70b1;border-radius:12px;color:#533b76;background:white;cursor:pointer;white-space:normal;max-width:100%}.magic-scene-controls button:disabled{opacity:.55;cursor:default}.magic-scene-controls button:focus-visible{outline:3px solid #d35c18;outline-offset:3px}.magic-scene-controls [data-magic-status]{font-size:11px!important;line-height:1.5!important;margin:8px 0 0!important;color:#456579!important}@keyframes magic-ride-route{0%{left:calc(0px - var(--rider-size));translate:0 0}12%{translate:0 -4px}25%{translate:0 0}40%{translate:0 -5px}60%{translate:0 0}78%{translate:0 -4px}100%{left:calc(100% - var(--rider-size) - 6px);translate:0 0}}@keyframes magic-gallop{0%{translate:0 0}12.5%{translate:-25% 0}25%{translate:-50% 0}37.5%{translate:-75% 0}50%{translate:0 -50%}62.5%{translate:-25% -50%}75%{translate:-50% -50%}87.5%,100%{translate:-75% -50%}}@media(max-width:600px){.magic-scene{--rider-size:104px}.magic-scene-controls{padding:10px}.magic-scene-controls button{font-size:11px;padding:9px}.magic-scene-controls>div{gap:6px}}@media(max-width:360px){.magic-scene{--rider-size:88px}.magic-scene-controls button[data-magic-replay]{width:100%}}@media(prefers-reduced-motion:reduce){.magic-scene .magic-rider,.magic-scene .magic-riding-sheet{animation:none!important}}
/* The same scene on one catalogue card; pointer events pass through to details. */
.magic-catalog-card{--rider-size:102px}.magic-catalog-card .ticket-photo-open{position:relative;overflow:hidden;isolation:isolate}.magic-catalog-card .magic-rider{bottom:36px}.magic-catalog-card .ticket-photo-hint{z-index:2}.magic-catalog-card .magic-scene-controls{margin:0 0 14px;padding:10px}.magic-catalog-card .magic-scene-controls button{font-size:11px;padding:8px;min-height:44px}.magic-catalog-card .magic-scene-label{font-size:11px}.magic-catalog-card .magic-scene-controls [data-magic-status]{font-size:10px!important}.magic-catalog-card .magic-riding-sheet{transition:none!important;mix-blend-mode:normal!important}@media(max-width:760px){.magic-catalog-card{--rider-size:110px}}@media(max-width:360px){.magic-catalog-card{--rider-size:88px}}

/* Individual translate keeps frames moving despite legacy product-photo transform resets. */
.magic-scene .magic-riding-sheet{translate:0 0}
.banana-scene .magic-rider{left:auto;right:6px;bottom:6px}.banana-scene.is-magic-playing .magic-rider{animation:banana-snack 5.2s ease-in-out 1 both}.banana-scene.is-magic-playing .magic-riding-sheet{animation-duration:2.6s;animation-iteration-count:2}.banana-scene.magic-catalog-card .magic-rider{bottom:36px}.sea-scene .magic-rider{--rider-size:160px}.sea-scene.magic-catalog-card .magic-rider{--rider-size:115px}.banana-scene.magic-catalog-card>.magic-scene-controls,.sea-scene.magic-catalog-card>.magic-scene-controls{margin:0 12px 14px}@keyframes banana-snack{0%,100%{translate:0 0}35%{translate:0 -3px}70%{translate:0 1px}}@media(max-width:600px){.sea-scene .magic-rider{--rider-size:120px}.sea-scene.magic-catalog-card .magic-rider{--rider-size:105px}}

/* Direct mascot replay with mouse, touch and keyboard. */
.magic-scene .magic-rider{pointer-events:auto;cursor:pointer;touch-action:manipulation}.magic-scene .magic-rider:focus-visible{outline:3px solid #075474;outline-offset:4px;border-radius:14px}