/**
 * Image Styles - CSS classes for images and videos
 * 
 * Usage: Add CSS class to Image/Video Block in Gutenberg
 * 
 * Available classes:
 * - image-shape-organic, image-shape-vertical (mask shapes)
 * - image-float, image-float-animated (floating effect)
 */

/* ==========================================================================
   Base Shape Styles
   ========================================================================== */

/**
 * Continuous floating animation - no stops
 * Uses two separate animations with different durations
 * so they never synchronize = always moving
 */
@keyframes floatY {
    0%, 100% { transform: translateY(-4px); }
    50% { transform: translateY(4px); }
}

@keyframes floatRotate {
    0%, 100% { rotate: -0.5deg; }
    50% { rotate: 0.5deg; }
}

/**
 * Organic rounded shape
 * Works on Image Block, Video Block, or direct img/video element
 * 
 * Aspect ratio matches SVG mask viewBox (145.575 x 150.141)
 * to prevent empty space around the image
 */

/* Legacy: Figure/container gets the aspect ratio (GenerateBlocks < 2.0) */
figure.image-shape-organic,
.image-shape-organic.gb-block-image,
.image-shape-organic.wp-block-image,
.image-shape-organic.wp-block-video,
.editor-styles-wrapper figure.image-shape-organic,
.editor-styles-wrapper .image-shape-organic.gb-block-image,
.editor-styles-wrapper .image-shape-organic.wp-block-image,
.editor-styles-wrapper .image-shape-organic.wp-block-video {
    aspect-ratio: 145.575 / 150.141;
}

/* Legacy: Image/video inside figure fills the container */
.image-shape-organic img,
.image-shape-organic video,
.editor-styles-wrapper .image-shape-organic img,
.editor-styles-wrapper .image-shape-organic video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* GenerateBlocks 2.0+: Direct img/video element with class */
img.image-shape-organic,
video.image-shape-organic,
.editor-styles-wrapper img.image-shape-organic,
.editor-styles-wrapper video.image-shape-organic {
    aspect-ratio: 145.575 / 150.141;
    object-fit: cover;
}

/* Mask styles for all variants (images, videos, containers) */
.image-shape-organic img,
.image-shape-organic video,
img.image-shape-organic,
video.image-shape-organic,
div.image-shape-organic,
.image-shape-organic.gb-container,
.editor-styles-wrapper .image-shape-organic img,
.editor-styles-wrapper .image-shape-organic video,
.editor-styles-wrapper img.image-shape-organic,
.editor-styles-wrapper video.image-shape-organic,
.editor-styles-wrapper div.image-shape-organic,
.editor-styles-wrapper .image-shape-organic.gb-container {
    mask-image: url('./img/image-mask-organic.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url('./img/image-mask-organic.svg');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

/* Container-specific: aspect ratio for containers without images */
div.image-shape-organic,
.image-shape-organic.gb-container,
.editor-styles-wrapper div.image-shape-organic,
.editor-styles-wrapper .image-shape-organic.gb-container {
    aspect-ratio: 145.575 / 150.141;
}

/**
 * Vertical organic shape (taller, portrait orientation)
 * 
 * Aspect ratio matches SVG mask viewBox (191.764 x 262.103)
 * to prevent empty space around the image
 */

/* Legacy: Figure/container gets the aspect ratio (GenerateBlocks < 2.0) */
figure.image-shape-vertical,
.image-shape-vertical.gb-block-image,
.image-shape-vertical.wp-block-image,
.image-shape-vertical.wp-block-video,
.editor-styles-wrapper figure.image-shape-vertical,
.editor-styles-wrapper .image-shape-vertical.gb-block-image,
.editor-styles-wrapper .image-shape-vertical.wp-block-image,
.editor-styles-wrapper .image-shape-vertical.wp-block-video {
    aspect-ratio: 191.764 / 262.103;
}

/* Legacy: Image/video inside figure fills the container */
.image-shape-vertical img,
.image-shape-vertical video,
.editor-styles-wrapper .image-shape-vertical img,
.editor-styles-wrapper .image-shape-vertical video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* GenerateBlocks 2.0+: Direct img/video element with class */
img.image-shape-vertical,
video.image-shape-vertical,
.editor-styles-wrapper img.image-shape-vertical,
.editor-styles-wrapper video.image-shape-vertical {
    aspect-ratio: 191.764 / 262.103;
    object-fit: cover;
}

/* Mask styles for all variants (images, videos, containers) */
.image-shape-vertical img,
.image-shape-vertical video,
img.image-shape-vertical,
video.image-shape-vertical,
div.image-shape-vertical,
.image-shape-vertical.gb-container,
.editor-styles-wrapper .image-shape-vertical img,
.editor-styles-wrapper .image-shape-vertical video,
.editor-styles-wrapper img.image-shape-vertical,
.editor-styles-wrapper video.image-shape-vertical,
.editor-styles-wrapper div.image-shape-vertical,
.editor-styles-wrapper .image-shape-vertical.gb-container {
    mask-image: url('./img/image-mask-vertical.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url('./img/image-mask-vertical.svg');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

/* Container-specific: aspect ratio for containers without images */
div.image-shape-vertical,
.image-shape-vertical.gb-container,
.editor-styles-wrapper div.image-shape-vertical,
.editor-styles-wrapper .image-shape-vertical.gb-container {
    aspect-ratio: 191.764 / 262.103;
}

/**
 * Horizontal organic shape (wider, landscape orientation)
 * 
 * Aspect ratio matches SVG mask viewBox (262.103 x 191.764)
 * to prevent empty space around the image
 */

/* Legacy: Figure/container gets the aspect ratio (GenerateBlocks < 2.0) */
figure.image-shape-horizontal,
.image-shape-horizontal.gb-block-image,
.image-shape-horizontal.wp-block-image,
.image-shape-horizontal.wp-block-video,
.editor-styles-wrapper figure.image-shape-horizontal,
.editor-styles-wrapper .image-shape-horizontal.gb-block-image,
.editor-styles-wrapper .image-shape-horizontal.wp-block-image,
.editor-styles-wrapper .image-shape-horizontal.wp-block-video {
    aspect-ratio: 262.103 / 191.764;
}

/* Legacy: Image/video inside figure fills the container */
.image-shape-horizontal img,
.image-shape-horizontal video,
.editor-styles-wrapper .image-shape-horizontal img,
.editor-styles-wrapper .image-shape-horizontal video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* GenerateBlocks 2.0+: Direct img/video element with class */
img.image-shape-horizontal,
video.image-shape-horizontal,
.editor-styles-wrapper img.image-shape-horizontal,
.editor-styles-wrapper video.image-shape-horizontal {
    aspect-ratio: 262.103 / 191.764;
    object-fit: cover;
}

/* Mask styles for all variants (images, videos, containers) */
.image-shape-horizontal img,
.image-shape-horizontal video,
img.image-shape-horizontal,
video.image-shape-horizontal,
div.image-shape-horizontal,
.image-shape-horizontal.gb-container,
.editor-styles-wrapper .image-shape-horizontal img,
.editor-styles-wrapper .image-shape-horizontal video,
.editor-styles-wrapper img.image-shape-horizontal,
.editor-styles-wrapper video.image-shape-horizontal,
.editor-styles-wrapper div.image-shape-horizontal,
.editor-styles-wrapper .image-shape-horizontal.gb-container {
    mask-image: url('./img/image-mask-horizontal.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url('./img/image-mask-horizontal.svg');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

/* Container-specific: aspect ratio for containers without images */
div.image-shape-horizontal,
.image-shape-horizontal.gb-container,
.editor-styles-wrapper div.image-shape-horizontal,
.editor-styles-wrapper .image-shape-horizontal.gb-container {
    aspect-ratio: 262.103 / 191.764;
}

/* ==========================================================================
   Aspect Ratio Override
   ========================================================================== */

/**
 * Use this class to disable automatic aspect ratio
 * if you want the image to keep its original proportions
 */

/* Legacy: Figure wrapper */
figure.image-shape-no-ratio,
.image-shape-no-ratio.gb-block-image,
.image-shape-no-ratio.wp-block-image,
.image-shape-no-ratio.wp-block-video,
.editor-styles-wrapper figure.image-shape-no-ratio,
.editor-styles-wrapper .image-shape-no-ratio.gb-block-image,
.editor-styles-wrapper .image-shape-no-ratio.wp-block-image,
.editor-styles-wrapper .image-shape-no-ratio.wp-block-video {
    aspect-ratio: auto;
}

.image-shape-no-ratio img,
.image-shape-no-ratio video,
.editor-styles-wrapper .image-shape-no-ratio img,
.editor-styles-wrapper .image-shape-no-ratio video {
    width: auto;
    height: auto;
    object-fit: initial;
}

/* GenerateBlocks 2.0+: Direct img/video element */
img.image-shape-no-ratio,
video.image-shape-no-ratio,
.editor-styles-wrapper img.image-shape-no-ratio,
.editor-styles-wrapper video.image-shape-no-ratio {
    aspect-ratio: auto;
    object-fit: initial;
}

/* ==========================================================================
   Size Variants
   ========================================================================== */

/**
 * Cover - mask covers entire image/video area (may crop mask edges)
 */
.image-shape-cover img,
.image-shape-cover video,
img.image-shape-cover,
video.image-shape-cover,
.editor-styles-wrapper .image-shape-cover img,
.editor-styles-wrapper .image-shape-cover video {
    mask-size: cover;
    -webkit-mask-size: cover;
}

/**
 * Contain - full mask visible (may show image/video edges)
 * This is the default behavior
 */
.image-shape-contain img,
.image-shape-contain video,
img.image-shape-contain,
video.image-shape-contain,
.editor-styles-wrapper .image-shape-contain img,
.editor-styles-wrapper .image-shape-contain video {
    mask-size: contain;
    -webkit-mask-size: contain;
}

/* ==========================================================================
   Position Variants
   ========================================================================== */

.image-shape-top img,
.image-shape-top video,
img.image-shape-top,
video.image-shape-top,
.editor-styles-wrapper .image-shape-top img,
.editor-styles-wrapper .image-shape-top video {
    mask-position: center top;
    -webkit-mask-position: center top;
}

.image-shape-bottom img,
.image-shape-bottom video,
img.image-shape-bottom,
video.image-shape-bottom,
.editor-styles-wrapper .image-shape-bottom img,
.editor-styles-wrapper .image-shape-bottom video {
    mask-position: center bottom;
    -webkit-mask-position: center bottom;
}

.image-shape-left img,
.image-shape-left video,
img.image-shape-left,
video.image-shape-left,
.editor-styles-wrapper .image-shape-left img,
.editor-styles-wrapper .image-shape-left video {
    mask-position: left center;
    -webkit-mask-position: left center;
}

.image-shape-right img,
.image-shape-right video,
img.image-shape-right,
video.image-shape-right,
.editor-styles-wrapper .image-shape-right img,
.editor-styles-wrapper .image-shape-right video {
    mask-position: right center;
    -webkit-mask-position: right center;
}

/* ==========================================================================
   Float Effect Styles
   ========================================================================== */

/**
 * Static floating effect - soft shadow creates depth
 * Uses filter: drop-shadow() to work with masked images
 */
.image-float img,
.image-float video,
img.image-float,
video.image-float,
.editor-styles-wrapper .image-float img,
.editor-styles-wrapper .image-float video {
    filter: drop-shadow(0 20px 20px rgba(0, 0, 0, 0.15));
}

/**
 * Animated floating effect - gentle up/down motion with shadow
 */
.image-float-animated img,
.image-float-animated video,
img.image-float-animated,
video.image-float-animated,
.editor-styles-wrapper .image-float-animated img,
.editor-styles-wrapper .image-float-animated video {
    animation: floatY 6s ease-in-out infinite, floatRotate 8s ease-in-out infinite;
}
.image-float-animated-2 img,
.image-float-animated-2 video,
img.image-float-animated-2,
video.image-float-animated-2,
.editor-styles-wrapper .image-float-animated-2 img,
.editor-styles-wrapper .image-float-animated-2 video {
    animation: floatY 7s ease-in-out infinite, floatRotate 9s ease-in-out infinite;
}
@keyframes imageFloat {
    0%, 100% {
        transform: translateY(0);
        filter: drop-shadow(0 20px 20px rgba(0, 0, 0, 0.15));
    }
    50% {
        transform: translateY(-10px);
        filter: drop-shadow(0 30px 25px rgba(0, 0, 0, 0.12));
    }
}

/**
 * Reduced motion - disable animations for accessibility
 */
@media (prefers-reduced-motion: reduce) {
    .image-float-animated img,
    .image-float-animated video,
    img.image-float-animated,
    video.image-float-animated,
    .editor-styles-wrapper .image-float-animated img,
    .editor-styles-wrapper .image-float-animated video,
    .image-shape-organic img,
    .image-shape-organic video,
    img.image-shape-organic,
    video.image-shape-organic,
    .image-shape-vertical img,
    .image-shape-vertical video,
    img.image-shape-vertical,
    video.image-shape-vertical {
        animation: none;
    }
}