/* Shared hero scroll cues: slow downward motion communicates that content continues below. */
@keyframes abelleMainScrollCue {
  0%, 100% {
    transform: translate3d(-50%, -7px, 0);
    opacity: .72;
  }
  50% {
    transform: translate3d(-50%, 0, 0);
    opacity: 1;
  }
}

@keyframes abelleDetailScrollCue {
  0%, 100% {
    background-position: center calc(50% - 5px);
    opacity: .68;
  }
  50% {
    background-position: center calc(50% + 5px);
    opacity: 1;
  }
}

html[data-abelle-site="true"] .ab-hero .ab-scroll {
  animation: abelleMainScrollCue 2.8s cubic-bezier(.45, 0, .55, 1) infinite;
  will-change: transform, opacity;
}

html[data-abelle-site="true"] #subtitle > .container::after {
  width: 36px;
  /* The SVG stays 36x18; the extra vertical room prevents its corners
     from being clipped at either end of the 10px motion range. */
  height: 28px;
  border: 0 !important;
  background: center / 36px 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 18'%3E%3Cpath d='M1 1 L18 17 L35 1' fill='none' stroke='%23fff' stroke-opacity='.9' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transform: none !important;
  animation: abelleDetailScrollCue 2.8s cubic-bezier(.45, 0, .55, 1) infinite !important;
  will-change: background-position, opacity;
}

@media (max-width: 767px) {
  html[data-abelle-site="true"] #subtitle > .container::after {
    width: 32px;
    height: 26px;
    background-size: 32px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-abelle-site="true"] .ab-hero .ab-scroll,
  html[data-abelle-site="true"] #subtitle > .container::after {
    animation: none !important;
  }

  html[data-abelle-site="true"] .ab-hero .ab-scroll {
    transform: translateX(-50%);
    opacity: 1;
  }

  html[data-abelle-site="true"] #subtitle > .container::after {
    transform: none !important;
    opacity: 1;
  }
}