/* ==========================================================================
   The Doggos — Cinematic Experience · Sitewide L&F
   --------------------------------------------------------------------------
   Tiny, surgical refinements to elevate the stock theme. Each block is
   gated by a body class so a settings toggle can disable it independently:

     body.dcx-polish    -> header / nav / cart-orb micro-polish
     body.dcx-kenburns  -> "the dog is family" hero gentle drift
     body.dcx-grain     -> subtle paper-grain across the whole site

   Selectors are deliberately surgical — we never override Elementor sections
   or product cards that the shop already styles. Only frame elements.
   ========================================================================== */

/* ---- 1. HEADER / NAV / CART ORB POLISH -------------------------------- */
body.dcx-polish .top-header { transition: backdrop-filter .3s ease; }

/* Tighten the trust strip — it's a great brand asset, just lighter */
body.dcx-polish .doggos-trust-strip {
	letter-spacing: 0.04em;
	font-feature-settings: "ss01" on, "cv11" on;
}

/* Search input — calmer, editorial */
body.dcx-polish .header-search input,
body.dcx-polish .header-search .search-input {
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	letter-spacing: 0.01em;
	transition: border-color .25s ease, background .25s ease;
}

/* Floating cart orb — softer, nicer shadow, gentler bounce */
body.dcx-polish .dfc-cart-trigger,
body.dcx-polish .content-cart-popup .button-cart-popup {
	box-shadow:
		0 6px 18px rgba(31, 42, 20, 0.18),
		0 1px 0 rgba(255,255,255,0.20) inset !important;
	transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .35s cubic-bezier(0.22, 1, 0.36, 1);
}
body.dcx-polish .dfc-cart-trigger:hover,
body.dcx-polish .content-cart-popup .button-cart-popup:hover {
	transform: translateY(-2px);
	box-shadow:
		0 12px 26px rgba(31, 42, 20, 0.28),
		0 1px 0 rgba(255,255,255,0.20) inset !important;
}

/* Back-to-top — match cinematic palette */
body.dcx-polish .back-top a {
	transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1);
}
body.dcx-polish .back-top a:hover { transform: translateY(-3px); }

/* Mega menu link hover — subtler underline */
body.dcx-polish .main-menu .menu-item a {
	transition: color .25s ease, letter-spacing .25s ease;
}
body.dcx-polish .main-menu .menu-item:hover > a { letter-spacing: 0.02em; }

/* "Click To Get To Know Us" button — until the homepage is updated, give
   it the cinematic feel so it doesn't look stranded after Jarvis. */
body.dcx-polish a.elementor-button[href*="get-to-know"],
body.dcx-polish a.elementor-button:where([href*="about"], [href*="story"]) {
	font-family: 'JetBrains Mono', ui-monospace, monospace !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	font-size: 13px !important;
	transition: transform .3s cubic-bezier(0.22,1,0.36,1), box-shadow .3s cubic-bezier(0.22,1,0.36,1) !important;
}
body.dcx-polish a.elementor-button:where([href*="about"], [href*="story"]):hover {
	transform: translate(-2px, -2px) !important;
	box-shadow: 5px 5px 0 #1f2a14 !important;
}

/* ---- 2. KEN-BURNS DRIFT ON "THE DOG IS FAMILY" HERO ------------------- */
@keyframes dcx-kenburns {
	0%   { transform: scale(1.00) translate(0, 0); }
	50%  { transform: scale(1.045) translate(-1.2%, -0.8%); }
	100% { transform: scale(1.00) translate(0, 0); }
}
body.dcx-kenburns .home .elementor-widget-image:has(img[src*="family"]) img,
body.dcx-kenburns .home .elementor-widget-image:has(img[alt*="family"]) img,
body.dcx-kenburns .home .elementor-widget-image:has(img[alt*="dog is family"]) img {
	animation: dcx-kenburns 22s ease-in-out infinite;
	transform-origin: center center;
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	body.dcx-kenburns .home .elementor-widget-image img { animation: none !important; }
}

/* ---- 3. PAPER GRAIN OVERLAY (whole site) ------------------------------ */
body.dcx-grain::after {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9998;
	opacity: 0.045;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.16  0 0 0 0 0.08  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}