/* Shared styles for every vppa.io page (linked in each <head>, next to site.js at the end of <body>).
   1) Maroon accent — same tokens as the /for/ prospect pages.
   2) Motion — word-by-word headline reveals + staggered fade-ups, driven by site.js. */

:root { --acc: #8b1e3f; --acc-soft: rgba(139, 30, 63, .08); --acc-line: rgba(139, 30, 63, .35); --ease-out: cubic-bezier(.16, 1, .3, 1); }
.dark { --acc: #d0607a; --acc-soft: rgba(208, 96, 122, .12); --acc-line: rgba(208, 96, 122, .4); }

/* ---------- Accent ---------- */
::selection { background: var(--acc); color: #fff; }
.dark ::selection { background: var(--acc); color: #fff; }
.acc { color: var(--acc); }
.acc-bg { background: var(--acc); }
.acc-dot { display: inline-block; width: .4rem; height: .4rem; border-radius: 999px; background: var(--acc); }
.num { color: var(--acc); }   /* section numbers ("01 — The Problem"); site.js wraps the digits automatically */
.acc-badge { display: inline-flex; align-items: center; gap: .45rem; font-size: .75rem; font-weight: 500; padding: .3rem .75rem; border-radius: 999px; border: 1px solid #e5e5e5; color: #737373; }
.dark .acc-badge { border-color: #262626; color: #a3a3a3; }

/* Bullet dots used across pages (Tailwind "w-1.5 h-1.5 rounded-full bg-neutral-900") turn maroon */
span.w-1\.5.h-1\.5.rounded-full.bg-neutral-900 { background: var(--acc) !important; }

/* Range sliders (home ROI + apply) */
input[type=range].vol { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; background: #e5e5e5; border-radius: 999px; outline: none; }
.dark input[type=range].vol { background: #262626; }
input[type=range].vol::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 999px; border: 2px solid #fff; cursor: pointer; background: var(--acc) !important; box-shadow: 0 0 0 1px var(--acc) !important; }
.dark input[type=range].vol::-webkit-slider-thumb { border-color: #0a0a0a; }
input[type=range].vol::-moz-range-thumb { width: 22px; height: 22px; border-radius: 999px; border: 2px solid #fff; cursor: pointer; background: var(--acc) !important; }
.dark input[type=range].vol::-moz-range-thumb { border-color: #0a0a0a; }

/* Primary buttons: maroon glow on hover */
a[data-apply], .btn-acc { transition: opacity .2s, box-shadow .35s var(--ease-out), transform .35s var(--ease-out) !important; }
a[data-apply]:hover, .btn-acc:hover { opacity: 1 !important; box-shadow: 0 10px 30px -10px var(--acc); transform: translateY(-1px); }

/* Article links and prose accents (blog) */
article a:not([class]), .prose a:not([class]) { text-decoration-color: var(--acc); }
blockquote:not([class]) { border-left-color: var(--acc) !important; }

/* Thin maroon scroll-progress bar at the very top (added by site.js) */
#scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; background: var(--acc); transform-origin: 0 50%; transform: scaleX(0); z-index: 60; pointer-events: none; }

/* ---------- Motion ---------- */
/* Before site.js runs, [data-reveal] blocks keep the old fade. Once it runs (.anim on <html>), the block itself
   stays visible and its pieces animate individually. */
.anim [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Headline words rise out of a mask */
.sw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.sw > .si { display: inline-block; transform: translate3d(0, 110%, 0) rotate(2deg); transform-origin: 0 100%; transition: transform 1.1s var(--ease-out); transition-delay: var(--d, 0ms); will-change: transform; }
.is-visible .sw > .si, .sw.is-visible > .si { transform: none; }

/* Everything else fades up with a soft blur */
.fx { opacity: 0; transform: translate3d(0, 28px, 0); filter: blur(8px); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out), filter 1s var(--ease-out); transition-delay: var(--d, 0ms); }
.is-visible .fx, .fx.is-visible { opacity: 1; transform: none; filter: none; }

/* Hairlines draw in from the left */
.fx-line { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.4s var(--ease-out); transition-delay: var(--d, 0ms); }
.is-visible .fx-line, .fx-line.is-visible { transform: none; }

/* Marquee */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
    .sw > .si, .fx, .fx-line { transform: none !important; opacity: 1 !important; filter: none !important; transition: none !important; }
    .marquee-track { animation: none; }
    #scroll-progress { display: none; }
}