/* The original image defines the frame. Videos crop centrally, without distortion. */
.has-project-preview{position:relative;overflow:hidden}
.has-project-preview>.project-preview-video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%;opacity:0;pointer-events:none;border-radius:inherit;transition:opacity .25s ease;z-index:1}
.has-project-preview.preview-playing>.project-preview-video{opacity:1}
/* Four tilted landscape cards; Altered is a smaller supporting visual. */
.composition .ai-card{position:absolute;aspect-ratio:16/9;opacity:0;transform:translateY(70px) rotate(var(--tilt)) scale(.96);transform-origin:center;transition:opacity .65s ease,transform 1.1s cubic-bezier(.22,.7,.25,1);transition-delay:0ms;border-radius:16px;overflow:hidden;background:#17232b;box-shadow:0 14px 32px #17232b20}
.mode-ai .composition-ai .ai-card{opacity:1;transform:translateY(0) rotate(var(--tilt)) scale(1);transition-delay:calc(var(--order)*70ms)}
.composition .ai-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:1;transform:none;transition:none}
.composition-ai .comp-izipizi.ai-card{width:51%;left:0;right:auto;top:17%;--tilt:-7deg;z-index:2}
.composition-ai .comp-fruzz.ai-card{width:46%;left:53%;right:auto;top:9%;--tilt:7deg;z-index:1}
.composition-ai .comp-thecure.ai-card{width:53%;left:3%;right:auto;top:52%;--tilt:-4deg;z-index:3}
.composition-ai .comp-altered.ai-card{width:36%;left:61%;right:auto;top:59%;--tilt:8deg;z-index:2}
@media(prefers-reduced-motion:reduce){.has-project-preview>.project-preview-video{display:none}.composition .ai-card{transition:none}}

/* Portrait montage: full frame width, crop equally above and below. */
[data-slug="too-good-to-go"] .has-project-preview>.project-preview-video{inset:auto 0 auto;top:50%;width:100%;height:auto;transform:translateY(-50%);object-fit:contain}