/* ==========================================================================
   VOOOMIE Elite — Feature Slider Banner  ([vx_feature_slider])
   Typewriter captions written by a golden pen, over the VOOOMIE
   world-network image with a soft, continuous glow motion.

   Layer order (bottom → top), all inside one isolated stacking context:
     media (image, slow drift)  →  scrim (text-visibility overlay)  →
     glowfx (blurred "bloom" copies of the image + light orbs + sweep,
             screen-blended so only the LIGHTS get brighter)  →
     stage (slides)  →  controls

   IMPORTANT: no ancestor of .vx-fs-logo may carry opacity / filter /
   will-change / z-index — the logo is screen-blended against the banner,
   and any of those would isolate it and reveal its black backdrop.
   ========================================================================== */

.vx-fs {
	--fs-ov: .55;      /* overlay strength — overridden inline from the Customizer */
	--fs-glow: .7;     /* glow strength    — overridden inline from the Customizer */
	--fs-pen-h: clamp(70px, 7vw, 112px);
	position: relative; isolation: isolate;
	/* `clip` (unlike `hidden`) can never be scrolled — not even by focusing or tapping a control —
	   so the oversized glow layers can't be nudged sideways to reveal an edge. */
	overflow: hidden; overflow: clip;
	height: clamp(540px, 76vh, 780px);
	background: #050403;
	color: var(--ink);
	font-family: var(--f-body);
}
/* Thin gold hairlines top & bottom — the same treatment cards use. */
.vx-fs::before, .vx-fs::after {
	content: ""; position: absolute; left: 0; right: 0; height: 1px; z-index: 5; pointer-events: none;
	background: linear-gradient(90deg, transparent, rgba(var(--pulse-rgb), .55), var(--gold-light), rgba(var(--pulse-rgb), .55), transparent);
}
.vx-fs::before { top: 0; }
.vx-fs::after  { bottom: 0; }

/* ---------------- Background + glow ---------------- */
.vx-fs-media, .vx-fs-glowfx, .vx-fs-scrim { position: absolute; inset: 0; pointer-events: none; }
.vx-fs-media { overflow: hidden; overflow: clip; animation: vx-fs-drift 44s ease-in-out infinite alternate; will-change: transform; }
.vx-fs-layer { position: absolute; inset: -4%; background: var(--fs-bg) center / cover no-repeat; }

.vx-fs-scrim {
	background:
		radial-gradient(ellipse 78% 88% at 50% 50%,
			rgba(5,4,3, calc(var(--fs-ov) * 1.45)) 0%,
			rgba(5,4,3, calc(var(--fs-ov) * .85)) 55%,
			rgba(5,4,3, calc(var(--fs-ov) * .45)) 100%),
		linear-gradient(180deg, rgba(10,9,8,.7) 0%, rgba(10,9,8,0) 22%, rgba(10,9,8,0) 70%, rgba(10,9,8,.88) 100%);
}

/* The glow group is screen-blended onto the banner: black in a layer adds
   nothing, so ONLY the bright nodes and lit continents brighten. Its mask
   eases the glow off behind the text so captions stay crisp. It shares the
   media layer's drift so the bloom stays pixel-aligned with the image. */
.vx-fs-glowfx {
	mix-blend-mode: screen; overflow: hidden; overflow: clip;
	animation: vx-fs-drift 44s ease-in-out infinite alternate; will-change: transform;
	-webkit-mask-image: radial-gradient(ellipse 52% 58% at 50% 50%, rgba(0,0,0,.18), #000 100%);
	        mask-image: radial-gradient(ellipse 52% 58% at 50% 50%, rgba(0,0,0,.18), #000 100%);
}
.vx-fs-layer--bloom { opacity: 0; will-change: opacity; }
.vx-fs-layer--bloom-a { filter: blur(7px)  brightness(1.45) contrast(1.25); animation: vx-fs-breathe 6.5s ease-in-out infinite; }
.vx-fs-layer--bloom-b { filter: blur(22px) brightness(1.7)  contrast(1.1);  animation: vx-fs-breathe 9.5s ease-in-out -4s infinite; }

.vx-fs-orb {
	position: absolute; border-radius: 50%; will-change: transform, opacity; filter: blur(6px);
	background: radial-gradient(closest-side, rgba(var(--pulse-rgb), calc(var(--fs-glow) * .2)), transparent 70%);
}
.vx-fs-orb--1 { width: 34vw; height: 34vw; left: 56%; top: 22%; animation: vx-fs-orb-a 11s ease-in-out infinite alternate; }
.vx-fs-orb--2 { width: 26vw; height: 26vw; left: 6%;  top: 46%; animation: vx-fs-orb-b 14s ease-in-out infinite alternate; }
.vx-fs-orb--3 { width: 30vw; height: 30vw; left: 76%; top: 50%; animation: vx-fs-orb-a 17s ease-in-out -6s infinite alternate-reverse; }
.vx-fs-sweep {
	position: absolute; inset: 0; will-change: transform; transform: translateX(-105%);
	background: linear-gradient(115deg, transparent 32%, rgba(255,222,140, calc(var(--fs-glow) * .06)) 43%, rgba(255,228,160, calc(var(--fs-glow) * .11)) 50%, rgba(255,222,140, calc(var(--fs-glow) * .06)) 57%, transparent 68%);
	animation: vx-fs-sweep 16s ease-in-out infinite;
}

@keyframes vx-fs-drift   { 0% { transform: scale(1.03) translate3d(0,0,0); } 100% { transform: scale(1.11) translate3d(-1.4%,-1.1%,0); } }
@keyframes vx-fs-breathe { 0%, 100% { opacity: calc(var(--fs-glow) * .05); } 50% { opacity: calc(var(--fs-glow) * .5); } }
@keyframes vx-fs-orb-a   { 0% { transform: translate3d(0,0,0) scale(.9); opacity: .35; } 100% { transform: translate3d(-6%,8%,0) scale(1.15); opacity: 1; } }
@keyframes vx-fs-orb-b   { 0% { transform: translate3d(0,0,0) scale(1); opacity: .9; }  100% { transform: translate3d(7%,-9%,0) scale(.85); opacity: .3; } }
@keyframes vx-fs-sweep   { 0% { transform: translateX(-105%); } 60%, 100% { transform: translateX(105%); } }

/* ---------------- Stage & slides ---------------- */
.vx-fs-stage { position: absolute; inset: 0; }
.vx-fs-slide {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
	padding: 76px var(--gutter) 92px; visibility: hidden; pointer-events: none;
}
.vx-fs-slide.is-active, .vx-fs-slide.is-leaving { visibility: visible; }
.vx-fs-slide.is-active { pointer-events: auto; }
.vx-fs-content { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 1040px; }

.vx-fs-eyebrow {
	display: inline-flex; align-items: center; gap: 14px;
	font-family: var(--f-mono); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--pulse);
	text-shadow: 0 1px 12px rgba(0,0,0,.9);
}
.vx-fs-eyebrow::before, .vx-fs-eyebrow::after { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--pulse)); }
.vx-fs-eyebrow::after { transform: scaleX(-1); }

/* ---------------- Typewriter caption ---------------- */
.vx-fs .vx-fs-caption {
	position: relative; margin: 20px 0 0; max-width: 15em;
	font-family: var(--f-display); font-weight: 800; font-size: clamp(32px, 5.4vw, 76px); line-height: 1.08; letter-spacing: -.02em;
	/* Reset the theme's global gradient-clipped h1/h2 — here the gradient lives on each letter instead. */
	background: none; -webkit-text-fill-color: currentColor; color: var(--ink);
	filter: drop-shadow(0 2px 18px rgba(0,0,0,.6));
	text-wrap: balance;
}
.vx-fs .vx-fs-caption--tagline { margin-top: 28px; font-size: clamp(24px, 3.4vw, 46px); font-weight: 700; max-width: 18em; }

.vx-fs-typed { color: var(--ink); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.vx-fs-typed:not(.is-split), .vx-fs-typed .c {
		background: linear-gradient(180deg, #FFF6D8 0%, #F0CE6A 40%, var(--pulse) 62%, #A9861F 100%);
		-webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
	}
}
.vx-fs-typed .w { display: inline-block; white-space: nowrap; }
.vx-fs-typed .c { visibility: hidden; }
.vx-fs-typed .c.on { visibility: visible; }

.vx-fs-sub { margin: 22px 0 0; max-width: 36em; font-size: clamp(15px, 1.5vw, 19px); line-height: 1.6; color: var(--ink-dim); text-shadow: 0 1px 14px rgba(0,0,0,.8); }
.vx-fs-btn { margin-top: 30px; }

/* ---------------- The golden pen ---------------- */
.vx-fs-pen {
	position: absolute; left: 0; top: 0; z-index: 2; width: calc(var(--fs-pen-h) / 3); height: var(--fs-pen-h);
	pointer-events: none; opacity: 0; will-change: transform;
	transition: opacity .35s ease, transform .09s linear;
}
.vx-fs-pen.is-on { opacity: 1; }
.vx-fs-pen.is-jump { transition: opacity .35s ease; }
.vx-fs-pen-i {
	position: absolute; inset: 0; transform-origin: 50% 100%; transform: rotate(34deg);
	filter: drop-shadow(0 6px 9px rgba(0,0,0,.55)) drop-shadow(0 0 9px rgba(var(--pulse-rgb), .4));
}
.vx-fs-pen svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Glowing ink at the nib */
.vx-fs-pen::after {
	content: ""; position: absolute; left: 50%; bottom: -8px; width: 38px; height: 38px; margin-left: -19px; opacity: 0;
	background: radial-gradient(closest-side, rgba(255,232,150,.95), rgba(212,175,55,.38) 45%, transparent 72%);
}
.vx-fs-pen.is-writing .vx-fs-pen-i { animation: vx-fs-write .3s ease-in-out infinite; }
.vx-fs-pen.is-idle .vx-fs-pen-i    { animation: vx-fs-float 3.6s ease-in-out infinite; }
.vx-fs-pen.is-writing::after       { animation: vx-fs-nib .5s ease-in-out infinite; }
.vx-fs-pen.is-idle::after          { animation: vx-fs-nib 2.2s ease-in-out infinite; }
@keyframes vx-fs-write { 0%, 100% { transform: rotate(34deg) translate(0,0); } 50% { transform: rotate(30deg) translate(-1px,-2px); } }
@keyframes vx-fs-float { 0%, 100% { transform: rotate(34deg) translate(0,0); } 50% { transform: rotate(39deg) translate(1px,-5px); } }
@keyframes vx-fs-nib   { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }

/* ---------------- Slide 4: logo ---------------- */
.vx-fs-logo-wrap { position: relative; height: clamp(190px, 38vh, 340px); aspect-ratio: 917 / 932; }
.vx-fs-logo-halo {
	position: absolute; inset: -32%; pointer-events: none;
	background: radial-gradient(closest-side, rgba(var(--pulse-rgb), .34), rgba(var(--pulse-rgb), .09) 55%, transparent 72%);
}
/* The logo file has a black backdrop; screen-blending the whole box makes
   the black vanish and leaves only the gold artwork glowing on the banner. */
.vx-fs-logo { position: absolute; inset: 0; background: #000; overflow: hidden; mix-blend-mode: screen; isolation: isolate; }
.vx-fs-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* A band of light crossing the logo. `overlay` leaves true black untouched, so the sheen only ever
   brightens the gold artwork (color-dodge was tried first: it blows faint red-channel noise up to 255). */
.vx-fs-logo-sheen {
	position: absolute; top: -10%; bottom: -10%; left: 0; width: 45%; mix-blend-mode: overlay; pointer-events: none;
	background: linear-gradient(105deg, transparent 15%, rgba(255,246,205,.95) 50%, transparent 85%);
	transform: translateX(-140%) skewX(-16deg);
}

/* ---------------- Motion states (only once JS is ready) ---------------- */
.vx-fs.is-ready .vx-fs-eyebrow { opacity: 0; transform: translateY(10px); }
.vx-fs.is-ready .is-active .vx-fs-eyebrow { opacity: 1; transform: none; transition: opacity .7s ease .1s, transform .7s var(--ease-out) .1s; }

.vx-fs.is-ready .vx-fs-sub, .vx-fs.is-ready .vx-fs-btn { opacity: 0; }
.vx-fs.is-ready .is-typed .vx-fs-sub { opacity: 1; animation: vx-fs-rise .8s var(--ease-out) backwards; }
.vx-fs.is-ready .is-typed .vx-fs-btn { opacity: 1; animation: vx-fs-rise .8s var(--ease-out) .18s backwards; }
@keyframes vx-fs-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

.vx-fs.is-ready .vx-fs-logo, .vx-fs.is-ready .vx-fs-logo-halo { opacity: 0; }
.vx-fs.is-ready .is-active .vx-fs-logo      { animation: vx-fs-logo-in 1.5s var(--ease-out) .1s both; }
.vx-fs.is-ready .is-active .vx-fs-logo-halo { animation: vx-fs-fade-in 1.6s ease .1s both, vx-fs-halo 5s ease-in-out 1.7s infinite; }
.vx-fs.is-ready .is-active .vx-fs-logo-sheen { animation: vx-fs-sheen 6.5s ease-in-out 1.5s infinite; }
@keyframes vx-fs-logo-in  { from { opacity: 0; transform: scale(.88); filter: blur(14px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes vx-fs-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes vx-fs-halo     { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes vx-fs-sheen    { 0% { transform: translateX(-140%) skewX(-16deg); } 35%, 100% { transform: translateX(340%) skewX(-16deg); } }

/* Leaving slide fades its own children (never the slide itself — see header note). */
.vx-fs-slide.is-leaving .vx-fs-eyebrow, .vx-fs-slide.is-leaving .vx-fs-caption, .vx-fs-slide.is-leaving .vx-fs-sub,
.vx-fs-slide.is-leaving .vx-fs-btn, .vx-fs-slide.is-leaving .vx-fs-logo, .vx-fs-slide.is-leaving .vx-fs-logo-halo {
	animation: vx-fs-out .45s ease forwards !important;
}
@keyframes vx-fs-out { from { opacity: 1; } to { opacity: 0; } }

/* ---------------- Controls ---------------- */
.vx-fs-controls { position: absolute; left: 0; right: 0; bottom: 26px; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.vx-fs-controls > * { pointer-events: auto; }
.vx-fs-counter { font-family: var(--f-mono); font-size: 12px; letter-spacing: .18em; color: var(--slate); }
.vx-fs-counter b { color: var(--pulse); font-weight: 500; }
.vx-fs-dots { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
.vx-fs-dot, .vx-fs-pause, .vx-fs-arrow { font: inherit; -webkit-appearance: none; appearance: none; cursor: pointer; }
.vx-fs-dot {
	position: relative; width: 9px; height: 9px; padding: 0; border-radius: 99px; background: transparent;
	border: 1px solid rgba(var(--pulse-rgb), .65); transition: width .4s var(--ease-out), background .3s ease, border-color .3s ease;
}
.vx-fs-dot::after { content: ""; position: absolute; inset: -10px -4px; } /* bigger tap target */
.vx-fs-dot:hover { background: rgba(var(--pulse-rgb), .35); }
.vx-fs-dot.is-active { width: 34px; border-color: transparent; background: linear-gradient(90deg, var(--pulse-deep), var(--gold-light)); }
.vx-fs-pause {
	display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: 50%;
	color: var(--pulse); background: rgba(10,9,8,.4); border: 1px solid var(--line); transition: border-color .2s ease, background .2s ease;
}
.vx-fs-pause:hover { border-color: var(--pulse); background: rgba(var(--pulse-rgb), .12); }
.vx-fs-pause .vx-fs-i-play { display: none; }
.vx-fs-pause[aria-pressed="true"] .vx-fs-i-play { display: block; }
.vx-fs-pause[aria-pressed="true"] .vx-fs-i-pause { display: none; }

.vx-fs-arrow {
	position: absolute; top: 50%; z-index: 3; width: 48px; height: 48px; margin-top: -24px; padding: 0 0 4px; border-radius: 50%;
	font-size: 30px; line-height: 1; color: var(--pulse); background: rgba(10,9,8,.35); border: 1px solid var(--line);
	transition: border-color .2s ease, background .2s ease, transform .3s var(--ease-out);
}
.vx-fs-arrow--prev { left: clamp(12px, 2.4vw, 40px); }
.vx-fs-arrow--next { right: clamp(12px, 2.4vw, 40px); }
.vx-fs-arrow:hover { border-color: var(--pulse); background: rgba(var(--pulse-rgb), .14); transform: scale(1.06); }
.vx-fs-dot:focus-visible, .vx-fs-pause:focus-visible, .vx-fs-arrow:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

/* ---------------- Responsive ---------------- */
@media (max-width: 860px) { .vx-fs-arrow { display: none; } }
@media (max-width: 640px) {
	.vx-fs { height: clamp(560px, 88vh, 700px); }
	.vx-fs-slide { padding: 64px 22px 84px; }
	.vx-fs-eyebrow { font-size: 10.5px; letter-spacing: .2em; gap: 10px; text-align: center; }
	.vx-fs-eyebrow::before, .vx-fs-eyebrow::after { width: 18px; }
	.vx-fs .vx-fs-caption { font-size: clamp(30px, 9vw, 44px); }
	.vx-fs .vx-fs-caption--tagline { font-size: clamp(22px, 6.6vw, 32px); }
	.vx-fs-logo-wrap { height: clamp(170px, 34vh, 260px); }
	.vx-fs-counter { display: none; }
	.vx-fs-controls { justify-content: flex-end; }
}

/* ---------------- Off-screen: stop burning GPU on animations nobody sees ---------------- */
.vx-fs.is-offscreen *, .vx-fs.is-offscreen { animation-play-state: paused !important; }

/* ---------------- Reduced motion: static, fully readable ---------------- */
@media (prefers-reduced-motion: reduce) {
	.vx-fs *, .vx-fs *::before, .vx-fs *::after { animation: none !important; transition: none !important; }
	.vx-fs-layer--bloom { opacity: calc(var(--fs-glow) * .4); }
	.vx-fs-pen, .vx-fs-sweep { display: none; }
	.vx-fs-typed .c { visibility: visible; }
	.vx-fs.is-ready .vx-fs-eyebrow, .vx-fs.is-ready .vx-fs-sub, .vx-fs.is-ready .vx-fs-btn,
	.vx-fs.is-ready .vx-fs-logo, .vx-fs.is-ready .vx-fs-logo-halo { opacity: 1; transform: none; }
}