/**
 * TBL Subfooter (Figma node 10355:3915) — one centered rollover link.
 *
 * Rest state (always): the mask clips to one line; row--b is parked one line
 * below (translateY 100%) so the word never appears doubled. The upward roll
 * lives entirely inside the motion-gated media query at the bottom, so touch
 * (no hover) and reduced-motion get a plain static underlined link.
 *
 * Two paths share the same transforms:
 *   - No-JS:  the whole .tbl-subfooter__row translates (simple, no stagger).
 *   - .is-split (JS wrapped chars): each .tbl-subfooter__char translates with a
 *     per-character transition-delay = var(--i) * step, reproducing the
 *     rejouice left-to-right character roll.
 */

.tbl-subfooter {
	--tbl-sf-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--tbl-sf-duration: 0.6s;
	--tbl-sf-stagger: 22ms;
	display: flex;
	justify-content: center;
	text-align: center;
}

.tbl-subfooter__link {
	display: inline-flex;
	flex-direction: column;
	align-items: center; /* center the mask and the (text-width) underline bar */
	padding: 0 15px;     /* click affordance around the link */
	text-decoration: none;
	color: var(--Black, #000);
	font-family: var(--header-font, 'Sequel Sans', sans-serif);
	font-weight: var(--header-font-weight, 400);
	font-size: clamp(34px, 6.5vw, 60.5px);
	/* One-line mask height = this line box. Kept > 1.0 so descenders (j, p) clear
	   the overflow:hidden clip; the extra leading is symmetric, so the reveal copy
	   (parked exactly one line box below) still can't peek. */
	line-height: 1.25;
	letter-spacing: -0.015em; /* Figma -0.93px @ 60.5px */
}

/* The one-line window the copies roll through. */
.tbl-subfooter__mask {
	position: relative;
	display: block;
	overflow: hidden;
	align-self: center;
	white-space: nowrap;
}

.tbl-subfooter__row {
	display: block;
	white-space: nowrap;
	will-change: transform;
}

/* Display copy sits in flow (defines mask height); reveal copy overlays it,
   parked one line below. */
.tbl-subfooter__row--a {
	transform: translateY(0);
}

.tbl-subfooter__row--b {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	transform: translateY(100%);
}

/* When split, the CHARACTERS own the vertical offset — so the rows themselves
   must sit flush (transform:none). Otherwise row--b's own translateY(100%)
   stacks with each char's translateY(100%) and the reveal copy lands one line
   too low, never entering the mask on hover. */
.tbl-subfooter__link.is-split .tbl-subfooter__row {
	transform: none;
}

/* Per-character boxes (JS enhancement). white-space:pre keeps split spaces. */
.tbl-subfooter__char {
	display: inline-block;
	white-space: pre;
	will-change: transform;
}

.tbl-subfooter__link.is-split .tbl-subfooter__row--a .tbl-subfooter__char {
	transform: translateY(0);
}

.tbl-subfooter__link.is-split .tbl-subfooter__row--b .tbl-subfooter__char {
	transform: translateY(100%);
}

/* The underline tracks the ACTIVE word's width: display text at rest
   (--tbl-sf-w-a), reveal text on hover (--tbl-sf-w-b). Both widths are measured
   in JS. Falls back to full link width before JS/measurement and on touch/no-JS. */
.tbl-subfooter__bar {
	display: block;
	align-self: center;
	width: var(--tbl-sf-w-a, 100%);
	height: 2px;
	background: currentColor;
}

/* Visually-hidden real text → the link's accessible name. */
.tbl-subfooter__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/**
 * Motion — pointer devices that can hover, motion not reduced. Everything
 * else falls through to the static rest state above.
 */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {

	/* No-JS fallback: animate the whole row (no per-char stagger). */
	.tbl-subfooter__link:not(.is-split) .tbl-subfooter__row {
		transition: transform var(--tbl-sf-duration) var(--tbl-sf-ease);
	}

	.tbl-subfooter__link:not(.is-split):hover .tbl-subfooter__row--a,
	.tbl-subfooter__link:not(.is-split):focus-visible .tbl-subfooter__row--a {
		transform: translateY(-100%);
	}

	.tbl-subfooter__link:not(.is-split):hover .tbl-subfooter__row--b,
	.tbl-subfooter__link:not(.is-split):focus-visible .tbl-subfooter__row--b {
		transform: translateY(0);
	}

	/* Enhanced: per-character staggered roll. */
	.tbl-subfooter__link.is-split .tbl-subfooter__char {
		transition: transform var(--tbl-sf-duration) var(--tbl-sf-ease);
		transition-delay: calc(var(--i, 0) * var(--tbl-sf-stagger));
	}

	.tbl-subfooter__link.is-split:hover .tbl-subfooter__row--a .tbl-subfooter__char,
	.tbl-subfooter__link.is-split:focus-visible .tbl-subfooter__row--a .tbl-subfooter__char {
		transform: translateY(-100%);
	}

	.tbl-subfooter__link.is-split:hover .tbl-subfooter__row--b .tbl-subfooter__char,
	.tbl-subfooter__link.is-split:focus-visible .tbl-subfooter__row--b .tbl-subfooter__char {
		transform: translateY(0);
	}

	/* Underline animates to the reveal word's width as the word rolls in
	   (no change when the two words are the same length). */
	.tbl-subfooter__bar {
		transition: width var(--tbl-sf-duration) var(--tbl-sf-ease);
	}

	.tbl-subfooter__link:hover .tbl-subfooter__bar,
	.tbl-subfooter__link:focus-visible .tbl-subfooter__bar {
		width: var(--tbl-sf-w-b, 100%);
	}
}