/* portraitDefaults.css - Default portrait positioning settings */

/* Portrait dimensions and positioning */
:root {
    /* Transform variables */
    --portrait-scale: 1.1;
    --portrait-move-step: 10px;
    --portrait-rotation: 0deg;
    --move-x: -50%;
    --move-y: -80%;
    
    /* Portrait dimensions */
    --portrait-width-standard: calc(800px / var(--preview-scale));
    --portrait-width-banner: calc(400px / var(--preview-scale));
    --portrait-height-hd: calc(1200px / var(--preview-scale));
    --portrait-height-post: calc(1000px / var(--preview-scale));
    --portrait-height-square: calc(800px / var(--preview-scale));
    --portrait-height-banner: calc(600px / var(--preview-scale));
    
    /* Base Y positions */
    --portrait-base-y-hd: calc(1200px / var(--preview-scale));
    --portrait-base-y-post: calc(800px / var(--preview-scale));
    --portrait-base-y-square: calc(800px / var(--preview-scale));
    --portrait-base-y-grid: calc(900px / var(--preview-scale));
    --portrait-base-y-banner: calc(350px / var(--preview-scale));
}

/* Common portrait styles */
/* Preview container styles */
[class*='preview'] {
    --move-x: -50%;
    --move-y: -30%;
    --portrait-scale: 3;
    --portrait-rotation: 0deg;
}



/* Portrait styles */
[class*='preview'] .preview-portrait,
[class*='preview'] .kilo-flyers-template img.model,
[class*='preview'] img.portrait,
.kilo-flyers-template .preview-portrait,
.kilo-flyers-template img.model,
.grid-item img.portrait {
    position: absolute;
    left: 50%;
    transform: translate(var(--move-x), var(--move-y)) scale(var(--portrait-scale)) rotate(var(--portrait-rotation));
    transform-origin: center;
    object-fit: cover;
    z-index: 2;
    transition: transform 0.3s ease;
    width: var(--portrait-width-standard);
}

/* Portrait sizes by type */
.hd-preview [class*='portrait'],
.hd-preview img.model {
    height: var(--portrait-height-hd);
    top: var(--portrait-base-y-hd);
}

.post-preview [class*='portrait'],
.post-preview img.model,
.grid-item img.portrait,
.kilo-flyers-template img.model {
    height: var(--portrait-height-post);
    top: var(--portrait-base-y-post);
}

.square-preview [class*='portrait'],
.square-preview img.model {
    height: var(--portrait-height-square);
    top: var(--portrait-base-y-square);
}

.banner-preview [class*='portrait'],
.banner-preview img.model {
    width: var(--portrait-width-banner);
    height: var(--portrait-height-banner);
    top: var(--portrait-base-y-banner);
}

/* Portrait movement classes */
[class*='preview'] [class*='portrait'].move-up,
[class*='preview'] img.model.move-up {
    --move-y: calc(0px - var(--portrait-move-step));
    --move-x: -50%;
}

[class*='preview'] [class*='portrait'].move-down,
[class*='preview'] img.model.move-down {
    --move-y: var(--portrait-move-step);
    --move-x: -50%;
}

[class*='preview'] [class*='portrait'].move-left,
[class*='preview'] img.model.move-left {
    --move-y: 0;
    --move-x: calc(-50% - var(--portrait-move-step));
}

[class*='preview'] [class*='portrait'].move-right,
[class*='preview'] img.model.move-right {
    --move-y: 0;
    --move-x: calc(-50% + var(--portrait-move-step));
}

[class*='preview'] [class*='portrait'][class*='move-'],
[class*='preview'] img.model[class*='move-'] {
    transform: translate(var(--move-x), var(--move-y)) scale(var(--portrait-scale)) rotate(var(--portrait-rotation));
}

/* Background and foreground styles */
.preview-background,
.preview-foreground {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.preview-background {
    z-index: 1;
}

.preview-foreground {
    z-index: 3;
}