/* MoxKit advanced-image widget. */
/* Advanced Image widget */
.moxkit-aimg{--moxkit-aimg-dur:500ms;--moxkit-aimg-loop-dur:4s;--moxkit-aimg-glow:rgba(99,91,255,.6);margin:0;display:block;text-align:center}
.moxkit-aimg-link{display:block;height:100%;color:inherit}
.moxkit-aimg-frame{position:relative;display:inline-block;max-width:100%;vertical-align:middle;overflow:hidden;line-height:0;transition:box-shadow var(--moxkit-aimg-dur) ease}
.moxkit-aimg-frame img{display:block;width:100%;max-width:100%;height:100%;transition:transform var(--moxkit-aimg-dur) ease,opacity var(--moxkit-aimg-dur) ease,filter var(--moxkit-aimg-dur) ease}
.moxkit-aimg-fx{position:absolute;inset:0;pointer-events:none;z-index:2}
.moxkit-aimg-ripples{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3}
.moxkit-aimg-caption{margin:8px 0 0;font-size:14px;color:var(--moxkit-muted)}
/* hover effects */
.moxkit-aimg-hover--zoom-in:hover .moxkit-aimg-frame img{transform:scale(1.09)}
.moxkit-aimg-hover--zoom-out:hover .moxkit-aimg-frame img{transform:scale(.92)}
.moxkit-aimg-hover--dim:hover .moxkit-aimg-frame img{opacity:.6}
.moxkit-aimg-hover--rubber:hover .moxkit-aimg-frame img{animation:moxkit-rubber var(--moxkit-aimg-dur) both}
.moxkit-aimg-hover--glow:hover .moxkit-aimg-frame{box-shadow:0 0 34px 4px var(--moxkit-aimg-glow)}
.moxkit-aimg-hover--shine .moxkit-aimg-fx{background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.55) 48%,rgba(255,255,255,.55) 52%,transparent 70%);transform:translateX(-130%)}
.moxkit-aimg-hover--shine:hover .moxkit-aimg-fx{transform:translateX(130%);transition:transform var(--moxkit-aimg-dur) ease}
.moxkit-aimg-hover--prism .moxkit-aimg-fx{background:linear-gradient(115deg,rgba(255,0,128,.4),rgba(0,200,255,.4) 45%,rgba(120,255,120,.35) 75%,transparent);mix-blend-mode:overlay;opacity:0;transition:opacity var(--moxkit-aimg-dur) ease}
.moxkit-aimg-hover--prism:hover .moxkit-aimg-fx{opacity:1}
.moxkit-aimg-hover--prism:hover .moxkit-aimg-frame img{filter:saturate(1.4) contrast(1.06) hue-rotate(-8deg);transform:scale(1.03)}
/* water ripple (cursor) */
.moxkit-aimg-ripple{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid rgba(255,255,255,.75);box-shadow:0 0 0 1px rgba(0,0,0,.05);pointer-events:none;animation:moxkit-aimg-ripple .9s ease-out forwards}
/* loop animations */
.moxkit-aimg-loop--float .moxkit-aimg-frame{animation:moxkit-aimg-float var(--moxkit-aimg-loop-dur) ease-in-out infinite}
.moxkit-aimg-loop--sway .moxkit-aimg-frame{animation:moxkit-aimg-sway var(--moxkit-aimg-loop-dur) ease-in-out infinite;transform-origin:center bottom}
.moxkit-aimg-loop--breathe .moxkit-aimg-frame img{animation:moxkit-aimg-breathe var(--moxkit-aimg-loop-dur) ease-in-out infinite}
.moxkit-aimg-loop--fade .moxkit-aimg-frame img{animation:moxkit-aimg-fade var(--moxkit-aimg-loop-dur) ease-in-out infinite}
.moxkit-aimg-loop--pulse-glow .moxkit-aimg-frame{animation:moxkit-aimg-pulse var(--moxkit-aimg-loop-dur) ease-in-out infinite}
.moxkit-aimg-loop--spin .moxkit-aimg-frame{animation:moxkit-aimg-spin var(--moxkit-aimg-loop-dur) linear infinite}
.moxkit-aimg-loop--spin-ccw .moxkit-aimg-frame{animation:moxkit-aimg-spin var(--moxkit-aimg-loop-dur) linear infinite reverse}
/* scroll reveal (JS arms .moxkit-aimg-armed, then .is-revealed) */
.moxkit-aimg-armed{transition:opacity var(--moxkit-aimg-reveal-dur, .8s) ease,transform var(--moxkit-aimg-reveal-dur, .8s) ease;will-change:opacity,transform}
/* Ink bleed & liquify: JS masks / filters the image; these only hide it until it scrolls in and paint the ink layer. */
.moxkit-aimg-armed[data-reveal="ink"]:not(.is-revealed) .moxkit-aimg-frame{visibility:hidden}
.moxkit-aimg-armed[data-reveal="liquify"]:not(.is-revealed) .moxkit-aimg-frame img{opacity:0}
.moxkit-aimg.is-inking .moxkit-aimg-frame{background:var(--moxkit-aimg-ink, #1b1b1f)}
/* Wipe, iris, diamond, curtain: clip-path transitions on the frame. Blinds, tiles, brush: JS masks the frame.
   Each effect's default duration is --moxkit-aimg-reveal-def; the Reveal duration setting overrides it. */
.moxkit-aimg:is([data-reveal="wipe"],[data-reveal="iris"],[data-reveal="diamond"],[data-reveal="curtain"]){--moxkit-aimg-reveal-def:1.2s}
.moxkit-aimg:is([data-reveal="blinds"],[data-reveal="tiles"],[data-reveal="brush"]){--moxkit-aimg-reveal-def:1.6s}
.moxkit-aimg-armed:is([data-reveal="wipe"],[data-reveal="iris"],[data-reveal="diamond"],[data-reveal="curtain"]) .moxkit-aimg-frame{transition:clip-path var(--moxkit-aimg-reveal-dur, var(--moxkit-aimg-reveal-def)) cubic-bezier(.77,0,.18,1),box-shadow var(--moxkit-aimg-dur) ease}
.moxkit-aimg-armed[data-reveal="wipe"]:not(.is-revealed) .moxkit-aimg-frame{clip-path:inset(0 100% 0 0)}
.moxkit-aimg-armed[data-reveal="wipe"][data-reveal-dir="right"]:not(.is-revealed) .moxkit-aimg-frame{clip-path:inset(0 0 0 100%)}
.moxkit-aimg-armed[data-reveal="wipe"][data-reveal-dir="up"]:not(.is-revealed) .moxkit-aimg-frame{clip-path:inset(100% 0 0 0)}
.moxkit-aimg-armed[data-reveal="wipe"][data-reveal-dir="down"]:not(.is-revealed) .moxkit-aimg-frame{clip-path:inset(0 0 100% 0)}
.moxkit-aimg-armed[data-reveal="iris"]:not(.is-revealed) .moxkit-aimg-frame{clip-path:circle(0% at 50% 50%)}
.moxkit-aimg.is-settling[data-reveal="iris"] .moxkit-aimg-frame{clip-path:circle(72% at 50% 50%)}
.moxkit-aimg-armed[data-reveal="diamond"]:not(.is-revealed) .moxkit-aimg-frame{clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%)}
.moxkit-aimg.is-settling[data-reveal="diamond"] .moxkit-aimg-frame{clip-path:polygon(50% -60%,160% 50%,50% 160%,-60% 50%)}
.moxkit-aimg-armed[data-reveal="curtain"]:not(.is-revealed) .moxkit-aimg-frame{clip-path:inset(0 50% 0 50%)}
.moxkit-aimg-armed[data-reveal="curtain"]:is([data-reveal-dir="up"],[data-reveal-dir="down"]):not(.is-revealed) .moxkit-aimg-frame{clip-path:inset(50% 0 50% 0)}
.moxkit-aimg.is-settling:is([data-reveal="wipe"],[data-reveal="curtain"]) .moxkit-aimg-frame{clip-path:inset(0 0 0 0)}
.moxkit-aimg-armed:is([data-reveal="blinds"],[data-reveal="tiles"],[data-reveal="brush"]):not(.is-revealed) .moxkit-aimg-frame{visibility:hidden}
.moxkit-aimg.is-settling .moxkit-aimg-frame img{animation:moxkit-aimg-settle var(--moxkit-aimg-reveal-dur, var(--moxkit-aimg-reveal-def)) cubic-bezier(.2,0,.3,1) both}
@keyframes moxkit-aimg-settle{from{transform:scale(1.15)}to{transform:none}}
/* Liquid swirl: JS adds a masked copy under the picture; the picture settles from a slight zoom on top of it. */
.moxkit-aimg-armed[data-reveal="swirl"]:not(.is-revealed) .moxkit-aimg-frame img{opacity:0}
.moxkit-aimg.is-swirling .moxkit-aimg-frame img:not(.moxkit-aimg-ghost){position:relative;z-index:1;animation:moxkit-aimg-swirl var(--moxkit-aimg-reveal-dur, 1.8s) cubic-bezier(.2,0,.3,1) both}
@keyframes moxkit-aimg-swirl{from{transform:scale(1.1)}to{transform:none}}
.moxkit-aimg-armed[data-reveal="fade-in"]:not(.is-revealed){opacity:0}
.moxkit-aimg-armed[data-reveal="fade-out"]:not(.is-revealed){opacity:1;transform:scale(1.08)}
.moxkit-aimg-armed[data-reveal="zoom-in"]:not(.is-revealed){opacity:0;transform:scale(.85)}
.moxkit-aimg-armed[data-reveal="zoom-out"]:not(.is-revealed){opacity:0;transform:scale(1.15)}
.moxkit-aimg-armed[data-reveal="slide-up"]:not(.is-revealed){opacity:0;transform:translateY(40px)}
@media(prefers-reduced-motion:reduce){
 .moxkit-aimg-frame,.moxkit-aimg-frame img{animation:none!important}
 .moxkit-aimg-armed{transition:none}
 .moxkit-aimg-armed:not(.is-revealed){opacity:1!important;transform:none!important}
}
@keyframes moxkit-aimg-ripple{from{transform:scale(0);opacity:.9}to{transform:scale(9);opacity:0}}
@keyframes moxkit-aimg-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes moxkit-aimg-sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes moxkit-aimg-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes moxkit-aimg-fade{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes moxkit-aimg-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes moxkit-aimg-pulse{0%,100%{box-shadow:0 0 0 0 transparent}
50%{box-shadow:0 0 30px 4px var(--moxkit-aimg-glow)}
}
@keyframes moxkit-rubber{0%{transform:scale(1)}
30%{transform:scale(1.25,.75)}
40%{transform:scale(.75,1.25)}
50%{transform:scale(1.15,.85)}
65%{transform:scale(.95,1.05)}
75%{transform:scale(1.05,.95)}
100%{transform:scale(1)}
}