/* =====================================================================
   Tourism Tech TV (tt25/shorts): shared styles
   Ported from the Claude Design prototype (prototype-export/tt-shorts.css
   and Homepage Band 1c). Every selector is scoped to .tt-tv (the block
   wrapper) or .tt-tv-band (the homepage section in the pattern), so the
   .home-content, .lib-page-wrap and .lib-single-content rules cannot
   restyle it. Colours are theme.json presets only; tints are color-mix()
   of presets. Sizing uses container queries. All motion sits inside
   prefers-reduced-motion: no-preference.
   Hub rules: hub.css. Watch page rules: watch.css.
   ===================================================================== */

/* 1. Tokens and base type
   --------------------------------------------------------------------- */

.tt-tv,
.tt-tv-band {
	--tt-radius: 16px;
	--tt-radius-pill: 100px;
	--tt-gutter: 1.5rem;
	--tt-fade: 400ms;
	--tt-stagger: 60ms;
	--tt-swap: 200ms;
	--tt-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--tt-ring: var(--wp--preset--color--teal-dark);
	--tt-ring-width: 2px;
	--tt-ring-offset: 3px;
	--tt-navy-tint: color-mix(in srgb, var(--wp--preset--color--deep-navy) 40%, var(--wp--preset--color--white));
	--tt-shadow: var(--shadow-card, 0 2px 12px rgba(0, 0, 0, 0.06));
	--tt-shadow-hover: var(--shadow-card-hover, 0 8px 24px rgba(0, 0, 0, 0.12));
	--tt-line: color-mix(in srgb, var(--wp--preset--color--deep-navy) 14%, transparent);
}

.tt-tv.tt-scope {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: normal;
	color: var(--wp--preset--color--primary);
	-webkit-font-smoothing: antialiased;
}

.tt-tv *,
.tt-tv *::before,
.tt-tv *::after { box-sizing: border-box; }

.tt-tv.is-mode-hub,
.tt-tv.is-mode-watch { container: tt-block / inline-size; }

.tt-tv :where(a) { color: var(--wp--preset--color--teal-dark); }
.tt-tv :where(a):hover { color: var(--wp--preset--color--deep-navy); }

.tt-tv .tt-h1,
.tt-tv .tt-h2,
.tt-tv .tt-h3 {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--deep-navy);
	text-wrap: balance;
}
.tt-tv .tt-h1 {
	font-weight: 400;
	line-height: 1.08;
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-size: clamp(2rem, 5cqi, 3.5rem);
}
.tt-tv .tt-h2 {
	font-weight: 400;
	line-height: 1.12;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-size: clamp(1.75rem, 3cqi, 2.5rem);
}
.tt-tv .tt-h3 { font-weight: 500; line-height: 1.25; font-size: 1.25rem; }
.tt-tv .tt-h1 em,
.tt-tv .tt-h2 em,
.tt-tv .tt-h3 em { font-style: italic; font-weight: 400; color: var(--wp--preset--color--teal-dark); }

.tt-tv .tt-lede {
	margin: 0;
	max-width: 60ch;
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--wp--preset--color--primary);
	text-wrap: pretty;
}

.tt-tv .tt-eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.35;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--teal-dark);
}

.tt-tv .tt-vh {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* 2. Navy and teal-light contexts
   --------------------------------------------------------------------- */

.tt-tv .tt-on-navy { color: var(--wp--preset--color--white); --tt-ring: var(--wp--preset--color--teal); }
.tt-tv .tt-on-navy .tt-h1,
.tt-tv .tt-on-navy .tt-h2,
.tt-tv .tt-on-navy .tt-h3 { color: var(--wp--preset--color--white); }
.tt-tv .tt-on-navy .tt-h1 em,
.tt-tv .tt-on-navy .tt-h2 em,
.tt-tv .tt-on-navy .tt-h3 em,
.tt-tv .tt-on-navy .tt-eyebrow { color: var(--wp--preset--color--teal); }
.tt-tv .tt-on-navy .tt-lede { color: color-mix(in srgb, var(--wp--preset--color--white) 86%, transparent); }
.tt-tv .tt-on-navy :where(a) { color: var(--wp--preset--color--white); }

.tt-tv .tt-on-teal-light { background: var(--wp--preset--color--teal-light); }
.tt-tv .tt-on-teal-light .tt-eyebrow,
.tt-tv .tt-on-teal-light .tt-link,
.tt-tv .tt-on-teal-light .tt-link:hover { color: var(--wp--preset--color--deep-navy); }
.tt-tv .tt-on-teal-light .tt-tag--time { background: var(--wp--preset--color--white); }

/* 3. Focus ring
   --------------------------------------------------------------------- */

.tt-tv :focus-visible,
.tt-tv-band :focus-visible {
	outline: var(--tt-ring-width) solid var(--tt-ring);
	outline-offset: var(--tt-ring-offset);
}

/* 4. Buttons, links, chips, tags
   --------------------------------------------------------------------- */

.tt-tv .tt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.7rem 1.5rem;
	border: 2px solid transparent;
	border-radius: var(--tt-radius-pill);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.tt-tv .tt-btn--primary { background: var(--wp--preset--color--teal-dark); color: var(--wp--preset--color--white); }
.tt-tv .tt-btn--primary:hover { background: var(--wp--preset--color--deep-navy); color: var(--wp--preset--color--white); }

.tt-tv .tt-link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 44px;
	font-weight: 600;
	color: var(--wp--preset--color--teal-dark);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 5px;
}
.tt-tv .tt-link:hover { color: var(--wp--preset--color--teal-dark); text-decoration-color: currentColor; }
.tt-tv .tt-on-navy .tt-link,
.tt-tv .tt-on-navy .tt-link:hover { color: var(--wp--preset--color--white); }

.tt-tv .tt-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0 1.125rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent);
	border-radius: var(--tt-radius-pill);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}
.tt-tv .tt-chip:hover { border-color: var(--wp--preset--color--teal-dark); }
.tt-tv .tt-chip__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--topic, var(--wp--preset--color--teal)); }
.tt-tv .tt-on-navy .tt-chip {
	background: color-mix(in srgb, var(--wp--preset--color--white) 6%, transparent);
	border-color: color-mix(in srgb, var(--wp--preset--color--white) 34%, transparent);
	color: var(--wp--preset--color--white);
}
.tt-tv .tt-on-navy .tt-chip:hover {
	background: color-mix(in srgb, var(--wp--preset--color--white) 14%, transparent);
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
}

.tt-tv .tt-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	height: 24px;
	padding: 0 0.5625rem;
	border-radius: var(--tt-radius-pill);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.tt-tv .tt-tag--time { background: var(--wp--preset--color--teal-light); color: var(--wp--preset--color--deep-navy); }
.tt-tv .tt-tag--new {
	background: var(--wp--preset--color--salmon);
	color: var(--wp--preset--color--deep-navy);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.6875rem;
}

/* 5. Topic colours: fills and top borders only, never text on white
   --------------------------------------------------------------------- */

.tt-tv .tt-colour--teal { --topic: var(--wp--preset--color--teal); }
.tt-tv .tt-colour--salmon { --topic: var(--wp--preset--color--salmon); }
.tt-tv .tt-colour--orange { --topic: var(--wp--preset--color--orange); }
.tt-tv .tt-colour--deep-navy { --topic: var(--wp--preset--color--deep-navy); }
.tt-tv .tt-on-navy .tt-colour--deep-navy { --topic: var(--tt-navy-tint); }

/* 6. Film card
   9:16 poster, meta bar, eyebrow, title. Minimum 216px so YouTube's
   player (200 x 200 minimum) always fits when it plays in place.
   --------------------------------------------------------------------- */

.tt-tv .tt-film {
	container: tt-film / inline-size;
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 216px;
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--primary);
}

.tt-tv .tt-film__frame {
	position: relative;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	isolation: isolate;
	border-top: 4px solid var(--topic, var(--wp--preset--color--teal));
	border-radius: var(--tt-radius);
	background: var(--wp--preset--color--deep-navy);
	box-shadow: var(--tt-shadow);
}

.tt-tv .tt-film__poster { position: absolute; inset: 0; }

/* A 16:9 YouTube thumbnail in a 9:16 box: the centre is the vertical frame. */
.tt-tv .tt-film__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

.tt-tv .tt-film__shade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--wp--preset--color--deep-navy) 90%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--deep-navy) 50%, transparent) 20%,
		transparent 44%
	);
}

.tt-tv .tt-film__play {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	margin: 0;
	padding: 0 8px 18px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--white);
	font: inherit;
	text-decoration: none;
	cursor: pointer;
}
.tt-tv .tt-film__play:focus-visible { outline: none; }

.tt-tv .tt-film__disc {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 56px;
	height: 56px;
	margin: -28px 0 0 -28px;
	border-radius: 50%;
	background: var(--wp--preset--color--teal-dark);
	box-shadow: 0 6px 18px color-mix(in srgb, var(--wp--preset--color--deep-navy) 35%, transparent);
}
.tt-tv .tt-film__disc::before {
	content: "";
	position: absolute;
	inset: 0;
	width: 17px;
	height: 20px;
	margin: auto;
	background: var(--wp--preset--color--white);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	transform: translateX(2px);
}
@container tt-film (min-width: 260px) {
	.tt-tv .tt-film__disc { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
	.tt-tv .tt-film__disc::before { width: 19px; height: 22px; }
}

.tt-tv .tt-film__label {
	position: relative;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	color: var(--wp--preset--color--white);
}

.tt-tv .tt-film__frame:has(.tt-film__play:focus-visible),
.tt-tv .ws-player__frame:has(.tt-film__play:focus-visible) {
	outline: var(--tt-ring-width) solid var(--tt-ring);
	outline-offset: var(--tt-ring-offset);
}
@supports not selector(:has(*)) {
	.tt-tv .tt-film__play:focus-visible {
		box-shadow: inset 0 0 0 3px var(--wp--preset--color--white), inset 0 0 0 5px var(--tt-ring);
	}
}

.tt-tv .tt-film__player {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: var(--wp--preset--color--deep-navy);
}

.tt-tv .tt-film__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	min-height: 44px;
	margin-top: 0.5rem;
}
.tt-tv .tt-film__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--wp--preset--color--mid-grey);
}
.tt-tv .tt-film__src { white-space: nowrap; }

.tt-tv .tt-film__close {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	min-height: 44px;
	margin: 0;
	padding: 0 1rem;
	border: 1.5px solid var(--wp--preset--color--teal-dark);
	border-radius: var(--tt-radius-pill);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--teal-dark);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
}
.tt-tv .tt-film__close:hover { background: var(--wp--preset--color--teal-light); }

.tt-tv .tt-film__eyebrow { margin-top: 0.25rem; font-size: 0.75rem; letter-spacing: 0.08em; }
.tt-tv .tt-film__date { white-space: nowrap; }

.tt-tv .tt-film__title {
	margin: 0.375rem 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.28;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--deep-navy);
	text-wrap: pretty;
}
.tt-tv .tt-film__title a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 4px;
}
.tt-tv .tt-film__title a:hover { color: inherit; text-decoration-color: var(--wp--preset--color--teal-dark); }
.tt-tv .tt-film__arrow {
	display: inline-block;
	margin-left: 0.25rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	color: var(--wp--preset--color--teal-dark);
}
@container tt-film (min-width: 280px) {
	.tt-tv .tt-film__title { font-size: 1.1875rem; }
}

.tt-tv .tt-film:hover .tt-film__frame,
.tt-tv .tt-film:focus-within .tt-film__frame { box-shadow: var(--tt-shadow-hover); }
.tt-tv .tt-film:hover .tt-film__disc { background: var(--wp--preset--color--deep-navy); }
.tt-tv .tt-film.is-playing .tt-film__frame { background: var(--wp--preset--color--deep-navy); }

/* 7. Rails: swipe with a peek under 640px, 240px cards from 640px,
   five across from 1144px with .tt-rail--row
   --------------------------------------------------------------------- */

.tt-tv .tt-rail {
	container: tt-rail / inline-size;
	position: relative;
	--tt-rail-pad: max(var(--tt-gutter, 0px), 8px);
}

.tt-tv .tt-rail__track {
	--tt-card-w: min(78%, 300px);
	display: flex;
	gap: 1.25rem;
	margin: 0 calc(-1 * var(--tt-rail-pad));
	padding: 10px var(--tt-rail-pad) 28px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--tt-rail-pad);
	scrollbar-width: thin;
	list-style: none;
}
.tt-tv .tt-rail__track > * {
	flex: 0 0 var(--tt-card-w);
	min-width: 216px;
	margin: 0;
	scroll-snap-align: start;
}
.tt-tv .tt-rail__track > [hidden] { display: none; }

.tt-tv .tt-rail__hint {
	display: none;
	justify-content: flex-end;
	margin: 0 0 0.25rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--wp--preset--color--mid-grey);
}
.tt-tv .tt-on-navy .tt-rail__hint { color: color-mix(in srgb, var(--wp--preset--color--white) 78%, transparent); }

@container tt-rail (max-width: 639px) {
	.tt-tv .tt-rail__hint { display: flex; }
}
.tt-tv .tt-rail__hint[hidden],
.tt-tv .tt-film__poster[hidden],
.tt-tv .tt-film__src[hidden] { display: none; }
@container tt-rail (min-width: 640px) {
	.tt-tv .tt-rail__track { --tt-card-w: 240px; gap: 1.5rem; }
}
@container tt-rail (min-width: 1144px) {
	.tt-tv .tt-rail--row > .tt-rail__track {
		display: grid;
		grid-template-columns: repeat(5, minmax(216px, 1fr));
		gap: 2rem 1rem;
		margin: 0;
		padding: 10px 0 1.25rem;
		overflow: visible;
		scroll-snap-type: none;
	}
}

/* 8. Sections
   --------------------------------------------------------------------- */

.tt-tv .tt-section { container: tt-section / inline-size; padding: 4rem var(--tt-gutter); }
.tt-tv .tt-section--off-white { background: var(--wp--preset--color--off-white); }
.tt-tv .tt-band { background: var(--wp--preset--color--deep-navy); color: var(--wp--preset--color--white); }
.tt-tv .tt-band--gradient { background: var(--wp--preset--gradient--hero); }
.tt-tv .tt-wrap { width: 100%; max-width: var(--wp--style--global--wide-size, 1200px); margin-inline: auto; }

.tt-tv .tt-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-bottom: 1.75rem;
}
.tt-tv .tt-section-head__text { display: grid; gap: 0.75rem; max-width: 640px; }
.tt-tv .tt-section-head__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.5rem; }

@container tt-block (max-width: 639px) {
	.tt-tv .tt-section { padding-block: 3rem; }
}

/* 9. Homepage band (pattern tt25/homepage-tourism-tech-tv, direction 1c)
   The section, eyebrow, H2, intro and buttons are core blocks; these
   rules restyle them to the prototype and beat the .home-content ones.
   --------------------------------------------------------------------- */

.tt-tv-band.section {
	background-color: var(--wp--preset--color--off-white);
	background-image:
		radial-gradient(52% 42% at 50% 64%, color-mix(in srgb, var(--wp--preset--color--teal) 20%, transparent), transparent 72%),
		radial-gradient(color-mix(in srgb, var(--wp--preset--color--deep-navy) 4.5%, transparent) 0.7px, transparent 1px),
		radial-gradient(color-mix(in srgb, var(--wp--preset--color--deep-navy) 3%, transparent) 0.7px, transparent 1px),
		repeating-linear-gradient(94deg, color-mix(in srgb, var(--wp--preset--color--deep-navy) 1.4%, transparent) 0 1px, transparent 1px 6px);
	background-size: auto, 7px 7px, 13px 13px, auto;
	background-position: 0 0, 0 0, 4px 6px, 0 0;
}
.tt-tv-band .section-header { margin-bottom: 1.75rem; }
.tt-tv-band .section-header .eyebrow { color: var(--wp--preset--color--teal-dark); margin-bottom: 0.75rem; }
.tt-tv-band .section-header .wp-block-heading {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--deep-navy);
}
.tt-tv-band .section-header .wp-block-heading em {
	font-style: italic;
	font-weight: 400;
	color: var(--wp--preset--color--teal-dark);
}
.tt-tv-band .section-header .section-lead {
	margin-inline: auto;
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--wp--preset--color--primary);
}

.tt-tv-band .tt-tv-band__links {
	align-items: center;
	justify-content: center;
	gap: 0.25rem 1.5rem;
	margin-top: 1.25rem;
}
.tt-tv-band .wp-block-button.btn--primary .wp-block-button__link {
	min-height: 44px;
	padding: 0.7rem 1.5rem;
	background: var(--wp--preset--color--teal-dark);
	color: var(--wp--preset--color--white);
}
.tt-tv-band .wp-block-button.btn--primary .wp-block-button__link:hover {
	background: var(--wp--preset--color--deep-navy);
	color: var(--wp--preset--color--white);
	box-shadow: none;
}
.tt-tv-band .wp-block-button.tt-tv-follow .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 0.25rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--teal-dark);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 5px;
}
.tt-tv-band .wp-block-button.tt-tv-follow .wp-block-button__link:hover {
	background: transparent;
	color: var(--wp--preset--color--teal-dark);
	text-decoration-color: currentColor;
	transform: none;
	box-shadow: none;
}

.tt-tv.is-mode-band { margin-block: 0; }
.tt-tv .hb-fanwrap .tt-tag--time { background: var(--wp--preset--color--white); }
/* The teal glow sits behind the card text: keep it at AA contrast. */
.tt-tv .hb-fanwrap .tt-film__eyebrow { color: var(--wp--preset--color--deep-navy); }
.tt-tv .hb-fanwrap .tt-film__meta { color: var(--wp--preset--color--primary); }

/* Wide (5 cards fit): the dealt-out row. Used on touch screens, with
   reduced motion, and as the base the fan stacks from. */
@container tt-rail (min-width: 1100px) {
	.tt-tv .hb-fanwrap > .hb-fan {
		display: flex;
		justify-content: center;
		gap: 0;
		margin: 0;
		padding: 30px 0 8px;
		overflow: visible;
		scroll-snap-type: none;
	}
	.tt-tv .hb-fan > * { flex: 0 0 216px; min-width: 216px; position: relative; }
	.tt-tv .hb-fan > * + * { margin-left: clamp(4px, calc((100cqi - 1080px) / 4), 15px); }
}

/* Fanned stack: only with a fine pointer that can hover, motion allowed
   and a container wide enough for the dealt-out row (five 216px cards
   plus gaps, so 1100px rather than the 900px first planned; below that
   the dealt row would overlap card text). Touch screens never get the stack. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	@container tt-rail (min-width: 1100px) {
		.tt-tv .hb-fanwrap > .hb-fan {
			display: flex;
			justify-content: center;
			gap: 0;
			margin: 0;
			padding: 30px 0 8px;
			overflow: visible;
			scroll-snap-type: none;
		}
		.tt-tv .hb-fanwrap .tt-rail__hint { display: none; }
		.tt-tv .hb-fan > * {
			position: relative;
			flex: 0 0 216px;
			min-width: 216px;
			transform-origin: 50% 140%;
			transition: margin-left 520ms var(--tt-ease), transform 520ms var(--tt-ease);
		}
		.tt-tv .hb-fan > * + * { margin-left: -164px; }
		.tt-tv .hb-fan > :nth-child(1) { z-index: 5; transform: translateX(-64px) rotate(-1.5deg); }
		.tt-tv .hb-fan > :nth-child(2) { z-index: 4; transform: translateX(-64px) rotate(3deg) translateY(-6px); }
		.tt-tv .hb-fan > :nth-child(3) { z-index: 3; transform: translateX(-64px) rotate(7deg) translateY(-2px); }
		.tt-tv .hb-fan > :nth-child(4) { z-index: 2; transform: translateX(-64px) rotate(11deg) translateY(8px); }
		.tt-tv .hb-fan > :nth-child(5) { z-index: 1; transform: translateX(-64px) rotate(15deg) translateY(22px); }

		/* Dealt out on hover, keyboard focus, or while a card plays. */
		.tt-tv .hb-fan:hover > * + *,
		.tt-tv .hb-fan:focus-within > * + *,
		.tt-tv .hb-fan.is-dealt > * + * { margin-left: clamp(4px, calc((100cqi - 1080px) / 4), 15px); }
		.tt-tv .hb-fan:hover > *,
		.tt-tv .hb-fan:focus-within > *,
		.tt-tv .hb-fan.is-dealt > * { transform: none; }
		.tt-tv .hb-fan:hover > :hover,
		.tt-tv .hb-fan > :focus-within { z-index: 10; transform: translateY(-12px); }
		.tt-tv .hb-fan.hb-fan > .is-playing-item { z-index: 11; transform: none; }

		.tt-tv .hb-fan :is(.tt-film__bar, .tt-film__eyebrow, .tt-film__title, .tt-film__label) { transition: opacity 320ms var(--tt-ease); }
		.tt-tv .hb-fan .tt-film__disc { transition: opacity 320ms var(--tt-ease), transform var(--tt-swap) var(--tt-ease), background-color var(--tt-swap) var(--tt-ease); }
		.tt-tv .hb-fan:not(:hover):not(:focus-within):not(.is-dealt) > :not(:first-child) :is(.tt-film__bar, .tt-film__eyebrow, .tt-film__title, .tt-film__disc, .tt-film__label) { opacity: 0; }
		.tt-tv .hb-fan .tt-film .tt-film__frame { box-shadow: 0 10px 30px color-mix(in srgb, var(--wp--preset--color--deep-navy) 20%, transparent); }
		.tt-tv .hb-fan .tt-film:hover .tt-film__frame { box-shadow: 0 18px 40px color-mix(in srgb, var(--wp--preset--color--deep-navy) 28%, transparent); }
	}
}

/* 10. Motion: fade-up (classes added by view.js only), hover lift,
   poster to player swap. Nothing autoplays.
   --------------------------------------------------------------------- */

@keyframes tt-swap-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
	.tt-tv .tt-reveal {
		transition: opacity var(--tt-fade) var(--tt-ease), transform var(--tt-fade) var(--tt-ease);
		transition-delay: calc(var(--i, 0) * var(--tt-stagger));
	}
	.tt-tv .tt-reveal.is-pending { opacity: 0; transform: translateY(16px); }

	.tt-tv .tt-film__frame { transition: transform var(--tt-swap) var(--tt-ease), box-shadow var(--tt-swap) var(--tt-ease); }
	.tt-tv .tt-film:hover .tt-film__frame,
	.tt-tv .tt-film:focus-within .tt-film__frame { transform: translateY(-4px); }
	.tt-tv .tt-film.is-playing .tt-film__frame { transform: none; }

	.tt-tv .tt-film__disc { transition: transform var(--tt-swap) var(--tt-ease), background-color var(--tt-swap) var(--tt-ease); }
	.tt-tv .tt-film:hover .tt-film__disc { transform: scale(1.06); }

	.tt-tv .tt-film__player,
	.tt-tv .tt-film__close { animation: tt-swap-in var(--tt-swap) var(--tt-ease) both; }

	.tt-tv .tt-btn,
	.tt-tv .tt-chip,
	.tt-tv .tt-film__close { transition: background-color var(--tt-swap), color var(--tt-swap), border-color var(--tt-swap); }
	.tt-tv .tt-link,
	.tt-tv .tt-film__title a { transition: text-decoration-color var(--tt-swap); }
}