/* ============================================================
   BOOM VIP PROFILE V3
   TRUE FULL-WIDTH LEGENDARY HERO
   ============================================================ */


/* ============================================================
   ENTIRE PROFILE HERO
   ============================================================ */

.dex-vip-fullhero {
  --vip-gold: #ffd443;
  --vip-bright: #fff4b2;
  --vip-hot: #ffab13;
  --vip-deep: #8b5000;

  position: relative !important;

  isolation: isolate;

  overflow: hidden !important;

  border-color:
    rgba(
      255,
      214,
      69,
      .78
    ) !important;

  background:
    linear-gradient(
      115deg,
      #080d17 0%,
      #11100b 25%,
      #231803 52%,
      #181006 72%,
      #070b12 100%
    ) !important;

  box-shadow:
    0 0 0 1px
      rgba(255,246,192,.05),

    0 0 35px
      rgba(255,186,20,.17),

    0 25px 80px
      rgba(0,0,0,.38),

    inset 0 0 100px
      rgba(255,189,22,.055) !important;
}


/*
 * Real UI above visual FX.
 */

.dex-vip-fullhero
> *:not(.dex-vip-scene) {
  position: relative;

  z-index: 7;
}


/* ============================================================
   REMOVE ALL OLD INNER GOLD BOXES
   ============================================================ */

.dex-vip-fullhero
.dex-public-trainer.is-vip {
  position: relative;

  z-index: 8;

  border: 0 !important;

  outline: 0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  overflow:
    visible !important;
}


.dex-vip-fullhero
.dex-public-trainer.is-vip::before,

.dex-vip-fullhero
.dex-public-trainer.is-vip::after {
  content: none !important;

  display: none !important;
}


.dex-vip-fullhero
.dex-vip-profile-fx,

.dex-vip-fullhero
.dex-vip-full-fx {
  display: none !important;
}


/* ============================================================
   GOLD FRAME ACROSS 100% WIDTH
   ============================================================ */

.dex-vip-fullhero::before {
  content: '';

  position: absolute;

  z-index: 20;

  inset: 0;

  pointer-events: none;

  border-radius: inherit;

  padding: 2px;

  background:
    linear-gradient(
      110deg,
      #fffbd4,
      #bf7803 12%,
      #ffe16b 28%,
      #fff5bd 43%,
      #9e5d00 58%,
      #ffd64c 74%,
      #fff3ad 90%,
      #b16b00
    );

  background-size:
    300% 100%;

  -webkit-mask:
    linear-gradient(#fff 0 0)
      content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite:
    xor;

  mask-composite:
    exclude;

  animation:
    vipFrameSweep
    7s
    linear
    infinite;
}


/* ============================================================
   SCENE
   ============================================================ */

.dex-vip-scene {
  position: absolute !important;

  z-index: 1 !important;

  inset: 0;

  overflow: hidden;

  pointer-events: none;
}


/* ============================================================
   FULL WIDTH GOLD AURORA
   ============================================================ */

.dex-vip-scene__aurora {
  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      ellipse at 72% 50%,
      rgba(255,213,70,.30),
      transparent 25%
    ),

    radial-gradient(
      ellipse at 49% 90%,
      rgba(255,150,10,.16),
      transparent 48%
    ),

    radial-gradient(
      circle at 20% 30%,
      rgba(255,229,135,.12),
      transparent 30%
    ),

    radial-gradient(
      circle at 95% 20%,
      rgba(255,244,187,.10),
      transparent 23%
    ),

    linear-gradient(
      90deg,
      rgba(255,176,12,.045),
      rgba(255,210,54,.08),
      rgba(255,150,0,.045)
    );
}


/* ============================================================
   BRIGHT GOLD SUN BEHIND POKEMON
   ============================================================ */

.dex-vip-scene__sun {
  position: absolute;

  right: 11%;

  top: 50%;

  width: 520px;

  height: 520px;

  transform:
    translateY(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255,244,186,.19) 0%,
      rgba(255,205,51,.15) 23%,
      rgba(255,171,9,.07) 46%,
      transparent 70%
    );

  filter:
    blur(5px);

  animation:
    vipSunPulse
    5s
    ease-in-out
    infinite;
}


/* ============================================================
   RAYS FILL THE WHOLE BANNER
   ============================================================ */

.dex-vip-scene__rays {
  position: absolute;

  left: 40%;

  top: 48%;

  width: 1050px;

  height: 1050px;

  transform:
    translate(
      -50%,
      -50%
    );

  opacity: .15;

  background:
    repeating-conic-gradient(
      from -10deg,
      rgba(255,232,132,.65)
        0deg 3deg,

      transparent
        3deg 14deg
    );

  -webkit-mask-image:
    radial-gradient(
      circle,
      black,
      transparent 67%
    );

  mask-image:
    radial-gradient(
      circle,
      black,
      transparent 67%
    );

  animation:
    vipRayRotate
    60s
    linear
    infinite;
}


/* ============================================================
   GIANT CROWN
   ============================================================ */

.dex-vip-scene__crown {
  position: absolute;

  left: 8%;

  bottom: -37%;

  color:
    rgba(
      255,
      214,
      72,
      .075
    );

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(
      20rem,
      35vw,
      40rem
    );

  line-height: 1;

  transform:
    rotate(-9deg);

  text-shadow:
    0 0 75px
      rgba(255,169,7,.09);
}


/* ============================================================
   MASSIVE VIP WORD BEHIND POKEMON
   ============================================================ */

.dex-vip-scene__word {
  position: absolute;

  z-index: 1;

  right: 2%;

  bottom: -9%;

  color:
    rgba(
      255,
      222,
      101,
      .085
    );

  font-size:
    clamp(
      13rem,
      24vw,
      29rem
    );

  font-weight: 1000;

  line-height: .8;

  letter-spacing: -.08em;

  transform:
    skewX(-7deg);

  text-shadow:
    0 0 80px
      rgba(255,172,10,.09);
}


/* ============================================================
   GOLD ORBIT
   ============================================================ */

.dex-vip-scene__rings {
  position: absolute;

  right: 8%;

  top: 50%;

  width:
    min(
      37vw,
      570px
    );

  aspect-ratio: 1;

  transform:
    translateY(-50%);

  border:
    1px solid
    rgba(255,223,115,.24);

  border-radius: 50%;

  box-shadow:
    0 0 60px
      rgba(255,183,17,.10),

    inset 0 0 60px
      rgba(255,210,68,.045);

  animation:
    vipOrbit
    8s
    ease-in-out
    infinite;
}


.dex-vip-scene__rings::before,
.dex-vip-scene__rings::after {
  content: '';

  position: absolute;

  border-radius: 50%;

  border:
    1px solid
    rgba(255,225,126,.14);
}


.dex-vip-scene__rings::before {
  inset: 10%;
}


.dex-vip-scene__rings::after {
  inset: 23%;
}


.dex-vip-scene__rings i {
  position: absolute;

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background:
    #fff6bd;

  box-shadow:
    0 0 7px
      white,

    0 0 22px
      #ffc832;
}


.dex-vip-scene__rings i:nth-child(1) {
  left: 7%;
  top: 33%;
}


.dex-vip-scene__rings i:nth-child(2) {
  right: 13%;
  top: 16%;
}


.dex-vip-scene__rings i:nth-child(3) {
  right: 19%;
  bottom: 11%;
}


/* ============================================================
   GOLD DUST ACROSS ENTIRE HERO
   ============================================================ */

.dex-vip-scene__dust {
  position: absolute;

  left: -10%;

  right: -10%;

  bottom: -100px;

  height: 220px;

  background:
    radial-gradient(
      ellipse,
      rgba(255,188,20,.27),
      rgba(255,157,5,.10) 40%,
      transparent 72%
    );

  filter:
    blur(30px);

  animation:
    vipDust
    5s
    ease-in-out
    infinite;
}


/* ============================================================
   STARS
   ============================================================ */

.dex-vip-scene__stars {
  position: absolute;

  inset: 0;

  z-index: 4;
}


.dex-vip-scene__stars i {
  position: absolute;

  width: 5px;

  height: 5px;

  border-radius: 50%;

  background:
    #fff7c8;

  box-shadow:
    0 0 6px
      #fff,

    0 0 15px
      #ffce45,

    0 0 25px
      rgba(255,178,11,.45);

  animation:
    vipTwinkle
    3s
    ease-in-out
    infinite;
}


.dex-vip-scene__stars i:nth-child(1)  { left:3%;  top:19%; }
.dex-vip-scene__stars i:nth-child(2)  { left:7%;  top:68%; animation-delay:-1.1s; }
.dex-vip-scene__stars i:nth-child(3)  { left:12%; top:37%; animation-delay:-2.3s; }
.dex-vip-scene__stars i:nth-child(4)  { left:16%; top:82%; animation-delay:-.5s; }
.dex-vip-scene__stars i:nth-child(5)  { left:21%; top:11%; animation-delay:-1.7s; }
.dex-vip-scene__stars i:nth-child(6)  { left:25%; top:55%; animation-delay:-2.6s; }
.dex-vip-scene__stars i:nth-child(7)  { left:30%; top:25%; animation-delay:-.9s; }
.dex-vip-scene__stars i:nth-child(8)  { left:34%; top:75%; animation-delay:-2.1s; }
.dex-vip-scene__stars i:nth-child(9)  { left:39%; top:14%; animation-delay:-1.4s; }
.dex-vip-scene__stars i:nth-child(10) { left:43%; top:45%; animation-delay:-2.7s; }
.dex-vip-scene__stars i:nth-child(11) { left:47%; top:88%; animation-delay:-.3s; }
.dex-vip-scene__stars i:nth-child(12) { left:51%; top:23%; animation-delay:-1.8s; }
.dex-vip-scene__stars i:nth-child(13) { left:55%; top:65%; animation-delay:-2.4s; }
.dex-vip-scene__stars i:nth-child(14) { left:59%; top:9%; animation-delay:-.7s; }
.dex-vip-scene__stars i:nth-child(15) { left:63%; top:43%; animation-delay:-1.5s; }
.dex-vip-scene__stars i:nth-child(16) { left:67%; top:79%; animation-delay:-2.8s; }
.dex-vip-scene__stars i:nth-child(17) { left:71%; top:18%; animation-delay:-.4s; }
.dex-vip-scene__stars i:nth-child(18) { left:75%; top:57%; animation-delay:-1.9s; }
.dex-vip-scene__stars i:nth-child(19) { left:79%; top:29%; animation-delay:-2.5s; }
.dex-vip-scene__stars i:nth-child(20) { left:83%; top:84%; animation-delay:-.8s; }
.dex-vip-scene__stars i:nth-child(21) { left:87%; top:13%; animation-delay:-1.6s; }
.dex-vip-scene__stars i:nth-child(22) { left:91%; top:52%; animation-delay:-2.9s; }
.dex-vip-scene__stars i:nth-child(23) { left:95%; top:27%; animation-delay:-.2s; }
.dex-vip-scene__stars i:nth-child(24) { left:97%; top:72%; animation-delay:-2s; }
.dex-vip-scene__stars i:nth-child(25) { left:27%; top:90%; animation-delay:-1.3s; }
.dex-vip-scene__stars i:nth-child(26) { left:49%; top:55%; animation-delay:-2.2s; }
.dex-vip-scene__stars i:nth-child(27) { left:69%; top:36%; animation-delay:-.6s; }
.dex-vip-scene__stars i:nth-child(28) { left:77%; top:67%; animation-delay:-2.6s; }
.dex-vip-scene__stars i:nth-child(29) { left:89%; top:39%; animation-delay:-1s; }
.dex-vip-scene__stars i:nth-child(30) { left:37%; top:34%; animation-delay:-1.9s; }


/* ============================================================
   SHIMMER ACROSS FULL WIDTH
   ============================================================ */

.dex-vip-scene__shimmer {
  position: absolute;

  z-index: 5;

  top: -35%;

  bottom: -35%;

  left: -18%;

  width: 11%;

  opacity: 0;

  transform:
    rotate(12deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,230,133,.06),
      rgba(255,255,226,.30),
      rgba(255,213,72,.12),
      transparent
    );

  filter:
    blur(10px);

  animation:
    vipHeroShimmer
    8s
    ease-in-out
    infinite;
}


/* ============================================================
   TRAINER NAME
   ============================================================ */

.dex-vip-fullhero
.dex-public-trainer__identity h1 {
  width: fit-content;

  color: #fff4b7 !important;

  background:
    linear-gradient(
      100deg,
      #fffdf2,
      #fff1a7 22%,
      #ffc62d 47%,
      #fff2ac 70%,
      #d48606
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

  -webkit-text-fill-color:
    transparent;

  filter:
    drop-shadow(
      0 8px 20px
      rgba(201,128,3,.23)
    );
}


/* ============================================================
   VIP BADGE
   ============================================================ */

.dex-vip-profile-badge {
  display: inline-flex;

  align-items: center;

  gap: .7rem;

  width: max-content;

  max-width: 100%;

  margin-bottom: .7rem;

  padding:
    .52rem
    .92rem
    .52rem
    .55rem;

  border:
    1px solid
    rgba(255,221,102,.75);

  border-radius: 999px;

  color: #fff6bc;

  background:
    linear-gradient(
      105deg,
      rgba(121,73,2,.91),
      rgba(39,27,6,.88)
    );

  box-shadow:
    0 0 27px
      rgba(255,190,25,.25),

    inset 0 0 17px
      rgba(255,247,197,.08);
}


.dex-vip-profile-badge__crown {
  width: 37px;

  height: 37px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color: #171000;

  background:
    linear-gradient(
      145deg,
      #fffbd4,
      #ffd13b 54%,
      #a76000
    );

  box-shadow:
    0 0 21px
      rgba(255,204,45,.58);

  font-size: 1.15rem;
}


.dex-vip-profile-badge
> span:nth-child(2) {
  display: grid;

  line-height: 1;
}


.dex-vip-profile-badge small {
  color:
    rgba(255,240,183,.72);

  font-size: .46rem;

  font-weight: 900;

  letter-spacing: .15em;
}


.dex-vip-profile-badge strong {
  margin-top: .18rem;

  font-size: .84rem;

  font-weight: 1000;

  letter-spacing: .15em;
}


.dex-vip-profile-badge > i {
  color: #ffe174;

  font-style: normal;

  animation:
    vipBadgePulse
    1.8s
    ease-in-out
    infinite;
}


/* ============================================================
   AVATAR
   ============================================================ */

.dex-vip-fullhero
.dex-vip-avatar {
  border-color:
    #ffda4e !important;

  outline:
    2px solid
    rgba(255,242,174,.43);

  outline-offset: 6px;

  box-shadow:
    0 0 0 1px
      #6e4200,

    0 0 20px
      rgba(255,221,78,.67),

    0 0 55px
      rgba(255,171,10,.32) !important;
}


/* ============================================================
   POKEMON
   ============================================================ */

.dex-vip-fullhero
.dex-vip-pokemon-art {
  position: relative;

  z-index: 9;

  filter:
    saturate(1.14)
    contrast(1.04)

    drop-shadow(
      0 10px 7px
      rgba(0,0,0,.20)
    )

    drop-shadow(
      0 0 9px
      rgba(255,250,215,.65)
    )

    drop-shadow(
      0 0 30px
      rgba(255,214,71,.50)
    )

    drop-shadow(
      0 0 75px
      rgba(255,161,8,.31)
    ) !important;

  animation:
    vipPokemonFloat
    4.2s
    ease-in-out
    infinite;
}


/* ============================================================
   COLLECTION
   ============================================================ */

.dex-vip-fullhero
.dex-vip-collection {
  position: relative;

  z-index: 10;

  border-color:
    rgba(255,218,80,.70) !important;

  background:
    linear-gradient(
      145deg,
      rgba(42,30,8,.97),
      rgba(6,11,18,.98)
    ) !important;

  box-shadow:
    0 0 30px
      rgba(255,186,20,.17),

    0 18px 42px
      rgba(0,0,0,.34) !important;
}


/* ============================================================
   REGION TAGS
   ============================================================ */

.dex-vip-fullhero
[class*="region"],
.dex-vip-fullhero
[class*="chip"] {
  position: relative;

  z-index: 8;
}


/* ============================================================
   ANIMATION
   ============================================================ */

@keyframes vipFrameSweep {
  to {
    background-position:
      300% 0;
  }
}


@keyframes vipRayRotate {
  to {
    transform:
      translate(
        -50%,
        -50%
      )
      rotate(360deg);
  }
}


@keyframes vipSunPulse {
  0%,
  100% {
    opacity: .65;
    transform:
      translateY(-50%)
      scale(.94);
  }

  50% {
    opacity: 1;
    transform:
      translateY(-50%)
      scale(1.06);
  }
}


@keyframes vipOrbit {
  0%,
  100% {
    transform:
      translateY(-50%)
      rotate(0);
  }

  50% {
    transform:
      translateY(-52%)
      rotate(4deg);
  }
}


@keyframes vipDust {
  0%,
  100% {
    opacity: .5;
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}


@keyframes vipTwinkle {
  0%,
  100% {
    opacity: .12;

    transform:
      translateY(4px)
      scale(.55);
  }

  50% {
    opacity: 1;

    transform:
      translateY(-7px)
      scale(1.65);
  }
}


@keyframes vipHeroShimmer {
  0%,
  70% {
    opacity: 0;
    left: -18%;
  }

  74% {
    opacity: .8;
  }

  92% {
    opacity: .15;
    left: 115%;
  }

  100% {
    opacity: 0;
    left: 115%;
  }
}


@keyframes vipBadgePulse {
  0%,
  100% {
    opacity: .45;
    transform: scale(.85);
  }

  50% {
    opacity: 1;
    transform: scale(1.25);
  }
}


@keyframes vipPokemonFloat {
  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-9px);
  }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 800px) {
  .dex-vip-scene__rays {
    left: 60%;

    width: 800px;

    height: 800px;
  }


  .dex-vip-scene__sun {
    right: -25%;

    width: 390px;

    height: 390px;
  }


  .dex-vip-scene__rings {
    right: -15%;

    width: 72vw;
  }


  .dex-vip-scene__word {
    right: -7%;

    bottom: 0;

    font-size: 12rem;
  }


  .dex-vip-scene__crown {
    left: -3%;

    bottom: -10%;

    font-size: 18rem;
  }
}


@media (
  prefers-reduced-motion:
  reduce
) {
  .dex-vip-fullhero::before,
  .dex-vip-scene__rays,
  .dex-vip-scene__sun,
  .dex-vip-scene__rings,
  .dex-vip-scene__stars i,
  .dex-vip-scene__dust,
  .dex-vip-scene__shimmer,
  .dex-vip-profile-badge > i,
  .dex-vip-pokemon-art {
    animation:
      none !important;
  }
}


/* ============================================================
   BOOM VIP PROFILE V3.1
   COMPOSITION / SPACING FIX
   ============================================================ */


/*
 * Give trainer identity its own protected left-hand zone.
 * Pokemon artwork should NEVER cross into the trainer name.
 */

.dex-vip-fullhero
.dex-public-trainer {
  position: relative !important;

  z-index: 9 !important;
}


.dex-vip-fullhero
.dex-public-trainer__identity {
  position: relative !important;

  z-index: 12 !important;

  max-width:
    min(
      720px,
      47vw
    );
}


/*
 * Featured Pokemon:
 *
 * Move substantially to the right.
 * Slightly smaller than V3.
 *
 * left works together with the existing float animation
 * because the animation only controls transform:Y.
 */

.dex-vip-fullhero
.dex-vip-pokemon-art {
  position: relative !important;

  left:
    clamp(
      150px,
      11vw,
      235px
    ) !important;

  transform-origin:
    center center;

  scale: .91;

  z-index: 8 !important;
}


/*
 * DIN SAMLING becomes a deliberate premium HUD card.
 * Lock it to the upper-right of the complete banner.
 */

.dex-vip-fullhero
.dex-vip-collection {
  position: absolute !important;

  top:
    clamp(
      38px,
      5vw,
      72px
    ) !important;

  right:
    clamp(
      34px,
      4vw,
      72px
    ) !important;

  left: auto !important;

  bottom: auto !important;

  z-index: 15 !important;

  margin: 0 !important;

  transform: none !important;

  min-width: 190px;

  max-width: 230px;

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);

  border:
    1px solid
    rgba(
      255,
      220,
      92,
      .62
    ) !important;

  background:
    linear-gradient(
      145deg,
      rgba(33, 25, 8, .94),
      rgba(5, 11, 18, .96)
    ) !important;

  box-shadow:
    0 0 0 1px
      rgba(255,255,255,.025),

    0 0 28px
      rgba(255,191,27,.16),

    0 18px 40px
      rgba(0,0,0,.34) !important;
}


/*
 * Extra glow directly behind Pokemon,
 * positioned further right to match its new location.
 */

.dex-vip-scene__sun {
  right: 18% !important;
}


/*
 * Orbit should frame Pokemon instead of collection card.
 */

.dex-vip-scene__rings {
  right: 15% !important;

  width:
    min(
      33vw,
      510px
    ) !important;
}


/*
 * Push the huge VIP watermark further right.
 * It should live behind the Pokemon/HUD area.
 */

.dex-vip-scene__word {
  right: -1% !important;

  opacity: .78;
}


/*
 * Keep name beautifully readable regardless of username length.
 */

.dex-vip-fullhero
.dex-public-trainer__identity h1 {
  position: relative;

  z-index: 14;

  max-width: 700px;

  white-space: nowrap !important;

  text-shadow:
    0 8px 28px
    rgba(0,0,0,.46);
}


/* ============================================================
   DESKTOP 1200-1500
   ============================================================ */

@media (
  min-width: 801px
) and
(
  max-width: 1500px
) {
  .dex-vip-fullhero
  .dex-vip-pokemon-art {
    left:
      clamp(
        95px,
        8vw,
        160px
      ) !important;

    scale: .86;
  }


  .dex-vip-fullhero
  .dex-vip-collection {
    right: 32px !important;

    top: 38px !important;
  }


  .dex-vip-fullhero
  .dex-public-trainer__identity {
    max-width: 52vw;
  }
}


/* ============================================================
   MOBILE / TABLET
   ============================================================ */

@media (
  max-width: 800px
) {
  .dex-vip-fullhero
  .dex-public-trainer__identity {
    max-width: 100%;
  }


  .dex-vip-fullhero
  .dex-vip-pokemon-art {
    left: 0 !important;

    scale: .88;
  }


  .dex-vip-fullhero
  .dex-vip-collection {
    position: relative !important;

    top: auto !important;

    right: auto !important;

    width: 100%;

    max-width: none;

    margin-top: 1rem !important;
  }
}


/* ===== END BOOM VIP PROFILE V3.1 ===== */


/* ============================================================
   VIP MOBILE SCROLL SAFETY V3.2
   VIP skin is ONLY allowed on the Pokédex hero.
   ============================================================ */

html.dex-vip-fullhero,
body.dex-vip-fullhero,
.portal-shell.dex-vip-fullhero,
.portal-main.dex-vip-fullhero,
.portal-content.dex-vip-fullhero {
  overflow: visible !important;
}


/*
 * The VIP scene itself must never intercept
 * touch gestures or scrolling.
 */

.dex-hero.dex-vip-fullhero,
.dex-hero.dex-vip-fullhero .dex-vip-scene,
.dex-hero.dex-vip-fullhero .dex-vip-scene * {
  touch-action: pan-y !important;
}


.dex-hero.dex-vip-fullhero .dex-vip-scene,
.dex-hero.dex-vip-fullhero .dex-vip-scene * {
  pointer-events: none !important;
}


/*
 * Hero artwork may be clipped,
 * but the DOCUMENT must remain scrollable.
 */

.dex-hero.dex-vip-fullhero {
  overflow: hidden !important;
}


@media (max-width: 800px) {
  html,
  body {
    touch-action: pan-y;
  }

  .dex-hero.dex-vip-fullhero {
    touch-action: pan-y !important;
  }
}


/* ===== END VIP MOBILE SCROLL SAFETY ===== */


/* ============================================================
   BOOM POKEDEX MOBILE PERFORMANCE V1

   Desktop:
   Full legendary VIP FX.

   Mobile:
   Same visual identity, much cheaper GPU workload.
   ============================================================ */

@media (max-width: 800px) {

  /*
   * Large rotating conic-gradient is one of the
   * most expensive effects on mobile.
   * Keep it visually present, but STATIC.
   */

  .dex-vip-scene__rays {
    animation: none !important;

    opacity: .09 !important;

    transform:
      translate(
        -50%,
        -50%
      ) !important;
  }


  /*
   * Static aura instead of constant large-layer scaling.
   */

  .dex-vip-scene__sun {
    animation: none !important;

    opacity: .72 !important;

    filter:
      blur(2px) !important;
  }


  /*
   * Keep the golden rings.
   * Stop moving a giant composited layer every frame.
   */

  .dex-vip-scene__rings {
    animation: none !important;
  }


  /*
   * No giant animated fog layer.
   */

  .dex-vip-scene__dust {
    animation: none !important;

    filter:
      blur(14px) !important;

    opacity: .58 !important;
  }


  /*
   * Shimmer looks nice on desktop,
   * but forces repaints across the complete banner.
   */

  .dex-vip-scene__shimmer {
    display: none !important;
  }


  /*
   * 30 animated DOM nodes is unnecessary on a phone.
   * Keep eight static / lightly visible stars.
   */

  .dex-vip-scene__stars i {
    animation: none !important;

    opacity: .75 !important;

    box-shadow:
      0 0 7px
      rgba(255, 220, 105, .72) !important;
  }


  .dex-vip-scene__stars
  i:nth-child(n+9) {
    display: none !important;
  }


  /*
   * Keep the gold outer frame,
   * stop continuously animating its gradient.
   */

  .dex-vip-fullhero::before {
    animation: none !important;

    background-position:
      50% 0 !important;
  }


  /*
   * Large multi-layer drop shadows on Pokémon artwork
   * are expensive while scrolling.
   *
   * We retain one gold aura and one depth shadow.
   */

  .dex-vip-fullhero
  .dex-vip-pokemon-art {
    animation: none !important;

    filter:
      saturate(1.08)
      contrast(1.03)
      drop-shadow(
        0 9px 8px
        rgba(0,0,0,.22)
      )
      drop-shadow(
        0 0 18px
        rgba(255,204,54,.34)
      ) !important;
  }


  /*
   * Avatar still looks premium,
   * but fewer giant shadow layers.
   */

  .dex-vip-fullhero
  .dex-vip-avatar {
    box-shadow:
      0 0 0 1px
      #6e4200,
      0 0 16px
      rgba(255,221,78,.50) !important;
  }


  /*
   * Browser can isolate hero rendering.
   */

  .dex-hero {
    contain:
      layout paint style;
  }


  /*
   * Do not promote dozens of layers unnecessarily.
   */

  .dex-vip-scene__stars i,
  .dex-vip-scene__rings,
  .dex-vip-scene__sun,
  .dex-vip-pokemon-art {
    will-change: auto !important;
  }
}


/* Extra conservative mode for smaller phones */

@media (max-width: 520px) {

  .dex-vip-scene__stars
  i:nth-child(n+6) {
    display: none !important;
  }


  .dex-vip-scene__rays {
    opacity: .065 !important;
  }


  .dex-vip-scene__crown {
    opacity: .65;
  }


  .dex-vip-scene__word {
    opacity: .58;
  }
}


/* ===== END MOBILE PERFORMANCE V1 ===== */