/* 93 Brew — UI enhancement layer: scroll animations, motion polish, and
 * micro-interactions. Loads on top of site.css + menu.css and drives the
 * behaviour paired with enhance.js. Everything is gated on the
 * `html.brew-anim-ready` class (added by a tiny head script) so the site
 * degrades to fully-visible content if JS is disabled or fails to boot.
 * Fully honours prefers-reduced-motion. Palette variables come from site.css. */

/* =========================================================================
 * 1. Scroll reveal
 *    Elements start hidden, then rise + fade in when they enter the viewport.
 *    Known .brew-* blocks are pre-hidden by explicit selector below so they
 *    never flash; enhance.js also tags Elementor widgets with .brew-reveal.
 * ====================================================================== */

/* Pre-hide known content blocks at parse time (no flash-of-reveal). */
html.brew-anim-ready :is(
	.brew-card,
	.brew-feat__item,
	.brew-values__item,
	.brew-channels > a,
	.brew-channels > .brew-chan,
	.brew-info__box,
	.brew-list li,
	.brew-quote,
	.brew-why,
	.brew-strip,
	.brew-section__head,
	.brew-map
):not(.is-visible) {
	opacity: 0;
}

/* JS-tagged elements (Elementor widgets, headings, images, buttons…). */
html.brew-anim-ready .brew-reveal:not(.is-visible) {
	opacity: 0;
}

/* The reveal itself. Runs once, then enhance.js adds .brew-done to release
   the transform so hover interactions (card lift, etc.) work normally. */
@keyframes brew-rise {
	from { opacity: 0; transform: translateY(30px); }
	to   { opacity: 1; transform: translateY(0); }
}

html.brew-anim-ready :is(
	.brew-card,
	.brew-feat__item,
	.brew-values__item,
	.brew-channels > a,
	.brew-channels > .brew-chan,
	.brew-info__box,
	.brew-list li,
	.brew-quote,
	.brew-why,
	.brew-strip,
	.brew-section__head,
	.brew-map
).is-visible,
html.brew-anim-ready .brew-reveal.is-visible {
	animation: brew-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

html.brew-anim-ready .brew-done {
	animation: none !important;
	opacity: 1 !important;
}

/* Failsafe: if enhance.js never boots, the head script adds this class after
   a short delay and everything becomes visible with no animation. */
html.brew-no-js-anim :is(
	.brew-card,
	.brew-feat__item,
	.brew-values__item,
	.brew-channels > a,
	.brew-channels > .brew-chan,
	.brew-info__box,
	.brew-list li,
	.brew-quote,
	.brew-why,
	.brew-strip,
	.brew-section__head,
	.brew-map
),
html.brew-no-js-anim .brew-reveal {
	opacity: 1 !important;
	animation: none !important;
	transform: none !important;
}

/* =========================================================================
 * 2. Scroll progress bar (top of the page)
 * ====================================================================== */
#brew-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	background: linear-gradient(90deg, var(--brew-accent), #c39a71);
	z-index: 2000;
	pointer-events: none;
	will-change: width;
}

/* =========================================================================
 * 3. Sticky header — settles with a shadow once the page is scrolled
 * ====================================================================== */
.site-header {
	transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}
.site-header.is-scrolled {
	background: rgba(246, 239, 230, 0.96);
	box-shadow: 0 6px 26px rgba(42, 33, 26, 0.09);
}

/* =========================================================================
 * 4. Back-to-top button
 * ====================================================================== */
#brew-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: var(--brew-accent);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
	opacity: 0;
	transform: translateY(14px);
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
	box-shadow: 0 8px 22px rgba(42, 33, 26, 0.22);
	z-index: 1500;
}
#brew-top.is-shown {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}
#brew-top:hover {
	background: var(--brew-deep);
}

/* =========================================================================
 * 5. Buttons — a soft light sweep on hover + gentle lift
 * ====================================================================== */
.elementor-button {
	position: relative;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
	isolation: isolate;
}
.elementor-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(42, 33, 26, 0.18);
}
.elementor-button::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.28) 50%, transparent 80%);
	transform: translateX(-120%);
	transition: transform 0.6s ease;
}
.elementor-button:hover::after {
	transform: translateX(120%);
}

/* =========================================================================
 * 6. Menu cards — image zoom + warmer hover (lift comes from menu.css)
 * ====================================================================== */
.brew-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.brew-card:hover {
	border-color: rgba(138, 109, 79, 0.4);
}
.brew-card__media img {
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.brew-card:hover .brew-card__media img {
	transform: scale(1.06);
}

/* =========================================================================
 * 7. Menu category nav — animated active pill (set by scroll-spy)
 * ====================================================================== */
.brew-menu__nav a {
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.brew-menu__nav a:hover {
	transform: translateY(-1px);
}
.brew-menu__nav a.is-active {
	color: #fff;
	background: var(--brew-accent);
	border-color: var(--brew-accent);
}

/* =========================================================================
 * 8. Content links — sliding underline (scoped to text widgets)
 * ====================================================================== */
.elementor-widget-text-editor a:not(.elementor-button) {
	text-decoration: none;
	background-image: linear-gradient(var(--brew-accent), var(--brew-accent));
	background-size: 0% 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size 0.3s ease;
}
.elementor-widget-text-editor a:not(.elementor-button):hover {
	background-size: 100% 1px;
}

/* =========================================================================
 * 9. Accessibility & finishing touches
 * ====================================================================== */
html {
	scroll-padding-top: 90px;
}
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible,
.brew-menu__nav a:focus-visible {
	outline: 2px solid var(--brew-accent);
	outline-offset: 3px;
	border-radius: 6px;
}

::selection {
	background: var(--brew-accent);
	color: #fff;
}

/* =========================================================================
 * 10. Reduced motion — respect the OS setting: show everything, no movement
 * ====================================================================== */
@media (prefers-reduced-motion: reduce) {
	html.brew-anim-ready :is(
		.brew-card,
		.brew-feat__item,
		.brew-values__item,
		.brew-channels > a,
		.brew-channels > .brew-chan,
		.brew-info__box,
		.brew-list li,
		.brew-quote,
		.brew-why,
		.brew-strip,
		.brew-section__head,
		.brew-map
	),
	html.brew-anim-ready .brew-reveal {
		opacity: 1 !important;
		animation: none !important;
		transform: none !important;
	}
	html { scroll-behavior: auto !important; }
	.brew-card:hover .brew-card__media img,
	.elementor-button:hover,
	.brew-menu__nav a:hover { transform: none !important; }
	.elementor-button::after { display: none; }
}