/* Motion and depth layer. Loads after app-theme.css and uses only its palette
   tokens; see assets/js/premium-fx.js for the behaviour side. */

:root {
	--fx-ease: cubic-bezier(.16, 1, .3, 1);
	--fx-tint: rgba(11, 185, 171, .16); /* --app-glass-from, translucent */
}

html { scroll-behavior: smooth; }

/* ---------- Page chrome ---------- */

.fx-progress {
	position: fixed; top: 0; left: 0; right: 0; z-index: 10001;
	height: 3px; transform: scaleX(0); transform-origin: 0 50%;
	background: linear-gradient(90deg, var(--app-glass-from), var(--app-glass-to) 60%, var(--app-orange));
	pointer-events: none;
}

/* Film grain: breaks up the flat white without changing any colour. */
.fx-grain {
	position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: .035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.main-header.header-scrolled {
	background: rgba(151, 243, 255, .78);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	backdrop-filter: blur(16px) saturate(1.4);
}

/* ---------- Hero ---------- */

.hero-wrapper { isolation: isolate; }

.fx-aurora { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.fx-aurora span {
	position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55;
	animation: fx-drift 18s ease-in-out infinite alternate;
	animation-play-state: paused;
}
.fx-aurora.fx-on span { animation-play-state: running; }
.fx-aurora span:nth-child(1) { width: 46vw; height: 46vw; right: -8vw; top: -12vw; background: var(--app-chrome); }
.fx-aurora span:nth-child(2) { width: 32vw; height: 32vw; right: 18vw; bottom: -14vw; background: var(--app-glass-to); opacity: .28; animation-duration: 22s; animation-delay: -6s; }
.fx-aurora span:nth-child(3) { width: 20vw; height: 20vw; left: 30vw; top: 10%; background: var(--app-orange); opacity: .12; animation-duration: 26s; animation-delay: -11s; }
@keyframes fx-drift {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to { transform: translate3d(-6vw, 4vw, 0) scale(1.15); }
}

#hero3d {
	position: absolute; inset: 0; z-index: 1;
	width: 100%; height: 100%; pointer-events: none;
	opacity: 0; transition: opacity 1.4s var(--fx-ease);
}
#hero3d.is-ready { opacity: 1; }

/* Keep the copy in the left column so the 3D scene owns the right. */
@media (min-width: 1024px) {
	.hero-wrapper:has(#hero3d[data-layout="right"]) .hero-content > div > div:first-child { max-width: 700px; }
	.hero-wrapper:has(#hero3d[data-layout="right"]) .hero-content h1 { font-size: clamp(2.8rem, 4.6vw, 4.5rem); }
}
/* Narrow screens: the balls get their own strip under the copy. */
@media (max-width: 1023px) {
	.hero-wrapper:has(#hero3d) { padding-bottom: 300px; }
	#hero3d { top: auto; bottom: 0; height: 320px; }
}

/* "Undiscovered" gets its underline drawn in, then a slow light sweep. */
.hero-content h1 .hero-highlight {
	background: linear-gradient(100deg, var(--color-primary) 40%, var(--app-glass-from) 50%, var(--color-primary) 60%) 0 0 / 300% 100%;
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: fx-sheen 7s 1.6s ease-in-out infinite;
}
.hero-content h1 .hero-highlight::after {
	transform-origin: 0 50%;
	animation: fx-draw 1.1s .5s var(--fx-ease) both;
}
@media (forced-colors: active) {
	.hero-content h1 .hero-highlight { -webkit-text-fill-color: currentColor; background: none; }
}
@keyframes fx-sheen { 0%, 60% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes fx-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Section-title underlines draw in as their block reveals. */
.reveal-on-scroll .hero-highlight::after,
.reveal-on-scroll.hero-highlight::after {
	transform-origin: 0 50%;
	transition: transform 1s .35s var(--fx-ease);
}
.reveal-on-scroll:not(.is-visible) .hero-highlight::after { transform: scaleX(0); }

/* ---------- Sports ticker ---------- */

.fx-marquee {
	position: relative; z-index: 2; overflow: hidden;
	background: var(--color-bg-dark);
	border-block: 1px solid var(--app-border);
	padding: 18px 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.fx-marquee-track {
	display: flex; width: max-content; gap: 40px; align-items: center;
	animation: fx-marquee 38s linear infinite;
	animation-play-state: paused;
}
.fx-marquee.fx-on .fx-marquee-track { animation-play-state: running; }
.fx-marquee.fx-on:hover .fx-marquee-track { animation-play-state: paused; }
.fx-marquee-track span {
	font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 2.2rem);
	letter-spacing: -.02em; white-space: nowrap; color: var(--color-primary);
}
.fx-marquee-track span:nth-child(4n) {
	color: transparent; -webkit-text-stroke: 1.5px var(--color-primary);
}
.fx-marquee-track i { color: var(--app-orange); font-size: clamp(1.2rem, 2.2vw, 1.8rem); margin-right: -24px; }
@keyframes fx-marquee { to { transform: translateX(-50%); } }

/* ---------- 3D reveals ---------- */

/* Hidden state only: blocks rise and tip forward into place. The visible
   state, and its transition, stay as main.css defines them. Only card-sized
   blocks tilt (premium-fx.js tags them .fx-tilt-in): tipping a tall block,
   such as a whole blog article, swings its top far down the page, so the
   reveal observer never sees it and the page reads as blank. */
.reveal-on-scroll.fx-tilt-in:not(.is-visible) {
	transform: perspective(1000px) translateY(48px) rotateX(14deg);
	transform-origin: 50% 100%;
}

/* ---------- Card depth ---------- */

.grid, .champions-grid, .feature-grid, .prize-grid, .card-grid, .stats-grid,
.loop-diagram, .olympic-stats, .olympic-path, .wc-banner-cards {
	perspective: 1400px;
}
.fx-tilt { position: relative; transform-style: preserve-3d; }
.fx-tilt.fx-lit { will-change: rotate; }
.fx-glare {
	position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
	opacity: 0; transition: opacity .4s ease;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--fx-tint), transparent 45%);
}
.fx-lit .fx-glare { opacity: 1; }
.fx-lit {
	box-shadow: 0 24px 48px -18px rgba(1, 83, 145, .28), 0 0 0 1px var(--app-glass-from);
}

/* Leftover from the old dark theme: hovered event cards turned dark navy
   (rgba(16,32,59,.6)) under dark text. Keep them on the light surface. */
.event-card:hover { background: var(--color-surface); box-shadow: 0 24px 48px -18px rgba(1, 83, 145, .28); }

/* Light sweep across filled buttons. */
.btn-primary, .store-badge:not(.store-badge-apple), .wc-banner-cta {
	background-image: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .26) 50%, transparent 65%);
	background-size: 250% 100%;
	background-position: 130% 0;
	background-repeat: no-repeat;
}
.btn-primary:hover, .store-badge:not(.store-badge-apple):hover, .wc-banner-cta:hover {
	background-position: -30% 0;
	transition: background-position .8s var(--fx-ease), background-color .3s ease, box-shadow .3s ease, color .3s ease, transform .3s ease;
}

.stat-number, .olympic-stat-number, .wc-bn-score { font-variant-numeric: tabular-nums; }

/* Events band: the theme made its text dark ink, but the video behind it was
   still filtered to 30% brightness, so the heading was dark-on-dark. A light
   wash keeps the chess footage visible and the copy readable. */
.events-section { background: var(--color-bg-darker); }
.events-section .events-video-bg { filter: grayscale(.3) blur(2px); opacity: .28; }

/* Parallax layers are oversized so their edges never show. */
.fx-parallax { scale: 1.15; will-change: translate; }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.fx-aurora span, .fx-marquee-track,
	.hero-content h1 .hero-highlight, .hero-content h1 .hero-highlight::after { animation: none; }
	.reveal-on-scroll.fx-tilt-in:not(.is-visible) { transform: none; }
	.reveal-on-scroll:not(.is-visible) .hero-highlight::after { transform: none; }
	.fx-parallax { scale: none; }
	#hero3d { transition: none; }
}

/* =================================================================
   Sports vignettes. Each one only animates while on screen
   (premium-fx.js toggles .fx-on) and holds a still frame otherwise.
   ================================================================= */

.fx-stage {
	position: relative; width: 320px; height: 150px;
	/* Centred even when the column is narrower than the stage. */
	margin: 0 calc((100% - 320px) / 2) 1.5rem; pointer-events: none;
}

/* ---------- Rolling-ball dividers (scroll-driven) ---------- */

.fx-roll {
	position: relative; z-index: 3; height: 56px;
	width: min(var(--container-width, 1200px), 90%); margin: -50px auto -6px;
	pointer-events: none;
}
.fx-roll::before {
	content: ''; position: absolute; left: 0; right: 0; bottom: 6px;
	border-bottom: 2px dashed var(--app-glass-from); opacity: .5;
}
.fx-roll-ball { position: absolute; left: 0; bottom: 8px; width: 40px; height: 40px; will-change: transform; }
.fx-roll-ball i { display: block; font-size: 40px; line-height: 40px; will-change: transform; }
.fx-roll-ball::after {
	content: ''; position: absolute; left: 6px; right: 6px; bottom: -5px; height: 6px;
	border-radius: 50%; background: rgba(1, 83, 145, .18); filter: blur(2px);
}
.fx-roll-football i { color: var(--color-primary); }
.fx-roll-basketball i { color: var(--app-orange); }
.fx-roll-volleyball i { color: var(--app-glass-from); }

/* ---------- Basketball: jump shot into the hoop ---------- */

.fx-hoop-svg { position: absolute; right: 0; top: 0; width: 120px; height: 110px; overflow: visible; }
.fx-board { fill: #FFFFFF; stroke: var(--color-primary); stroke-width: 3; }
.fx-board-box { fill: none; stroke: var(--app-orange); stroke-width: 2.5; }
.fx-rim { fill: none; stroke: var(--app-orange); stroke-width: 4; }
.fx-net path { fill: none; stroke: var(--app-glass-from); stroke-width: 1.8; stroke-linecap: round; }
.fx-net { transform-box: fill-box; transform-origin: 50% 0; }
.fx-shot { position: absolute; left: 0; bottom: 0; width: 38px; height: 38px; }
.fx-shot i { display: block; font-size: 38px; line-height: 38px; color: var(--app-orange); }
.fx-on .fx-shot { animation: fx-shot-x 3.6s linear infinite, fx-shot-y 3.6s infinite; }
.fx-on .fx-shot i { animation: fx-spin 1.2s linear infinite; }
.fx-on .fx-net { animation: fx-swish 3.6s infinite; }
@keyframes fx-shot-x {
	0% { translate: 0 0; opacity: 1; }
	52%, 70% { translate: 243px 0; opacity: 1; }
	78%, 100% { translate: 243px 0; opacity: 0; }
}
@keyframes fx-shot-y {
	0% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
	28% { transform: translateY(-165px); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
	52% { transform: translateY(-78px); animation-timing-function: ease-in; }
	72%, 100% { transform: translateY(-20px); }
}
@keyframes fx-swish {
	0%, 52% { transform: scaleY(1); }
	58% { transform: scaleY(1.25) scaleX(.85); }
	66% { transform: scaleY(.95); }
	72%, 100% { transform: scaleY(1); }
}
@keyframes fx-spin { to { rotate: 360deg; } }

/* ---------- Table tennis: endless rally ---------- */

.fx-tt { height: 130px; }
.fx-table {
	position: absolute; left: 40px; right: 40px; bottom: 26px; height: 8px;
	border-radius: 3px; background: var(--color-primary);
}
.fx-table::before, .fx-table::after {
	content: ''; position: absolute; top: 8px; width: 5px; height: 22px; background: var(--color-primary); opacity: .55;
}
.fx-table::before { left: 18px; }
.fx-table::after { right: 18px; }
.fx-tt-net {
	position: absolute; left: 50%; bottom: 8px; width: 4px; height: 18px; margin-left: -2px;
	background: repeating-linear-gradient(0deg, var(--app-glass-from) 0 2px, transparent 2px 4px);
	border-top: 2px solid var(--app-glass-from);
}
.fx-paddle {
	position: absolute; bottom: 44px; width: 34px; height: 38px; border-radius: 50% 50% 46% 46%;
	transform-origin: 50% 110%;
}
.fx-paddle::after {
	content: ''; position: absolute; left: 50%; top: 32px; width: 8px; height: 18px; margin-left: -4px;
	border-radius: 3px; background: var(--color-text-main);
}
.fx-paddle-l { left: 0; background: var(--color-primary); }
.fx-paddle-r { right: 0; background: var(--app-glass-from); }
.fx-tt-x { position: absolute; left: 36px; bottom: 34px; width: 12px; height: 12px; }
.fx-tt-ball { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--app-orange); box-shadow: 0 2px 4px rgba(1, 83, 145, .25); }
.fx-on .fx-tt-x { animation: fx-tt-x 2.4s linear infinite; }
.fx-on .fx-tt-ball { animation: fx-tt-y 2.4s infinite; }
.fx-on .fx-paddle-l { animation: fx-swing-l 2.4s infinite; }
.fx-on .fx-paddle-r { animation: fx-swing-r 2.4s infinite; }
@keyframes fx-tt-x { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(236px); } }
@keyframes fx-tt-y {
	0% { transform: translateY(-30px); animation-timing-function: ease-out; }
	20% { transform: translateY(-62px); animation-timing-function: ease-in; }
	36% { transform: translateY(0); animation-timing-function: ease-out; }
	50% { transform: translateY(-30px); animation-timing-function: ease-out; }
	70% { transform: translateY(-62px); animation-timing-function: ease-in; }
	86% { transform: translateY(0); animation-timing-function: ease-out; }
	100% { transform: translateY(-30px); }
}
@keyframes fx-swing-l { 0%, 100% { rotate: 22deg; } 8% { rotate: -14deg; } 22%, 92% { rotate: 0deg; } }
@keyframes fx-swing-r { 0%, 42%, 72%, 100% { rotate: 0deg; } 50% { rotate: -22deg; } 58% { rotate: 14deg; } }

/* ---------- Athletics: runner on the journey track (scroll-driven) ---------- */

.fx-track {
	position: absolute; z-index: 0; pointer-events: none;
	top: calc(2.5rem + 28px - 11px); left: 28px; right: 28px; height: 25px;
	border-radius: 4px;
	background: repeating-linear-gradient(180deg, rgba(255, 107, 53, .3) 0 7px, #FFFFFF 7px 8px);
	--p: 0;
}
.fx-track::after {
	content: ''; position: absolute; left: 0; top: 11px; height: 3px;
	width: calc(var(--p) * 100%);
	background: linear-gradient(90deg, var(--app-glass-from), var(--color-primary));
	border-radius: 2px;
}
.fx-runner {
	position: absolute; z-index: 2; top: -34px; left: calc(var(--p) * 100%);
	transform: translateX(-50%);
	font-size: 28px; color: var(--color-primary);
}
.fx-runner i { display: block; animation: fx-stride .45s ease-in-out infinite alternate; animation-play-state: paused; }
.fx-track.fx-on .fx-runner i { animation-play-state: running; }
@keyframes fx-stride { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-4px) rotate(4deg); } }
.journey-step .step-icon { transition: background-color .35s ease, color .35s ease, transform .35s var(--fx-ease), box-shadow .35s ease; }
.journey-step.fx-passed .step-icon {
	background: var(--color-primary); color: #FFFFFF; transform: scale(1.08);
	box-shadow: 0 0 0 6px rgba(11, 185, 171, .18);
}
@media (max-width: 768px) {
	.fx-track {
		top: 28px; bottom: 28px; left: 17px; right: auto; width: 25px; height: auto;
		background: repeating-linear-gradient(90deg, rgba(255, 107, 53, .3) 0 7px, #FFFFFF 7px 8px);
	}
	.fx-track::after { left: 11px; top: 0; width: 3px; height: calc(var(--p) * 100%); }
	.fx-runner { top: calc(var(--p) * 100%); left: 34px; transform: translateY(-50%); font-size: 22px; }
}

/* ---------- Cricket: bowled, bails fly ---------- */

.fx-stumps { height: 130px; }
.fx-crease { position: absolute; left: 0; right: 0; bottom: 18px; height: 2px; background: var(--app-border); }
.fx-crease::after {
	content: ''; position: absolute; right: 54px; bottom: -14px; width: 3px; height: 30px; background: var(--app-glass-from);
}
.fx-wicket { position: absolute; right: 70px; bottom: 18px; width: 40px; height: 76px; }
.fx-stump {
	position: absolute; bottom: 0; width: 6px; height: 72px; border-radius: 3px 3px 0 0;
	background: #FFFFFF; border: 1.5px solid var(--color-primary); transform-origin: 50% 100%;
}
.fx-stump:nth-child(1) { left: 2px; }
.fx-stump:nth-child(2) { left: 17px; }
.fx-stump:nth-child(3) { left: 32px; }
.fx-bail {
	position: absolute; top: -2px; width: 17px; height: 5px; border-radius: 3px;
	background: var(--app-orange); box-shadow: 0 0 0 rgba(255, 107, 53, 0);
}
.fx-bail-1 { left: 2px; }
.fx-bail-2 { left: 20px; }
.fx-cx { position: absolute; left: 0; bottom: 18px; width: 16px; height: 16px; }
.fx-cball {
	display: block; width: 16px; height: 16px; border-radius: 50%;
	border: 1.5px solid var(--color-primary);
	box-shadow: inset 0 -2px 0 rgba(1, 83, 145, .12);
	background: linear-gradient(90deg, transparent 45%, var(--color-primary) 45% 55%, transparent 55%) #FFFFFF;
}
.fx-out {
	position: absolute; right: 0; top: 0; font-family: var(--font-heading); font-weight: 900;
	font-size: 1.4rem; color: var(--app-orange); letter-spacing: -.02em; opacity: 0;
}
.fx-on .fx-cx { animation: fx-bowl-x 4s linear infinite, fx-bowl-y 4s infinite; }
.fx-on .fx-cball { animation: fx-spin .5s linear infinite; }
.fx-on .fx-stump:nth-child(2) { animation: fx-stump-mid 4s infinite; }
.fx-on .fx-stump:nth-child(3) { animation: fx-stump-off 4s infinite; }
.fx-on .fx-bail-1 { animation: fx-bail-1 4s infinite; }
.fx-on .fx-bail-2 { animation: fx-bail-2 4s infinite; }
.fx-on .fx-out { animation: fx-out 4s infinite; }
@keyframes fx-bowl-x {
	0% { translate: 0 0; opacity: 1; }
	38% { translate: 234px 0; }
	50% { translate: 244px 0; opacity: 1; }
	60%, 100% { translate: 244px 0; opacity: 0; }
}
@keyframes fx-bowl-y {
	0% { transform: translateY(-70px); animation-timing-function: ease-in; }
	20% { transform: translateY(0); animation-timing-function: ease-out; }
	38% { transform: translateY(-26px); animation-timing-function: ease-in; }
	50%, 100% { transform: translateY(0); }
}
@keyframes fx-stump-mid { 0%, 38% { rotate: 0deg; } 46%, 86% { rotate: 16deg; } 94%, 100% { rotate: 0deg; } }
@keyframes fx-stump-off { 0%, 39% { rotate: 0deg; } 48%, 86% { rotate: 9deg; } 94%, 100% { rotate: 0deg; } }
@keyframes fx-bail-1 {
	0%, 38% { transform: none; opacity: 1; box-shadow: 0 0 0 rgba(255, 107, 53, 0); }
	40% { box-shadow: 0 0 14px 4px rgba(255, 107, 53, .7); }
	60% { transform: translate(-26px, -58px) rotate(-220deg); opacity: 1; }
	80% { transform: translate(-40px, 10px) rotate(-320deg); opacity: 0; }
	92% { transform: none; opacity: 0; }
	100% { transform: none; opacity: 1; }
}
@keyframes fx-bail-2 {
	0%, 38% { transform: none; opacity: 1; box-shadow: 0 0 0 rgba(255, 107, 53, 0); }
	40% { box-shadow: 0 0 14px 4px rgba(255, 107, 53, .7); }
	60% { transform: translate(30px, -66px) rotate(260deg); opacity: 1; }
	80% { transform: translate(48px, 8px) rotate(380deg); opacity: 0; }
	92% { transform: none; opacity: 0; }
	100% { transform: none; opacity: 1; }
}
@keyframes fx-out {
	0%, 40% { opacity: 0; transform: scale(.4); }
	48% { opacity: 1; transform: scale(1.15); }
	54%, 84% { opacity: 1; transform: scale(1); }
	92%, 100% { opacity: 0; transform: scale(1); }
}

/* ---------- Olympic podium (plays once when it scrolls in) ---------- */

.fx-podium {
	display: flex; align-items: flex-end; justify-content: center; gap: 10px;
	height: 190px; margin: 0 auto 2.5rem; pointer-events: none;
}
.fx-step {
	position: relative; width: 92px; border-radius: 10px 10px 0 0;
	display: flex; justify-content: center; align-items: flex-start; padding-top: 12px;
	transform-origin: 50% 100%; transform: scaleY(0);
}
.fx-step span { font-family: var(--font-heading); font-weight: 900; font-size: 2rem; line-height: 1; color: #FFFFFF; }
.fx-step i {
	position: absolute; bottom: 100%; left: 50%; width: 30px; margin: 0 0 8px -15px; text-align: center;
	font-size: 30px; transform-origin: 50% 0; opacity: 0;
}
.fx-step-1 { height: 120px; background: linear-gradient(180deg, var(--color-primary), #01448C); --d: .3s; }
.fx-step-2 { height: 86px; background: linear-gradient(180deg, var(--app-glass-from), var(--app-glass-to)); --d: .15s; }
.fx-step-3 { height: 62px; background: linear-gradient(180deg, var(--app-chrome), var(--app-glass-to)); --d: 0s; }
.fx-step-3 span { color: var(--color-primary); }
.fx-step-1 i { color: var(--app-orange); }
.fx-step-2 i { color: var(--app-glass-from); }
.fx-step-3 i { color: var(--color-primary); }
.fx-on .fx-step { animation: fx-rise .9s var(--fx-ease) var(--d) both; }
.fx-on .fx-step i { animation: fx-medal 1.1s calc(.7s + var(--d)) both; }
@keyframes fx-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes fx-medal {
	0% { opacity: 0; transform: translateY(-60px) rotate(0); }
	40% { opacity: 1; transform: translateY(0) rotate(14deg); }
	60% { opacity: 1; transform: rotate(-9deg); }
	80% { opacity: 1; transform: rotate(4deg); }
	100% { opacity: 1; transform: rotate(0); }
}

/* ---------- Badminton: shuttle rally over the net ---------- */

.fx-badminton { height: 130px; }
.fx-bnet {
	position: absolute; left: 50%; bottom: 0; width: 8px; height: 62px; margin-left: -4px;
	background: repeating-linear-gradient(0deg, var(--app-glass-from) 0 1.5px, transparent 1.5px 6px),
		repeating-linear-gradient(90deg, var(--app-glass-from) 0 1.5px, transparent 1.5px 4px);
	border-top: 3px solid var(--color-primary);
}
.fx-bnet::after {
	content: ''; position: absolute; left: -1200%; right: -1200%; bottom: -2px; height: 2px; background: var(--app-border);
}
.fx-sh-x { position: absolute; left: 10px; bottom: 30px; width: 40px; height: 24px; }
.fx-sh-y { display: block; }
.fx-shuttle { display: block; width: 40px; height: 24px; overflow: visible; }
.fx-feathers { fill: #FFFFFF; stroke: var(--color-primary); stroke-width: 1.4; stroke-linejoin: round; }
.fx-feather-lines { fill: none; stroke: var(--app-glass-from); stroke-width: .9; }
.fx-band { fill: var(--app-orange); }
.fx-cork { fill: var(--color-primary); }
.fx-on .fx-sh-x { animation: fx-sh-x 3s linear infinite; }
.fx-on .fx-sh-y { animation: fx-sh-y 3s infinite; }
.fx-on .fx-shuttle { animation: fx-sh-turn 3s infinite; }
@keyframes fx-sh-x { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(250px); } }
@keyframes fx-sh-y {
	0% { transform: translateY(0); animation-timing-function: ease-out; }
	25% { transform: translateY(-78px); animation-timing-function: ease-in; }
	50% { transform: translateY(0); animation-timing-function: ease-out; }
	75% { transform: translateY(-78px); animation-timing-function: ease-in; }
	100% { transform: translateY(0); }
}
@keyframes fx-sh-turn {
	0% { transform: scaleX(1) rotate(-35deg); }
	49.9% { transform: scaleX(1) rotate(35deg); }
	50% { transform: scaleX(-1) rotate(-35deg); }
	99.9% { transform: scaleX(-1) rotate(35deg); }
	100% { transform: scaleX(1) rotate(-35deg); }
}

/* ---------- Football: shot into the net ---------- */

.fx-goal { height: 140px; }
.fx-goal-svg { position: absolute; right: 0; bottom: 0; width: 180px; height: 112px; overflow: visible; }
.fx-net-line { fill: none; stroke: var(--app-glass-from); stroke-width: .8; opacity: .8; }
.fx-goal-net { transform-box: fill-box; transform-origin: 50% 50%; }
.fx-goal-frame { fill: none; stroke: var(--color-primary); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.fx-kick-x { position: absolute; left: 0; bottom: 0; width: 32px; height: 32px; }
.fx-kick-y { display: block; }
.fx-kick-y i { display: block; font-size: 32px; line-height: 32px; color: var(--color-primary); }
.fx-goal-text {
	position: absolute; left: 0; top: 0; font-family: var(--font-heading); font-weight: 900;
	font-size: 2rem; letter-spacing: -.03em; color: var(--app-orange); opacity: 0; transform-origin: 0 100%;
}
.fx-on .fx-kick-x { animation: fx-kick-x 4.2s linear infinite; }
.fx-on .fx-kick-y { animation: fx-kick-y 4.2s infinite; }
.fx-on .fx-kick-y i { animation: fx-spin .6s linear infinite; }
.fx-on .fx-goal-net { animation: fx-bulge 4.2s infinite; }
.fx-on .fx-goal-text { animation: fx-goal-pop 4.2s infinite; }
@keyframes fx-kick-x {
	0% { transform: translateX(0) scale(1); opacity: 1; }
	40% { transform: translateX(212px) scale(.8); opacity: 1; }
	48% { transform: translateX(222px) scale(.72); opacity: 1; }
	58%, 100% { transform: translateX(222px) scale(.72); opacity: 0; }
}
@keyframes fx-kick-y {
	0% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
	22% { transform: translateY(-92px); animation-timing-function: ease-in; }
	40% { transform: translateY(-48px); }
	48%, 100% { transform: translateY(-40px); }
}
@keyframes fx-bulge {
	0%, 40% { transform: scale(1); }
	46% { transform: scale(1.08, 1.05); }
	54% { transform: scale(.98); }
	62%, 100% { transform: scale(1); }
}
@keyframes fx-goal-pop {
	0%, 42% { opacity: 0; transform: scale(.4) rotate(-8deg); }
	50% { opacity: 1; transform: scale(1.15) rotate(-4deg); }
	56%, 86% { opacity: 1; transform: scale(1) rotate(-4deg); }
	94%, 100% { opacity: 0; transform: scale(1) rotate(-4deg); }
}

/* Tiny phones: scale the whole stage, motion included (CSS zoom would shrink
   the drawing but not the animations' pixel distances). */
@media (max-width: 380px) {
	.fx-stage { transform: scale(.85); transform-origin: 50% 100%; margin-top: -22px; }
}

/* ---------- Athletics: runner clearing hurdles ---------- */

.fx-hurdles { height: 120px; }
.fx-lane { position: absolute; left: 0; right: 0; bottom: 14px; height: 4px; border-radius: 2px; background: rgba(255, 107, 53, .35); }
.fx-hurdle {
	position: absolute; bottom: 18px; width: 24px; height: 34px;
	border: 3px solid var(--color-primary); border-bottom: 0; border-top: 6px solid var(--app-orange);
	border-radius: 2px 2px 0 0;
}
.fx-hr-x { position: absolute; left: 0; bottom: 18px; width: 30px; height: 30px; opacity: 0; }
.fx-hr-x i { display: block; font-size: 30px; line-height: 30px; color: var(--color-primary); }
/* x travel on `translate`, jumps on `transform`: they compose cleanly. */
.fx-on .fx-hr-x { animation: fx-hr-x 3.2s linear infinite, fx-hr-y 3.2s infinite; }
.fx-on .fx-hr-x i { animation: fx-stride .2s ease-in-out infinite alternate; }
@keyframes fx-hr-x {
	0% { translate: 0 0; opacity: 0; }
	4% { opacity: 1; }
	92% { translate: 290px 0; opacity: 1; }
	100% { translate: 290px 0; opacity: 0; }
}
@keyframes fx-hr-y {
	0%, 14% { transform: translateY(0) rotate(0); animation-timing-function: ease-out; }
	21% { transform: translateY(-46px) rotate(-8deg); animation-timing-function: ease-in; }
	28%, 44% { transform: translateY(0) rotate(0); animation-timing-function: ease-out; }
	51% { transform: translateY(-46px) rotate(-8deg); animation-timing-function: ease-in; }
	58%, 74% { transform: translateY(0) rotate(0); animation-timing-function: ease-out; }
	81% { transform: translateY(-46px) rotate(-8deg); animation-timing-function: ease-in; }
	88%, 100% { transform: translateY(0) rotate(0); }
}

/* ---------- Chess: knight touring a mini board ---------- */

.fx-chessboard {
	position: absolute; left: 96px; top: 12px; width: 128px; height: 128px; border-radius: 6px;
	background: repeating-conic-gradient(var(--color-primary) 0 25%, var(--color-bg-darker) 0 50%) 0 0 / 64px 64px;
	box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 5px var(--app-border), 0 14px 28px -12px rgba(1, 83, 145, .35);
}
.fx-knight {
	position: absolute; left: 96px; top: 12px; width: 32px; height: 32px;
	display: flex; align-items: center; justify-content: center;
	translate: 0 96px;
}
.fx-knight i {
	font-size: 24px; color: var(--app-orange);
	filter: drop-shadow(0 0 1.5px #FFFFFF) drop-shadow(0 0 1.5px #FFFFFF);
}
.fx-on .fx-knight { animation: fx-knight 4.8s infinite; }
.fx-on .fx-knight i { animation: fx-knight-hop 4.8s infinite; }
/* L-shaped moves: (0,3) → (1,1) → (3,0) → (2,2) → back to (0,3). */
@keyframes fx-knight {
	0%, 12% { translate: 0 96px; animation-timing-function: cubic-bezier(.5, 0, .3, 1); }
	25%, 37% { translate: 32px 32px; animation-timing-function: cubic-bezier(.5, 0, .3, 1); }
	50%, 62% { translate: 96px 0; animation-timing-function: cubic-bezier(.5, 0, .3, 1); }
	75%, 87% { translate: 64px 64px; animation-timing-function: cubic-bezier(.5, 0, .3, 1); }
	100% { translate: 0 96px; }
}
@keyframes fx-knight-hop {
	0%, 12%, 25%, 37%, 50%, 62%, 75%, 87%, 100% { transform: translateY(0) scale(1); }
	18%, 43%, 68%, 93% { transform: translateY(-14px) scale(1.35); }
}

/* ---------- Card icons dribble when their card is hovered ---------- */

@media (hover: hover) and (pointer: fine) {
	.fx-tilt:hover :is(.event-card-icon i, .step-icon i, .benefit-icon i),
	.fx-tilt:hover > i.fas,
	.fx-tilt:hover > i.feature-icon,
	.prize-card.fx-tilt:hover > i,
	.loop-step.fx-tilt:hover > i {
		animation: fx-dribble .75s cubic-bezier(.3, 0, .3, 1);
	}
}
@keyframes fx-dribble {
	0% { transform: translateY(0) scale(1); }
	30% { transform: translateY(-12px) scale(1.05); }
	55% { transform: translateY(0) scale(1.12, .86); }
	75% { transform: translateY(-5px) scale(1); }
	90% { transform: translateY(0) scale(1.04, .96); }
	100% { transform: translateY(0) scale(1); }
}

/* ---------- "Live Score" button: on-air pulse ---------- */

.live-score-btn { animation: fx-live 2.4s ease-out infinite; }
.live-score-btn:hover { animation: none; }
@keyframes fx-live {
	0% { box-shadow: 0 4px 15px rgba(1, 83, 145, .3), 0 0 0 0 rgba(255, 107, 53, .55); }
	70% { box-shadow: 0 4px 15px rgba(1, 83, 145, .3), 0 0 0 9px rgba(255, 107, 53, 0); }
	100% { box-shadow: 0 4px 15px rgba(1, 83, 145, .3), 0 0 0 0 rgba(255, 107, 53, 0); }
}

/* ---------- Confetti (spawned by premium-fx.js over champion badges) ---------- */

.fx-confetti {
	position: absolute; z-index: 50; width: 8px; height: 12px; border-radius: 2px;
	pointer-events: none; will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
	.live-score-btn { animation: none; }
	.fx-knight { translate: 0 96px; }
}

@media (prefers-reduced-motion: reduce) {
	.fx-on *, .fx-runner i { animation: none !important; }
	.fx-step { transform: none; }
	.fx-step i { opacity: 1; }
}

/* Homepage "Latest Insights": three posts on phones, six on wider screens. */
@media (max-width: 768px) {
	.fx-desktop-only { display: none; }
}

/* Keyboard "Skip to content": hidden until focused, then above the header. */
.skip-link {
	position: fixed; top: 12px; left: 12px; z-index: 10002;
	padding: 10px 16px; border-radius: 12px;
	background: var(--color-primary); color: #FFFFFF; font-weight: 700; text-decoration: none;
	transform: translateY(-160%); transition: transform .2s ease;
}
.skip-link:focus { transform: none; }
#main-content { scroll-margin-top: var(--header-height, 80px); outline: none; }