/**
 * The Wicked — Scroll Indicator (the hero's "Scroll" cue: uppercase caption over a
 * downward-fading vertical stroke, gently bobbing). Recreates the design reference
 * `floatcue` cue. Brand defaults live here; the widget's Style controls override them
 * by targeting the same real CSS properties (editor-safe, no control-set --vars).
 */

.tw-scroll-cue-wrap {
	display: flex;
	justify-content: center;      /* Alignment control overrides */
}

.tw-scroll-cue {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;                     /* Gap control overrides */
	text-decoration: none;
}

.tw-scroll-cue__label {
	font-family: var(--tw-font-body);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: .3em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--tw-muted2);      /* Label Color + Typography controls override */
}

/* Shared cue wrapper — holds whichever shape is selected and carries the colour
   (Color control overrides; the Line gradient and the SVG strokes/fill read it via
   currentColor). */
.tw-scroll-cue__cue {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;               /* kill inline-SVG baseline gap */
	color: var(--tw-tan);         /* Color control overrides */
}

.tw-scroll-cue__stroke {
	flex: 0 0 auto;
	width: 1px;                   /* Thickness control overrides */
	height: 26px;                 /* Length control overrides */
	background-image: linear-gradient(currentColor, transparent);
}

/* Arrow / chevron shapes. Height comes from the Length control; width follows each
   shape's viewBox aspect ratio. `non-scaling-stroke` (set per shape element) makes
   the Thickness control's stroke-width render in real px regardless of viewBox scale.
   `fill="none"` on each <svg> keeps the polylines open; the filled arrow's <polygon>
   sets its own fill/stroke. */
.tw-scroll-cue__svg {
	display: block;
	flex: 0 0 auto;
	height: 26px;                 /* Length control overrides */
	width: auto;                  /* derived from viewBox aspect */
	stroke: currentColor;
	stroke-width: 1px;            /* Thickness control overrides */
	stroke-linecap: round;
	stroke-linejoin: round;
	overflow: visible;            /* don't clip a thick non-scaling stroke at the edges */
}

/* Gentle bob — the reference's `floatcue` keyframe (index.html:450). */
@keyframes tw-scrollcue-float {
	0%, 100% { transform: translateY(0);   opacity: .5; }
	50%      { transform: translateY(7px); opacity: 1; }
}

.tw-scroll-cue.is-float {
	animation: tw-scrollcue-float 2.4s ease-in-out infinite; /* Motion Speed overrides duration */
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.tw-scroll-cue.is-float {
		animation: none;
	}
}