/* HUBBY refinement pass — keeps the original compositions and motion intact. */
@font-face {
  font-family: "Gugi";
  src: url("/preview/assets/fonts/gugi-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

body {
  text-rendering: optimizeLegibility;
}

.brand span,
.footer-brand span {
  font-family: "Gugi", sans-serif;
  font-weight: 400;
  letter-spacing: -.035em;
}

/* Make the desktop wordmark share the app's personality without losing the icon. */
@media (min-width: 721px) {
  .site-header .brand span {
    color: #ff7600;
    font-size: 1.42rem;
    line-height: 1;
    -webkit-text-stroke: 1px #fff;
    text-shadow: 0 1px 0 rgba(8, 43, 52, .14);
  }

  .site-header .brand img {
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
  }

  .site-header .brand:hover img {
    box-shadow: 0 12px 26px rgba(8, 201, 232, .3);
    transform: rotate(-5deg) scale(1.04);
  }
}

/* Preserve the endless HUBBY band and make the loop visually seamless. */
.hero-marquee-track {
  animation-name: hero-marquee-scroll;
  animation-duration: 40s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.hero-marquee-track span {
  white-space: nowrap;
}

/* Deliberate, quiet motion around supported games. */
.game-orbit > div {
  animation: hubby-game-float 4.8s ease-in-out infinite;
  transform: translateZ(0);
  will-change: transform;
}

.game-orbit > div:nth-child(2) { animation-delay: -.8s; }
.game-orbit > div:nth-child(3) { animation-delay: -1.6s; }
.game-orbit > div:nth-child(4) { animation-delay: -2.4s; }
.game-orbit > div:nth-child(5) { animation-delay: -3.2s; }
.game-orbit > div:nth-child(6) { animation-delay: -4s; }

@keyframes hubby-game-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -7px, 0); }
}

/* The games page keeps its JS-driven endless carousel; this only improves feel. */
.game-carousel {
  scroll-behavior: smooth;
}

.game-card,
.experience-card,
.sample-party,
.feature-card,
.info-card,
.step-card,
.support-card,
.home-directory > a,
.wide-link,
.button {
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    box-shadow .28s ease,
    border-color .28s ease,
    background-color .28s ease;
}

@media (hover: hover) and (pointer: fine) {
  .game-card:hover,
  .experience-card:hover,
  .sample-party:hover,
  .feature-card:hover,
  .info-card:hover,
  .step-card:hover,
  .support-card:hover {
    transform: translateY(-5px);
  }

  .game-card:hover,
  .feature-card:hover,
  .info-card:hover,
  .step-card:hover,
  .support-card:hover {
    border-color: rgba(8, 127, 145, .34);
    box-shadow: 0 24px 58px rgba(15, 57, 69, .13);
  }
}

/* Mobile stays compositionally identical to the restored version. */
@media (max-width: 720px) {
  .site-header .brand span {
    font-family: "Gugi", sans-serif !important;
  }

  .hero-marquee-track {
    animation-duration: 40s !important;
    animation-iteration-count: infinite !important;
  }

  .game-orbit > div {
    animation-duration: 4.2s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-marquee-track,
  .game-orbit > div {
    animation-play-state: paused;
  }
}