.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  margin-top: -82px;
  padding-top: 136px;
}

.site-header {
  position: relative;
  z-index: 5;
  background: transparent;
}

.site-header .login-link,
.site-header .locale-trigger {
  color: #fff;
}

.site-header .button-dark {
  background: var(--blue);
  color: #fff;
}

.site-header .button-dark:hover {
  background: #43c6ee;
  color: #fff;
}

.brand-logo-white {
  position: relative;
  display: block;
  width: 154px;
  line-height: 0;
}

.brand-logo-white img {
  display: block;
  width: 100%;
  height: auto;
}

.brand-logo-white img:first-child {
  filter: brightness(0) invert(1);
}

.brand-logo-white img:last-child {
  position: absolute;
  inset: 0;
  clip-path: inset(0 70% 0 0);
}

.hero-backdrop {
  position: absolute;
  z-index: -2;
  inset: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  overflow: hidden;
  background: #343837;
}

.hero-backdrop::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(90deg, #151918e8 0%, #202423d9 48%, #202423c9 100%);
}

.hero-avatar {
  position: absolute;
  z-index: 1;
  width: clamp(112px, 13vw, 190px);
  aspect-ratio: 1;
  border: 3px solid #ffffff66;
  border-radius: 50%;
  background-image: url('/assets/hero-dudes.png');
  background-repeat: no-repeat;
  background-size: 500% 500%;
  box-shadow: 0 14px 35px #00000055;
  opacity: .85;
  animation: hero-avatar-float 9s ease-in-out infinite;
}

.hero-avatar:nth-child(2n) { animation-duration: 11s; }
.hero-avatar:nth-child(3n) { animation-duration: 13s; }
.hero-avatar:nth-child(4n) { animation-duration: 15s; animation-delay: -7s; }
.hero-avatar:nth-child(5n) { animation-delay: -4s; }

.hero-avatar-01 { left: 2%; top: 7%; background-position: 0% 0%; animation-delay: -2s; }
.hero-avatar-02 { left: 20%; top: -6%; background-position: 25% 0%; animation-delay: -8s; }
.hero-avatar-03 { left: 40%; top: 5%; background-position: 50% 0%; animation-delay: -5s; }
.hero-avatar-04 { left: 61%; top: -8%; background-position: 75% 0%; animation-delay: -10s; }
.hero-avatar-05 { left: 83%; top: 8%; background-position: 100% 0%; animation-delay: -1s; }
.hero-avatar-06 { left: -5%; top: 35%; background-position: 0% 25%; animation-delay: -9s; }
.hero-avatar-07 { left: 16%; top: 31%; background-position: 25% 25%; animation-delay: -3s; }
.hero-avatar-08 { left: 37%; top: 38%; background-position: 50% 25%; animation-delay: -11s; }
.hero-avatar-09 { left: 58%; top: 30%; background-position: 75% 25%; animation-delay: -6s; }
.hero-avatar-10 { left: 81%; top: 35%; background-position: 100% 25%; animation-delay: -13s; }
.hero-avatar-11 { left: 3%; top: 67%; background-position: 0% 50%; animation-delay: -7s; }
.hero-avatar-12 { left: 23%; top: 62%; background-position: 25% 50%; animation-delay: -1s; }
.hero-avatar-13 { left: 44%; top: 69%; background-position: 50% 50%; animation-delay: -10s; }
.hero-avatar-14 { left: 65%; top: 63%; background-position: 75% 50%; animation-delay: -4s; }
.hero-avatar-15 { left: 86%; top: 67%; background-position: 100% 50%; animation-delay: -12s; }
.hero-avatar-16 { left: -4%; top: 95%; background-position: 0% 75%; animation-delay: -5s; }
.hero-avatar-17 { left: 18%; top: 91%; background-position: 25% 75%; animation-delay: -9s; }
.hero-avatar-18 { left: 39%; top: 96%; background-position: 50% 75%; animation-delay: -2s; }
.hero-avatar-19 { left: 61%; top: 90%; background-position: 75% 75%; animation-delay: -14s; }
.hero-avatar-20 { left: 82%; top: 94%; background-position: 100% 75%; animation-delay: -6s; }
.hero-avatar-21 { left: 7%; top: 117%; background-position: 0% 100%; animation-delay: -11s; }
.hero-avatar-22 { left: 28%; top: 114%; background-position: 25% 100%; animation-delay: -3s; }
.hero-avatar-23 { left: 49%; top: 119%; background-position: 50% 100%; animation-delay: -8s; }
.hero-avatar-24 { left: 70%; top: 113%; background-position: 75% 100%; animation-delay: -1s; }
.hero-avatar-25 { left: 91%; top: 117%; background-position: 100% 100%; animation-delay: -13s; }

@keyframes hero-avatar-float {
  0%, 100% {
    transform: translate3d(-8px, -4px, 0) rotate(-4deg) scale(.97);
    filter: saturate(.8);
  }
  25% {
    transform: translate3d(7px, -18px, 0) rotate(3deg) scale(1.01);
  }
  50% {
    transform: translate3d(14px, 5px, 0) rotate(5deg) scale(1.04);
    filter: saturate(1.08);
  }
  75% {
    transform: translate3d(-5px, 16px, 0) rotate(-2deg) scale(1);
  }
}

.hero-copy,
.hero-visual {
  position: relative;
  z-index: 1;
}

.hero-copy { color: #fff; }
.hero h1 em { color: #c6cdca; }
.hero-text { color: #d3d8d6; }
.hero-note { color: #c3cac7; }

.hero-visual {
  background-color: #ffffffb3;
  background-image: radial-gradient(#e8eae8aa 1px, transparent 1px);
  backdrop-filter: blur(2px);
}

.hero-visual .node-icon { background: #fffffff0; }

/* Mark uses the first male avatar from the new 5×5 portrait layout. */
.dude-node .avatar-one,
.board-dude .avatar-two,
.post-content .avatar-three,
.profile-main .avatar-four {
  background-image: url('/assets/hero-dudes.png');
  background-size: 500% 500%;
  background-position: 0% 0%;
}

.text-shadowed {
  color: #fff;
  text-shadow: 0 1px 2px #0b2630a8;
}

.hero .button-dark {
  color: #fff;
  background: repeating-linear-gradient(
    115deg,
    var(--lime) 0 44px,
    var(--blue) 44px 88px,
    var(--coral) 88px 132px
  );
  background-size: 220% 100%;
  animation: hero-cta-stripes 11s linear infinite;
  box-shadow: 0 8px 22px #00000026;
}

.hero .button-dark:hover {
  color: #fff;
  background: repeating-linear-gradient(
    115deg,
    var(--lime) 0 44px,
    var(--blue) 44px 88px,
    var(--coral) 88px 132px
  );
  background-size: 220% 100%;
  animation-play-state: running;
  box-shadow: 0 10px 26px #00000038;
}

@keyframes hero-cta-stripes {
  from { background-position: 0 0; }
  to { background-position: 264px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero .button-dark {
    animation: none;
  }
}

/* Keep the CTA readable while the brand colors move underneath it. */
.hero .button-dark svg {
  color: currentColor;
}

/* The hover state keeps the animated color treatment instead of flattening it. */
.hero .button-dark:hover {
  color: #fff;
}

.hero .button-dark.text-shadowed,
.hero .button-dark.text-shadowed svg {
  color: #fff !important;
  text-shadow: 0 1px 2px #0b2630b8;
}

@media (max-width: 640px) {
  .brand-logo-white { width: 128px; }

  .hero {
    min-height: 100svh;
    margin-top: -70px;
    padding-top: 115px;
  }

  .hero-avatar { width: 116px; }
  .hero-backdrop::after { background: #202423cc; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-avatar { animation: none; }
}