/* ===================================================
   motark-landing-system.css
   Landing page design system — ALL pages.
   Canvas + grain surfaces, Home3 tokens, buttons, reveal.
   Paw footprint removed in main.css.
   =================================================== */

:root {
	--hp-canvas: #0a0e08;
	--hp-forest: #1a3c2a;
	--hp-forest-dark: #111a0f;
	--hp-ember: #f5a623;
	--hp-ember-dark: #d4891a;
	--hp-steel: #e4e6ea;
	--hp-steel-muted: #9aa0ab;
	--hp-font-display: 'Bebas Neue', 'Big Shoulders Display', Impact, sans-serif;
	--hp-font-cond: 'Barlow Condensed', 'DM Mono', sans-serif;
	--hp-font-body: 'Barlow', 'Work Sans', system-ui, sans-serif;
	--hp-grain-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.06'/%3E%3C/svg%3E");
	--hp-panel: #0a0e08;

	--jungle-night: var(--hp-canvas);
	--jungle-deep: var(--hp-forest);
	--sacred-gold: var(--hp-ember);
	--gold-light: var(--hp-ember);
	--cream: var(--hp-steel);
	--parchment: var(--hp-steel-muted);
	--font-display: var(--hp-font-display);
	--font-body: var(--hp-font-body);
	--border-soft: rgba(245, 166, 35, 0.12);
	--border-medium: rgba(245, 166, 35, 0.22);
}

html {
	background: var(--hp-canvas);
}

body.motark-textured {
	background: var(--hp-canvas) !important;
	background-color: var(--hp-canvas) !important;
	color: var(--hp-steel);
	font-family: var(--hp-font-body);
}

/* Sitewide header — flat panel green */
body.motark-textured .site-header {
	background: var(--hp-panel) !important;
	background-color: var(--hp-panel) !important;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-bottom: 1px solid rgba(245, 166, 35, 0.2);
	position: relative;
	z-index: 500;
}

body.motark-textured .site-header::before {
	content: none;
	display: none;
}

body.motark-textured .site-header[data-scrolled="true"] {
	border-bottom-color: rgba(245, 166, 35, 0.35);
}

/* Inner pages — let jungle background show through main shell */
body.motark-textured:not(.home) .site-main,
body.motark-textured .site-footer {
	background: transparent !important;
	position: relative;
	isolation: isolate;
}

body.motark-textured:not(.home) .site-main::after,
body.motark-textured .site-footer::after {
	content: none !important;
	display: none !important;
}

body.motark-textured:not(.home) .site-main > *,
body.motark-textured .site-footer > * {
	position: relative;
	z-index: 1;
}

body.motark-textured .site-main,
body.motark-textured .site-footer {
	position: relative;
	z-index: 1;
}

/* Typography */
body.motark-textured h1,
body.motark-textured h2,
body.motark-textured h3,
body.motark-textured h4,
body.motark-textured .page-title {
	font-family: var(--hp-font-display);
	color: var(--hp-steel);
}

body.motark-textured .eyebrow {
	font-family: var(--hp-font-cond);
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--hp-ember);
	letter-spacing: 0.4em;
	text-transform: uppercase;
	opacity: 1;
}

body.motark-textured .section__title,
body.motark-textured h2.section__title {
	font-family: var(--hp-font-display);
	color: var(--hp-steel);
}

body.motark-textured .prose {
	color: var(--hp-steel-muted);
	font-family: var(--hp-font-body);
}

body.motark-textured a:not([class*="__cta"]):not([class*="__view-all"]):not([class*="shop-page__pill"]):not([class*="shop-sidebar__"]):not(.btn):not(.btn--primary):not(.btn--ghost) {
	color: var(--hp-ember);
}

body.motark-textured a:not([class*="__cta"]):not([class*="__view-all"]):not([class*="shop-page__pill"]):not([class*="shop-sidebar__"]):not(.btn):not(.btn--primary):not(.btn--ghost):hover {
	color: var(--hp-ember-dark);
}

body.motark-textured.motark-shop-page a.shop-page__pill,
body.motark-textured.motark-shop-page a.shop-sidebar__link,
body.motark-textured.motark-shop-page a.shop-sidebar__sublink {
	color: inherit;
}

/* Button depth hovers — landing page style */
body.motark-textured .btn,
body.motark-textured a.btn,
body.motark-textured button.btn,
body.motark-textured .woocommerce a.button,
body.motark-textured .woocommerce button.button,
body.motark-textured .woocommerce input.button,
body.motark-textured .woocommerce #respond input#submit,
body.motark-textured .woocommerce-page a.button,
body.motark-textured .woocommerce-page button.button,
body.motark-textured .woocommerce-page input.button {
	font-family: var(--hp-font-cond);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: 999px;
	transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

body.motark-textured .btn--primary,
body.motark-textured a.btn--primary,
body.motark-textured button.btn--primary,
body.motark-textured .woocommerce a.button.alt,
body.motark-textured .woocommerce button.button.alt,
body.motark-textured .woocommerce input.button.alt,
body.motark-textured .woocommerce #respond input#submit,
body.motark-textured .woocommerce-page a.button.alt,
body.motark-textured .woocommerce-page button.button.alt,
body.motark-textured .woocommerce-page input.button.alt {
	background: var(--hp-ember) !important;
	background-color: var(--hp-ember) !important;
	color: var(--hp-canvas) !important;
	border-color: var(--hp-ember) !important;
	box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28), 0 10px 30px rgba(245, 166, 35, 0.3) !important;
}

body.motark-textured .btn--primary:hover,
body.motark-textured a.btn--primary:hover,
body.motark-textured button.btn--primary:hover,
body.motark-textured .woocommerce a.button.alt:hover,
body.motark-textured .woocommerce button.button.alt:hover,
body.motark-textured .woocommerce input.button.alt:hover,
body.motark-textured .woocommerce #respond input#submit:hover,
body.motark-textured .woocommerce-page a.button.alt:hover,
body.motark-textured .woocommerce-page button.button.alt:hover,
body.motark-textured .woocommerce-page input.button.alt:hover {
	background: var(--hp-ember-dark) !important;
	border-color: var(--hp-ember-dark) !important;
	color: var(--hp-canvas) !important;
	transform: translateY(-3px);
	box-shadow: 0 6px 0 rgba(0, 0, 0, 0.32), 0 14px 34px rgba(245, 166, 35, 0.38) !important;
}

body.motark-textured .btn--ghost,
body.motark-textured a.btn--ghost,
body.motark-textured button.btn--ghost {
	background: transparent !important;
	color: var(--hp-steel) !important;
	border: 1px solid rgba(228, 230, 234, 0.35) !important;
	box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28), 0 6px 16px rgba(0, 0, 0, 0.18) !important;
}

body.motark-textured .btn--ghost:hover,
body.motark-textured a.btn--ghost:hover,
body.motark-textured button.btn--ghost:hover {
	border-color: rgba(245, 166, 35, 0.45) !important;
	background: rgba(245, 166, 35, 0.06) !important;
	transform: translateY(-3px);
	box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3), 0 14px 28px rgba(0, 0, 0, 0.26) !important;
}

/* Scroll reveal — landing page motion sitewide */
@media (prefers-reduced-motion: no-preference) {
	body.motark-textured .reveal,
	body.motark-textured [data-reveal],
	body.motark-textured .will-reveal {
		opacity: 0;
		transform: translateY(28px);
		transition: opacity 0.55s ease, transform 0.55s ease;
	}

	body.motark-textured .reveal.visible,
	body.motark-textured [data-reveal].is-revealed,
	body.motark-textured .will-reveal.is-revealed {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.motark-textured .reveal,
	body.motark-textured [data-reveal],
	body.motark-textured .will-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Cards & panels */
body.motark-textured .card:not(.card--category),
body.motark-textured .review-card,
body.motark-textured ul.products li.card--product,
body.motark-textured .woocommerce-message,
body.motark-textured .woocommerce-info,
body.motark-textured .woocommerce-error,
body.motark-textured .woocommerce table.shop_table,
body.motark-textured .woocommerce-page table.shop_table,
body.motark-textured .account-intro__card,
body.motark-textured .post-card {
	background: var(--motark-surface-panel, linear-gradient(165deg, rgba(26, 60, 42, 0.45) 0%, rgba(10, 14, 8, 0.78) 100%));
	border: 1px solid var(--motark-surface-border, rgba(228, 230, 234, 0.12));
	box-shadow: var(--motark-surface-shadow, 0 3px 0 rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05)), 0 14px 44px rgba(0, 0, 0, 0.48);
}

body.motark-textured .section__brush {
	display: none !important;
}

.home-section-divider {
	display: none !important;
}