.amsi{position:relative;box-sizing:border-box;width:var(--amsi-width,100%);max-width:100%;height:var(--amsi-height,auto);aspect-ratio:16/9;min-height:1px;overflow:hidden;border-radius:12px;background:#181818;color:#fff}.amsi *{box-sizing:border-box}.amsi-track,.amsi-slide,.amsi-face,.amsi-flip-inner{position:absolute;inset:0;width:100%;height:100%}.amsi-slide{opacity:0;visibility:hidden;transition:opacity .65s,transform .65s;transform:translateX(8%)}.amsi-slide.active{opacity:1;visibility:visible;transform:none}.amsi-effect-fade .amsi-slide{transform:none}.amsi-effect-zoom .amsi-slide{transform:scale(1.08)}.amsi-effect-zoom .amsi-slide.active{transform:scale(1)}.amsi-face img,.amsi-face video,.amsi-face iframe{display:block;width:100%;height:100%;object-fit:var(--amsi-fit,cover);border:0;max-width:none}.amsi-copy{position:absolute;bottom:0;left:0;right:0;padding:20px;background:linear-gradient(transparent,#000b);color:white;pointer-events:none}.amsi-copy h3,.amsi-copy p{color:inherit;margin:0 0 5px}.amsi-prev,.amsi-next{position:absolute;top:50%;transform:translateY(-50%);z-index:5;border:0;border-radius:50%;width:42px;height:42px;background:#0009;color:#fff;font-size:28px;cursor:pointer}.amsi-prev{left:12px}.amsi-next{right:12px}.amsi-flip{perspective:1200px;cursor:pointer}.amsi-flip-inner{transform-style:preserve-3d;transition:transform .7s}.amsi-flip .amsi-face{backface-visibility:hidden;-webkit-backface-visibility:hidden}.amsi-back{transform:rotateY(180deg)}.amsi-axis-x .amsi-back{transform:rotateX(180deg)}.amsi-flip.is-flipped .amsi-flip-inner{transform:rotateY(180deg)}.amsi-axis-x.is-flipped .amsi-flip-inner{transform:rotateX(180deg)}.amsi-video-face{position:absolute;inset:0}.amsi-video iframe{pointer-events:none}.amsi-notice{padding:15px;border:1px dashed #aaa;color:#333}@media(prefers-reduced-motion:reduce){.amsi-slide,.amsi-flip-inner{transition:none}}

/* v2.1: horizontal swipe/drag without blocking vertical page scroll */
.amsi-carousel{touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.amsi-carousel:active{cursor:grabbing}
.amsi-carousel img{-webkit-user-drag:none;user-drag:none;pointer-events:none}
.amsi-carousel .amsi-slide{pointer-events:none}
.amsi-carousel .amsi-prev,.amsi-carousel .amsi-next{pointer-events:auto}

/* v2.2: true horizontal travel (not an in-place image swap). */
.amsi-effect-slide .amsi-track{position:absolute;inset:0;display:flex;width:100%;height:100%;transform:translate3d(-100%,0,0);will-change:transform}
.amsi-effect-slide .amsi-slide{position:relative;inset:auto;flex:0 0 100%;width:100%;height:100%;opacity:1;visibility:visible;transform:none;transition:none}
.amsi-effect-slide .amsi-slide .amsi-face{position:absolute;inset:0}
@media(prefers-reduced-motion:reduce){.amsi-effect-slide .amsi-track{transition:none!important}}

.amsi-filename{font-size:14px;font-weight:500;line-height:1.5;overflow-wrap:anywhere;margin-bottom:5px}

/* v2.5 independent 3D flip container: front/back are independently editable */
.amsi-flip-container{perspective:1400px;overflow:visible;isolation:isolate;cursor:pointer}
.amsi-flip-container .amsi-flip-inner{transition:transform var(--amsi-flip-duration,700ms) cubic-bezier(.2,.7,.2,1);transform-origin:center center}
.amsi-flip-container .amsi-back{transform:rotateY(calc(-1 * var(--amsi-flip-angle,180deg)))}
.amsi-flip-container.is-flipped .amsi-flip-inner{transform:rotateY(var(--amsi-flip-angle,180deg))}
.amsi-flip-container .amsi-face{overflow:hidden;border-radius:12px}
.amsi-flip-container .amsi-face iframe{pointer-events:none}
@media(hover:hover) and (pointer:fine){
 .amsi-flip-container[data-trigger="hover"]:hover .amsi-flip-inner{transform:rotateY(var(--amsi-flip-angle,180deg))}
}
@media(prefers-reduced-motion:reduce){.amsi-flip-container .amsi-flip-inner{transition:none}}

/* v2.6: transparent WebP/PNG 3D card, configurable face/background/shape */
.amsi-flip-container{background:transparent!important;perspective:var(--amsi-flip-perspective,1100px);overflow:visible!important;border-radius:var(--amsi-flip-radius,16px);isolation:isolate}
.amsi-flip-container .amsi-flip-inner{transform-style:preserve-3d;overflow:visible;border-radius:inherit;filter:drop-shadow(0 20px 18px rgba(0,0,0,var(--amsi-flip-shadow-opacity,.2)))}
.amsi-flip-container .amsi-face{background:var(--amsi-flip-bg,transparent)!important;border-radius:var(--amsi-flip-radius,16px)!important;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.amsi-flip-container .amsi-face img{object-fit:var(--amsi-flip-fit,contain)!important;background:transparent!important}
.amsi-flip-container .amsi-face .amsi-copy{background:linear-gradient(transparent,rgba(0,0,0,.48));}
.amsi-flip-container .amsi-face:has(.amsi-copy:empty) .amsi-copy{display:none}

/* v2.7: Preserve a true 3D scene. A CSS filter on the rotating parent
   flattened both faces into one bitmap, producing a mirrored front. */
.amsi-flip-container{position:relative;perspective:var(--amsi-flip-perspective,1100px)!important;perspective-origin:50% 50%;overflow:visible!important;isolation:auto!important;transform-style:flat}
.amsi-flip-container::before{content:"";position:absolute;left:12%;right:12%;bottom:-17px;height:24px;border-radius:50%;background:rgba(0,0,0,var(--amsi-flip-shadow-opacity,.2));filter:blur(15px);pointer-events:none;z-index:-1}
.amsi-flip-container .amsi-flip-inner{position:absolute;inset:0;width:100%;height:100%;transform-style:preserve-3d!important;-webkit-transform-style:preserve-3d!important;filter:none!important;overflow:visible!important;will-change:transform;transition:transform var(--amsi-flip-duration,700ms) cubic-bezier(.22,.65,.24,1)!important}
.amsi-flip-container .amsi-face{position:absolute!important;inset:0!important;width:100%;height:100%;backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important;transform-style:flat;opacity:1!important;visibility:visible!important}
.amsi-flip-container .amsi-front{transform:rotateY(0deg)!important;-webkit-transform:rotateY(0deg)!important;z-index:1}
.amsi-flip-container .amsi-back{transform:rotateY(180deg)!important;-webkit-transform:rotateY(180deg)!important;z-index:0}
.amsi-flip-container.is-flipped .amsi-flip-inner{transform:rotateY(var(--amsi-flip-angle,180deg))!important}
@media(hover:hover) and (pointer:fine){.amsi-flip-container[data-trigger="hover"]:hover .amsi-flip-inner{transform:rotateY(var(--amsi-flip-angle,180deg))!important}}
.amsi-flip-container .amsi-face img{display:block;width:100%;height:100%;object-fit:var(--amsi-flip-fit,contain)!important}

/* v2.8 curved illusion + reflective light. Never apply filters/opacity to rotating parent: that flattens 3D. */
.amsi-flip-container .amsi-face::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:inherit;background:linear-gradient(106deg,transparent 0%,transparent 30%,rgba(255,255,255,var(--amsi-sheen-opacity,.3)) 48%,rgba(255,255,255,.04) 54%,transparent 70%);background-size:260% 100%;background-position:120% center;opacity:0;transition:opacity .15s linear,background-position var(--amsi-flip-duration,700ms) ease-in-out;mix-blend-mode:screen}
.amsi-flip-container.is-flipped .amsi-face::after,.amsi-flip-container:focus-visible .amsi-face::after{opacity:1;background-position:-120% center}
@media(hover:hover) and (pointer:fine){.amsi-flip-container[data-trigger="hover"]:hover .amsi-face::after{opacity:1;background-position:-120% center}}
/* A restrained bending illusion on each face, preserving independent backface rendering. */
.amsi-flip-container[data-curve="1"] .amsi-face img{transition:transform var(--amsi-flip-duration,700ms) cubic-bezier(.22,.65,.24,1);transform:scaleX(1) perspective(1000px) rotateY(0deg)}
.amsi-flip-container[data-curve="1"].is-flipped .amsi-face img{transform:scaleX(.965) perspective(1000px) rotateY(-2deg)}
@media(hover:hover) and (pointer:fine){.amsi-flip-container[data-curve="1"][data-trigger="hover"]:hover .amsi-face img{transform:scaleX(.965) perspective(1000px) rotateY(-2deg)}}
@media(prefers-reduced-motion:reduce){.amsi-flip-container .amsi-face::after,.amsi-flip-container .amsi-face img{transition:none!important}}

/* v2.9: Highlights and curvature exist ONLY during the turning interval. */
.amsi-flip-container .amsi-face::after{opacity:0!important;transition:none!important;background:none!important}
.amsi-flip-container .amsi-face::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;opacity:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,var(--amsi-left-shine,.45)) var(--amsi-left-position,20%),transparent 44%,transparent 56%,rgba(255,255,255,var(--amsi-right-shine,.45)) var(--amsi-right-position,80%),transparent 100%);mix-blend-mode:screen}
.amsi-flip-container.amsi-turning[data-reflection="1"] .amsi-face::before{animation:amsi-two-edge-shine var(--amsi-flip-duration,700ms) ease-in-out both}
@keyframes amsi-two-edge-shine{0%,100%{opacity:0}35%,65%{opacity:.85}}
.amsi-flip-container[data-curve="1"] .amsi-face img,.amsi-flip-container[data-curve="1"].is-flipped .amsi-face img{transform:none!important;transition:none!important}
.amsi-flip-container.amsi-turning[data-curve="1"] .amsi-face img{animation:amsi-temporary-curve var(--amsi-flip-duration,700ms) ease-in-out both}
@keyframes amsi-temporary-curve{0%,100%{transform:scaleX(1)}50%{transform:scaleX(calc(1 - var(--amsi-curve-strength,.35) * .13)) rotateY(calc(var(--amsi-curve-strength,.35) * 6deg))}}
@media(prefers-reduced-motion:reduce){.amsi-flip-container.amsi-turning .amsi-face::before,.amsi-flip-container.amsi-turning .amsi-face img{animation:none!important}}
