/* Interactive homepage details kept separate from the base layout. */

.hero__content {
  animation: none;
}

.hero__logo-stage {
  position: relative;
  width: 255px;
  max-width: 58vw;
  margin: 0 auto 22px;
  opacity: 0;
  transform: translateY(12px) scale(.97);
  animation: logo-stage-in .7s .08s cubic-bezier(.22, .61, .36, 1) both;
}

.hero__logo-stage .hero__logo {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
}

.hero__logo--base {
  opacity: .1;
  animation: logo-base-fill 3.1s .12s cubic-bezier(.4, 0, .2, 1) forwards;
}

.hero__logo--trace {
  position: absolute;
  inset: 0;
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  filter: drop-shadow(0 0 9px rgba(113, 231, 223, .7));
  animation: logo-trace 3.1s .12s cubic-bezier(.4, 0, .2, 1) forwards;
}

.hero__message,
.server-actions,
.social-links {
  opacity: 0;
  transform: translateY(18px);
  animation: section-in .72s cubic-bezier(.22, .61, .36, 1) both;
}

.hero__message {
  animation-delay: .5s;
}

.server-actions {
  animation-delay: .68s;
}

.social-links {
  animation-delay: .86s;
}

.portal-link {
  animation: portal-soft-in .65s .42s cubic-bezier(.22, .61, .36, 1) both;
}

.social-link__icon {
  display: block;
  width: 20px;
  height: 20px;
  opacity: .94;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: none;
  transition: opacity .2s ease, transform .2s ease;
}

.social-link__icon--vk {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHRleHQgeD0iMTIiIHk9IjE2IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LWZhbWlseT0iQXJpYWwsc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMCIgZm9udC13ZWlnaHQ9IjkwMCIgZmlsbD0iI2ZmZiI+Vks8L3RleHQ+PC9zdmc+");
}

.social-link__icon--youtube {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHJlY3QgeD0iMi41IiB5PSI1LjUiIHdpZHRoPSIxOSIgaGVpZ2h0PSIxMyIgcng9IjQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIi8+PHBhdGggZD0iTTEwIDlsNiAzLTYgM3oiIGZpbGw9IiNmZmYiLz48L3N2Zz4=");
}

.social-link__icon--discord {
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTcuMiA3LjNBMTMuNCAxMy40IDAgMCAxIDEyIDYuNGMxLjcgMCAzLjMuMyA0LjguOSAxLjggMi41IDIuNyA1LjIgMyA4LTEuMiAxLjUtMi42IDIuNS00LjMgM2wtMS4xLTEuNWMuNy0uMiAxLjQtLjUgMi0uOS0yLjggMS4zLTUuOSAxLjMtOC43IDAgLjYuNCAxLjMuNyAyIC45bC0xLjEgMS41Yy0xLjctLjUtMy4xLTEuNS00LjMtMyAuMy0yLjggMS4yLTUuNSAyLjktOFoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48Y2lyY2xlIGN4PSI5LjQiIGN5PSIxMi42IiByPSIxLjE1IiBmaWxsPSIjZmZmIi8+PGNpcmNsZSBjeD0iMTQuNiIgY3k9IjEyLjYiIHI9IjEuMTUiIGZpbGw9IiNmZmYiLz48L3N2Zz4=");
}

.social-link__icon--telegram {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTIxLjEgNC4xIDE4LjIgMTljLS4yIDEuMS0uOCAxLjQtMS43LjlsLTQuNS0zLjMtMi4yIDIuMWMtLjIuMi0uNC40LS45LjRsLjMtNC42IDguNC03LjZjLjQtLjMtLjEtLjUuNi0uMmwLTEwLjQgNi41LTQuNS0xLjRjLTEtLjMtMS0xIC4yLTEuNGwxNy41LTYuOGMuOC0uMyAxLjUuMiAxLjMgMS41WiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==");
}

.social-link__icon--twitch {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTUgM2gxNXYxMWwtNSA1aC00bC0zIDJ2LTJINFY1eiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0xMCA4djVNMTUgOHY1IiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+");
}

.social-link:hover .social-link__icon,
.social-link:focus-visible .social-link__icon {
  opacity: 1;
  transform: scale(1.08);
}

.server-copy.is-copied {
  box-shadow: 0 18px 40px rgba(0, 0, 0, .34), 0 0 26px rgba(31, 184, 178, .25);
}

.server-copy__icon {
  display: inline-grid;
  min-width: 18px;
  place-items: center;
}

.server-copy.is-copied .server-copy__icon {
  animation: check-pop .35s cubic-bezier(.18, .89, .32, 1.28);
}

.copy-status {
  z-index: 5;
  top: -12px;
  padding: 7px 11px;
  color: var(--color-text);
  border: 1px solid rgba(113, 231, 223, .34);
  border-radius: 5px;
  background: rgba(7, 24, 25, .96);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .32);
  transform: translate(-50%, -75%) scale(.96);
}

.copy-status::after {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 8px;
  height: 8px;
  content: "";
  background: rgba(7, 24, 25, .96);
  border-right: 1px solid rgba(113, 231, 223, .24);
  border-bottom: 1px solid rgba(113, 231, 223, .24);
  transform: translate(-50%, -4px) rotate(45deg);
}

.copy-status.is-visible {
  animation: copy-fade 1.65s cubic-bezier(.22, .61, .36, 1) both;
}

body.video-ready .video-controls,
body.has-video .video-controls {
  display: flex;
  animation: controls-in .45s .15s ease both;
}

.video-controls {
  gap: 6px;
  opacity: .38;
  transition: opacity .25s ease;
}

.video-controls:hover,
.video-controls:focus-within {
  opacity: .82;
}

.video-control {
  width: 32px;
  height: 32px;
  color: rgba(235, 239, 239, .58);
  border-color: rgba(235, 239, 239, .12);
  background: rgba(58, 62, 62, .24);
  box-shadow: none;
  backdrop-filter: blur(5px);
  transition: color .2s ease, border-color .2s ease, background-color .2s ease, opacity .2s ease;
}

.video-control:hover,
.video-control:focus-visible {
  color: rgba(255, 255, 255, .86);
  border-color: rgba(255, 255, 255, .22);
  background: rgba(78, 82, 82, .44);
  box-shadow: none;
  transform: none;
}

.video-control__icon {
  width: 15px;
  height: 15px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.video-control__play {
  fill: currentColor;
  stroke: none;
}

#video-pause[data-state="playing"] .video-control__play,
#video-pause[data-state="paused"] .video-control__pause {
  display: none;
}

#video-volume[data-muted="true"] .video-control__sound-wave,
#video-volume[data-muted="false"] .video-control__mute-mark {
  display: none;
}

@keyframes logo-stage-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes logo-base-fill {
  0%, 55% {
    opacity: .1;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .3));
  }
  82% {
    opacity: .28;
  }
  100% {
    opacity: 1;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .3));
  }
}

@keyframes logo-trace {
  0% {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  78% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
  100% {
    clip-path: inset(0 0 0 0);
    opacity: 0;
  }
}

@keyframes section-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes portal-soft-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes copy-fade {
  0% {
    opacity: 0;
    transform: translate(-50%, -72%) scale(.96);
  }
  18%, 78% {
    opacity: 1;
    transform: translate(-50%, -100%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -112%) scale(.98);
  }
}

@keyframes check-pop {
  0% {
    transform: scale(.45) rotate(-18deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}

@keyframes controls-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: .38;
    transform: translateY(0);
  }
}

/* The old refactor disabled video on every coarse pointer, including touch laptops. */
@media (pointer: coarse), (max-width: 767px) {
  .hero__video {
    display: block !important;
  }

  body.video-ready .video-controls,
  body.has-video .video-controls {
    display: flex !important;
  }
}

@media (max-width: 768px), (max-height: 680px) {
  .hero__logo-stage {
    width: 190px;
    margin-bottom: 14px;
  }
}

@media (max-width: 340px) {
  .hero__logo-stage {
    width: 160px;
  }
}

@media (max-height: 480px) {
  .hero__logo-stage {
    width: 120px;
    margin-bottom: 4px;
  }

  .social-link__icon {
    width: 17px;
    height: 17px;
  }

  .video-control {
    width: 30px;
    height: 30px;
  }
}