/* enhance.css — small additive polish for the arena export.
 *
 * Loaded AFTER the vendor's style-0/style-1, and it only ever ADDS rules. Delete
 * this file and its <link> and the page is byte-for-byte the vendor export again.
 *
 * DEFINES NO @keyframes, deliberately. The export already ships six —
 * arena-breathe, arena-shimmer, arena-spin-slow, arena-podium-shine,
 * arena-row-in, arena-pulse-dot — and because this sheet loads last, any name
 * reused here would silently REPLACE the vendor's. (A first draft of this file
 * defined its own `arena-breathe`, which would have killed the hero's gold glow
 * with no error anywhere.) Everything below either reuses a vendor keyframe by
 * name or animates with a plain transition.
 *
 * Scope: the page is already well animated. These are only the interactions the
 * export LOST, plus one accessibility gap — not new decoration layered on top.
 *
 * !important is load-bearing here. The export is a React/Framer-Motion page with
 * its bundle stripped, and Motion had written each animated element's INITIAL
 * state into an inline style attribute. `style="opacity:0"` is still in the
 * markup with nothing left to animate it, and inline styles outrank stylesheets.
 */

/* --- 1. The CTA hover the export lost --------------------------------------
 * The button ships an arrow at `inset-e-2` (the end edge — left, this is RTL)
 * frozen at opacity:0 / translateX(-8px), and a label at transform:none. That is
 * Motion's initial state for a slide-in-on-hover whose driver is gone, so the
 * arrow is currently invisible on every visit. This hands it back.
 * :focus-within so keyboard users get the same reveal.
 */
.group > a > span:first-child {
	transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.group:hover > a > span:first-child,
.group:focus-within > a > span:first-child {
	transform: translateX(4px) !important;
}

.group > a > span.inset-e-2 {
	transition: opacity 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
	            transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.group:hover > a > span.inset-e-2,
.group:focus-within > a > span.inset-e-2 {
	opacity: 1 !important;
	transform: translateX(0) !important;
}

/* One pixel of lift, in the button's own accent. Felt rather than seen. */
.group:has(> a[href*="clientx.wingomarkets.com"]) {
	transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
	            box-shadow 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.group:has(> a[href*="clientx.wingomarkets.com"]):hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px -8px rgba(0, 185, 145, 0.55);
}

/* --- 2. Keyboard focus -----------------------------------------------------
 * Not decoration. The export has no visible focus style on either CTA, so
 * tabbing through the page is completely invisible. :focus-visible keeps this
 * off for mouse users, who never see an outline they didn't ask for.
 */
a:focus-visible {
	outline: 2px solid var(--arena-gold, #e9c15c);
	outline-offset: 3px;
	border-radius: 6px;
}

/* --- 3. Wire up the one keyframe the vendor defined and never used ---------
 * @keyframes arena-pulse-dot is in style-1.css with zero references in the
 * markup. The obvious intended target is .trading-hero-label-dot — the 10px
 * accent dot beside the hero's "مسابقه معاملاتی" label, currently static. A slow
 * pulse there reads as "this competition is live", which it is until 30 Sep.
 * 3s rather than the snappier rate the name suggests, to stay in the background.
 * transform-only, so it cannot shift the flex row it sits in.
 */
.trading-hero-label-dot {
	animation: arena-pulse-dot 3s ease-in-out infinite;
}

/* --- 4. Row hover parity ---------------------------------------------------
 * The desktop table rows already carry hover:bg-white/[0.03]; the narrow-screen
 * card variants of the same list carry nothing. This matches them, and only
 * where hover is a real input — never on touch, where :hover sticks after a tap.
 * brightness() rather than a background, because ranks 1-3 have gold/silver/
 * bronze tints that a flat background colour would erase.
 */
@media (hover: hover) {
	[data-x-rank][class*="rounded-[10px]"],
	[data-x-rank][class*="rounded-[12px]"] {
		transition: filter 160ms ease-out;
	}

	[data-x-rank][class*="rounded-[10px]"]:hover,
	[data-x-rank][class*="rounded-[12px]"]:hover {
		filter: brightness(1.07);
	}
}

/* --- 5. Opt out ------------------------------------------------------------
 * The vendor's own animated elements each carry motion-reduce:animate-none, and
 * arena.js checks the same query before starting Lenis. Matching that contract.
 */
@media (prefers-reduced-motion: reduce) {
	.group > a > span:first-child,
	.group > a > span.inset-e-2,
	.group:has(> a[href*="clientx.wingomarkets.com"]),
	[data-x-rank][class*="rounded-[10px]"],
	[data-x-rank][class*="rounded-[12px]"] {
		transition: none;
	}

	.trading-hero-label-dot {
		animation: none;
	}

	.group:has(> a[href*="clientx.wingomarkets.com"]):hover {
		transform: none;
	}
}