/* Core reflection styles */
.reflection {
    position: relative;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    will-change: transform;
}

/* WebKit reflection */
@supports (-webkit-box-reflect: below) {
    .reflection {
        -webkit-box-reflect: below 0 linear-gradient(
            transparent,
            rgba(0, 0, 0, 0.2)
        );
    }
}

/* Fallback for non-WebKit browsers */
@supports not (-webkit-box-reflect: below) {
    .reflection::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -1px; 
        width: 100%;
        height: 50%;
        transform: scaleY(-1);
        opacity: 0.5;
        pointer-events: none;
        background: inherit;
        background-size: cover;
        background-position: bottom;
        mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.5) 50%,
            transparent 100%
        );
        -webkit-mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.5) 50%,
            transparent 100%
        );
    }
}

/* Border radius variants */
.reflection--rounded-sm {
    border-radius: 0.5rem;
}

.reflection--rounded-md {
    border-radius: 1rem;
}

.reflection--rounded-lg {
    border-radius: 1.5rem;
}

/* Apply border radius to reflection */
.reflection--rounded-sm::after {
    border-radius: 0.5rem;
}

.reflection--rounded-md::after {
    border-radius: 1rem;
}

.reflection--rounded-lg::after {
    border-radius: 1.5rem;
}

/* Reflection intensity modifiers */
.reflection--soft::after {
    opacity: 0.3;
}

.reflection--medium::after {
    opacity: 0.5;
}

.reflection--strong::after {
    opacity: 0.7;
}

/* Reflection height modifiers */
.reflection--short::after {
    height: 25%;
}

.reflection--normal::after {
    height: 50%;
}

.reflection--tall::after {
    height: 75%;
}

/* Distance modifiers */
.reflection--close::after {
    bottom: -2px;
}

.reflection--far::after {
    bottom: -8px;
}

/* Optional blur effect */
.reflection--blur::after {
    filter: blur(2px);
}

/* Prevent overflow issues */
.reflection-container {
    overflow: visible;
    padding-bottom: 4rem;
}


/* eg usage */
/* <div class="reflection-container">
  <!-- Basic reflection -->
  <img src="-image.jpg" class="reflection">
</div>

<div class="reflection-container">
  <!-- Customized reflection with multiple modifiers -->
  <div class="reflection 
              reflection--rounded-lg 
              reflection--strong 
              reflection--tall 
              reflection--far 
              reflection--blur"
       style="background: #3498db; padding: 2rem; color: white;">
    <h2>Reflected Content</h2>
    <p>This element has a styled reflection</p>
  </div>
</div>

<div class="reflection-container">
  <!-- Image reflection with medium settings -->
  <img src="product-photo.jpg" 
       class="reflection reflection--rounded-md reflection--medium reflection--normal">
</div> */