/* 2.8.52: 25 more moving app opening screens (keys in app/splashes.py)
   Each one draws its own scene in .vs-art (12 <i> plus ::before/::after). Sizes are in px or % (never vw/vh) so the
   small picker copies (a 360x640 frame) look the same as the full screen. The resting style of every layer is its
   final look, and the keyframes start from the opening state, so with reduced motion each one is a clean still picture. */
.vsplash .vs-art::before, .vsplash .vs-art::after { pointer-events: none; }

/* ---------- Press start: 8-bit game title screen ---------- */
.sp-press-start { background: linear-gradient(#0b0820, #1a0f3a 62%, #2c1452); }
.sp-press-start .vs-art { position: absolute; inset: 0; image-rendering: pixelated;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='240' shape-rendering='crispEdges'%3E%3Cg fill='%23fff'%3E%3Crect x='14' y='20' width='3' height='3'/%3E%3Crect x='130' y='30' width='3' height='3'/%3E%3Crect x='150' y='190' width='3' height='3'/%3E%3Crect x='80' y='210' width='2' height='2'/%3E%3Crect x='170' y='100' width='2' height='2'/%3E%3Crect x='40' y='95' width='2' height='2'/%3E%3Crect x='115' y='165' width='2' height='2'/%3E%3Crect x='88' y='52' width='3' height='9'/%3E%3Crect x='85' y='55' width='9' height='3'/%3E%3C/g%3E%3Crect x='60' y='130' width='3' height='3' fill='%23ffd84a'/%3E%3Crect x='30' y='170' width='3' height='3' fill='%237dd3fc'/%3E%3Crect x='160' y='60' width='3' height='3' fill='%23f472b6'/%3E%3C/svg%3E") 0 0/180px 240px;
  animation: vx-pxstars 3s steps(30) infinite; }
@keyframes vx-pxstars { to { background-position: 0 240px; } }
.sp-press-start .vs-art::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 13%;
  background: linear-gradient(var(--a) 0 6px, #0000 6px), repeating-conic-gradient(var(--a-45) 0 25%, var(--a-20) 0 50%) 0 6px/24px 24px, #120a26;
  animation: vx-pxground .6s steps(3) infinite; }
@keyframes vx-pxground { to { background-position: 0 0, -24px 6px, 0 0; } }
.sp-press-start .vs-art::after { content: "PRESS START"; position: absolute; left: 0; right: 0; bottom: 19%; text-align: center;
  font: 800 18px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .28em; color: #fff; text-shadow: 3px 3px 0 var(--a);
  animation: vx-blink .9s .9s steps(1) infinite; }
@keyframes vx-blink { 50% { opacity: 0; } }
.sp-press-start .vs-art i:nth-child(-n+3) { display: block; position: absolute; top: 6%; font: 800 12px/1.5 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .14em; color: #fff; white-space: pre; font-style: normal; text-shadow: 2px 2px 0 #0008; }
.sp-press-start .vs-art i:nth-child(1) { left: 7%; } .sp-press-start .vs-art i:nth-child(1)::before { content: "1UP\A 004200"; }
.sp-press-start .vs-art i:nth-child(2) { right: 7%; text-align: right; } .sp-press-start .vs-art i:nth-child(2)::before { content: "HI-SCORE\A 999990"; }
.sp-press-start .vs-art i:nth-child(3) { left: 0; right: 0; text-align: center; color: #ff4d6d; font-size: 16px; letter-spacing: .1em; }
.sp-press-start .vs-art i:nth-child(3)::before { content: "\2665\2665\2665"; }
.vsplash.sp-press-start .vs-mid .orb { animation: vx-pxpop .7s steps(5) both, vs-glow 2.4s 1s ease-in-out infinite; }
.sp-press-start .orb .ball { box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--a), 0 0 46px var(--a-60); }
@keyframes vx-pxpop { from { opacity: 0; transform: scale(.1); } 70% { opacity: 1; transform: scale(1.18); } }
.sp-press-start .vs-name { background: none; color: #fff; text-transform: uppercase; letter-spacing: .05em;
  text-shadow: 3px 3px 0 var(--a), 6px 6px 0 #0007; animation: vx-pxup .6s .35s steps(4) both; }
@keyframes vx-pxup { from { opacity: 0; transform: translateY(24px); } }
.sp-press-start .vs-bar { width: 150px; height: 14px; padding: 2px; border-radius: 0; background: #0000; box-shadow: 0 0 0 2px #fff; }
.sp-press-start .vs-bar i { width: 100%; border-radius: 0; background: repeating-linear-gradient(90deg, var(--a2) 0 8px, #0000 8px 10px);
  animation: vx-pxload 1.6s .45s steps(14) both; }
@keyframes vx-pxload { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Arcade: chasing marquee bulbs, a coin drops in ---------- */
.sp-arcade { background: radial-gradient(70% 45% at 50% 42%, var(--a-30), transparent 70%), linear-gradient(#170722, #07030c); }
.sp-arcade .vs-art { position: absolute; inset: 16px; border-radius: 30px; box-shadow: inset 0 0 0 2px #ffb34733, inset 0 0 50px var(--a-20); }
.sp-arcade .vs-art i:nth-child(-n+4) { display: block; position: absolute;
  --on: radial-gradient(circle, #fffbe0 0 2.5px, #ffcf4a 3.5px, #ffb34700 9px); --off: radial-gradient(circle, #7a5524 0 2.5px, #0000 3.5px); }
.sp-arcade .vs-art i:nth-child(1), .sp-arcade .vs-art i:nth-child(2) { left: 22px; right: 22px; height: 22px;
  background: var(--on) 0 0/44px 22px repeat-x, var(--off) 0 0/22px 22px repeat-x; animation: vx-chase-x .44s steps(1) infinite; }
.sp-arcade .vs-art i:nth-child(1) { top: -11px; } .sp-arcade .vs-art i:nth-child(2) { bottom: -11px; animation-direction: reverse; }
.sp-arcade .vs-art i:nth-child(3), .sp-arcade .vs-art i:nth-child(4) { top: 22px; bottom: 22px; width: 22px;
  background: var(--on) 0 0/22px 44px repeat-y, var(--off) 0 0/22px 22px repeat-y; animation: vx-chase-y .44s steps(1) infinite; }
.sp-arcade .vs-art i:nth-child(3) { left: -11px; animation-direction: reverse; } .sp-arcade .vs-art i:nth-child(4) { right: -11px; }
@keyframes vx-chase-x { 50% { background-position: 22px 0, 0 0; } }
@keyframes vx-chase-y { 50% { background-position: 0 22px, 0 0; } }
.sp-arcade .vs-art i:nth-child(5) { display: block; position: absolute; left: 50%; top: calc(var(--logo-y) - 16px); width: 34px; height: 34px; margin-left: -17px; border-radius: 50%;
  background: radial-gradient(circle, #ffe9a3 0 30%, #e9b32e 32% 58%, #ffe08a 60% 66%, #b9821c 68%); box-shadow: 0 0 16px #ffcf4a99;
  opacity: 0; animation: vx-coin .62s .05s cubic-bezier(.5,0,.9,.6) both; }
@keyframes vx-coin { from { opacity: 1; transform: translateY(-380px) rotateY(0); } 85% { opacity: 1; } to { opacity: 0; transform: translateY(0) rotateY(1440deg) scale(.6); } }
.sp-arcade .vs-art i:nth-child(6) { display: block; position: absolute; left: 50%; top: var(--logo-y); width: 150px; height: 150px; margin: -91px 0 0 -75px; border-radius: 50%;
  border: 3px solid #ffd84a; opacity: 0; animation: vx-ring .6s .62s ease-out both; }
@keyframes vx-ring { from { opacity: 0; transform: scale(.7); } 1% { opacity: 1; transform: scale(.7); } to { opacity: 0; transform: scale(2.1); } }
.sp-arcade .vs-art::after { content: "INSERT COIN"; position: absolute; left: 0; right: 0; bottom: 9%; text-align: center;
  font: 800 16px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .3em; color: #ffd84a; text-shadow: 0 0 10px #ffb347aa; animation: vx-blink 1s steps(1) infinite; }
.sp-arcade .vs-art::before { content: "CREDIT 01"; position: absolute; left: 0; right: 0; top: 7%; text-align: center;
  font: 700 12px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .3em; color: #fff9; animation: vx-show .1s .7s both; }
@keyframes vx-show { from { opacity: 0; } }
.vsplash.sp-arcade .vs-mid .orb { animation: vx-arcpop .55s .6s cubic-bezier(.2,1.6,.4,1) both, vs-glow 2.4s 1.2s ease-in-out infinite; }
@keyframes vx-arcpop { from { opacity: 0; transform: scale(.2); } }

/* ---------- Countdown: film leader 3, 2, 1 ---------- */
.sp-countdown { background: radial-gradient(75% 55% at 50% 45%, #6e655a, #2e2822 70%, #15120f); }
.sp-countdown .vs-art { position: absolute; inset: 0; }
.sp-countdown .vs-art::before { content: ""; position: absolute; left: 50%; top: var(--logo-y); width: 270px; height: 270px; translate: -50% -50%; border-radius: 50%;
  border: 3px solid #f3ead8cc; outline: 2px solid #f3ead866; outline-offset: 14px; }
.sp-countdown .vs-art i:nth-child(1) { display: block; position: absolute; left: 50%; top: var(--logo-y); width: 270px; height: 270px; translate: -50% -50%; border-radius: 50%;
  background: conic-gradient(#0000 0 70%, #f3ead81f 98%, #f3ead880 100%); animation: fx-spin .3s linear 4, vx-slow 2.4s 1.2s linear infinite; }
@keyframes vx-slow { to { transform: rotate(360deg); } }
.sp-countdown .vs-art i:nth-child(2) { display: block; position: absolute; left: 0; right: 0; top: var(--logo-y); height: 2px; margin-top: -1px; background: #f3ead855; }
.sp-countdown .vs-art i:nth-child(3) { display: block; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #f3ead855; }
.sp-countdown .vs-art i:nth-child(n+4):nth-child(-n+6) { display: block; position: absolute; top: 0; bottom: 0; width: 1px; background: #fff8; opacity: 0;
  animation: vx-scratch .9s steps(1) infinite; }
.sp-countdown .vs-art i:nth-child(4) { left: 18%; } .sp-countdown .vs-art i:nth-child(5) { left: 71%; animation-delay: -.3s; animation-duration: .7s; }
.sp-countdown .vs-art i:nth-child(6) { left: 86%; width: 2px; animation-delay: -.6s; animation-duration: 1.3s; background: #0006; }
@keyframes vx-scratch { 10% { opacity: .9; } 25% { opacity: 0; } 55% { opacity: .5; transform: translateX(6px); } 65% { opacity: 0; } }
.sp-countdown .vs-art i:nth-child(7) { display: block; position: absolute; inset: 0; background: radial-gradient(transparent 50%, #0009); animation: vx-flicker .25s steps(2) infinite; }
@keyframes vx-flicker { 50% { opacity: .75; } }
.sp-countdown .vs-art::after { content: "1"; position: absolute; left: 50%; top: var(--logo-y); translate: -50% -50%; font: 800 190px/1 var(--display); color: #f3ead8;
  text-shadow: 0 0 30px #0008; opacity: 0; animation: vx-cdnum .7s linear both; }
@keyframes vx-cdnum { 0%, 32% { content: "3"; opacity: 1; } 33%, 65% { content: "2"; opacity: 1; } 66%, 88% { content: "1"; opacity: 1; } 100% { content: "1"; opacity: 0; transform: scale(1.5); } }
.vsplash.sp-countdown .vs-mid .orb { animation: vs-zoom .55s .6s cubic-bezier(.2,.8,.2,1) both, vs-glow 2.4s 1.4s ease-in-out infinite; }
.sp-countdown .vs-name { background-image: linear-gradient(100deg, #fff8ea 20%, #e8c27a 45%, #fff8ea 70%); animation: vs-up .5s .62s cubic-bezier(.2,.8,.2,1) both, hx-shine 3s 1.4s linear infinite; }
.sp-countdown .vs-bar { animation-delay: .7s; }

/* ---------- Projector: a flickering beam full of dust ---------- */
.sp-projector { background: radial-gradient(70% 50% at 45% 48%, #221d2c, #070609 70%); }
.sp-projector .vs-art { position: absolute; inset: 0; overflow: hidden; }
.sp-projector .vs-art::before { content: ""; position: absolute; inset: 0; clip-path: polygon(96% 2%, 100% 7%, 30% 100%, -15% 100%, -15% 52%);
  background: linear-gradient(222deg, #fff6d8b0, #fff3d02e 45%, #fff3d00a 85%); filter: blur(5px); animation: vx-beam 1.3s linear infinite; }
@keyframes vx-beam { 0%, 100% { opacity: .95; } 12% { opacity: .78; } 20% { opacity: 1; } 47% { opacity: .85; } 53% { opacity: 1; } 78% { opacity: .82; } }
.sp-projector .vs-art::after { content: ""; position: absolute; inset: -20px; opacity: .14; mix-blend-mode: screen;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/160px 160px;
  animation: vx-noise .3s steps(3) infinite; }
@keyframes vx-noise { 33% { background-position: -50px 30px; } 66% { background-position: 40px -70px; } 100% { background-position: -20px 60px; } }
.sp-projector .vs-art i:nth-child(1) { display: block; position: absolute; right: 0; top: 0; width: 90px; height: 90px; translate: 30% -30%; border-radius: 50%;
  background: radial-gradient(closest-side, #fff, #ffe9b0 30%, #ffd27a44 60%, transparent); animation: vx-beam 1.3s linear infinite; }
.sp-projector .vs-art i:nth-child(n+2) { display: block; position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fffbe8; box-shadow: 0 0 6px #fff8;
  animation: vx-dust 5s ease-in-out infinite alternate; }
.sp-projector .vs-art i:nth-child(2) { left: 80%; top: 12%; } .sp-projector .vs-art i:nth-child(3) { left: 68%; top: 22%; animation-duration: 6s; animation-delay: -2s; }
.sp-projector .vs-art i:nth-child(4) { left: 58%; top: 30%; width: 2px; height: 2px; animation-delay: -1s; } .sp-projector .vs-art i:nth-child(5) { left: 40%; top: 28%; animation-duration: 7s; }
.sp-projector .vs-art i:nth-child(6) { left: 30%; top: 46%; animation-delay: -3s; } .sp-projector .vs-art i:nth-child(7) { left: 20%; top: 62%; width: 2px; height: 2px; animation-duration: 4s; }
.sp-projector .vs-art i:nth-child(8) { left: 74%; top: 34%; width: 2px; height: 2px; animation-delay: -4s; } .sp-projector .vs-art i:nth-child(9) { left: 12%; top: 76%; animation-duration: 6.5s; }
.sp-projector .vs-art i:nth-child(10) { left: 50%; top: 18%; width: 2px; height: 2px; animation-delay: -2.5s; } .sp-projector .vs-art i:nth-child(11) { left: 8%; top: 60%; animation-delay: -1.5s; }
.sp-projector .vs-art i:nth-child(12) { left: 86%; top: 6%; width: 2px; height: 2px; }
@keyframes vx-dust { 0% { transform: translate(0, 0); opacity: .2; } 30% { opacity: 1; } 60% { opacity: .35; } 100% { transform: translate(-26px, 18px); opacity: .9; } }
.vsplash.sp-projector .vs-mid .orb { animation: vx-flickin 1.1s .1s linear both, vs-glow 2.4s 1.3s ease-in-out infinite; }
.sp-projector .vs-name { animation: vx-flickin .8s .3s linear both, hx-shine 3s 1.4s linear infinite; }
@keyframes vx-flickin { 0% { opacity: 0; } 10% { opacity: .7; } 14% { opacity: .1; } 26% { opacity: .9; } 31% { opacity: .25; } 45% { opacity: 1; } 50% { opacity: .6; } 60%, 100% { opacity: 1; } }

/* ---------- Curtain up: red velvet opening ---------- */
.sp-curtain { background: radial-gradient(42% 30% at 50% 44%, #fff1cf40, transparent 70%), linear-gradient(#1c060a, #0b0305 70%, #2b100a 70.3%, #140705); }
.sp-curtain .vs-art { position: absolute; inset: 0; overflow: hidden; }
.sp-curtain .vs-art::before { content: ""; position: absolute; left: 50%; top: 70%; width: 320px; height: 70px; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, #fff1cf55, transparent); }
.sp-curtain .vs-art i:nth-child(-n+2) { display: block; position: absolute; top: 0; bottom: 0; width: 53%;
  background: linear-gradient(#0000 55%, #0007), repeating-linear-gradient(90deg, #4f0710 0, #9c1427 12px, #cc2239 20px, #8a1022 30px, #4a0610 40px);
  box-shadow: 0 0 40px #000a; transform: scaleX(.17); animation: vx-curtain .8s .05s cubic-bezier(.65,0,.3,1) both; }
.sp-curtain .vs-art i:nth-child(1) { left: 0; transform-origin: 0 50%; border-radius: 0 0 60% 0 / 0 0 8% 0; }
.sp-curtain .vs-art i:nth-child(2) { right: 0; transform-origin: 100% 50%; border-radius: 0 0 0 60% / 0 0 0 8%; }
@keyframes vx-curtain { from { transform: scaleX(1); } }
.sp-curtain .vs-art i:nth-child(3) { display: block; position: absolute; left: 0; right: 0; top: 0; height: 10%; min-height: 56px;
  background: linear-gradient(#5c0912, #a3162a 70%, #d4a24a 70% 78%, #8a1022 78%);
  -webkit-mask: radial-gradient(circle at 50% 0, #000 70%, #0000 71%) 0 100%/44px 22px repeat-x, linear-gradient(#000, #000) 0 0/100% calc(100% - 11px) no-repeat;
  mask: radial-gradient(circle at 50% 0, #000 70%, #0000 71%) 0 100%/44px 22px repeat-x, linear-gradient(#000, #000) 0 0/100% calc(100% - 11px) no-repeat; filter: drop-shadow(0 6px 10px #0008); }
.sp-curtain .vs-art i:nth-child(4) { display: block; position: absolute; left: 50%; top: -10%; width: 70%; height: 85%; translate: -50% 0;
  background: linear-gradient(#fff4d633, #fff4d608); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); filter: blur(8px); animation: vx-show .5s .5s both; }
.vsplash.sp-curtain .vs-mid .orb { animation: vs-rise .9s .35s cubic-bezier(.2,.8,.2,1) both, vs-glow 2.4s 1.3s ease-in-out infinite; }
.sp-curtain .vs-name { background-image: linear-gradient(100deg, #fff 20%, #ffd98a 45%, #fff 70%); animation: vs-up .7s .55s cubic-bezier(.2,.8,.2,1) both, hx-shine 3s 1.4s linear infinite; }

/* ---------- On air: test card, viewfinder and a LIVE light ---------- */
.sp-on-air { background: radial-gradient(50% 35% at 50% 44%, var(--a-20), transparent 70%), radial-gradient(70% 50% at 50% 45%, #1b1b26, #060608 75%); }
.sp-on-air .vs-art { position: absolute; inset: 0; overflow: hidden; }
.sp-on-air .vs-art i:nth-child(1) { display: block; position: absolute; inset: 0; z-index: 2; opacity: 0;
  background: linear-gradient(90deg, #c0c0c0 0 14.3%, #c0c000 0 28.6%, #00c0c0 0 42.9%, #00c000 0 57.1%, #c000c0 0 71.4%, #c00000 0 85.7%, #0000c0 0) 0 0/100% 68% no-repeat,
    linear-gradient(90deg, #0000c0 0 14.3%, #131313 0 28.6%, #c000c0 0 42.9%, #131313 0 57.1%, #00c0c0 0 71.4%, #131313 0 85.7%, #c0c0c0 0) 0 68%/100% 9% no-repeat,
    linear-gradient(90deg, #00214c 0 18%, #fff 0 36%, #32006a 0 54%, #131313 0) 0 100%/100% 24% no-repeat;
  animation: vx-tvoff .7s linear both; }
@keyframes vx-tvoff { 0%, 40% { opacity: 1; transform: none; filter: none; } 62% { opacity: 1; transform: scale(1, .006); filter: brightness(2.2); } 80% { opacity: 1; transform: scale(0, .006); filter: brightness(3); } 100% { opacity: 0; transform: scale(0, .006); } }
.sp-on-air .vs-art i:nth-child(2) { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
  background: linear-gradient(90deg, #c0c0c0 0 14.3%, #c0c000 0 28.6%, #00c0c0 0 42.9%, #00c000 0 57.1%, #c000c0 0 71.4%, #c00000 0 85.7%, #0000c0 0); }
.sp-on-air .vs-art i:nth-child(3) { display: block; position: absolute; left: 10%; top: 8%; padding: 6px 11px 6px 9px; border-radius: 7px; background: #e11d2e;
  font: 800 13px/1 system-ui, sans-serif; font-style: normal; letter-spacing: .14em; color: #fff; box-shadow: 0 0 18px #e11d2e88; animation: vx-live 1.2s ease-in-out infinite; }
.sp-on-air .vs-art i:nth-child(3)::before { content: "\25CF"; margin-right: 6px; animation: vx-blink 1s steps(1) infinite; }
.sp-on-air .vs-art i:nth-child(3)::after { content: "LIVE"; }
@keyframes vx-live { 50% { box-shadow: 0 0 30px #ff3344cc; } }
.sp-on-air .vs-art i:nth-child(4) { display: block; position: absolute; right: 10%; top: 8%; font: 700 12px/26px ui-monospace, Menlo, Consolas, monospace; font-style: normal; letter-spacing: .12em; color: #fffc; }
.sp-on-air .vs-art i:nth-child(4)::before { content: "HD \00B7 CAM 1"; }
.sp-on-air .vs-art i:nth-child(n+5):nth-child(-n+8) { display: block; position: absolute; width: 30px; height: 30px; border: 0 solid #ffffffb3; }
.sp-on-air .vs-art i:nth-child(5) { left: 6%; top: 5%; border-width: 3px 0 0 3px; } .sp-on-air .vs-art i:nth-child(6) { right: 6%; top: 5%; border-width: 3px 3px 0 0; }
.sp-on-air .vs-art i:nth-child(7) { left: 6%; bottom: 5%; border-width: 0 0 3px 3px; } .sp-on-air .vs-art i:nth-child(8) { right: 6%; bottom: 5%; border-width: 0 3px 3px 0; }
.sp-on-air .vs-art i:nth-child(9) { display: block; position: absolute; left: 0; right: 0; top: 0; height: 22%; background: linear-gradient(#0000, #ffffff0d, #0000); animation: vx-roll 2.4s linear infinite; }
@keyframes vx-roll { from { transform: translateY(-100%); } to { transform: translateY(560%); } }
.sp-on-air .vs-art::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, #ffffff08 0 1px, #0000 1px 3px); }
.vsplash.sp-on-air .vs-mid .orb { animation: vs-flip .9s .5s cubic-bezier(.2,.8,.2,1) both, vs-glow 2.4s 1.4s ease-in-out infinite; }
.sp-on-air .vs-name { animation: vs-up .7s .65s cubic-bezier(.2,.8,.2,1) both, hx-shine 3s 1.4s linear infinite; }

/* ---------- TV static: snow, then the picture switches on ---------- */
.sp-tv-static { background: radial-gradient(60% 42% at 50% 45%, var(--a-45), transparent 70%), radial-gradient(120% 90% at 50% 50%, #12101c, #040306); }
.sp-tv-static .vs-art { position: absolute; inset: 0; overflow: hidden; --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.sp-tv-static .vs-art i:nth-child(1) { display: block; position: absolute; inset: -40px; z-index: 3; background: var(--noise) 0 0/160px 160px, #555; opacity: 0;
  animation: vx-noise .2s steps(3) infinite, vx-staticout .55s linear both; }
@keyframes vx-staticout { 0%, 75% { opacity: 1; filter: contrast(1.6); } 100% { opacity: 0; } }
.sp-tv-static .vs-art i:nth-child(2) { display: block; position: absolute; inset: -40px; background: var(--noise) 0 0/160px 160px; opacity: .07; mix-blend-mode: screen; animation: vx-noise .3s steps(3) infinite; }
.sp-tv-static .vs-art i:nth-child(3) { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 4; background: #fff; box-shadow: 0 0 30px #fff; opacity: 0;
  animation: vx-crton .5s .42s ease-out both; }
@keyframes vx-crton { 0% { opacity: 1; transform: scale(0, .004); } 35% { opacity: 1; transform: scale(1, .004); } 100% { opacity: 0; transform: scale(1, 1); } }
.sp-tv-static .vs-art i:nth-child(4) { display: block; position: absolute; left: 0; right: 0; top: 0; height: 16%; background: linear-gradient(#0000, #ffffff12, #0000); animation: vx-roll 1.9s linear infinite; }
.sp-tv-static .vs-art::after { content: ""; position: absolute; inset: 0; z-index: 2; background: repeating-linear-gradient(0deg, #0000 0 2px, #0004 2px 3px), radial-gradient(110% 90% at 50% 50%, #0000 60%, #000c); }
.vsplash.sp-tv-static .vs-mid .orb { animation: vx-crtin .55s .5s cubic-bezier(.2,.8,.2,1) both, vs-glow 2.4s 1.3s ease-in-out infinite; }
@keyframes vx-crtin { from { opacity: 0; transform: scale(1.6, .02); filter: brightness(3); } 60% { opacity: 1; transform: scale(1.04, 1.08); filter: brightness(1.4); } }
.sp-tv-static .vs-name { animation: vx-crtin .55s .6s cubic-bezier(.2,.8,.2,1) both, hx-shine 3s 1.4s linear infinite; }
.sp-tv-static .vs-bar { animation-delay: .8s; }

/* ---------- Vinyl: the logo is the label on a spinning record ---------- */
.sp-vinyl { background: radial-gradient(70% 50% at 50% 45%, var(--a-30), transparent 70%), linear-gradient(#1c1316, #0a0708); }
.sp-vinyl .vs-art { position: absolute; left: 50%; top: var(--logo-y); width: 310px; height: 310px; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, #0000 0 92px, #0c0c0e 93px 97px, #0000 98px), radial-gradient(circle, #0000 0 128px, #0c0c0e 129px 131px, #0000 132px),
    repeating-radial-gradient(circle, #141416 0 1.5px, #202024 2px 3px);
  box-shadow: 0 24px 60px #000d, 0 0 0 1px #ffffff14, 0 0 60px var(--a-30); animation: vx-recin .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes vx-recin { from { opacity: 0; transform: translateX(-120%) rotate(-240deg); } }
.sp-vinyl .vs-art::before { content: ""; position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: screen;
  background: conic-gradient(from 20deg, #0000 0 6%, #ffffff26 12%, #0000 19% 50%, #ffffff1f 62%, #0000 69%); }
.sp-vinyl .vs-art::after { content: ""; position: absolute; inset: 64px; border-radius: 50%;
  background: radial-gradient(circle, #0000 0 4px, #0b0b0d 5px 7px, #0000 8px), conic-gradient(var(--a), var(--a2), var(--a) 50%, var(--a2), var(--a));
  box-shadow: inset 0 0 0 3px #fff3; animation: fx-spin 1.8s linear infinite; }
.sp-vinyl .vs-art i:nth-child(1) { display: block; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(#0000 0 84%, #ffffff1c 92%, #ffffff40 93%, #0000 94%); animation: fx-spin 1.8s linear infinite; }
.sp-vinyl .vs-art i:nth-child(2) { display: block; position: absolute; left: 96%; top: -18%; width: 9px; height: 170px; border-radius: 5px; transform-origin: 50% 0;
  background: linear-gradient(90deg, #8d8d94, #f1f1f4 45%, #7a7a80); box-shadow: 4px 6px 10px #0008; transform: rotate(26deg); animation: vx-arm .9s .4s cubic-bezier(.3,1.3,.5,1) both; }
.sp-vinyl .vs-art i:nth-child(2)::after { content: ""; position: absolute; left: -6px; bottom: -14px; width: 20px; height: 26px; border-radius: 4px; background: linear-gradient(#d4d4d8, #6b6b72); }
@keyframes vx-arm { from { transform: rotate(-8deg); } }
.sp-vinyl .vs-art i:nth-child(3) { display: block; position: absolute; left: calc(96% - 14px); top: calc(-18% - 18px); width: 38px; height: 38px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fafafa, #9a9aa2 55%, #4b4b52); box-shadow: 0 6px 12px #0009; }
.sp-vinyl .vs-art i:nth-child(n+4):nth-child(-n+6) { display: block; position: absolute; font: 700 26px/1 system-ui, sans-serif; font-style: normal; color: var(--a2); text-shadow: 0 0 12px var(--a);
  opacity: 0; animation: vx-note 2.2s ease-out infinite; }
.sp-vinyl .vs-art i:nth-child(4) { left: -8%; top: 30%; } .sp-vinyl .vs-art i:nth-child(4)::before { content: "\266A"; }
.sp-vinyl .vs-art i:nth-child(5) { right: -10%; top: 46%; animation-delay: .7s; } .sp-vinyl .vs-art i:nth-child(5)::before { content: "\266B"; }
.sp-vinyl .vs-art i:nth-child(6) { left: 2%; top: 66%; animation-delay: 1.4s; font-size: 20px; } .sp-vinyl .vs-art i:nth-child(6)::before { content: "\266A"; }
@keyframes vx-note { 0% { opacity: 0; transform: translateY(10px) rotate(-10deg); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-70px) rotate(12deg); } }
.sp-vinyl .vs-name { filter: drop-shadow(0 2px 8px #000c); }

/* ---------- Liquid fill: your colour rising like a wave ---------- */
.sp-liquid { background: radial-gradient(60% 40% at 50% 30%, var(--a-20), transparent 70%), #07060f; }
.sp-liquid .vs-art { position: absolute; inset: 0; overflow: hidden; }
.sp-liquid .vs-art::before, .sp-liquid .vs-art::after { content: ""; position: absolute; left: 50%; width: max(1500px, 250%); aspect-ratio: 1; translate: -50% 0; border-radius: 43%;
  animation: vx-fill 1.5s cubic-bezier(.3,.7,.3,1) both, fx-spin 7s linear infinite; }
.sp-liquid .vs-art::before { top: 61%; background: var(--a-45); animation-duration: 1.5s, 10s; }
.sp-liquid .vs-art::after { top: 64%; border-radius: 41%; background: radial-gradient(closest-side, color-mix(in oklab, var(--a2) 45%, #000) 80%, color-mix(in oklab, var(--a) 85%, #000) 97%, var(--a) 100%);
  animation-direction: normal, reverse; }
@keyframes vx-fill { from { top: 108%; } }
.sp-liquid .vs-art i:nth-child(-n+8) { display: block; position: absolute; bottom: -12px; z-index: 1; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #ffffff80;
  opacity: 0; animation: vx-bub 2.4s ease-in infinite; }
.sp-liquid .vs-art i:nth-child(1) { left: 12%; } .sp-liquid .vs-art i:nth-child(2) { left: 28%; width: 5px; height: 5px; animation-delay: .4s; }
.sp-liquid .vs-art i:nth-child(3) { left: 44%; animation-delay: 1.1s; width: 12px; height: 12px; } .sp-liquid .vs-art i:nth-child(4) { left: 60%; animation-delay: .7s; }
.sp-liquid .vs-art i:nth-child(5) { left: 74%; width: 6px; height: 6px; animation-delay: 1.5s; } .sp-liquid .vs-art i:nth-child(6) { left: 88%; animation-delay: .2s; width: 10px; height: 10px; }
.sp-liquid .vs-art i:nth-child(7) { left: 20%; animation-delay: 1.8s; width: 6px; height: 6px; } .sp-liquid .vs-art i:nth-child(8) { left: 82%; animation-delay: 1s; width: 5px; height: 5px; }
@keyframes vx-bub { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 90% { opacity: .8; } 100% { opacity: 0; transform: translateY(-210px) translateX(8px); } }
.sp-liquid .vs-name { background-image: linear-gradient(100deg, #fff 30%, #ffffffaa 50%, #fff 70%); filter: drop-shadow(0 2px 10px #000b); }
.sp-liquid .vs-bar { background: #ffffff33; } .sp-liquid .vs-bar i { background: #fff; }

/* ---------- Ink drop: ink blooming out on paper (light) ---------- */
.sp-ink { background: radial-gradient(90% 70% at 50% 45%, #fffdf8, #efe8da); }
.sp-ink .vs-art { position: absolute; left: 50%; top: var(--logo-y); width: 0; height: 0; }
.sp-ink .vs-art i { display: block; position: absolute; left: 0; top: 0; border-radius: 47% 53% 44% 56% / 52% 45% 55% 48%; }
.sp-ink .vs-art i:nth-child(1) { width: 196px; height: 196px; margin: -98px; background: radial-gradient(circle at 45% 42%, color-mix(in oklab, var(--a) 80%, #fff), var(--a) 55%, color-mix(in oklab, var(--a) 80%, #000));
  filter: blur(1px); animation: vx-bloom 1.3s .22s cubic-bezier(.15,.8,.25,1) both, vx-morph 5s 1.5s ease-in-out infinite alternate; }
.sp-ink .vs-art i:nth-child(2) { width: 300px; height: 290px; margin: -145px -150px; background: var(--a-30); filter: blur(6px); animation: vx-bloom 1.6s .3s cubic-bezier(.15,.8,.25,1) both, vx-morph 6s 1.8s ease-in-out infinite alternate-reverse; }
.sp-ink .vs-art i:nth-child(3) { width: 440px; height: 420px; margin: -210px -220px; background: var(--a-12); filter: blur(14px); animation: vx-bloom 2s .38s cubic-bezier(.15,.8,.25,1) both; }
@keyframes vx-bloom { from { transform: scale(0) rotate(-30deg); } }
@keyframes vx-morph { to { border-radius: 55% 45% 58% 42% / 44% 56% 46% 54%; transform: rotate(20deg); } }
.sp-ink .vs-art i:nth-child(4) { width: 18px; height: 26px; margin: -13px -9px; border-radius: 50% 50% 50% 50% / 62% 62% 40% 40%; background: var(--a); opacity: 0;
  animation: vx-inkdrop .26s cubic-bezier(.5,0,1,.6) both; }
@keyframes vx-inkdrop { from { opacity: 1; transform: translateY(-420px) scaleY(1.4); } 99% { opacity: 1; } to { opacity: 0; } }
.sp-ink .vs-art i:nth-child(n+5) { width: var(--s); height: var(--s); margin: calc(var(--s) / -2); background: var(--a); animation: vx-splat .5s cubic-bezier(.2,1.4,.4,1) both; }
.sp-ink .vs-art i:nth-child(5) { --s: 22px; translate: -128px -86px; animation-delay: .32s; } .sp-ink .vs-art i:nth-child(6) { --s: 12px; translate: -150px -40px; animation-delay: .36s; }
.sp-ink .vs-art i:nth-child(7) { --s: 26px; translate: 132px -110px; animation-delay: .3s; } .sp-ink .vs-art i:nth-child(8) { --s: 10px; translate: 160px -60px; animation-delay: .4s; }
.sp-ink .vs-art i:nth-child(9) { --s: 16px; translate: -60px -170px; animation-delay: .34s; } .sp-ink .vs-art i:nth-child(10) { --s: 9px; translate: 70px -180px; animation-delay: .42s; }
.sp-ink .vs-art i:nth-child(11) { --s: 14px; translate: 150px 30px; animation-delay: .38s; } .sp-ink .vs-art i:nth-child(12) { --s: 11px; translate: -158px 40px; animation-delay: .44s; }
@keyframes vx-splat { from { transform: scale(0); } }
.sp-ink .vs-mid .orb .halo { display: none; }
.sp-ink .vs-name { filter: drop-shadow(0 0 6px #fffdf8) drop-shadow(0 0 2px #fffdf8); }
.sp-ink .vs-mid .orb .ball { box-shadow: 0 0 0 4px #fffdf8, 0 10px 30px #0003; }
.vsplash.sp-ink .vs-mid .orb { animation: vs-fadein .9s .45s ease both; }

/* ---------- Paint splash (light) ---------- */
.sp-paint { background: radial-gradient(80% 60% at 50% 45%, #fff, #f4f2ef); }
.sp-paint .vs-art { position: absolute; inset: 0; overflow: hidden; }
.sp-paint .vs-art i { display: block; position: absolute; width: var(--w, 150px); aspect-ratio: 1; translate: -50% -50%;
  background: radial-gradient(circle at 50% 50%, var(--c) 0 33%, #0000 33.5%), radial-gradient(circle at 20% 28%, var(--c) 0 11%, #0000 11.5%),
    radial-gradient(circle at 79% 24%, var(--c) 0 10%, #0000 10.5%), radial-gradient(circle at 84% 68%, var(--c) 0 12%, #0000 12.5%),
    radial-gradient(circle at 28% 80%, var(--c) 0 9%, #0000 9.5%), radial-gradient(circle at 7% 58%, var(--c) 0 4.5%, #0000 5%),
    radial-gradient(circle at 60% 5%, var(--c) 0 4.5%, #0000 5%), radial-gradient(circle at 96% 44%, var(--c) 0 3.5%, #0000 4%),
    radial-gradient(circle at 56% 95%, var(--c) 0 3.5%, #0000 4%), radial-gradient(circle at 40% 30%, var(--c) 0 22%, #0000 22.5%), radial-gradient(circle at 62% 64%, var(--c) 0 21%, #0000 21.5%);
  animation: vx-paint .55s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes vx-paint { from { transform: scale(0) rotate(var(--r0, -40deg)); } }
.sp-paint .vs-art i:nth-child(1) { --c: var(--a); --w: 250px; left: 50%; top: calc(var(--logo-y) - 14px); rotate: 200deg; animation-delay: .05s; }
.sp-paint .vs-art i:nth-child(2) { --c: var(--a2); --w: 170px; left: 8%; top: 12%; rotate: 40deg; animation-delay: .18s; }
.sp-paint .vs-art i:nth-child(3) { --c: #22d3ee; --w: 150px; left: 94%; top: 18%; rotate: 130deg; animation-delay: .26s; }
.sp-paint .vs-art i:nth-child(4) { --c: #ffc15e; --w: 190px; left: 90%; top: 86%; rotate: -20deg; animation-delay: .34s; }
.sp-paint .vs-art i:nth-child(5) { --c: #ff5d7a; --w: 160px; left: 6%; top: 82%; rotate: 80deg; animation-delay: .42s; }
.sp-paint .vs-art i:nth-child(6) { --c: #84cc16; --w: 80px; left: 18%; top: 50%; rotate: 160deg; animation-delay: .5s; }
.sp-paint .vs-art i:nth-child(7) { --c: var(--a2); --w: 70px; left: 84%; top: 52%; rotate: 260deg; animation-delay: .56s; }
.sp-paint .vs-art i:nth-child(8) { --c: var(--a); --w: 60px; left: 56%; top: 8%; rotate: 20deg; animation-delay: .6s; }
.sp-paint .vs-art i:nth-child(9) { --c: #22d3ee; --w: 54px; left: 40%; top: 94%; rotate: 300deg; animation-delay: .64s; }
.sp-paint .vs-art i:nth-child(10) { --c: #ffc15e; --w: 44px; left: 28%; top: 22%; rotate: 100deg; animation-delay: .68s; }
.sp-paint .vs-art i:nth-child(n+11) { display: none; }
.sp-paint .vs-mid .orb .ball { box-shadow: 0 0 0 5px #fff, 0 12px 30px #0003; }
.vsplash.sp-paint .vs-mid .orb { animation: vs-pop .7s .2s cubic-bezier(.2,1.3,.4,1) both; }
.sp-paint .vs-name { filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 2px #fff); }

/* ---------- Shatter: glass breaks away ---------- */
.sp-shatter { background: radial-gradient(50% 36% at 50% 44%, var(--a-60), transparent 72%), radial-gradient(100% 80% at 50% 44%, #1a1430, #05040a 75%); }
.sp-shatter .vs-art { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.sp-shatter .vs-art i { display: block; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(135deg, #ffffff1f, #ffffff05 35%, #ffffff17 55%, #ffffff03 80%), radial-gradient(120% 90% at 50% 44%, #1a1a2c, #08080f);
  animation: vx-shard .6s cubic-bezier(.5,0,.85,.4) both; }
@keyframes vx-shard { from { opacity: 1; transform: none; } 15% { opacity: 1; } to { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.85); } }
.sp-shatter .vs-art::before { content: ""; position: absolute; inset: 0; z-index: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M50 44 L0 0 M50 44 L38 0 M50 44 L72 0 M50 44 L100 0 M50 44 L100 38 M50 44 L100 74 M50 44 L100 100 M50 44 L66 100 M50 44 L30 100 M50 44 L0 100 M50 44 L0 70 M50 44 L0 32 M48.2 38.8 L52.4 37.5 M52.4 37.5 L60.5 35.4 M60.5 35.4 L59.6 43.2 M59.6 43.2 L58.2 48.0 M58.2 48.0 L56.0 50.3 M56.0 50.3 L52.0 55.8 M52.0 55.8 L46.0 55.0 M43.1 48.6 L40.6 41.6 M40.6 41.6 L43.6 39.1 M30.5 28.7 L45.4 27.2 M57.5 29.5 L67.6 29.4 M67.6 29.4 L65.0 42.1 M68.9 52.6 L64.3 63.9 M64.3 63.9 L55.0 63.3 M55.0 63.3 L43.3 62.0 M30.0 61.0 L33.5 51.9 M33.5 51.9 L32.2 40.2 M32.2 40.2 L30.5 28.7 M21.9 17.8 L43.5 16.6 M43.5 16.6 L64.2 15.2 M81.4 15.2 L77.1 40.6 M77.1 40.6 L82.8 63.0 M82.8 63.0 L79.5 80.6 M59.8 79.7 L38.5 75.5 M38.5 75.5 L20.3 75.2 M20.3 75.2 L20.7 61.0 M20.7 61.0 L21.0 37.5 M21.0 37.5 L21.9 17.8' fill='none' stroke='%23fff' stroke-opacity='.8' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0/100% 100%;
  opacity: 0; animation: vx-crack .34s linear both; }
@keyframes vx-crack { from { opacity: 0; clip-path: circle(0 at 50% 44%); } 30% { opacity: 1; } 75% { opacity: 1; clip-path: circle(80% at 50% 44%); } to { opacity: 0; clip-path: circle(80% at 50% 44%); } }
.sp-shatter .vs-art::after { content: ""; position: absolute; left: 50%; top: 44%; width: 160px; height: 160px; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, #fff, #ffffff55 40%, #0000); opacity: 0; animation: vx-impact .4s .08s ease-out both; }
@keyframes vx-impact { from { opacity: 1; transform: scale(.2); } to { opacity: 0; transform: scale(2); } }
.sp-shatter .vs-art i:nth-child(1) { clip-path: polygon(50% 44%, 0% 0%, 38% 0%); transform-origin: 29.3% 14.7%; --dx: -98px; --dy: 37px; --r: 25deg; animation-delay: 0.22s; }
.sp-shatter .vs-art i:nth-child(2) { clip-path: polygon(50% 44%, 38% 0%, 72% 0%); transform-origin: 53.3% 14.7%; --dx: 19px; --dy: 11px; --r: -42deg; animation-delay: 0.26s; }
.sp-shatter .vs-art i:nth-child(3) { clip-path: polygon(50% 44%, 72% 0%, 100% 0%); transform-origin: 74.0% 14.7%; --dx: 108px; --dy: 44px; --r: 59deg; animation-delay: 0.30s; }
.sp-shatter .vs-art i:nth-child(4) { clip-path: polygon(50% 44%, 100% 0%, 100% 38%); transform-origin: 83.3% 27.3%; --dx: 152px; --dy: 93px; --r: -36deg; animation-delay: 0.24s; }
.sp-shatter .vs-art i:nth-child(5) { clip-path: polygon(50% 44%, 100% 38%, 100% 74%); transform-origin: 83.3% 52.0%; --dx: 165px; --dy: 195px; --r: 53deg; animation-delay: 0.28s; }
.sp-shatter .vs-art i:nth-child(6) { clip-path: polygon(50% 44%, 100% 74%, 100% 100%); transform-origin: 83.3% 72.7%; --dx: 129px; --dy: 258px; --r: -30deg; animation-delay: 0.22s; }
.sp-shatter .vs-art i:nth-child(7) { clip-path: polygon(50% 44%, 100% 100%, 66% 100%); transform-origin: 72.0% 81.3%; --dx: 86px; --dy: 289px; --r: 47deg; animation-delay: 0.26s; }
.sp-shatter .vs-art i:nth-child(8) { clip-path: polygon(50% 44%, 66% 100%, 30% 100%); transform-origin: 48.7% 81.3%; --dx: -6px; --dy: 310px; --r: -64deg; animation-delay: 0.30s; }
.sp-shatter .vs-art i:nth-child(9) { clip-path: polygon(50% 44%, 30% 100%, 0% 100%); transform-origin: 26.7% 81.3%; --dx: -90px; --dy: 287px; --r: 41deg; animation-delay: 0.24s; }
.sp-shatter .vs-art i:nth-child(10) { clip-path: polygon(50% 44%, 0% 100%, 0% 70%); transform-origin: 16.7% 71.3%; --dx: -131px; --dy: 255px; --r: -58deg; animation-delay: 0.28s; }
.sp-shatter .vs-art i:nth-child(11) { clip-path: polygon(50% 44%, 0% 70%, 0% 32%); transform-origin: 16.7% 48.7%; --dx: -168px; --dy: 181px; --r: 35deg; animation-delay: 0.22s; }
.sp-shatter .vs-art i:nth-child(12) { clip-path: polygon(50% 44%, 0% 32%, 0% 0%); transform-origin: 16.7% 25.3%; --dx: -148px; --dy: 87px; --r: -52deg; animation-delay: 0.26s; }
.vsplash.sp-shatter .vs-mid .orb { animation: vs-zoom .7s .3s cubic-bezier(.2,.8,.2,1) both, vs-glow 2.4s 1.2s ease-in-out infinite; }
.sp-shatter .vs-name { animation: vs-up .7s .5s cubic-bezier(.2,.8,.2,1) both, hx-shine 3s 1.4s linear infinite; }

/* ---------- Portal: a swirling ring opens ---------- */
.sp-portal { background: radial-gradient(50% 35% at 50% 44%, var(--a-20), transparent 70%), #04030b; }
.sp-portal .vs-art { position: absolute; left: 50%; top: var(--logo-y); width: 240px; height: 240px; translate: -50% -50%;
  filter: drop-shadow(0 0 14px var(--a)); animation: vx-open .8s cubic-bezier(.2,1.25,.4,1) both; }
@keyframes vx-open { from { opacity: 0; transform: scale(0) rotate(-200deg); } }
.sp-portal .vs-art::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--a), #22d3ee, var(--a2), #fff, var(--a));
  -webkit-mask: radial-gradient(closest-side, #0000 80%, #000 82% 93%, #0000 96%); mask: radial-gradient(closest-side, #0000 80%, #000 82% 93%, #0000 96%); animation: fx-spin .9s linear infinite; }
.sp-portal .vs-art::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: repeating-conic-gradient(var(--a-60) 0 9deg, #0000 9deg 24deg);
  -webkit-mask: radial-gradient(closest-side, #0000 46%, #000 88%, #0000); mask: radial-gradient(closest-side, #0000 46%, #000 88%, #0000); filter: blur(1.5px); animation: fx-spin 2.2s linear infinite reverse; }
.sp-portal .vs-art i:nth-child(1) { display: block; position: absolute; inset: -34px; border-radius: 50%; border: 2px dashed var(--a2-45); animation: fx-spin 7s linear infinite; }
.sp-portal .vs-art i:nth-child(2) { display: block; position: absolute; inset: -70px; border-radius: 50%; border: 1px solid var(--a-20); animation: vx-pulse 1.6s ease-in-out infinite; }
@keyframes vx-pulse { 50% { transform: scale(1.06); opacity: .4; } }
.sp-portal .vs-art i:nth-child(n+3) { display: block; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 8px var(--a2), 0 0 2px #fff; rotate: var(--r); opacity: 0; animation: vx-spark 1.4s cubic-bezier(.4,0,.8,.6) infinite; }
.sp-portal .vs-art i:nth-child(3) { --r: 0deg; } .sp-portal .vs-art i:nth-child(4) { --r: 36deg; animation-delay: .5s; } .sp-portal .vs-art i:nth-child(5) { --r: 80deg; animation-delay: .2s; }
.sp-portal .vs-art i:nth-child(6) { --r: 125deg; animation-delay: .9s; } .sp-portal .vs-art i:nth-child(7) { --r: 170deg; animation-delay: .35s; } .sp-portal .vs-art i:nth-child(8) { --r: 210deg; animation-delay: 1.1s; }
.sp-portal .vs-art i:nth-child(9) { --r: 250deg; animation-delay: .7s; } .sp-portal .vs-art i:nth-child(10) { --r: 290deg; animation-delay: .1s; } .sp-portal .vs-art i:nth-child(11) { --r: 320deg; animation-delay: 1.25s; }
.sp-portal .vs-art i:nth-child(12) { --r: 345deg; animation-delay: .6s; background: var(--a2); }
@keyframes vx-spark { 0% { opacity: 0; transform: rotate(0) translateX(200px); } 20% { opacity: 1; } 100% { opacity: 0; transform: rotate(300deg) translateX(70px) scale(.4); } }
.sp-portal .vs-name { filter: drop-shadow(0 0 6px #04030b) drop-shadow(0 2px 10px #000); }
.vsplash.sp-portal .vs-mid .orb { animation: vs-spin 1s .25s cubic-bezier(.2,.8,.2,1) both, vs-glow 2.4s 1.3s ease-in-out infinite; }

/* ---------- Hologram: a flickering projection ---------- */
.sp-hologram { background: radial-gradient(60% 45% at 50% 48%, #0b3a44, #020b10 72%); }
.sp-hologram .vs-art { position: absolute; inset: 0; overflow: hidden; }
.sp-hologram .vs-art::before { content: ""; position: absolute; left: -20%; right: -20%; bottom: 0; height: 30%; transform: perspective(300px) rotateX(58deg); transform-origin: 50% 100%;
  background: repeating-linear-gradient(90deg, #22d3ee40 0 1px, #0000 1px 40px), repeating-linear-gradient(0deg, #22d3ee40 0 1px, #0000 1px 30px);
  -webkit-mask: linear-gradient(#0000, #000 60%); mask: linear-gradient(#0000, #000 60%); animation: vx-floor 1.2s linear infinite; }
@keyframes vx-floor { to { background-position: 0 0, 0 30px; } }
.sp-hologram .vs-art::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, #67e8f914 0 1px, #0000 1px 4px); animation: vx-lines 1s linear infinite; }
@keyframes vx-lines { to { background-position: 0 8px; } }
.sp-hologram .vs-art i:nth-child(1) { display: block; position: absolute; left: 50%; top: 77%; width: 190px; height: 40px; margin-left: -95px; border-radius: 50%;
  background: radial-gradient(closest-side, #ecfeff, #22d3ee 38%, #0e7490 68%, #0000 72%); box-shadow: 0 0 50px #22d3ee88; animation: vx-pulse 1.4s ease-in-out infinite; }
.sp-hologram .vs-art i:nth-child(2) { display: block; position: absolute; left: 50%; width: 380px; margin-left: -190px; top: 13%; bottom: 21%;
  clip-path: polygon(0 0, 100% 0, 66% 100%, 34% 100%); background: linear-gradient(#22d3ee08, #22d3ee38); animation: vx-beam 1.1s linear infinite; }
.sp-hologram .vs-art i:nth-child(3) { display: block; position: absolute; left: 50%; width: 300px; margin-left: -150px; height: 3px; top: 78%; z-index: 1;
  background: linear-gradient(90deg, #0000, #a5f3fc, #0000); box-shadow: 0 0 14px #67e8f9; animation: vx-scanup 1.7s ease-in-out infinite; }
@keyframes vx-scanup { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-420px); opacity: 0; } }
.sp-hologram .vs-art i:nth-child(4), .sp-hologram .vs-art i:nth-child(5) { display: block; position: absolute; left: 50%; top: var(--logo-y); width: 210px; height: 210px; margin: -105px; border-radius: 50%;
  border: 2px dashed #67e8f980; transform: perspective(600px) rotateX(74deg); animation: vx-holoring 4s linear infinite; }
.sp-hologram .vs-art i:nth-child(5) { width: 260px; height: 260px; margin: -130px; border: 1px solid #67e8f94d; animation-duration: 7s; animation-direction: reverse; }
@keyframes vx-holoring { to { transform: perspective(600px) rotateX(74deg) rotate(360deg); } }
.vsplash.sp-hologram .vs-mid .orb { animation: vx-holoin 1s .1s linear both, vx-holoflick 3s 1.2s steps(1) infinite; filter: drop-shadow(0 0 18px #22d3ee); }
.sp-hologram .vs-mid .orb::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 50%; background: repeating-linear-gradient(0deg, #22d3ee2e 0 2px, #0000 2px 4px); }
.sp-hologram .orb .halo { background: conic-gradient(from 0deg, #0000, #67e8f9, #0000 35%, #22d3ee, #0000 70%); }
@keyframes vx-holoin { 0% { opacity: 0; transform: scaleY(.02); } 30% { opacity: .8; transform: scaleY(1.05); } 38% { opacity: .2; } 46% { opacity: .9; transform: none; } 52% { opacity: .4; } 60%, 100% { opacity: 1; } }
@keyframes vx-holoflick { 0%, 100% { opacity: 1; transform: none; } 47% { opacity: .55; transform: translateX(3px); } 49% { opacity: 1; transform: none; } }
.sp-hologram .vs-name { background-image: linear-gradient(100deg, #ecfeff 20%, #22d3ee 45%, #ecfeff 70%); filter: drop-shadow(0 0 10px #22d3ee88);
  animation: vx-holoin .9s .35s linear both, hx-shine 3s 1.3s linear infinite; }
.sp-hologram .vs-bar i { background: linear-gradient(90deg, #22d3ee, #a5f3fc); }

/* ---------- Blueprint: lines drawing themselves ---------- */
@property --vx-draw { syntax: "<angle>"; inherits: false; initial-value: 360deg; }
.sp-blueprint { background: radial-gradient(80% 60% at 50% 45%, color-mix(in oklab, #1d4ed8 82%, var(--a)), color-mix(in oklab, #0b1f5c 90%, var(--a)) 90%); }
.sp-blueprint .vs-art { position: absolute; inset: 0; overflow: hidden; }
.sp-blueprint .vs-art::before { content: ""; position: absolute; inset: 0; background-position: 50% calc(var(--logo-y));
  background-image: repeating-linear-gradient(0deg, #ffffff2a 0 1px, #0000 1px 60px), repeating-linear-gradient(90deg, #ffffff2a 0 1px, #0000 1px 60px),
    repeating-linear-gradient(0deg, #ffffff10 0 1px, #0000 1px 12px), repeating-linear-gradient(90deg, #ffffff10 0 1px, #0000 1px 12px);
  animation: vx-show .5s ease both; }
.sp-blueprint .vs-art i:nth-child(1) { display: block; position: absolute; left: 0; right: 0; top: var(--logo-y); height: 1px; background: repeating-linear-gradient(90deg, #ffffffc0 0 10px, #0000 10px 16px);
  animation: vx-drawx .6s .1s cubic-bezier(.3,.7,.3,1) both; }
.sp-blueprint .vs-art i:nth-child(2) { display: block; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: repeating-linear-gradient(0deg, #ffffffc0 0 10px, #0000 10px 16px);
  animation: vx-drawy .6s .2s cubic-bezier(.3,.7,.3,1) both; }
@keyframes vx-drawx { from { transform: scaleX(0); } } @keyframes vx-drawy { from { transform: scaleY(0); } }
.sp-blueprint .vs-art i:nth-child(3), .sp-blueprint .vs-art i:nth-child(4) { display: block; position: absolute; left: 50%; top: var(--logo-y); width: 196px; height: 196px; margin: -98px; border-radius: 50%;
  border: 2px solid #fff; -webkit-mask: conic-gradient(#000 var(--vx-draw), #0000 0); mask: conic-gradient(#000 var(--vx-draw), #0000 0); animation: vx-draw .9s .3s cubic-bezier(.4,0,.3,1) both; }
.sp-blueprint .vs-art i:nth-child(4) { width: 266px; height: 266px; margin: -133px; border: 1px dashed #ffffffa0; animation-delay: .55s; animation-duration: 1.1s; rotate: 90deg; }
@keyframes vx-draw { from { --vx-draw: 0deg; } }
.sp-blueprint .vs-art i:nth-child(5) { display: block; position: absolute; left: calc(50% + 120px); top: calc(var(--logo-y) - 66px); width: 12px; height: 132px; border: 1px solid #fffc; border-left: 0;
  transform-origin: 50% 0; animation: vx-drawy .5s .9s ease-out both; }
.sp-blueprint .vs-art i:nth-child(5)::after { content: "132"; position: absolute; left: 18px; top: 50%; translate: 0 -50%; font: 600 11px/1 ui-monospace, Menlo, Consolas, monospace; font-style: normal; color: #fffc; letter-spacing: .08em; }
.sp-blueprint .vs-art i:nth-child(6) { display: block; position: absolute; right: 6%; bottom: 5%; padding: 8px 10px; border: 1.5px solid #ffffffb3;
  font: 600 10px/1.5 ui-monospace, Menlo, Consolas, monospace; font-style: normal; letter-spacing: .12em; color: #ffffffd0; white-space: pre; animation: vx-show .5s 1s both; }
.sp-blueprint .vs-art i:nth-child(6)::before { content: "DRAWING NO. 001\A SCALE 1:1  REV A"; }
.sp-blueprint .vs-art i:nth-child(7), .sp-blueprint .vs-art i:nth-child(8) { display: block; position: absolute; top: 6%; width: 26px; height: 26px; border-radius: 50%; border: 1px solid #fffa;
  background: linear-gradient(#fffa, #fffa) 50% 50%/1px 140% no-repeat, linear-gradient(#fffa, #fffa) 50% 50%/140% 1px no-repeat; animation: vx-show .4s .7s both; }
.sp-blueprint .vs-art i:nth-child(7) { left: 6%; } .sp-blueprint .vs-art i:nth-child(8) { right: 6%; }
.vsplash.sp-blueprint .vs-mid .orb { animation: vs-fadein .7s .35s ease both; }
.sp-blueprint .vs-mid .orb .ball { box-shadow: 0 0 0 2px #fff, 0 0 40px #ffffff33; }
.sp-blueprint .vs-name { background-image: linear-gradient(100deg, #fff 30%, #bfdbfe 50%, #fff 70%); animation: vs-up .6s .5s cubic-bezier(.2,.8,.2,1) both, hx-shine 3s 1.4s linear infinite; }
.sp-blueprint .vs-bar i { background: #fff; }

/* ---------- Constellation: stars join up (with twinkling stars behind) ---------- */
.sp-constellation { background: radial-gradient(50% 35% at 50% 44%, var(--a-20), transparent 70%), radial-gradient(120% 90% at 50% 0%, #161c48, #03040e 72%); }
.sp-constellation .vs-art { position: absolute; left: 50%; top: var(--logo-y); width: 0; height: 0; }
.sp-constellation .vs-art::before, .sp-constellation .vs-art i:nth-child(-n+6) { content: ""; display: block; position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 35%, var(--a2) 70%, #0000 72%); box-shadow: 0 0 14px var(--a2), 0 0 4px #fff; animation: vx-star .45s cubic-bezier(.2,1.6,.4,1) both, vx-tw 2s ease-in-out infinite; }
.sp-constellation .vs-art::before { animation-delay: 0s, 1.2s; }
@keyframes vx-star { from { opacity: 0; transform: scale(0); } }
@keyframes vx-tw { 50% { transform: scale(.7); opacity: .7; } }
.sp-constellation .vs-art i:nth-child(n+7) { display: block; position: absolute; left: 0; top: -.75px; height: 1.5px; transform-origin: 0 50%;
  background: linear-gradient(90deg, #ffffffcc, var(--a2), #ffffffcc); box-shadow: 0 0 6px var(--a2); opacity: .75; animation: vx-drawx .2s linear both; }
.sp-constellation .vs-art::before { translate: -150px -100px; }
.sp-constellation .vs-art i:nth-child(1) { translate: -112px -190px; animation-delay: 0.32s, 1.70s; }
.sp-constellation .vs-art i:nth-child(2) { translate: -10px -228px; animation-delay: 0.49s, 2.00s; }
.sp-constellation .vs-art i:nth-child(3) { translate: 100px -190px; animation-delay: 0.66s, 2.30s; }
.sp-constellation .vs-art i:nth-child(4) { translate: 150px -95px; animation-delay: 0.83s, 2.60s; }
.sp-constellation .vs-art i:nth-child(5) { translate: 128px 165px; animation-delay: 1.00s, 2.90s; }
.sp-constellation .vs-art i:nth-child(6) { translate: -40px 200px; animation-delay: 1.17s, 3.20s; }
.sp-constellation .vs-art i:nth-child(7) { width: 98px; translate: -150px -100px; rotate: -67.1deg; animation-delay: 0.15s; }
.sp-constellation .vs-art i:nth-child(8) { width: 109px; translate: -112px -190px; rotate: -20.4deg; animation-delay: 0.32s; }
.sp-constellation .vs-art i:nth-child(9) { width: 116px; translate: -10px -228px; rotate: 19.1deg; animation-delay: 0.49s; }
.sp-constellation .vs-art i:nth-child(10) { width: 107px; translate: 100px -190px; rotate: 62.2deg; animation-delay: 0.66s; }
.sp-constellation .vs-art i:nth-child(11) { width: 261px; translate: 150px -95px; rotate: 94.8deg; animation-delay: 0.83s; }
.sp-constellation .vs-art i:nth-child(12) { width: 172px; translate: 128px 165px; rotate: 168.2deg; animation-delay: 1.00s; }
.vsplash.sp-constellation .vs-mid .orb { animation: vs-pop .9s .15s cubic-bezier(.2,1.3,.4,1) both, vs-glow 2.4s 1.2s ease-in-out infinite; }

/* ---------- Sunrise: the sun comes up over the hills ---------- */
.sp-sunrise { background: linear-gradient(#0a0f2c, #241a4b 55%, #4a2558 80%); }
.sp-sunrise .vs-art { position: absolute; inset: 0; overflow: hidden; }
.sp-sunrise .vs-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(#24407a, #6b4f93 30%, #c0607a 55%, #f08a5d 72%, #ffc27a 86%); animation: vx-show 1.8s ease both; }
.sp-sunrise .vs-art i:nth-child(1) { display: block; position: absolute; left: 50%; top: var(--logo-y); width: 190px; height: 190px; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, #fffbe8, #ffe08a 50%, #ffb054 88%, #ff9a3d); box-shadow: 0 0 60px 10px #ffb347aa, 0 0 160px 60px #ffb34755; animation: vx-sunup 1.5s cubic-bezier(.2,.7,.25,1) both; }
.sp-sunrise .vs-art i:nth-child(2) { display: block; position: absolute; left: 50%; top: var(--logo-y); width: 640px; height: 640px; translate: -50% -50%; border-radius: 50%;
  background: repeating-conic-gradient(#fff3c440 0 5deg, #0000 5deg 15deg); -webkit-mask: radial-gradient(closest-side, #000 20%, #0000 75%); mask: radial-gradient(closest-side, #000 20%, #0000 75%);
  animation: vx-sunup 1.5s cubic-bezier(.2,.7,.25,1) both, fx-spin 30s linear infinite; }
@keyframes vx-sunup { from { translate: -50% calc(-50% + 400px); opacity: .6; } }
.sp-sunrise .vs-art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 32%;
  background: radial-gradient(140% 55% at 50% 100%, #120a22 0 50%, #0000 50.5%), radial-gradient(90% 60% at 88% 100%, #1d1434 0 50%, #0000 50.5%),
    radial-gradient(110% 70% at 12% 100%, #2a1d44 0 50%, #0000 50.5%), radial-gradient(90% 85% at 62% 100%, #3a2650 0 50%, #0000 50.5%); }
.sp-sunrise .vs-art i:nth-child(n+3):nth-child(-n+5) { display: block; position: absolute; width: 16px; height: 8px; border: 2px solid #2a1838; border-color: #2a1838 #0000 #0000 #0000;
  border-radius: 50% 50% 0 0; animation: vx-bird 6s linear infinite; }
.sp-sunrise .vs-art i:nth-child(n+3):nth-child(-n+5)::after { content: ""; position: absolute; left: 12px; top: -2px; width: 16px; height: 8px; border: 2px solid; border-color: inherit; border-radius: 50% 50% 0 0; }
.sp-sunrise .vs-art i:nth-child(3) { left: 18%; top: 22%; } .sp-sunrise .vs-art i:nth-child(4) { left: 30%; top: 18%; scale: .7; animation-delay: -1s; } .sp-sunrise .vs-art i:nth-child(5) { left: 70%; top: 26%; scale: .8; animation-delay: -3s; }
@keyframes vx-bird { 0% { transform: translate(0, 0); } 50% { transform: translate(40px, -10px) scaleY(.6); } 100% { transform: translate(80px, 0); } }
.vsplash.sp-sunrise .vs-mid .orb { animation: vs-rise 1.2s .2s cubic-bezier(.2,.8,.2,1) both, vs-glow 2.4s 1.4s ease-in-out infinite; }
.sp-sunrise .vs-name { background-image: linear-gradient(100deg, #fff 30%, #fff1c2 50%, #fff 70%); filter: drop-shadow(0 2px 10px #4a1d4aaa); }
.sp-sunrise .vs-bar { background: #ffffff40; } .sp-sunrise .vs-bar i { background: #fff; }

/* ---------- Storm: rain and lightning ---------- */
.sp-storm { background: linear-gradient(#161c2a, #070a10); }
.sp-storm > .fx { --a: #8fb3ff; --a2: #d6e4ff; }
.sp-storm .vs-art { position: absolute; inset: 0; overflow: hidden; }
.sp-storm .vs-art::before { content: ""; position: absolute; left: -20%; right: -20%; top: -6%; height: 34%;
  background: radial-gradient(30% 50% at 15% 40%, #3a4358, #0000 72%), radial-gradient(28% 60% at 45% 30%, #465068, #0000 72%), radial-gradient(30% 55% at 75% 45%, #353e54, #0000 72%), radial-gradient(25% 50% at 95% 30%, #424c63, #0000 72%), radial-gradient(40% 40% at 30% 70%, #2a3144, #0000 72%), radial-gradient(40% 40% at 70% 75%, #2d3448, #0000 72%);
  animation: vx-clouds 6s ease-in-out infinite alternate; }
@keyframes vx-clouds { to { transform: translateX(-8%); } }
.sp-storm .vs-art::after { content: ""; position: absolute; inset: 0; background: #dfe8ff; opacity: 0; animation: vx-flash 2.6s linear infinite; mix-blend-mode: soft-light; }
@keyframes vx-flash { 0%, 25% { opacity: 0; } 26% { opacity: .9; } 28% { opacity: .1; } 30% { opacity: .75; } 37%, 70% { opacity: 0; } 71% { opacity: .6; } 75%, 100% { opacity: 0; } }
.sp-storm .vs-art i:nth-child(-n+2) { display: block; position: absolute; width: 70px; height: 230px; background: linear-gradient(#fff, #c7d8ff);
  clip-path: polygon(46% 0, 62% 0, 50% 36%, 70% 36%, 30% 100%, 42% 52%, 22% 52%); filter: drop-shadow(0 0 10px #9ec5ff); opacity: 0; animation: vx-bolt 2.6s linear infinite; }
.sp-storm .vs-art i:nth-child(1) { left: 12%; top: 8%; } .sp-storm .vs-art i:nth-child(2) { right: 8%; top: 12%; scale: -.8 .8; animation-name: vx-bolt2; }
@keyframes vx-bolt { 0%, 25% { opacity: 0; } 26% { opacity: 1; } 28% { opacity: .2; } 30% { opacity: 1; } 35%, 100% { opacity: 0; } }
@keyframes vx-bolt2 { 0%, 70% { opacity: 0; } 71% { opacity: 1; } 75%, 100% { opacity: 0; } }
.vsplash.sp-storm .vs-mid .orb { animation: vs-drop 1s cubic-bezier(.3,1.5,.5,1) both, vx-lit 2.6s linear infinite; }
@keyframes vx-lit { 0%, 25%, 36%, 70%, 75%, 100% { filter: drop-shadow(0 0 10px var(--a-45)); } 26%, 30%, 71% { filter: drop-shadow(0 0 30px #cfe0ff) brightness(1.25); } }
.sp-storm .vs-name { background-image: linear-gradient(100deg, #fff 20%, #b9d1ff 45%, #fff 70%); }

/* ---------- Fireworks over a city ---------- */
.sp-fireworks { background: linear-gradient(#060716, #140f38 70%, #2a1543); }
.sp-fireworks .vs-art { position: absolute; inset: 0; overflow: hidden; }
.sp-fireworks .vs-art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 15%;
  background: radial-gradient(#ffd27a 0 1px, #0000 1.6px) 4px 6px/14px 18px, #05040c;
  clip-path: polygon(0 40%, 8% 40%, 8% 18%, 15% 18%, 15% 50%, 22% 50%, 22% 8%, 27% 0, 32% 8%, 32% 45%, 40% 45%, 40% 25%, 50% 25%, 50% 55%, 57% 55%, 57% 12%, 64% 12%, 64% 38%, 72% 38%, 72% 20%, 78% 20%, 78% 48%, 86% 48%, 86% 15%, 93% 15%, 93% 42%, 100% 42%, 100% 100%, 0 100%); }
.sp-fireworks .vs-art i:nth-child(-n+9) { display: block; position: absolute; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: var(--c); color: var(--c);
  box-shadow: 64px 0px 0 0 var(--c), 59px 24px 0 0 var(--c), 45px 45px 0 0 var(--c), 24px 59px 0 0 var(--c), 0px 64px 0 0 var(--c), -24px 59px 0 0 var(--c), -45px 45px 0 0 var(--c), -59px 24px 0 0 var(--c), -64px 0px 0 0 var(--c), -59px -24px 0 0 var(--c), -45px -45px 0 0 var(--c), -24px -59px 0 0 var(--c), -0px -64px 0 0 var(--c), 24px -59px 0 0 var(--c), 45px -45px 0 0 var(--c), 59px -24px 0 0 var(--c), 36px 11px 0 0 var(--c), 23px 30px 0 0 var(--c), 1px 38px 0 0 var(--c), -22px 31px 0 0 var(--c), -36px 12px 0 0 var(--c), -36px -11px 0 0 var(--c), -23px -30px 0 0 var(--c), -1px -38px 0 0 var(--c), 22px -31px 0 0 var(--c), 36px -12px 0 0 var(--c), 14px 8px 0 0 var(--c), 0px 16px 0 0 var(--c), -14px 8px 0 0 var(--c), -14px -8px 0 0 var(--c), -0px -16px 0 0 var(--c), 14px -8px 0 0 var(--c); filter: drop-shadow(0 0 4px var(--c)); animation: vx-burst 1.5s cubic-bezier(.1,.8,.3,1) infinite; }
@keyframes vx-burst { 0% { transform: scale(.05); opacity: 0; } 4% { opacity: 1; } 70% { opacity: 1; } 100% { transform: scale(1) translateY(16px); opacity: 0; } }
.sp-fireworks .vs-art i:nth-child(1) { --c: var(--a2); left: 22%; top: 18%; animation-delay: .05s; }
.sp-fireworks .vs-art i:nth-child(2) { --c: #ffd27a; left: 78%; top: 14%; animation-delay: .35s; }
.sp-fireworks .vs-art i:nth-child(3) { --c: #22d3ee; left: 84%; top: 73%; animation-delay: .7s; scale: .8; }
.sp-fireworks .vs-art i:nth-child(4) { --c: var(--a); left: 16%; top: 74%; animation-delay: .5s; scale: .85; }
.sp-fireworks .vs-art i:nth-child(5) { --c: #ff5d7a; left: 50%; top: 9%; animation-delay: .95s; scale: .7; }
.sp-fireworks .vs-art i:nth-child(6) { --c: #a3e635; left: 32%; top: 34%; animation-delay: 1.15s; scale: .6; }
.sp-fireworks .vs-art i:nth-child(7) { --c: #fff; left: 70%; top: 36%; animation-delay: .2s; scale: .55; }
.sp-fireworks .vs-art i:nth-child(8) { --c: var(--a2); left: 56%; top: 80%; animation-delay: 1.3s; scale: .6; }
.sp-fireworks .vs-art i:nth-child(9) { --c: #ffd27a; left: 8%; top: 40%; animation-delay: .85s; scale: .5; }
.sp-fireworks .vs-art i:nth-child(n+10) { display: block; position: absolute; bottom: 12%; width: 2px; height: 40px; border-radius: 2px; background: linear-gradient(#fff, #0000); opacity: 0; animation: vx-rocket 1.5s ease-out infinite; }
.sp-fireworks .vs-art i:nth-child(10) { left: 30%; animation-delay: .4s; } .sp-fireworks .vs-art i:nth-child(11) { left: 66%; animation-delay: .9s; } .sp-fireworks .vs-art i:nth-child(12) { left: 46%; animation-delay: 1.2s; }
@keyframes vx-rocket { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: 1; } 45% { opacity: 0; transform: translateY(-300px); } 100% { opacity: 0; } }

/* ---------- Gold: black and gold with sparkles ---------- */
.sp-gold { background: radial-gradient(60% 40% at 50% 44%, #3d2c0f, #0000 70%), #090705; }
.sp-gold .vs-art { position: absolute; inset: 0; overflow: hidden; }
.sp-gold .vs-art i:nth-child(-n+4) { display: block; position: absolute; background: linear-gradient(90deg, #8a6220, #f5d98a, #8a6220); }
.sp-gold .vs-art i:nth-child(1), .sp-gold .vs-art i:nth-child(2) { left: 7%; right: 7%; height: 1.5px; animation: vx-drawx 1s .1s cubic-bezier(.4,0,.2,1) both; }
.sp-gold .vs-art i:nth-child(1) { top: 5%; } .sp-gold .vs-art i:nth-child(2) { bottom: 5%; }
.sp-gold .vs-art i:nth-child(3), .sp-gold .vs-art i:nth-child(4) { top: 5%; bottom: 5%; width: 1.5px; background: linear-gradient(#8a6220, #f5d98a, #8a6220); animation: vx-drawy 1s .1s cubic-bezier(.4,0,.2,1) both; }
.sp-gold .vs-art i:nth-child(3) { left: 7%; } .sp-gold .vs-art i:nth-child(4) { right: 7%; }
.sp-gold .vs-art::before { content: ""; position: absolute; inset: calc(5% + 8px) calc(7% + 8px); border: 1px solid #c9993b55; animation: vx-show .8s .6s both; }
.sp-gold .vs-art i:nth-child(n+5):nth-child(-n+8) { display: block; position: absolute; width: 12px; height: 12px; margin: -6px; rotate: 45deg; background: linear-gradient(135deg, #fff3c4, #c9993b); animation: vx-splat .5s .9s cubic-bezier(.2,1.6,.4,1) both; }
.sp-gold .vs-art i:nth-child(5) { left: 7%; top: 5%; } .sp-gold .vs-art i:nth-child(6) { right: 7%; top: 5%; margin-right: -6px; } .sp-gold .vs-art i:nth-child(7) { left: 7%; bottom: 5%; margin-bottom: -6px; } .sp-gold .vs-art i:nth-child(8) { right: 7%; bottom: 5%; margin: 0 -6px -6px 0; }
.sp-gold .vs-art i:nth-child(n+9) { display: block; position: absolute; width: 22px; height: 22px; background: radial-gradient(closest-side, #fff, #f5d98a 50%, #c9993b);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); filter: drop-shadow(0 0 6px #f5d98a); animation: vx-sparkle 1.6s ease-in-out infinite; }
.sp-gold .vs-art i:nth-child(9) { left: 22%; top: 24%; } .sp-gold .vs-art i:nth-child(10) { left: 76%; top: 30%; scale: .7; animation-delay: .5s; }
.sp-gold .vs-art i:nth-child(11) { left: 70%; top: 70%; scale: .8; animation-delay: .9s; } .sp-gold .vs-art i:nth-child(12) { left: 18%; top: 66%; scale: .55; animation-delay: 1.2s; }
@keyframes vx-sparkle { 0%, 100% { transform: scale(.2) rotate(0); opacity: .2; } 50% { transform: scale(1) rotate(90deg); opacity: 1; } }
.sp-gold .vs-art::after { content: ""; position: absolute; inset: -20% -60%; background: linear-gradient(105deg, #0000 42%, #fff3c41f 50%, #0000 58%); animation: vx-sweep 2.4s .5s ease-in-out infinite; }
@keyframes vx-sweep { from { transform: translateX(-60%); } to { transform: translateX(60%); } }
.sp-gold .orb .halo { background: conic-gradient(from 0deg, #0000, #f5d98a, #0000 35%, #c9993b, #0000 70%); }
.sp-gold .vs-mid .orb .ball { box-shadow: 0 0 0 3px #c9993b, 0 0 0 7px #0a0806, 0 0 0 8px #c9993b88, 0 0 50px #c9993b66; }
.vsplash.sp-gold .vs-mid .orb { animation: vx-goldin 1.3s .15s cubic-bezier(.2,.8,.2,1) both, vx-goldglow 2.4s 1.4s ease-in-out infinite; }
@keyframes vx-goldin { from { opacity: 0; transform: scale(.85); filter: blur(6px); } }
@keyframes vx-goldglow { 50% { filter: drop-shadow(0 0 22px #e9c46a99); } }
.sp-gold .vs-name { letter-spacing: .04em; background-image: linear-gradient(100deg, #b8862b 0%, #f5d98a 22%, #fff6d8 32%, #d4a54a 45%, #9b7026 58%, #e9c46a 75%, #b8862b 100%); }
.sp-gold .vs-bar { background: #c9993b33; } .sp-gold .vs-bar i { background: linear-gradient(90deg, #c9993b, #fff3c4); }

/* ---------- Racing: speed lines and a skid ---------- */
.sp-racing { background: radial-gradient(70% 40% at 50% 44%, var(--a-20), transparent 70%), linear-gradient(#0d0e14, #1b1d26 60%, #0d0e14); }
.sp-racing .vs-art { position: absolute; inset: 0; overflow: hidden; }
.sp-racing .vs-art i:nth-child(-n+10) { display: block; position: absolute; left: 100%; width: 45%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #ffffffd0, #0000);
  animation: vx-speed .5s linear infinite; }
@keyframes vx-speed { to { transform: translateX(-345%); } }
.sp-racing .vs-art i:nth-child(1) { top: 10%; } .sp-racing .vs-art i:nth-child(2) { top: 18%; animation-delay: -.2s; animation-duration: .4s; background: linear-gradient(90deg, var(--a), #0000); height: 3px; }
.sp-racing .vs-art i:nth-child(3) { top: 26%; animation-delay: -.35s; width: 30%; } .sp-racing .vs-art i:nth-child(4) { top: 33%; animation-delay: -.1s; animation-duration: .6s; }
.sp-racing .vs-art i:nth-child(5) { top: 64%; animation-delay: -.3s; background: linear-gradient(90deg, var(--a2), #0000); height: 3px; } .sp-racing .vs-art i:nth-child(6) { top: 72%; animation-delay: -.05s; width: 60%; }
.sp-racing .vs-art i:nth-child(7) { top: 79%; animation-delay: -.25s; animation-duration: .35s; } .sp-racing .vs-art i:nth-child(8) { top: 86%; animation-delay: -.4s; width: 35%; background: linear-gradient(90deg, var(--a), #0000); }
.sp-racing .vs-art i:nth-child(9) { top: 4%; animation-delay: -.15s; width: 25%; } .sp-racing .vs-art i:nth-child(10) { top: 92%; animation-delay: -.45s; animation-duration: .45s; }
.sp-racing .vs-art i:nth-child(11), .sp-racing .vs-art i:nth-child(12) { display: block; position: absolute; left: -10%; right: -10%; top: calc(var(--logo-y) - 30px); height: 60px; transform: skewY(-9deg);
  background: linear-gradient(90deg, #0000, var(--a-45) 25% 75%, #0000); animation: vx-stripe .5s cubic-bezier(.2,.8,.2,1) both; }
.sp-racing .vs-art i:nth-child(12) { top: calc(var(--logo-y) + 38px); height: 14px; background: linear-gradient(90deg, #0000, var(--a2-45) 25% 75%, #0000); animation-delay: .08s; }
@keyframes vx-stripe { from { transform: skewY(-9deg) translateX(110%); } }
.sp-racing .vs-art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 7%; height: 24px; opacity: .85;
  background: repeating-conic-gradient(#f4f4f5 0 25%, #111 0 50%) 0 0/24px 24px; transform: perspective(300px) rotateX(40deg); animation: vx-check .25s linear infinite; }
@keyframes vx-check { to { background-position: -48px 0; } }
.vsplash.sp-racing .vs-mid .orb { animation: vx-skid .95s .1s cubic-bezier(.2,.9,.25,1) both, vs-glow 2.4s 1.2s ease-in-out infinite; }
@keyframes vx-skid { from { opacity: 0; transform: translateX(-460px) skewX(-28deg); filter: blur(8px); } 55% { opacity: 1; transform: translateX(14px) skewX(10deg); filter: blur(0); } 78% { transform: translateX(-4px) skewX(-3deg); } }
.sp-racing .vs-name { font-style: italic; animation: vx-skidname .8s .3s cubic-bezier(.2,.9,.25,1) both, hx-shine 3s 1.4s linear infinite; }
@keyframes vx-skidname { from { opacity: 0; transform: translateX(380px) skewX(-25deg); } 60% { opacity: 1; transform: translateX(-10px) skewX(6deg); } }

/* ---------- Match day: floodlights come on over the pitch ---------- */
.sp-matchday { background: radial-gradient(70% 30% at 50% 60%, #ffffff12, #0000 70%), linear-gradient(#04060f, #0d1631 50%, #0e2a1b 62%); }
.sp-matchday .vs-art { position: absolute; inset: 0; overflow: hidden; }
.sp-matchday .vs-art i:nth-child(1) { display: block; position: absolute; left: -40%; right: -40%; bottom: -12%; height: 56%; transform: perspective(700px) rotateX(48deg); transform-origin: 50% 100%;
  background: linear-gradient(#0000, #00000040), repeating-linear-gradient(0deg, #23843a 0 40px, #1b7030 40px 80px); box-shadow: 0 -20px 60px #22c55e33; animation: vx-pitch 2s .2s linear both; }
@keyframes vx-pitch { from { filter: brightness(.25); } 15% { filter: brightness(.9); } 20% { filter: brightness(.35); } 35% { filter: brightness(1); } }
.sp-matchday .vs-art i:nth-child(1)::before { content: ""; position: absolute; left: 0; right: 0; top: 30%; height: 3px; background: #ffffffd0; }
.sp-matchday .vs-art i:nth-child(1)::after { content: ""; position: absolute; left: 50%; top: 30%; width: 230px; height: 230px; translate: -50% -50%; border-radius: 50%; border: 3px solid #ffffffd0; }
.sp-matchday .vs-art i:nth-child(2), .sp-matchday .vs-art i:nth-child(3) { display: block; position: absolute; top: 5%; width: 66px; height: 40px; border-radius: 5px; z-index: 1;
  background: radial-gradient(circle, #fff 0 3px, #fff0 4px) 3px 2px/15px 12px, #1e2638; box-shadow: 0 0 40px 10px #fffbe666; animation: vx-flood 1.4s linear both; }
.sp-matchday .vs-art i:nth-child(2) { left: 5%; rotate: -14deg; } .sp-matchday .vs-art i:nth-child(3) { right: 5%; rotate: 14deg; animation-delay: .15s; }
@keyframes vx-flood { 0%, 14% { filter: brightness(.2); box-shadow: none; } 16% { filter: brightness(1.4); } 19% { filter: brightness(.25); box-shadow: none; } 26% { filter: brightness(1.2); } }
.sp-matchday .vs-art i:nth-child(4), .sp-matchday .vs-art i:nth-child(5) { display: block; position: absolute; top: 7%; width: 85%; height: 90%; filter: blur(10px);
  background: linear-gradient(162deg, #fffbe670, #fffbe60c 70%); animation: vx-beamon 1.4s linear both, vx-sway 4s 1.4s ease-in-out infinite alternate; }
.sp-matchday .vs-art i:nth-child(4) { left: 8%; clip-path: polygon(0 0, 12% 0, 100% 100%, 30% 100%); transform-origin: 0 0; }
.sp-matchday .vs-art i:nth-child(5) { right: 8%; clip-path: polygon(88% 0, 100% 0, 70% 100%, 0 100%); transform-origin: 100% 0; animation-delay: .15s, 1.5s; background: linear-gradient(198deg, #fffbe670, #fffbe60c 70%); }
@keyframes vx-beamon { 0%, 14% { opacity: 0; } 16% { opacity: 1; } 19% { opacity: .1; } 26%, 100% { opacity: 1; } }
@keyframes vx-sway { to { transform: rotate(2deg); } }
.sp-matchday .vs-art i:nth-child(6) { display: block; position: absolute; left: 0; right: 0; top: 50%; height: 8%;
  background: radial-gradient(#ffffffc0 0 1px, #0000 1.6px) 0 0/23px 13px, radial-gradient(#ffffff80 0 1px, #0000 1.6px) 11px 6px/31px 17px, linear-gradient(#111827, #0b1220);
  -webkit-mask: linear-gradient(#0000, #000 30%); mask: linear-gradient(#0000, #000 30%); animation: vx-crowd .6s steps(2) infinite; }
@keyframes vx-crowd { 50% { background-position: 6px 3px, 0 0, 0 0; } }
.vsplash.sp-matchday .vs-mid .orb { animation: vs-drop 1s .35s cubic-bezier(.3,1.5,.5,1) both, vs-glow 2.4s 1.4s ease-in-out infinite; }
.sp-matchday .vs-name { filter: drop-shadow(0 2px 10px #000c); }

/* ---------- Neon sign on a brick wall ---------- */
.sp-neon { background: radial-gradient(55% 40% at 50% 46%, var(--a-30), transparent 72%),
    conic-gradient(from 90deg at 2px 26px, #0000 75%, #0009 0) 0 0/56px 52px, conic-gradient(from 90deg at 2px 26px, #0000 75%, #0009 0) 28px 26px/56px 52px,
    linear-gradient(#0000 0 24px, #0009 24px) 0 0/100% 26px, linear-gradient(#1d0f15, #12090d); }
.sp-neon .vs-art { position: absolute; inset: 0; overflow: hidden; }
.sp-neon .vs-art::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, #0000 40%, #000c); }
.sp-neon .vs-art i:nth-child(1) { display: block; position: absolute; left: 50%; top: var(--logo-y); width: 178px; height: 178px; margin: -89px; border-radius: 50%;
  border: 4px solid #fff; box-shadow: 0 0 4px var(--a), 0 0 14px var(--a), 0 0 34px var(--a), inset 0 0 12px var(--a), inset 0 0 24px var(--a-45);
  animation: vx-neonon 1.2s .1s linear both, vx-buzz 3.3s 1.6s steps(1) infinite; }
.sp-neon .vs-art i:nth-child(2) { display: block; position: absolute; left: 50%; top: 0; width: 2px; height: calc(var(--logo-y) - 89px); margin-left: -1px; background: #2b1b22; }
@keyframes vx-neonon { 0% { opacity: .08; } 8% { opacity: 1; } 11% { opacity: .1; } 22% { opacity: .1; } 25% { opacity: 1; } 28% { opacity: .3; } 40% { opacity: 1; } 44% { opacity: .5; } 50%, 100% { opacity: 1; } }
@keyframes vx-buzz { 0%, 100% { opacity: 1; } 40% { opacity: .55; } 42% { opacity: 1; } 76% { opacity: .7; } 77% { opacity: 1; } }
.vsplash.sp-neon .vs-mid .orb { animation: vx-neonon 1.1s .2s linear both, vs-glow 2.4s 1.4s ease-in-out infinite; }
.sp-neon .vs-name { background: none; color: #fff; text-shadow: 0 0 2px #fff, 0 0 8px var(--a2), 0 0 18px var(--a2), 0 0 36px var(--a2);
  animation: vx-neonon .9s .25s linear both, vx-buzz 4.1s 2s steps(1) infinite; }
.sp-neon .vs-bar { height: 4px; width: 150px; background: #fff; box-shadow: 0 0 6px var(--a), 0 0 16px var(--a); animation: vx-neonon 1s .7s linear both; }
.sp-neon .vs-bar i { display: none; }

/* ---------- Typewriter: the name is typed onto a sheet (light) ---------- */
.sp-typewriter { background: radial-gradient(90% 70% at 50% 40%, #efe9dc, #d6ccb7); }
.sp-typewriter .vs-art { position: absolute; inset: 0; overflow: hidden; }
.sp-typewriter .vs-art::before { content: ""; position: absolute; left: 50%; top: 6%; bottom: -2%; width: min(86%, 440px); translate: -50% 0; background: #fffdf7;
  box-shadow: 0 10px 40px #0002, 0 1px 0 #0001; animation: vx-feed .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes vx-feed { from { transform: translateY(46%); } }
.sp-typewriter .vs-art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7%; min-height: 40px;
  background: radial-gradient(circle at 6% 50%, #c9c9cf 0 9px, #0000 10px), radial-gradient(circle at 94% 50%, #c9c9cf 0 9px, #0000 10px), linear-gradient(#3b3530, #1f1b18); box-shadow: 0 -6px 20px #0003; }
.sp-typewriter .vs-art i:nth-child(1) { display: block; position: absolute; left: 50%; top: calc(var(--logo-y) - 150px); width: min(70%, 340px); translate: -50% 0; font: 500 13px/1.6 "Courier New", Courier, ui-monospace, monospace;
  font-style: normal; color: #6b6259; letter-spacing: .04em; white-space: nowrap; overflow: hidden; animation: vx-show .3s .4s both; }
.sp-typewriter .vs-art i:nth-child(1)::before { content: "Welcome back,"; }
.vsplash.sp-typewriter .vs-mid .orb { animation: vx-stamp .5s .3s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes vx-stamp { from { opacity: 0; transform: scale(2.3) rotate(-14deg); } 60% { opacity: 1; transform: scale(.94) rotate(2deg); } }
.sp-typewriter .vs-mid .orb .halo { display: none; }
.sp-typewriter .vs-mid .orb .ball { box-shadow: 0 0 0 3px #fffdf7, 0 0 0 5px var(--a-45), 0 8px 24px #0002; }
.vsplash.sp-typewriter .vs-name { position: relative; background: none; color: #1d1a16; font-family: "Courier New", Courier, ui-monospace, monospace; font-weight: 700; letter-spacing: 0;
  clip-path: inset(-6px -10px -6px -6px); animation: vs-up .3s .45s both; }
.sp-typewriter .vs-name::after { content: ""; position: absolute; left: -2px; top: -3px; bottom: -3px; right: -5px; background: #fffdf7; border-left: 3px solid var(--a);
  transform: translateX(100%); animation: vx-type .8s .55s steps(14) both, vx-caret .55s 1.4s steps(1) infinite; }
@keyframes vx-type { from { transform: translateX(0); } }
@keyframes vx-caret { 50% { border-left-color: #0000; } }
.sp-typewriter .vs-bar { background: #0001; }

/* ---------- 3D cube turning behind the logo ---------- */
.sp-cube { background: radial-gradient(55% 40% at 50% 44%, var(--a-30), transparent 70%), linear-gradient(#0b0818, #040309); }
.sp-cube::after { content: ""; position: absolute; left: -30%; right: -30%; bottom: 0; height: 32%; transform: perspective(300px) rotateX(60deg); transform-origin: 50% 100%;
  background: repeating-linear-gradient(90deg, var(--a-30) 0 1px, #0000 1px 46px), repeating-linear-gradient(0deg, var(--a-30) 0 1px, #0000 1px 36px);
  -webkit-mask: linear-gradient(#0000, #000 70%); mask: linear-gradient(#0000, #000 70%); animation: vx-floor2 1s linear infinite; }
@keyframes vx-floor2 { to { background-position: 0 0, 0 36px; } }
.sp-cube .vs-art { position: absolute; left: 50%; top: var(--logo-y); width: 0; height: 0; transform-style: preserve-3d;
  animation: vx-cube 5s linear infinite, vx-cubein .9s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes vx-cube { from { transform: perspective(900px) rotateX(-24deg) rotateY(0); } to { transform: perspective(900px) rotateX(-24deg) rotateY(360deg); } }
@keyframes vx-cubein { from { scale: 0; } }
.sp-cube .vs-art i { display: block; position: absolute; width: 196px; height: 196px; margin: -98px; border: 2px solid var(--a); background: var(--a-12);
  box-shadow: 0 0 18px var(--a-45), inset 0 0 26px var(--a-30); backface-visibility: visible; }
.sp-cube .vs-art i:nth-child(1) { transform: translateZ(98px); } .sp-cube .vs-art i:nth-child(2) { transform: rotateY(90deg) translateZ(98px); }
.sp-cube .vs-art i:nth-child(3) { transform: rotateY(180deg) translateZ(98px); } .sp-cube .vs-art i:nth-child(4) { transform: rotateY(-90deg) translateZ(98px); }
.sp-cube .vs-art i:nth-child(5) { transform: rotateX(90deg) translateZ(98px); } .sp-cube .vs-art i:nth-child(6) { transform: rotateX(-90deg) translateZ(98px); }
.sp-cube .vs-art i:nth-child(n+7) { width: 300px; height: 300px; margin: -150px; border: 1px solid var(--a2-45); background: none; box-shadow: none; }
.sp-cube .vs-art i:nth-child(7) { transform: translateZ(150px); } .sp-cube .vs-art i:nth-child(8) { transform: rotateY(90deg) translateZ(150px); }
.sp-cube .vs-art i:nth-child(9) { transform: rotateY(180deg) translateZ(150px); } .sp-cube .vs-art i:nth-child(10) { transform: rotateY(-90deg) translateZ(150px); }
.sp-cube .vs-art i:nth-child(11) { transform: rotateX(90deg) translateZ(150px); } .sp-cube .vs-art i:nth-child(12) { transform: rotateX(-90deg) translateZ(150px); }
.vsplash.sp-cube .vs-mid .orb { animation: vs-flip 1s .25s cubic-bezier(.2,.8,.2,1) both, vs-glow 2.4s 1.3s ease-in-out infinite; }
.sp-cube .vs-name { filter: drop-shadow(0 2px 8px #000c); }

@media (prefers-reduced-motion: reduce) { .vsplash .vs-art::before, .vsplash .vs-art::after, .vsplash .vs-name::after, .vsplash .orb::after, .sp-cube::after { animation: none !important; } }