@property --p {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@keyframes fill {
  from {
    --p: 0%;
  }
  to {
    --p: 100%;
  }
}

.points-section {
  padding-bottom: var(--block-space-lg);
}

.points {
  width: 100%;
  position: relative;
  padding: clamp(24px, 4vw, 50px);
  border-radius: clamp(16px, 3vw, 34px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  gap: var(--block-space-sm);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

  @container (min-width: 1000px) {
    aspect-ratio: 1290 / 605;
    min-height: 420px;
  }
}

.points-box {
  /* 
  box-shadow:
    -4px -10px 13px 0 inset rgba(255, 255, 255, 0.3),
    1px 1px 0 -1px inset rgba(255, 255, 255, 0.9),
    1px 1px 2px -1px inset rgba(255, 255, 255, 0.9),
    0px -1px 2px -1px inset rgba(255, 255, 255, 0.7);

  border-radius: 18px;

  padding-left: clamp(16px, 3vw, 46px);
  padding-right: 62px;
  padding-top: clamp(16px, 3vw, 34px);
  padding-bottom: clamp(16px, 3vw, 26px);
  */

  @container (min-width: 1000px) {
    min-width: 790px;
  }

  backdrop-filter: blur(8px);
  max-width: fit-content;
  width: 100%;

  /* box-shadow:  inset 0 0 4px 0px rgba(255, 255, 255, 0.4), 1px 1px 0 -1px inset rgba(255, 255, 255, 0.1),
     1px 1px 2px -1px inset rgba(255, 255, 255, 0.1), 0px -1px 2px -1px inset rgba(255, 255, 255, 0.1);  */
  box-shadow:
    inset 0 0 4px 0px rgba(255, 255, 255, 0.4),
    1px 2px 1px -1px inset rgba(255, 255, 255, 0.9);
  /* box-shadow:  inset 0 0 4px 0px rgba(255, 255, 255, 0.4), 1px 1px 0 -1px inset rgba(255, 255, 255, 0.1);  */
  background: rgba(181, 181, 181, 0.21);
  border-radius: 18px;
  overflow: hidden;
  color: #fff;
  padding-left: clamp(16px, 5vw, 67px);
  padding-right: 77px;
  padding-top: clamp(16px, 5vw, 54px);
  padding-bottom: clamp(16px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 100px;
  overflow: hidden;
  position: relative;
}

@media (min-width: 600px) {
  .points-box {
    flex-direction: row;
    justify-content: space-between;
  }
}

.points-list-title {
  font-size: 24px;
  margin-bottom: 14px;
}

.points-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;

  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.1) 100%
  );
  border-radius: 100px;
  pointer-events: none;
}

.points-box::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;

  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(255, 255, 255, 0.1) 100%
  );
  border-radius: 0 24px 24px 0;
  pointer-events: none;
}

.points-list-items li,
.list-highlight li {
  /* white-space: nowrap; */
  width: fit-content;
  padding: 6px 16px;
  margin-inline: -16px;
}

.points-list-items li:not(:last-child) {
  margin-bottom: 4px;
}

.list-highlight li {
  position: relative;
  border-radius: 999px;
  overflow: hidden;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(
    to right,
    var(--brand-primary) var(--p, 0%),
    #fff var(--p, 0%)
  );
}

.list-highlight li.is-visible {
  animation: fill 3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.list-highlight li::before {
  content: "";
  position: absolute;
  background: var(--brand-accent-100);
  border-radius: 999px;
  z-index: -1;
  inset: 0;
  transform-origin: left center;
  transform: translateX(calc(var(--p, 0%) - 100%));
}

/* option 2 */

/* @property --p {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@keyframes fill {
  from {
    --p: 0%;
  }
  to {
    --p: 100%;
  }
}

.points-section {
  padding-bottom: var(--block-space-lg);
}

.points {
  background-size: cover;
  width: 100%;
  position: relative;
  padding: clamp(24px, 4vw, 50px);
  border-radius: clamp(16px, 3vw, 34px);
  overflow: hidden;

  aspect-ratio: 1290 / 605;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
}


.points-title{
  font-size: clamp(2rem, 3vw, 2.875rem);
  color: #fff;
  text-align: center;
}

.points-box {
  max-width: fit-content;
    min-width: 790px;
    width: 100%;

   
    background: rgb(255 255 255 / 9%);
    backdrop-filter: blur(38px) saturate(2.4) brightness(1.12);
    -webkit-backdrop-filter: blur(38px) saturate(2.4) brightness(1.12);
    border-radius: 28px;

    box-shadow:
    
      0 20px 56px rgb(0 0 0 / 24%),
      0 4px 14px rgb(0 0 0 / 14%),

      inset 0 1px 0 rgb(255 255 255 / 82%),
      inset 1px 0 0 rgb(255 255 255 / 48%),
     
      inset 0 -1px 0 rgb(140 210 255 / 55%),
      inset -1px 0 0 rgb(210 150 255 / 45%),
     
      inset 2px 3px 16px rgb(255 255 255 / 12%);

    overflow: hidden;
    isolation: isolate;
    color: #fff;
    padding-left: clamp(16px, 5vw, 67px);
    padding-right: 77px;
    padding-top: clamp(16px, 5vw, 54px);
    padding-bottom: clamp(16px, 5vw, 56px);
    display: flex;
    flex-direction: column;
    gap: 100px;
    position: relative;
}
@media (min-width: 600px) {
  .points-box {
    flex-direction: row;
    justify-content: space-between;
  }
}

.points-list-title {
  font-size: 24px;
  margin-bottom: 14px;
}


.points-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;

  background:

    linear-gradient(
      168deg,
      rgb(255 255 255 / 42%) 0%,
      rgb(255 255 255 / 0%) 32%
    ),

    conic-gradient(
      from 215deg at 78% -18%,
      hsl(0   80% 72% / 18%) 0deg,
      hsl(35  90% 72% / 14%) 50deg,
      hsl(130 78% 68% / 16%) 110deg,
      hsl(200 90% 68% / 18%) 165deg,
      hsl(270 80% 76% / 15%) 220deg,
      hsl(320 88% 72% / 13%) 270deg,
      hsl(0   80% 72% / 18%) 360deg
    );


  filter: url(#lg-prism);
  mix-blend-mode: screen;
  opacity: 0.9;
}

.points-box::after {
  content: "";
  position: absolute;
  inset: -12%;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;

  background: url("../../images/bg-points.jpg") no-repeat center center;
  background-size: cover;
  opacity: 0.28;
  filter: blur(2px) saturate(1.9);
  transform: scale(1.18);
}


.points-box > .points-list {
  position: relative;
  z-index: 1;
}

.points-list-items li {
  white-space: nowrap;
  width: max-content;
  padding: 6px 16px;
  margin-inline: -16px;
}

.points-list-items li:not(:last-child) {
  margin-bottom: 4px;
}

.points-list:last-child li {
  position: relative;
  border-radius: 999px;
  overflow: hidden;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(
    to right,
    var(--brand-primary) var(--p, 0%),
    #fff var(--p, 0%)
  );

}

.points-list:last-child li.is-visible {
  animation: fill 3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.points-list:last-child li::before {
  content: "";
  position: absolute;
  background: var(--brand-accent-100);
  border-radius: 999px;
  z-index: -1;
  inset: 0;
  transform-origin: left center;
  transform: translateX(calc(var(--p, 0%) - 100%));
} */