/* ==========================================================================
   BAC-VIAL signature motion system
   Calm → one impressive moment → calm. Transform/opacity only; scroll-linked
   effects use CSS scroll timelines (no scroll-jacking, no JS per frame).
   All of it is removed for prefers-reduced-motion (see end of file).

   Modes (set on <html> by an inline head script on the homepage):
     .bv-intro   first homepage visit in this browser session (~2s entrance)
     .bv-return  later visits in the session (fast reveal)
   ========================================================================== */

:root {
	--t-intro: 1.3s;   /* when hero type starts in the cinematic entrance */
	--t-return: 0.1s;
}

/* ---------- Ambient light layers (hero + configurator stage) ---------- */
.bv-glow { position: absolute; z-index: -1; pointer-events: none; }
.bv-glow > span { position: absolute; inset: 0; border-radius: 50%; }
.bv-glow--far {
	inset: -4% -42% 0;
	translate: calc(var(--px, 0) * 14px) calc(var(--py, 0) * 10px);
}
.bv-glow--far > span {
	background: radial-gradient(closest-side, rgba(184, 44, 255, 0.24), rgba(184, 44, 255, 0.08) 55%, transparent 100%);
}
.bv-glow--near {
	inset: 18% -6% 14%;
	translate: calc(var(--px, 0) * -6px) calc(var(--py, 0) * -4px);
}
.bv-glow--near > span {
	background: radial-gradient(closest-side, rgba(38, 92, 255, 0.36), rgba(38, 92, 255, 0.1) 60%, transparent 100%);
}
.bv-stage--hero .bv-stage__floor { translate: calc(var(--px, 0) * 8px) 0; }

/* The vial itself moves only a few pixels (depth, not chasing). */
.bv-stage__float { translate: calc(var(--px, 0) * -4px) calc(var(--py, 0) * -3px); }
.bv-hero__haze { translate: calc(var(--px, 0) * 10px) calc(var(--py, 0) * 6px); }

@media (prefers-reduced-motion: no-preference) {
	/* Slow "studio light breathing" — long, eased, non-obvious loops. */
	.js .bv-glow--far > span { animation: bv-breathe-far 19s ease-in-out infinite alternate; }
	.js .bv-glow--near > span { animation: bv-breathe-near 11s ease-in-out infinite alternate; }
	.js .bv-stage__float { animation: bv-float 9s ease-in-out infinite; }
	.bv-hero.is-offscreen .bv-glow > span,
	.bv-hero.is-offscreen .bv-stage__float,
	.bv-hero.is-offscreen .bv-hero__scroll-line::after { animation-play-state: paused; }
}
@keyframes bv-breathe-far {
	0% { transform: translate3d(-3%, 1.5%, 0) scale(1); opacity: 0.85; }
	100% { transform: translate3d(3%, -2%, 0) scale(1.07); opacity: 1; }
}
@keyframes bv-breathe-near {
	0% { transform: scale(0.96); opacity: 0.8; }
	100% { transform: scale(1.04); opacity: 1; }
}
@keyframes bv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* Touch devices: no pointer depth; ambient reduced to slow opacity breathing. */
@media (hover: none), (pointer: coarse) {
	.js .bv-glow--far > span { animation: bv-breathe-soft 14s ease-in-out infinite alternate; }
	.js .bv-glow--near > span { animation: none; }
	.bv-hero__light { display: none; }
}
@keyframes bv-breathe-soft { from { opacity: 0.75; } to { opacity: 1; } }

/* ---------- Cinematic entrance ---------- */
.bv-intro-veil { display: none; }
.bv-intro .bv-intro-veil {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 120;
	background: var(--bg);
	pointer-events: none;   /* never blocks the page */
	animation: bv-veil-out 0.55s var(--ease) 0.85s forwards;
}
.bv-intro-veil__line {
	position: absolute;
	top: 50%;
	left: 0;
	width: 46vw;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(192, 58, 255, 0.15) 30%, #d26bff 82%, #fff 100%);
	box-shadow: 0 0 14px 1px rgba(184, 44, 255, 0.55);
	transform-origin: right center;
	opacity: 0;
	animation: bv-sweep 1.05s cubic-bezier(0.65, 0, 0.25, 1) 0.05s forwards;
}
.bv-intro-veil__mark {
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% calc(-50% - 36px);
	opacity: 0;
	animation: bv-mark 0.85s var(--ease) 0.12s forwards;
}
.bv-intro-veil__mark img { height: 34px; width: auto; }

@keyframes bv-veil-out { to { opacity: 0; visibility: hidden; } }
@keyframes bv-sweep {
	0% { transform: translateX(-50vw) scaleX(0.2); opacity: 0; }
	15% { opacity: 1; }
	70% { transform: translateX(38vw) scaleX(1); opacity: 1; }
	100% { transform: translateX(46vw) scaleX(0.05); opacity: 0; }  /* collapses toward the product */
}
@keyframes bv-mark {
	0% { opacity: 0; transform: scale(0.985); }
	40% { opacity: 1; transform: none; }
	75% { opacity: 1; }
	100% { opacity: 0; }
}

/* Hero element timeline. --d is the element's order index. */
.bv-intro .bv-header { animation: bv-fade 0.8s var(--ease) 1.2s both; }
.bv-intro .bv-stage--hero { animation: bv-emerge 1.4s var(--ease-out) 0.75s both; }
.bv-intro .bv-glow--near { opacity: 0; animation: bv-fade 1.2s var(--ease) 0.95s forwards; }
.bv-intro .bv-glow--far { opacity: 0; animation: bv-fade 1.6s var(--ease) 1.15s forwards; }
.bv-intro .bv-hero__light { opacity: 0; animation: bv-fade 1.6s var(--ease) 1.4s forwards; }
.bv-intro .bv-hero .bv-line__inner { animation: bv-line-up 1s var(--ease-out) both; animation-delay: calc(1.05s + var(--i, 0) * 0.16s); }
.bv-intro .bv-hero .bv-anim { animation: bv-fade-up 0.8s var(--ease-out) both; animation-delay: calc(var(--t-intro) + var(--d, 0) * 0.1s); }
.bv-intro .bv-hero .bv-hero__eyebrow { animation-delay: 0.95s; }

.bv-return .bv-stage--hero { animation: bv-emerge 0.9s var(--ease-out) 0.05s both; }
.bv-return .bv-hero .bv-line__inner { animation: bv-line-up 0.8s var(--ease-out) both; animation-delay: calc(var(--t-return) + var(--i, 0) * 0.08s); }
.bv-return .bv-hero .bv-anim { animation: bv-fade-up 0.6s var(--ease-out) both; animation-delay: calc(0.25s + var(--d, 0) * 0.06s); }

@keyframes bv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bv-line-up { from { transform: translateY(105%); } to { transform: none; } }
@keyframes bv-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes bv-emerge {
	from { opacity: 0; transform: translateY(26px) scale(0.965); }
	to { opacity: 1; transform: none; }
}

/* Scroll cue: a thin light travelling down a hairline. */
.bv-hero__scroll-line {
	position: relative;
	display: block;
	width: 1px;
	height: 44px;
	overflow: hidden;
	background: linear-gradient(180deg, rgba(236, 240, 246, 0.18), rgba(236, 240, 246, 0.02));
}
.bv-hero__scroll-line::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 16px;
	background: linear-gradient(180deg, transparent, #d26bff);
	box-shadow: 0 0 8px rgba(184, 44, 255, 0.7);
	transform: translateY(-100%);
}
@media (prefers-reduced-motion: no-preference) {
	.js .bv-hero__scroll-line::after { animation: bv-drip 2.8s cubic-bezier(0.6, 0, 0.3, 1) 2.2s infinite; }
}
@keyframes bv-drip { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(300%); } }

/* ---------- Scroll-linked transitions (native scrolling, compositor-driven) ---------- */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		/* Hero hands off to the configurator: type lifts away, vial recedes. */
		.bv-hero__copy { animation: bv-hero-copy-out linear both; animation-timeline: view(); animation-range: exit 0% exit 70%; }
		.bv-hero__stage { animation: bv-hero-stage-out linear both; animation-timeline: view(); animation-range: exit 0% exit 90%; }
		/* Product grows into place in the configurator. */
		.bv-config-section--home .bv-config-media .bv-stage { animation: bv-product-in linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
		/* Section ambient light evolves as each section arrives. */
		.bv-coa-section::before, .bv-final__glow { animation: bv-ambient-in linear both; animation-timeline: view(); animation-range: entry 10% cover 50%; }
	}
	@keyframes bv-hero-copy-out { to { transform: translateY(-60px); opacity: 0.15; } }
	@keyframes bv-hero-stage-out { to { transform: translateY(-4%) scale(0.94); opacity: 0.4; } }
	@keyframes bv-product-in { from { transform: translateY(40px) scale(0.92); } to { transform: none; } }
	@keyframes bv-ambient-in { from { opacity: 0; } to { opacity: 1; } }
}

/* ---------- Reveal variants ---------- */
/* Clip reveal for glass surfaces (cards). */
.js [data-reveal="clip"] {
	opacity: 1;
	transform: translateY(24px);
	clip-path: inset(18% 0 0 0 round var(--radius));
	transition: clip-path 1.1s var(--ease-out), transform 1.1s var(--ease-out);
	transition-delay: var(--rd, 0s);
}
.js [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0 round var(--radius)); transform: none; }

/* ---------- Light path motif ---------- */
/* A thin violet line that draws itself between moments (used sparingly). */
.bv-lightpath {
	position: relative;
	display: block;
	width: 1px;
	height: clamp(64px, 9vw, 120px);
	margin: 0 auto;
	overflow: hidden;
	pointer-events: none;
}
.bv-lightpath::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent, rgba(192, 58, 255, 0.55) 60%, rgba(77, 127, 255, 0.4));
	transform-origin: top;
	transform: scaleY(0);
	transition: transform 1.2s var(--ease-out);
}
.bv-lightpath::after {
	content: "";
	position: absolute;
	left: -2px;
	width: 5px;
	height: 18px;
	top: 0;
	border-radius: 4px;
	background: radial-gradient(closest-side, #fff, rgba(210, 107, 255, 0.8), transparent);
	opacity: 0;
	transform: translateY(-20px);
}
.bv-lightpath.is-in::before { transform: scaleY(1); }
.bv-lightpath.is-in::after { animation: bv-glint 1.4s var(--ease-out) 0.2s 1 both; }
@keyframes bv-glint { 0% { opacity: 0; transform: translateY(-20px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--lp-h, 120px)); } }
.no-js .bv-lightpath::before { transform: none; }

/* COA card: the light traces the document edge as it enters, then settles. */
.bv-coa__trace { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.bv-coa__trace rect {
	x: 0.5px;
	y: 0.5px;
	width: calc(100% - 1px);
	height: calc(100% - 1px);
	rx: 19.5px;
	fill: none;
	stroke: #c03aff;
	stroke-width: 1.2;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	opacity: 0;
	filter: drop-shadow(0 0 4px rgba(184, 44, 255, 0.8));
}
.is-in .bv-coa__trace rect { animation: bv-trace 2.2s var(--ease) 0.25s forwards; }
@keyframes bv-trace {
	0% { stroke-dashoffset: 1; opacity: 1; }
	65% { stroke-dashoffset: 0; opacity: 1; }
	100% { stroke-dashoffset: 0; opacity: 0.18; }
}
/* Card content builds in after the trace starts. */
.js .bv-coa-list[data-reveal] .bv-coa > :not(.bv-coa__trace, .bv-coa__sheen, dialog) {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.7s var(--ease-out), transform 0.8s var(--ease-out);
}
.js .bv-coa-list.is-in .bv-coa > :not(.bv-coa__trace, .bv-coa__sheen, dialog) { opacity: 1; transform: none; }
.js .bv-coa-list.is-in .bv-coa > :nth-child(3) { transition-delay: 0.45s; }
.js .bv-coa-list.is-in .bv-coa > :nth-child(4) { transition-delay: 0.6s; }
.js .bv-coa-list.is-in .bv-coa > :nth-child(5) { transition-delay: 0.75s; }
.js .bv-coa-list.is-in .bv-coa > :nth-child(n+6) { transition-delay: 0.9s; }
.bv-coa__scope { font-size: var(--fs-small); color: var(--text-2); margin-bottom: 8px; }

/* ---------- Interactive glass lighting (selected surfaces only) ---------- */
[data-glow="soft"] { position: relative; isolation: isolate; }
[data-glow="soft"]::before {
	inset: -40px;
	background: radial-gradient(420px circle at var(--gx) var(--gy), rgba(184, 44, 255, 0.07), transparent 65%);
	filter: blur(8px);
}
[data-glow="soft"]::after { display: none; }

/* ---------- Buttons: inner light + tactile press ---------- */
.bv-btn { overflow: hidden; isolation: isolate; }
.bv-btn--primary::before, .bv-btn--light::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: radial-gradient(120px circle at var(--bx, 50%) var(--by, 50%), rgba(255, 255, 255, 0.22), transparent 70%);
	opacity: 0;
	transition: opacity 0.3s;
}
.bv-btn--light::before { background: radial-gradient(120px circle at var(--bx, 50%) var(--by, 50%), rgba(184, 44, 255, 0.16), transparent 70%); }
.bv-btn:hover::before { opacity: 1; }
.bv-btn:active:not([disabled]) { scale: 0.975; }

/* ---------- Branded loader (only for real waits; appears after 250ms) ---------- */
.bv-loader { display: inline-grid; place-items: center; opacity: 0; animation: bv-fade 0.25s var(--ease) 0.25s forwards; }
.bv-loader svg { width: var(--loader-size, 44px); height: var(--loader-size, 44px); overflow: visible; }
.bv-loader__track { fill: none; stroke: rgba(236, 240, 246, 0.08); stroke-width: 1.2; }
.bv-loader__trace {
	fill: none;
	stroke: #c03aff;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-dasharray: 22 78;
	filter: drop-shadow(0 0 3px rgba(184, 44, 255, 0.9));
	transform-origin: center;
	animation: bv-loader-spin 1.15s linear infinite;
}
.bv-loader__drop { fill: var(--blue); }
.bv-loader__drop-hi { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.2; stroke-linecap: round; }
@keyframes bv-loader-spin { to { transform: rotate(360deg); } }

/* Uses: drawer, document viewer, add-to-cart button, WooCommerce blocks. */
.bv-drawer__loading { position: absolute; inset: 72px 0 auto; display: none; justify-content: center; padding-top: 48px; pointer-events: none; }
.bv-drawer__body[aria-busy="true"] .bv-drawer__loading { display: flex; }
.bv-drawer__body { position: relative; }
.bv-doc__body { position: relative; }
.bv-doc__body > .bv-loader { position: absolute; inset: 0; z-index: 0; }
.bv-doc__body > object, .bv-doc__body > img { position: relative; z-index: 1; }
.bv-atc .bv-loader { display: none; }
.bv-atc.is-loading .bv-loader { display: inline-grid; }
.bv-atc .bv-loader { --loader-size: 22px; position: absolute; right: 18px; top: 50%; translate: 0 -50%; }
.bv-atc .bv-loader__track { stroke: rgba(255, 255, 255, 0.2); }
.bv-atc .bv-loader__trace { stroke: #fff; filter: none; }
.bv-atc .bv-loader__drop { fill: rgba(255, 255, 255, 0.9); }
.wc-block-components-spinner::after {
	border-width: 1.5px !important;
	border-color: #c03aff rgba(192, 58, 255, 0.12) rgba(192, 58, 255, 0.12) rgba(192, 58, 255, 0.12) !important;
	filter: drop-shadow(0 0 3px rgba(184, 44, 255, 0.7));
}

/* ---------- Add to cart micro-interaction ---------- */
.bv-atc::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.35) 48%, rgba(210, 107, 255, 0.35) 52%, transparent 70%);
	transform: translateX(-110%);
	pointer-events: none;
}
.bv-atc.is-success::after { animation: bv-sweep-btn 0.8s var(--ease-out); }
@keyframes bv-sweep-btn { to { transform: translateX(110%); } }
.bv-atc__done { display: none; align-items: center; gap: 8px; }
.bv-atc.is-success .bv-atc__done { display: inline-flex; animation: bv-fade-up 0.35s var(--ease-out); }
.bv-atc.is-success .bv-atc__label, .bv-atc.is-success .bv-atc__sep, .bv-atc.is-success .bv-atc__price { display: none; }

/* ---------- Configurator transitions ---------- */
.bv-seg { position: relative; }
.bv-seg__thumb {
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 0;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(40, 90, 240, 0.9), var(--blue));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 6px 24px -8px var(--blue-glow);
	opacity: 0;
	transition: transform 0.5s var(--ease-out), width 0.5s var(--ease-out), opacity 0.2s;
	pointer-events: none;
}
.bv-seg.has-thumb .bv-seg__thumb { opacity: 1; }
.bv-seg.has-thumb .bv-seg__opt input:checked + .bv-seg__text { background: none; box-shadow: none; }
.bv-seg__opt { z-index: 1; }

.bv-config__summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 0 16px;
	margin-bottom: 4px;
	border-top: 1px solid var(--line);
}
.bv-config__sel { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
.bv-config__price { font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem); font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.bv-swap { display: inline-block; }
.bv-swap.is-swapping { animation: bv-swap-in 0.42s var(--ease-out); }
@keyframes bv-swap-in {
	from { opacity: 0; transform: translateY(0.45em); clip-path: inset(0 0 100% 0); }
	to { opacity: 1; transform: none; clip-path: inset(0); }
}
/* The product photo "re-lights" when the configuration changes. */
.bv-stage--config.is-relit .bv-stage__glow { animation: bv-relight 0.9s var(--ease-out); }
.bv-stage--config.is-relit .bv-stage__photo { animation: bv-settle 0.7s var(--ease-out); }
@keyframes bv-relight { 0%, 100% { transform: none; } 35% { transform: scale(1.08); filter: blur(18px) brightness(1.5); } }
@keyframes bv-settle { 0% { transform: none; } 40% { transform: scale(0.985); } 100% { transform: none; } }

/* ---------- Cart drawer refinements ---------- */
.bv-cart-item { animation: none; }
.bv-drawer.is-entering .bv-cart-item { animation: bv-fade-up 0.5s var(--ease-out) both; animation-delay: calc(0.12s + var(--n, 0) * 0.05s); }
.bv-drawer { transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), overlay 0.55s allow-discrete, display 0.55s allow-discrete; }

/* ---------- Reduced motion: static, complete, still premium ---------- */
@media (prefers-reduced-motion: reduce) {
	.bv-intro-veil { display: none !important; }
	.bv-glow, .bv-stage__float, .bv-hero__haze, .bv-stage__floor { translate: none !important; }
	.js [data-reveal="clip"] { clip-path: none; transform: none; }
	.bv-lightpath::before { transform: none; }
	.bv-coa__trace { display: none; }
	.js .bv-coa-list[data-reveal] .bv-coa > * { opacity: 1 !important; transform: none !important; }
	.bv-btn { translate: none !important; }
	.bv-loader { opacity: 1; animation: none; }
	.bv-loader__trace { animation: none; }
}