/* Footer character showcase: transparent artwork, layered wordmark and light CSS effects. */

.site-cloud-footer__content {
  align-items: stretch;
}

.site-cloud-footer__character {
  grid-area: character;
  position: relative;
  isolation: isolate;
  align-self: stretch;
  min-width: 0;
  min-height: 270px;
  pointer-events: none;
  user-select: none;
}

.site-cloud-footer__character::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 42%;
  left: 50%;
  width: 190%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 139, 196, .18) 0 12%, rgba(var(--scf-accent-2), .16) 30%, transparent 69%);
  filter: blur(7px);
  opacity: .86;
  transform: translate(-50%, -50%);
  animation: siteFooterCharacterAura 7.6s ease-in-out infinite;
}

.site-cloud-footer__character::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 4%;
  bottom: 3px;
  left: 4%;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(185, 220, 255, .34), rgba(255, 155, 210, .12) 42%, transparent 72%);
  filter: blur(5px);
  opacity: .78;
}

.site-cloud-footer__character-word {
  position: absolute;
  z-index: 1;
  top: 54%;
  left: 50%;
  max-width: none;
  overflow: visible;
  color: transparent;
  background: linear-gradient(90deg, rgba(255, 218, 238, .9), rgba(187, 184, 255, .92), rgba(137, 214, 255, .78));
  background-clip: text;
  -webkit-background-clip: text;
  font-family: "Syne", "Glory", system-ui, sans-serif;
  font-size: clamp(1.5rem, 2.15vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -.075em;
  line-height: .9;
  opacity: .25;
  text-align: center;
  text-overflow: clip;
  text-transform: uppercase;
  text-shadow: 0 0 20px rgba(var(--scf-accent-2), .2);
  transform: translate(-50%, -50%);
  white-space: nowrap;
  -webkit-text-stroke: 1px rgba(245, 235, 255, .24);
}

.site-cloud-footer__character-image {
  position: absolute;
  z-index: 3;
  bottom: -10px;
  left: 50%;
  display: block;
  width: auto;
  max-width: none;
  height: 290px;
  object-fit: contain;
  filter:
    drop-shadow(0 13px 15px rgba(4, 8, 22, .32))
    drop-shadow(0 0 8px rgba(161, 196, 255, .2))
    drop-shadow(0 0 12px rgba(255, 153, 204, .12));
  transform: translate3d(-50%, 0, 0);
  transform-origin: 50% 82%;
  animation: siteFooterCharacterFloat 7.4s ease-in-out infinite;
}

.site-cloud-footer__character-spark {
  position: absolute;
  z-index: 4;
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff7fc;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, .06),
    0 0 11px 3px rgba(175, 203, 255, .34),
    0 0 17px 5px rgba(255, 155, 209, .13);
  animation: siteFooterCharacterTwinkle 3.8s ease-in-out infinite;
}

.site-cloud-footer__character-spark::before,
.site-cloud-footer__character-spark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 999px;
  background: rgba(255, 255, 255, .68);
  transform: translate(-50%, -50%);
}

.site-cloud-footer__character-spark::before { width: 15px; height: 1px; }
.site-cloud-footer__character-spark::after { width: 1px; height: 15px; }
.site-cloud-footer__character-spark--one { top: 21%; left: 12%; }
.site-cloud-footer__character-spark--two { top: 38%; right: 5%; animation-delay: -1.3s; }
.site-cloud-footer__character-spark--three { right: 17%; bottom: 18%; animation-delay: -2.5s; }

.site-cloud-footer__character-mist {
  position: absolute;
  z-index: 2;
  right: -8%;
  bottom: -2px;
  left: -8%;
  height: 31px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 28% 70%, rgba(225, 236, 255, .18), transparent 54%),
    radial-gradient(ellipse at 68% 65%, rgba(255, 220, 241, .15), transparent 56%);
  filter: blur(3px);
  opacity: .78;
  animation: siteFooterCharacterMist 9s ease-in-out infinite;
}

body.theme-light .site-cloud-footer__character::before {
  background: radial-gradient(circle, rgba(255, 151, 199, .13), rgba(var(--scf-accent-2), .12) 34%, transparent 70%);
  opacity: .7;
}

body.theme-light .site-cloud-footer__character-word {
  background-image: linear-gradient(90deg, rgba(152, 73, 119, .75), rgba(89, 76, 169, .72), rgba(48, 112, 160, .65));
  opacity: .2;
  -webkit-text-stroke-color: rgba(74, 69, 128, .2);
}

body.theme-light .site-cloud-footer__character-image {
  filter:
    drop-shadow(0 1px 1px rgba(64, 70, 112, .48))
    drop-shadow(0 12px 16px rgba(73, 79, 130, .18))
    drop-shadow(0 0 9px rgba(221, 106, 167, .11));
}

@media (min-width: 1121px) {
  .site-cloud-footer__content {
    grid-template-columns:
      minmax(220px, 1.25fr)
      minmax(128px, .7fr)
      minmax(105px, .6fr)
      minmax(105px, .6fr)
      minmax(205px, 1.03fr);
    grid-template-areas: "brand character discover account support";
    gap: clamp(12px, 1.4vw, 22px);
  }

  .site-cloud-footer__support {
    align-self: center;
  }
}

@media (min-width: 621px) and (max-width: 1120px) {
  .site-cloud-footer__content {
    grid-template-columns: minmax(0, 1fr) minmax(112px, .56fr) minmax(0, 1fr);
    grid-template-areas:
      "brand character support"
      "discover character account";
    gap: 17px 20px;
  }

  .site-cloud-footer__character {
    min-height: 250px;
  }

  .site-cloud-footer__character-image {
    bottom: -8px;
    height: 270px;
  }

  .site-cloud-footer__character-word {
    font-size: clamp(1.25rem, 2.7vw, 1.8rem);
  }
}

@media (max-width: 620px) {
  .site-cloud-footer__content {
    position: relative;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "brand brand" "discover account" "support support";
  }

  .site-cloud-footer__brand {
    position: relative;
    z-index: 2;
    min-height: 146px;
    padding-right: 102px;
  }

  .site-cloud-footer__character {
    position: absolute;
    z-index: 3;
    top: 4px;
    right: 8px;
    width: 106px;
    min-height: 0;
    height: 150px;
  }

  .site-cloud-footer__character-image {
    bottom: -6px;
    height: 170px;
  }

  .site-cloud-footer__character-word {
    top: 56%;
    left: 28%;
    max-width: none;
    font-size: .9rem;
    opacity: .23;
  }

  .site-cloud-footer__character::before {
    width: 155%;
    opacity: .68;
  }

  .site-cloud-footer__character-spark--one { top: 18%; left: 4%; }
  .site-cloud-footer__character-spark--two { top: 34%; right: 1%; }
  .site-cloud-footer__character-spark--three { right: 10%; bottom: 15%; }
}

@media (max-width: 390px) {
  .site-cloud-footer__brand {
    min-height: 136px;
    padding-right: 88px;
  }

  .site-cloud-footer__character {
    top: 3px;
    right: 5px;
    width: 92px;
    height: 139px;
  }

  .site-cloud-footer__character-image { bottom: -12px; height: 155px; }
  .site-cloud-footer__character-word { font-size: .84rem; }
}

@media (max-width: 350px) {
  .site-cloud-footer__brand {
    min-height: 126px;
    padding-right: 76px;
  }

  .site-cloud-footer__character {
    right: 1px;
    width: 82px;
    height: 128px;
  }

  .site-cloud-footer__character-image { height: 143px; }
  .site-cloud-footer__character-spark--three { display: none; }
}

@media (forced-colors: active) {
  .site-cloud-footer__character { display: none; }
}

@keyframes siteFooterCharacterFloat {
  0%, 100% { transform: translate3d(-50%, 0, 0) rotate(-.15deg); }
  50% { transform: translate3d(-50%, -4px, 0) rotate(.2deg); }
}

@keyframes siteFooterCharacterAura {
  0%, 100% { opacity: .65; transform: translate(-50%, -50%) scale(.95); }
  50% { opacity: .92; transform: translate(-50%, -50%) scale(1.04); }
}

@keyframes siteFooterCharacterTwinkle {
  0%, 100% { opacity: .18; transform: scale(.62) rotate(0deg); }
  50% { opacity: .9; transform: scale(1.03) rotate(45deg); }
}

@keyframes siteFooterCharacterMist {
  0%, 100% { opacity: .54; transform: translateX(-3px) scaleX(.94); }
  50% { opacity: .82; transform: translateX(4px) scaleX(1.03); }
}