/* ==========================================================
   Bloopin Evolution
   ========================================================== */

.bp-evolution{
  padding: clamp(40px, 8vw, 110px) 0;
  overflow: hidden;
}

.bp-evolution__inner{
  width: min(100%, calc(100% - 32px));
  margin: 0 auto;
}

.bp-evolution__head{
  max-width: 980px;
  margin: 0 auto clamp(34px, 5vw, 56px);
  text-align: center;
}

/* ==========================================================
   Stage
   ========================================================== */

.bp-evolution__stage{
  position: relative;
}

/* ==========================================================
   Progress
   ========================================================== */

.bp-evolution__progress{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 32px;
}

.bp-evolution__progress-dot{
  width: 54px;
  height: 54px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 1rem;
  font-weight: 700;
  color: var(--text);

  background: rgba(255,255,255,.72);

  border: 3px solid color-mix(in srgb, var(--primary) 10%, transparent);

  box-shadow:
    0 10px 24px rgba(15,23,42,.05),
    inset 0 1px 0 rgba(255,255,255,.75);

  transition:
    transform .35s ease,
    background .35s ease,
    border-color .35s ease,
    color .35s ease;
}

.bp-evolution__progress-dot.is-active{
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--primary) 18%, white),
    color-mix(in srgb, var(--accent) 12%, white)
  );

  border-color: color-mix(in srgb, var(--primary) 28%, transparent);

  color: var(--primary);

  transform: scale(1.06);
}

.bp-evolution__progress-line{
  width: clamp(26px, 5vw, 72px);
  height: 2px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--primary) 16%, transparent),
      rgba(17,17,17,.06)
    );
}

/* ==========================================================
   Grid
   ========================================================== */

.bp-evolution__track{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;

  align-items: stretch;

  isolation: isolate;
}

/* ==========================================================
   Card
   ========================================================== */

.bp-evolution-card{
  position: relative;

  display: flex;
  flex-direction: column;

  min-width: 0;
  height: 100%;

  padding: 22px;

  border-radius: 30px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.82),
      rgba(255,255,255,.92)
    );

  border: 1px solid rgba(255,255,255,.55);

  box-shadow:
    0 16px 40px rgba(15,23,42,.06),
    0 2px 10px rgba(15,23,42,.03);

  backdrop-filter: blur(10px);

  transition:
    transform .45s cubic-bezier(.2,.7,.2,1),
    box-shadow .35s ease,
    border-color .35s ease;

  opacity: 0;
  transform: translateY(34px);
}

.bp-evolution-card{
  opacity: .72;
  transform: scale(.96);
}

.bp-evolution-card.is-active{
  opacity: 1;
  transform: translateY(-8px) scale(1);

  box-shadow:
    0 30px 70px rgba(15,23,42,.12),
    0 10px 26px rgba(15,23,42,.06);

  z-index: 10;
}

.bp-evolution.is-visible .bp-evolution-card{
  opacity: 1;
  transform: translateY(0);
}

.bp-evolution.is-visible .bp-evolution-card:nth-child(2){
  transition-delay: .08s;
}

.bp-evolution.is-visible .bp-evolution-card:nth-child(3){
  transition-delay: .16s;
}

.bp-evolution.is-visible .bp-evolution-card:nth-child(4){
  transition-delay: .24s;
}

.bp-evolution-card:hover{
  transform: translateY(-6px);

  box-shadow:
    0 26px 60px rgba(15,23,42,.09),
    0 8px 20px rgba(15,23,42,.04);

  border-color:
    color-mix(in srgb, var(--primary) 12%, rgba(255,255,255,.55));
}

/* ==========================================================
   Top
   ========================================================== */

.bp-evolution-card__top{
  display: flex;
  align-items: center;
  gap: 14px;

  margin-bottom: 16px;
}

.bp-evolution-card__icon{
  width: 52px;
  height: 52px;
  flex: 0 0 52px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 18px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.9),
      rgba(255,255,255,.6)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 10px 24px rgba(15,23,42,.05);
}

.bp-evolution-card__icon .bp-icon{
  color: var(--primary);
}

.bp-evolution-card__heading{
  min-width: 0;
}

.bp-evolution-card__step{
  display: inline-block;

  margin-bottom: 4px;

  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;

  color:
    color-mix(in srgb, var(--primary) 72%, var(--text));
}

.bp-evolution-card__heading h3{
  margin: 0;

  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  line-height: 1.05;
  letter-spacing: -.04em;

  color: var(--text);

  text-wrap: balance;
}

/* ==========================================================
   Text
   ========================================================== */

.bp-evolution-card__text{
  margin: 0 0 18px;

  font-size: .98rem;
  line-height: 1.6;

  color: var(--text-soft);

  text-wrap: pretty;
}

/* ==========================================================
   Media
   ========================================================== */


.bp-evolution-card__media{
  position: relative;
  width: 100%;
  height: clamp(320px, 34vw, 500px);

  margin-bottom: 20px;

  border-radius: 24px;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--primary) 4%, white),
      color-mix(in srgb, var(--accent) 4%, white)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 12px 30px rgba(15,23,42,.05);
}

.bp-evolution-card__image{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  display: block;
 object-fit: contain;
  object-position: center top;
  pointer-events: none;
}

.bp-evolution-card__media lottie-player{
  position: absolute;
  width: 118%;
  height: 118%;
  min-height: 118%;

  left: 61%;
  top:26%;

  transform: translateX(-50%);
  pointer-events: none;
}



.bp-evolution-card__placeholder{
  position: absolute;

  left: 50%;
  top: 0;

  width: 112%;
  height: 125%;

  transform: translateX(-50%);

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(
      circle at top,
      rgba(255,255,255,.95),
      rgba(255,255,255,.72)
    );

  overflow: hidden;
}

.bp-evolution-card__placeholder::before{
  content: "";

  position: absolute;
  inset: auto 0 -30% 0;

  height: 50%;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0),
      rgba(248,251,255,.92)
    );
}

.bp-evolution-card__placeholder span{
  position: relative;
  z-index: 2;

  padding: 12px 18px;

  border-radius: 999px;

  background: rgba(255,255,255,.72);

  box-shadow:
    0 10px 24px rgba(15,23,42,.05);

  font-size: .92rem;
  font-weight: 600;

  color: var(--text);
}

/* ==========================================================
   List
   ========================================================== */

.bp-evolution-card__list{
  display: flex;
  flex-direction: column;
  gap: 12px;

  margin: 0;
  padding: 0;

  list-style: none;
}

.bp-evolution-card__list li{
  display: flex;
  align-items: flex-start;
  gap: 10px;

  font-size: .95rem;
  line-height: 1.45;

  color: var(--text);
}

.bp-evolution-card__list li span{
  width: 22px;
  height: 22px;
  flex: 0 0 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-top: 1px;

  border-radius: 999px;

  background:
    color-mix(in srgb, var(--success) 14%, white);

  color: var(--success);

  font-size: .8rem;
  font-weight: 700;
}

/* ==========================================================
   Footer
   ========================================================== */

.bp-evolution-card__footer{
  margin-top: auto;
  padding-top: 20px;
}

.bp-evolution-card__footer span{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 42px;
  padding: 10px 16px;

  border-radius: 999px;

  background:
    color-mix(in srgb, var(--primary) 8%, white);

  color: var(--primary);

  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;

  text-align: center;
}

/* ==========================================================
   Themes
   ========================================================== */

.bp-evolution-card--menu .bp-evolution-card__icon{
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--warning) 16%, white),
      rgba(255,255,255,.7)
    );
}

.bp-evolution-card--collect .bp-evolution-card__icon{
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--primary) 14%, white),
      rgba(255,255,255,.7)
    );
}

.bp-evolution-card--table .bp-evolution-card__icon{
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--success) 14%, white),
      rgba(255,255,255,.7)
    );
}

.bp-evolution-card--loyalty .bp-evolution-card__icon{
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--premium) 18%, white),
      rgba(255,255,255,.7)
    );
}

/* ==========================================================
   Nav
   ========================================================== */

.bp-evolution__nav,
.bp-evolution__dots{
  display: none;
}

.bp-evolution__nav{
  justify-content: center;
  gap: 12px;

  margin-top: 22px;
}

.bp-evolution__nav-btn{
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  color: #555;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  appearance: none;
  -webkit-appearance: none;
}

.bp-evolution__nav-btn:hover{
  background: rgba(0,0,0,.09);
}

.bp-evolution__nav-btn:disabled{
  opacity: .45;
  cursor: default;
}

.bp-evolution__nav-btn .bp-icon,
.bp-evolution__nav-btn svg{
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  flex: 0 0 20px;
  color: #6b7280;
  overflow: visible !important;
}

.bp-evolution__nav-btn .bp-icon path,
.bp-evolution__nav-btn svg path{
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.bp-evolution__nav-btn:focus,
.bp-evolution__nav-btn:focus-visible,
.bp-evolution__nav-btn:active{
  outline: none !important;

  background: #ffffff;

  box-shadow:
    0 0 0 3px rgba(107,114,128,.14),
    0 0 0 6px rgba(107,114,128,.08) !important;
}

/* ==========================================================
   Dots
   ========================================================== */

.bp-evolution__dots{
  justify-content: center;
  align-items: center;
  gap: 8px;

  margin-top: 14px;
}

.bp-evolution__dots button{
  width: 8px;
  height: 8px;

  border: 0;
  padding: 0;

  border-radius: 999px;

  background: rgba(15,23,42,.16);

  transition:
    transform .25s ease,
    background .25s ease,
    opacity .25s ease;
}

.bp-evolution__dots button.is-active{
  transform: scale(1.25);

  background: #000000;
}

/* ==========================================================
   Tablet
   ========================================================== */

@media (max-width: 1580px){

  .bp-evolution{
    padding: 72px 0;
  }

  .bp-evolution__inner{
    width: calc(100% - 24px);
  }

  .bp-evolution__progress{
    margin-bottom: 24px;
  }

  .bp-evolution__track{
    display: flex;

    gap: 16px;

    transition:
      transform .55s cubic-bezier(.2,.7,.2,1);

    will-change: transform;
  }

  .bp-evolution-card{
    flex: 0 0 clamp(320px, 72vw, 560px);
    max-width: clamp(320px, 72vw, 560px);
  

    opacity: 1;
    transform: none;
  }

  

  .bp-evolution__nav,
  .bp-evolution__dots{
    display: flex;
  }

.bp-evolution-card__media{
  height: clamp(400px, 62vw, 560px);
}
}

/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 767px){

  .bp-evolution{
    padding: 56px 0;
  }

    .bp-evolution-card{
    flex: 0 0 88%;
    max-width: 88%;
  }

  .bp-evolution__inner{
    width: calc(100% - 16px);
  }

  .bp-evolution__head{
    margin-bottom: 24px;
  }

  .bp-evolution__progress{
    gap: 8px;

    margin-bottom: 18px;
  }

  .bp-evolution__progress-dot{
    width: 42px;
    height: 42px;

    font-size: .9rem;
  }

  .bp-evolution__progress-dot{
  cursor: pointer;
}

.bp-evolution__progress-dot.is-active{
  transform: scale(1.12);
}

  .bp-evolution__progress-line{
    width: 18px;
  }

  .bp-evolution__track{
    gap: 14px;
  }

  .bp-evolution-card{
    flex: 0 0 88%;
    max-width: 88%;

    padding: 18px;

    border-radius: 24px;
  }

  .bp-evolution-card__top{
    gap: 12px;
    margin-bottom: 14px;
  }

  .bp-evolution-card__icon{
    width: 46px;
    height: 46px;
    flex: 0 0 46px;

    border-radius: 16px;
  }

  .bp-evolution-card__heading h3{
    font-size: 1.15rem;
  }

  .bp-evolution-card__text{
    margin-bottom: 16px;

    font-size: .92rem;
    line-height: 1.55;
  }

.bp-evolution-card__media{
  height: clamp(320px, 96vw, 430px);
  margin-bottom: 18px;
  border-radius: 20px;
}

  .bp-evolution-card__list{
    gap: 10px;
  }

  .bp-evolution-card__list li{
    font-size: .9rem;
  }

  .bp-evolution-card__footer{
    padding-top: 18px;
  }

  .bp-evolution-card__footer span{
    width: 100%;

    font-size: .76rem;
  }

  .bp-evolution__nav{
    margin-top: 18px;
  }

  .bp-evolution__nav-btn{
    width: 42px;
    height: 42px;
  }
}

/* ==========================================================
   Small mobile
   ========================================================== */

@media (max-width: 380px){

  .bp-evolution-card{
    flex: 0 0 92%;
    max-width: 92%;
  }

@media (max-width: 380px){
  .bp-evolution-card__media{
    height: clamp(300px, 98vw, 380px);
  }
}
}

/* ==========================================================
   Reduced motion
   ========================================================== */

@media (prefers-reduced-motion: reduce){

  .bp-evolution-card,
  .bp-evolution__track,
  .bp-evolution__progress-dot,
  .bp-evolution__nav-btn,
  .bp-evolution__dots button{
    transition: none !important;
    animation: none !important;
  }
}


.bp-evolution-card__preview{
  position: absolute;
  inset: 0;
  z-index: 3;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  opacity: 1;
  transform: scale(1);

  transition:
    opacity .45s ease,
    transform .55s cubic-bezier(.2,.7,.2,1);
}

.bp-evolution-card.has-preview .bp-evolution-card__image,
.bp-evolution-card.has-preview .bp-evolution-card__lottie{
  opacity: 0;
  transition: opacity .45s ease;
}

.bp-evolution-card.has-preview.is-active .bp-evolution-card__preview{
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
}

.bp-evolution-card.has-preview.is-active .bp-evolution-card__image,
.bp-evolution-card.has-preview.is-active .bp-evolution-card__lottie{
  opacity: 1;
}

.bp-evolution-card__media .bp-evolution-card__preview{
  position: absolute;
  inset: 0;
  z-index: 3;

  width: 100% !important;
  height: 100% !important;

  display: block;

  object-fit: cover !important;
  object-position: center center !important;

  border-radius: inherit;
}