/* Quiet edge decoration, shared by the five brand pages. */
.brand-decor-section {
  position: relative;
  isolation: isolate;
}
.brand-decor {
  --decor-color: 139, 143, 221;
  --decor-strength: .6;
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  opacity: var(--decor-strength);
  pointer-events: none;
  user-select: none;
}
.brand-decor::before,
.brand-decor::after {
  position: absolute;
  inset: 0;
  content: '';
}
.brand-decor::before {
  background:
    radial-gradient(ellipse 400px 330px at 0 10%, rgba(var(--decor-color), .14), transparent 75%),
    radial-gradient(ellipse 340px 420px at 100% 82%, rgba(133, 186, 231, .12), transparent 74%);
}
.brand-decor::after {
  background:
    linear-gradient(157deg, transparent 68%, rgba(255, 255, 255, .65) 68.2%, rgba(255, 255, 255, .08) 70%, transparent 70.2%),
    linear-gradient(157deg, transparent 72%, rgba(var(--decor-color), .07) 72.2%, transparent 75%);
}
.brand-decor-ring,
.brand-decor-facet,
.brand-decor-dots {
  position: absolute;
  display: block;
}
.brand-decor-ring {
  top: 155px;
  left: -36px;
  width: 148px;
  height: 148px;
  border: 16px solid rgba(var(--decor-color), .17);
  border-top-color: rgba(174, 199, 246, .34);
  border-right-color: rgba(134, 137, 219, .24);
  border-radius: 50%;
  box-shadow: inset 3px 3px 8px rgba(255, 255, 255, .7), 4px 10px 18px rgba(var(--decor-color), .07);
  transform: rotate(-28deg) scaleY(.78);
}
.brand-decor-facet {
  top: 62%;
  right: -12px;
  width: 105px;
  height: 105px;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .64), transparent 52%),
    linear-gradient(35deg, rgba(var(--decor-color), .18), rgba(179, 210, 246, .07));
  box-shadow: inset -8px -8px 16px rgba(var(--decor-color), .08), 10px 18px 28px rgba(var(--decor-color), .05);
  transform: rotate(28deg);
}
.brand-decor-dots {
  top: 78px;
  right: 6%;
  width: 64px;
  height: 82px;
  background: radial-gradient(circle, rgba(var(--decor-color), .22) 1.7px, transparent 2px) 0 0 / 16px 16px;
  mask-image: linear-gradient(140deg, #000, transparent 85%);
}

/* Home: airy rings and a small frosted facet beside the hero. */
.brand-page-home .main-slider .brand-decor { --decor-strength: .68; }
.brand-page-home .main-slider .brand-decor-ring { top: 175px; left: 3%; width: 108px; height: 108px; border-width: 12px; }
.brand-page-home .main-slider .brand-decor-facet { top: 36%; right: 3%; width: 82px; height: 82px; }
.brand-page-home #product .brand-decor-ring { left: auto; right: -50px; top: 80px; }
.brand-page-home #product .brand-decor-facet { right: auto; left: -22px; top: 68%; }
.brand-page-home #about .brand-decor { --decor-strength: .42; }
.brand-page-home #history .brand-decor-ring { top: 65%; width: 190px; height: 190px; border-width: 2px; }
.brand-page-home #history .brand-decor-dots { top: 120px; }

/* Product artwork carries the page: keep accents on its outer edges. */
.brand-page-product .brand-decor { --decor-strength: .3; --decor-color: 180, 191, 246; }
.brand-page-product .brand-decor::before { display: none; }
.brand-page-product .brand-decor::after {
  background: linear-gradient(158deg, transparent 70%, rgba(255, 255, 255, .5) 70.2%, transparent 73%);
}
.brand-page-product .brand-decor-ring { top: auto; bottom: 26px; left: -58px; width: 180px; height: 180px; border-width: 2px; box-shadow: none; }
.brand-page-product .brand-decor-facet { top: 10%; right: -48px; width: 125px; height: 125px; }
.brand-page-product .brand-decor-dots { top: auto; bottom: 55px; right: 3%; }
.brand-page-product #live .brand-decor,
.brand-page-product #slots .brand-decor,
.brand-page-product #poker .brand-decor { transform: scaleX(-1); }

/* Advantages: open orbital lines and a translucent geometric tile. */
.brand-page-advantage .brand-decor { --decor-strength: .58; }
.brand-page-advantage .brand-decor-ring { top: 45px; left: auto; right: -105px; width: 300px; height: 300px; border-width: 2px; box-shadow: 0 0 0 22px rgba(var(--decor-color), .025), 0 0 0 44px rgba(var(--decor-color), .02); }
.brand-page-advantage .brand-decor-facet { top: 145px; right: auto; left: -42px; width: 150px; height: 150px; transform: rotate(38deg); }
.brand-page-advantage .brand-decor-dots { top: 60%; right: 3%; }

/* Cooperation: interlocking circles, with the rhythm reversed below. */
.brand-page-cooperation .brand-decor { --decor-strength: .57; }
.brand-page-cooperation .brand-decor-ring { top: 64px; left: -44px; width: 158px; height: 158px; }
.brand-page-cooperation .brand-decor-facet { top: 110px; right: -36px; width: 170px; height: 170px; border: 2px solid rgba(var(--decor-color), .17); border-radius: 50%; background: none; box-shadow: 20px 14px 0 -2px rgba(244, 246, 255, 1), 20px 14px 0 0 rgba(var(--decor-color), .11); transform: rotate(-28deg) scaleY(.78); }
.brand-page-cooperation #partner .brand-decor { transform: scaleX(-1); --decor-strength: .4; }
.brand-page-cooperation #pjlist .brand-decor-ring { top: 50%; border-width: 2px; width: 230px; height: 230px; }
.brand-page-cooperation #pjlist .brand-decor-facet { display: none; }

/* The template page already has a rich top illustration. */
.brand-page-template .brand-decor { --decor-strength: .25; }
.brand-page-template .brand-decor::before,
.brand-page-template .brand-decor::after,
.brand-page-template .brand-decor-dots { display: none; }
.brand-page-template .brand-decor-ring { top: 72%; left: -65px; width: 230px; height: 230px; border-width: 2px; }
.brand-page-template .brand-decor-facet { top: 88%; right: -34px; }

@media (max-width: 991px) {
  .brand-decor { opacity: calc(var(--decor-strength) * .65); }
  .brand-decor-dots { display: none; }
}
@media (max-width: 767px) {
  .brand-decor { opacity: calc(var(--decor-strength) * .45); }
  .brand-decor::after { display: none; }
  .brand-decor-ring { left: -80px; }
  .brand-decor-facet { right: -60px; }
  .brand-page-home .main-slider .brand-decor-ring { left: -66px; }
  .brand-page-home .main-slider .brand-decor-facet { right: -60px; }
  .brand-page-product .brand-decor { opacity: .1; }
}