/* Image Clipping Masks & PS Neon Card Styles */

/* --- Image Clipping Mask --- */

.image-mask-wrapper {
    position: relative;
    display: inline-block; /* Changed to inline-block for better flow control */
    line-height: 0;
    /* overflow: hidden; /* Removed to allow shadow visibility */
    max-width: 100%;
    vertical-align: middle; /* Helps align with text if needed */
    transform: translateZ(0); /* Keep for potential rendering benefits */
}

.image-mask-wrapper img {
    display: block;
    width: 100%; /* Default: fill wrapper */
    height: 100%; /* Default: fill wrapper */
    /* object-fit and object-position will be applied inline via PHP if width/height are set */
    /* filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5)); /* Removed from img */
}

/* If width and height are set on the wrapper, apply object-fit to the image */
.image-mask-wrapper[style*="width"] img,
.image-mask-wrapper[style*="height"] img {
     object-fit: cover; /* Cover the area, cropping if necessary */
}


/* --- Clip Path Shapes --- */

/* Circle */
.image-mask-wrapper.mask-circle {
    clip-path: circle(50% at 50% 50%);
    -webkit-clip-path: circle(50% at 50% 50%);
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5)); /* Added drop shadow back */
}

/* Ellipse */
.image-mask-wrapper.mask-ellipse {
    clip-path: ellipse(50% 40% at 50% 50%);
    -webkit-clip-path: ellipse(50% 40% at 50% 50%);
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5)); /* Added drop shadow back */
}

/* Triangle (pointing up) */
.image-mask-wrapper.mask-triangle {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5)); /* Added drop shadow back */
}

/* Hexagon */
.image-mask-wrapper.mask-hexagon {
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5)); /* Added drop shadow back */
}

/* Star (5-point) */
.image-mask-wrapper.mask-star {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5)); /* Added drop shadow back */
}

/* Blob 1 */
.image-mask-wrapper.mask-blob1 {
    clip-path: polygon(
        0% 20%, 15% 15%, 30% 0%, 50% 5%, 70% 0%, 85% 15%, 100% 20%,
        95% 50%, 100% 80%, 85% 85%, 70% 100%, 50% 95%, 30% 100%, 15% 85%, 0% 80%, 5% 50%
    );
     -webkit-clip-path: polygon(
        0% 20%, 15% 15%, 30% 0%, 50% 5%, 70% 0%, 85% 15%, 100% 20%,
        95% 50%, 100% 80%, 85% 85%, 70% 100%, 50% 95%, 30% 100%, 15% 85%, 0% 80%, 5% 50%
    );
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5)); /* Added drop shadow back */
}

/* Blob 2 */
.image-mask-wrapper.mask-blob2 {
    clip-path: polygon(
        20% 0%, 80% 0%, 100% 20%, 90% 50%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 10% 50%, 0% 20%
    );
    -webkit-clip-path: polygon(
        20% 0%, 80% 0%, 100% 20%, 90% 50%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 10% 50%, 0% 20%
    );
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5)); /* Added drop shadow back */
}

/* Badge Shape */
.image-mask-wrapper.mask-badge {
    clip-path: polygon(
        50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%
    );
     -webkit-clip-path: polygon(
        50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%
    );
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5)); /* Added drop shadow back */
}
.image-mask-wrapper.mask-inset {
    clip-path: inset(
    5% 20% 15% 10% round 5% 20% 0 10%
    );
    -webkit-clip-path: inset(
    5% 20% 15% 10% round 5% 20% 0 10%
    );
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5)); /* Added drop shadow back */
}

.image-mask-wrapper.mask-message {
    clip-path: polygon(
    0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%
    );
    -webkit-clip-path: polygon(
    0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%
    );
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5)); /* Added drop shadow back */
}
.image-mask-wrapper.mask-leftpoint {
    clip-path: polygon(
    25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%
    );
    -webkit-clip-path: polygon(
    25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%
    );
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5)); /* Added drop shadow back */
}
.image-mask-wrapper.mask-rightpoint {
    clip-path: polygon(
    0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%
    );
    -webkit-clip-path: polygon(
    0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%
    );
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5)); /* Added drop shadow back */
}
.image-mask-wrapper.mask-leftchevron {
    clip-path: polygon(
    100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%
    );
    -webkit-clip-path: polygon(
    100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%
    );
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5)); /* Added drop shadow back */
}
.image-mask-wrapper.mask-rightchevron {
    clip-path: polygon(
    75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%
    );
    -webkit-clip-path: polygon(
    75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%
    );
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5)); /* Added drop shadow back */
}
.image-mask-wrapper.mask-rhombus {
    clip-path: polygon(
    50% 0%, 100% 50%, 53% 89%, 0% 50%
    );
    -webkit-clip-path: polygon(
    50% 0%, 100% 50%, 53% 89%, 0% 50%
    );
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5)); /* Added drop shadow back */
}
.image-mask-wrapper.mask-parallel {
    clip-path: polygon(
    25% 0%, 100% 0%, 75% 100%, 0% 100%
    );
    -webkit-clip-path: polygon(
    25% 0%, 100% 0%, 75% 100%, 0% 100%
    );
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5)); /* Added drop shadow back */
}
.image-mask-wrapper.mask-message2 {
    clip-path: polygon(
    0.4% 0.3%, 100% 0%, 95% 85.8%, 20.1% 74%, 10.4% 100%, 14.1% 78.8%, 4.8% 77%
    );
    -webkit-clip-path: polygon(
    0.4% 0.3%, 100% 0%, 95% 85.8%, 20.1% 74%, 10.4% 100%, 14.1% 78.8%, 4.8% 77%
    );
    }





/* --- PS Neon Card --- */
/* Based on https://uiverse.io/gharsh11032000/tasty-frog-49 */

.ps-neon-card {
  --main-color: #00aaff; /* Default neon color - can be overridden with inline style */
  --bg-color: #1a1f25;   /* Default background */
  position: relative;
  padding: 25px; /* Add padding for content inside */
  background: var(--bg-color);
  border-radius: 10px;
  overflow: hidden; /* Important to contain pseudo-elements */
  z-index: 1; /* Ensure content is above pseudo-elements */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.ps-neon-card::before {
  content: '';
  position: absolute;
  z-index: -2; /* Behind the card */
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  background-color: var(--bg-color); /* Match background */
  background-repeat: no-repeat;
  background-size: 50% 50%;
  background-position: 0 0;
  background-image: conic-gradient(var(--main-color), var(--main-color), transparent, transparent); /* The rotating gradient */
  animation: rotate 4s linear infinite;
}

.ps-neon-card::after {
  content: '';
  position: absolute;
  z-index: -1; /* Behind content, above ::before */
  left: 3px; /* Adjust for border thickness */
  top: 3px;
  width: calc(100% - 6px); /* Adjust for border thickness */
  height: calc(100% - 6px);
  background: var(--bg-color); /* Match background */
  border-radius: 7px; /* Slightly smaller radius */
}

/* Animation for the gradient rotation */
@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}

/* Optional: Style content inside the card */
.ps-neon-card > * {
    position: relative; /* Ensure content stays above pseudo-elements */
    z-index: 2;
    color: #fff; /* Default text color */
}

.ps-neon-card h1,
.ps-neon-card h2,
.ps-neon-card h3,
.ps-neon-card p {