/* MyGradewell — front-end polish beyond what Tailwind's utility classes
   cover: header scroll state, focus rings, reduced-motion handling, and
   the handful of custom keyframes (gradient blob drift, counters). */

:root {
	--mgw-header-h: 72px;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- Header scroll state ---------- */
#site-header {
	background: transparent;
}
#site-header.is-scrolled {
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 1px 0 0 rgba(15, 23, 42, 0.06), 0 8px 24px -12px rgba(15, 23, 42, 0.12);
}

/* ---------- Focus visibility (accessibility) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid #6366f1;
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---------- Gradient blob drift (hero background) ---------- */
@keyframes mgw-drift {
	0% { transform: translate(-50%, 0) scale(1); }
	50% { transform: translate(-48%, 12px) scale(1.03); }
	100% { transform: translate(-50%, 0) scale(1); }
}
[data-parallax] {
	animation: mgw-drift 16s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
	[data-parallax] { animation: none; }
	html { scroll-behavior: auto; }
}

/* ---------- Form status message ---------- */
#mgw-form-status.is-success {
	display: block;
	background: #ecfdf5;
	color: #065f46;
	border: 1px solid #a7f3d0;
}
#mgw-form-status.is-error {
	display: block;
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

/* ---------- Submit button loading state ---------- */
#mgw-submit-btn[data-loading="true"] #mgw-submit-label {
	visibility: hidden;
}
#mgw-submit-btn[data-loading="true"] {
	position: relative;
}
#mgw-submit-btn[data-loading="true"]::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2.5px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	animation: mgw-spin 0.7s linear infinite;
}
@keyframes mgw-spin {
	to { transform: rotate(360deg); }
}

/* ---------- Mobile menu ---------- */
#mgw-mobile-menu.is-open {
	display: block;
}

/* ---------- AOS tuning ---------- */
[data-aos] {
	transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
}