/* Phoca Particles - Image Background Styles */
/* Use: "phImgBgPattern phImageBgPatternHexagon" */

:root {
    --pp-image-bg-item-color: #f5f5f5;
}

[data-bs-theme="dark"] {
     --pp-image-bg-item-color: #f0f0f0;
}

.phImgBgPattern .phModParticlesItemImage {
    position: relative;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.phImgBgPattern .phModParticlesItemImage img {
    z-index: 2;
    margin: 0 auto;
}

.phImgBgPattern .phModParticlesImageContent .phModParticlesItem .phModParticlesItemImage,
.phImgBgPattern .phModParticlesImageContent .phModParticlesItem.pmpReverse .phModParticlesItemImage {
        padding: 0;
}


/* Dots */
.phImgBgPattern.phImgBgPatternDots .phModParticlesItemImage::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 99%;
    height: 99%;
    z-index: 1;

    background-image: radial-gradient(circle, var(--pp-image-bg-item-color) 30%, transparent 22%);
    background-size: 25px 25px;
    background-position: center center;

    -webkit-mask-image: radial-gradient(circle at center, black 20%, rgba(0,0,0,0.4) 50%, transparent 80%);
    mask-image: radial-gradient(circle at center, black 20%, rgba(0,0,0,0.4) 50%, transparent 80%);

    opacity: 0.7;
    pointer-events: none;
}

/* Cube */
.phImgBgPattern.phImgBgPatternCube .phModParticlesItemImage::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 99%;
    height: 99%;
    z-index: 1;

    background-color: transparent;
    background-image:
    linear-gradient(30deg, var(--pp-image-bg-item-color) 12%, transparent 12.5%, transparent 87%, var(--pp-image-bg-item-color) 87.5%, var(--pp-image-bg-item-color)),
    linear-gradient(-30deg, var(--pp-image-bg-item-color) 12%, transparent 12.5%, transparent 87%, var(--pp-image-bg-item-color) 87.5%, var(--pp-image-bg-item-color)),
    linear-gradient(30deg, var(--pp-image-bg-item-color) 12%, transparent 12.5%, transparent 87%, var(--pp-image-bg-item-color) 87.5%, var(--pp-image-bg-item-color)),
    linear-gradient(-30deg, var(--pp-image-bg-item-color) 12%, transparent 12.5%, transparent 87%, var(--pp-image-bg-item-color) 87.5%, var(--pp-image-bg-item-color)),
    linear-gradient(60deg, var(--pp-image-bg-item-color) 25%, transparent 25.5%, transparent 75%, var(--pp-image-bg-item-color) 75%, var(--pp-image-bg-item-color)),
    linear-gradient(60deg, var(--pp-image-bg-item-color) 25%, transparent 25.5%, transparent 75%, var(--pp-image-bg-item-color) 75%, var(--pp-image-bg-item-color));

    background-size: 40px 70px;
    background-position: 0 0, 0 0, 20px 35px, 20px 35px, 0 0, 20px 35px;

    -webkit-mask-image: radial-gradient(circle at center, black 10%, rgba(0,0,0,0.5) 40%, transparent 75%);
    mask-image: radial-gradient(circle at center, black 10%, rgba(0,0,0,0.5) 40%, transparent 75%);

    opacity: 0.5;
    pointer-events: none;
}


/* Hexagon */
.phImgBgPattern.phImgBgPatternHexagon .phModParticlesItemImage::after {
    --pattern-color: var(--pp-image-bg-item-color);

    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 99%;
    height: 99%;
    z-index: 1;

    background-color: var(--pattern-color);

    -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath fill='black' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9z'/%3E%3C/svg%3E"),
    radial-gradient(circle at center, black 10%, rgba(0,0,0,0.5) 45%, transparent 75%);

    mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath fill='black' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9z'/%3E%3C/svg%3E"),
    radial-gradient(circle at center, black 10%, rgba(0,0,0,0.5) 45%, transparent 75%);

    -webkit-mask-composite: source-in;
    mask-composite: intersect;

    -webkit-mask-size: 30px 30px, 100% 100%;
    mask-size: 30px 30px, 100% 100%;

    -webkit-mask-repeat: repeat, no-repeat;
    mask-repeat: repeat, no-repeat;

    opacity: 0.6;
    pointer-events: none;
}

/* ColoredSquares */
.phImgBgPattern.phImgBgPatternColoredSquares .phModParticlesItemImage::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 99%;
    height: 99%;
    z-index: 1;

    background-image:
    conic-gradient(from 90deg at 2px 2px, transparent 90deg, rgba(255,255,255,0.05) 0), /* jemná mřížka */
    conic-gradient(#ff5733 0.25turn, #33c4ff 0.25turn 0.5turn, #ffd700 0.5turn 0.75turn, #8eff33 0.75turn);

    background-size: 40px 40px;

    background-blend-mode: overlay;
    background-attachment: local;

    -webkit-mask-image: radial-gradient(circle at center, black 10%, rgba(0,0,0,0.5) 40%, transparent 75%);
    mask-image: radial-gradient(circle at center, black 10%, rgba(0,0,0,0.5) 40%, transparent 75%);

    opacity: 0.6;
}

/* ColoredSquaresLarge */
.phImgBgPattern.phImgBgPatternColoredSquaresLarge .phModParticlesItemImage::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 99%;
    height: 99%;
    z-index: 1;

    background-image:
     linear-gradient(#FF5733, #FF5733),
     linear-gradient(#33C4FF, #33C4FF),
     linear-gradient(#FFD700, #FFD700),
     linear-gradient(#8EFF33, #8EFF33);

    background-size: 140px 70px, 50px 50px, 85px 85px, 60px 60px;

    background-position:
    10% 30%,
    85% 15%,
    70% 80%,
    15% 70%;

    background-repeat: no-repeat;

    -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 90%);
    mask-image: radial-gradient(circle at center, black 30%, transparent 90%);

    opacity: 1;
    pointer-events: none;
}


/* ColoredSpots */
.phImgBgPattern.phImgBgPatternColoredSpots .phModParticlesItemImage::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 99%;
    height: 99%;
    z-index: 1;

    background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 87, 51, 0.9) 80%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(51, 196, 255, 0.9) 80%, transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(255, 215, 0, 0.9) 80%, transparent 50%);

    filter: blur(20px);

    -webkit-mask-image: radial-gradient(circle at center, black 20%, transparent 70%);
    mask-image: radial-gradient(circle at center, black 20%, transparent 70%);

    opacity: 0.9;
}

/* Shadow */
.phImgBgPattern.phImgBgPatternShadow .phModParticlesItemImage::after {
    content: "";
    position: absolute;
    bottom: 5px;
    left: 5%;
    width: 90%;
    height: 20px;
    background: rgba(0,0,0,0.4);
    filter: blur(15px);
    z-index: 1;
}