/* ==========================================================================
   FF Chocobo Track Banner
   Layout, gold headline, fanned cards with foil sheen, footprint layer.

   The layout responds to the banner's OWN width (CSS container queries), so
   it stacks correctly inside a narrow theme content column as well as when
   it is full-bleed. A viewport media query mirrors the stacked layout for
   the few browsers without container queries.

   Every rule is scoped to .ffct-banner so nothing leaks into the theme.
   ========================================================================== */

.ffct-banner {
	--ffct-height: clamp(460px, 46vw, 700px);
	--ffct-gold: #f3d27a;
	--ffct-gold-deep: #b98a2c;
	--ffct-track: rgba(30, 17, 8, 0.62);
	--ffct-track-glow: rgba(255, 214, 120, 0.42);
	--ffct-radius: 18px;
	--ffct-life: 7s;
	--ffct-fade: 2.2s;

	position: relative;
	isolation: isolate;
	container-type: inline-size;
	container-name: ffct;
	display: flex;
	box-sizing: border-box;
	margin: 0 0 2rem;
	overflow: hidden;
	border-radius: var(--ffct-radius);
	background: linear-gradient(135deg, #1a2440 0%, #3b2a1a 60%, #0f1a2e 100%);
	color: #fff;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
	line-height: 1.4;
}

.ffct-banner.alignfull {
	border-radius: 0;
}

/* Golden-hour theme: darker ink prints with a pale glow. */
.ffct-banner--dawn {
	--ffct-track: rgba(46, 26, 10, 0.6);
	--ffct-track-glow: rgba(255, 245, 210, 0.55);
}

.ffct-banner *,
.ffct-banner *::before,
.ffct-banner *::after {
	box-sizing: border-box;
}

/* Neutralise common theme styles for the elements we use. Wrapped in
   :where() so these resets never outrank the component rules below. */
:where(.ffct-banner figure, .ffct-banner p, .ffct-banner h2, .ffct-banner figcaption) {
	margin: 0;
	padding: 0;
	border: 0;
}

:where(.ffct-banner img) {
	box-shadow: none;
	border: 0;
}

/* --------------------------------------------------------------------------
   Background: Higgsfield still image (slow drift) + optional video loop
   -------------------------------------------------------------------------- */

.ffct-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.ffct-bg__img,
.ffct-bg__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	object-position: 50% 58%;
}

.ffct-bg__img {
	transform-origin: 50% 60%;
	animation: ffct-drift 34s ease-in-out infinite alternate;
}

.ffct-bg__video {
	opacity: 0;
	transition: opacity 1.4s ease;
}

.ffct-bg__video.is-playing {
	opacity: 1;
}

@keyframes ffct-drift {
	from { transform: scale(1.03) translate3d(0.5%, 0, 0); }
	to   { transform: scale(1.09) translate3d(-0.8%, -1%, 0); }
}

/* Legibility veil: dark on the copy side, clear over the cards, vignette below. */
.ffct-veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(12, 7, 4, 0.84) 0%, rgba(12, 7, 4, 0.58) 30%, rgba(12, 7, 4, 0.18) 56%, rgba(12, 7, 4, 0) 78%),
		linear-gradient(180deg, rgba(12, 7, 4, 0.28) 0%, rgba(12, 7, 4, 0) 28%, rgba(12, 7, 4, 0) 62%, rgba(12, 7, 4, 0.58) 100%);
}

/* --------------------------------------------------------------------------
   Footprint layer (filled by banner.js)
   -------------------------------------------------------------------------- */

.ffct-tracks {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	color: var(--ffct-track);
}

.ffct-print {
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	animation:
		ffct-stamp 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.25) forwards,
		ffct-fade var(--ffct-fade) ease-in var(--ffct-life) forwards;
}

.ffct-print--static {
	animation: none;
	opacity: 0.85;
}

@keyframes ffct-stamp {
	from { opacity: 0; transform: scale(0.55); }
	to   { opacity: 1; transform: scale(1); }
}

@keyframes ffct-fade {
	from { opacity: 1; }
	to   { opacity: 0; }
}

/* --------------------------------------------------------------------------
   Content grid (desktop / wide container)
   -------------------------------------------------------------------------- */

.ffct-inner {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(20px, 4vw, 56px);
	gap: clamp(16px, 4cqi, 56px);
	width: 100%;
	min-height: var(--ffct-height);
	padding: clamp(28px, 5vw, 64px) clamp(24px, 5vw, 72px);
	padding: clamp(24px, 5cqi, 64px) clamp(20px, 5.5cqi, 72px);
}

.ffct-banner--no-cards .ffct-inner {
	grid-template-columns: minmax(0, 1fr);
}

.ffct-copy {
	max-width: 560px;
}

.ffct-banner .ffct-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	margin: 0 0 14px;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--ffct-gold);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

.ffct-eyebrow__icon {
	flex: 0 0 auto;
	transform: rotate(-22deg);
	filter: drop-shadow(0 0 5px rgba(243, 210, 122, 0.7));
}

.ffct-banner .ffct-title {
	margin: 0 0 16px;
	font-weight: 700;
	font-size: clamp(2.3rem, 5.4vw, 4.6rem);
	font-size: clamp(2.3rem, 5.6cqi, 4.6rem);
	line-height: 1.02;
	letter-spacing: 0.01em;
	color: #fbe7b0;
	background: linear-gradient(180deg, #fff8dc 0%, #f6d98a 42%, #c2932f 68%, #f9e3a5 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 2px 0 rgba(92, 56, 10, 0.75)) drop-shadow(0 8px 20px rgba(0, 0, 0, 0.5));
	overflow-wrap: anywhere;
}

.ffct-banner .ffct-sub {
	max-width: 46ch;
	font-size: clamp(1rem, 1.35vw, 1.2rem);
	font-size: clamp(1rem, 1.4cqi, 1.2rem);
	line-height: 1.55;
	color: rgba(255, 248, 235, 0.92);
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}

.ffct-banner .ffct-btn,
.ffct-banner .ffct-btn:visited {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	margin-top: 24px;
	padding: 0.95em 1.7em;
	border-radius: 999px;
	border: 1px solid rgba(255, 232, 170, 0.6);
	background: linear-gradient(180deg, #fbe19a 0%, #d9a83a 55%, #b98a2c 100%);
	color: #2a1a06;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.92rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.6);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ffct-banner .ffct-btn:hover,
.ffct-banner .ffct-btn:focus-visible {
	color: #2a1a06;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(243, 210, 122, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.ffct-btn__arrow {
	font-size: 1.3em;
	line-height: 0;
	transform: translateY(-0.05em);
}

/* --------------------------------------------------------------------------
   Card fan
   -------------------------------------------------------------------------- */

.ffct-cards {
	--ffct-card-w: clamp(120px, 12.5vw, 205px);
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	padding: 34px 0 26px;
	perspective: 1200px;
}

/* Cards size themselves to the fan's own column, so four always fit
   whether the fan sits beside the copy or below it. */
@supports (width: 1cqi) {
	.ffct-cards {
		--ffct-card-w: clamp(72px, 27cqi, 205px);
		container-type: inline-size;
	}
}

.ffct-cards .ffct-card {
	position: relative;
	z-index: calc(10 + var(--i, 0));
	flex: 0 0 auto;
	width: var(--ffct-card-w);
	margin: 0 calc(var(--ffct-card-w) * -0.12);
	transform-origin: 50% 115%;
	transform: translateY(var(--lift, 0px)) rotate(var(--rot, 0deg));
	animation: ffct-float 6.5s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * -1.6s);
}

.ffct-card:hover,
.ffct-card:focus-within {
	z-index: 40;
}

@keyframes ffct-float {
	0%, 100% { transform: translateY(var(--lift, 0px)) rotate(var(--rot, 0deg)); }
	50%      { transform: translateY(calc(var(--lift, 0px) - 12px)) rotate(var(--rot, 0deg)); }
}

.ffct-card__inner {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: calc(var(--ffct-card-w) * 0.05);
	background: #0d0a08;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.45);
	transform: perspective(900px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)) scale(var(--s, 1));
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.ffct-card:hover .ffct-card__inner,
.ffct-card:focus-within .ffct-card__inner {
	--s: 1.07;
	box-shadow:
		0 30px 60px rgba(0, 0, 0, 0.6),
		0 0 0 2px rgba(243, 210, 122, 0.6),
		0 0 44px rgba(243, 210, 122, 0.35);
}

.ffct-card__inner img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border-radius: 0;
}

/* Foil sheen: a rainbow band sweeps across each card on a staggered loop,
   then follows the pointer while hovering. */
.ffct-card__foil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	mix-blend-mode: color-dodge;
	opacity: 0.32;
	background: linear-gradient(
		115deg,
		rgba(255, 255, 255, 0) 22%,
		rgba(255, 96, 196, 0.55) 36%,
		rgba(120, 255, 236, 0.6) 46%,
		rgba(255, 236, 120, 0.55) 56%,
		rgba(150, 120, 255, 0.5) 64%,
		rgba(255, 255, 255, 0) 78%
	);
	background-size: 260% 260%;
	background-position: var(--sx, 130%) 50%;
	animation: ffct-sheen 9s linear infinite;
	animation-delay: calc(var(--i, 0) * -2.1s);
}

@keyframes ffct-sheen {
	0%   { background-position: 130% 50%; }
	42%  { background-position: -30% 50%; }
	100% { background-position: -30% 50%; }
}

.ffct-card.is-hover .ffct-card__foil {
	animation: none;
	opacity: 0.45;
}

.ffct-banner .ffct-card__name {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 30px 10px 11px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.88) 100%);
	color: #fff3d0;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.ffct-card__name span {
	display: block;
	margin-top: 2px;
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.8;
}

.ffct-card:hover .ffct-card__name,
.ffct-card:focus-within .ffct-card__name {
	opacity: 1;
	transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Stacked layout: banner narrower than 900px (its own width)
   -------------------------------------------------------------------------- */

@container ffct (max-width: 900px) {
	.ffct-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
		min-height: 0;
		padding-top: 40px;
		text-align: center;
	}

	.ffct-copy {
		max-width: 620px;
		margin: 0 auto;
	}

	.ffct-banner .ffct-title {
		font-size: clamp(2rem, 9cqi, 3.4rem);
	}

	.ffct-sub {
		margin-inline: auto;
	}

	.ffct-eyebrow {
		justify-content: center;
	}

	.ffct-veil {
		background:
			linear-gradient(180deg, rgba(12, 7, 4, 0.82) 0%, rgba(12, 7, 4, 0.6) 40%, rgba(12, 7, 4, 0.3) 70%, rgba(12, 7, 4, 0.55) 100%);
	}

	.ffct-cards {
		padding: 26px 0 18px;
	}
}

@container ffct (max-width: 560px) {
	.ffct-banner .ffct-title {
		font-size: clamp(1.9rem, 10cqi, 2.8rem);
	}
}

/* Fallback for browsers without container queries: same stacked layout
   keyed to the viewport. Harmless duplication where both are supported. */
@media (max-width: 900px) {
	.ffct-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
		min-height: 0;
		padding-top: 40px;
		text-align: center;
	}

	.ffct-copy {
		max-width: 620px;
		margin: 0 auto;
	}

	.ffct-banner .ffct-title {
		font-size: clamp(2rem, 9vw, 3.4rem);
		font-size: clamp(2rem, 9cqi, 3.4rem);
	}

	.ffct-sub {
		margin-inline: auto;
	}

	.ffct-eyebrow {
		justify-content: center;
	}

	.ffct-veil {
		background:
			linear-gradient(180deg, rgba(12, 7, 4, 0.82) 0%, rgba(12, 7, 4, 0.6) 40%, rgba(12, 7, 4, 0.3) 70%, rgba(12, 7, 4, 0.55) 100%);
	}

	.ffct-cards {
		padding: 26px 0 18px;
	}
}

@media (max-width: 560px) {
	.ffct-banner {
		--ffct-radius: 12px;
	}

	.ffct-banner .ffct-title {
		font-size: clamp(1.9rem, 10vw, 2.8rem);
		font-size: clamp(1.9rem, 10cqi, 2.8rem);
	}
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ffct-bg__img,
	.ffct-card,
	.ffct-card__foil,
	.ffct-print {
		animation: none !important;
	}

	.ffct-print {
		opacity: 0.85;
	}

	.ffct-card__inner,
	.ffct-btn {
		transition: none;
	}
}