/* ==========================================================================
   SCROLL CUE
   --------------------------------------------------------------------------
   The "scroll down" indicator in the hero: a thin line with a chevron
   that travels down through a small window on a loop.

   Markup: an element with the class "scroll-cue" wrapping an <i>.
   The element's own absolute position (left: 50%) is set outside this
   file; translateX(-50%) here centres it on that point.
   ========================================================================== */

.scroll-cue {
	z-index: 2;
	width: 9px;   /* wide enough for the chevron */
	height: 50px;
	overflow: hidden;
	transform: translateX(-50%);
}

/* The travelling line. */
.scroll-cue i {
	position: absolute;
	top: -100%;
	left: 50%;
	width: 1px;
	height: 100%;
	background: rgba(236, 232, 227, 0.65);
	transform: translateX(-50%);
	animation: kuysen-scroll-cue 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* Hide the icon font's own glyph; the line and chevron are drawn in CSS. */
.scroll-cue i::before {
	display: none;
}

/* The chevron, pinned to the bottom of the travelling line. */
.scroll-cue i::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 6px;
	height: 6px;
	border-right: 1px solid rgba(236, 232, 227, 0.65);
	border-bottom: 1px solid rgba(236, 232, 227, 0.65);
	transform: translateX(-50%) rotate(45deg);
}

/* Renamed from "cue" to avoid clashing with other keyframes. */
@keyframes kuysen-scroll-cue {
	to {
		top: 100%;
	}
}

/* ADDED: reduced motion shows the line at rest instead of looping. */
@media (prefers-reduced-motion: reduce) {
	.scroll-cue i {
		top: 0;
		animation: none;
	}
}

/* Company – Milestones timeline: drag cue */
.drag-cue {
  text-align: right;
  margin-bottom: 1rem;
  font-size: var(--h6-font-size);
  letter-spacing: 2px;
  font-weight: 300;
  color: var(--color-content-secondary);
  transition: opacity .6s ease;
}
.drag-cue .w-text-h {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
}
.drag-cue i {
  font-size: 1.5em;
  animation: drag-cue-nudge 1.8s ease-in-out infinite;
}
@keyframes drag-cue-nudge {
  0%, 100% { transform: translateX(0);    opacity: 1; }
  50%      { transform: translateX(10px); opacity: .5; }
}
.drag-cue.is-dismissed { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .drag-cue i { animation: none; }
}