/* Subtle basketball atmosphere for the public discovery and voting pages. */
body.scw-court-motion {
  position: relative;
  isolation: isolate;
}

body.scw-court-motion::before {
  inset: -20vmax;
  z-index: -2;
  background-color: var(--scw-bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cg fill='none' stroke='%23ff6a00' stroke-width='3'%3E%3Ccircle cx='180' cy='180' r='82' opacity='.38'/%3E%3Cpath d='M98 180h164M180 98v164M119 127c42 29 80 29 122 0M119 233c42-29 80-29 122 0M127 119c29 42 29 80 0 122M233 119c-29 42-29 80 0 122' opacity='.28'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle at 14% 8%, rgba(255, 106, 0, .2), transparent 26%),
    radial-gradient(circle at 84% 48%, rgba(255, 106, 0, .1), transparent 25%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 12px);
  background-position: 20px 10px, center, center, center;
  background-repeat: repeat, no-repeat, no-repeat, repeat;
  background-size: 360px 360px, 100% 100%, 100% 100%, auto;
  opacity: .55;
  transform: translate3d(-2%, -2%, 0) rotate(-1deg);
  animation: scw-court-drift 38s linear infinite;
  will-change: transform;
}

body.scw-court-motion::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% -18%, transparent 0 29%, rgba(255, 106, 0, .09) 29.2% 29.7%, transparent 29.9%),
    linear-gradient(90deg, transparent 49.9%, rgba(243, 233, 213, .035) 50%, transparent 50.1%);
  opacity: .7;
}

.home .gb-element-hero-10-1 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.home .gb-element-hero-10-1::after {
  content: "";
  position: absolute;
  top: 20px;
  right: max(-115px, calc((100vw - 1180px) / 2 - 170px));
  z-index: 0;
  width: clamp(270px, 34vw, 480px);
  aspect-ratio: 1;
  pointer-events: none;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%23ff6a00' stroke-linecap='round'%3E%3Ccircle cx='150' cy='150' r='124' stroke-width='6'/%3E%3Cpath d='M26 150h248M150 26v248M58 70c60 46 124 46 184 0M58 230c60-46 124-46 184 0M70 58c46 60 46 124 0 184M230 58c-46 60-46 124 0 184' stroke-width='5'/%3E%3C/g%3E%3C/svg%3E");
  opacity: .12;
  filter: drop-shadow(0 0 32px rgba(255, 106, 0, .16));
  animation: scw-hero-ball-float 13s ease-in-out infinite;
}

.home .gb-element-hero-10-1 > .scw-content-rail {
  position: relative;
  z-index: 1;
}

.home .gb-element-hero-10-2 > * {
  animation: scw-hero-arrive .7s cubic-bezier(.2, .7, .2, 1) both;
}

.home .gb-element-hero-10-2 > :nth-child(2) {
  animation-delay: .08s;
}

.home .gb-element-hero-10-2 > :nth-child(3) {
  animation-delay: .16s;
}

.home .gb-element-hero-10-2 > :nth-child(4) {
  animation-delay: .24s;
}

@keyframes scw-court-drift {
  from { transform: translate3d(-2%, -2%, 0) rotate(-1deg); }
  to { transform: translate3d(2%, 2%, 0) rotate(1deg); }
}

@keyframes scw-hero-ball-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-7deg); }
  50% { transform: translate3d(-18px, 14px, 0) rotate(5deg); }
}

@keyframes scw-hero-arrive {
  from { transform: translate3d(0, 16px, 0); }
  to { transform: none; }
}

@media (max-width: 767px) {
  body.scw-court-motion::before {
    background-size: 290px 290px, 100% 100%, 100% 100%, auto;
    opacity: .42;
    animation-duration: 48s;
  }

  body.scw-court-motion::after {
    opacity: .42;
  }

  .home .gb-element-hero-10-1::after {
    top: 74px;
    right: -145px;
    width: 310px;
    opacity: .09;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.scw-court-motion::before,
  .home .gb-element-hero-10-1::after,
  .home .gb-element-hero-10-2 > * {
    animation: none;
  }
}