/* =================================================================
 * VOODOO VODKA — KINETIC
 *
 * The motion layer. Atmospheric animation, scroll-triggered reveals,
 * the candle flicker, the gold scorch, the page transitions.
 *
 * Budget: every effect respects prefers-reduced-motion.
 * ================================================================= */


/* -----------------------------------------------------------------
 * 1. CANDLE FLICKER — homepage hero atmosphere
 * A subtle warmth that pulses every few seconds. Pure CSS, no JS.
 * --------------------------------------------------------------- */

@keyframes vv-flicker {
	0%, 100%   { opacity: 1;    filter: brightness(1); }
	8%         { opacity: 0.94; filter: brightness(0.92); }
	14%        { opacity: 1;    filter: brightness(1); }
	48%        { opacity: 0.97; filter: brightness(0.96); }
	52%        { opacity: 1;    filter: brightness(1); }
	60%        { opacity: 0.92; filter: brightness(0.88); }
	64%        { opacity: 1;    filter: brightness(1); }
}

.vv-flicker {
	animation: vv-flicker 6s var(--vv-ease-candlelight) infinite;
}


/* -----------------------------------------------------------------
 * 2. EMBER GLOW — pulsing gold halo
 * Used behind hero focal points and CTAs.
 * --------------------------------------------------------------- */

@keyframes vv-ember-pulse {
	0%, 100% { transform: scale(1);   opacity: 0.6; }
	50%      { transform: scale(1.15); opacity: 0.9; }
}

.vv-ember-glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(circle at center, var(--vv-gold-glow) 0%, transparent 60%);
	animation: vv-ember-pulse 4s var(--vv-ease-candlelight) infinite;
}


/* -----------------------------------------------------------------
 * 3. GOLD TEXT — gradient-filled type, used on italic accent words
 * --------------------------------------------------------------- */

.vv-gold-text {
	background: var(--vv-grad-gold);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	display: inline-block;
}


/* -----------------------------------------------------------------
 * 4. SCORCH — the brand's signature reveal
 *
 * Letters arrive one at a time. Each char fades from char-warm
 * through gold to bone, with a brief glow as it lands. Mimics the
 * way fire writes itself onto wood — adapted for spirits as "ink
 * absorbing into paper."
 * --------------------------------------------------------------- */

.vv-scorch .vv-char {
	display: inline-block;
	opacity: 0;
	transform: translateY(0.4em);
	color: inherit;
	transition:
		opacity var(--vv-dur-slow) var(--vv-ease-out-expo),
		transform var(--vv-dur-slow) var(--vv-ease-out-expo),
		text-shadow var(--vv-dur-slow) var(--vv-ease-out-expo);
	transition-delay: calc(var(--vv-i, 0) * 22ms);
}

.vv-scorch.is-visible .vv-char {
	opacity: 1;
	transform: translateY(0);
}

/* As they land — a quiet gold halo behind each char */
.vv-scorch.is-visible .vv-char {
	animation: vv-char-land 1200ms var(--vv-ease-out-expo);
	animation-delay: calc(var(--vv-i, 0) * 22ms);
	animation-fill-mode: backwards;
}

@keyframes vv-char-land {
	0%   { text-shadow: 0 0 0 transparent; }
	30%  { text-shadow: 0 0 14px var(--vv-gold-glow); }
	100% { text-shadow: 0 0 0 transparent; }
}

.vv-word { display: inline-block; }
.vv-word-space { display: inline-block; }


/* -----------------------------------------------------------------
 * 5. FADE-IN — for non-headline elements
 * Triggered when .is-visible is added by the IntersectionObserver
 * in scroll-fx.js.
 * --------------------------------------------------------------- */

.vv-fade-in {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity var(--vv-dur-slow) var(--vv-ease-out-expo),
		transform var(--vv-dur-slow) var(--vv-ease-out-expo);
}

.vv-fade-in.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.vv-fade-in--delay-1 { transition-delay: 150ms; }
.vv-fade-in--delay-2 { transition-delay: 300ms; }
.vv-fade-in--delay-3 { transition-delay: 450ms; }
.vv-fade-in--delay-4 { transition-delay: 600ms; }

.vv-fade-up { transform: translateY(40px); }
.vv-fade-up.is-visible { transform: translateY(0); }

.vv-fade-from-left  { transform: translateX(-40px); }
.vv-fade-from-right { transform: translateX(40px); }
.vv-fade-from-left.is-visible,
.vv-fade-from-right.is-visible { transform: translateX(0); }


/* -----------------------------------------------------------------
 * 6. GOLD-FADE — italic accent words on headlines
 * Fades in as a single piece after surrounding chars land.
 * --------------------------------------------------------------- */

.vv-gold-fade {
	opacity: 0;
	filter: blur(4px);
	transition:
		opacity 800ms var(--vv-ease-out-expo) 600ms,
		filter 800ms var(--vv-ease-out-expo) 600ms;
}

.vv-scorch.is-visible .vv-gold-fade {
	opacity: 1;
	filter: blur(0);
}


/* -----------------------------------------------------------------
 * 7. MARIGOLD PAGE-WIPE TRANSITION (~500ms)
 * On internal nav clicks, a soft marigold wipe sweeps across the
 * screen. Triggered by ink-transitions.js via #vv-ink. Plum ground
 * with a marigold seam — a cinematic, never busy, hand-off.
 * --------------------------------------------------------------- */

#vv-ink,
.vv-wipe {
	position: fixed;
	inset: 0;
	z-index: var(--vv-z-loader);
	pointer-events: none;
	background: var(--vv-plum);
	transform: translate3d(0, -100%, 0);
	transition: transform var(--vv-dur-wipe) cubic-bezier(0.83, 0, 0.17, 1);
	will-change: transform;
	overflow: hidden;
}

#vv-ink::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 60% 45% at 50% 42%, var(--vv-plum) 0%, transparent 66%),
		radial-gradient(ellipse 36% 22% at 50% 50%, var(--vv-marigold-tint-12) 0%, transparent 55%),
		linear-gradient(180deg, transparent 0%, var(--vv-ink) 100%);
	opacity: 0.96;
}

#vv-ink::after {
	content: "";
	position: absolute;
	left: 0; right: 0;
	top: 50%;
	height: 2px;
	transform: translateY(-50%);
	background: linear-gradient(to right, transparent, var(--vv-brass), transparent);  /* Rev4 — desaturated seam (was bright marigold) */
	opacity: 0;
	transition: opacity 280ms ease-out 120ms;
}

#vv-ink.is-wiping-in {
	transform: translate3d(0, 0, 0);
}

#vv-ink.is-wiping-in::after {
	opacity: 1;
}

#vv-ink.is-wiping-out {
	transform: translate3d(0, 100%, 0);
	transition-duration: var(--vv-dur-wipe);
	transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}


/* -----------------------------------------------------------------
 * 8. LOADING MARK — slow-rotating marigold flower (replaces spinners)
 * --------------------------------------------------------------- */

@keyframes vv-spin {
	to { transform: rotate(360deg); }
}

.vv-spinner,
.vv-loader-mark {
	display: inline-block;
	width: 32px;
	height: 32px;
	color: var(--vv-brass);  /* Rev4 — desaturated loader mark */
	animation: vv-spin 2400ms linear infinite;
}

.vv-spinner svg,
.vv-loader-mark svg { display: block; }


/* -----------------------------------------------------------------
 * 12. PARALLAX
 * Light parallax on hero images. Modifies transform via runtime
 * --vv-scroll-progress variable.
 * --------------------------------------------------------------- */

.vv-parallax {
	will-change: transform;
	transform: translate3d(0, calc(var(--vv-scroll-progress, 0) * -40px), 0);
}

.vv-parallax--slow {
	transform: translate3d(0, calc(var(--vv-scroll-progress, 0) * -20px), 0);
}

.vv-parallax--fast {
	transform: translate3d(0, calc(var(--vv-scroll-progress, 0) * -80px), 0);
}


/* -----------------------------------------------------------------
 * 13. PRINT — strip all motion
 * --------------------------------------------------------------- */

@media print {
	.vv-fade-in,
	.vv-scorch .vv-char,
	.vv-gold-fade,
	.vv-flicker,
	.vv-ember-glow {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		filter: none !important;
	}
}


/* -----------------------------------------------------------------
 * 14. REDUCED MOTION FINAL OVERRIDE
 * --------------------------------------------------------------- */

@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;
	}
	.vv-scorch .vv-char,
	.vv-fade-in,
	.vv-gold-fade {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}
}

/* =================================================================
 * MOTION SYSTEM (Rev3 base, Rev4 restraint)
 * Slow and rare, like a fragrance film. Rev4 retired the live cursor and
 * thinned the petal drift to a sparse, slow, monochrome few; what remains is
 * ambient drift, the desaturated loader, and the brass/ink page-wipe.
 * Everything here has a full prefers-reduced-motion fallback (bottom of file).
 * ================================================================= */

/* ---- Scroll-triggered reveals --------------------------------- */
.reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 720ms var(--ease-warm), transform 720ms var(--ease-warm);
	will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 90ms; }
.reveal.d2 { transition-delay: 180ms; }
.reveal.d3 { transition-delay: 270ms; }

/* Rev5 / Phase A — directional + scale reveal variants (set by scroll-fx) */
.reveal--left  { transform: translateX(-28px); }
.reveal--right { transform: translateX(28px); }
.reveal--scale { transform: scale(0.96); }
.reveal--left.in, .reveal--right.in, .reveal--scale.in { transform: none; }

/* Rev5 push — editorial image-reveal mask (set by scroll-fx on feature media /
   portraits). A bottom-up clip-path wipe with a slow inner scale settle —
   fashion-film, not web. clip-path + transform are compositor-only and never
   shift layout (CLS-safe). The figure must clip its overflow. */
.reveal--img {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1100ms var(--ease-warm);
	will-change: clip-path;
	overflow: hidden;
}
.reveal--img.in { clip-path: inset(0 0 0 0); }
.reveal--img img { transform: scale(1.07); transition: transform 1500ms var(--ease-warm); will-change: transform; }
.reveal--img.in img { transform: scale(1); }

/* Rev5 push — pointer-following light on dark-ground product/editorial imagery.
   The native cursor is untouched; this is a soft highlight on the image only.
   soft-light keeps it a whisper, not a flashlight. JS adds .vv-spotlight + sets
   --vv-sx/--vv-sy; .is-lit fades it in on hover. */
.vv-spotlight { position: relative; }
.vv-spotlight::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
	background: radial-gradient(circle at var(--vv-sx, 50%) var(--vv-sy, 50%), rgba(246,239,226,0.16), rgba(246,239,226,0) 46%);
	opacity: 0; transition: opacity 500ms var(--ease-warm); mix-blend-mode: soft-light;
}
.vv-spotlight.is-lit::after { opacity: 1; }

/* Rev5 / Phase A — kinetic display-headline reveal (word masks, kinetic-text.js).
   Words slide up from behind an overflow-hidden mask with a per-word stagger. */
.vv-kh { }
.vv-kh__w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	/* pad the mask so descenders (g, y, p) aren't clipped */
	padding-bottom: 0.12em;
	margin-bottom: -0.12em;
}
.vv-kh__i {
	display: inline-block;
	transform: translateY(110%);
	opacity: 0;
	/* Rev5 Phase A (tuned) — slower, graceful rise; opacity leads the slide */
	transition: transform 880ms var(--ease-warm), opacity 560ms var(--ease-warm);
	will-change: transform;
}
.vv-kh.is-revealed .vv-kh__i { transform: translateY(0); opacity: 1; }

/* ---- Drifting marigold petals (canvas, behind content) -------- */
.vv-petals {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
	display: block;
}
.vv-petals-host { position: relative; }
.vv-petals-host > *:not(.vv-petals) { position: relative; z-index: 1; }

/* ---- Live marigold cursor: RETIRED in Rev4. The novelty cursor was cut
   entirely and the native system cursor restored; cursor.js is dequeued and
   the #vv-cursor markup removed from header.php. (Nothing here on purpose.) */

/* ---- The Evening Line — signature time-keeper (Rev6) ----------
 * A 1px brass hairline across the very top bearing five hour ticks and a
 * slow scroll-tracking fill. Upgrades the old scroll-progress bar (the
 * #vv-progress id is retained for JS + back-compat). Hour identity is
 * carried here by light — never by color washes. Decorative (aria-hidden).
 * Reduced-motion keeps the static hairline + ticks; only the fill stills. */
#vv-progress.vv-evening {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 1px;
	background: var(--vv-brass-tint-30);   /* faint, unlit hairline */
	z-index: var(--vv-z-toast);            /* sits above the nav */
	pointer-events: none;
	transform: none;                        /* the container no longer scales */
}
.admin-bar #vv-progress.vv-evening { top: 32px; }   /* clear the WP admin bar */
@media screen and (max-width: 782px) {
	.admin-bar #vv-progress.vv-evening { top: 46px; }
}
.vv-evening__fill {
	position: absolute; left: 0; top: 0;
	height: 1px; width: 100%;
	background: var(--vv-brass);            /* the lit portion */
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 120ms linear;
	will-change: transform;
}
.vv-evening__ticks { position: absolute; inset: 0; }
.vv-evening__tick {
	position: absolute; top: 50%;
	width: 6px; height: 6px;
	margin: -3px 0 0 -3px;
	background: var(--vv-brass-tint-30);
	transform: rotate(45deg);               /* small diamond glyph */
}
.vv-evening__tick:nth-child(1) { left: 10%; }
.vv-evening__tick:nth-child(2) { left: 30%; }
.vv-evening__tick:nth-child(3) { left: 50%; }
.vv-evening__tick:nth-child(4) { left: 70%; }
.vv-evening__tick:nth-child(5) { left: 90%; }
/* the page's own hour glows brass-bright (body carries vv-hour-{slug}) */
body.vv-hour-golden-hour  .vv-evening__tick[data-hour="golden-hour"],
body.vv-hour-dusk         .vv-evening__tick[data-hour="dusk"],
body.vv-hour-candlelight  .vv-evening__tick[data-hour="candlelight"],
body.vv-hour-string-light .vv-evening__tick[data-hour="string-light"],
body.vv-hour-after-dark   .vv-evening__tick[data-hour="after-dark"] {
	background: var(--vv-brass-bright);
	box-shadow: 0 0 6px var(--vv-brass-glow);
}
.vv-evening__label {
	position: absolute; right: 16px; top: 8px;
	font-family: var(--vv-font-ui);
	font-size: 10px; line-height: 1;
	letter-spacing: 0.4em; text-transform: uppercase;
	color: var(--vv-brass);
	white-space: nowrap;
	opacity: 0;
	transition: opacity 200ms var(--vv-ease-out-expo);
}
.vv-evening__label.is-shown { opacity: 0.9; }
@media (max-width: 499px) { .vv-evening__label { display: none; } }

/* ---- Cinematic hero choreography (kicker→wordmark→tagline→seal) */
.vv-hero-choreo .vv-home-hero__eyebrow,
.vv-hero-choreo .vv-home-hero__headline,
.vv-hero-choreo .vv-home-hero__sub,
.vv-hero-choreo .vv-home-hero__cta {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 760ms var(--ease-warm), transform 760ms var(--ease-warm);
}
/* LCP-safe: the bottle is the largest contentful paint — JS must NEVER hide it.
   It paints at first paint and only settles in scale (opacity stays 1), so LCP
   fires immediately and there is no blank-hero flash if the reveal is slow. */
.vv-hero-choreo .vv-home-hero__media { opacity: 1; transform: scale(1.035); transition: transform 950ms var(--ease-warm); }
.vv-hero-choreo.is-lit .vv-home-hero__eyebrow  { opacity: 1; transform: none; transition-delay: 120ms; }
.vv-hero-choreo.is-lit .vv-home-hero__headline { opacity: 1; transform: none; transition-delay: 320ms; }
.vv-hero-choreo.is-lit .vv-home-hero__sub      { opacity: 1; transform: none; transition-delay: 560ms; }
.vv-hero-choreo.is-lit .vv-home-hero__cta      { opacity: 1; transform: none; transition-delay: 760ms; }
.vv-hero-choreo.is-lit .vv-home-hero__media    { transform: none; }
/* plum glow breathes up under the bottle */
/* Rev4 — breathe restrained: dimmer, smaller travel; reads as deep pooled light, not an even pulse */
@keyframes vv-glow-breathe { 0%,100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.035); opacity: .66; } }
.vv-hero-choreo .vv-home-hero__glow { animation: vv-glow-breathe 6s var(--vv-ease-candlelight) infinite; }

/* ---- Cocktail card hover — Rev5: deep neutral shadow + a thin family ring
   (1px hairline). The saturated colored glow halo is removed (color is a
   thread, not a field). */
.vv-cocktail-card { transition: transform var(--vv-dur-base) var(--ease-warm), box-shadow var(--vv-dur-base) var(--ease-warm); }
.vv-cocktail-card:hover { box-shadow: 0 16px 40px rgba(21,16,14,0.6), 0 0 0 1px color-mix(in srgb, var(--vv-card-accent) 45%, transparent); }
/* family-header underline sweep on scroll-in (FLIP filter assist) */
.vv-cocktails__grid.is-reflowing .vv-cocktail-card { transition: transform 460ms var(--ease-warm); }

/* ---- Loading mark — slow-rotating marigold flower ------------- */
.vv-loader {
	display: inline-block;
	width: 36px; height: 36px;
	color: var(--vv-brass);  /* Rev4 — desaturated loader mark */
	animation: vv-spin 2400ms linear infinite;
}
.vv-loader svg { display: block; width: 100%; height: 100%; }

/* ---- Tactile hovers (lift + zoom) ----------------------------- */
.vv-bottle-card, .vv-serve-card, .vv-story-card, .vv-home-bottle, .vv-home-family {
	transition: transform var(--vv-dur-base) var(--ease-warm), box-shadow var(--vv-dur-base) var(--ease-warm);
}

/* =================================================================
 * REV3 — REDUCED-MOTION CONTRACT (mandatory; mirrored in JS)
 * ================================================================= */
@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	.reveal--img { clip-path: none !important; transition: none !important; }
	.reveal--img img { transform: none !important; transition: none !important; }
	.vv-spotlight::after { display: none !important; }
	/* Rev5 / Phase A — kinetic headlines resolve to plain static text */
	.vv-kh__i { transform: none !important; opacity: 1 !important; transition: none !important; }
	.vv-petals, .petals { display: none !important; }
	/* Evening Line stays (static hairline + ticks); only the fill stills. */
	.vv-evening__fill { transition: none !important; }
	.vv-evening__label { transition: none !important; }
	.vv-hero-choreo .vv-home-hero__eyebrow,
	.vv-hero-choreo .vv-home-hero__headline,
	.vv-hero-choreo .vv-home-hero__sub,
	.vv-hero-choreo .vv-home-hero__cta,
	.vv-hero-choreo .vv-home-hero__media {
		opacity: 1 !important; transform: none !important; transition: none !important;
	}
	.vv-hero-choreo .vv-home-hero__glow { animation: none !important; }
}