/* Card Style */
.card-light-rounded {
  background: linear-gradient(78deg, rgba(255,255,255,22%)  0%, rgba(255,255,255,12%)  50%, rgba(255,255,255,20%)  100%);
  color: var(--text-light);
  font-weight: 400;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
/* Background Frames */

.bg-frame-white-rounded{
  padding: 1.5rem;
  background: linear-gradient(78deg, rgba(255,255,255,92%)  0%, rgba(255,255,255,82%)  50%, rgba(255,255,255,90%)  100%);
  color: var(--text-dark);
  font-weight: 400;
  line-height: 2;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.bg-frame-white-rounded.title{
  padding: 1.5rem;
  background: linear-gradient(45deg, var(--highlight) 0%, var(--secondary-bg) 15%, var(--secondary-bg) 85%,var(--highlight) 100%);
  color: var(--text-light);
  font-weight: 400;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.bg-frame-light-rounded{
  padding: 1.5rem;
  background: linear-gradient(78deg, rgba(255,255,255,22%)  0%, rgba(255,255,255,12%)  50%, rgba(255,255,255,20%)  100%);
  color: var(--text-light);
  font-weight: 400;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.bg-frame-light-rounded.title{
  padding: 1.5rem;
  background: linear-gradient(78deg, rgba(255,255,255,22%)  0%, rgba(255,255,255,12%)  50%, rgba(255,255,255,20%)  100%);
  color: var(--text-light);
  font-weight: 400;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Image Frames */
.img-frame-round {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
}

.rough-frame {
    mask-image: url('/user/themes/horizon/images/rough-mask-1.png');
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    mask-composite: exclude;
}

/* Effects */

.img-effect-shimmer {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 30%, rgba(0, 127, 102, 0.1) 50%, transparent 70%);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}