/*
 * ePay — custom CSS layer.
 *
 * Houses keyframe animations, decorative effects (orbits, particles, grid bg),
 * sticky header behavior and JS-driven reveal animations.
 *
 * Designed to be safe to load BEFORE or AFTER the Tailwind build — uses raw
 * CSS only.
 */

/* ============================================================================
 * Sticky header behavior.
 * ========================================================================== */
.epay-header-bar {
	background: transparent;
	box-shadow: none;
}
[data-epay-header].is-scrolled .epay-header-bar {
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	box-shadow: 0 8px 32px -16px rgba(15, 23, 42, 0.18);
	border: 1px solid rgba(229, 236, 248, 0.6);
}
html.dark [data-epay-header].is-scrolled .epay-header-bar {
	background: rgba(8, 20, 38, 0.65);
	border: 1px solid rgba(255, 255, 255, 0.06);
	box-shadow: 0 8px 32px -16px rgba(0, 0, 0, 0.6);
}

/* ============================================================================
 * Keyframes — orbital motion, float, pulse, reveal, particles.
 * ========================================================================== */
@keyframes epay-orbit-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
@keyframes epay-orbit-spin-rev {
	from { transform: rotate(360deg); }
	to   { transform: rotate(0deg); }
}
@keyframes epay-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-12px); }
}
@keyframes epay-pulse-glow {
	0%, 100% { opacity: 0.5; transform: scale(1); }
	50%      { opacity: 1;   transform: scale(1.05); }
}
@keyframes epay-particle {
	0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
	50%  { opacity: 1; }
	100% { opacity: 0; transform: translate(0, -32px) scale(1); }
}
@keyframes epay-reveal-up {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes epay-line-draw {
	from { stroke-dashoffset: 600; }
	to   { stroke-dashoffset: 0; }
}
@keyframes epay-shine {
	0%   { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}

/* Apply named animations. */
.epay-orbit-slow,
.epay-orbit { transform-origin: 50% 50%; }
.epay-orbit-slow { animation: epay-orbit-spin 36s linear infinite; }
.epay-orbit-mid  { animation: epay-orbit-spin-rev 24s linear infinite; }
.epay-orbit-fast { animation: epay-orbit-spin 16s linear infinite; }

.epay-float       { animation: epay-float 6s ease-in-out infinite; }
.epay-float-slow  { animation: epay-float 8s ease-in-out infinite; }

/* ============================================================================
 * Hero — decorative grid background.
 * ========================================================================== */
.epay-grid-bg {
	background-image:
		linear-gradient(to right, rgba(37, 99, 255, 0.18) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(37, 99, 255, 0.18) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(ellipse at center, black 35%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 75%);
}

/* ============================================================================
 * Orbital globe — particles + dot.
 * ========================================================================== */
.epay-orbital-globe .epay-particle {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: 6px;
	height: 6px;
	border-radius: 9999px;
	background: radial-gradient(circle, #3DD9FF 0%, rgba(37, 99, 255, 0) 70%);
	animation: epay-particle 4s ease-in-out infinite;
	animation-delay: var(--d, 0s);
	pointer-events: none;
}

.epay-orbit-dot {
	filter: drop-shadow(0 0 8px rgba(61, 217, 255, 0.9));
}

/* ============================================================================
 * Scroll reveal.
 *
 * Initial state: invisible & shifted. JS adds `.is-visible` when the element
 * enters the viewport, triggering the animation. Falls back gracefully when
 * JS is disabled (revealed via :not(.js)).
 * ========================================================================== */
html.no-js .epay-reveal { opacity: 1 !important; transform: none !important; }

.js .epay-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0ms),
		transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0ms);
	will-change: opacity, transform;
}
.js .epay-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.epay-reveal,
	.epay-float, .epay-float-slow,
	.epay-orbit-slow, .epay-orbit-mid, .epay-orbit-fast,
	.epay-orbital-globe .epay-particle,
	[data-epay-counter] {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ============================================================================
 * Mobile menu state transitions.
 * ========================================================================== */
[data-epay-menu][data-state="open"] [data-epay-menu-panel] { transform: translateX(0); }
[data-epay-menu][data-state="open"] [data-epay-menu-overlay] { opacity: 1; }

/* ============================================================================
 * Dropdown (language switcher etc.) opening animation.
 * ========================================================================== */
[data-epay-dropdown][data-state="open"] [data-epay-dropdown-panel] {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

/* ============================================================================
 * Chart animations.
 * ========================================================================== */
.epay-chart-line {
	stroke-dasharray: 600;
	stroke-dashoffset: 600;
}
.is-animated .epay-chart-line {
	animation: epay-line-draw 1.6s ease-out forwards;
}
.epay-chart-area {
	opacity: 0;
	transition: opacity 1s ease 0.6s;
}
.is-animated .epay-chart-area { opacity: 1; }
.epay-chart-dot {
	opacity: 0;
	transition: opacity 0.4s ease 1.4s;
}
.is-animated .epay-chart-dot { opacity: 1; }

/* ============================================================================
 * Pagination.
 * ========================================================================== */
.pagination, .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}
.pagination .page-numbers,
.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.75rem;
	border-radius: 0.75rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: rgba(17, 24, 39, 0.7);
	background: rgba(255, 255, 255, 0.6);
	box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.05);
	transition: all 0.2s;
}
html.dark .pagination .page-numbers,
html.dark .nav-links .page-numbers {
	color: rgba(255, 255, 255, 0.7);
	background: rgba(255, 255, 255, 0.04);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.pagination .page-numbers.current,
.nav-links .page-numbers.current {
	background: #2563FF;
	color: #fff;
	box-shadow: 0 8px 24px -8px rgba(37, 99, 255, 0.6);
}
.pagination .page-numbers:hover:not(.current),
.nav-links .page-numbers:hover:not(.current) {
	color: #2563FF;
}
html.dark .pagination .page-numbers:hover:not(.current),
html.dark .nav-links .page-numbers:hover:not(.current) {
	color: #3DD9FF;
}

/* ============================================================================
 * Prose / long-form content overrides for legal & blog content.
 * ========================================================================== */
.epay-prose {
	color: rgba(17, 24, 39, 0.85);
	line-height: 1.7;
	font-size: 1rem;
}
html.dark .epay-prose { color: rgba(255, 255, 255, 0.78); }

.epay-prose h2 {
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 700;
	color: #111827;
	margin: 2.5rem 0 1rem;
	letter-spacing: -0.01em;
}
html.dark .epay-prose h2 { color: #fff; }

.epay-prose h3 {
	font-size: clamp(1.2rem, 2vw, 1.5rem);
	font-weight: 600;
	color: #111827;
	margin: 2rem 0 0.75rem;
}
html.dark .epay-prose h3 { color: #fff; }

.epay-prose p { margin: 1rem 0; }
.epay-prose a {
	color: #2563FF;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
html.dark .epay-prose a { color: #3DD9FF; }
.epay-prose strong { color: #111827; font-weight: 600; }
html.dark .epay-prose strong { color: #fff; }
.epay-prose ul, .epay-prose ol { margin: 1rem 0; padding-left: 1.5rem; }
.epay-prose ul li { list-style: disc; }
.epay-prose ol li { list-style: decimal; }
.epay-prose li { margin: 0.25rem 0; }
.epay-prose blockquote {
	border-left: 3px solid #2563FF;
	padding-left: 1rem;
	font-style: italic;
	color: rgba(17, 24, 39, 0.7);
	margin: 1.5rem 0;
}
html.dark .epay-prose blockquote {
	color: rgba(255, 255, 255, 0.7);
	border-left-color: #3DD9FF;
}
.epay-prose code {
	background: rgba(37, 99, 255, 0.08);
	color: #2563FF;
	padding: 0.15rem 0.4rem;
	border-radius: 0.375rem;
	font-size: 0.875em;
}
html.dark .epay-prose code {
	background: rgba(61, 217, 255, 0.12);
	color: #3DD9FF;
}
.epay-prose pre {
	background: #050816;
	color: #E0E7FF;
	padding: 1rem;
	border-radius: 0.75rem;
	overflow-x: auto;
	font-size: 0.875em;
}
.epay-prose pre code { background: none; color: inherit; padding: 0; }
.epay-prose img { border-radius: 1rem; }

/* ============================================================================
 * Forms (Gutenberg + custom).
 * ========================================================================== */
.epay-prose input[type="text"],
.epay-prose input[type="email"],
.epay-prose input[type="url"],
.epay-prose textarea,
.epay-prose select {
	width: 100%;
	padding: 0.625rem 0.875rem;
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.6);
	box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.1);
	transition: all 0.2s;
}
html.dark .epay-prose input,
html.dark .epay-prose textarea,
html.dark .epay-prose select {
	background: rgba(255, 255, 255, 0.04);
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* ============================================================================
 * Skip link behavior.
 * ========================================================================== */
.sr-only.focus\:not-sr-only:focus {
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	white-space: normal;
}

/* ============================================================================
 * Image lazy fade-in.
 * ========================================================================== */
img[loading="lazy"] {
	transition: opacity 0.4s ease;
}
img[loading="lazy"]:not([src]) { opacity: 0; }