/*
Theme Name: Athar Sports
Theme URI: https://atharsafetywear.com
Author: Athar Sports
Description: Bespoke WordPress Elementor theme for Athar Safety Wear & Sportswear — contract manufacturer of sportswear, casual wear and certified PPE in Sialkot, Pakistan.
Version: 1.0.0
Text Domain: athar-sports
*/

/* CSS Reset & Global Tokens */
*, *::before, *::after {
	box-sizing: border-box;
}

:root {
	--as-primary: #F4561B;
	--as-primary-hover: #FF6A2C;
	--as-accent: #16B4EE;
	--as-dark-bg: #0E1114;
	--as-darker-bg: #080A0C;
	--as-text-dark: #12161A;
	--as-text-muted: #6B737C;
	--as-text-light: #B9C1C9;
	--as-border-light: #E3E7EB;
	--as-surface-light: #F5F6F7;
	--as-font-heading: 'Archivo', sans-serif;
	--as-font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
	--as-font-mono: 'IBM Plex Mono', monospace;
}

html {
	scroll-behavior: smooth;
	overflow-x: clip;
}

body {
	margin: 0;
	padding: 0;
	background: #ffffff;
	color: var(--as-text-dark);
	font-family: var(--as-font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

a {
	color: var(--as-primary);
	text-decoration: none;
	transition: color 180ms ease, opacity 180ms ease;
}

a:hover {
	color: var(--as-primary-hover);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--as-font-heading);
	color: inherit;
}

p {
	margin: 0;
}

input, select, textarea, button {
	font-family: inherit;
}

/* Animations from design */
@keyframes heroFade {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

@keyframes heroFadeImg {
	from { opacity: 0; }
	to { opacity: 0.62; }
}

@keyframes heroFadeShot {
	from { opacity: 0; transform: scale(1.02); }
	to { opacity: 1; transform: none; }
}

@keyframes asFadeUp {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: none; }
}

[data-reveal] {
	animation: asFadeUp 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@supports (animation-timeline: view()) {
	[data-reveal] {
		animation-timeline: view();
		animation-range: entry 0% entry 45%;
	}
}