/* ------------------------------ PROMO BOXES ------------------------------ */

.index_promo_box_container {
    display: grid;
    gap: 35px;
    grid-template-columns: 100%;
    margin: 25px auto 0 auto;
    max-width: 1250px;
    width: 100%;
}

.index_promo_box {
    background-color: #111111;
    border: 1px solid #ffffff36;
    border-radius: 15px;
    box-shadow: 0 8px 22px #0000004d;
    overflow: hidden;
    position: relative;
}

.index_promo_box_background,
.index_promo_box_overlay {
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
}

.index_promo_box_background {
    object-fit: cover;
}

.index_promo_box_content {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 315px;
    padding: 38px;
    position: relative;
    text-align: center;
    z-index: 1;
}

.index_promo_box_front {
    display: block;
    margin: auto auto 20px auto;
    max-height: 215px;
    max-width: 50%;
    object-fit: contain;
}

.index_promo_box_copy {
    color: #ffffff;
    text-shadow: 0 1px 4px #000000c7;
    width: 100%;
}

.index_promo_box_copy h1 {
  text-shadow: 0px 0px 15px #000000;
}

.index_promo_box_copy h2 {
  font-size: 26px;
  font-weight: 500;
  text-shadow: 0px 0px 5px #00000087;
}

.index_promo_box_text_default { color: #ffffff; }
.index_promo_box_text_purple { color: #c98cff; }

.index_promo_box_text_gold {
  color: #daad54;

  background:
    linear-gradient(
      115deg,
      #7a4f12 0%,
      #b8860b 10%,
      #f7d774 20%,
      #fff6bf 30%,
      #c89422 42%,
      #8f5f12 52%,
      #e7bd4f 64%,
      #fff9d0 74%,
      #b77b16 86%,
      #6f430d 100%
    );

  background-size: 260% 100%;
  background-position: 0% 50%;

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18),
    0 2px 3px rgba(70, 38, 5, 0.25),
    0 0 4px rgba(218, 173, 84, 0.18);

  filter: saturate(1.15) brightness(1);
  animation: gold_text_glisten 3.8s ease-in-out infinite;
}

@keyframes gold_text_glisten {
  0% {
    background-position: 0% 50%;
    filter: saturate(1.1) brightness(1);
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.14),
      0 2px 3px rgba(70, 38, 5, 0.22),
      0 0 3px rgba(218, 173, 84, 0.14);
  }

  45% {
    background-position: 100% 50%;
    filter: saturate(1.28) brightness(1.1);
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.26),
      0 2px 4px rgba(70, 38, 5, 0.3),
      0 0 7px rgba(255, 220, 105, 0.32);
  }

  70% {
    background-position: 72% 50%;
    filter: saturate(1.2) brightness(1.04);
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.2),
      0 2px 3px rgba(70, 38, 5, 0.26),
      0 0 5px rgba(255, 210, 90, 0.24);
  }

  100% {
    background-position: 0% 50%;
    filter: saturate(1.1) brightness(1);
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.14),
      0 2px 3px rgba(70, 38, 5, 0.22),
      0 0 3px rgba(218, 173, 84, 0.14);
  }
}

.index_promo_box_text_silver {
  color: #bec4ca;

  background:
    linear-gradient(
      115deg,
      #5f666d 0%,
      #8f969d 10%,
      #f7f9fb 20%,
      #c8ced4 30%,
      #747d86 42%,
      #e8ecef 54%,
      #ffffff 64%,
      #aab2ba 74%,
      #747d86 86%,
      #d8dde2 100%
    );

  background-size: 260% 100%;
  background-position: 0% 50%;

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16),
    0 2px 3px rgba(40, 45, 50, 0.24),
    0 0 4px rgba(190, 196, 202, 0.18);

  filter: saturate(1.05) brightness(1);
  animation: silver_text_glisten 4s ease-in-out infinite;
}

@keyframes silver_text_glisten {
  0% {
    background-position: 0% 50%;
    filter: saturate(1.02) brightness(1);
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.12),
      0 2px 3px rgba(40, 45, 50, 0.22),
      0 0 3px rgba(190, 196, 202, 0.14);
  }

  45% {
    background-position: 100% 50%;
    filter: saturate(1.12) brightness(1.14);
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.28),
      0 2px 4px rgba(40, 45, 50, 0.3),
      0 0 7px rgba(245, 248, 250, 0.32);
  }

  70% {
    background-position: 72% 50%;
    filter: saturate(1.08) brightness(1.06);
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.2),
      0 2px 3px rgba(40, 45, 50, 0.26),
      0 0 5px rgba(220, 226, 232, 0.24);
  }

  100% {
    background-position: 0% 50%;
    filter: saturate(1.02) brightness(1);
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.12),
      0 2px 3px rgba(40, 45, 50, 0.22),
      0 0 3px rgba(190, 196, 202, 0.14);
  }
}

.index_promo_box_text_blue { color: #48b9ff; }
.index_promo_box_text_black { color: #000000; }

.index_promo_box_description {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 145%;
    margin: 25px 0 0 0;
}

.index_promo_box_description p {
    margin: 0 0 12px 0;
}

.index_promo_box_description p:last-child {
    margin-bottom: 0;
}

.index_promo_box_button,
.index_promo_box_button:link,
.index_promo_box_button:visited,
.index_promo_box_button:active {
    border-radius: 4px;
    color: #ffffff;
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 600;
    margin-top: 25px;
    padding: 11px 18px;
    text-decoration: none;
    text-shadow: none;
    transition: all .2s ease-in;
}

.index_promo_box_button:hover {
    box-shadow: 0 0 12px #00000080;
    text-decoration: none;
    transform: scale(1.04);
}

.index_promo_box_button_default { background-color: #e88f0c; color: #25201d !important; }
.index_promo_box_button_purple {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(206, 155, 255, 0.22) 12%,
      rgba(111, 60, 164, 0.18) 24%,
      rgba(18, 6, 38, 0) 36%
    ),
    radial-gradient(
      circle at 18% 26%,
      rgba(255, 185, 255, 0.72) 0%,
      rgba(161, 76, 216, 0.4) 17%,
      rgba(50, 12, 92, 0) 40%
    ),
    radial-gradient(
      circle at 82% 72%,
      rgba(79, 227, 255, 0.42) 0%,
      rgba(65, 33, 140, 0.35) 24%,
      rgba(12, 5, 38, 0) 48%
    ),
    conic-gradient(
      from 215deg at 50% 50%,
      #16051f 0deg,
      #3d1261 42deg,
      #8a42c7 82deg,
      #d88cff 118deg,
      #5b1f91 158deg,
      #16051f 205deg,
      #2d0b52 246deg,
      #a652df 292deg,
      #2a073e 330deg,
      #16051f 360deg
    );

  color: #ffffff !important;
  border: 1px solid rgba(224, 172, 255, 0.78);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -3px 7px rgba(20, 3, 35, 0.82),
    inset 0 0 18px rgba(198, 104, 255, 0.34),
    0 0 18px rgba(128, 60, 210, 0.44),
    0 6px 16px rgba(0, 0, 0, 0.34);

  text-shadow:
    0 0 8px rgba(228, 170, 255, 0.95),
    0 1px 2px rgba(0, 0, 0, 0.7);

  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    filter 180ms ease;
}

.index_promo_box_button_purple::before,
.index_promo_box_button_purple::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.index_promo_box_button_purple::before {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 1) 0 1px, transparent 1.4px) 7px 9px / 34px 34px,
    radial-gradient(circle, rgba(224, 174, 255, 0.95) 0 0.9px, transparent 1.3px) 18px 15px / 52px 52px,
    radial-gradient(circle, rgba(148, 238, 255, 0.78) 0 0.8px, transparent 1.2px) 30px 24px / 78px 78px;

  opacity: 0.36;
  animation: purple_star_pulse 3.2s ease-in-out infinite;
}

.index_promo_box_button_purple::after {
  background:
    radial-gradient(
      ellipse at 50% 50%,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 34%,
      rgba(230, 170, 255, 0.65) 38%,
      rgba(113, 245, 255, 0.25) 42%,
      rgba(255, 255, 255, 0) 48%,
      rgba(255, 255, 255, 0) 100%
    );

  opacity: 0.5;
  transform: rotate(-12deg) scale(1.25);
  animation: purple_eclipse_breathe 5s ease-in-out infinite;
}

.index_promo_box_button_purple:hover {
  transform: translateY(-2px);
  border-color: rgba(242, 210, 255, 0.98);
  filter: saturate(1.16);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    inset 0 -3px 7px rgba(20, 3, 35, 0.86),
    inset 0 0 24px rgba(215, 126, 255, 0.52),
    0 0 24px rgba(178, 92, 255, 0.66),
    0 0 34px rgba(87, 220, 255, 0.24),
    0 8px 20px rgba(0, 0, 0, 0.42);
}

.index_promo_box_button_purple:hover::before {
  animation-duration: 1.8s;
}

.index_promo_box_button_purple:hover::after {
  opacity: 0.7;
  animation-duration: 3.2s;
}

@keyframes purple_star_pulse {
  0% {
    opacity: 0.2;
    filter: brightness(0.8);
  }

  42% {
    opacity: 0.62;
    filter: brightness(1.55);
  }

  70% {
    opacity: 0.34;
    filter: brightness(1);
  }

  100% {
    opacity: 0.2;
    filter: brightness(0.8);
  }
}

@keyframes purple_eclipse_breathe {
  0% {
    transform: rotate(-12deg) scale(1.18);
    opacity: 0.32;
  }

  50% {
    transform: rotate(-12deg) scale(1.34);
    opacity: 0.62;
  }

  100% {
    transform: rotate(-12deg) scale(1.18);
    opacity: 0.32;
  }
}

.index_promo_box_button_blue {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  background:
    radial-gradient(
      circle at 18% 24%,
      rgba(138, 221, 255, 0.78) 0%,
      rgba(20, 129, 190, 0.38) 15%,
      rgba(5, 25, 58, 0) 34%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(92, 61, 255, 0.48) 0%,
      rgba(42, 32, 140, 0.32) 22%,
      rgba(5, 10, 35, 0) 48%
    ),
    linear-gradient(
      135deg,
      #030915 0%,
      #071c42 20%,
      #0d3b79 38%,
      #136aa1 52%,
      #0b2c61 68%,
      #030915 100%
    );

  color: #ffffff !important;
  border: 1px solid rgba(156, 224, 255, 0.75);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -3px 7px rgba(0, 5, 22, 0.8),
    inset 0 0 18px rgba(74, 184, 255, 0.3),
    0 0 16px rgba(29, 126, 204, 0.34),
    0 6px 16px rgba(0, 0, 0, 0.35);

  text-shadow:
    0 0 7px rgba(116, 218, 255, 0.85),
    0 1px 2px rgba(0, 0, 0, 0.7);

  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.index_promo_box_button_blue::before,
.index_promo_box_button_blue::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.index_promo_box_button_blue::before {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 1) 0 1px, transparent 1.4px) 8px 10px / 31px 31px,
    radial-gradient(circle, rgba(180, 230, 255, 0.95) 0 0.9px, transparent 1.3px) 3px 6px / 47px 47px,
    radial-gradient(circle, rgba(255, 255, 255, 0.85) 0 0.7px, transparent 1.1px) 18px 23px / 68px 68px;

  opacity: 0.42;
  animation: star_pulse_primary 2.8s ease-in-out infinite;
}

.index_promo_box_button_blue::after {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 1) 0 1.4px, transparent 1.8px) 20px 13px / 74px 74px,
    radial-gradient(circle, rgba(135, 220, 255, 0.95) 0 1px, transparent 1.5px) 11px 21px / 58px 58px,
    radial-gradient(circle, rgba(220, 245, 255, 0.95) 0 0.8px, transparent 1.2px) 32px 7px / 92px 92px;

  opacity: 0.18;
  animation: star_pulse_secondary 3.9s ease-in-out infinite;
}

.index_promo_box_button_blue:hover {
  transform: translateY(-2px);
  border-color: rgba(205, 244, 255, 0.95);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -3px 7px rgba(0, 5, 22, 0.82),
    inset 0 0 22px rgba(95, 205, 255, 0.48),
    0 0 22px rgba(56, 172, 255, 0.56),
    0 8px 20px rgba(0, 0, 0, 0.42);
}

.index_promo_box_button_blue:hover::before {
  animation-duration: 1.6s;
}

.index_promo_box_button_blue:hover::after {
  animation-duration: 2.2s;
}

@keyframes star_pulse_primary {
  0% {
    opacity: 0.25;
    filter: brightness(0.8);
  }

  45% {
    opacity: 0.68;
    filter: brightness(1.45);
  }

  70% {
    opacity: 0.36;
    filter: brightness(0.95);
  }

  100% {
    opacity: 0.25;
    filter: brightness(0.8);
  }
}

@keyframes star_pulse_secondary {
  0% {
    opacity: 0.12;
    filter: brightness(0.8);
  }

  35% {
    opacity: 0.5;
    filter: brightness(1.65);
  }

  65% {
    opacity: 0.18;
    filter: brightness(0.9);
  }

  100% {
    opacity: 0.12;
    filter: brightness(0.8);
  }
}

.index_promo_box_button_silver {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  background:
    radial-gradient(
      ellipse at 18% 18%,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.35) 18%,
      rgba(255, 255, 255, 0) 38%
    ),
    linear-gradient(
      115deg,
      #5f666d 0%,
      #8f969d 9%,
      #f7f9fb 18%,
      #b9c0c7 27%,
      #6f7780 37%,
      #e8ecef 48%,
      #ffffff 56%,
      #aab2ba 66%,
      #747d86 76%,
      #d8dde2 88%,
      #f9fbfc 94%,
      #6b737b 100%
    );

  color: #25201d !important;
  border: 1px solid #eef2f5;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 4px rgba(55, 60, 66, 0.45),
    inset 0 0 12px rgba(255, 255, 255, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.28);

  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55),
    0 -1px 0 rgba(80, 85, 90, 0.18);
}

.index_promo_box_button_silver::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background:
    linear-gradient(
      105deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.75) 11%,
      rgba(255, 255, 255, 0.08) 19%,
      rgba(255, 255, 255, 0) 29%,
      rgba(255, 255, 255, 0.9) 43%,
      rgba(255, 255, 255, 0.15) 52%,
      rgba(255, 255, 255, 0) 63%,
      rgba(255, 255, 255, 0.55) 79%,
      rgba(255, 255, 255, 0) 100%
    );

  mix-blend-mode: screen;
  opacity: 0.8;
}

.index_promo_box_button_silver::after {
  content: "";
  position: absolute;
  top: -85%;
  left: -45%;
  width: 40%;
  height: 270%;
  z-index: -1;

  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.95) 44%,
    rgba(255, 255, 255, 0) 100%
  );

  transform: rotate(21deg);
  opacity: 0.42;
  animation: silver-glisten 4.2s ease-in-out infinite;
}

@keyframes silver-glisten {
  0% {
    left: -55%;
  }

  45% {
    left: 115%;
  }

  100% {
    left: 115%;
  }
}

.index_promo_box_button_silver:hover {
  background:
    radial-gradient(
      ellipse at 20% 18%,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.42) 20%,
      rgba(255, 255, 255, 0) 40%
    ),
    linear-gradient(
      115deg,
      #6b737b 0%,
      #a2a9b0 9%,
      #ffffff 18%,
      #cbd1d6 27%,
      #7d858e 37%,
      #f2f5f7 48%,
      #ffffff 56%,
      #bac1c8 66%,
      #838c95 76%,
      #e6eaee 88%,
      #ffffff 94%,
      #747c84 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -2px 4px rgba(55, 60, 66, 0.42),
    inset 0 0 14px rgba(255, 255, 255, 0.5),
    0 0 14px rgba(220, 235, 245, 0.75),
    0 2px 7px rgba(0, 0, 0, 0.32);
}

.index_promo_box_button_gold {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  background:
    radial-gradient(
      ellipse at 20% 20%,
      rgba(255, 255, 255, 0.75) 0%,
      rgba(255, 255, 255, 0.18) 18%,
      rgba(255, 255, 255, 0) 38%
    ),
    linear-gradient(
      115deg,
      #5c3507 0%,
      #8a570d 8%,
      #d79a22 16%,
      #fff2a6 24%,
      #b97810 32%,
      #6b3f08 41%,
      #f2c94c 50%,
      #fff7bd 58%,
      #c88a1d 67%,
      #7a4809 76%,
      #e0aa36 86%,
      #fff0a0 93%,
      #694008 100%
    );

  color: #25201d !important;
  border: 1px solid #f6d77a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -2px 3px rgba(80, 45, 4, 0.55),
    inset 0 0 12px rgba(255, 230, 130, 0.35),
    0 2px 5px rgba(0, 0, 0, 0.28);

  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45),
    0 -1px 0 rgba(90, 55, 8, 0.25);
}

.index_promo_box_button_gold::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background:
    linear-gradient(
      105deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.45) 12%,
      rgba(255, 255, 255, 0.08) 20%,
      rgba(255, 255, 255, 0) 28%,
      rgba(255, 255, 255, 0.55) 43%,
      rgba(255, 255, 255, 0.08) 51%,
      rgba(255, 255, 255, 0) 62%,
      rgba(255, 255, 255, 0.35) 78%,
      rgba(255, 255, 255, 0) 100%
    );

  mix-blend-mode: screen;
  opacity: 0.75;
}

.index_promo_box_button_gold::after {
  content: "";
  position: absolute;
  top: -80%;
  left: -40%;
  width: 45%;
  height: 260%;
  z-index: -1;

  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.75) 45%,
    rgba(255, 255, 255, 0) 100%
  );

  transform: rotate(20deg);
  opacity: 0.35;
  animation: gold-reflection 4.5s ease-in-out infinite;
}

@keyframes gold-reflection {
  0% {
    left: -55%;
  }

  45% {
    left: 115%;
  }

  100% {
    left: 115%;
  }
}