/*
 * All With Love — "Aurora Glass" site-wide redesign (v2.0, theme v1.32.0).
 *
 * A global design layer on top of style.css (and the three page-specific
 * glass stylesheets already in place: home-glass.css, shop-glass.css,
 * cart-checkout.css). Those three only ever reached the homepage, shop
 * pages, and cart/checkout — the header, footer, single-product pages,
 * blog, and every other template were still the original flat design.
 * This file makes the "glassy, modern, animated" direction the whole
 * site's default, not just three pages' — a true sticky glass header and
 * footer, glass product cards everywhere (not just the homepage grids),
 * scroll-reveal motion, and a few signature interactions (magnetic/liquid
 * buttons, cursor-reactive CTA glow, tilt-on-hover cards, a kinetic hero
 * entrance) grounded in 2026's actual design-trend research: frosted
 * "liquid glass" panels for nav/overlays (Apple's own term for it),
 * purposeful micro-interactions (never decorative-only motion), kinetic
 * type as a hero element, and a bold accent color used sparingly against
 * an otherwise calm palette — all reusing this theme's existing Sunset
 * Terracotta tokens rather than introducing a clashing new palette.
 *
 * Every animation in this file has a `prefers-reduced-motion: reduce`
 * fallback that keeps the end state (nothing stays permanently hidden)
 * and every interactive element keeps its existing focus-visible state —
 * motion here is additive polish, never load-bearing for usability.
 *
 * Reveal-on-scroll never hides content by default: the CSS only hides
 * `.awl-reveal` elements, and that class is added by JS
 * (redesign-interactions.js) at runtime — so with JavaScript disabled, or
 * before it runs, everything is simply visible. No flash-of-hidden-content
 * risk, no markup changes needed in any template.
 */

/* ==========================================================================
   1. Extended design tokens — additive, never redefines an existing token
   ========================================================================== */
:root {
	/* Glass surface + accent-glow tokens, reusing the existing palette. */
	--awl-glass-bg: rgba(255, 255, 255, 0.55);
	--awl-glass-bg-strong: rgba(255, 255, 255, 0.72);
	--awl-glass-border: rgba(255, 255, 255, 0.6);
	--awl-glass-blur: 18px;
	--awl-accent-pop: #ff8a5c; /* a warmer, more saturated coral off --awl-primary — used sparingly, for glow/CTA accents only, never body text */
	--awl-motion-fast: 0.2s;
	--awl-motion-med: 0.4s;
	--awl-motion-slow: 0.8s;
	--awl-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   2. Global ambient background — slow-drifting aurora blobs behind every
   page, the same soft-blob technique already used on the cart/checkout and
   homepage pages, now a shared site-wide treatment so the whole site reads
   as one coherent system rather than "three glassy pages + a plain rest".
   ========================================================================== */
body {
	position: relative;
}
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(circle at 10% 10%, rgba(200, 98, 63, 0.14) 0%, rgba(200, 98, 63, 0) 40%),
		radial-gradient(circle at 90% 15%, rgba(42, 111, 107, 0.12) 0%, rgba(42, 111, 107, 0) 38%),
		radial-gradient(circle at 15% 90%, rgba(42, 111, 107, 0.10) 0%, rgba(42, 111, 107, 0) 36%),
		radial-gradient(circle at 92% 92%, rgba(200, 98, 63, 0.12) 0%, rgba(200, 98, 63, 0) 40%);
	background-color: var(--awl-bg);
	animation: awl-aurora-drift 40s ease-in-out infinite alternate;
}
@keyframes awl-aurora-drift {
	0% { background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%; }
	100% { background-position: 4% 6%, 94% 8%, 6% 92%, 96% 94%; }
}
@media (prefers-reduced-motion: reduce) {
	body::before { animation: none; }
}

/* ==========================================================================
   3. Header — true sticky liquid-glass nav
   ========================================================================== */
.awl-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--awl-glass-bg);
	-webkit-backdrop-filter: blur(var(--awl-glass-blur)) saturate(140%);
	backdrop-filter: blur(var(--awl-glass-blur)) saturate(140%);
	border-bottom: 1px solid var(--awl-glass-border);
	transition: background var(--awl-motion-fast) var(--awl-ease), box-shadow var(--awl-motion-fast) var(--awl-ease), padding var(--awl-motion-fast) var(--awl-ease);
}
.awl-header.is-scrolled {
	background: var(--awl-glass-bg-strong);
	box-shadow: var(--awl-shadow);
}
.awl-announcement-bar {
	position: relative;
	overflow: hidden;
}
/* A slow shimmer sweep across the announcement bar — the one place a
   purely decorative touch earns its keep, since its whole job is to catch
   the eye for a one-line message that changes rarely. */
.awl-announcement-bar::after {
	content: '';
	position: absolute;
	top: 0;
	left: -40%;
	width: 40%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
	animation: awl-shimmer-sweep 6s ease-in-out infinite;
}
@keyframes awl-shimmer-sweep {
	0% { left: -40%; }
	55%, 100% { left: 120%; }
}
@media (prefers-reduced-motion: reduce) {
	.awl-announcement-bar::after { display: none; }
}

.awl-mobile-menu {
	background: var(--awl-glass-bg-strong);
	-webkit-backdrop-filter: blur(var(--awl-glass-blur)) saturate(140%);
	backdrop-filter: blur(var(--awl-glass-blur)) saturate(140%);
}

/* ==========================================================================
   4. Buttons — "liquid" interaction shared by every CTA on the site
   (.awl-btn is the theme's own button class; .button/.add_to_cart_button
   are WooCommerce's own core button markup, used on every product card,
   every archive, and the single-product page — unifying both under the
   same interaction means every "Add to cart" everywhere gets it too, with
   zero markup changes).
   ========================================================================== */
.awl-btn,
.button,
a.add_to_cart_button,
button.add_to_cart_button {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: transform var(--awl-motion-fast) var(--awl-ease), box-shadow var(--awl-motion-fast) var(--awl-ease);
}
.awl-btn::before,
.button::before,
a.add_to_cart_button::before,
button.add_to_cart_button::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
	background-size: 250% 100%;
	background-position: 150% 0;
	transition: background-position var(--awl-motion-med) var(--awl-ease);
	pointer-events: none;
}
.awl-btn:hover::before,
.button:hover::before,
a.add_to_cart_button:hover::before,
button.add_to_cart_button:hover::before {
	background-position: -50% 0;
}
.awl-btn:hover,
.button:hover,
a.add_to_cart_button:hover,
button.add_to_cart_button:hover {
	transform: translateY(-2px);
}
.awl-btn:active,
.button:active,
a.add_to_cart_button:active,
button.add_to_cart_button:active {
	transform: translateY(0) scale(0.97);
}
@media (prefers-reduced-motion: reduce) {
	.awl-btn,
	.button,
	a.add_to_cart_button,
	button.add_to_cart_button {
		transition: none;
	}
	.awl-btn::before,
	.button::before,
	a.add_to_cart_button::before,
	button.add_to_cart_button::before {
		display: none;
	}
}

/* Ripple mark — a short-lived element JS adds at the click point
   (redesign-interactions.js); purely cosmetic, buttons work identically
   without it if JS is unavailable. */
.awl-ripple {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	transform: scale(0);
	animation: awl-ripple-out 0.6s var(--awl-ease);
	pointer-events: none;
}
@keyframes awl-ripple-out {
	to { transform: scale(3); opacity: 0; }
}

/* Cursor-reactive glow on primary CTAs — JS sets --awl-glow-x/--awl-glow-y
   from the pointer position per button; with no JS (or on touch, where
   there's no hover to react to) the gradient just sits centred, which
   still reads as a normal soft highlight, never broken-looking. */
.awl-btn-primary,
a.add_to_cart_button {
	--awl-glow-x: 50%;
	--awl-glow-y: 50%;
}
.awl-btn-primary::after,
a.add_to_cart_button::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	background: radial-gradient(circle 80px at var(--awl-glow-x) var(--awl-glow-y), rgba(255, 255, 255, 0.45), transparent 70%);
	transition: opacity var(--awl-motion-fast) var(--awl-ease);
	pointer-events: none;
}
.awl-btn-primary:hover::after,
a.add_to_cart_button:hover::after {
	opacity: 1;
}

/* ==========================================================================
   5. Product cards — glass surface + gentle tilt, everywhere WooCommerce
   renders its standard loop markup (shop, category archives, homepage
   product grids, related/cross-sell/upsell grids, search results) — all
   of it is the same `ul.products li.product` markup, so one rule reaches
   every one of those without touching any template.
   ========================================================================== */
ul.products li.product {
	background: var(--awl-glass-bg);
	-webkit-backdrop-filter: blur(12px) saturate(130%);
	backdrop-filter: blur(12px) saturate(130%);
	border: 1px solid var(--awl-glass-border);
	border-radius: var(--awl-radius);
	padding: 14px;
	transition: transform var(--awl-motion-fast) var(--awl-ease), box-shadow var(--awl-motion-fast) var(--awl-ease);
	will-change: transform;
}
ul.products li.product:hover {
	box-shadow: var(--awl-shadow);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	ul.products li.product { background: rgba(255, 255, 255, 0.9); }
}
@media (prefers-reduced-motion: reduce) {
	ul.products li.product { transition: box-shadow var(--awl-motion-fast) ease; }
}
/* The 3D tilt itself is inline-style driven by JS (transform: perspective()
   rotateX() rotateY()) so it can track the pointer continuously; this just
   makes sure the property transitions smoothly back to flat on mouseleave,
   and tilt is skipped entirely on touch devices and under reduced-motion
   (see redesign-interactions.js). */
ul.products li.product.awl-tilt-ready {
	transition: transform var(--awl-motion-fast) var(--awl-ease), box-shadow var(--awl-motion-fast) var(--awl-ease);
	transform-style: preserve-3d;
}

/* Sale badge — the one spot a bold "dopamine" accent color earns its
   keep against this theme's otherwise calm Sunset Terracotta palette,
   since its entire job is to catch the eye. A gentle pulse, not a flash —
   purposeful motion drawing attention to a real discount, not noise. */
ul.products li.product .onsale {
	background: var(--awl-accent-pop);
	box-shadow: 0 0 0 0 rgba(255, 138, 92, 0.5);
	animation: awl-badge-pulse 2.4s ease-out infinite;
}
@keyframes awl-badge-pulse {
	0% { box-shadow: 0 0 0 0 rgba(255, 138, 92, 0.45); }
	70% { box-shadow: 0 0 0 8px rgba(255, 138, 92, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 138, 92, 0); }
}
@media (prefers-reduced-motion: reduce) {
	ul.products li.product .onsale { animation: none; }
}

/* ==========================================================================
   6. Scroll-reveal — progressive enhancement only (see file header note)
   ========================================================================== */
.awl-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity var(--awl-motion-slow) var(--awl-ease), transform var(--awl-motion-slow) var(--awl-ease);
}
.awl-reveal.awl-in-view {
	opacity: 1;
	transform: translateY(0);
}
/* Staggered children within a revealed group (product grids, footer
   columns) — each child's own transition-delay is set inline by JS in
   small, capped increments so a 20-item grid doesn't take ten seconds to
   finish appearing. */
@media (prefers-reduced-motion: reduce) {
	.awl-reveal,
	.awl-reveal.awl-in-view {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ==========================================================================
   7. Kinetic hero entrance (homepage only — .awl-hero only exists there)
   ========================================================================== */
.awl-hero-copy h1 {
	display: inline-block;
	animation: awl-hero-kinetic-in var(--awl-motion-slow) var(--awl-ease) both;
}
.awl-hero-copy p {
	animation: awl-hero-fade-in var(--awl-motion-slow) var(--awl-ease) 0.15s both;
}
.awl-hero-actions {
	animation: awl-hero-fade-in var(--awl-motion-slow) var(--awl-ease) 0.3s both;
}
@keyframes awl-hero-kinetic-in {
	from {
		opacity: 0;
		letter-spacing: 0.08em;
		transform: translateY(18px);
		font-weight: 500;
	}
	to {
		opacity: 1;
		letter-spacing: normal;
		transform: translateY(0);
	}
}
@keyframes awl-hero-fade-in {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.awl-hero-copy h1,
	.awl-hero-copy p,
	.awl-hero-actions {
		animation: none;
	}
}

/* ==========================================================================
   8. Footer — glass-on-dark treatment (keeps the dark grounding color,
   which is doing real work as contrast anchor at the bottom of an
   otherwise light, airy page — just gives it the same frosted depth and
   reveal motion as the rest of the redesign instead of a flat solid block)
   ========================================================================== */
.awl-footer {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.awl-footer::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(circle at 20% 20%, rgba(200, 98, 63, 0.22) 0%, rgba(200, 98, 63, 0) 45%),
		radial-gradient(circle at 85% 70%, rgba(42, 111, 107, 0.20) 0%, rgba(42, 111, 107, 0) 45%);
	animation: awl-aurora-drift 50s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
	.awl-footer::before { animation: none; }
}
.awl-footer-widgets .awl-widget,
.awl-footer-about,
.awl-footer-nav {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--awl-radius);
	padding: 16px 18px;
}

/* ==========================================================================
   9. Mobile — keep blur costs down on small/low-power devices, and make
   sure the tilt effect (pointer-only, see JS) never leaves cards stuck
   mid-tilt on a touch tap.
   ========================================================================== */
@media (max-width: 782px) {
	body::before,
	.awl-footer::before {
		animation: none;
	}
	ul.products li.product {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: rgba(255, 255, 255, 0.85);
	}
}