html,
body {
  margin: 0;
  min-height: 100%;
  background: #000;
  color: #fff;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
a {
  cursor: pointer;
}

@keyframes floatParticles {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes marqueeLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-33.3333%);
  }
}

@keyframes marqueeLeftSlow {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-33.3333%);
  }
}

@keyframes faqImageFloat {
  0% {
    transform: scale(1.02) translateY(0);
  }
  50% {
    transform: scale(1.05) translateY(-8px);
  }
  100% {
    transform: scale(1.02) translateY(0);
  }
}

.laurel-marquee {
  width: max-content;
  animation: marqueeLeft 45s linear infinite;
  will-change: transform;
}

.laurel-marquee:hover {
  animation-play-state: paused;
}

.team-marquee {
  width: max-content;
  animation: marqueeLeftSlow 150s linear infinite;
  will-change: transform;
}

.team-marquee:hover {
  animation-play-state: paused;
}

.focus-bg-image {
  opacity: 0.72;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.5));
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.5));
}

.faq-wide-image {
  animation: faqImageFloat 14s ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
}

.edge-fade-mask {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 1) 12%,
    rgba(0, 0, 0, 1) 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 1) 12%,
    rgba(0, 0, 0, 1) 88%,
    transparent 100%
  );
}

.hand-underline {
  position: relative;
  display: inline-block;
  text-decoration: none;
  isolation: isolate;
}

.hand-underline::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: 0.04em;
  height: 0.16em;
  background: #e0c560;
  border-radius: 999px;
  opacity: 0.96;
  transform: rotate(-0.45deg) skewX(-4deg);
  filter: blur(0.1px);
  clip-path: polygon(
    0% 56%,
    7% 49%,
    15% 53%,
    24% 50%,
    33% 55%,
    42% 51%,
    51% 54%,
    60% 50%,
    70% 55%,
    80% 51%,
    90% 54%,
    100% 52%,
    100% 100%,
    0% 100%
  );
  z-index: -1;
}

#header-shell.header-scrolled {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(18px);
}

.faq-panel {
  display: grid;
  transition: all 0.3s;
}

.faq-panel.closed {
  grid-template-rows: 0fr;
}

.faq-panel.open {
  grid-template-rows: 1fr;
}

@media (prefers-reduced-motion: reduce) {
  .laurel-marquee,
  .team-marquee,
  .faq-wide-image {
    animation: none;
  }
}