/* AONOMA RECRUIT hero — translucent moving company wordmark.
   Placed in the lower hero space, above the photo layer but behind copy/viewfinder. */
#aonoma-top {
  --aonoma-wordmark-left: -10vw;
  --aonoma-wordmark-bottom: clamp(6.6rem, 17vh, 12rem);
  --aonoma-wordmark-gap: clamp(7.4rem, 16vw, 12rem);
  --aonoma-wordmark-size: clamp(4.8rem, 18vw, 13.5rem);
  --aonoma-wordmark-alpha: 0.19;
}

#aonoma-top .aonoma-native-hero__media {
  z-index: 0;
}

#aonoma-top .aonoma-native-hero__copy {
  position: relative;
  z-index: 3;
}

#aonoma-top .aonoma-native-hero__viewfinder {
  z-index: 4;
}

#aonoma-top::before,
#aonoma-top::after {
  position: absolute;
  z-index: 1;
  width: max-content;
  pointer-events: none;
  white-space: nowrap;
  color: rgba(255, 255, 255, var(--aonoma-wordmark-alpha));
  font-family: "Inter", system-ui, sans-serif;
  font-size: var(--aonoma-wordmark-size);
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow:
    0 0 20px rgba(255, 255, 255, 0.13),
    0 0 52px rgba(104, 216, 255, 0.1);
  mix-blend-mode: screen;
  opacity: 0.95;
  transform: translate3d(0, 0, 0);
  animation: aonoma-hero-wordmark-drift 54s linear infinite;
  will-change: transform;
}

#aonoma-top::before {
  content: "AONOMA  AONOMA  AONOMA  AONOMA  AONOMA  AONOMA";
  left: var(--aonoma-wordmark-left);
  bottom: calc(var(--aonoma-wordmark-bottom) + var(--aonoma-wordmark-gap));
}

#aonoma-top::after {
  content: "RECRUIT  RECRUIT  RECRUIT  RECRUIT  RECRUIT  RECRUIT";
  left: calc(var(--aonoma-wordmark-left) + 1.5ch);
  bottom: var(--aonoma-wordmark-bottom);
}

@keyframes aonoma-hero-wordmark-drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-42%, 0, 0);
  }
}

@media (min-width: 768px) {
  #aonoma-top {
    --aonoma-wordmark-left: -10vw;
    --aonoma-wordmark-bottom: clamp(4.8rem, 11vh, 8.6rem);
    --aonoma-wordmark-gap: clamp(10.4rem, 13vw, 16.5rem);
    --aonoma-wordmark-size: clamp(7rem, 12vw, 13.5rem);
    --aonoma-wordmark-alpha: 0.145;
  }

  #aonoma-top::before,
  #aonoma-top::after {
    letter-spacing: 0.14em;
  }
}

@media (max-width: 767px) {
  #aonoma-top {
    --aonoma-wordmark-left: -18vw;
    --aonoma-wordmark-bottom: clamp(6.8rem, 20vh, 11.6rem);
    --aonoma-wordmark-gap: clamp(6.7rem, 29vw, 11rem);
    --aonoma-wordmark-size: clamp(4.8rem, 23vw, 8.2rem);
    --aonoma-wordmark-alpha: 0.17;
  }

  #aonoma-top::before,
  #aonoma-top::after {
    letter-spacing: 0.105em;
    animation-duration: 60s;
  }
}

@media (prefers-reduced-motion: reduce) {
  #aonoma-top::before,
  #aonoma-top::after {
    animation: none !important;
    transform: translate3d(-10%, 0, 0);
  }
}