/* 2.8.66: the Voodoo Pay set - matches voodoopay.online: deep ink (#0B0A14), violet #8C6CFF, magenta #FF4FB8,
   lime #D4FF3A buttons with dark ink text, Unbounded headings, Manrope text, drifting colour blobs, sheens and
   pulse rings. Style "voodoo-pay", background "vpdrift", tile pictures "vpay", card edges "vpay", home card "vp",
   opening screen "voodoopay". */

/* ---------------------------------------------------------------- the style's own touches */
html[data-style="voodoo-pay"] {
  --vp-ink: #0B0A14; --vp-ink2: #12101F; --vp-ink3: #1A1730; --vp-violet: #8C6CFF; --vp-magenta: #FF4FB8;
  --vp-lime: #D4FF3A; --vp-lime-ink: #151A00; --ok: #4DFFB0; --bad: #FF5C7A; --warn: #FFC94D;
}
/* smooth on phones: the moving background shows through the cards, so no live blur behind every card
   (that made Android Chrome flicker); the cards are a touch more solid instead */
html[data-style="voodoo-pay"] :is(.glass, .card, .status, .wedit, .marquee) { -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-style="voodoo-pay"][data-surface="glass"] { --surface: rgba(24, 20, 44, .84); }
/* lime call-to-action buttons with a sheen, like the site */
html[data-style="voodoo-pay"] .btn:not(.ghost):not(.soft):not(.danger):not(.linkbtn) {
  background: var(--vp-lime); color: var(--vp-lime-ink); font-weight: 800; overflow: hidden;
  box-shadow: 0 12px 30px -14px rgba(212, 255, 58, .65), inset 0 1px 0 rgba(255, 255, 255, .45);
}
html[data-style="voodoo-pay"] .btn:not(.ghost):not(.soft):not(.danger):not(.linkbtn) .i { color: var(--vp-lime-ink); }
html[data-style="voodoo-pay"] .btn:not(.ghost):not(.soft):not(.danger):not(.linkbtn)::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: translateX(-120%); animation: vp-sweep 4.5s ease-in-out infinite;
}
html[data-style="voodoo-pay"] .btn.soft { background: rgba(140, 108, 255, .14); color: #e6deff; border: 1px solid rgba(140, 108, 255, .35); }
html[data-style="voodoo-pay"] :is(.pill, .chip, .wpill) { font-weight: 700; }
html[data-style="voodoo-pay"] .wgt .wpill { background: var(--vp-lime); color: var(--vp-lime-ink); }
html[data-style="voodoo-pay"] .dotl { position: relative; }
html[data-style="voodoo-pay"] .dotl::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor; opacity: 0;
  animation: vp-ring 2.2s ease-out infinite; }
html[data-style="voodoo-pay"] :is(h1, h2, .who, .tl, .big) { letter-spacing: -.01em; }
html[data-style="voodoo-pay"] .kicker { color: var(--vp-lime); }
html[data-style="voodoo-pay"][data-motion="off"] .btn::after, html[data-style="voodoo-pay"][data-motion="off"] .dotl::after { animation: none; }

@keyframes vp-sweep { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(330%); } }
@keyframes vp-ring { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes vp-drift1 { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(9%, 7%, 0) scale(1.18); } 100% { transform: translate3d(-7%, 11%, 0) scale(.94); } }
@keyframes vp-drift2 { 0% { transform: translate3d(0, 0, 0) scale(1.05); } 50% { transform: translate3d(-10%, -6%, 0) scale(.9); } 100% { transform: translate3d(6%, -10%, 0) scale(1.15); } }
@keyframes vp-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes vp-pop { 0% { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.06); } 100% { opacity: 1; transform: none; } }
@keyframes vp-blink { 50% { opacity: .25; } }

/* ---------------------------------------------------------------- background: drifting violet, magenta and a touch of lime */
[data-bg="vpdrift"] .backdrop > .fx, .stylecard[data-bgfx="vpdrift"] .sc-prev > .fx, .vsplash[data-sfx="vpdrift"] > .fx { display: block; }
[data-bg="vpdrift"] .backdrop > .f1, .stylecard[data-bgfx="vpdrift"] .sc-prev > .f1, .vsplash[data-sfx="vpdrift"] > .f1 {
  inset: -25%;
  background: radial-gradient(30% 28% at 24% 26%, color-mix(in oklab, var(--a) 70%, transparent), transparent 70%),
              radial-gradient(22% 20% at 72% 18%, rgba(212, 255, 58, .14), transparent 70%);
  opacity: .75; will-change: transform; animation: vp-drift1 19s ease-in-out infinite alternate;
}
[data-bg="vpdrift"] .backdrop > .f2, .stylecard[data-bgfx="vpdrift"] .sc-prev > .f2, .vsplash[data-sfx="vpdrift"] > .f2 {
  inset: -25%;
  background: radial-gradient(32% 28% at 76% 72%, color-mix(in oklab, var(--a2) 60%, transparent), transparent 70%),
              radial-gradient(26% 24% at 18% 82%, color-mix(in oklab, var(--a) 40%, transparent), transparent 70%);
  opacity: .6; will-change: transform; animation: vp-drift2 24s ease-in-out infinite alternate;
}
[data-bg="vpdrift"] .backdrop::before, [data-bg="vpdrift"] .backdrop::after { opacity: .25; }
[data-motion="off"][data-bg="vpdrift"] .backdrop > .fx { animation: none; }

/* ---------------------------------------------------------------- card edges: a fine violet-to-magenta line with a lit top */
html[data-border="vpay"] :is(.glass, .card):not(.flat) {
  --edge: linear-gradient(140deg, color-mix(in oklab, var(--a) 65%, transparent), rgba(255, 255, 255, .07) 38%, rgba(255, 255, 255, .05) 62%, color-mix(in oklab, var(--a2) 55%, transparent));
  border-width: 1px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 18px 40px -26px rgba(0, 0, 0, .8), var(--shadow);
}
html[data-border="vpay"] :is(.tile, .portal) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 22px 46px -28px color-mix(in oklab, var(--a) 70%, transparent); }

/* ---------------------------------------------------------------- tile pictures: violet strokes, magenta accents, lime sparks */
html[data-tileart="vpay"] .tileart { --ta-o: .95; }
html[data-tileart="vpay"] .tileart .ta-bg {
  background: radial-gradient(70% 80% at 88% 18%, color-mix(in oklab, var(--a) 26%, transparent), transparent 70%),
              radial-gradient(60% 70% at 92% 96%, color-mix(in oklab, var(--a2) 20%, transparent), transparent 70%);
  -webkit-mask-image: linear-gradient(100deg, transparent 18%, #000 66%); mask-image: linear-gradient(100deg, transparent 18%, #000 66%);
}
html[data-tileart="vpay"] .tileart :is(.f, .f2, .k, .d, .p, .w, .b) { stroke-linecap: round; stroke-linejoin: round; }
html[data-tileart="vpay"] .tileart .f { fill: color-mix(in oklab, var(--a) 22%, transparent); stroke: color-mix(in oklab, var(--a) 80%, #fff); stroke-width: 2; }
html[data-tileart="vpay"] .tileart .f2 { fill: color-mix(in oklab, var(--a2) 22%, transparent); stroke: var(--a2); stroke-width: 2; }
html[data-tileart="vpay"] .tileart .k { fill: none; stroke: var(--a); stroke-width: 1.8; }
html[data-tileart="vpay"] .tileart .k.dash { stroke-dasharray: 3 4; }
html[data-tileart="vpay"] .tileart .k.thick { stroke-width: 5; stroke: var(--a2); }
html[data-tileart="vpay"] .tileart :is(.d, .p) { fill: #D4FF3A; stroke: none; }
html[data-tileart="vpay"] .tileart .w { fill: #fff; stroke: none; opacity: .7; }
html[data-tileart="vpay"] .tileart .b { fill: var(--a); fill-opacity: .1; stroke: none; }
html[data-tileart="vpay"] .tileart .crowd { opacity: .3; }
html[data-tileart="vpay"] .tileart .ta-svg { filter: drop-shadow(0 0 6px color-mix(in oklab, var(--a) 60%, transparent)); }
html[data-tileart="vpay"] .tileart:not(.phototile *) .ta-svg { -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 42%); mask-image: linear-gradient(100deg, transparent 0%, #000 42%); }
html[data-tileart="vpay"][data-mode="light"] .tileart:not(.phototile *) .f { stroke: var(--a); }
html[data-tileart="vpay"][data-mode="light"] .tileart:not(.phototile *) :is(.d, .p) { fill: #8fb400; }

/* ---------------------------------------------------------------- home card "vp": like the Voodoo Pay checkout card */
.portal.hero-vp {
  background: radial-gradient(90% 70% at 100% 0%, color-mix(in oklab, var(--a) 34%, transparent), transparent 62%),
              radial-gradient(80% 60% at 0% 100%, color-mix(in oklab, var(--a2) 24%, transparent), transparent 62%),
              linear-gradient(var(--solid), var(--solid)) padding-box,
              linear-gradient(135deg, var(--a), rgba(255, 255, 255, .08) 45%, var(--a2)) border-box;
  border: 1px solid transparent; overflow: hidden;
}
.hero-vp .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "logo" "name" "chips" "text";
  justify-items: center; text-align: center; gap: 10px; padding: 22px 22px 26px; }
.hero-vp .hero > .toprow { justify-self: stretch; margin-bottom: 2px; }
.hero-vp .kicker { -webkit-backdrop-filter: none; backdrop-filter: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 99px; font-size: 11px; letter-spacing: .14em;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); color: #D4FF3A; }
.hero-vp .kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4DFFB0; box-shadow: 0 0 8px rgba(77, 255, 176, .7);
  animation: vp-blink 2.4s ease-in-out infinite; }
/* the logo: Voodoo Pay's round V badge, with the orbit (dashed + dotted rings turning, a lime and a pink dot going round) */
.hero-vp .hero > .h-logo { position: relative; justify-content: center; align-items: center; padding: 34px 0 30px; }
.portal.hero-vp .orb.s104 { --s: 92px; }
.hero-vp .orb { animation: vp-pop .8s cubic-bezier(.2, 1.3, .4, 1) both; }
.hero-vp .orb .halo { display: none; }
.portal.hero-vp .hero > .who { font-size: clamp(28px, 8.6vw, 42px); line-height: 1.1; max-width: 100%;
  background: linear-gradient(100deg, #F4F2FF 25%, color-mix(in oklab, var(--a) 60%, #fff) 50%, var(--a2) 75%) 0 0 / 100% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: vp-rise .7s .1s both; }
.hero-vp .hero > .chips { justify-content: center; animation: vp-rise .7s .2s both; }
.hero-vp .hero > .welcome { font-size: 14px; color: var(--mfg); max-width: 32ch; animation: vp-rise .7s .3s both; }
/* little floating lights, like the site */
.hero-vp .hero-fx { display: none; } /* 2.8.68: the orbit replaces the floating lights */
.hero-vp .hero-fx i { width: 9px; height: 9px; border-radius: 50%; opacity: 0; }
.hero-vp .hero-fx i:nth-child(-n+5) { opacity: .95; animation: vp-float 6s ease-in-out infinite alternate; }
.hero-vp .hero-fx i:nth-child(1) { left: 30%; top: 30%; background: #22d3ee; box-shadow: 0 0 12px #22d3ee; }
.hero-vp .hero-fx i:nth-child(2) { left: 72%; top: 24%; width: 11px; height: 11px; background: #FFC94D; box-shadow: 0 0 12px #FFC94D; animation-delay: -2s; }
.hero-vp .hero-fx i:nth-child(3) { left: 70%; top: 56%; background: var(--a2); box-shadow: 0 0 12px var(--a2); animation-delay: -4s; }
.hero-vp .hero-fx i:nth-child(4) { left: 18%; top: 58%; width: 6px; height: 6px; background: #D4FF3A; box-shadow: 0 0 10px #D4FF3A; animation-delay: -1s; }
.hero-vp .hero-fx i:nth-child(5) { left: 84%; top: 70%; width: 5px; height: 5px; background: #fff; animation-delay: -3s; }
@keyframes vp-float { from { transform: translate(0, 0); } to { transform: translate(8px, -12px); } }

.hero-vp::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; z-index: 3; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .07), transparent); transform: translateX(-120%);
  animation: vp-sweep 8s ease-in-out infinite; }
[data-motion="off"] .hero-vp::after, [data-motion="off"] .hero-vp .kicker::before,
[data-motion="off"] :is(.hero-vp .orb .halo, .hero-vp .bloom, .hero-vp .hero-fx i) { animation: none; }

/* ---------------------------------------------------------------- opening screen "voodoopay": the Voodoo Pay loader */
.sp-voodoopay { background: radial-gradient(70% 50% at 50% 40%, color-mix(in oklab, var(--a) 22%, transparent), transparent 70%), #0B0A14; }
.sp-voodoopay .vs-art { position: absolute; left: 50%; top: var(--logo-y, 42%); width: 0; height: 0; }
.sp-voodoopay .vs-art i { display: none; position: absolute; }
.sp-voodoopay .vs-art { display: none; }
.sp-voodoopay .vs-mid .orb .halo { display: none; }
.sp-voodoopay .vs-name { background: linear-gradient(100deg, #F4F2FF 30%, var(--a) 50%, var(--a2) 60%, #F4F2FF 80%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: vp-rise .8s .3s both, vp-name 3s 1s linear infinite; }
@keyframes vp-name { to { background-position: -250% 0; } }
.sp-voodoopay .vs-bar { background: rgba(255, 255, 255, .1); }
.sp-voodoopay .vs-bar i { background: #D4FF3A; box-shadow: 0 0 10px rgba(212, 255, 58, .7); }

/* ---------------------------------------------------------------- 2.8.68: the orbit round the logo (home card "vp" and opening screen "voodoopay")
   Only transform animations on whole layers, so phones keep it smooth. */
.vo-wrap { position: relative; display: grid; place-items: center; --vo: var(--s, 92px); }
.vo-wrap > .orb { position: relative; z-index: 1; }
.vo-wrap > .orb .ball { border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in oklab, var(--a) 70%, #fff) 0%, var(--a) 55%, color-mix(in oklab, var(--a) 80%, #000) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 14px 40px -10px color-mix(in oklab, var(--a) 80%, transparent), 0 0 70px -12px color-mix(in oklab, var(--a2) 60%, transparent); }
.vo-wrap > .orb .ball:not(:has(img)) { color: #0B0A14; font-weight: 900; }
.vp-orbit { position: absolute; left: 50%; top: 50%; width: calc(var(--vo) * 2.2); height: calc(var(--vo) * 2.2); margin: calc(var(--vo) * -1.1);
  pointer-events: none; z-index: 0; }
.vo-ring { position: absolute; overflow: visible; will-change: transform; }
.vo-ring circle { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.vo-in { inset: 12.5%; width: 75%; height: 75%; animation: vo-spin 26s linear infinite; }
.vo-in circle { stroke: color-mix(in oklab, var(--a) 85%, #fff); stroke-width: 1.6px; opacity: .75; }
.vo-out { inset: 0; width: 100%; height: 100%; animation: vo-spin 40s linear infinite reverse; }
.vo-out circle { stroke: #D4FF3A; stroke-width: 1.4px; opacity: .5; }
.vo-sat { position: absolute; inset: 0; will-change: transform; animation: vo-spin 11s linear infinite; }
.vo-sat i { position: absolute; left: 50%; top: 0; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: #D4FF3A; box-shadow: 0 0 12px rgba(212, 255, 58, .75); }
.vo-s1 { animation-delay: -1.3s; }
.vo-s2 { inset: 12.5%; animation: vo-spin 17s linear infinite reverse; }
.vo-s2 i { width: 9px; height: 9px; margin: -4.5px; background: #FF4FB8; box-shadow: 0 0 10px rgba(255, 79, 184, .75); }
@keyframes vo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.sp-voodoopay .vs-mid .vo-wrap { margin: calc(var(--vo) * .45) 0 calc(var(--vo) * .4); }
.sp-voodoopay .vs-mid .vo-wrap > .orb { animation: vp-pop .8s cubic-bezier(.2, 1.3, .4, 1) both; }
[data-motion="off"] :is(.vo-ring, .vo-sat) { animation: none; }
@media (prefers-reduced-motion: reduce) { :is(.vo-ring, .vo-sat) { animation: none; } }

/* ---------------------------------------------------------------- 3.0: background "vporbit": the Voodoo Pay orbit, big and slow behind everything.
   The rings take your colours (masks over your accent), two lights go round. Only transforms move. */
[data-bg="vporbit"] .backdrop > .fx, .stylecard[data-bgfx="vporbit"] .sc-prev > .fx, .vsplash[data-sfx="vporbit"] > .fx { display: block; }
[data-bg="vporbit"] .backdrop > .fx, .stylecard[data-bgfx="vporbit"] .sc-prev > .fx, .vsplash[data-sfx="vporbit"] > .fx {
  inset: auto; left: 50%; top: 42%; width: 140vmin; height: 140vmin; margin: -70vmin 0 0 -70vmin; will-change: transform; }
.stylecard[data-bgfx="vporbit"] .sc-prev > .fx { width: 170%; height: auto; aspect-ratio: 1; margin: -85% 0 0 -85%; }
[data-bg="vporbit"] .backdrop > .f1, .stylecard[data-bgfx="vporbit"] .sc-prev > .f1, .vsplash[data-sfx="vporbit"] > .f1 { animation: vo-spin 90s linear infinite; }
[data-bg="vporbit"] .backdrop > .f2, .stylecard[data-bgfx="vporbit"] .sc-prev > .f2, .vsplash[data-sfx="vporbit"] > .f2 { transform: scale(.62); animation: vo-spin-s 60s linear infinite reverse; }
@keyframes vo-spin-s { from { transform: scale(.62) rotate(0); } to { transform: scale(.62) rotate(360deg); } }
:is([data-bg="vporbit"] .backdrop, .stylecard[data-bgfx="vporbit"] .sc-prev, .vsplash[data-sfx="vporbit"]) > .fx::before {
  content: ""; position: absolute; inset: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='49' fill='none' stroke='%23000' stroke-width='.45' pathLength='100' stroke-dasharray='.8 1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='49' fill='none' stroke='%23000' stroke-width='.45' pathLength='100' stroke-dasharray='.8 1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; background: var(--a2); opacity: .6; }
:is([data-bg="vporbit"] .backdrop, .stylecard[data-bgfx="vporbit"] .sc-prev, .vsplash[data-sfx="vporbit"]) > .f2::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='49' fill='none' stroke='%23000' stroke-width='.35' pathLength='100' stroke-dasharray='5.2 3.1' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='49' fill='none' stroke='%23000' stroke-width='.35' pathLength='100' stroke-dasharray='5.2 3.1' stroke-linecap='round'/%3E%3C/svg%3E"); background: var(--a); opacity: .55; }
:is([data-bg="vporbit"] .backdrop, .stylecard[data-bgfx="vporbit"] .sc-prev, .vsplash[data-sfx="vporbit"]) > .fx::after {
  content: ""; position: absolute; left: 50%; top: 0; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: var(--a2); box-shadow: 0 0 22px var(--a2); }
:is([data-bg="vporbit"] .backdrop, .stylecard[data-bgfx="vporbit"] .sc-prev, .vsplash[data-sfx="vporbit"]) > .f2::after {
  top: 50%; left: 0; width: 18px; height: 18px; margin: -9px; background: var(--a); box-shadow: 0 0 26px var(--a); }
[data-motion="off"][data-bg="vporbit"] .backdrop > .fx { animation: none; }
@media (prefers-reduced-motion: reduce) { [data-bg="vporbit"] .backdrop > .fx { animation: none; } }