/**
 * Dat Bike ERA — custom CSS.
 * Tailwind handles utility classes; this file holds keyframes + things Tailwind can't do.
 */

/* ============================================================ */
/* Base                                                          */
/* ============================================================ */

html { scroll-behavior: smooth; }
html.lenis { height: auto; }
html.lenis, html.lenis body { height: auto; }
html.lenis body { overflow: hidden; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

body {
	font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	background: #FFFFFF;
	color: #0A0A0A;
}

/* Smooth font transitions on theme load */
.dbe-ready body {
	opacity: 1;
	transition: opacity 0.4s ease-out;
}

/* Selection */
::selection {
	background: #FF4338;
	color: #fff;
}

/* Scrollbar (subtle) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #FF4338; }

/* ============================================================ */
/* Keyframe animations                                           */
/* ============================================================ */

@keyframes float {
	0%, 100% { transform: translateY(0) rotate(0); }
	50%      { transform: translateY(-12px) rotate(2deg); }
}
.animate-float       { animation: float 4s ease-in-out infinite; }
.animate-float-delay { animation: float 4s ease-in-out infinite 1s; }

@keyframes float-slow {
	0%, 100% { transform: translate(0, 0) scale(1); }
	33%      { transform: translate(30px, -20px) scale(1.05); }
	66%      { transform: translate(-20px, 20px) scale(0.95); }
}
.animate-float-slow { animation: float-slow 12s ease-in-out infinite; }

@keyframes float-slower {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(-40px, 30px) scale(1.1); }
}
.animate-float-slower { animation: float-slower 16s ease-in-out infinite; }

@keyframes tilt {
	0%, 100% { transform: rotate(0deg) scale(1); }
	50%      { transform: rotate(-1deg) scale(1.01); }
}
.animate-tilt { animation: tilt 8s ease-in-out infinite; }

@keyframes scroll-dot {
	0%      { transform: translateY(0); opacity: 1; }
	100%    { transform: translateY(14px); opacity: 0; }
}
.animate-scroll-dot { animation: scroll-dot 1.6s ease-in-out infinite; }

@keyframes marquee {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}
.animate-marquee {
	animation: marquee 40s linear infinite;
	will-change: transform;
}
.animate-marquee:hover { animation-play-state: paused; }

/* Subtle pulse for live indicators */
@keyframes soft-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.7; transform: scale(1.1); }
}
.animate-soft-pulse { animation: soft-pulse 2s ease-in-out infinite; }

/* ============================================================ */
/* Header transition                                             */
/* ============================================================ */

[data-header] {
	transition: padding 0.4s ease;
}
[data-header].scrolled {
	padding-top: 0;
}
[data-header-bg] {
	transition: background 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
}

/* ============================================================ */
/* WP Nav Menu (when registered)                                 */
/* ============================================================ */

#site-header .menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
#site-header .menu li {
	margin: 0;
}
#site-header .menu a {
	color: #0A0A0A;
	text-decoration: none;
	transition: color 0.2s ease;
}
#site-header .menu a:hover {
	color: #FF4338;
}

/* ============================================================ */
/* Prose (FAQ answers)                                           */
/* ============================================================ */

.prose p          { margin: 0 0 1em; line-height: 1.7; }
.prose p:last-child { margin-bottom: 0; }
.prose strong     { color: #0A0A0A; font-weight: 700; }
.prose a          { color: #FF4338; text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover    { color: #0A0A0A; }
.prose ul         { margin: 1em 0; padding-left: 1.5em; }
.prose ul li      { margin-bottom: 0.5em; list-style: disc; }
.prose ol         { margin: 1em 0; padding-left: 1.5em; }
.prose ol li      { margin-bottom: 0.5em; list-style: decimal; }

/* ============================================================ */
/* AOS — slightly snappier                                       */
/* ============================================================ */

[data-aos] {
	will-change: transform, opacity;
}

/* ============================================================ */
/* Image perf                                                    */
/* ============================================================ */

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

/* ============================================================ */
/* Reduce motion respect                                         */
/* ============================================================ */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================ */
/* Print                                                         */
/* ============================================================ */

@media print {
	#site-header,
	#site-footer,
	[data-header],
	[data-lightbox] { display: none !important; }
	body { background: white !important; color: black !important; }
}